More parity between panels

src/features/downloads/components/DownloadQueue.svelte

@@ -23,8 +23,28 @@
 </script>
 
 {#if loading}
-  <div class="empty">
+  <div class="list">
-    <CircleNotch size={16} weight="light" class="anim-spin" style="color:var(--text-faint)" />
+    {#each Array(5) as _, i (i)}
+      <div class="sk-row">
+        <div class="sk-thumb skeleton"></div>
+
+        <div class="sk-info">
+          <div class="skeleton sk-title"></div>
+          <div class="skeleton sk-chapter"></div>
+          <div class="sk-progress-row">
+            <div class="skeleton sk-bar"></div>
+            <div class="skeleton sk-pages"></div>
+          </div>
+        </div>
+
+        <div class="sk-right">
+          <div class="skeleton sk-state"></div>
+          <div class="sk-actions">
+            <div class="skeleton sk-btn"></div>
+          </div>
+        </div>
+      </div>
+    {/each}
   </div>
 {:else if queue.length === 0}
   <div class="empty">Queue is empty.</div>
@@ -49,4 +69,30 @@
 <style>
   .list { display: flex; flex-direction: column; gap: var(--sp-2); }
   .empty { display: flex; align-items: center; justify-content: center; height: 160px; color: var(--text-faint); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); }
+
+  @keyframes shimmer { from { background-position: -200% 0 } to { background-position: 200% 0 } }
+  .skeleton {
+    border-radius: var(--radius-sm);
+    background: linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--bg-overlay, var(--bg-elevated)) 90%, var(--text-primary) 6%) 20%,
+      color-mix(in srgb, var(--bg-elevated, var(--bg-overlay)) 76%, var(--text-primary) 16%) 50%,
+      color-mix(in srgb, var(--bg-overlay, var(--bg-elevated)) 90%, var(--text-primary) 6%) 80%
+    );
+    background-size: 220% 100%;
+    animation: shimmer 1.45s ease-in-out infinite;
+  }
+
+  .sk-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); pointer-events: none; }
+  .sk-thumb { width: 36px; height: 54px; flex-shrink: 0; }
+  .sk-info { flex: 1; display: flex; flex-direction: column; gap: 5px; overflow: hidden; min-width: 0; }
+  .sk-title { height: 12px; width: clamp(120px, 55%, 280px); }
+  .sk-chapter { height: 10px; width: clamp(80px, 35%, 200px); }
+  .sk-progress-row { display: flex; align-items: center; gap: var(--sp-2); }
+  .sk-bar { flex: 1; height: 2px; }
+  .sk-pages { width: 28px; height: 9px; }
+  .sk-right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); flex-shrink: 0; }
+  .sk-state { width: 54px; height: 9px; }
+  .sk-actions { display: flex; gap: 2px; }
+  .sk-btn { width: 20px; height: 20px; border-radius: var(--radius-sm); }
 </style>

src/features/recent/components/HistoryPanel.svelte

@@ -297,6 +297,7 @@
   .session-list {
     display: flex;
     flex-direction: column;
+    gap: var(--sp-2);
   }
 
   .session-row {
@@ -304,17 +305,16 @@
     align-items: center;
     gap: var(--sp-3);
     width: 100%;
-    padding: var(--sp-2) var(--sp-2);
+    padding: var(--sp-3);
     border-radius: var(--radius-md);
-    border: none;
+    border: 1px solid var(--border-dim);
-    background: none;
+    background: var(--bg-raised);
     text-align: left;
     cursor: pointer;
-    transition: background var(--t-fast);
+    transition: border-color var(--t-fast), background var(--t-fast);
   }
 
-  .session-row:hover { background: var(--bg-raised); }
+  .session-row:hover { border-color: var(--border-strong); background: var(--bg-elevated); }
-  .session-row:active { background: var(--bg-elevated); }
 
   .thumb-wrap {
     position: relative;
@@ -371,8 +371,8 @@
     align-items: center;
     gap: 4px;
     font-family: var(--font-ui);
-    font-size: var(--text-2xs);
+    font-size: var(--text-xs);
-    color: var(--text-faint);
+    color: var(--text-muted);
     letter-spacing: var(--tracking-wide);
     white-space: nowrap;
     overflow: hidden;

src/features/recent/components/UpdatesPanel.svelte

@@ -390,7 +390,7 @@
     padding: var(--sp-2);
     background: none;
     border: none;
-    border-right: 1px solid var(--border-dim);
+    /* border-right: 1px solid var(--border-dim); */
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -453,7 +453,7 @@
   .chapter-title {
     font-family: var(--font-ui);
     font-size: var(--text-xs);
-    color: var(--text-secondary);
+    color: var(--text-muted);
   }
 
   .meta-row {