refactor: externalize tool definitions and polish app shell
- Create lib/tools.tsx as single source of truth for all tool metadata (title, shortTitle, navTitle, description, summary, icon, etc.) - Update AppSidebar to render nav from centralized tools list with descriptions, remove collapse footer button - Update AppHeader with sidebar collapse toggle, tool short title, and app logo; remove breadcrumbs - Update AppPage to auto-resolve tool icon from pathname - Update ToolsGrid/ToolCard to use shared tools data, remove per-card gradients for uniform styling - Add per-tool HTML title via metadata exports (title template in root layout) - Style landing page and 404 headings with primary theme color - Add Toolbox icon to hero CTA, GitFork icon link in footer - Remove footer from error page and "View on Dev" buttons - Extract ColorPage client component for RSC metadata compatibility Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,73 +1,23 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import {
|
||||
ChevronRight,
|
||||
ChevronLeft,
|
||||
X
|
||||
} from 'lucide-react';
|
||||
import { X } 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 { ColorIcon, UnitsIcon, ASCIIIcon, MediaIcon, FaviconIcon } from '@/components/AppIcons';
|
||||
|
||||
interface NavItem {
|
||||
title: string;
|
||||
href: string;
|
||||
icon: React.ElementType | React.ReactNode;
|
||||
items?: { title: string; href: string }[];
|
||||
}
|
||||
|
||||
interface NavGroup {
|
||||
label: string;
|
||||
items: NavItem[];
|
||||
}
|
||||
|
||||
const navigation: NavGroup[] = [
|
||||
{
|
||||
label: 'Toolkit',
|
||||
items: [
|
||||
{
|
||||
title: 'Units Converter',
|
||||
href: '/units',
|
||||
icon: <UnitsIcon className="h-4 w-4" />
|
||||
},
|
||||
{
|
||||
title: 'ASCII Art',
|
||||
href: '/ascii',
|
||||
icon: <ASCIIIcon className="h-4 w-4" />
|
||||
},
|
||||
{
|
||||
title: 'Color Manipulation',
|
||||
href: '/color',
|
||||
icon: <ColorIcon className="h-4 w-4" />
|
||||
},
|
||||
{
|
||||
title: 'Media Converter',
|
||||
href: '/media',
|
||||
icon: <MediaIcon className="h-4 w-4" />
|
||||
},
|
||||
{
|
||||
title: 'Favicon Generator',
|
||||
href: '/favicon',
|
||||
icon: <FaviconIcon className="h-4 w-4" />
|
||||
},
|
||||
]
|
||||
}
|
||||
];
|
||||
import { tools } from '@/lib/tools';
|
||||
|
||||
export function AppSidebar() {
|
||||
const pathname = usePathname();
|
||||
const { isOpen, isCollapsed, close, toggleCollapse } = useSidebar();
|
||||
const { isOpen, isCollapsed, close } = useSidebar();
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Mobile Overlay Backdrop */}
|
||||
{isOpen && (
|
||||
<div
|
||||
<div
|
||||
className="fixed inset-0 bg-transparent backdrop-blur-sm z-40 lg:hidden"
|
||||
onClick={close}
|
||||
/>
|
||||
@@ -76,115 +26,88 @@ export function AppSidebar() {
|
||||
<aside className={cn(
|
||||
"fixed inset-y-0 left-0 z-50 flex flex-col border-r border-border bg-background/20 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-20" : "w-64"
|
||||
isCollapsed ? "lg:w-14" : "w-64"
|
||||
)}>
|
||||
{/* Sidebar Header */}
|
||||
<div className="flex h-16 items-center justify-between px-6 shrink-0 border-b border-border">
|
||||
<Link href="/" className="flex items-center gap-3 group overflow-hidden">
|
||||
<div className={cn(
|
||||
"flex h-16 items-center shrink-0 border-b border-border",
|
||||
isCollapsed ? "justify-center px-2" : "justify-between px-5"
|
||||
)}>
|
||||
<Link href="/" className={cn(
|
||||
"flex items-center group overflow-hidden",
|
||||
isCollapsed ? "justify-center" : "gap-3"
|
||||
)}>
|
||||
<div className="shrink-0">
|
||||
<Logo size={isCollapsed ? 24 : 24} />
|
||||
<Logo size={isCollapsed ? 20 : 28} />
|
||||
</div>
|
||||
{!isCollapsed && (
|
||||
<span className="font-bold text-xl transition-colors text-foreground">
|
||||
Kit
|
||||
</span>
|
||||
<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">
|
||||
Browser-first toolkit
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="lg:hidden text-muted-foreground"
|
||||
onClick={close}
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</Button>
|
||||
{!isCollapsed && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="lg:hidden text-muted-foreground"
|
||||
onClick={close}
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 overflow-y-auto px-4 py-2 space-y-6 mt-4 overflow-x-hidden">
|
||||
{navigation.map((group) => (
|
||||
<div key={group.label}>
|
||||
<div className="space-y-0.5">
|
||||
{group.items.map((item) => {
|
||||
const isActive = pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href));
|
||||
|
||||
return (
|
||||
<div key={item.href} className="space-y-1">
|
||||
<Link
|
||||
href={item.href}
|
||||
onClick={() => { if (window.innerWidth < 1024) close(); }}
|
||||
className={cn(
|
||||
"flex items-center px-3 py-1.5 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 ? item.title : undefined}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className={cn(
|
||||
"transition-colors duration-300 shrink-0",
|
||||
isActive ? "text-primary" : "text-foreground/80 group-hover/item:text-foreground"
|
||||
)}>
|
||||
{React.isValidElement(item.icon) ? item.icon : null}
|
||||
</span>
|
||||
{!isCollapsed && <span className="whitespace-nowrap">{item.title}</span>}
|
||||
</div>
|
||||
|
||||
{!isCollapsed && item.items && (
|
||||
<ChevronRight className={cn(
|
||||
"h-3.5 w-3.5 transition-transform duration-300",
|
||||
pathname.startsWith(item.href) && "rotate-90"
|
||||
)} />
|
||||
)}
|
||||
</Link>
|
||||
|
||||
{item.items && pathname.startsWith(item.href) && !isCollapsed && (
|
||||
<div className="ml-9 space-y-1 border-l border-border pl-2 mt-1">
|
||||
{item.items.map((subItem) => (
|
||||
<Link
|
||||
key={subItem.href}
|
||||
href={subItem.href}
|
||||
onClick={() => { if (window.innerWidth < 1024) close(); }}
|
||||
className={cn(
|
||||
"block px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200",
|
||||
pathname === subItem.href
|
||||
? "text-primary bg-primary/5 font-semibold"
|
||||
: "text-muted-foreground hover:text-foreground hover:bg-accent/50"
|
||||
)}
|
||||
>
|
||||
{subItem.title}
|
||||
</Link>
|
||||
))}
|
||||
<nav className={cn(
|
||||
"flex-1 overflow-y-auto py-2 space-y-6 mt-4 overflow-hidden scrollbar",
|
||||
isCollapsed ? "px-2" : "px-4"
|
||||
)}>
|
||||
<div className="space-y-0.5">
|
||||
{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>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Sidebar Footer / Desktop Toggle */}
|
||||
<div className="p-4 border-t border-border hidden lg:block">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full flex items-center justify-center gap-2 text-muted-foreground hover:text-foreground"
|
||||
onClick={toggleCollapse}
|
||||
>
|
||||
{isCollapsed ? (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
) : (
|
||||
<>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
<span className="text-xs font-semibold uppercase tracking-wider">Collapse</span>
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user