feat: animate queue detail expansion and collapse

src/renderer-queue.ts

@@ -575,7 +575,11 @@ function toggleQueueDetails(id: string): void {
     }
     const item = Array.from(byId<HTMLElement>('queueList').querySelectorAll<HTMLElement>('.queue-item'))
         .find((candidate) => candidate.dataset.id === id);
-    item?.querySelector('.queue-details')?.classList.toggle('expanded', expandedQueueIds.has(id));
+    const details = item?.querySelector<HTMLElement>('.queue-details');
+    if (details) {
+        details.classList.toggle('expanded', expandedQueueIds.has(id));
+        details.inert = !expandedQueueIds.has(id);
+    }
     item?.querySelector('[data-queue-action="details"]')?.setAttribute('aria-expanded', String(expandedQueueIds.has(id)));
 }
 
@@ -723,12 +727,14 @@ function renderQueue(): void {
                         <span class="queue-progress-status${progressStatusClass}${item.status === 'paused' ? ' is-hidden' : ''}">${safeProgressStatus}</span>
                         <span class="queue-progress-metrics">${safeProgressMetrics}</span>
                     </div>
-                    <div class="queue-details${expandedQueueIds.has(item.id) ? ' expanded' : ''}" id="${detailsId}">
+                    <div class="queue-details${expandedQueueIds.has(item.id) ? ' expanded' : ''}" id="${detailsId}"${expandedQueueIds.has(item.id) ? '' : ' inert'}>
+                        <div class="queue-details-clip"><div class="queue-details-content">
                         <div><span class="queue-detail-label">URL:</span> ${escapeHtml(item.url)}</div>
                         <div><span class="queue-detail-label">${escapeHtml(UI_TEXT.queue.detailStreamer)}</span> ${escapeHtml(item.streamer)}</div>
                         <div><span class="queue-detail-label">${escapeHtml(UI_TEXT.queue.detailDuration)}</span> ${escapeHtml(item.duration_str)}</div>
                         <div><span class="queue-detail-label">${escapeHtml(UI_TEXT.queue.detailDate)}</span> ${escapeHtml(formatUiDateTime(item.date))}</div>
                         ${renderQueueItemFileActions(item)}
+                        </div></div>
                     </div>
                 </div>
             </div>

src/style-modules.production-path.test.ts

@@ -20,7 +20,7 @@ describe('production style modules', () => {
             .replace(/\r\n/g, '\n'));
         const digest = createHash('sha256').update(content).digest('hex');
 
-        expect(digest).toBe('2121672b9cf4534a7e15be2cf88ab1919fe54fe8f3ca314e6658ed6633436019');
+        expect(digest).toBe('b937d229d00f4a35098f288399331025580a1448f7c7aab7908f12ec826628e9');
     });
 
     test('derives the Windows hot-development executable version from package metadata', () => {

src/styles-workflows.css

@@ -341,6 +341,10 @@
     background: color-mix(in srgb, var(--text-secondary) 12%, transparent);
 }
 
+.queue-details-toggle svg {
+    transition: transform 220ms ease;
+}
+
 .queue-details-toggle[aria-expanded="true"] svg {
     transform: rotate(180deg);
 }
@@ -363,21 +367,33 @@
 }
 
 .queue-details {
-    display: none;
+    display: grid;
+    grid-template-rows: 0fr;
+    opacity: 0;
+    transition: grid-template-rows 220ms ease, opacity 180ms ease;
     font-size: 12px;
     line-height: 18px;
     color: var(--text-secondary);
-    margin-top: 8px;
-    padding: 8px 0 2px;
-    border-top: 1px solid var(--border-soft);
     overflow-wrap: anywhere;
 }
 
-.queue-details.expanded {
-    display: block;
+.queue-details-clip {
+    min-height: 0;
+    overflow: hidden;
 }
 
-.queue-details div {
+.queue-details-content {
+    margin-top: 8px;
+    padding: 8px 0 2px;
+    border-top: 1px solid var(--border-soft);
+}
+
+.queue-details.expanded {
+    grid-template-rows: 1fr;
+    opacity: 1;
+}
+
+.queue-details-content > div {
     margin-bottom: 2px;
 }
 

src/workspace.css

@@ -2662,6 +2662,11 @@ input[type="checkbox"].vod-select-checkbox:focus-visible {
 }
 
 @media (prefers-reduced-motion: reduce) {
+    .queue-details,
+    .queue-details-toggle svg {
+        transition-duration: 160ms !important;
+    }
+
     .vod-bulk-bar {
         transition: transform 280ms cubic-bezier(0.22, 0.76, 0.22, 1), opacity 220ms ease, visibility 0s linear 280ms !important;
     }