From 7443f9df9f76692117aea819c031551a7d8c1ec2 Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Wed, 4 Mar 2026 20:13:19 -0800 Subject: [PATCH] feat: redesign canvas toolbar with fluid expand and 9-group layout Toolbar buttons now smoothly widen on hover/click to reveal title text instead of using CSS tooltips. Reorganized from 7 groups into 9 (Note, Connect, Media, Embed, AI, Create, Decide, Spend, Travel) with better categorization. Collapse button uses chevron instead of dots. Mobile tap targets increased to 48px min-height for accessibility. Co-Authored-By: Claude Opus 4.6 --- website/canvas.html | 197 +++++++++++++++++++++++--------------------- 1 file changed, 103 insertions(+), 94 deletions(-) diff --git a/website/canvas.html b/website/canvas.html index fe67b22..29b0716 100644 --- a/website/canvas.html +++ b/website/canvas.html @@ -37,7 +37,7 @@ left: 12px; display: flex; flex-direction: column; - align-items: stretch; + align-items: flex-start; gap: 4px; padding: 6px 4px; background: var(--rs-toolbar-bg); @@ -224,56 +224,37 @@ color: white; } - /* Icon-only toolbar: show only emoji, clip text */ + /* Icon-only toolbar: show only emoji, fluid expand on hover/open */ .toolbar-group-toggle { - width: 42px; + max-width: 42px; overflow: hidden; text-overflow: clip; text-align: center; padding-left: 0; padding-right: 0; position: relative; + transition: max-width 0.25s ease, padding 0.2s ease; } - /* Tooltip on hover */ - .toolbar-group-toggle[data-tip]::after { - content: attr(data-tip); - position: absolute; - left: calc(100% + 8px); - top: 50%; - transform: translateY(-50%); - padding: 4px 10px; - border-radius: 6px; - background: var(--rs-toolbar-panel-bg); - color: var(--rs-toolbar-btn-text); - font-size: 12px; - white-space: nowrap; - box-shadow: var(--rs-shadow-md); - opacity: 0; - pointer-events: none; - transition: opacity 0.15s; - z-index: 1002; + /* Fluid expand: show title text on hover or when group is open */ + .toolbar-group:hover > .toolbar-group-toggle, + .toolbar-group.open > .toolbar-group-toggle { + max-width: 160px; + padding-left: 10px; + padding-right: 10px; + text-align: left; } - .toolbar-group-toggle[data-tip]:hover::after { - opacity: 1; - } - - /* Hide tooltip when group is open (dropdown is showing) */ - .toolbar-group.open > .toolbar-group-toggle[data-tip]::after { - display: none; - } - - /* Collapse/expand toggle โ€” small pill at bottom of toolbar */ + /* Collapse/expand toggle โ€” chevron at bottom of toolbar */ #toolbar-collapse { padding: 4px 0 !important; background: transparent !important; - font-size: 11px !important; + font-size: 16px !important; line-height: 1; opacity: 0.4; transition: opacity 0.2s; text-align: center; - letter-spacing: 2px; + letter-spacing: 0; color: var(--rs-text-muted); order: 999; /* always last */ margin-top: auto; @@ -1531,18 +1512,14 @@ #toolbar .toolbar-group-toggle { width: 100%; + max-width: none; text-align: left; - padding: 12px 14px; - font-size: 14px; - min-height: 44px; + padding: 14px 16px; + font-size: 16px; + min-height: 48px; overflow: visible; } - /* Hide tooltips on mobile โ€” full text shown */ - #toolbar .toolbar-group-toggle[data-tip]::after { - display: none; - } - #toolbar .toolbar-dropdown { position: static; box-shadow: none; @@ -1551,16 +1528,17 @@ } #toolbar .toolbar-dropdown button { - padding: 12px 14px; - font-size: 14px; - min-height: 44px; + padding: 14px 16px; + font-size: 16px; + min-height: 48px; } #toolbar > button { width: 100%; text-align: left; - padding: 12px 14px; - min-height: 44px; + padding: 14px 16px; + min-height: 48px; + font-size: 16px; } #toolbar .toolbar-sep { @@ -1592,6 +1570,12 @@ max-height: 50vh; } + #toolbar-panel-body button { + padding: 14px 16px; + font-size: 16px; + min-height: 48px; + } + /* Bottom toolbar: compact on mobile */ #bottom-toolbar { bottom: 8px; @@ -1831,50 +1815,46 @@
+
- +
+
+
+ + +
+ +
+ +
+
- +
- - - - - - - - - - -
-
- -
- -
- - - - + + + +
+
- +
- - - - - + + + + + @@ -1887,41 +1867,68 @@
+
- +
- - + + + + +
+
- +
- - - - - + + + + + + +
+
- +
- - - - - - - - + + + + + +
- + +
+ +
+ + +
+
+ + +
+ +
+ + + + + +
+
+ +
@@ -3587,6 +3594,8 @@ document.getElementById("new-prompt").addEventListener("click", () => setPendingTool("folk-prompt")); document.getElementById("new-transcription").addEventListener("click", () => setPendingTool("folk-transcription")); document.getElementById("new-video-chat").addEventListener("click", () => setPendingTool("folk-video-chat")); + document.getElementById("new-record").addEventListener("click", () => setPendingTool("folk-record")); + document.getElementById("new-stream").addEventListener("click", () => setPendingTool("folk-stream")); document.getElementById("new-workflow").addEventListener("click", () => { setPendingTool("folk-workflow-block", { blockType: "trigger", @@ -4924,7 +4933,7 @@ const collapseBtn = document.getElementById("toolbar-collapse"); collapseBtn.addEventListener("click", () => { const isCollapsed = toolbarEl.classList.toggle("collapsed"); - collapseBtn.textContent = isCollapsed ? "โ–ถ" : "ยทยทยท"; + collapseBtn.textContent = isCollapsed ? "โ€บ" : "โ€น"; collapseBtn.title = isCollapsed ? "Expand toolbar" : "Minimize toolbar"; });