From d2188f58186817bf384a28da2487b61c2a6a8bdb Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 27 Apr 2026 04:01:58 +0000 Subject: [PATCH 1/2] add sidebar variations showcase page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Four POC sidebar designs rendered side-by-side at /sidebar-variations: Similar (icons + separators), Linear/Emil-inspired (density + ⌘K hint), Dieter Rams (numbered grid, Braun orange accent), and Racing (F1 timing tower). Mocked data, placeholder hrefs — design exploration only. https://claude.ai/code/session_01Gb3iZEsYTNsNZSEPTFjLD3 --- .../_components/mock-data.ts | 74 ++++++++ .../_components/variation-linear.tsx | 81 +++++++++ .../_components/variation-racing.tsx | 159 ++++++++++++++++++ .../_components/variation-rams.tsx | 151 +++++++++++++++++ .../_components/variation-similar.tsx | 64 +++++++ apps/web/app/sidebar-variations/page.tsx | 74 ++++++++ 6 files changed, 603 insertions(+) create mode 100644 apps/web/app/sidebar-variations/_components/mock-data.ts create mode 100644 apps/web/app/sidebar-variations/_components/variation-linear.tsx create mode 100644 apps/web/app/sidebar-variations/_components/variation-racing.tsx create mode 100644 apps/web/app/sidebar-variations/_components/variation-rams.tsx create mode 100644 apps/web/app/sidebar-variations/_components/variation-similar.tsx create mode 100644 apps/web/app/sidebar-variations/page.tsx diff --git a/apps/web/app/sidebar-variations/_components/mock-data.ts b/apps/web/app/sidebar-variations/_components/mock-data.ts new file mode 100644 index 0000000..cf9ff18 --- /dev/null +++ b/apps/web/app/sidebar-variations/_components/mock-data.ts @@ -0,0 +1,74 @@ +import { + BarChart3, + BookOpen, + LayoutDashboard, + ListOrdered, + MessageSquare, + PencilLine, + Settings, + Settings2, + Trophy, + Users, + type LucideIcon, +} from 'lucide-react' +import { Icon } from '@/components/icon' + +export type NavItem = { + title: string + href: string + icon: LucideIcon + shortcut?: string + active?: boolean +} + +export type NavSection = { + title: string + icon: LucideIcon + items: NavItem[] +} + +export const navSections: NavSection[] = [ + { + title: 'Tipping', + icon: Icon.Tipping, + items: [ + { + title: 'Dashboard', + href: '#', + icon: LayoutDashboard, + shortcut: 'G D', + active: true, + }, + { title: 'Enter tips', href: '#', icon: PencilLine, shortcut: 'G T' }, + { title: 'Championships', href: '#', icon: Trophy, shortcut: 'G C' }, + ], + }, + { + title: 'Results', + icon: ListOrdered, + items: [ + { title: 'Leaderboard', href: '#', icon: BarChart3, shortcut: 'G L' }, + { title: 'Rules & Scoring', href: '#', icon: BookOpen, shortcut: 'G R' }, + ], + }, + { + title: 'Manage', + icon: Settings2, + items: [ + { title: 'Groups', href: '#', icon: Users, shortcut: 'G G' }, + { title: 'Feedback', href: '#', icon: MessageSquare, shortcut: 'G F' }, + { title: 'Settings', href: '#', icon: Settings, shortcut: 'G S' }, + ], + }, +] + +export const mockGroup = { + name: 'Box Box Tippers', + initials: 'BB', +} + +export const mockUser = { + name: 'Lewis Hamilton', + email: 'lewis@gridtip.app', + initials: 'LH', +} diff --git a/apps/web/app/sidebar-variations/_components/variation-linear.tsx b/apps/web/app/sidebar-variations/_components/variation-linear.tsx new file mode 100644 index 0000000..07e6d0d --- /dev/null +++ b/apps/web/app/sidebar-variations/_components/variation-linear.tsx @@ -0,0 +1,81 @@ +import { ChevronDown, Search } from 'lucide-react' +import { cn } from '@/lib/utils' +import { mockGroup, mockUser, navSections } from './mock-data' + +export function VariationLinear() { + return ( + + ) +} diff --git a/apps/web/app/sidebar-variations/_components/variation-racing.tsx b/apps/web/app/sidebar-variations/_components/variation-racing.tsx new file mode 100644 index 0000000..d4721be --- /dev/null +++ b/apps/web/app/sidebar-variations/_components/variation-racing.tsx @@ -0,0 +1,159 @@ +import { cn } from '@/lib/utils' +import { mockGroup, mockUser, navSections } from './mock-data' + +const TEAM_COLORS = [ + 'rgb(var(--clr-team-ferrari))', + 'rgb(var(--clr-team-mercedes))', + 'rgb(var(--clr-team-mclaren))', + 'rgb(var(--clr-team-red_bull))', + 'rgb(var(--clr-team-aston_martin))', + 'rgb(var(--clr-team-alpine))', + 'rgb(var(--clr-team-williams))', + 'rgb(var(--clr-team-haas))', +] + +const carbonFibre = { + backgroundImage: `repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 4px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 4px)`, +} + +export function VariationRacing() { + let position = 0 + + return ( + + ) +} + +function CheckeredDivider() { + return ( +
+ {Array.from({ length: 32 }).map((_, i) => ( + + ))} +
+ ) +} + +function TrackMap() { + return ( + + + + + ) +} diff --git a/apps/web/app/sidebar-variations/_components/variation-rams.tsx b/apps/web/app/sidebar-variations/_components/variation-rams.tsx new file mode 100644 index 0000000..cb3eda5 --- /dev/null +++ b/apps/web/app/sidebar-variations/_components/variation-rams.tsx @@ -0,0 +1,151 @@ +import { cn } from '@/lib/utils' +import { mockUser, navSections } from './mock-data' + +const BRAUN_ORANGE = '#ff7a00' + +export function VariationRams() { + let runningIndex = 0 + + return ( + + ) +} + +function BraunDial() { + return ( + + + + + {[0, 45, 90, 135, 180, 225, 270, 315].map((deg) => ( + + ))} + + ) +} diff --git a/apps/web/app/sidebar-variations/_components/variation-similar.tsx b/apps/web/app/sidebar-variations/_components/variation-similar.tsx new file mode 100644 index 0000000..3ef7692 --- /dev/null +++ b/apps/web/app/sidebar-variations/_components/variation-similar.tsx @@ -0,0 +1,64 @@ +import { ChevronsUpDown, LogOut } from 'lucide-react' +import { Separator } from '@/components/ui/separator' +import { cn } from '@/lib/utils' +import { mockGroup, mockUser, navSections } from './mock-data' + +export function VariationSimilar() { + return ( + + ) +} diff --git a/apps/web/app/sidebar-variations/page.tsx b/apps/web/app/sidebar-variations/page.tsx new file mode 100644 index 0000000..bd62a7d --- /dev/null +++ b/apps/web/app/sidebar-variations/page.tsx @@ -0,0 +1,74 @@ +import { VariationLinear } from './_components/variation-linear' +import { VariationRacing } from './_components/variation-racing' +import { VariationRams } from './_components/variation-rams' +import { VariationSimilar } from './_components/variation-similar' + +const variations = [ + { + id: 'similar', + title: 'Similar', + description: + 'Layout alike to the current sidebar, but with per-link icons and section separators replacing the toggleable headers.', + component: , + }, + { + id: 'linear', + title: 'Industry best practices', + description: + 'Density, restraint, and refined micro-detail in the spirit of Linear and Emil Kowalski — flat list, ⌘K hint, keyboard shortcuts on hover.', + component: , + }, + { + id: 'rams', + title: 'The Rams', + description: + 'Dieter Rams meets Braun TS-505. Numbered grid, mono type, single accent of Braun orange, control-panel discipline.', + component: , + }, + { + id: 'racing', + title: 'Racing', + description: + 'F1 timing-tower aesthetic. Position prefixes, team-colour stripes, checkered dividers, Driver Card footer.', + component: , + }, +] + +export default function SidebarVariationsPage() { + return ( +
+
+
+

+ Sidebar variations +

+

+ Four design directions for the GridTip sidebar, rendered side by + side at the live sidebar's 16rem width. Links are placeholders. +

+
+ +
+ {variations.map((variation) => ( +
+
+

{variation.title}

+

+ {variation.description} +

+
+
+
+ {variation.component} +
+
+
+ ))} +
+
+
+ ) +} From 37fe5a8e46eebb880ec54f589e7ec85674b29d90 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 27 Apr 2026 04:02:43 +0000 Subject: [PATCH 2/2] chore: bump bun.lock configVersion field Incidental update from running bun install in the sandbox. https://claude.ai/code/session_01Gb3iZEsYTNsNZSEPTFjLD3 --- bun.lock | 1 + 1 file changed, 1 insertion(+) diff --git a/bun.lock b/bun.lock index 2bba7f1..f03549f 100644 --- a/bun.lock +++ b/bun.lock @@ -1,5 +1,6 @@ { "lockfileVersion": 1, + "configVersion": 0, "workspaces": { "": { "name": "gridtip-mono",