Preview panel: resizable right-side file preview (images, PDF, video/audio, MD, text) #295
Labels
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference: Cordy/Cairn#295
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Request (2026-08-20, Nikola): clicking a file row should open a preview panel sliding in from the right (like Dropbox but not half the page) — default ~1/3 width, draggable border to resize. Mockup approved 2026-08-20; phasing decision: native formats first, office formats follow in #TBD (phase 2).
Scope v1 — zero-dependency formats:
<img>.<iframe>. Requires an inline mode on the raw endpoint — it currently always sendsContent-Disposition: attachment, which is exactly why nothing renders in-browser today. Add?inline=1→Content-Disposition: inline+ correct Content-Type from the extension.<video>/<audio>(also needs inline + Range support —http.ServeContentalready does ranges).<pre>, capped (~2 MB; larger shows "too large — download").Panel UX (per approved mockup):
Security note:
?inline=1means user-uploaded HTML/SVG could execute in the app origin if iframed naively. Mitigation: serve inline previews for a whitelist of safe content types only (images/pdf/video/audio); SVG previews via<img>(no script execution), never iframe; HTML files preview as escaped text in v1. AddX-Content-Type-Options: nosniffon raw responses.Mockup-first done; fidelity diff against the approved mockup before ship per house process.
Shipped as v0.6.57 (PR #298), live on both dogfoods. Fidelity diff against the approved mockup was done pre-merge and three gaps were fixed on the branch: always-teal divider grip, teal outline on the selected row, and the amber star shown next to the filename (not just in the actions column).
What changed:
nosniffon all raw responses.Dogfood checklist:
Hotfixes shipped as v0.6.58 (PR #299), live on both dogfoods.
Root causes of the three findings:
<aside>element — Cairn's sidebar has a globalaside button { width: 100% }rule, so the star and ✕ each demanded the full panel width and squeezed the filename to nothing. The panel is now a<section>, and.pviconis pinned to its natural size as a second guard.100vh − headerand its body scrolls internally — a long .md scrolls inside the preview, PDFs stay contained in their viewer (first page visible, scroll within the frame). #297 office previews will use the same contained model (render capped/first page in the fixed-height body).Re-check:
Row-separator seams fixed in v0.6.59 (PR #300), live on both dogfoods.
Honest root-cause note: the v0.6.58 highlight fix was correct for the selected-row effect, but the seams you circled were a different, pre-existing bug that the longer wrapped filenames made visible:
td.namecellwas itselfdisplay: flex. A table cell withdisplay: flexstops being a table cell — the browser wraps it in an anonymous cell and its borders no longer collapse with the size/modified cells, producing the 1px steps at the column boundary and the misaligned—dash on folder rows. The cell is a real table cell again; the icon+name flex layout now lives on a wrapperdivinside it. Verified there is exactly one place in the UI that builds these cells.Re-check: the line under every row should now run continuously across all four columns — including the two-line wrapped names and the Inbox/moverini folder rows from your screenshot.
Closing — verified on the dogfood (shipped v0.6.57/58/59, PRs #298/#299/#300).