Remove SiteHeader from all routes and delete component

Claude · hotlong · web-flow · commit 73cd5503e9b1 · 2026-04-21T05:53:25.000Z
- Remove SiteHeader imports and usage from all 11 route files - Adjust container height classes (remove h-svh, use flex-1) - Delete site-header.tsx component (replaced by TopBar) Agent-Logs-Url: https://github.com/objectstack-ai/framework/sessions/095ed50f-741b-4562-b7f1-f4cadbe5b7b1 Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
diff --git a/apps/studio/src/components/site-header.tsx b/apps/studio/src/components/site-header.tsx
diff --git a/apps/studio/src/routes/api-console.tsx b/apps/studio/src/routes/api-console.tsx
@@ -1,19 +1,11 @@
 // Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
 
 import { createFileRoute } from '@tanstack/react-router';
-import { SiteHeader } from '@/components/site-header';
 import { ApiConsolePage } from '../components/ApiConsolePage';
-import { usePackages } from '../hooks/usePackages';
 
 function ApiConsoleComponent() {
-  const { selectedPackage } = usePackages();
-
   return (
-    <main className="flex min-w-0 flex-1 flex-col h-svh overflow-hidden bg-background">
-      <SiteHeader
-        selectedView="api-console"
-        packageLabel={selectedPackage?.manifest?.name || selectedPackage?.manifest?.id}
-      />
+    <main className="flex min-w-0 flex-1 flex-col overflow-hidden bg-background">
       <div className="flex flex-1 flex-col overflow-hidden">
         <ApiConsolePage />
       </div>
diff --git a/apps/studio/src/routes/environments.$environmentId.$package.index.tsx b/apps/studio/src/routes/environments.$environmentId.$package.index.tsx
@@ -1,7 +1,6 @@
 // Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
 
 import { createFileRoute } from '@tanstack/react-router';
-import { SiteHeader } from '@/components/site-header';
 import { DeveloperOverview } from '../components/DeveloperOverview';
 import { useEnvAwarePackages } from '../hooks/useEnvAwarePackages';
 
@@ -10,15 +9,9 @@ function EnvPackageIndexComponent() {
   const { packages, selectedPackage } = useEnvAwarePackages(environmentId);
 
   return (
-    <>
-      <SiteHeader
-        selectedView="overview"
-        packageLabel={selectedPackage?.manifest?.name || selectedPackage?.manifest?.id}
-      />
-      <div className="flex flex-1 flex-col overflow-hidden">
-        <DeveloperOverview packages={packages} selectedPackage={selectedPackage} />
-      </div>
-    </>
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <DeveloperOverview packages={packages} selectedPackage={selectedPackage} />
+    </div>
   );
 }
 
diff --git a/apps/studio/src/routes/environments.$environmentId.$package.metadata.$type.$name.tsx b/apps/studio/src/routes/environments.$environmentId.$package.metadata.$type.$name.tsx
@@ -1,7 +1,6 @@
 // Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
 
 import { createFileRoute } from '@tanstack/react-router';
-import { SiteHeader } from '@/components/site-header';
 import { PluginHost } from '../plugins';
 import { useEnvAwarePackages } from '../hooks/useEnvAwarePackages';
 
@@ -12,20 +11,13 @@ function EnvMetadataViewComponent() {
   const resolvedPkgId = selectedPackage?.manifest?.id ?? packageId;
 
   return (
-    <>
-      <SiteHeader
-        selectedMeta={{ type, name }}
-        selectedView="metadata"
-        packageLabel={selectedPackage?.manifest?.name || selectedPackage?.manifest?.id}
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <PluginHost
+        metadataType={type}
+        metadataName={name}
+        packageId={resolvedPkgId}
       />
-      <div className="flex flex-1 flex-col overflow-hidden">
-        <PluginHost
-          metadataType={type}
-          metadataName={name}
-          packageId={resolvedPkgId}
-        />
-      </div>
-    </>
+    </div>
   );
 }
 
diff --git a/apps/studio/src/routes/environments.$environmentId.$package.objects.$name.tsx b/apps/studio/src/routes/environments.$environmentId.$package.objects.$name.tsx
@@ -1,7 +1,6 @@
 // Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
 
 import { createFileRoute } from '@tanstack/react-router';
-import { SiteHeader } from '@/components/site-header';
 import { PluginHost } from '../plugins';
 import { useEnvAwarePackages } from '../hooks/useEnvAwarePackages';
 
@@ -13,20 +12,13 @@ function EnvObjectViewComponent() {
   const resolvedPkgId = selectedPackage?.manifest?.id ?? packageId;
 
   return (
-    <>
-      <SiteHeader
-        selectedObject={name}
-        selectedView="object"
-        packageLabel={selectedPackage?.manifest?.name || selectedPackage?.manifest?.id}
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <PluginHost
+        metadataType="object"
+        metadataName={name}
+        packageId={resolvedPkgId}
       />
-      <div className="flex flex-1 flex-col overflow-hidden">
-        <PluginHost
-          metadataType="object"
-          metadataName={name}
-          packageId={resolvedPkgId}
-        />
-      </div>
-    </>
+    </div>
   );
 }
 
diff --git a/apps/studio/src/routes/environments.$environmentId.$package.tsx b/apps/studio/src/routes/environments.$environmentId.$package.tsx
@@ -14,7 +14,7 @@ import { createFileRoute, Outlet } from '@tanstack/react-router';
 
 function EnvPackageLayoutComponent() {
   return (
-    <main className="flex min-w-0 flex-1 flex-col h-svh overflow-hidden bg-background">
+    <main className="flex min-w-0 flex-1 flex-col overflow-hidden bg-background">
       <Outlet />
     </main>
   );
diff --git a/apps/studio/src/routes/environments.$environmentId.index.tsx b/apps/studio/src/routes/environments.$environmentId.index.tsx
@@ -23,7 +23,6 @@ import {
   Loader2,
   Package,
 } from 'lucide-react';
-import { SiteHeader } from '@/components/site-header';
 import { EnvironmentBadge } from '@/components/environment-badge';
 import { EnvironmentStatusBadge } from '@/components/environment-status-badge';
 import { Card } from '@/components/ui/card';
@@ -116,9 +115,7 @@ function EnvironmentOverviewComponent() {
   };
 
   return (
-    <main className="flex min-w-0 flex-1 flex-col h-svh overflow-hidden bg-background">
-      <SiteHeader selectedView="environments" />
-
+    <main className="flex min-w-0 flex-1 flex-col overflow-hidden bg-background">
       <div className="flex-1 overflow-auto p-6">
         <div className="mx-auto max-w-4xl space-y-6">
             {loading && !env && (
diff --git a/apps/studio/src/routes/environments.$environmentId.packages.tsx b/apps/studio/src/routes/environments.$environmentId.packages.tsx
@@ -12,8 +12,7 @@ import { createFileRoute, useParams, useNavigate } from '@tanstack/react-router'
 import { useState, useEffect, useCallback } from 'react';
 import { useClient } from '@objectstack/client-react';
 import { Package, Power, PowerOff, Trash2, Plus, RefreshCw, ArrowRight } from 'lucide-react';
-import { SiteHeader } from '@/components/site-header';
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
@@ -100,9 +99,7 @@ function EnvironmentPackagesComponent() {
   };
 
   return (
-    <main className="flex min-w-0 flex-1 flex-col h-svh overflow-hidden bg-background">
-      <SiteHeader selectedView="packages" />
-
+    <main className="flex min-w-0 flex-1 flex-col overflow-hidden bg-background">
       <div className="flex-1 overflow-auto p-6">
         <div className="mx-auto max-w-4xl space-y-8">
 
diff --git a/apps/studio/src/routes/environments.index.tsx b/apps/studio/src/routes/environments.index.tsx
@@ -15,7 +15,6 @@
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { useState } from 'react';
 import { Plus, Database, MapPin, RefreshCw } from 'lucide-react';
-import { SiteHeader } from '@/components/site-header';
 import { Button } from '@/components/ui/button';
 import { Card } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
@@ -30,9 +29,7 @@ function EnvironmentsListComponent() {
   const [createOpen, setCreateOpen] = useState(false);
 
   return (
-    <main className="flex min-w-0 flex-1 flex-col h-svh overflow-hidden bg-background">
-      <SiteHeader selectedView="environments" />
-
+    <main className="flex min-w-0 flex-1 flex-col overflow-hidden bg-background">
       <div className="flex-1 overflow-auto p-6">
         <div className="mx-auto max-w-5xl">
           <div className="mb-6 flex items-center justify-between">
diff --git a/apps/studio/src/routes/index.tsx b/apps/studio/src/routes/index.tsx
@@ -1,19 +1,14 @@
 // Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
 
 import { createFileRoute } from '@tanstack/react-router';
-import { SiteHeader } from '@/components/site-header';
 import { DeveloperOverview } from '../components/DeveloperOverview';
 import { usePackages } from '../hooks/usePackages';
 
 function IndexComponent() {
   const { packages, selectedPackage } = usePackages();
 
   return (
-    <main className="flex min-w-0 flex-1 flex-col h-svh overflow-hidden bg-background">
-      <SiteHeader
-        selectedView="overview"
-        packageLabel={selectedPackage?.manifest?.name || selectedPackage?.manifest?.id}
-      />
+    <main className="flex min-w-0 flex-1 flex-col overflow-hidden bg-background">
       <div className="flex flex-1 flex-col overflow-hidden">
         <DeveloperOverview
           packages={packages}
diff --git a/apps/studio/src/routes/orgs.$orgId.tsx b/apps/studio/src/routes/orgs.$orgId.tsx
@@ -6,7 +6,6 @@ import { ArrowLeft } from 'lucide-react';
 import { useClient } from '@objectstack/client-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { SiteHeader } from '@/components/site-header';
 import { toast } from '@/hooks/use-toast';
 import { useOrganizations, useSession } from '@/hooks/useSession';
 
@@ -61,9 +60,8 @@ function OrgDetailPage() {
   const isActive = session?.activeOrganizationId === orgId;
 
   return (
-    <div className="flex flex-1 flex-col">
-      <SiteHeader selectedView="overview" />
-      <div className="flex-1 px-6 py-8">
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <div className="flex-1 px-6 py-8 overflow-auto">
         <div className="mx-auto max-w-3xl space-y-6">
           <div className="flex items-center justify-between">
             <Button variant="ghost" size="sm" onClick={() => navigate({ to: '/orgs' })}>
diff --git a/apps/studio/src/routes/orgs.index.tsx b/apps/studio/src/routes/orgs.index.tsx
@@ -4,7 +4,6 @@ import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
 import { Building2, Check, Plus } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { SiteHeader } from '@/components/site-header';
 import { toast } from '@/hooks/use-toast';
 import { useOrganizations, useSession } from '@/hooks/useSession';
 
@@ -33,9 +32,8 @@ function OrgsListPage() {
   };
 
   return (
-    <div className="flex flex-1 flex-col">
-      <SiteHeader selectedView="overview" />
-      <div className="flex-1 px-6 py-8">
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <div className="flex-1 px-6 py-8 overflow-auto">
         <div className="mx-auto max-w-3xl space-y-6">
           <div className="flex items-center justify-between">
             <div>
diff --git a/apps/studio/src/routes/orgs.new.tsx b/apps/studio/src/routes/orgs.new.tsx
@@ -6,7 +6,6 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { SiteHeader } from '@/components/site-header';
 import { toast } from '@/hooks/use-toast';
 import { useCreateOrganization, useSession } from '@/hooks/useSession';
 
@@ -58,9 +57,8 @@ function NewOrgPage() {
   };
 
   return (
-    <div className="flex flex-1 flex-col">
-      <SiteHeader selectedView="overview" />
-      <div className="flex-1 px-6 py-8">
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <div className="flex-1 px-6 py-8 overflow-auto">
         <div className="mx-auto max-w-lg">
           <Card>
             <CardHeader>
