Files page redesign + supporting design-system components#143
Open
jess-cat wants to merge 8 commits into
Open
Conversation
…n preview Phase 1 of the Files page redesign (review gate): - New Breadcrumbs primitive (back button + clickable crumbs + collapse/ellipsis), catalog story under Chrome - Tabs gains an additive previewIndex prop (italic VS Code-style preview/peek tab) - Files-redesign catalog template story assembling real DS components (machine Select, Tabs preview, Breadcrumbs, search/create toolbar, ListRow listing, editor, ConfirmModal) across four states Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…-confirm Enablers for the Files redesign: - IconButton gains refresh + newTab glyphs (inline SVG, house style) - ConfirmModal gains optional confirmPhrase/confirmInputLabel/confirmInputPlaceholder — renders a TextInput and disables confirm until the typed text matches (type-path-to-confirm guard) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Reworks the live Files page to the reviewed information architecture: - Machine selector dropdown (DS Select) replaces the left target rail (rail deleted); + Add machine routes to /settings/machines/new - File tabs use the preview-tab model: single-click opens a reusable italic preview tab; editing or the per-row 'open in new tab' (newTab glyph) promotes to a permanent tab - Breadcrumbs (with back button + refresh) replace the UP button for path navigation - Toolbar: whole-target search left, CREATE NEW right; UP/CLEAR removed - Delete uses ConfirmModal with type-path-to-confirm (inline delete bar removed) - Keyboard navigation in the listing (arrows / Enter / Backspace); selected-row styling - Preserves editor/save/reset, image + binary views, create-file, search results, dirty-close guard Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…umb priority - FilesSurfaceSummary.css: replace hardcoded hexes with design tokens; add 6 new tokens to gsv-tokens.css (--field-deep, --shadow-deep, --text-muted, --bg-error, --bg-online, --bg-warn); tiered responsive breakpoints; toolbar buttons wrap (flex:none) instead of shrink-and-ellipsize - Breadcrumbs: the current/last crumb keeps full width (flex:0 0 auto, no clamp); earlier crumbs ellipsize first so the current location stays readable in narrow panels Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
New Search component composing TextInput (full field-shell parity: label/info/ description/requirement/status/message/sizes/disabled/readonly), with a leading magnifier glyph, clearable by default, and onSearch fired on Enter. block=false by default so it stays bounded-width. TextInput.prefix widened to accept a node (additive). Registered in the catalog under Forms. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…, breadcrumb collapse - Toolbar: the new small Search field (not full-width) and CREATE NEW share row 1; DELETE moves to row 2 under CREATE and renders only when a file is selected - Directory listing selection model: single-click a file SELECTS it (no open); double-click / Enter opens it in the preview tab; directories still navigate on single-click; DELETE targets the selected file via the ConfirmModal flow - Breadcrumb maxVisible 8 -> 3 so deep paths collapse to ROOT / … / parent / current instead of squeezing every crumb in the narrow Files panel Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ll widths - Revert the file single-click behavior: single-click again SELECTS + OPENS a file in the preview tab (directories navigate); the DELETE row stays keyed to the keyboard-highlighted file (arrow keys), removing the double-click-to-open special case - Drop the <=980px toolbar overrides that forced search full-width and wrapped CREATE NEW beneath it; search now shrinks to stay beside CREATE NEW on row 1, so DELETE remains strictly on row 2 below CREATE at all widths Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
deathbyknowledge
requested changes
Jun 25, 2026
deathbyknowledge
left a comment
deathbyknowledge
left a comment
Owner
There was a problem hiding this comment.
File view
Folder view
This adds the new Breadcrumbs component to Files, but now we repeat the path/breadcrumbs in too many places. We should clean it up. Imo we can keep just hte new one
| note="This file is permanently removed from the target — it cannot be recovered." | ||
| confirmLabel="DELETE" | ||
| confirmPhrase={deleteRequest.path} | ||
| confirmInputLabel="TYPE PATH TO CONFIRM" |
Owner
There was a problem hiding this comment.
Let's remove the confirmation path field. Having to write the entire path is very annoying, the red DELETE button is scary enough as is
…-confirm Address review feedback on the Files redesign: - The new Breadcrumbs is now the single path display in both views. Folder view drops the redundant path on the DIR/FILE summary row; file view replaces the duplicated editor-path + file-meta path (and the now-redundant SHOW FOLDER button) with the same Breadcrumbs trail, ending on the file name. - Remove the "type the path to confirm" field from the delete dialog — the red danger DELETE button is warning enough. Drops the dead .files-editor-path / list-summary-path CSS. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Reworks the Files surface to the reviewed information architecture, and adds the design-system components it needed. Built page-by-page with live verification on the real backend.
Design-system additions (catalogued)
Breadcrumbs— back button + clickable crumbs + collapse/ellipsis; current/last crumb keeps priority so it stays readable in narrow panels.Search— composesTextInputfor full field-shell parity (label/info/description/requirement/status/message/sizes/disabled/readonly), with a leading magnifier glyph, clearable, andonSearchon Enter; bounded width by default.Tabs— additivepreviewIndexprop (italic VS Code-style preview/peek tab).IconButton— newrefreshandnewTabglyphs.ConfirmModal— additiveconfirmPhrase(type-to-confirm guard).Checkbox/Toggle—requirementindicator (consistency with the other fields).Files redesigncatalog template story (Templates) used as the design review gate.Files surface rework
Selectdropdown (the left target rail is removed);+ Add machineroutes to the provisioning flow.Breadcrumbs(with back + refresh) replace the UP button; deep paths collapse toROOT / … / parent / current.Search(left) + CREATE NEW (right) on one row; DELETE on the row below, shown only when a file is keyboard-selected; UP/CLEAR removed.ConfirmModalwith type-path-to-confirm (inline bar removed).Verification
Driven live on the gateway (
:8787, logged in): machine dropdown, breadcrumb navigation + collapse, preview-tab open, open-in-new-tab, keyboard-selected delete + type-to-confirm modal, and the search+create / delete-below layout at 1280 / 980 / 720px. New components verified in the/designcatalog.Known follow-ups (out of scope here)
🤖 Generated with Claude Code