feat(frontend): storage shows the heaviest chats, a chat opens its own files with selective cleanup and a whole-chat move to trash

frontend/src/lib/components/policy/PolicyCard.svelte

@@ -4,9 +4,6 @@
     createPolicy,
     deletePolicy,
     getPolicyScope,
-    getStorageScope,
-    restoreFromTrash,
-    trashScope,
     updatePolicy,
   } from "#lib/api/endpoints.js";
   import type {
@@ -15,13 +12,11 @@
     PolicyRecord,
     PolicyScopeType,
     ScopeTarget,
-    StorageScope,
-    TrashOutcome,
   } from "#lib/api/types.js";
+  import ScopeFiles from "#lib/components/disk/ScopeFiles.svelte";
   import Button from "#lib/components/ui/Button.svelte";
   import Icon from "#lib/components/ui/Icon.svelte";
   import Spinner from "#lib/components/ui/Spinner.svelte";
-  import { formatBytes } from "#lib/format/media.js";
   import {
     parentLabel,
     pickToggles,
@@ -32,8 +27,6 @@
     TOGGLE_LABELS,
     type ToggleKey,
   } from "#lib/format/policy.js";
-  import { plural } from "#lib/format/shares.js";
-  import { filesLabel } from "#lib/format/storage.js";
 
   interface Props {
     onchange?: () => void;
@@ -62,10 +55,6 @@
   let loading = $state(false);
   let saving = $state(false);
   let problem = $state<string | null>(null);
-  let files = $state<StorageScope | null>(null);
-  let confirming = $state(false);
-  let moving = $state(false);
-  let moved = $state<TrashOutcome | null>(null);
   let removing = $state(false);
 
   const isChat = $derived(scopeType === "chat");
@@ -153,57 +142,6 @@
     }
   }
 
-  async function loadFiles() {
-    if (target === null) {
-      return;
-    }
-    try {
-      files = await getStorageScope(target);
-    } catch {
-      files = null;
-    }
-  }
-
-  async function moveFiles() {
-    if (target === null || moving) {
-      return;
-    }
-    moving = true;
-    problem = null;
-    try {
-      moved = await trashScope(target);
-      confirming = false;
-      await loadFiles();
-    } catch {
-      problem = "Не удалось переместить файлы в корзину";
-    } finally {
-      moving = false;
-    }
-  }
-
-  async function undoMove() {
-    if (moved === null || moving) {
-      return;
-    }
-    moving = true;
-    problem = null;
-    try {
-      await restoreFromTrash(moved.keys);
-      moved = null;
-      await loadFiles();
-    } catch {
-      problem = "Не удалось вернуть файлы";
-    } finally {
-      moving = false;
-    }
-  }
-
-  function where(scope: StorageScope): string {
-    return isFolder
-      ? `в ${scope.chats} ${plural(scope.chats, "чате", "чатах", "чатах")} папки`
-      : "в этом чате";
-  }
-
   onMount(async () => {
     rule = initialRule ?? null;
     parent = initialParent ?? null;
@@ -220,7 +158,6 @@
         loading = false;
       }
     }
-    await loadFiles();
   });
 </script>
 
@@ -272,77 +209,8 @@
       <p class="problem">{problem}</p>
     {/if}
 
-    {#if moved && moved.files > 0}
-      <div class="files">
-        <div class="files-text">
-          <span>{filesLabel(moved.files)} в корзине</span>
-          <small>{formatBytes(moved.bytes)} освободится через 7 дней</small>
-        </div>
-        <Button disabled={moving} onclick={undoMove} smaller variant="text">
-          <Icon name="undo" size="1.25rem" />
-          <span>Вернуть</span>
-        </Button>
-      </div>
-    {:else if files && files.files > 0}
-      <div class="files">
-        {#if confirming}
-          <div class="files-text">
-            <span>
-              {filesLabel(files.files)}, {formatBytes(files.bytes)}, уйдут в
-              корзину и перестанут скачиваться сами.
-            </span>
-            {#if files.gone > 0}
-              <small class="warn">
-                {files.gone}
-                из них потом не скачать заново
-              </small>
-            {/if}
-            <div class="files-actions">
-              <Button
-                onclick={() => {
-                  confirming = false;
-                }}
-                smaller
-                variant="text"
-              >
-                Отмена
-              </Button>
-              <Button
-                disabled={moving}
-                loading={moving}
-                onclick={moveFiles}
-                pill
-                smaller
-              >
-                <Icon name="delete" size="1.25rem" />
-                <span>В корзину</span>
-              </Button>
-            </div>
-          </div>
-        {:else}
-          <div class="files-text">
-            <span>{formatBytes(files.bytes)} уже скачано</span>
-            <small>{filesLabel(files.files)} {where(files)}</small>
-            {#if files.kept > 0}
-              <small>
-                Ещё {filesLabel(files.kept)} есть и в других чатах, они
-                останутся
-              </small>
-            {/if}
-          </div>
-          <Button
-            onclick={() => {
-              confirming = true;
-            }}
-            pill
-            smaller
-            variant="gray"
-          >
-            <Icon name="delete" size="1.25rem" />
-            <span>В корзину</span>
-          </Button>
-        {/if}
-      </div>
+    {#if target}
+      <ScopeFiles {target} />
     {/if}
 
     {#if rule && (isChat || isFolder)}
@@ -544,53 +412,6 @@
     color: var(--color-error);
   }
 
-  .files {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-
-    flex-wrap: wrap;
-
-    margin: 0.5rem 1rem 0.25rem;
-    padding: 0.625rem 0.5rem 0.625rem 0.875rem;
-    border-radius: 0.75rem;
-
-    background-color: var(--color-background-secondary);
-
-    :global(.Button) {
-      gap: 0.375rem;
-      padding-inline: 0.875rem;
-    }
-  }
-
-  .files-text {
-    display: flex;
-    flex: 1 1 10rem;
-    flex-direction: column;
-    gap: 0.125rem;
-
-    min-width: 0;
-
-    font-size: 0.875rem;
-    font-variant-numeric: tabular-nums;
-
-    small {
-      font-size: 0.8125rem;
-      color: var(--color-text-secondary);
-
-      &.warn {
-        color: var(--color-storage-warning);
-      }
-    }
-  }
-
-  .files-actions {
-    display: flex;
-    gap: 0.25rem;
-    justify-content: flex-end;
-    margin-top: 0.375rem;
-  }
-
   .removal {
     display: flex;
     gap: 0.25rem;