feat(studio): restyle top bar left segment to Supabase style

Agent-Logs-Url: https://github.com/objectstack-ai/framework/sessions/09f59abf-0adb-4259-89a2-6184be8c9618

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Claude

apps/studio/src/components/organization-switcher.tsx

@@ -11,7 +11,7 @@
 
 import { useMemo, useState } from 'react';
 import { useNavigate } from '@tanstack/react-router';
-import { Building2, Check, ChevronsUpDown, Plus } from 'lucide-react';
+import { Check, ChevronsUpDown, Plus } from 'lucide-react';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -68,15 +68,14 @@ export function OrganizationSwitcher() {
           className="h-8 gap-2 px-2 text-sm font-medium"
           disabled={switching}
         >
-          <Building2 className="h-3.5 w-3.5 text-muted-foreground" />
           {active ? (
             <span className="max-w-[140px] truncate">{active.name}</span>
           ) : (
             <span className="text-muted-foreground">
               {loading ? 'Loading…' : 'Select organization'}
             </span>
           )}
-          <ChevronsUpDown className="h-3.5 w-3.5 opacity-60" />
+          <ChevronsUpDown className="h-3 w-3 opacity-50" />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="w-[280px]" sideOffset={4}>

apps/studio/src/components/project-switcher.tsx

@@ -20,7 +20,7 @@
 
 import { useMemo, useState } from 'react';
 import { useNavigate, useParams } from '@tanstack/react-router';
-import { ChevronsUpDown, Layers, Plus, Search, Check } from 'lucide-react';
+import { ChevronsUpDown, Plus, Search, Check } from 'lucide-react';
 import type { Project, ProjectType } from '@objectstack/spec/cloud';
 import {
   DropdownMenu,
@@ -110,7 +110,6 @@ export function ProjectSwitcher() {
             size="sm"
             className="h-8 gap-2 px-2 text-sm font-medium"
           >
-            <Layers className="h-3.5 w-3.5 text-muted-foreground" />
             {active ? (
               <>
                 <span className="max-w-[160px] truncate">
@@ -123,7 +122,7 @@ export function ProjectSwitcher() {
                 {loading ? 'Loading projects…' : 'Select project'}
               </span>
             )}
-            <ChevronsUpDown className="h-3.5 w-3.5 opacity-60" />
+            <ChevronsUpDown className="h-3 w-3 opacity-50" />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent

apps/studio/src/components/top-bar.tsx

@@ -10,7 +10,7 @@
  * - Right segment: Global search placeholder, mode badge, ThemeToggle, UserMenu
  */
 
-import { useLocation, useParams } from '@tanstack/react-router';
+import { Link, useLocation, useParams } from '@tanstack/react-router';
 import { useMemo } from 'react';
 import { Separator } from '@/components/ui/separator';
 import {
@@ -24,13 +24,11 @@ import {
 import { ThemeToggle } from '@/components/theme-toggle';
 import { Badge } from '@/components/ui/badge';
 import { Input } from '@/components/ui/input';
-import { Cpu, Search } from 'lucide-react';
+import { Boxes, Cpu, Search } from 'lucide-react';
 import { config } from '@/lib/config';
 import { ProjectSwitcher } from '@/components/project-switcher';
 import { OrganizationSwitcher } from '@/components/organization-switcher';
 import { UserMenu } from '@/components/user-menu';
-import { PackageSwitcher } from '@/components/package-switcher';
-import type { InstalledPackage } from '@objectstack/spec/kernel';
 
 const META_TYPE_LABELS: Record<string, string> = {
   action: 'Actions',
@@ -61,20 +59,19 @@ const META_TYPE_LABELS: Record<string, string> = {
   theme: 'Themes',
 };
 
-interface TopBarProps {
-  /** List of installed packages for the PackageSwitcher dropdown */
-  packages?: InstalledPackage[];
-  /** Currently selected package */
-  selectedPackage?: InstalledPackage | null;
-  /** Callback when a package is selected from the dropdown */
-  onSelectPackage?: (pkg: InstalledPackage) => void;
+function StudioBrand() {
+  return (
+    <Link to="/" className="flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground hover:opacity-90">
+      <Boxes className="h-4 w-4" />
+    </Link>
+  );
+}
+
+function SlashDivider() {
+  return <span aria-hidden className="text-muted-foreground/50 select-none">/</span>;
 }
 
-export function TopBar({
-  packages = [],
-  selectedPackage = null,
-  onSelectPackage = () => {},
-}: TopBarProps) {
+export function TopBar() {
   const location = useLocation();
   const params = useParams({ strict: false }) as {
     package?: string;
@@ -130,24 +127,15 @@ export function TopBar({
         items.push({ label: 'Overview' });
         break;
       case 'package-overview':
-        if (selectedPackage?.manifest?.name) {
-          items.push({ label: selectedPackage.manifest.name });
-        }
         items.push({ label: 'Overview' });
         break;
       case 'object':
-        if (selectedPackage?.manifest?.name) {
-          items.push({ label: selectedPackage.manifest.name });
-        }
         items.push({ label: 'Objects' });
         if (params.name) {
           items.push({ label: params.name });
         }
         break;
       case 'metadata':
-        if (selectedPackage?.manifest?.name) {
-          items.push({ label: selectedPackage.manifest.name });
-        }
         if (params.type) {
           items.push({ label: META_TYPE_LABELS[params.type] || params.type });
         }
@@ -160,7 +148,7 @@ export function TopBar({
     }
 
     return items;
-  }, [viewType, params, selectedPackage]);
+  }, [viewType, params]);
 
   // Compute API badge for object/metadata views
   const apiBadge = useMemo(() => {
@@ -173,26 +161,15 @@ export function TopBar({
     return null;
   }, [viewType, params]);
 
-  // Show PackageSwitcher only when we're in a package context
-  const showPackageSwitcher = params.package && packages.length > 0;
-
   return (
     <header className="flex h-12 shrink-0 items-center justify-between gap-2 border-b px-4">
-      {/* Left segment: Org + Env + Package switchers */}
-      <div className="flex items-center gap-2">
+      {/* Left segment: Brand + Org + Project switchers */}
+      <div className="flex items-center gap-1.5">
+        <StudioBrand />
+        <SlashDivider />
         <OrganizationSwitcher />
-        <Separator orientation="vertical" className="mx-1 h-4" />
+        <SlashDivider />
         <ProjectSwitcher />
-        {showPackageSwitcher && (
-          <>
-            <Separator orientation="vertical" className="mx-1 h-4" />
-            <PackageSwitcher
-              packages={packages}
-              selectedPackage={selectedPackage}
-              onSelectPackage={onSelectPackage}
-            />
-          </>
-        )}
         <Separator orientation="vertical" className="mx-2 h-4" />
         <Breadcrumb>
           <BreadcrumbList>

apps/studio/src/routes/__root.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
 
-import { createRootRoute, Outlet, useLocation, useNavigate, useParams } from '@tanstack/react-router';
-import { useEffect, useMemo } from 'react';
+import { createRootRoute, Outlet, useLocation, useNavigate } from '@tanstack/react-router';
+import { useEffect } from 'react';
 import { ObjectStackProvider } from '@objectstack/client-react';
 import { ErrorBoundary } from '../components/ErrorBoundary';
 import { SidebarProvider } from '@/components/ui/sidebar';
@@ -13,8 +13,6 @@ import { PluginRegistryProvider } from '../plugins';
 import { builtInPlugins } from '../plugins/built-in';
 import { useObjectStackClient } from '../hooks/useObjectStackClient';
 import { SessionProvider, useSession } from '../hooks/useSession';
-import { useEnvAwarePackages } from '../hooks/useProjectAwarePackages';
-import type { InstalledPackage } from '@objectstack/spec/kernel';
 
 /** Routes that don't require authentication. */
 const PUBLIC_ROUTES = new Set(['/login', '/register']);
@@ -39,47 +37,8 @@ function RequireAuth({ children }: { children: React.ReactNode }) {
   const { user, loading } = useSession();
   const navigate = useNavigate();
   const location = useLocation();
-  const params = useParams({ strict: false }) as { projectId?: string; package?: string };
   const isPublic = PUBLIC_ROUTES.has(location.pathname);
 
-  // Get packages for TopBar PackageSwitcher
-  const { packages, selectedPackage, setSelectedPackage } =
-    useEnvAwarePackages(params.projectId);
-
-  // Extract the $package segment from the URL
-  const activePackageId = useMemo(() => {
-    if (!params.package) return undefined;
-    // Reserved segments that are NOT package ids
-    if (params.package === 'packages') return undefined;
-    return params.package;
-  }, [params.package]);
-
-  // Sync selectedPackage with URL
-  useEffect(() => {
-    if (!activePackageId) {
-      if (selectedPackage) setSelectedPackage(null);
-      return;
-    }
-    if (!packages.length) return;
-    const pkg = packages.find(
-      (p) =>
-        p.manifest?.id === activePackageId ||
-        p.manifest?.id?.endsWith('.' + activePackageId),
-    );
-    if (pkg && pkg !== selectedPackage) setSelectedPackage(pkg);
-  }, [activePackageId, packages, selectedPackage, setSelectedPackage]);
-
-  const handleSelectPackage = (pkg: InstalledPackage) => {
-    const nextId = pkg.manifest?.id;
-    if (!nextId) return;
-    if (params.projectId) {
-      navigate({
-        to: '/projects/$projectId/$package',
-        params: { projectId: params.projectId, package: nextId },
-      });
-    }
-  };
-
   // Redirect to environment picker when the user hits a route that requires
   // an environment context (e.g. /$package/*) but isn't already under /projects.
   useEffect(() => {
@@ -113,11 +72,7 @@ function RequireAuth({ children }: { children: React.ReactNode }) {
     return (
       <SidebarProvider>
         <div className="flex min-h-screen w-full flex-col">
-          <TopBar
-            packages={packages}
-            selectedPackage={selectedPackage}
-            onSelectPackage={handleSelectPackage}
-          />
+          <TopBar />
           <div className="flex flex-1 w-full overflow-hidden">
             <main className="flex flex-1 min-w-0 overflow-hidden">
               {children}