fix(frontend): storage failures use the error colour next to the warning, shared mark on its own line in the list, trash key is visible

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

@@ -3,12 +3,13 @@
 
   interface Props {
     children: Snippet;
+    failure?: string | null;
     note?: string;
     title: string;
     warn?: boolean;
   }
 
-  let { title, note, warn = false, children }: Props = $props();
+  let { title, note, warn = false, failure, children }: Props = $props();
 </script>
 
 <div class="bar">
@@ -17,6 +18,9 @@
     {#if note}
       <div class="note" class:warn>{note}</div>
     {/if}
+    {#if failure}
+      <div class="note failed">{failure}</div>
+    {/if}
   </div>
   {@render children()}
 </div>
@@ -63,5 +67,9 @@
     &.warn {
       color: var(--color-storage-warning);
     }
+
+    &.failed {
+      color: var(--color-error);
+    }
   }
 </style>

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

@@ -86,10 +86,6 @@
     return chats.byId(chatId)?.title ?? `Чат ${chatId}`;
   }
 
-  function tail(file: StorageFile): string {
-    return file.refs > 1 ? messagesLabel(file.refs) : formatListDate(file.date);
-  }
-
   async function loadSummary() {
     try {
       summary = await getStorageSummary();
@@ -324,6 +320,7 @@
         fileName={file.file_name}
         kind={file.kind}
         mime={file.mime}
+        note={file.refs > 1 ? messagesLabel(file.refs) : undefined}
         onopen={() => open(index)}
         ontoggle={() => toggle(file.media_id)}
         refetchable={file.refetchable}
@@ -331,7 +328,7 @@
         size={file.file_size}
         src={mediaUrl(file.media_id)}
         sub={chatTitle(file.chat_id)}
-        tail={tail(file)}
+        tail={formatListDate(file.date)}
         weight={heaviest > 0 ? file.file_size / heaviest : 0}
       >
         {#snippet menu()}
@@ -378,8 +375,8 @@
 
   {#if chosen.length > 0}
     <SelectionBar
-      note={problem ??
+      failure={problem}
-        (chosenGone > 0 ? `${chosenGone} не скачать заново` : undefined)}
+      note={chosenGone > 0 ? `${chosenGone} не скачать заново` : undefined}
       title="{filesLabel(chosen.length)} · {formatBytes(chosenBytes)}"
       warn
     >
@@ -399,10 +396,9 @@
     </SelectionBar>
   {:else if undo}
     <SelectionBar
-      note={problem ??
+      failure={problem}
-        `${formatBytes(undo.outcome.bytes)} освободится через 7 дней`}
+      note="{formatBytes(undo.outcome.bytes)} освободится через 7 дней"
       title="{filesLabel(undo.outcome.files)} в корзине"
-      warn={problem !== null}
     >
       <Button onclick={restoreLast} smaller variant="text">
         <Icon name="undo" size="1.25rem" />
@@ -410,7 +406,7 @@
       </Button>
     </SelectionBar>
   {:else if problem}
-    <SelectionBar title={problem}>
+    <SelectionBar failure={problem} title="Не получилось">
       <Button
         onclick={() => {
           problem = null;
@@ -479,7 +475,7 @@
       border-radius: 2px;
 
       &.trashed {
-        background-color: rgba(var(--color-text-secondary-rgb), 0.35);
+        background-color: var(--color-storage-trash);
       }
 
       &:first-child {
@@ -604,7 +600,7 @@
       width: 0.5rem;
       height: 0.5rem;
       border-radius: 50%;
-      background-color: rgba(var(--color-text-secondary-rgb), 0.35);
+      background-color: var(--color-storage-trash);
     }
 
     &:focus-visible {

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

@@ -224,8 +224,8 @@
 
   {#if chosen.length > 0}
     <SelectionBar
-      note={problem ??
+      failure={doomed === null ? problem : null}
-        (chosenGone > 0 ? `${chosenGone} не скачать заново` : undefined)}
+      note={chosenGone > 0 ? `${chosenGone} не скачать заново` : undefined}
       title="{filesLabel(chosen.length)} · {formatBytes(bytesOf(chosen))}"
       warn
     >
@@ -251,7 +251,7 @@
       </Button>
     </SelectionBar>
   {:else if problem && doomed === null}
-    <SelectionBar title={problem}>
+    <SelectionBar failure={problem} title="Не получилось">
       <Button
         onclick={() => {
           problem = null;
@@ -317,10 +317,7 @@
             </p>
           {/if}
           {#if problem}
-            <p class="confirm warn">
+            <p class="confirm failed">{problem}.</p>
-              <Icon name="warning" size="1.25rem" />
-              <span>{problem}.</span>
-            </p>
           {/if}
         </div>
       {/if}
@@ -439,10 +436,15 @@
     font-size: 0.9375rem;
     line-height: 1.45;
 
-    &.rest {
+    &.rest,
+    &.failed {
       margin-top: 0.75rem;
     }
 
+    &.failed {
+      color: var(--color-error);
+    }
+
     &.warn {
       display: flex;
       gap: 0.625rem;

frontend/src/lib/styles/dark-theme.scss

@@ -5,6 +5,7 @@ html.theme-dark {
   --color-storage-audio: #c98500;
   --color-storage-other: #3987e5;
   --color-storage-warning: #fb8c00;
+  --color-storage-trash: #6c6c6c;
   --storage-tile-mix: 90%;
   --color-primary: #8774e1;
   --color-primary-opacity: #8378db1e;

frontend/src/lib/styles/variables.scss

@@ -139,6 +139,7 @@
     --color-storage-audio: #a36a00;
     --color-storage-other: #2a78c8;
     --color-storage-warning: #a85a00;
+    --color-storage-trash: #939799;
     --storage-tile-mix: 100%;
 
     --color-yellow: #{$color-yellow};