feat: optimize web ui

packages/web/src/pages/ProjectDetail.tsx

@@ -6,53 +6,104 @@ import DocPreview from './tabs/DocPreview';
 import ModuleManagement from './tabs/ModuleManagement';
 import McpIntegration from './tabs/McpIntegration';
 import ProjectSettings from './tabs/ProjectSettings';
+import Badge from '../components/Badge';
+import Skeleton from '../components/Skeleton';
 
 type ProjectData = {
   id: string; name: string; description: string | null; baseUrl: string | null;
   openApiVersion: string;
   modules: Array<{ id: string; name: string; description: string | null; _count: { endpoints: number } }>;
-  _count: { endpoints: number };
+  _count: { endpoints: number; modules: number };
 };
 
-const tabs = ['Documentation', 'Modules', 'MCP Integration', 'Settings'] as const;
-type Tab = (typeof tabs)[number];
+const tabs = [
+  { key: 'docs', label: 'Documentation', icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z' },
+  { key: 'modules', label: 'Modules', icon: 'M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10' },
+  { key: 'mcp', label: 'MCP', icon: 'M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1' },
+  { key: 'settings', label: 'Settings', icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z' },
+] as const;
+
+type TabKey = (typeof tabs)[number]['key'];
 
 export default function ProjectDetail() {
   const { id } = useParams<{ id: string }>();
-  const [activeTab, setActiveTab] = useState<Tab>('Documentation');
+  const [activeTab, setActiveTab] = useState<TabKey>('docs');
 
   const { data: project, isLoading } = useQuery({
     queryKey: ['project', id],
     queryFn: () => apiFetch<ProjectData>(`/projects/${id}`),
   });
 
-  if (isLoading) return <div>Loading...</div>;
-  if (!project) return <div>Project not found</div>;
+  if (isLoading) {
+    return (
+      <div className="space-y-6">
+        <Skeleton className="h-4 w-28" />
+        <div className="space-y-2">
+          <Skeleton className="h-7 w-56" />
+          <Skeleton className="h-4 w-80" />
+        </div>
+        <Skeleton className="h-10 w-96" />
+        <Skeleton className="h-[300px] w-full" />
+      </div>
+    );
+  }
+
+  if (!project) {
+    return (
+      <div className="text-center py-20">
+        <svg className="w-10 h-10 mx-auto text-text-muted mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}><path d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+        <p className="text-text-muted text-sm">Project not found</p>
+        <Link to="/" className="text-accent hover:underline text-sm mt-2 inline-block">Back to projects</Link>
+      </div>
+    );
+  }
 
   return (
     <div>
-      <div className="mb-4"><Link to="/" className="text-sm text-blue-600 hover:underline">&larr; Back to projects</Link></div>
-      <div className="flex items-center justify-between mb-6">
+      {/* Breadcrumb */}
+      <div className="flex items-center gap-1.5 text-[13px] text-text-muted mb-5">
+        <Link to="/" className="hover:text-text-primary transition-colors">Projects</Link>
+        <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path d="M9 5l7 7-7 7" /></svg>
+        <span className="text-text-secondary font-medium">{project.name}</span>
+      </div>
+
+      {/* Header */}
+      <div className="flex items-start justify-between mb-6">
         <div>
-          <h2 className="text-xl font-semibold">{project.name}</h2>
-          {project.description && <p className="text-sm text-gray-500 mt-1">{project.description}</p>}
+          <h2 className="text-xl font-semibold text-text-primary tracking-[-0.01em]">{project.name}</h2>
+          {project.description && <p className="text-[13px] text-text-muted mt-1 max-w-xl">{project.description}</p>}
         </div>
-        <div className="text-sm text-gray-400">OpenAPI {project.openApiVersion} &middot; {project._count.endpoints} endpoints</div>
-      </div>
-      <div className="border-b mb-6">
-        <div className="flex gap-6">
-          {tabs.map((tab) => (
-            <button key={tab} onClick={() => setActiveTab(tab)}
-              className={`pb-2 text-sm font-medium border-b-2 transition-colors ${activeTab === tab ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'}`}>
-              {tab}
-            </button>
-          ))}
+        <div className="flex items-center gap-1.5 shrink-0 ml-4">
+          <Badge>OpenAPI {project.openApiVersion}</Badge>
+          <Badge>{project._count.endpoints} endpoints</Badge>
         </div>
       </div>
-      {activeTab === 'Documentation' && <DocPreview projectId={project.id} />}
-      {activeTab === 'Modules' && <ModuleManagement projectId={project.id} />}
-      {activeTab === 'MCP Integration' && <McpIntegration project={project} />}
-      {activeTab === 'Settings' && <ProjectSettings project={project} />}
+
+      {/* Tabs */}
+      <div className="flex gap-0.5 p-0.5 rounded-lg bg-bg-tertiary mb-6 max-w-fit border border-border-muted">
+        {tabs.map((tab) => (
+          <button
+            key={tab.key}
+            onClick={() => setActiveTab(tab.key)}
+            className={`flex items-center gap-1.5 px-3 py-[6px] rounded-md text-[13px] font-medium transition-all duration-150 ${
+              activeTab === tab.key
+                ? 'bg-bg-elevated text-text-primary shadow-sm'
+                : 'text-text-muted hover:text-text-secondary'
+            }`}
+          >
+            <svg className="w-[14px] h-[14px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}><path d={tab.icon} /></svg>
+            <span className="hidden sm:inline">{tab.label}</span>
+          </button>
+        ))}
+      </div>
+
+      {/* Content */}
+      <div key={activeTab} className="animate-fade-in">
+        {activeTab === 'docs' && <DocPreview projectId={project.id} />}
+        {activeTab === 'modules' && <ModuleManagement projectId={project.id} />}
+        {activeTab === 'mcp' && <McpIntegration project={project} />}
+        {activeTab === 'settings' && <ProjectSettings project={{ ...project, _count: project._count }} />}
+      </div>
     </div>
   );
 }