Fix: Move sidebar collapse button to footer and fix full-width layout

- Remove SidebarTrigger from TopBar (was in header)
- Add SidebarFooter with SidebarTrigger to both GlobalSidebar and AppSidebar
- Move SidebarProvider from root wrapper to RequireAuth for proper layout control
- Change SidebarProvider height from h-svh to min-h-0 for flexible full-width layout
- Update TopBar to remove SidebarTrigger import and usage

Agent-Logs-Url: https://github.com/objectstack-ai/framework/sessions/cca4add0-2ad9-4a22-964c-49d4c9e4eb36

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

Author: Claude

apps/studio/src/components/app-sidebar.tsx

@@ -41,6 +41,7 @@ import type { InstalledPackage } from '@objectstack/spec/kernel';
 import {
   Sidebar,
   SidebarContent,
+  SidebarFooter,
   SidebarGroup,
   SidebarGroupContent,
   SidebarGroupLabel,
@@ -53,6 +54,7 @@ import {
   SidebarMenuSub,
   SidebarMenuSubItem,
   SidebarMenuSubButton,
+  SidebarTrigger,
 } from "@/components/ui/sidebar"
 import {
   Collapsible,
@@ -547,6 +549,13 @@ export function AppSidebar({
           </SidebarGroupContent>
         </SidebarGroup>
       </SidebarContent>
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarTrigger />
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
     </Sidebar>
   )
 }

apps/studio/src/components/global-sidebar.tsx

@@ -35,12 +35,14 @@ import {
 import {
   Sidebar,
   SidebarContent,
+  SidebarFooter,
   SidebarGroup,
   SidebarGroupContent,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarSeparator,
+  SidebarTrigger,
 } from '@/components/ui/sidebar';
 import { useSession } from '@/hooks/useSession';
 
@@ -157,6 +159,13 @@ export function GlobalSidebar() {
           </SidebarGroupContent>
         </SidebarGroup>
       </SidebarContent>
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarTrigger />
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
     </Sidebar>
   );
 }

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

@@ -12,7 +12,6 @@
 
 import { useLocation, useParams } from '@tanstack/react-router';
 import { useMemo } from 'react';
-import { SidebarTrigger } from '@/components/ui/sidebar';
 import { Separator } from '@/components/ui/separator';
 import {
   Breadcrumb,
@@ -181,8 +180,6 @@ export function TopBar({
     <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">
-        <SidebarTrigger className="-ml-1" />
-        <Separator orientation="vertical" className="mr-2 h-4" />
         <OrganizationSwitcher />
         <Separator orientation="vertical" className="mx-1 h-4" />
         <EnvironmentSwitcher />

apps/studio/src/components/ui/sidebar.tsx

@@ -142,7 +142,7 @@ const SidebarProvider = React.forwardRef<
               } as React.CSSProperties
             }
             className={cn(
-              "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex h-svh w-full overflow-hidden",
+              "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-0 w-full",
               className
             )}
             ref={ref}

apps/studio/src/routes/__root.tsx

@@ -139,17 +139,21 @@ function RequireAuth({ children }: { children: React.ReactNode }) {
     const showGlobalSidebar = isGlobalShellPath(location.pathname);
 
     return (
-      <div className="flex min-h-screen flex-col">
-        <TopBar
-          packages={packages}
-          selectedPackage={selectedPackage}
-          onSelectPackage={handleSelectPackage}
-        />
-        <div className="flex flex-1 min-h-0">
-          {showGlobalSidebar && <GlobalSidebar />}
-          {children}
+      <SidebarProvider>
+        <div className="flex min-h-screen w-full flex-col">
+          <TopBar
+            packages={packages}
+            selectedPackage={selectedPackage}
+            onSelectPackage={handleSelectPackage}
+          />
+          <div className="flex flex-1 w-full overflow-hidden">
+            {showGlobalSidebar && <GlobalSidebar />}
+            <main className="flex flex-1 min-w-0 overflow-hidden">
+              {children}
+            </main>
+          </div>
         </div>
-      </div>
+      </SidebarProvider>
     );
   }
 
@@ -181,15 +185,13 @@ function RootComponent() {
       <SessionProvider>
         <PluginRegistryProvider plugins={builtInPlugins}>
           <ErrorBoundary>
-            <SidebarProvider>
-              <ProductionGuardProvider>
-                <RequireAuth>
-                  <Outlet />
-                </RequireAuth>
-                <Toaster />
-                <AuthedAiChatPanel />
-              </ProductionGuardProvider>
-            </SidebarProvider>
+            <ProductionGuardProvider>
+              <RequireAuth>
+                <Outlet />
+              </RequireAuth>
+              <Toaster />
+              <AuthedAiChatPanel />
+            </ProductionGuardProvider>
           </ErrorBoundary>
         </PluginRegistryProvider>
       </SessionProvider>