From 4a1ee2b5e4ed752fcd7bcb49ac1e18fa80f1c6a0 Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 8 Mar 2026 02:02:41 +0000 Subject: [PATCH 1/2] UI redesign: premium native look inspired by Slack/Discord - Refined color palette with blue-tinted dark surfaces (#070b0f bg, #0c1117 sidebar) - Added Inter (sans) + JetBrains Mono (mono) fonts via Google Fonts - Redesigned sidebar: Brain icon branding, pill-style active states with rounded highlights, grouped nav sections (Workspace/Tools), Settings pinned at bottom - Updated all card styles (sheet-card, task-card) with deeper gradients, subtle borders, and hover elevation lift effect - Improved buttons with stronger opacity, hover lift, and active press states - Refined inputs with glass-like background and ring focus style - Added .page-header / .page-title / .page-subtitle utility classes for consistent page headers across all views - Applied page-header pattern with icon + title to Capture, Inbox, Todos, Notes, Templates, and Settings pages - Thinner scrollbars (6px), smoother animations, JetBrains Mono in code/chat https://claude.ai/code/session_01WuCnEpuskQmH6JysCypYHr --- apps/web/index.html | 7 +- apps/web/src/components/Layout.tsx | 238 ++++++++++++---------- apps/web/src/index.css | 282 +++++++++++++++++---------- apps/web/src/pages/CapturePage.tsx | 33 ++-- apps/web/src/pages/InboxPage.tsx | 13 +- apps/web/src/pages/NotesPage.tsx | 10 +- apps/web/src/pages/SettingsPage.tsx | 19 +- apps/web/src/pages/TemplatesPage.tsx | 18 +- apps/web/src/pages/TodosPage.tsx | 11 +- apps/web/tailwind.config.js | 12 ++ 10 files changed, 393 insertions(+), 250 deletions(-) diff --git a/apps/web/index.html b/apps/web/index.html index a3501f0..c51c357 100644 --- a/apps/web/index.html +++ b/apps/web/index.html @@ -9,10 +9,13 @@ - + + + + - +
diff --git a/apps/web/src/components/Layout.tsx b/apps/web/src/components/Layout.tsx index 329091d..8f01f28 100644 --- a/apps/web/src/components/Layout.tsx +++ b/apps/web/src/components/Layout.tsx @@ -1,7 +1,7 @@ import { Link, useLocation } from 'react-router-dom'; import { ReactNode, useState, useEffect } from 'react'; import { useInboxCount } from '../api/queries'; -import { PenLine, CalendarDays, Inbox, FileText, ListChecks, Layers, MessageSquare, Cog, Menu, X, Mic, TrendingUp } from 'lucide-react'; +import { PenLine, CalendarDays, Inbox, FileText, ListChecks, Layers, MessageSquare, Cog, Menu, X, Mic, TrendingUp, Brain } from 'lucide-react'; import { useQueryClient } from '@tanstack/react-query'; const isElectron = typeof window !== 'undefined' && window.electronAPI?.isElectron; @@ -10,20 +10,30 @@ interface LayoutProps { children: ReactNode; } +const primaryNavItems = [ + { path: '/', label: 'Capture', icon: PenLine }, + { path: '/today', label: 'Today Sheet', icon: CalendarDays }, + { path: '/weekly-review', label: 'Weekly Review', icon: TrendingUp }, + { path: '/inbox', label: 'Inbox', icon: Inbox }, + { path: '/notes', label: 'Notes', icon: FileText }, + { path: '/todos', label: 'Todos', icon: ListChecks }, +]; + +const toolNavItems = [ + { path: '/templates', label: 'Templates', icon: Layers }, + { path: '/chat', label: 'Chat', icon: MessageSquare }, +]; + export default function Layout({ children }: LayoutProps) { const { data: inboxCount = 0 } = useInboxCount(); const [isDrawerOpen, setIsDrawerOpen] = useState(false); const queryClient = useQueryClient(); - // Listen for capture created events from Quick Capture window useEffect(() => { if (!window.electronAPI?.onCaptureCreated) return; - const unsubscribe = window.electronAPI.onCaptureCreated(() => { - // Invalidate inbox count when a capture is created queryClient.invalidateQueries({ queryKey: ['inboxCount'] }); }); - return unsubscribe; }, [queryClient]); @@ -34,87 +44,110 @@ export default function Layout({ children }: LayoutProps) { return location.pathname.startsWith(path); }; - const navItems = [ - { path: '/', label: 'Capture', icon: PenLine }, - { path: '/today', label: 'Today Sheet', icon: CalendarDays }, - { path: '/weekly-review', label: 'Weekly Review', icon: TrendingUp }, - { path: '/inbox', label: 'Inbox', icon: Inbox }, - { path: '/notes', label: 'Notes', icon: FileText }, - { path: '/todos', label: 'Todos', icon: ListChecks }, - { path: '/templates', label: 'Templates', icon: Layers }, - { path: '/chat', label: 'Chat', icon: MessageSquare }, - { path: '/settings', label: 'Settings', icon: Cog }, - ]; - const closeDrawer = () => setIsDrawerOpen(false); + const NavLink = ({ item, onClick }: { item: { path: string; label: string; icon: React.ElementType }; onClick?: () => void }) => { + const Icon = item.icon; + const active = isActive(item.path); + return ( + + + {item.label} + {item.path === '/inbox' && inboxCount > 0 && ( + + {inboxCount} + + )} + + ); + }; + + const SectionLabel = ({ label }: { label: string }) => ( +

+ {label} +

+ ); + return ( -
+
{/* Sidebar - Desktop */} -