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,7 +1,9 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { getToolByHref } from '@/lib/tools';
|
||||
|
||||
interface AppPageProps {
|
||||
title: string;
|
||||
@@ -11,11 +13,19 @@ interface AppPageProps {
|
||||
}
|
||||
|
||||
export function AppPage({ title, description, children, className }: AppPageProps) {
|
||||
const pathname = usePathname();
|
||||
const firstSegment = pathname.split('/').filter(Boolean)[0];
|
||||
const tool = getToolByHref(`/${firstSegment ?? ''}`);
|
||||
const Icon = tool?.icon;
|
||||
|
||||
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>
|
||||
<h1 className="text-2xl font-bold mb-1">{title}</h1>
|
||||
<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>
|
||||
{description && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{description}
|
||||
|
||||
Reference in New Issue
Block a user