refine left nav: project glyphs, activity indicators, and design tokens

[morgmart]

Summary

Category: improvement
User Impact: The sidebar navigation looks cleaner and more polished, with consistent folder icons for projects, subtler activity indicators, and softer placeholder text across the app.

Problem: The left nav had visual inconsistencies — projects used plain colored dots that didn't read as "project," activity indicators used a brand color that competed with the UI, section dividers were heavy visible lines, and placeholder text across inputs was too prominent.

Solution: Replace colored dots with colored folder icons via a shared ProjectGlyph component, switch activity indicators from text-brand to a new --color-text-info-strong semantic token for better visual hierarchy, remove the visible divider line and ⌘K badge from the sidebar, and introduce a --text-placeholder token used consistently across all input components.

File changes

ui/goose2/src/shared/ui/ProjectGlyph.tsx
New shared component that renders a colored Lucide Folder icon, replacing the ad-hoc colored dots used to represent projects.

ui/goose2/src/features/chat/ui/ChatInputToolbar.tsx
Swapped the inline ProjectDot (colored <span>) for the new ProjectGlyph component.

ui/goose2/src/features/projects/ui/CreateProjectDialog.tsx
Color picker now shows ProjectGlyph icons inside rounded button containers instead of plain colored circles.

ui/goose2/src/features/projects/ui/ProjectsView.tsx
Project list cards now use ProjectGlyph instead of a colored dot span.

ui/goose2/src/features/settings/ui/SettingsModal.tsx
Project list in settings now uses ProjectGlyph instead of a colored dot span.

ui/goose2/src/features/sidebar/ui/Sidebar.tsx
Removed the ⌘K keyboard hint from search, shortened the search placeholder, replaced the visible bg-border divider with spacing, updated the Goose icon to text-foreground, and added mb-4 spacing below search.

ui/goose2/src/features/sidebar/ui/SidebarChatRow.tsx
Added reserveActivitySpace prop so the activity indicator column can be conditionally shown. Moved the indicator to the left of the title text.

ui/goose2/src/features/sidebar/ui/SidebarProjectsSection.tsx
Replaced colored dots with ProjectGlyph in both expanded and collapsed views. Updated section labels from uppercase/light to normal-case/medium with reduced opacity. Replaced visible divider lines with spacing.

ui/goose2/src/features/sidebar/ui/tests/SidebarChatRow.test.tsx
Added tests for the new reserveActivitySpace behavior — verifying space is not reserved for idle rows and appears only when activity exists.

ui/goose2/src/shared/ui/SessionActivityIndicator.tsx
Replaced text-brand/bg-brand with semantic --color-text-info-strong/--color-background-info-strong tokens. Added fade-in transitions for smoother appearance. Reduced unread dot size slightly.

ui/goose2/src/shared/ui/SessionActivityIndicator.test.tsx
Updated assertions to match the new semantic token class names.

ui/goose2/src/shared/styles/globals.css
Added new semantic tokens: --text-placeholder, --color-blue-300, --background-info-strong, --border-info-strong, and --text-info-strong for both light and dark themes.

ui/goose2/src/shared/ui/command.tsx
Updated placeholder color from text-muted-foreground to var(--text-placeholder).

ui/goose2/src/shared/ui/input.tsx
Updated placeholder color from text-muted-foreground to var(--text-placeholder).

ui/goose2/src/shared/ui/textarea.tsx
Updated placeholder color from text-muted-foreground to var(--text-placeholder).

ui/goose2/src/shared/i18n/locales/en/sidebar.json
Shortened search placeholder to "Search conversations".

ui/goose2/src/shared/i18n/locales/es/sidebar.json
Shortened search placeholder to "Buscar conversaciones".

Reproduction Steps

1. Open the app and look at the left sidebar — projects should show colored folder icons instead of colored dots
2. Expand a project section — chat rows with activity should show a spinner or unread dot to the left of the title
3. Note the section dividers are now spacing-only (no visible lines)
4. Click into any input field — placeholder text should be noticeably softer than before
5. Check the search bar — it should say "Search conversations" without a ⌘K badge
6. Toggle dark mode and verify all the above still looks correct

Screenshots/Demos

🤖 Generated with Claude Code