From 413c677173faffb664fe48f030d339cb89640250 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 1 Mar 2026 08:58:33 +0100
Subject: [PATCH] refactor: align layout chrome with glass blueprint
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AppHeader:
- Remove shadcn Button → native 8×8 rounded glass icon buttons
- Shrink to h-14 (from h-16) to match sidebar header
- Add current tool name breadcrumb (navTitle) next to collapse toggle;
  shows context when sidebar is collapsed or on mobile

AppSidebar:
- Remove shadcn Button → native button for mobile close
- Sidebar narrows to w-60 (from w-64); matches h-14 header
- Active state: slim absolute left-bar (0.5px) replaces harsh border-l-2;
  bg-primary/10 tint kept; no border on the link itself
- Nav item text refined: 13px font-medium title + 9px mono description
- Border opacity drops to border-border/20 throughout (from border-border)
- Footer: smaller mono text, lighter icon opacity

AppPage:
- Shrink from py-8 / text-2xl to py-5 / text-lg font-semibold
- Icon wrapped in 7×7 glass pill (bg-primary/10) matching tool cards
- Description moved inline under title as 10px mono, truncated
- border-b border-border/20 separator between header and tool content

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/layout/AppHeader.tsx  |  60 +++++++-----
 components/layout/AppPage.tsx    |  35 ++++---
 components/layout/AppSidebar.tsx | 153 ++++++++++++++++---------------
 3 files changed, 140 insertions(+), 108 deletions(-)

diff --git a/components/layout/AppHeader.tsx b/components/layout/AppHeader.tsx
index 6cb1a44..6c172ec 100644
--- a/components/layout/AppHeader.tsx
+++ b/components/layout/AppHeader.tsx
@@ -1,42 +1,60 @@
 'use client';
 
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 import { Menu, X, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
-import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils/cn';
 import { useSidebar } from './SidebarProvider';
+import { getToolByHref } from '@/lib/tools';
 import Logo from '@/components/Logo';
 
+const iconBtn =
+  'w-8 h-8 flex items-center justify-center rounded-lg text-muted-foreground/50 hover:text-foreground hover:bg-white/5 transition-all';
+
 export function AppHeader() {
   const { toggle, isOpen, isCollapsed, toggleCollapse } = useSidebar();
+  const pathname = usePathname();
+  const tool = getToolByHref(pathname);
 
   return (
-    <header className="h-16 border-b border-border bg-background/10 backdrop-blur-xl sticky top-0 z-40 flex items-center justify-between px-6 shadow-[0_1px_3px_0_rgb(0_0_0/0.05)]">
-      <div className="flex items-center gap-2">
-        <Button
-          variant="ghost"
-          size="icon"
-          className="hidden lg:inline-flex text-muted-foreground hover:text-foreground"
+    <header className="h-14 border-b border-border/20 bg-background/8 backdrop-blur-xl sticky top-0 z-40 flex items-center justify-between px-4 gap-3">
+      <div className="flex items-center gap-1.5 min-w-0">
+        {/* Desktop: sidebar collapse toggle */}
+        <button
           onClick={toggleCollapse}
+          title={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+          className={cn(iconBtn, 'hidden lg:flex shrink-0')}
         >
-          {isCollapsed ? (
-            <PanelLeftOpen className="h-5 w-5" />
-          ) : (
-            <PanelLeftClose className="h-5 w-5" />
-          )}
-        </Button>
-        <Link href="/" className="lg:hidden shrink-0 ml-2">
-          <Logo size={24} />
+          {isCollapsed
+            ? <PanelLeftOpen className="w-4 h-4" />
+            : <PanelLeftClose className="w-4 h-4" />
+          }
+        </button>
+
+        {/* Mobile: logo home link */}
+        <Link href="/" className="lg:hidden shrink-0">
+          <Logo size={20} />
         </Link>
+
+        {/* Current tool breadcrumb */}
+        {tool && (
+          <div className="flex items-center gap-1.5 min-w-0 ml-1">
+            <span className="text-border/50 text-xs select-none">/</span>
+            <span className="text-sm text-foreground/60 truncate font-mono">
+              {tool.navTitle}
+            </span>
+          </div>
+        )}
       </div>
 
-      <Button
-        variant="ghost"
-        size="icon"
-        className="lg:hidden text-muted-foreground hover:text-foreground"
+      {/* Mobile: open/close sidebar */}
+      <button
         onClick={toggle}
+        title={isOpen ? 'Close menu' : 'Open menu'}
+        className={cn(iconBtn, 'lg:hidden shrink-0')}
       >
-        {isOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
-      </Button>
+        {isOpen ? <X className="w-4 h-4" /> : <Menu className="w-4 h-4" />}
+      </button>
     </header>
   );
 }
diff --git a/components/layout/AppPage.tsx b/components/layout/AppPage.tsx
index 8ffd6ec..4beb97d 100644
--- a/components/layout/AppPage.tsx
+++ b/components/layout/AppPage.tsx
@@ -11,20 +11,31 @@ interface AppPageProps {
 
 export function AppPage({ title, description, icon: Icon, children, className }: AppPageProps) {
   return (
-    <div className={cn("min-h-screen py-8", className)}>
-      <div className="max-w-7xl mx-auto px-8 space-y-6 animate-fade-in">
-        <div>
-          <div className="flex items-center gap-3 mb-1">
-            {Icon && <Icon className="h-6 w-6 text-primary shrink-0" />}
-            <h1 className="text-2xl font-bold">{title}</h1>
+    <div className={cn('min-h-screen', className)}>
+      <div className="max-w-7xl mx-auto px-6 lg:px-8 animate-fade-in">
+
+        {/* Page header */}
+        <div className="py-5 border-b border-border/20 mb-6">
+          <div className="flex items-center gap-3">
+            {Icon && (
+              <div className="w-7 h-7 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
+                <Icon className="w-3.5 h-3.5 text-primary" />
+              </div>
+            )}
+            <div className="min-w-0">
+              <h1 className="text-lg font-semibold text-foreground leading-tight">{title}</h1>
+              {description && (
+                <p className="text-[10px] text-muted-foreground/50 font-mono mt-0.5 truncate">
+                  {description}
+                </p>
+              )}
+            </div>
           </div>
-          {description && (
-            <p className="text-sm text-muted-foreground max-w-2xl">
-              {description}
-            </p>
-          )}
         </div>
-        {children}
+
+        <div className="pb-8">
+          {children}
+        </div>
       </div>
     </div>
   );
diff --git a/components/layout/AppSidebar.tsx b/components/layout/AppSidebar.tsx
index a702503..cab4dfd 100644
--- a/components/layout/AppSidebar.tsx
+++ b/components/layout/AppSidebar.tsx
@@ -6,7 +6,6 @@ import { X, GitFork, Heart } from 'lucide-react';
 import { cn } from '@/lib/utils/cn';
 import Logo from '@/components/Logo';
 import { useSidebar } from './SidebarProvider';
-import { Button } from '@/components/ui/button';
 import { tools } from '@/lib/tools';
 
 export function AppSidebar() {
@@ -15,7 +14,7 @@ export function AppSidebar() {
 
   return (
     <>
-      {/* Mobile Overlay Backdrop */}
+      {/* Mobile backdrop */}
       {isOpen && (
         <div
           className="fixed inset-0 bg-transparent backdrop-blur-sm z-40 lg:hidden"
@@ -24,94 +23,100 @@ export function AppSidebar() {
       )}
 
       <aside className={cn(
-        "fixed inset-y-0 left-0 z-50 flex flex-col border-r border-border bg-background/10 backdrop-blur-2xl transition-all duration-300 ease-in-out lg:relative lg:h-full",
-        isOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0",
-        isCollapsed ? "lg:w-14" : "w-64"
+        'fixed inset-y-0 left-0 z-50 flex flex-col border-r border-border/20 bg-background/10 backdrop-blur-2xl transition-all duration-300 ease-in-out lg:relative lg:h-full',
+        isOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0',
+        isCollapsed ? 'lg:w-14' : 'w-60'
       )}>
-        {/* Sidebar Header */}
+
+        {/* Header */}
         <div className={cn(
-          "flex h-16 items-center shrink-0 border-b border-border",
-          isCollapsed ? "justify-center px-2" : "justify-between px-5"
+          'flex h-14 items-center shrink-0 border-b border-border/20',
+          isCollapsed ? 'justify-center px-2' : 'justify-between px-4'
         )}>
-          <Link href="/" className={cn(
-            "flex items-center group overflow-hidden",
-            isCollapsed ? "justify-center" : "gap-3"
-          )}>
+          <Link
+            href="/"
+            className={cn(
+              'flex items-center group overflow-hidden',
+              isCollapsed ? 'justify-center' : 'gap-2.5'
+            )}
+          >
             <div className="shrink-0">
-              <Logo size={isCollapsed ? 20 : 28} />
+              <Logo size={isCollapsed ? 18 : 24} />
             </div>
             {!isCollapsed && (
               <div className="min-w-0">
-                <span className="font-bold text-lg leading-tight block text-foreground">
-                  Kit
-                </span>
-                <span className="text-[10px] leading-tight text-muted-foreground block">
+                <span className="font-semibold text-base leading-tight block text-foreground">Kit</span>
+                <span className="text-[9px] leading-tight text-muted-foreground/50 block font-mono tracking-wider">
                   Browser-first toolkit
                 </span>
               </div>
             )}
           </Link>
+
           {!isCollapsed && (
-            <Button
-              variant="ghost"
-              size="icon"
-              className="lg:hidden text-muted-foreground"
+            <button
               onClick={close}
+              className="lg:hidden w-7 h-7 flex items-center justify-center rounded-lg text-muted-foreground/40 hover:text-foreground hover:bg-white/5 transition-all"
             >
-              <X className="h-5 w-5" />
-            </Button>
+              <X className="w-3.5 h-3.5" />
+            </button>
           )}
         </div>
 
         {/* Navigation */}
         <nav className={cn(
-          "flex-1 overflow-y-auto py-2 space-y-6 mt-4 overflow-hidden scrollbar",
-          isCollapsed ? "px-2" : "px-4"
+          'flex-1 overflow-y-auto py-3 space-y-0.5 scrollbar-thin scrollbar-thumb-primary/10 scrollbar-track-transparent',
+          isCollapsed ? 'px-2' : 'px-3'
         )}>
-          <div className="space-y-0.5">
-            {tools.map((tool) => {
-              const isActive = pathname === tool.href || (tool.href !== '/' && pathname.startsWith(tool.href));
-              const Icon = tool.icon;
+          {tools.map((tool) => {
+            const isActive = pathname === tool.href || (tool.href !== '/' && pathname.startsWith(tool.href));
+            const Icon = tool.icon;
 
-              return (
-                <div key={tool.href} className="space-y-1">
-                  <Link
-                    href={tool.href}
-                    onClick={() => { if (window.innerWidth < 1024) close(); }}
-                    className={cn(
-                      "flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-all duration-300 relative group/item",
-                      isActive
-                        ? "bg-primary/10 text-primary border-l-2 border-primary"
-                        : "text-foreground/80 hover:bg-accent/50 hover:text-foreground",
-                      isCollapsed ? "justify-center" : "justify-between"
-                    )}
-                    title={isCollapsed ? tool.navTitle : undefined}
-                  >
-                    <div className="flex items-center gap-3 min-w-0">
-                      <span className={cn(
-                        "transition-colors duration-300 shrink-0",
-                        isActive ? "text-primary" : "text-foreground/80 group-hover/item:text-foreground"
-                      )}>
-                        <Icon className="h-4 w-4" />
-                      </span>
-                      {!isCollapsed && (
-                        <div className="min-w-0">
-                          <span className="whitespace-nowrap block">{tool.navTitle}</span>
-                          <span className="text-[10px] text-muted-foreground leading-tight block line-clamp-2">{tool.description}</span>
-                        </div>
-                      )}
-                    </div>
-                  </Link>
-                </div>
-              );
-            })}
-          </div>
+            return (
+              <Link
+                key={tool.href}
+                href={tool.href}
+                onClick={() => { if (window.innerWidth < 1024) close(); }}
+                title={isCollapsed ? tool.navTitle : undefined}
+                className={cn(
+                  'relative flex items-center rounded-lg text-sm transition-all duration-200 group/item',
+                  isActive
+                    ? 'bg-primary/10 text-primary'
+                    : 'text-foreground/55 hover:bg-white/4 hover:text-foreground',
+                  isCollapsed ? 'justify-center p-2' : 'gap-3 px-3 py-2'
+                )}
+              >
+                {/* Active left bar */}
+                {isActive && (
+                  <span className="absolute left-0 inset-y-2 w-0.5 rounded-r-full bg-primary" />
+                )}
+
+                <span className={cn(
+                  'shrink-0 transition-colors duration-200',
+                  isActive ? 'text-primary' : 'text-foreground/40 group-hover/item:text-foreground/70'
+                )}>
+                  <Icon className="w-4 h-4" />
+                </span>
+
+                {!isCollapsed && (
+                  <div className="min-w-0">
+                    <span className="whitespace-nowrap block text-[13px] font-medium leading-tight">
+                      {tool.navTitle}
+                    </span>
+                    <span className="text-[9px] text-muted-foreground/40 leading-tight block truncate font-mono mt-0.5">
+                      {tool.description}
+                    </span>
+                  </div>
+                )}
+              </Link>
+            );
+          })}
         </nav>
 
-        {/* Sidebar Footer */}
+        {/* Footer */}
         <div className={cn(
-          "shrink-0 border-t border-border py-3",
-          isCollapsed ? "flex justify-center px-2" : "px-4"
+          'shrink-0 border-t border-border/20 py-3',
+          isCollapsed ? 'flex justify-center px-2' : 'px-4'
         )}>
           {isCollapsed ? (
             <a
@@ -119,21 +124,20 @@ export function AppSidebar() {
               target="_blank"
               rel="noopener noreferrer"
               title="View source"
-              className="text-muted-foreground hover:text-primary transition-colors duration-300"
+              className="text-muted-foreground/40 hover:text-primary transition-colors"
             >
-              <GitFork className="h-4 w-4" />
+              <GitFork className="w-3.5 h-3.5" />
             </a>
           ) : (
             <div className="flex items-center justify-between">
-              <p className="flex items-center gap-1 text-[10px] text-muted-foreground">
-                © {new Date().getFullYear()} Kit.
-                <Heart className="h-2.5 w-2.5 text-primary shrink-0 animate-pulse" fill="currentColor" />
+              <p className="flex items-center gap-1 text-[9px] text-muted-foreground/40 font-mono">
+                © {new Date().getFullYear()} Kit
+                <Heart className="w-2 h-2 text-primary/70 shrink-0 animate-pulse" fill="currentColor" />
                 <a
                   href="https://pivoine.art"
                   target="_blank"
                   rel="noopener noreferrer"
-                  title="Pivoine.Art"
-                  className="font-medium underline underline-offset-4 decoration-primary/0 hover:decoration-primary transition-all duration-300"
+                  className="hover:text-foreground/70 transition-colors"
                 >
                   Valknar
                 </a>
@@ -143,14 +147,13 @@ export function AppSidebar() {
                 target="_blank"
                 rel="noopener noreferrer"
                 title="View source"
-                className="text-muted-foreground hover:text-primary transition-colors duration-300"
+                className="text-muted-foreground/30 hover:text-primary transition-colors"
               >
-                <GitFork className="h-3.5 w-3.5" />
+                <GitFork className="w-3 h-3" />
               </a>
             </div>
           )}
         </div>
-
       </aside>
     </>
   );