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

2026-10-14 05:02:06 +02:00
1 parent 5eacabd101
commit 7f124059be
@@ -0,0 +1,143 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { StorageChat } from "#lib/api/types.js";
+  import Avatar from "#lib/components/ui/Avatar.svelte";
+  import ContextMenu from "#lib/components/ui/ContextMenu.svelte";
+  import { formatBytes } from "#lib/format/media.js";
+  import { filesLabel, GROUP_LABELS } from "#lib/format/storage.js";
+
+  interface Props {
+    chat: StorageChat;
+    hasAvatar: boolean;
+    menu: Snippet;
+    onopen: () => void;
+    title: string;
+    weight: number;
+  }
+
+  let { chat, title, hasAvatar, weight, onopen, menu }: Props = $props();
+
+  const MIN_WEIGHT = 0.02;
+  const AVATAR_REM = 3;
+
+  const scale = $derived(Math.max(MIN_WEIGHT, Math.min(1, weight)));
+  const parts = $derived(chat.groups.filter((item) => item.bytes > 0));
+  const makeup = $derived(
+    parts
+      .map((item) => `${GROUP_LABELS[item.group]}: ${formatBytes(item.bytes)}`)
+      .join(", ")
+  );
+</script>
+
+<ContextMenu {menu}>
+  {#snippet children({
+    props,
+  })}
+    <button {...props} class="row" onclick={onopen} type="button">
+      <Avatar
+        avatar={{ id: chat.chat_id, kind: chat.chat_id > 0 ? "peer" : "chat" }}
+        colorKey={chat.chat_id}
+        {hasAvatar}
+        name={title}
+        size={AVATAR_REM}
+      />
+      <span class="text">
+        <span class="name">{title}</span>
+        <span class="sub">{filesLabel(chat.files)}</span>
+      </span>
+      <span class="size">{formatBytes(chat.bytes)}</span>
+      <span class="weight" title={makeup}>
+        <span class="fill" style:width="{scale * 100}%">
+          {#each parts as part (part.group)}
+            <span
+              style:background-color="var(--color-storage-{part.group})"
+              style:flex-grow={part.bytes}
+            ></span>
+          {/each}
+        </span>
+      </span>
+    </button>
+  {/snippet}
+</ContextMenu>
+
+<style lang="scss">
+  .row {
+    cursor: pointer;
+
+    display: grid;
+    grid-template-columns: 3rem minmax(0, 1fr) auto;
+    column-gap: 0.75rem;
+    align-items: center;
+
+    width: 100%;
+    padding: 0.5rem 1rem 0.625rem;
+    border: 0;
+
+    font: inherit;
+    color: var(--color-text);
+    text-align: start;
+
+    background: none;
+
+    &:focus-visible {
+      outline: 2px solid var(--color-primary);
+      outline-offset: -2px;
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--color-chat-hover);
+      }
+    }
+  }
+
+  .text {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .name {
+    overflow: hidden;
+    font-size: 0.9375rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .sub {
+    margin-top: 0.125rem;
+    font-size: 0.8125rem;
+    font-variant-numeric: tabular-nums;
+    color: var(--color-text-secondary);
+  }
+
+  .size {
+    font-size: 0.9375rem;
+    font-weight: var(--font-weight-medium);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .weight {
+    grid-column: 2 / 4;
+
+    height: 0.1875rem;
+    margin-top: 0.4375rem;
+    border-radius: 0.125rem;
+
+    background-color: rgba(var(--color-text-secondary-rgb), 0.16);
+  }
+
+  .fill {
+    overflow: hidden;
+    display: flex;
+    gap: 2px;
+
+    height: 100%;
+    border-radius: inherit;
+
+    span {
+      min-width: 2px;
+    }
+  }
+</style>