feat: polish management, viewer, and toast ux

Author: ifsix

frontend/public/locales/ru/minecraft-viewer.json

@@ -1,6 +1,9 @@
 {
   "connecting": "Подключение к боту...",
   "error": "Ошибка",
+  "errors": {
+    "botNotRunning": "Бот не запущен"
+  },
   "settingsButton": "Настройки (Esc)",
   "settings": {
     "title": "Настройки",

frontend/public/locales/ru/nodes.json

@@ -529,17 +529,71 @@
 
   "action:create_command": {
     "label": "Создать команду",
-    "description": "Создаёт новую команду"
+    "description": "Создаёт новую команду",
+    "pins": {
+      "exec": "Выполнить",
+      "name": "Имя команды",
+      "description": "Описание",
+      "aliases": "Алиасы",
+      "cooldown": "Кулдаун (сек)",
+      "allowedChatTypes": "Типы чата",
+      "permissionName": "Название права",
+      "temporary": "Временная?",
+      "commandId": "ID команды",
+      "success": "Успешно?"
+    },
+    "placeholders": {
+      "name": "моя-команда",
+      "description": "Описание команды",
+      "aliases": "[\"алиас1\", \"алиас2\"]",
+      "cooldown": "0",
+      "allowedChatTypes": "[\"chat\", \"private\"]",
+      "permissionName": "модератор"
+    },
+    "options": {
+      "temporary": {
+        "false": "Постоянная",
+        "true": "Временная"
+      }
+    }
   },
 
   "action:update_command": {
     "label": "Обновить команду",
-    "description": "Обновляет существующую команду"
+    "description": "Обновляет существующую команду",
+    "pins": {
+      "exec": "Выполнить",
+      "commandName": "Имя команды",
+      "newName": "Новое имя",
+      "description": "Описание",
+      "aliases": "Алиасы",
+      "cooldown": "Кулдаун (сек)",
+      "allowedChatTypes": "Типы чата",
+      "permissionName": "Название права",
+      "success": "Успешно?"
+    },
+    "placeholders": {
+      "commandName": "моя-команда",
+      "newName": "новая-команда",
+      "description": "Новое описание команды",
+      "aliases": "[\"алиас1\", \"алиас2\"]",
+      "cooldown": "0",
+      "allowedChatTypes": "[\"chat\", \"private\"]",
+      "permissionName": "модератор"
+    }
   },
 
   "action:delete_command": {
     "label": "Удалить команду",
-    "description": "Удаляет команду"
+    "description": "Удаляет команду",
+    "pins": {
+      "exec": "Выполнить",
+      "commandName": "Имя команды",
+      "success": "Успешно?"
+    },
+    "placeholders": {
+      "commandName": "моя-команда"
+    }
   },
 
   "time:datetime_literal": {

frontend/src/components/InstalledPluginsView.jsx

@@ -292,7 +292,7 @@ function InstalledPluginCard({
           <IconComponent
             name={plugin.manifest?.icon}
             className={cn(
-              'h-10 w-10 transform-gpu transition-transform duration-300 ease-out group-hover:scale-105',
+              'h-10 w-10 transform-gpu transition-[filter,transform,color,opacity] duration-300 ease-out group-hover:scale-105',
               displayEnabled ? 'text-primary' : 'text-muted-foreground',
               isHovered && 'drop-shadow-glow'
             )}
@@ -432,7 +432,7 @@ function InstalledPluginCard({
               <IconComponent
                 name={plugin.manifest?.icon}
                 className={cn(
-                  'h-10 w-10 transform-gpu transition-transform duration-300 ease-out group-hover:scale-105',
+                  'h-10 w-10 transform-gpu transition-[filter,transform,color,opacity] duration-300 ease-out group-hover:scale-105',
                   displayEnabled ? 'text-primary' : 'text-muted-foreground',
                   isHovered && 'drop-shadow-glow'
                 )}

frontend/src/components/PluginListItem.jsx

@@ -89,13 +89,16 @@ export default function PluginListItem({ plugin, isInstalled, isInstalling, onIn
       >
         <div
           className={cn(
-            'relative mt-1 shrink-0 transition-transform duration-200',
+            'relative mt-1 shrink-0 transition-[filter,transform,opacity] duration-300 ease-out',
             isHovered && 'scale-105'
           )}
         >
           <IconComponent
             name={plugin.icon}
-            className={cn('h-12 w-12 text-primary', isHovered && 'drop-shadow-glow')}
+            className={cn(
+              'h-12 w-12 text-primary transition-[filter,color,opacity] duration-300 ease-out',
+              isHovered && 'drop-shadow-glow'
+            )}
           />
         </div>
 

frontend/src/components/management/CommandsManager.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { AnimatePresence, motion } from 'framer-motion';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
@@ -63,6 +64,10 @@ export default function CommandsManager({ commands = [], allPermissions = [], bo
             active: localCommands.filter(c => c.isEnabled).length
         };
     }, [localCommands]);
+    const activeCountLabel = useMemo(
+        () => t('commands.activeCount', { active: stats.active, total: stats.total }),
+        [stats.active, stats.total, t]
+    );
 
     const handleOpenModal = (command) => {
         if (command.isVisual || (command.graphJson && command.graphJson !== 'null')) {
@@ -160,8 +165,19 @@ export default function CommandsManager({ commands = [], allPermissions = [], bo
                     <div className="flex-1">
                         <div className="flex items-baseline gap-3 mb-1">
                             <CardTitle className="text-2xl font-bold tracking-tight">{t('commands.title')}</CardTitle>
-                            <span className="text-sm text-muted-foreground">
-                                {t('commands.activeCount', { active: stats.active, total: stats.total })}
+                            <span className="relative inline-flex min-h-[20px] items-center overflow-hidden text-sm text-muted-foreground">
+                                <AnimatePresence mode="wait" initial={false}>
+                                    <motion.span
+                                        key={activeCountLabel}
+                                        initial={{ opacity: 0, y: 4 }}
+                                        animate={{ opacity: 1, y: 0 }}
+                                        exit={{ opacity: 0, y: -4 }}
+                                        transition={{ duration: 0.18, ease: [0.22, 1, 0.36, 1] }}
+                                        className="inline-block"
+                                    >
+                                        {activeCountLabel}
+                                    </motion.span>
+                                </AnimatePresence>
                             </span>
                         </div>
                         <CardDescription>{t('commands.description')}</CardDescription>

frontend/src/components/ui/toast.jsx

@@ -8,6 +8,66 @@ import { cn } from "@/lib/utils"
 
 const ToastProvider = ToastPrimitives.Provider
 
+const TOAST_TEXT_FADE_OUT_MS = 130
+const TOAST_TEXT_FADE_IN_MS = 220
+
+function AnimatedToastText({ children, className }) {
+  const [renderedChildren, setRenderedChildren] = React.useState(children)
+  const [phase, setPhase] = React.useState("")
+  const isFirstRenderRef = React.useRef(true)
+  const previousChildrenRef = React.useRef(children)
+  const fadeOutTimeoutRef = React.useRef(null)
+  const fadeInTimeoutRef = React.useRef(null)
+
+  React.useEffect(() => {
+    return () => {
+      if (fadeOutTimeoutRef.current) {
+        window.clearTimeout(fadeOutTimeoutRef.current)
+      }
+      if (fadeInTimeoutRef.current) {
+        window.clearTimeout(fadeInTimeoutRef.current)
+      }
+    }
+  }, [])
+
+  React.useEffect(() => {
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false
+      previousChildrenRef.current = children
+      setRenderedChildren(children)
+      return
+    }
+
+    if (Object.is(previousChildrenRef.current, children)) {
+      return
+    }
+
+    previousChildrenRef.current = children
+
+    if (fadeOutTimeoutRef.current) {
+      window.clearTimeout(fadeOutTimeoutRef.current)
+    }
+    if (fadeInTimeoutRef.current) {
+      window.clearTimeout(fadeInTimeoutRef.current)
+    }
+
+    setPhase("toast-text-leave")
+    fadeOutTimeoutRef.current = window.setTimeout(() => {
+      setRenderedChildren(children)
+      setPhase("toast-text-enter")
+      fadeInTimeoutRef.current = window.setTimeout(() => {
+        setPhase("")
+      }, TOAST_TEXT_FADE_IN_MS)
+    }, TOAST_TEXT_FADE_OUT_MS)
+  }, [children])
+
+  return (
+    <span className={cn("block toast-text-transition", phase, className)}>
+      {renderedChildren}
+    </span>
+  )
+}
+
 const ToastViewport = React.forwardRef(({ className, ...props }, ref) => (
   <ToastPrimitives.Viewport
     ref={ref}
@@ -39,7 +99,7 @@ const Toast = React.forwardRef(({ className, variant, ...props }, ref) => {
   return (
     <ToastPrimitives.Root
       ref={ref}
-      className={cn(toastVariants({ variant }), className)}
+      className={cn(toastVariants({ variant }), "toast-text-rendering", className)}
       {...props} />
   );
 })
@@ -74,12 +134,17 @@ const ToastTitle = React.forwardRef(({ className, ...props }, ref) => (
   <ToastPrimitives.Title
     ref={ref}
     className={cn("text-sm font-semibold [&+div]:text-xs", className)}
-    {...props} />
+    {...props}
+  >
+    <AnimatedToastText>{props.children}</AnimatedToastText>
+  </ToastPrimitives.Title>
 ))
 ToastTitle.displayName = ToastPrimitives.Title.displayName
 
 const ToastDescription = React.forwardRef(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
+  <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props}>
+    <AnimatedToastText>{props.children}</AnimatedToastText>
+  </ToastPrimitives.Description>
 ))
 ToastDescription.displayName = ToastPrimitives.Description.displayName
 

frontend/src/hooks/use-toast.js

@@ -2,6 +2,7 @@ import * as React from "react"
 
 const TOAST_LIMIT = 1
 const TOAST_REMOVE_DELAY = 1000000
+const DEFAULT_TOAST_DURATION = 4200
 
 const actionTypes = {
   ADD_TOAST: "ADD_TOAST",
@@ -18,6 +19,34 @@ function genId() {
 }
 
 const toastTimeouts = new Map()
+const autoDismissTimeouts = new Map()
+
+const clearAutoDismissTimeout = (toastId) => {
+  if (!autoDismissTimeouts.has(toastId)) {
+    return
+  }
+
+  window.clearTimeout(autoDismissTimeouts.get(toastId))
+  autoDismissTimeouts.delete(toastId)
+}
+
+const scheduleAutoDismiss = (toastId, duration = DEFAULT_TOAST_DURATION) => {
+  clearAutoDismissTimeout(toastId)
+
+  if (!Number.isFinite(duration) || duration <= 0) {
+    return
+  }
+
+  const timeout = window.setTimeout(() => {
+    autoDismissTimeouts.delete(toastId)
+    dispatch({
+      type: "DISMISS_TOAST",
+      toastId,
+    })
+  }, duration)
+
+  autoDismissTimeouts.set(toastId, timeout)
+}
 
 const addToRemoveQueue = (toastId) => {
   if (toastTimeouts.has(toastId)) {
@@ -38,6 +67,15 @@ const addToRemoveQueue = (toastId) => {
 export const reducer = (state, action) => {
   switch (action.type) {
     case "ADD_TOAST":
+      const existingToastIndex = state.toasts.findIndex((t) => t.id === action.toast.id)
+      if (existingToastIndex !== -1) {
+        const nextToasts = [...state.toasts]
+        nextToasts.splice(existingToastIndex, 1)
+        return {
+          ...state,
+          toasts: [action.toast, ...nextToasts].slice(0, TOAST_LIMIT),
+        };
+      }
       return {
         ...state,
         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
@@ -73,6 +111,11 @@ export const reducer = (state, action) => {
       };
     }
     case "REMOVE_TOAST":
+      if (action.toastId !== undefined) {
+        clearAutoDismissTimeout(action.toastId)
+      } else {
+        state.toasts.forEach((toast) => clearAutoDismissTimeout(toast.id))
+      }
       if (action.toastId === undefined) {
         return {
           ...state,
@@ -100,26 +143,45 @@ function dispatch(action) {
 function toast({
   ...props
 }) {
-  const id = genId()
+  const id = props.id ?? genId()
+  const duration = typeof props.duration === "number" ? props.duration : DEFAULT_TOAST_DURATION
+  const buildToastPayload = (nextProps = {}) => ({
+    ...props,
+    ...nextProps,
+    id,
+    duration: typeof nextProps.duration === "number" ? nextProps.duration : duration,
+    open: true,
+    onOpenChange: (open) => {
+      if (!open) dismiss()
+    },
+  })
+
+  const update = (nextProps) => {
+    const nextDuration =
+      typeof nextProps?.duration === "number"
+        ? nextProps.duration
+        : memoryState.toasts.find((toast) => toast.id === id)?.duration ?? duration
 
-  const update = (props) =>
     dispatch({
       type: "UPDATE_TOAST",
-      toast: { ...props, id },
+      toast: buildToastPayload({ ...nextProps, duration: nextDuration }),
     })
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+    scheduleAutoDismiss(id, nextDuration)
+  }
+
+  const dismiss = () => {
+    clearAutoDismissTimeout(id)
+    dispatch({ type: "DISMISS_TOAST", toastId: id })
+  }
+
+  const payload = buildToastPayload()
+  const hasExistingToast = memoryState.toasts.some((toast) => toast.id === id)
 
   dispatch({
-    type: "ADD_TOAST",
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss()
-      },
-    },
+    type: hasExistingToast ? "UPDATE_TOAST" : "ADD_TOAST",
+    toast: payload,
   })
+  scheduleAutoDismiss(id, payload.duration)
 
   return {
     id: id,