Implement Airtable-style unified sidebar navigation

- Add NavigationContext provider for Home/App context switching
- Create UnifiedSidebar component with contextual navigation
- Update HomeLayout to use AppShell with sidebar
- Update ConsoleLayout to use UnifiedSidebar
- Move Settings and User profile to pinned bottom area
- Add smooth transitions for sidebar content
- Remove redundant Home page header navigation
- Wrap App with NavigationProvider

Agent-Logs-Url: https://github.com/objectstack-ai/objectui/sessions/49a47ba8-e174-4627-a631-a66425a62a98

Co-authored-by: xuyushun441-sys <255036401+xuyushun441-sys@users.noreply.github.com>

Author: Claude

apps/console/src/App.tsx

@@ -62,6 +62,7 @@ const HomeLayout = lazy(() => import('./pages/home/HomeLayout').then(m => ({ def
 
 import { ThemeProvider } from './components/theme-provider';
 import { ConsoleToaster } from './components/ConsoleToaster';
+import { NavigationProvider } from './context/NavigationContext';
 
 /**
  * ConnectedShell
@@ -518,6 +519,7 @@ export function App() {
       <ConsoleToaster position="bottom-right" />
       <ConditionalAuthWrapper authUrl="/api/v1/auth">
         <PreviewBanner />
+        <NavigationProvider>
         <BrowserRouter basename={import.meta.env.BASE_URL?.replace(/\/$/, '') || '/'}>
             <Suspense fallback={<LoadingScreen />}>
             <Routes>
@@ -569,6 +571,7 @@ export function App() {
             </Routes>
             </Suspense>
         </BrowserRouter>
+        </NavigationProvider>
       </ConditionalAuthWrapper>
     </ThemeProvider>
   );

apps/console/src/components/ConsoleLayout.tsx

@@ -2,18 +2,20 @@
  * ConsoleLayout
  *
  * Root layout shell for the console application. Composes the AppShell
- * with the sidebar, header, and main content area.
+ * with the UnifiedSidebar, header, and main content area.
  * Includes the global floating chatbot (FAB) widget.
+ * Sets navigation context to 'app' for app-specific routes.
  * @module
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { AppShell } from '@object-ui/layout';
 import { FloatingChatbot, useObjectChat, type ChatMessage } from '@object-ui/plugin-chatbot';
 import { useDiscovery } from '@object-ui/react';
-import { AppSidebar } from './AppSidebar';
+import { UnifiedSidebar } from './UnifiedSidebar';
 import { AppHeader } from './AppHeader';
 import { useResponsiveSidebar } from '../hooks/useResponsiveSidebar';
+import { useNavigationContext } from '../context/NavigationContext';
 import { resolveI18nLabel } from '../utils';
 import type { ConnectionState } from '../dataSource';
 
@@ -88,28 +90,35 @@ function ConsoleFloatingChatbot({ appLabel, objects }: { appLabel: string; objec
   );
 }
 
-export function ConsoleLayout({ 
-  children, 
-  activeAppName, 
+export function ConsoleLayout({
+  children,
+  activeAppName,
   activeApp,
   onAppChange,
   objects,
   connectionState
 }: ConsoleLayoutProps) {
   const appLabel = resolveI18nLabel(activeApp?.label) || activeAppName;
   const { isAiEnabled } = useDiscovery();
+  const { setContext, setCurrentAppName } = useNavigationContext();
+
+  // Set navigation context to 'app' when this layout mounts
+  useEffect(() => {
+    setContext('app');
+    setCurrentAppName(activeAppName);
+  }, [setContext, setCurrentAppName, activeAppName]);
 
   return (
     <AppShell
       sidebar={
-         <AppSidebar 
-           activeAppName={activeAppName} 
-           onAppChange={onAppChange} 
+         <UnifiedSidebar
+           activeAppName={activeAppName}
+           onAppChange={onAppChange}
          />
       }
       navbar={
-          <AppHeader 
-            appName={appLabel} 
+          <AppHeader
+            appName={appLabel}
             objects={objects}
             connectionState={connectionState}
           />