fix(frontend,backend): storage categories keep one hue in both themes, trash counted in the total, undo keeps the list, larger touch targets

frontend/src/lib/components/MediaViewer.svelte

@@ -62,6 +62,7 @@
     currentMediaId !== null && (fileOnly || result?.state === "ready")
   );
   const title = $derived(fileName ?? mediaKindLabel(kind) ?? "Медиа");
+  const caption = $derived(items[index]?.caption);
 
   function revoke() {
     if (result?.state === "ready" && result.url && !streamed) {
@@ -217,8 +218,21 @@
     <Dialog.Overlay class="media-overlay" />
     <Dialog.Content class="media-content">
       <Dialog.Title class="media-title">{title}</Dialog.Title>
+      {#if caption}
+        <span class="media-caption">{caption}</span>
+      {/if}
       <div class="media-actions">
         {#if canSave}
+          {#if ontrash}
+            <button
+              aria-label="В корзину"
+              class="media-action"
+              onclick={trash}
+              type="button"
+            >
+              <Icon name="delete" size="1.375rem" />
+            </button>
+          {/if}
           <ContextMenu>
             {#snippet children({
               props,
@@ -250,16 +264,6 @@
           >
             <Icon name="allow-share" size="1.375rem" />
           </button>
-          {#if ontrash}
-            <button
-              aria-label="В корзину"
-              class="media-action"
-              onclick={trash}
-              type="button"
-            >
-              <Icon name="delete" size="1.375rem" />
-            </button>
-          {/if}
         {/if}
         <Dialog.Close aria-label="Закрыть" class="media-close">
           <Icon name="close" size="1.5rem" />
@@ -371,6 +375,20 @@
     white-space: nowrap;
   }
 
+  .media-caption {
+    position: absolute;
+    top: 2.75rem;
+    left: 1.25rem;
+
+    overflow: hidden;
+    max-width: min(24rem, calc(100% - 14rem));
+
+    font-size: 0.8125rem;
+    color: rgba(255, 255, 255, 0.6);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .media-counter {
     position: absolute;
     top: 1rem;