mirror of
https://github.com/mvschwarz/openrig.git
synced 2026-11-08 17:31:56 -10:00
shell-redesign V1 attempt-3 Phase 3 BOUNCE-FIX follow-on: lighter vellum + collapsed explorer toggle
Founder direction 2026-05-06 — two fixes: 1. Vellum overlay too dense - Bounce-fix #2 used .vellum-heavy (rgba(255,255,255,0.7) + blur(16px)) — too opaque vs the baseline Phase 2 explorer which was rgba(250,249,245,0.035) supports-bg(0.018) + blur(14px) — extremely transparent. - Switched topology-graph overlay to .vellum (rgba(255,255,255,0.4) + blur(8px)) — lighter, paper-grid visible through it, tree text readable. Reads coherent with baseline transparency. Lighter shadow (rgba 0.06 vs 0.08). 2. Collapsed Explorer unreachable without page refresh - Previous: desktopMode='hidden' applied lg:hidden to entire aside, hiding the chevron toggle along with tree contents. Once collapsed, no in-app affordance to re-expand. - Fix: collapsed state is now a thin 12px (w-12) column at left=48px (past the rail) showing only the chevron-right toggle. Clicking re-expands. SurfaceBody (tree contents) is conditionally unmounted in collapsed state for clean appearance. data-explorer-collapsed attribute added for runtime probing. - Toggle button: * collapsed: chevron-right, centered (left-1/2 -translate-x-1/2) * expanded: chevron-left, right-edge (right-2) - AppShell anchor offset accounts for collapsed stub: explorerAnchorLeft is 6rem (rail 3 + stub 3) when explorerVisible && !desktopExplorerOpen, 21rem when fully open, 3rem when no explorer for destination. Visual verified at /topology 1440x900: - Default: vellum overlay reads lighter; tabs + canvas + paper-grid show through Explorer's translucent surface. - Click chevron-left: Explorer collapses to 12px stub; chevron flips to right-arrow at center; tabs/canvas extend to take the freed width. - Click chevron-right: Explorer re-expands. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
This commit is contained in:
mvschwarzandClaude Opus 4.7 committed
1 parent
210c32277d
commit
ed08ff2376
2 files changed
+42
-24
No files matched your search
@@ -395,7 +395,14 @@ function AppShellInner({ children }: AppShellProps) {
|
||||
// - overlay: padding = 0 (content extends behind translucent explorer);
|
||||
// tab bar is sticky/positioned at left=anchor independently.
|
||||
// 21rem = rail (3rem) + explorer (18rem).
|
||||
const explorerAnchorLeft = isWideLayout && explorerVisible && desktopExplorerOpen ? "21rem" : "3rem";
|
||||
// 21rem (rail 3 + explorer 18) when explorer fully open; 6rem
|
||||
// (rail 3 + collapsed-explorer-stub 3) when explorer collapsed; 3rem
|
||||
// (rail only) when no explorer for the destination.
|
||||
const explorerAnchorLeft = isWideLayout && explorerVisible
|
||||
? desktopExplorerOpen
|
||||
? "21rem"
|
||||
: "6rem"
|
||||
: "3rem";
|
||||
const workspaceLeftOffset = isWideLayout
|
||||
? isTopologyOverlay
|
||||
? "0rem"
|
||||
|
||||
@@ -578,61 +578,72 @@ export function Explorer({
|
||||
// OPAQUE (default; every destination except topology-graph): solid
|
||||
// paper-cream tone (Phase 2 baseline) so the explore tree reads
|
||||
// crisply against the center workspace.
|
||||
// OVERLAY (topology graph only): vellum-heavy translucent surface
|
||||
// (.vellum-heavy class from globals.css L118-122 — rgba(255,255,255,0.7)
|
||||
// + backdrop-blur(16px)) with elevated z-index so the graph canvas
|
||||
// OVERLAY (topology graph only): light vellum translucent surface
|
||||
// (.vellum class from globals.css L113-117 — rgba(255,255,255,0.4)
|
||||
// + backdrop-blur(8px)) with elevated z-index so the graph canvas
|
||||
// underneath shows through. Sheets-of-vellum-layered aesthetic per
|
||||
// universal-shell.md L48.
|
||||
// universal-shell.md L48. Founder calibration 2026-05-06: vellum
|
||||
// (40%) reads coherent with the baseline 3.5% opacity Phase 2 had;
|
||||
// vellum-heavy (70%) was too dense.
|
||||
const isOverlay = overlayMode === "overlay";
|
||||
const isCollapsed = desktopMode === "hidden";
|
||||
return (
|
||||
<aside
|
||||
data-testid="explorer"
|
||||
data-surface={surface}
|
||||
data-explorer-mode={overlayMode}
|
||||
data-explorer-collapsed={isCollapsed}
|
||||
className={cn(
|
||||
// V1 border weight doctrine (universal-shell.md L39–L48):
|
||||
// 1px outline-variant ghost line for inter-region edges.
|
||||
"border-r border-outline-variant flex overflow-hidden",
|
||||
// Background grammar by mode:
|
||||
isOverlay
|
||||
? "vellum-heavy z-30 shadow-[6px_0_14px_rgba(46,52,46,0.08)]"
|
||||
? "vellum z-30 shadow-[6px_0_14px_rgba(46,52,46,0.06)]"
|
||||
: "z-20 bg-[rgba(250,249,245,0.035)] supports-[backdrop-filter]:bg-[rgba(250,249,245,0.018)] backdrop-blur-[14px] backdrop-saturate-75 shadow-[6px_0_14px_rgba(46,52,46,0.04)]",
|
||||
// Mobile: slide-over from left below the top-bar header (h-14).
|
||||
"fixed top-14 bottom-0 left-0 transition-transform duration-200 ease-tactical w-72 max-w-[80vw]",
|
||||
open ? "translate-x-0" : "-translate-x-full",
|
||||
// Desktop (>=lg): persistent column at 280px (lg:w-72) per universal-shell.md L34.
|
||||
// Position absolutely after the 48px rail; in opaque mode AppShell
|
||||
// also pads main with workspace-left-offset so center content
|
||||
// starts AFTER the Explorer. In overlay mode the main padding is
|
||||
// 0 so the canvas extends behind this translucent panel.
|
||||
// Desktop (>=lg): persistent column at 280px (lg:w-72) per
|
||||
// universal-shell.md L34. Positioned absolutely after the 48px
|
||||
// rail. When collapsed: thin 12px column with just the
|
||||
// chevron-right re-open toggle visible (founder direction
|
||||
// 2026-05-06 — no way to expand otherwise without page refresh).
|
||||
desktopMode === "full" && "lg:absolute lg:top-0 lg:bottom-0 lg:left-12 lg:w-72 lg:max-w-none lg:translate-x-0",
|
||||
desktopMode === "hidden" && "lg:hidden",
|
||||
desktopMode === "hidden" && "lg:absolute lg:top-0 lg:bottom-0 lg:left-12 lg:w-12 lg:max-w-none lg:translate-x-0 bg-background",
|
||||
)}
|
||||
>
|
||||
<div className="relative flex h-full w-full flex-col">
|
||||
{/* Collapse / expand toggle — always reachable. When the
|
||||
explorer is collapsed (desktopMode='hidden'), the entire
|
||||
aside shrinks to a 12px column showing only this toggle so
|
||||
the user can re-expand without refreshing. Founder direction
|
||||
2026-05-06. */}
|
||||
<button
|
||||
type="button"
|
||||
data-testid="explorer-edge-toggle"
|
||||
aria-label={desktopMode === "full" ? "Collapse explorer" : "Expand explorer"}
|
||||
aria-label={isCollapsed ? "Expand explorer" : "Collapse explorer"}
|
||||
onClick={onDesktopToggle}
|
||||
className={cn(
|
||||
"hidden lg:flex absolute z-10 h-8 w-8 items-center justify-center rounded-full border border-stone-300 bg-background/90 text-stone-700",
|
||||
"shadow-[0_2px_8px_rgba(41,37,36,0.08)] backdrop-blur-sm transition-colors hover:bg-stone-100 hover:text-stone-900",
|
||||
"right-2 top-3",
|
||||
isCollapsed ? "left-1/2 top-3 -translate-x-1/2" : "right-2 top-3",
|
||||
)}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
{isCollapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
|
||||
</button>
|
||||
|
||||
<SurfaceBody
|
||||
surface={surface}
|
||||
rigs={rigs}
|
||||
psMap={psMap}
|
||||
selection={selection}
|
||||
onSelect={onSelect}
|
||||
onClose={onClose}
|
||||
currentRigId={currentRigId}
|
||||
/>
|
||||
{!isCollapsed && (
|
||||
<SurfaceBody
|
||||
surface={surface}
|
||||
rigs={rigs}
|
||||
psMap={psMap}
|
||||
selection={selection}
|
||||
onSelect={onSelect}
|
||||
onClose={onClose}
|
||||
currentRigId={currentRigId}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user