From 4d160da1056b9f324913e37fb60f1a823bbc58bd Mon Sep 17 00:00:00 2001 From: arkml <6592213+arkml@users.noreply.github.com> Date: Mon, 18 May 2026 22:49:18 +0530 Subject: [PATCH] minor design changes (#564) --- apps/x/apps/renderer/DESIGN_LANGUAGE.md | 41 +++++++ apps/x/apps/renderer/src/App.css | 111 +++++++++++++++++- apps/x/apps/renderer/src/App.tsx | 6 +- .../components/chat-input-with-mentions.tsx | 2 +- .../src/components/sidebar-content.tsx | 6 +- .../apps/renderer/src/components/tab-bar.tsx | 4 +- 6 files changed, 159 insertions(+), 11 deletions(-) create mode 100644 apps/x/apps/renderer/DESIGN_LANGUAGE.md diff --git a/apps/x/apps/renderer/DESIGN_LANGUAGE.md b/apps/x/apps/renderer/DESIGN_LANGUAGE.md new file mode 100644 index 00000000..cf412593 --- /dev/null +++ b/apps/x/apps/renderer/DESIGN_LANGUAGE.md @@ -0,0 +1,41 @@ +# Rowboat Design Language + +Rowboat should feel like a command center for people who live in notes, agents, email, meetings, and files all day. The launch direction is quiet, fast, and prosumer: dense enough for repeated work, warm enough to feel personal, and explicit about what the AI is doing. + +## Principles + +1. **Calm density** + Keep the interface compact and scannable. Use tighter rows, restrained borders, and low-contrast panels so users can keep many contexts open without the app feeling heavy. + +2. **Command first** + Primary actions should feel like instant commands, not marketing CTAs. Side navigation, search, model selection, and composer controls use compact icon-led affordances with clear hover and selected states. + +3. **Visible work state** + AI actions, sync, saving, meeting capture, and background tasks need clear status surfaces. Prefer small persistent indicators over large banners. + +4. **Notes as the canvas** + The editor and conversation stay visually dominant. Chrome is supportive, not decorative. Avoid nested cards and oversized empty states in work surfaces. + +5. **Neutral precision** + The palette follows the dev color system: white and graphite surfaces, black/white primary actions, neutral command tools, and reserved semantic colors for destructive and chart states. + +## Tokens + +- Radius: `8px` for controls and cards, smaller where density matters. +- Backgrounds: dev defaults in light and dark mode. +- Borders: one-step darker than surfaces, quiet enough to separate panels without tinting them. +- Shadows: reserved for the composer, menus, dialogs, and active segmented controls. +- Type: system sans with tabular-feeling OpenType features enabled; no negative tracking. +- Accent use: primary and command affordances use the neutral dev palette. Extra hues are reserved for semantic states and charts. + +## Core Surfaces + +- **Sidebar:** persistent workflow switcher with calm selected states. Quick-action icons use neutral ink from the dev palette. +- **Titlebar/tabs:** slim, scan-first navigation. Active tabs get a bottom signal line, not a bulky filled pill. +- **Composer:** the highest-emphasis control outside the active canvas. It is slightly raised, flat, bordered by the primary tone, and sharp enough to feel like an input terminal. +- **Messages:** user messages are compact structured blocks; assistant messages remain full-width and readable. +- **Status:** sync, saving, recording, and task activity stay small but always visible near the surface they affect. + +## Launch Positioning + +The visual story is: **Rowboat is the personal AI workspace for people whose work already spans meetings, mail, notes, browser tasks, and agents.** It should feel closer to a focused desktop tool than a chat website. diff --git a/apps/x/apps/renderer/src/App.css b/apps/x/apps/renderer/src/App.css index 6a3ffbee..6c6a2e25 100644 --- a/apps/x/apps/renderer/src/App.css +++ b/apps/x/apps/renderer/src/App.css @@ -980,7 +980,7 @@ } :root { - --radius: 0.625rem; + --radius: 0.5rem; --background: var(--bg-color, oklch(1 0 0)); --foreground: var(--text-color, oklch(0.145 0 0)); --card: var(--bg-color, oklch(1 0 0)); @@ -1008,13 +1008,21 @@ --sidebar-foreground: var(--text-color, oklch(0.145 0 0)); --sidebar-primary: var(--main-color, oklch(0.205 0 0)); --sidebar-primary-foreground: var(--bg-color, oklch(0.985 0 0)); - --sidebar-accent: var(--sub-color, oklch(0.90 0 0)); + --sidebar-accent: var(--sub-color, oklch(0.9 0 0)); --sidebar-accent-foreground: var(--text-color, oklch(0.205 0 0)); --sidebar-border: var(--sub-alt-color, oklch(0.922 0 0)); --sidebar-ring: var(--main-color, oklch(0.708 0 0)); --scrollbar-track: oklch(0.95 0 0); --scrollbar-thumb: oklch(0.75 0 0); --scrollbar-thumb-hover: oklch(0.65 0 0); + --rowboat-panel: oklch(0.97 0 0); + --rowboat-raised: oklch(1 0 0); + --rowboat-wash: color-mix(in oklab, var(--background) 88%, var(--primary) 12%); + --rowboat-hairline: color-mix(in oklab, var(--border) 78%, var(--foreground) 22%); + --rowboat-command: oklch(0.205 0 0); + --rowboat-attention: oklch(0.646 0.222 41.116); + --rowboat-shadow: 0 1px 2px rgb(31 38 48 / 0.07), 0 18px 40px rgb(31 38 48 / 0.08); + --rowboat-shadow-soft: 0 1px 2px rgb(31 38 48 / 0.05), 0 8px 24px rgb(31 38 48 / 0.06); } .dark { @@ -1052,6 +1060,14 @@ --scrollbar-track: oklch(0.2 0 0); --scrollbar-thumb: oklch(0.4 0 0); --scrollbar-thumb-hover: oklch(0.5 0 0); + --rowboat-panel: oklch(0.269 0 0); + --rowboat-raised: oklch(0.205 0 0); + --rowboat-wash: color-mix(in oklab, var(--background) 80%, var(--primary) 20%); + --rowboat-hairline: color-mix(in oklab, var(--border) 70%, var(--foreground) 30%); + --rowboat-command: oklch(0.922 0 0); + --rowboat-attention: oklch(0.769 0.188 70.08); + --rowboat-shadow: 0 1px 2px rgb(0 0 0 / 0.24), 0 22px 44px rgb(0 0 0 / 0.28); + --rowboat-shadow-soft: 0 1px 2px rgb(0 0 0 / 0.2), 0 12px 28px rgb(0 0 0 / 0.18); } @layer base { @@ -1063,6 +1079,9 @@ body { @apply bg-background text-foreground; + font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + font-feature-settings: "cv02", "cv03", "cv04", "cv11"; + text-rendering: optimizeLegibility; } ::-webkit-scrollbar { @@ -1084,6 +1103,94 @@ } } +.rowboat-shell { + background: var(--background); +} + +.rowboat-sidebar [data-sidebar="sidebar"] { + background: var(--sidebar); + border-right: 1px solid var(--sidebar-border); +} + +.rowboat-sidebar [data-sidebar="header"] { + gap: 0.625rem; + border-bottom: 1px solid color-mix(in oklab, var(--sidebar-border) 76%, transparent); + background: var(--sidebar); +} + +.rowboat-section-switcher { + border: 1px solid color-mix(in oklab, var(--sidebar-border) 78%, transparent); + background: color-mix(in oklab, var(--sidebar-accent) 58%, var(--sidebar) 42%); + box-shadow: inset 0 1px 0 color-mix(in oklab, var(--foreground) 9%, transparent); +} + +.rowboat-section-switcher button { + letter-spacing: 0; +} + +.rowboat-section-switcher button[class*="shadow-sm"] { + background: var(--rowboat-raised); + box-shadow: var(--rowboat-shadow-soft); +} + +.rowboat-quick-actions button { + min-height: 2rem; +} + +.rowboat-quick-actions button svg { + color: color-mix(in oklab, var(--rowboat-command) 72%, var(--sidebar-foreground) 28%); +} + +.rowboat-tabbar { + background: color-mix(in oklab, var(--background) 78%, var(--muted) 22%); +} + +.rowboat-titlebar { + background: var(--background); + border-bottom-color: color-mix(in oklab, var(--border) 82%, transparent); +} + +.rowboat-tab { + min-height: 2.5rem; + border-bottom: 1px solid transparent; +} + +.rowboat-tab[class*="bg-background"] { + border-bottom-color: var(--primary); + background: var(--rowboat-raised); + box-shadow: inset 0 1px 0 color-mix(in oklab, var(--foreground) 8%, transparent); +} + +.rowboat-composer-dock { + box-shadow: 0 -20px 44px color-mix(in oklab, var(--background) 78%, transparent); +} + +.rowboat-chat-input { + border-color: color-mix(in oklab, var(--border) 74%, var(--primary) 26%); + background: var(--rowboat-raised); + box-shadow: var(--rowboat-shadow); +} + +.rowboat-chat-input:focus-within { + border-color: color-mix(in oklab, var(--ring) 76%, var(--border) 24%); + box-shadow: + 0 0 0 1px color-mix(in oklab, var(--ring) 38%, transparent), + var(--rowboat-shadow); +} + +[data-slot="message-content"] { + line-height: 1.62; +} + +.is-user [data-slot="message-content"] { + background: color-mix(in oklab, var(--secondary) 88%, var(--rowboat-wash) 12%); + border: 1px solid color-mix(in oklab, var(--border) 68%, transparent); +} + +.is-assistant [data-slot="message-content"] { + color: color-mix(in oklab, var(--foreground) 94%, var(--muted-foreground) 6%); +} + /* Markdown content base styles for Streamdown/MessageResponse */ @layer components { /* Target elements inside MessageResponse wrapper */ diff --git a/apps/x/apps/renderer/src/App.tsx b/apps/x/apps/renderer/src/App.tsx index a32869d6..e6c050b3 100644 --- a/apps/x/apps/renderer/src/App.tsx +++ b/apps/x/apps/renderer/src/App.tsx @@ -663,7 +663,7 @@ function ContentHeader({ const isCollapsed = state === "collapsed" return (
-
+
{/* Content sidebar with SidebarProvider for collapse functionality */} -
+
{!hasConversation && ( diff --git a/apps/x/apps/renderer/src/components/chat-input-with-mentions.tsx b/apps/x/apps/renderer/src/components/chat-input-with-mentions.tsx index 9d552905..ccd96805 100644 --- a/apps/x/apps/renderer/src/components/chat-input-with-mentions.tsx +++ b/apps/x/apps/renderer/src/components/chat-input-with-mentions.tsx @@ -434,7 +434,7 @@ function ChatInputInner({ }, [addFiles, isActive]) return ( -
+
{attachments.length > 0 && (
{attachments.map((attachment) => { diff --git a/apps/x/apps/renderer/src/components/sidebar-content.tsx b/apps/x/apps/renderer/src/components/sidebar-content.tsx index 88dae297..f4c469bc 100644 --- a/apps/x/apps/renderer/src/components/sidebar-content.tsx +++ b/apps/x/apps/renderer/src/components/sidebar-content.tsx @@ -566,13 +566,13 @@ export function SidebarContentPanel({ }, []) return ( - + {/* Top spacer to clear the traffic lights + fixed toggle row */}
{/* Tab switcher - centered below the traffic lights row */}
-
+
{sectionTabs.map((tab) => (
{/* Quick action buttons */} -
+
{onNewChat && (