Enhance media upload functionality: add skipped file tracking in upload store, update UploadSnackbar to display skipped duplicates, and improve UI responsiveness for upload status indicators.

frontend/src/features/admin/media/UploadSnackbar.tsx

@@ -6,46 +6,71 @@ import { type UploadItem, useUploadStore } from './upload-store'
 function StatusIcon({ status }: { status: UploadItem['status'] }) {
   switch (status) {
     case 'done':
-      return <Check className="h-3.5 w-3.5 text-primary" />
+      return <Check className="h-3.5 w-3.5 shrink-0 text-primary" />
     case 'error':
-      return <AlertCircle className="h-3.5 w-3.5 text-red-500" />
+      return <AlertCircle className="h-3.5 w-3.5 shrink-0 text-red-500" />
     case 'uploading':
-      return <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
+      return <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin text-muted-foreground" />
     default:
-      return <Clock className="h-3.5 w-3.5 text-muted-foreground" />
+      return <Clock className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
   }
 }
 
+function barWidth(item: UploadItem): number {
+  if (item.status === 'done' || item.status === 'error') return 100
+  if (item.status === 'uploading') return item.percent
+  return 0
+}
+
 /** Глобальный индикатор загрузок: живёт вне страниц, поэтому загрузка идёт при любой навигации. */
 export function UploadSnackbar() {
   const { t } = useTranslation()
-  const { items, active, minimized, toggleMinimize, dismiss } = useUploadStore()
+  const { items, active, minimized, skipped, toggleMinimize, dismiss } = useUploadStore()
 
-  if (items.length === 0) return null
+  if (items.length === 0 && skipped === 0) return null
 
   const done = items.filter((i) => i.status === 'done').length
-  const header = active
-    ? t('admin.media.uploadingCount', { done, total: items.length })
-    : t('admin.media.uploadedCount', { count: done })
+  const hasItems = items.length > 0
+  const header = hasItems
+    ? active
+      ? t('admin.media.uploadingCount', { done, total: items.length })
+      : t('admin.media.uploadedCount', { count: done })
+    : t('admin.media.skippedDuplicates', { count: skipped })
 
   return (
-    <div className="crt-panel fixed bottom-4 right-4 z-50 w-80 max-w-[calc(100vw-2rem)] rounded-md shadow-lg">
+    <div className="crt-panel fixed bottom-4 right-4 z-50 w-96 max-w-[calc(100vw-2rem)] rounded-md shadow-lg">
       <div className="flex items-center gap-2 border-b border-border px-3 py-2 text-sm">
         <span className="truncate font-medium">{header}</span>
-        <button type="button" className="ml-auto opacity-70 hover:opacity-100" onClick={toggleMinimize}>
-          {minimized ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
-        </button>
+        {hasItems && (
+          <button
+            type="button"
+            className="ml-auto opacity-70 hover:opacity-100"
+            onClick={toggleMinimize}
+          >
+            {minimized ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+          </button>
+        )}
         {!active && (
-          <button type="button" className="opacity-70 hover:opacity-100" onClick={dismiss}>
+          <button
+            type="button"
+            className={cn('opacity-70 hover:opacity-100', !hasItems && 'ml-auto')}
+            onClick={dismiss}
+          >
             <X className="h-4 w-4" />
           </button>
         )}
       </div>
 
-      {!minimized && (
-        <ul className="max-h-64 divide-y divide-border overflow-y-auto">
+      {hasItems && skipped > 0 && (
+        <div className="border-b border-border px-3 py-1.5 text-xs text-muted-foreground">
+          {t('admin.media.skippedDuplicates', { count: skipped })}
+        </div>
+      )}
+
+      {hasItems && !minimized && (
+        <ul className="max-h-72 divide-y divide-border overflow-y-auto">
           {items.map((item) => (
-            <li key={item.id} className="flex flex-col gap-1 px-3 py-2 text-xs">
+            <li key={item.id} className="flex flex-col gap-1.5 px-3 py-2 text-xs">
               <div className="flex items-center gap-2">
                 <StatusIcon status={item.status} />
                 <span className="truncate" title={item.name}>
@@ -55,14 +80,15 @@ export function UploadSnackbar() {
                   <span className="ml-auto shrink-0 text-muted-foreground">{item.percent}%</span>
                 )}
               </div>
-              {item.status === 'uploading' && (
-                <div className="h-1 w-full overflow-hidden rounded bg-muted">
-                  <div
-                    className={cn('h-full rounded bg-primary transition-[width]')}
-                    style={{ width: `${item.percent}%` }}
-                  />
-                </div>
-              )}
+              <div className="h-1 w-full overflow-hidden rounded bg-muted">
+                <div
+                  className={cn(
+                    'h-full rounded transition-[width]',
+                    item.status === 'error' ? 'bg-red-500' : 'bg-primary',
+                  )}
+                  style={{ width: `${barWidth(item)}%` }}
+                />
+              </div>
             </li>
           ))}
         </ul>