f3f20accbb
Render browser-native previews for right-dock file selections while preserving text editing behavior. - Add image, video, audio, and PDF preview rendering through the workspace download URL. - Keep previewable and known binary files out of the text editor, with a read-only fallback for unsupported binaries. - Cover compact and two-pane dock preview behavior with tests, docs, and a patch changeset. Files changed: .changeset/fn-7031-dock-files-binary-preview.md | 7 + docs/dashboard-guide.md | 2 +- .../dashboard/app/components/DockFilesView.css | 45 ++++++ .../dashboard/app/components/DockFilesView.tsx | 85 ++++++++++- .../components/__tests__/DockFilesView.test.tsx | 170 ++++++++++++++++++++- 5 files changed, 303 insertions(+), 6 deletions(-) Fusion-Task-Id: FN-7031 Fusion-Task-Lineage: a52bdd57-bb3e-494e-85a8-81326a1548e2
251 lines
8.7 KiB
CSS
251 lines
8.7 KiB
CSS
/*
|
|
FNXC:RightDockFiles 2026-06-22-00:00:
|
|
The inline Files viewer fills the right-dock body and scrolls internally so the read-only FileEditor never overflows the dock.
|
|
The header is a compact bar: BACK on the left, a truncating file name in the middle, POP-OUT on the right.
|
|
|
|
FNXC:Files 2026-06-22-00:00:
|
|
Responsive single-panel vs two-pane layout driven entirely by a CSS container query.
|
|
The root is a query container (container-type: inline-size, container-name: dock-files). Both the tree pane (.dock-files-view__tree) and the viewer pane (.dock-files-view__viewer) are always rendered in the DOM; CSS decides visibility per container width.
|
|
- NARROW (default, in the dock): single-panel stack. The tree fills the root. When a file is selected (root [data-selected="true"]) the viewer pane covers the stack and the tree is hidden; BACK returns to the tree.
|
|
- WIDE (>=640px, the RightDockExpandModal pop-out): two-pane side-by-side. Tree pinned left (clamped width, scrollable), viewer flex:1 on the right (scrollable). Both always visible regardless of data-selected; BACK is hidden because the tree never disappears.
|
|
|
|
FNXC:Files 2026-06-22-01:00:
|
|
Breakpoint lowered 720px -> 640px and root forced to width:100%. The expand modal body has horizontal padding/overflow, so the root's content-box landed just under 720px at common laptop widths and the query never fired, leaving the pop-out stacked. 640px triggers two-pane for any realistic pop-out while staying above the narrow dock width.
|
|
|
|
FNXC:RightDockFiles 2026-06-22-15:00:
|
|
DETERMINISTIC replacement for the container query in the pop-out. The @container rule kept missing inside RightDockExpandModal (the root content-box measured under the breakpoint despite width:100%, because the modal body's flex/overflow context never gave the root the expected inline-size), so the pop-out stayed stacked. The expand host now passes `layout="two-pane"` -> `.dock-files-view--two-pane`, which forces the LEFT|RIGHT split with NO container-query gate. The @container path below is kept ONLY for the default `auto` (dock) layout.
|
|
*/
|
|
.dock-files-view {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
height: 100%;
|
|
/*
|
|
FNXC:Files 2026-06-22-01:00:
|
|
The root must fill its host (right-dock body OR the wide RightDockExpandModal body) so the inline-size query
|
|
measures the true available width. Without width:100% the flex root only measured its shrunk content width, so
|
|
the @container breakpoint never fired in the expand modal and the layout stayed stacked. Pair with width:100%.
|
|
*/
|
|
width: 100%;
|
|
/* FNXC:RightDockFiles 2026-06-22-12:00: establish the query container so child panes can respond to the dock vs expand-modal width. */
|
|
container-type: inline-size;
|
|
container-name: dock-files;
|
|
}
|
|
|
|
/* FNXC:RightDockFiles 2026-06-22-12:00: NARROW default: tree fills the root as the single panel. */
|
|
.dock-files-view__tree {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/*
|
|
FNXC:RightDockFiles 2026-06-22-12:00: NARROW default: viewer is the stacked second panel.
|
|
Hidden until a file is selected; when selected it overlays the tree as the single visible panel (the tree is hidden below).
|
|
*/
|
|
.dock-files-view__viewer {
|
|
display: none;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dock-files-view[data-selected="true"] .dock-files-view__tree {
|
|
display: none;
|
|
}
|
|
|
|
.dock-files-view[data-selected="true"] .dock-files-view__viewer {
|
|
display: flex;
|
|
}
|
|
|
|
.dock-files-viewer__header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
padding: var(--space-xs) var(--space-sm);
|
|
/*
|
|
FNXC:RightDockChrome 2026-06-23-19:10:
|
|
Files is the default right-sidebar view, so its own header and tree/viewer split follow the right-dock divider token contract: invisible by default, theme-restorable via --right-dock-view-divider-color.
|
|
*/
|
|
border-bottom: var(--chrome-divider-width, 1px) solid var(--right-dock-view-divider-color, transparent);
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.dock-files-viewer__title {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.dock-files-viewer__back,
|
|
.dock-files-viewer__popout,
|
|
.dock-files-viewer__save {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.dock-files-viewer__save {
|
|
gap: var(--space-xs);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dock-files-viewer__body {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dock-files-viewer__body .file-editor-container {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
/*
|
|
FNXC:RightDockFiles 2026-06-25-00:00:
|
|
The dock Files viewer shares FileBrowserModal's native preview classes but needs dock-scoped flex sizing so image/video/audio/PDF previews fit both the compact single-panel stack and the two-pane pop-out without overflowing or showing the CodeMirror shell.
|
|
*/
|
|
.dock-files-preview {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
width: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.dock-files-preview__media {
|
|
min-width: 0;
|
|
}
|
|
|
|
.dock-files-preview .file-browser-preview-media--image,
|
|
.dock-files-preview .file-browser-preview-media--video {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.dock-files-preview .file-browser-preview-media--audio {
|
|
width: min(100%, calc(var(--space-xl) * 18));
|
|
}
|
|
|
|
.dock-files-preview .file-browser-preview-media--pdf {
|
|
width: 100%;
|
|
min-height: 0;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.dock-files-viewer__status {
|
|
padding: var(--space-md);
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.dock-files-viewer__status--error {
|
|
color: var(--color-error, var(--text));
|
|
}
|
|
|
|
/* FNXC:RightDockFiles 2026-06-22-12:00: empty-state placeholder shown in the wide right pane until a file is selected. */
|
|
.dock-files-viewer__empty {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1 1 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
/*
|
|
FNXC:Files 2026-06-22-01:00:
|
|
WIDE container (>=640px): two-pane side-by-side. Activated when DockFilesView is rendered in the wide RightDockExpandModal.
|
|
Both panes are always visible; data-selected no longer toggles visibility here.
|
|
*/
|
|
@container dock-files (min-width: 640px) {
|
|
.dock-files-view {
|
|
flex-direction: row;
|
|
}
|
|
|
|
/* Tree pinned left: clamped, scrollable, with a tokenized divider against the viewer. */
|
|
.dock-files-view__tree {
|
|
display: flex;
|
|
flex: 0 0 clamp(220px, 32%, 360px);
|
|
min-width: 0;
|
|
overflow: auto;
|
|
border-right: var(--chrome-divider-width, 1px) solid var(--right-dock-view-divider-color, transparent);
|
|
}
|
|
|
|
/* Viewer fills the remaining width; always visible (empty-state until a file is selected). */
|
|
.dock-files-view__viewer,
|
|
.dock-files-view[data-selected="true"] .dock-files-view__viewer {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dock-files-view[data-selected="true"] .dock-files-view__tree {
|
|
display: flex;
|
|
}
|
|
|
|
/* BACK is meaningless when the tree is always visible. */
|
|
.dock-files-view__viewer .dock-files-viewer__back {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/*
|
|
FNXC:RightDockFiles 2026-06-22-15:00:
|
|
DETERMINISTIC two-pane layout for the RightDockExpandModal pop-out. Driven by the `.dock-files-view--two-pane` modifier (DockFilesView layout="two-pane"), NOT by any @container width, so it always renders LEFT|RIGHT regardless of how the modal body measures the root's inline-size. Mirrors the @container rules above but unconditionally.
|
|
- Tree pinned LEFT: clamped/resizable-feel fixed width, scrolls independently, tokenized divider against the viewer.
|
|
- Viewer fills the RIGHT, scrolls independently, empty-state until a file is selected.
|
|
- data-selected never toggles pane visibility here (both panes always visible); BACK is hidden because the tree never disappears.
|
|
*/
|
|
.dock-files-view--two-pane {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.dock-files-view--two-pane .dock-files-view__tree {
|
|
display: flex;
|
|
flex: 0 0 clamp(220px, 32%, 360px);
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
border-right: var(--chrome-divider-width, 1px) solid var(--right-dock-view-divider-color, transparent);
|
|
}
|
|
|
|
.dock-files-view--two-pane .dock-files-view__viewer,
|
|
.dock-files-view--two-pane[data-selected="true"] .dock-files-view__viewer {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dock-files-view--two-pane[data-selected="true"] .dock-files-view__tree {
|
|
display: flex;
|
|
}
|
|
|
|
/* BACK is meaningless when the tree is always visible in the two-pane split. */
|
|
.dock-files-view--two-pane .dock-files-view__viewer .dock-files-viewer__back {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.dock-files-preview {
|
|
padding: var(--space-md);
|
|
}
|
|
|
|
.dock-files-preview .file-browser-preview-media--image,
|
|
.dock-files-preview .file-browser-preview-media--video,
|
|
.dock-files-preview .file-browser-preview-media--pdf {
|
|
width: 100%;
|
|
}
|
|
}
|