From 5a236d5ae5681a950b3cbdabd983ba6e8595474d Mon Sep 17 00:00:00 2001 From: Michelle Date: Mon, 29 Dec 2025 00:13:57 +0400 Subject: [PATCH 1/4] rules: add shadcn CLI diff and help commands Documents the `npx shadcn@latest diff` command for checking upstream registry updates and adds the general help command reference. --- CLAUDE.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CLAUDE.md b/CLAUDE.md index c65eca3..d294808 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -44,6 +44,8 @@ npx shadcn@latest view button card # Preview code before installing npx shadcn@latest add # Add component to project npx shadcn@latest add button --overwrite # Overwrite existing component npx shadcn@latest add @v0/ # Add from v0.dev registry +npx shadcn@latest diff # Check for upstream registry updates +npx shadcn@latest --help # CLI help ``` ## Coding Practices From 10b194c2cb55726712121f6d055e35148e0bb400 Mon Sep 17 00:00:00 2001 From: Michelle Date: Mon, 29 Dec 2025 01:40:38 +0400 Subject: [PATCH 2/4] refactor: rename navigation components for consistent naming MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Component renames: - app-sidebar → left-sidebar (prepares for right-sidebar) - sidebar-toggle-button → left-sidebar-toggle - content-top-bar → desktop-top-bar - mobile-header → mobile-top-bar - nav-link → mobile-nav-link (scoped to mobile usage) - full-logo → themed-full-logo Folder organisation: - Move left-sidebar into navigation/ - Group providers into components/providers/ Establishes consistent {viewport}-{element} and {position}-sidebar naming patterns. Removes redundant comments describing obvious UI sections. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- app/(root)/layout.tsx | 16 ++++++++-------- app/layout.tsx | 4 ++-- .../{content-top-bar.tsx => desktop-top-bar.tsx} | 4 +--- ...toggle-button.tsx => left-sidebar-toggle.tsx} | 2 +- .../left-sidebar.tsx} | 12 ++++++------ .../{nav-link.tsx => mobile-nav-link.tsx} | 9 +++++++-- components/navigation/mobile-nav.tsx | 8 ++++---- .../{mobile-header.tsx => mobile-top-bar.tsx} | 4 +--- .../{full-logo.tsx => themed-full-logo.tsx} | 4 ++-- components/{ => providers}/clerk-provider.tsx | 0 components/{ => providers}/theme-provider.tsx | 0 11 files changed, 32 insertions(+), 31 deletions(-) rename components/navigation/{content-top-bar.tsx => desktop-top-bar.tsx} (88%) rename components/navigation/{sidebar-toggle-button.tsx => left-sidebar-toggle.tsx} (95%) rename components/{app-sidebar.tsx => navigation/left-sidebar.tsx} (90%) rename components/navigation/{nav-link.tsx => mobile-nav-link.tsx} (88%) rename components/navigation/{mobile-header.tsx => mobile-top-bar.tsx} (88%) rename components/navigation/{full-logo.tsx => themed-full-logo.tsx} (85%) rename components/{ => providers}/clerk-provider.tsx (100%) rename components/{ => providers}/theme-provider.tsx (100%) diff --git a/app/(root)/layout.tsx b/app/(root)/layout.tsx index f812917..c43aaa9 100644 --- a/app/(root)/layout.tsx +++ b/app/(root)/layout.tsx @@ -1,7 +1,7 @@ import { cookies } from "next/headers"; -import { AppSidebar } from "@/components/app-sidebar"; -import { ContentTopBar } from "@/components/navigation/content-top-bar"; -import { MobileHeader } from "@/components/navigation/mobile-header"; +import { DesktopTopBar } from "@/components/navigation/desktop-top-bar"; +import { LeftSidebar } from "@/components/navigation/left-sidebar"; +import { MobileTopBar } from "@/components/navigation/mobile-top-bar"; import { SidebarProvider } from "@/components/ui/sidebar"; import { CONTENT_HORIZONTAL_PADDING, @@ -15,16 +15,16 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => { return ( - {/* Mobile-only fixed header */} - + {/* Mobile-only top bar */} + {/* Full-height sidebar */} - + - {/* Content area */} + {/* Main content area */}
{/* Desktop-only top bar */} - +
- {/* Left: Search - grows and centres */}

Global Search

- {/* Right: Theme + Auth - fixed width */}
diff --git a/components/navigation/sidebar-toggle-button.tsx b/components/navigation/left-sidebar-toggle.tsx similarity index 95% rename from components/navigation/sidebar-toggle-button.tsx rename to components/navigation/left-sidebar-toggle.tsx index 9221c6d..40a996e 100644 --- a/components/navigation/sidebar-toggle-button.tsx +++ b/components/navigation/left-sidebar-toggle.tsx @@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button"; import { useSidebar } from "@/components/ui/sidebar"; import { cn } from "@/lib/utils"; -export function SidebarToggleButton() { +export function LeftSidebarToggle() { const { state, toggleSidebar } = useSidebar(); const isCollapsed = state === "collapsed"; diff --git a/components/app-sidebar.tsx b/components/navigation/left-sidebar.tsx similarity index 90% rename from components/app-sidebar.tsx rename to components/navigation/left-sidebar.tsx index c952b51..1b6e3fe 100644 --- a/components/app-sidebar.tsx +++ b/components/navigation/left-sidebar.tsx @@ -4,9 +4,9 @@ import { SignedIn, UserButton } from "@clerk/nextjs"; import Image from "next/image"; import Link from "next/link"; import { usePathname } from "next/navigation"; -import { ThemeLogo } from "@/components/navigation/full-logo"; +import { LeftSidebarToggle } from "@/components/navigation/left-sidebar-toggle"; import { NAV_LINKS } from "@/components/navigation/nav-links.constants"; -import { SidebarToggleButton } from "@/components/navigation/sidebar-toggle-button"; +import { ThemedFullLogo } from "@/components/navigation/themed-full-logo"; import { Sidebar, SidebarContent, @@ -27,12 +27,12 @@ import { NAV_LINK_INACTIVE_CLASSES, } from "@/lib/utils"; -export function AppSidebar() { +export function LeftSidebar() { const pathname = usePathname(); return ( - {/* Header: Logo - h-14 matches ContentTopBar height */} + {/* Header: Logo - h-14 matches TopBar height */} {/* Full logo when expanded */} - + @@ -106,7 +106,7 @@ export function AppSidebar() { - +
diff --git a/components/navigation/nav-link.tsx b/components/navigation/mobile-nav-link.tsx similarity index 88% rename from components/navigation/nav-link.tsx rename to components/navigation/mobile-nav-link.tsx index dccf292..5f86802 100644 --- a/components/navigation/nav-link.tsx +++ b/components/navigation/mobile-nav-link.tsx @@ -12,13 +12,18 @@ import { NAV_LINK_INACTIVE_CLASSES, } from "@/lib/utils"; -type NavLinkProps = NavLinkType & { +type MobileNavLinkProps = NavLinkType & { /** Passed by SheetClose asChild to close the sheet on click */ onClick?: () => void; }; /** Navigation link for mobile Sheet menu. */ -export function NavLink({ imgURL, route, label, onClick }: NavLinkProps) { +export function MobileNavLink({ + imgURL, + route, + label, + onClick, +}: MobileNavLinkProps) { const pathname = usePathname(); const isActive = isRouteActive(pathname, route); diff --git a/components/navigation/mobile-nav.tsx b/components/navigation/mobile-nav.tsx index 3cf6348..7fa2801 100644 --- a/components/navigation/mobile-nav.tsx +++ b/components/navigation/mobile-nav.tsx @@ -10,9 +10,9 @@ import { import { Menu, X } from "lucide-react"; import Link from "next/link"; import { useState } from "react"; -import { ThemeLogo } from "@/components/navigation/full-logo"; -import { NavLink } from "@/components/navigation/nav-link"; +import { MobileNavLink } from "@/components/navigation/mobile-nav-link"; import { NAV_LINKS } from "@/components/navigation/nav-links.constants"; +import { ThemedFullLogo } from "@/components/navigation/themed-full-logo"; import { Button } from "@/components/ui/button"; import { Sheet, @@ -66,7 +66,7 @@ export function MobileNav() { Mobile navigation menu - + @@ -74,7 +74,7 @@ export function MobileNav() {