feat(studio): sidebar asset card (unwired)

[ukimsanov]

What

AssetCard — the sidebar asset tile (thumbnail, hover preview, click policy, context menu incl. add-at-playhead), unwired.

Why

standalone sidebar concept; AssetsTab adopts it in the app-shell swap.

How

new file against the coexistence layer (assetHelpers, AssetContextMenu, assetClickBehavior, assetPreviewStore); one TEMP(studio-dnd) entry until AssetsTab wires it.

Test plan

tsc --noEmit; fallow audit clean.

---

Stack position 19/25 — studio NLE overhaul (CapCut-parity timeline + canvas). Graphite manages bases; merge from #2192 upward. Temporary TEMP(studio-dnd) fallow entries (unwired-component windows) are all removed by #2213 (app-shell swap), whose tree is byte-identical to the fully-verified integration branch.

Merge invariant: #2206→#2213 land as ONE ordered unit — no cherry-picks, no deploys between #2211–#2213 (review-fix foliation concentrates engine wiring at #2213; seam evidence in the #2205 thread).

[ukimsanov]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• feat(studio): assets/blocks panel behaviors + preview helpers #2216
• feat(studio): timeline visual refresh #2215
• feat(studio): clip thumbnail modules #2214
• feat(studio): app shell swap — mount EditorShell, retire the legacy engine #2213
• feat(studio): timeline glue swap — Timeline/TimelineCanvas onto the NLE engine #2212
• feat(studio): canvas glue swap — overlay, gestures, selection to final form #2211
• feat(studio): sidebar asset card (unwired) #2210 👈 (View in Graphite)
• feat(studio): NLE shell assembly (unwired) #2209
• feat(studio): canvas chrome components (unwired) #2208
• feat(studio): timeline interaction hooks and lanes component (unwired) #2207
• feat(studio): clip drag engine — preview and commit (unwired) #2206
• feat(studio): glue API coexistence layer for the NLE swap #2283
• feat(studio): NLE shell components — context provider, panes, overlays (unwired) #2282
• feat(studio): canvas nudge math + NLE shell components (pr12+pr13 recovery) #2278
• feat(studio): canvas context menu and z-order actions (unwired) #2281
• feat(studio): gesture characterization tests + canvas z-order menu (pr10+pr11 recovery) #2277
• feat(studio): asset click policy and canvas nudge gate #2280
• feat(studio): timeline collision and placement model #2279
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[miga-heygen]

Reviewed as part of the 25-PR NLE overhaul stack. Full stack review on #2205 (the keystone). No blockers on this PR. — Miga

[vanceingalls]

R1 — Batch C (unwired chrome / assembly)

Verdict: 🟢 approve

Reviewed at c87f8d54. Focus per Phase-2 recon: sidebar AssetCard is presentational, verify unwired, sanity-check prop shape / consumer contract.

Unwired assertion — 🟢

Grepped packages/studio/src/**/*.{ts,tsx} at #2210 (top-of-Batch-C) for AssetCard imports. Zero consumers. The pre-existing AssetsTab.tsx still owns its inline asset-tile implementation; this file is a parallel extraction that will be swapped in at #2213.

The header comment is explicit about the extraction motivation: "Extracted from AssetsTab.tsx to keep that file under the 600-line CI gate."

Prop / store contract sanity — 🟢

AssetCard imports useAssetPreviewStore from @/utils/assetPreviewStore (added in #2204). Verified at #2210 head that:

• assetPreviewStore.ts is present with previewAsset, previewProjectId, clearPreviewAsset, setPreviewAsset — the shape AssetCard reads.
• AssetPreviewOverlay (from #2204) reads the same store, so store⇄reader contract is symmetric. When #2213 wires AssetsTab → AssetCard, the sidebar-writer / preview-reader pair activates atomically.

Other imports (VideoFrameThumbnail, AssetContextMenu, assetHelpers, mediaTypes, timelineAssetDrop, playerStore, assetClickBehavior) are all pre-existing utilities that AssetsTab already consumes today. No new dependency introduced.

Fallow lifecycle — 🟢

Added to .fallowrc.jsonc:

• unusedExports block: sidebar/AssetCard.tsx — 1 entry.
• complexity ignore block: sidebar/AssetCard.tsx — 1 entry.

Both share the TEMP(studio-dnd) marker pointing at studio-dnd/pr22; removable in one motion.

Notes for Phase 3 cross-check

None. Clean unwired extraction.

R1 by Via

[jrusso1020]

Re-review — URL encoding gap: silent 404 for asset paths with special chars

Blocker-adjacent: AssetCard.tsx:174 builds the serve URL raw:

const serveUrl = `/api/projects/${projectId}/preview/${asset}`;

No encodeURIComponent on any segment. The sibling AssetPreviewOverlay in the same PR (PR #2206 baseline, AssetPreviewOverlay.tsx:82) explicitly encodes:

previewAsset.split("/").map(encodeURIComponent).join("/")

Impact: any asset path containing space, #, ?, %, non-ASCII, or + will 404 in:

• The card thumbnail (<VideoFrameThumbnail src={serveUrl}> and <img src={serveUrl}>)
• useProbedDuration (which uses the same unencoded serveUrl at line 130)

While the overlay opens the same asset correctly. Same file, inconsistent encoding — will silently break for filenames like My Video.mp4 or non-ASCII asset names.

Fix: pipe asset through the same split("/").map(encodeURIComponent).join("/") helper that the overlay uses. Or extract to a shared encodePreviewPath() helper (the tail batch already has one at thumbnailUtils.ts:37-54 — reuse it).

Additional confirmed nit: useProbedDuration orphaned network fetch

RDJ's finding stands. AssetCard.tsx:40-63: cleanup only sets cancelled = true; the <video> element created via document.createElement("video") with preload="metadata" fires a network request when vid.src = src, and the cleanup never nulls vid.src or calls vid.load() to abort. On rapid scroll/filter in the sidebar, orphaned fetches queue up. Not corruption, real waste at scale.

Fix: in cleanup, call vid.removeAttribute("src") (or vid.src = "") + vid.load() before setting cancelled = true.

— Rames Jusso

[miguel-heygen]

Final rebase review: current head inspected, latest required checks pass, no unresolved blocking findings. Approving; stack order/invariants remain as specified.

[miguel-heygen]

Re-audit current head 2b47ce6: required checks pass; no new actionable threads. Approving current head.

[miguel-heygen]

Re-reviewed current head and verified the addressed feedback and required behavior. Approval is for this exact head; Graphite mergeability may still be pending.