+
+ );
+ }
+ if (!collection) {
+ return Collection not found.
; + } + + const items = collection.items ?? []; + const imageItems = items.filter((it) => it.kind === 'image').slice(0, 8); + + return ( +
+
+ );
+}
+
+// Friendly labels for the `{ pushed:false, reason }` shapes the server's
+// forcePushRecord → pushRecordToPeer can return with HTTP 200 (the push was
+// accepted as a request but no bytes actually went out). Unmapped reasons
+// (e.g. `http-409`) fall back to the raw string.
+const PUSH_SKIP_LABELS = {
+ 'category-disabled': 'this category is not enabled for that peer',
+ 'peer-disallows-outbound': 'that peer does not accept outbound sync',
+ 'peer-not-found': 'peer not found',
+ 'record-not-found': 'record missing locally',
+ 'peer-schema-behind': 'peer is on an older PortOS version',
+ 'peer-schema-behind-cooldown': 'peer is on an older PortOS version',
+ 'invalid-subscription': 'subscription is invalid',
+ unchanged: 'already up to date',
+ network: 'network error reaching the peer',
+};
+
+// ── Peer row with per-peer sync action ───────────────────────────────────────
+function PeerRow({ entry, kind, recordId, onRefresh }) {
+ const { peerId, peerName, status } = entry;
+ const needsAction = status !== 'in-parity';
+
+ const [syncToPeer, syncing] = useAsyncAction(async () => {
+ // The endpoint returns 200 even when nothing was pushed ({ pushed:false,
+ // reason }) — toasting success unconditionally would mislead the user.
+ const result = await syncRecordToPeer(peerId, kind, recordId, { silent: true });
+ if (result?.pushed) {
+ toast.success(`Synced to ${peerName}`);
+ } else {
+ const reason = result?.reason;
+ const detail = reason ? ` — ${PUSH_SKIP_LABELS[reason] ?? reason}` : '';
+ toast.error(`Nothing synced to ${peerName}${detail}`);
+ }
+ onRefresh();
+ }, { errorMessage: `Failed to sync to ${peerName}` });
+
+ return (
+
+
+ {imageItems.length > 0 && (
+ {collection.name}
+{items.length} item{items.length !== 1 ? 's' : ''}
+
+ {imageItems.map((it) => (
+
+ )}
+ {imageItems.length === 0 && (
+ No image thumbnails available.
+ )} +
+
+ );
+}
+
+// ── Main drawer ──────────────────────────────────────────────────────────────
+export default function SyncDetailDrawer({ kind, recordId, onClose }) {
+ const { byPeer, noSyncingPeers, integrityUnavailable, loading, error, refresh } = useSyncIntegrity(kind);
+ const peerEntries = byPeer.get(recordId) ?? [];
+
+ // Record state is owned here (fetched once) so the preview and the
+ // "Pull missing metadata" action share the same record — no second fetch
+ // and no double-toast (kind fetchers have no {silent} support).
+ // For non-mediaCollection kinds we still fetch to show the record name in
+ // the header, but skip the thumbnail grid and pull-metadata button.
+ const fetcher = KIND_FETCHER[kind] ?? null;
+ const [record, setRecord] = useState(null);
+ const [recordLoading, setRecordLoading] = useState(!!fetcher);
+
+ // Drop async results that resolve after the drawer unmounts (fast route
+ // change / close while a fetch is in flight) to avoid setState-on-unmounted
+ // warnings. Never reset to true — handles dev-mode double-mount cleanly.
+ const mountedRef = useRef(true);
+ useEffect(() => () => { mountedRef.current = false; }, []);
+ // Generation counter so only the LATEST in-flight fetch commits state — a
+ // rapid recordId change (or switch to empty) bumps this, and an older fetch
+ // that resolves afterward fails the equality check and is dropped, instead
+ // of overwriting the newer record with a stale name/preview.
+ const loadGenRef = useRef(0);
+
+ const loadRecord = useCallback(() => {
+ if (!fetcher) return;
+ const gen = ++loadGenRef.current; // invalidates any prior in-flight fetch
+ const fresh = () => mountedRef.current && gen === loadGenRef.current;
+ // An empty recordId (e.g. a param-less route mount) would fetch
+ // `/media/collections/` and 404/toast — skip the request, and clear any
+ // previously-loaded record so a stale name/preview can't linger.
+ if (!recordId) { setRecord(null); setRecordLoading(false); return; }
+ setRecordLoading(true);
+ fetcher(recordId)
+ .then((data) => { if (fresh()) setRecord(data); })
+ .catch(() => { if (fresh()) setRecord(null); })
+ .finally(() => { if (fresh()) setRecordLoading(false); });
+ }, [fetcher, recordId]);
+
+ useEffect(() => { loadRecord(); }, [loadRecord]);
+
+ // Keep the mediaCollection-specific alias in scope so the pull action below
+ // can read it without changing its reference to `collection`.
+ const collection = kind === 'mediaCollection' ? record : null;
+ const collectionLoading = kind === 'mediaCollection' ? recordLoading : false;
+
+ // Convenience alias so the header can show `record?.name` regardless of kind.
+ const recordName = record?.name ?? null;
+
+ // Read the image filenames from the already-loaded collection state.
+ // Only runs for mediaCollection — the button is gated to that kind below.
+ const [pullMissing, pulling] = useAsyncAction(async () => {
+ if (!collection) { toast.error('Collection not loaded yet'); return; }
+ const filenames = (collection.items ?? [])
+ .filter((it) => it.kind === 'image')
+ .map((it) => it.ref);
+ if (filenames.length === 0) { toast('No image files to pull'); return; }
+ const result = await pullMissingMetadata(filenames, { silent: true });
+ const recovered = result?.recovered ?? 0;
+ const attempted = result?.attempted ?? filenames.length;
+ // Mirror MediaCollectionDetail's Unsorted "Pull missing prompts": only
+ // claim success when something was actually recovered — recovered=0 (or
+ // attempted=0) is a neutral "nothing to do", not a win.
+ if (recovered > 0) {
+ toast.success(`Pulled ${recovered}/${attempted} metadata item${attempted === 1 ? '' : 's'}`);
+ } else {
+ toast(`No missing metadata found (${attempted} checked)`);
+ }
+ refresh();
+ loadRecord(); // refresh the preview thumbnails post-pull
+ }, { errorMessage: 'Failed to pull missing metadata' });
+
+ // Esc key support
+ const handleKeyDown = useCallback((e) => {
+ if (e.key === 'Escape') onClose();
+ }, [onClose]);
+ useEffect(() => {
+ window.addEventListener('keydown', handleKeyDown);
+ return () => window.removeEventListener('keydown', handleKeyDown);
+ }, [handleKeyDown]);
+
+ // Lock the body scroll while the drawer is open (matches Drawer.jsx).
+ useEffect(() => {
+ const prevOverflow = document.body.style.overflow;
+ document.body.style.overflow = 'hidden';
+ return () => { document.body.style.overflow = prevOverflow; };
+ }, []);
+
+ return (
+ <>
+ {/* Backdrop */}
+
+
+ {/* Drawer panel */}
+
+
+ );
+}
diff --git a/client/src/components/sync/SyncDetailDrawer.test.jsx b/client/src/components/sync/SyncDetailDrawer.test.jsx
new file mode 100644
index 000000000..4c6ae719a
--- /dev/null
+++ b/client/src/components/sync/SyncDetailDrawer.test.jsx
@@ -0,0 +1,413 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+
+// ── Mock useSyncIntegrity ────────────────────────────────────────────────────
+const mockRefresh = vi.fn();
+const mockUseSyncIntegrity = vi.fn();
+vi.mock('../../hooks/useSyncIntegrity', () => ({
+ useSyncIntegrity: (...args) => mockUseSyncIntegrity(...args),
+}));
+
+// ── Mock API calls ───────────────────────────────────────────────────────────
+const mockGetMediaCollection = vi.fn();
+const mockGetUniverse = vi.fn();
+const mockGetPipelineSeries = vi.fn();
+const mockSyncRecordToPeer = vi.fn();
+const mockPullMissingMetadata = vi.fn();
+
+vi.mock('../../services/api', () => ({
+ getMediaCollection: (...args) => mockGetMediaCollection(...args),
+ getUniverse: (...args) => mockGetUniverse(...args),
+ getPipelineSeries: (...args) => mockGetPipelineSeries(...args),
+ syncRecordToPeer: (...args) => mockSyncRecordToPeer(...args),
+ pullMissingMetadata: (...args) => mockPullMissingMetadata(...args),
+}));
+
+// ── Mock MediaImage ──────────────────────────────────────────────────────────
+vi.mock('../MediaImage', () => ({
+ default: ({ src, alt }) =>
+
+ {needsAction && (
+
+ )}
+ {peerName}
+
+ {isUnsorted && (
+
+ )}
+ {items.length > 0 && (
+
+ )}
+
)}
diff --git a/client/src/pages/MediaCollectionDetail.test.jsx b/client/src/pages/MediaCollectionDetail.test.jsx
new file mode 100644
index 000000000..887c0cf18
--- /dev/null
+++ b/client/src/pages/MediaCollectionDetail.test.jsx
@@ -0,0 +1,241 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+
+// ── Mocks must be declared before any imports that use them ──────────────────
+
+const mockPullMissingMetadata = vi.fn();
+const mockListImageGallery = vi.fn();
+const mockListVideoHistory = vi.fn();
+const mockListMediaCollections = vi.fn();
+const mockGetMediaCollection = vi.fn();
+
+vi.mock('../services/api', () => ({
+ listImageGallery: (...args) => mockListImageGallery(...args),
+ listVideoHistory: (...args) => mockListVideoHistory(...args),
+ listMediaCollections: (...args) => mockListMediaCollections(...args),
+ getMediaCollection: (...args) => mockGetMediaCollection(...args),
+ updateMediaCollection: vi.fn(),
+ addMediaCollectionItem: vi.fn(),
+ removeMediaCollectionItem: vi.fn(),
+ deleteImage: vi.fn(),
+ deleteVideoHistoryItem: vi.fn(),
+ pullMissingMetadata: (...args) => mockPullMissingMetadata(...args),
+}));
+
+vi.mock('../components/ui/Toast', () => ({
+ default: Object.assign(vi.fn(), {
+ success: vi.fn(),
+ error: vi.fn(),
+ warning: vi.fn(),
+ }),
+}));
+
+vi.mock('../hooks/useMediaAnnotations', () => ({
+ useMediaAnnotations: () => ({
+ annotations: {},
+ toggleStar: vi.fn(),
+ updateAnnotation: vi.fn(),
+ getCardProps: () => ({}),
+ }),
+}));
+
+vi.mock('../hooks/useMediaPreviewActions', () => ({
+ default: () => ({
+ handleRemix: vi.fn(),
+ handleSendToVideo: vi.fn(),
+ handleContinue: vi.fn(),
+ handleClean: vi.fn(),
+ }),
+}));
+
+vi.mock('../hooks/usePreviewRoute', () => ({
+ default: () => [null, vi.fn()],
+}));
+
+vi.mock('../components/media/MediaCard', () => ({
+ default: ({ item }) => {item.filename || item.key}
,
+}));
+
+vi.mock('../components/media/MediaPreview', () => ({
+ default: () => null,
+}));
+
+vi.mock('../components/media/BulkTargetPicker', () => ({
+ default: () => null,
+}));
+
+vi.mock('../components/sharing/ShareToButton', () => ({
+ default: () => null,
+}));
+
+vi.mock('../components/media/normalize', () => ({
+ normalizeImage: (i) => ({
+ kind: 'image',
+ key: `image:${i.filename}`,
+ filename: i.filename,
+ ref: i.filename,
+ }),
+ normalizeVideo: (v) => ({
+ kind: 'video',
+ key: `video:${v.id}`,
+ id: v.id,
+ ref: v.id,
+ }),
+}));
+
+import toast from '../components/ui/Toast';
+import MediaCollectionDetail from './MediaCollectionDetail';
+import { UNSORTED_ID } from '../lib/unsorted';
+
+// ── Fixtures ─────────────────────────────────────────────────────────────────
+
+const IMAGE_A = { filename: 'a.png', createdAt: '2024-01-02' };
+const IMAGE_B = { filename: 'b.png', createdAt: '2024-01-01' };
+const VIDEO_C = { id: 'vid-c', createdAt: '2024-01-03' };
+
+// A collection that contains IMAGE_A (so IMAGE_B and VIDEO_C are "unsorted").
+const REAL_COLLECTION = {
+ id: 'col-real',
+ name: 'My Collection',
+ items: [{ kind: 'image', ref: IMAGE_A.filename, addedAt: '2024-01-02' }],
+};
+
+function renderUnsorted() {
+ return render(
+
+ {!c.synthetic && (
+ navigate(`/media/collections/${encodeURIComponent(c.id)}/sync`)}
+ />
+ )}
+ {!c.synthetic && (
+
+ )}
+
))}
diff --git a/client/src/pages/MediaCollections.test.jsx b/client/src/pages/MediaCollections.test.jsx
new file mode 100644
index 000000000..45ca479f8
--- /dev/null
+++ b/client/src/pages/MediaCollections.test.jsx
@@ -0,0 +1,84 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+
+// ── Mock API calls ───────────────────────────────────────────────────────────
+vi.mock('../services/api', () => ({
+ listMediaCollections: vi.fn().mockResolvedValue([
+ { id: 'col-1', name: 'Alpha', items: [{ kind: 'image', ref: 'img1.png', addedAt: '2024-01-01' }] },
+ { id: 'col-2', name: 'Beta', items: [] },
+ ]),
+ createMediaCollection: vi.fn(),
+ deleteMediaCollection: vi.fn(),
+ listVideoHistory: vi.fn().mockResolvedValue([]),
+ listImageGallery: vi.fn().mockResolvedValue([]),
+}));
+
+// ── Mock useSyncIntegrity ────────────────────────────────────────────────────
+const statusById = new Map([['col-1', 'in-parity'], ['col-2', 'diverged']]);
+vi.mock('../hooks/useSyncIntegrity', () => ({
+ useSyncIntegrity: () => ({
+ statusById,
+ noSyncingPeers: false,
+ integrityUnavailable: false,
+ loading: false,
+ error: null,
+ refresh: vi.fn(),
+ byPeer: new Map(),
+ }),
+ // Mirror the real precedence helper so badge-status assertions stay valid.
+ syncBadgeStatus: (sync, recordId) => (
+ sync.noSyncingPeers
+ ? 'not-syncing'
+ : (sync.statusById.get(recordId) ?? (sync.integrityUnavailable ? 'unknown' : undefined))
+ ),
+}));
+
+// ── Mock buildUnsortedCollection ─────────────────────────────────────────────
+vi.mock('../lib/unsorted', () => ({
+ buildUnsortedCollection: () => ({
+ id: '__unsorted__',
+ name: 'Unsorted',
+ items: [],
+ synthetic: true,
+ }),
+}));
+
+import MediaCollections from './MediaCollections';
+
+function renderPage() {
+ return render(
+