Merge branch 'ui/playlist-in-progress-spinner' into integration-all-three

frontend/src/components/EntriesView.jsx

@@ -16,7 +16,7 @@ export default function EntriesView({ entries, selectedUids, onRowClick, archive
         </div>
         <div id="entries-body">
           {pendingCaptures.filter(c => c.archiveId === archiveId).reverse().map(cap => (
-            <SkeletonEntryRow key={cap.id} />
+            <SkeletonEntryRow key={cap.id} locator={cap.locator} />
           ))}
           {entries.map((entry, idx) => (
             <EntryRow

frontend/src/components/SkeletonEntryRow.jsx

@@ -1,23 +1,37 @@
-export default function SkeletonEntryRow() {
+const COLLECTION_MARKERS = [
-  return (
+  'list=',
-    <div className="skeleton-row">
+  '/playlist/',
-      <div className="col-check" aria-hidden="true" />
+  '/channel/',
-      <div className="col-added">
+  'yt:playlist:',
-        <span className="skeleton-cell" style={{ width: 108, height: 13 }} />
+  'yt:channel:',
-      </div>
+  'ytm:playlist:',
-      <div className="col-title" style={{ gap: '0.42em', display: 'flex', alignItems: 'center' }}>
+  'spotify:playlist:',
-        <span className="skeleton-cell" style={{ width: 14, height: 14, borderRadius: '50%', flexShrink: 0 }} />
+  'spotify:album:',
-        <span className="skeleton-cell" style={{ width: '58%', height: 13 }} />
+];
-      </div>
+
-      <div className="col-type">
+function isCollectionLocator(locator) {
-        <span className="skeleton-cell" style={{ width: 58, height: 20, borderRadius: 99 }} />
+  const normalized = locator.toLowerCase();
-      </div>
+  return COLLECTION_MARKERS.some(marker => normalized.includes(marker));
-      <div className="col-size">
+}
-        <span className="skeleton-cell" style={{ width: 44, height: 12 }} />
+
-      </div>
+function truncateLocator(locator) {
-      <div className="col-url">
+  return locator.length > 80 ? `${locator.slice(0, 79)}…` : locator;
-        <span className="skeleton-cell" style={{ width: '65%', height: 12 }} />
+}
-      </div>
+
-    </div>
+export default function SkeletonEntryRow({ locator = '' }) {
-  )
+  const locatorText = String(locator);
+  const isCollection = isCollectionLocator(locatorText);
+
+  return (
+    <div className="in-progress-entry-row" role="status" aria-live="polite">
+      <span className="cap-spinner in-progress-entry-row__spinner" aria-hidden="true" />
+      <span className="in-progress-entry-row__locator" title={locatorText}>
+        {truncateLocator(locatorText)}
+      </span>
+      <span className="in-progress-entry-row__status">
+        Archiving…
+        {isCollection && <span className="in-progress-entry-row__kind">(playlist)</span>}
+      </span>
+    </div>
+  );
 }

frontend/src/components/SkeletonEntryRow.stories.jsx

@@ -0,0 +1,31 @@
+import SkeletonEntryRow from './SkeletonEntryRow';
+
+export default {
+  component: SkeletonEntryRow,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+};
+
+function PendingRows({ locators }) {
+  return (
+    <div className="entry-table">
+      <div id="entries-body">
+        {locators.map(locator => (
+          <SkeletonEntryRow key={locator} locator={locator} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export const Examples = {
+  render: () => (
+    <PendingRows
+      locators={[
+        'https://example.com/articles/a-small-and-useful-page',
+        'https://www.youtube.com/watch?v=abc123&list=PL1234567890',
+        'tweet:1891234567890123456',
+      ]}
+    />
+  ),
+};

frontend/src/components/SkeletonEntryRow.test.jsx

@@ -0,0 +1,43 @@
+import { describe, expect, test } from 'bun:test';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import SkeletonEntryRow from './SkeletonEntryRow';
+
+describe('SkeletonEntryRow', () => {
+  test('renders a compact archiving status row for a locator', () => {
+    const markup = renderToStaticMarkup(
+      <SkeletonEntryRow locator="tweet:1891234567890123456" />,
+    );
+
+    expect(markup).toContain('in-progress-entry-row__spinner');
+    expect(markup).toContain('tweet:1891234567890123456');
+    expect(markup).toContain('Archiving…');
+    expect(markup).not.toContain('(playlist)');
+  });
+
+  test('labels playlist and channel locators', () => {
+    const collectionLocators = [
+      'https://www.youtube.com/watch?v=abc123&list=PL123',
+      'https://www.youtube.com/playlist/PL123',
+      'https://www.youtube.com/channel/UC123',
+      'yt:playlist:PL123',
+      'yt:channel:UC123',
+      'ytm:playlist:PL123',
+      'spotify:playlist:123',
+      'spotify:album:123',
+    ];
+
+    for (const locator of collectionLocators) {
+      const markup = renderToStaticMarkup(<SkeletonEntryRow locator={locator} />);
+      expect(markup).toContain('(playlist)');
+    }
+  });
+
+  test('truncates long locators to 80 displayed characters', () => {
+    const locator = 'x'.repeat(100);
+    const markup = renderToStaticMarkup(<SkeletonEntryRow locator={locator} />);
+    const visibleLocator = markup.match(/in-progress-entry-row__locator"[^>]*>(.*?)<\/span>/)?.[1];
+
+    expect(visibleLocator).toBe(`${'x'.repeat(79)}…`);
+  });
+});

frontend/src/styles.css

@@ -302,10 +302,10 @@ select {
   border-bottom: 1px solid var(--line-soft);
 }
 #entries-body > div > div { padding: 7px 10px; flex-shrink: 0; overflow: hidden; }
-/* Skeleton rows (no index class) fall back to nth-child; real rows use explicit classes. */
+/* Pending capture rows (no index class) fall back to nth-child; real rows use explicit classes. */
 #entries-body > div:not(.entry-row-outer):nth-child(even) { background: #f2ede5; }
 #entries-body > div:not(.entry-row-outer):nth-child(odd)  { background: var(--paper-3); }
-/* Index-based stripes for real entry rows — immune to skeleton sibling count. */
+/* Index-based stripes for real entry rows — immune to pending-capture sibling count. */
 #entries-body > .entry-row-outer--light { background: var(--paper-3); }
 #entries-body > .entry-row-outer--dark  { background: #f2ede5; }
 #entries-body > div.is-selected {
@@ -2836,36 +2836,44 @@ google-cast-launcher.video-tv-btn {
 /* Push content above the fixed AudioBar when it is visible */
 body.has-audio-bar { padding-bottom: 56px; }
 
-/* ── Skeleton entry row ─────────────────────────────────────────────────── */
+/* ── In-progress entry row ──────────────────────────────────────────────── */
-@keyframes skeleton-shimmer {
+.in-progress-entry-row {
-  0%   { background-position: 200% center; }
+  box-sizing: border-box;
-  100% { background-position: -200% center; }
+  min-width: 0;
+  padding: 7px 22px;
+  gap: 9px;
+  color: var(--muted);
+  white-space: nowrap;
 }
-
+.in-progress-entry-row__spinner {
-.skeleton-cell {
+  width: 16px;
-  display: inline-block;
+  height: 16px;
-  border-radius: 3px;
+  border-width: 2px;
-  background: linear-gradient(90deg, var(--paper-2) 25%, var(--line-soft) 50%, var(--paper-2) 75%);
+  color: var(--accent);
-  background-size: 200% 100%;
-  animation: skeleton-shimmer 1.8s ease-in-out infinite;
-}
-
-/* Row container — flex row matching #entries-body > div layout */
-.skeleton-row {
-  display: flex;
-  align-items: center;
-  background: var(--paper-3);
-}
-.skeleton-row > div {
-  padding: 7px 10px;
   flex-shrink: 0;
-  overflow: hidden;
 }
-.skeleton-row .col-added { padding-left: 22px; }
+.in-progress-entry-row__locator {
-.skeleton-row > div:last-child { padding-right: 22px; }
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 11.5px;
+}
+.in-progress-entry-row__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex-shrink: 0;
+  color: var(--muted-2);
+  font-size: 11.5px;
+}
+.in-progress-entry-row__kind {
+  font-size: 10.5px;
+  opacity: 0.85;
+}
 
 @media (pointer: coarse) {
-  .skeleton-row .col-added { padding-left: 10px; }
+  .in-progress-entry-row { padding-inline: 10px; }
 }
 
 /* ── Child entry expansion ───────────────────────────────────────────────── */