Redesign the workbench as floating islands (0286) - #426
Merged
Conversation
Contributor
|
Preview removed for PR #426. |
Contributor
🖼️ UI changes in this PRScreens✏️ Home _(SSIM 0.758)_
Auto-captured by CI · run. Informational — not a blocking check. |
added 6 commits
July 8, 2026 22:42
Signed-off-by: xNet Test <test@xnet.dev>
Recompose the desktop pinned frame as one warm canvas surface with all chrome floating as rounded islands: two stacked sidebar islands (nav + contextual surface), a base-surface editor with header + pill tabs, a right context island, a status-bar island, and a bottom-center chat dock. Adds the surfaces model (activeSurface/navPinned) and anchored popovers; reuses the store, views, tabs and hooks unchanged. Signed-off-by: xNet Test <test@xnet.dev>
Add a smoke test for the surfaces model and the new floating-shell store actions, plus the changelog fragment. Existing workbench tests (190) pass unchanged. Signed-off-by: xNet Test <test@xnet.dev>
Signed-off-by: xNet Test <test@xnet.dev>
Signed-off-by: xNet Test <test@xnet.dev>
The safety-ui e2e helper drove the legacy Rail; teach it the new two-island sidebar (Inbox is a pinned primary row; Discover opens from the More roll-out). Also prettier-format the new shell files. Signed-off-by: xNet Test <test@xnet.dev>
crs48
force-pushed
the
claude/workbench-redesign-491f68
branch
from
July 9, 2026 05:43
9fb268f to
38db38f
Compare
crs48
added a commit
that referenced
this pull request
Jul 9, 2026
## Summary Three refinements on top of the merged Floating Islands workbench (#426): 1. **Dev-tools island** — in dev builds, a 32×32 wrench island now docks beside the status-bar island (bottom-right). Its upward popover opens the real `@xnetjs/devtools` panels — **Query console** (⌘J), **Inspect schema**, **Sync log**, and **Feature flags** (→ `/experiments`). A new `hideFab` prop on `XNetDevToolsProvider` retires the floating draggable FAB in favour of the docked island (⌘⇧D still works). Gated on `import.meta.env.DEV`, so production tree-shakes it out entirely. 2. **Collapsible header island** — a caret at the base of the top sidebar island collapses it to a compact rail (avatar + workspace selector + search/new; a divider; icon-only pinned surfaces + More). Only the **header island's height** animates (240ms `cubic-bezier(.4,0,.2,1)`, reduced-motion aware); its width doesn't change and the Explorer island below (`flex-1`) grows to fill. New `sidebarCompact` store field. 3. **Linear-style task rings** — already satisfied: the real Tasks surface renders `@xnetjs/ui`'s `TaskStatusIcon` (a Linear-style workflow ring), not a checkbox, so no change was needed. Modifying that shared, widely-used component was intentionally avoided. ## Verification - Live-rendered in the worktree preview: the dev-tools island opens its upward popover and **Query console** opens the real DevTools Queries panel; the header caret collapses to the compact rail and back with the Explorer island reflowing; the floating FAB is gone; no console errors. - `pnpm typecheck` (94/94), lint (0 errors), humane-patterns gate, and 206 workbench + devtools tests (incl. a new `sidebarCompact` test) all pass. `apps/web` + `@xnetjs/devtools` are private → no changeset; changelog fragment added. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
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
1 participant
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.
Summary
Recompose the desktop workbench as one warm canvas surface with all chrome floating on top as rounded, softly-shadowed islands — a calmer, Notion / Claude-desktop feel where the document reads as the brightest, most-forward plane. Implements the external "Floating Islands" design handoff. See exploration 0286.
What changed
.wb-root/.dark .wb-rootoverride (canvas / island / island-b + soft--isl-shadow/--pop-shadow), plusisland/island-b/canvascolors andshadow-isl/shadow-poputilities. Rides on top of the 0166 ramp; thelinearaccent still composes on top.FloatingFrame— the new pinned desktop renderer (11px pad, 8px gaps). Focus/zen still hand off to the bare surface.activeSurface/navPinned) + a roll-out flyout to pin/unpin which surfaces stay visible.pillvariant of the existingTabBar).The store, views, tabs, hooks and routing are reused unchanged; this is the pinned frame's new paint plus a small surfaces model.
Verification
pnpm typecheck(94/94), lint (0 errors), humane-patterns gate, and 197 workbench tests (190 existing + 7 new) all pass.apps/webis private → no changeset; changelog fragment added.🤖 Generated with Claude Code