refactor(frontend): storage panel answers in place instead of toasts, empty groups hidden, weight bar animates by transform

frontend/src/lib/components/disk/StoragePanel.svelte

@@ -31,7 +31,6 @@
     messagesLabel,
   } from "#lib/format/storage.js";
   import { chats } from "#lib/stores/chats.svelte.js";
-  import { toasts } from "#lib/stores/toasts.svelte.js";
   import { ui } from "#lib/stores/ui.svelte.js";
   import { isMobile } from "#lib/viewport.js";
   import { goto } from "$app/navigation";
@@ -47,6 +46,7 @@
   let done = $state(false);
   let busy = $state(false);
   let undo = $state<TrashOutcome | null>(null);
+  let problem = $state<string | null>(null);
   let viewerOpen = $state(false);
   let viewerIndex = $state(0);
   const selected = new SvelteSet<number>();
@@ -61,8 +61,9 @@
   const chosenGone = $derived(
     chosen.filter((file) => !file.refetchable).length
   );
-  const segments = $derived(
-    summary?.groups.filter((item) => item.bytes > 0) ?? []
+  const groups = $derived(
+    summary?.groups.filter((item) => item.files > 0 || item.group === group) ??
+      []
   );
   const viewerItems = $derived<ViewerItem[]>(
     files.map((file) => ({
@@ -133,6 +134,7 @@
 
   function toggle(mediaId: number) {
     hideUndo();
+    problem = null;
     if (!selected.delete(mediaId)) {
       selected.add(mediaId);
     }
@@ -156,6 +158,7 @@
       return;
     }
     busy = true;
+    problem = null;
     try {
       const outcome = await moveToTrash(mediaIds);
       const moved = new Set(
@@ -170,11 +173,11 @@
       selected.clear();
       showUndo(outcome);
       if (outcome.blocked.length > 0) {
-        toasts.error("Файл занят в сторис или аватаре и остался на диске");
+        problem = "Файл занят в сторис или аватаре и остался на диске";
       }
       await loadSummary();
     } catch {
-      toasts.error("Не удалось переместить в корзину");
+      problem = "Не удалось переместить в корзину";
     } finally {
       busy = false;
     }
@@ -190,7 +193,7 @@
       await restoreFromTrash(keys);
       reload();
     } catch {
-      toasts.error("Не удалось вернуть файлы");
+      problem = "Не удалось вернуть файлы";
     }
   }
 
@@ -198,7 +201,7 @@
     try {
       await downloadMedia(file.media_id);
     } catch {
-      toasts.error("Не удалось скачать файл");
+      problem = "Не удалось скачать файл";
     }
   }
 
@@ -217,6 +220,7 @@
 
   function pick(next: StorageGroupName) {
     group = group === next ? null : next;
+    problem = null;
     reload();
   }
 
@@ -226,14 +230,14 @@
 
 <div class="storage">
   {#if summary}
-    <section class="summary">
-      <div class="hero">
-        <span class="total">{formatBytes(summary.bytes) || "0 B"}</span>
-        <span class="count">{filesLabel(summary.files)} на диске</span>
-      </div>
-      {#if segments.length > 0}
+    {#if summary.files > 0}
+      <section class="summary">
+        <div class="hero">
+          <span class="total">{formatBytes(summary.bytes)}</span>
+          <span class="count">{filesLabel(summary.files)} на диске</span>
+        </div>
         <div class="stack">
-          {#each segments as item (item.group)}
+          {#each groups as item (item.group)}
             <span
               title="{GROUP_LABELS[item.group]}: {formatBytes(item.bytes)}"
               style:background-color="var(--color-storage-{item.group})"
@@ -241,27 +245,26 @@
             ></span>
           {/each}
         </div>
-      {/if}
-      <div class="legend">
-        {#each summary.groups as item (item.group)}
-          <button
-            aria-pressed={group === item.group}
-            class="chip"
-            disabled={item.files === 0}
-            onclick={() => pick(item.group)}
-            type="button"
-            class:on={group === item.group}
-          >
-            <span
-              class="dot"
-              style:background-color="var(--color-storage-{item.group})"
-            ></span>
-            {GROUP_LABELS[item.group]}
-            <span class="value">{formatBytes(item.bytes) || "0"}</span>
-          </button>
-        {/each}
-      </div>
-    </section>
+        <div class="legend">
+          {#each groups as item (item.group)}
+            <button
+              aria-pressed={group === item.group}
+              class="chip"
+              onclick={() => pick(item.group)}
+              type="button"
+              class:on={group === item.group}
+            >
+              <span
+                class="dot"
+                style:background-color="var(--color-storage-{item.group})"
+              ></span>
+              {GROUP_LABELS[item.group]}
+              <span class="value">{formatBytes(item.bytes)}</span>
+            </button>
+          {/each}
+        </div>
+      </section>
+    {/if}
 
     <button
       class="trash-link"
@@ -279,16 +282,18 @@
     </button>
   {/if}
 
-  <div class="section-title">
-    <h3>Самые тяжёлые</h3>
-    {#if summary && group === null && summary.heavy_files > 0}
-      <span>
-        {filesLabel(summary.heavy_files)}
-        крупнее {formatBytes(summary.heavy_threshold)}
-        = {formatBytes(summary.heavy_bytes)}
-      </span>
-    {/if}
-  </div>
+  {#if files.length > 0}
+    <div class="section-title">
+      <h3>Самые тяжёлые</h3>
+      {#if summary && group === null && summary.heavy_files > 0}
+        <span>
+          {filesLabel(summary.heavy_files)}
+          крупнее {formatBytes(summary.heavy_threshold)}
+          = {formatBytes(summary.heavy_bytes)}
+        </span>
+      {/if}
+    </div>
+  {/if}
 
   <div class="list">
     {#each files as file, index (file.media_id)}
@@ -350,7 +355,8 @@
 
   {#if chosen.length > 0}
     <SelectionBar
-      note={chosenGone > 0 ? `${chosenGone} не скачать заново` : undefined}
+      note={problem ??
+        (chosenGone > 0 ? `${chosenGone} не скачать заново` : undefined)}
       title="{filesLabel(chosen.length)} · {formatBytes(chosenBytes)}"
       warn
     >
@@ -370,14 +376,27 @@
     </SelectionBar>
   {:else if undo}
     <SelectionBar
-      note="{formatBytes(undo.bytes)} освободится через 7 дней"
+      note={problem ?? `${formatBytes(undo.bytes)} освободится через 7 дней`}
       title="{filesLabel(undo.files)} в корзине"
+      warn={problem !== null}
     >
       <Button onclick={restoreLast} smaller variant="text">
         <Icon name="undo" size="1.25rem" />
         <span>Вернуть</span>
       </Button>
     </SelectionBar>
+  {:else if problem}
+    <SelectionBar title={problem}>
+      <Button
+        onclick={() => {
+          problem = null;
+        }}
+        smaller
+        variant="text"
+      >
+        Понятно
+      </Button>
+    </SelectionBar>
   {/if}
 </div>
 
@@ -482,18 +501,13 @@
       box-shadow: inset 0 0 0 1px var(--color-primary);
     }
 
-    &:disabled {
-      cursor: default;
-      opacity: 0.5;
-    }
-
     &:focus-visible {
       outline: 2px solid var(--color-primary);
       outline-offset: 1px;
     }
 
     @media (hover: hover) {
-      &:not(:disabled, .on):hover {
+      &:not(.on):hover {
         background-color: var(--color-background-secondary-accent);
       }
     }