- {tooltipText}
+
+ {tooltipText}
+
);
};
diff --git a/ui/desktop/src/components/GooseSidebar/index.ts b/ui/desktop/src/components/GooseSidebar/index.ts
deleted file mode 100644
index 6ca1e20a95eb..000000000000
--- a/ui/desktop/src/components/GooseSidebar/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as AppSidebar } from './AppSidebar';
-export { default as EnvironmentBadge } from './EnvironmentBadge';
diff --git a/ui/desktop/src/components/Layout/AppLayout.tsx b/ui/desktop/src/components/Layout/AppLayout.tsx
index 9d6747772ec5..7236e04ccf41 100644
--- a/ui/desktop/src/components/Layout/AppLayout.tsx
+++ b/ui/desktop/src/components/Layout/AppLayout.tsx
@@ -1,12 +1,14 @@
import React from 'react';
-import { Outlet, useNavigate, useLocation } from 'react-router-dom';
-import AppSidebar from '../GooseSidebar/AppSidebar';
-import { View, ViewOptions } from '../../utils/navigationUtils';
-import { AppWindowMac, AppWindow } from 'lucide-react';
+import { Outlet, useLocation } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { Menu } from 'lucide-react';
import { Button } from '../ui/button';
-import { Sidebar, SidebarInset, SidebarProvider, SidebarTrigger, useSidebar } from '../ui/sidebar';
import ChatSessionsContainer from '../ChatSessionsContainer';
import { useChatContext } from '../../contexts/ChatContext';
+import { NavigationProvider, useNavigationContext } from './NavigationContext';
+import { Navigation } from './NavigationPanel';
+import { NAV_DIMENSIONS, Z_INDEX } from './constants';
+import { cn } from '../../utils';
import { UserInput } from '../../types/message';
interface AppLayoutContentProps {
@@ -17,111 +19,181 @@ interface AppLayoutContentProps {
}
const AppLayoutContent: React.FC = ({ activeSessions }) => {
- const navigate = useNavigate();
const location = useLocation();
const safeIsMacOS = (window?.electron?.platform || 'darwin') === 'darwin';
- const { isMobile, openMobile } = useSidebar();
const chatContext = useChatContext();
const isOnPairRoute = location.pathname === '/pair';
+ const {
+ isNavExpanded,
+ setIsNavExpanded,
+ effectiveNavigationMode,
+ effectiveNavigationStyle,
+ navigationPosition,
+ isHorizontalNav,
+ isCondensedIconOnly,
+ } = useNavigationContext();
+
if (!chatContext) {
throw new Error('AppLayoutContent must be used within ChatProvider');
}
const { setChat } = chatContext;
- // Calculate padding based on sidebar state and macOS
- const headerPadding = safeIsMacOS ? 'pl-21' : 'pl-4';
- // const headerPadding = '';
-
- // Hide buttons when mobile sheet is showing
- const shouldHideButtons = isMobile && openMobile;
-
- const setView = (view: View, viewOptions?: ViewOptions) => {
- // Convert view-based navigation to route-based navigation
- switch (view) {
- case 'chat':
- navigate('/');
- break;
- case 'pair':
- navigate('/pair');
- break;
- case 'settings':
- navigate('/settings', { state: viewOptions });
- break;
- case 'extensions':
- navigate('/extensions', { state: viewOptions });
- break;
- case 'sessions':
- navigate('/sessions');
- break;
- case 'schedules':
- navigate('/schedules');
- break;
- case 'recipes':
- navigate('/recipes');
- break;
- case 'permission':
- navigate('/permission', { state: viewOptions });
- break;
- case 'ConfigureProviders':
- navigate('/configure-providers');
- break;
- case 'sharedSession':
- navigate('/shared-session', { state: viewOptions });
- break;
- case 'welcome':
- navigate('/welcome');
- break;
- default:
- navigate('/');
+ // Hide the titlebar drag region when nav is at the top in push mode,
+ // since the nav occupies that space and the drag region blocks interactions
+ const isPushTopNav =
+ effectiveNavigationMode === 'push' && navigationPosition === 'top' && isNavExpanded;
+ React.useEffect(() => {
+ const dragRegion = document.querySelector('.titlebar-drag-region') as HTMLElement | null;
+ if (!dragRegion) return;
+ if (isPushTopNav) {
+ dragRegion.style.display = 'none';
+ } else {
+ dragRegion.style.display = '';
}
- };
+ return () => {
+ dragRegion.style.display = '';
+ };
+ }, [isPushTopNav]);
- const handleSelectSession = async (sessionId: string) => {
- // Navigate to chat with session data
- navigate('/', { state: { sessionId } });
- };
+ // Calculate padding based on macOS traffic lights
+ const headerPadding = safeIsMacOS ? 'pl-21' : 'pl-4';
- const handleNewWindow = () => {
- window.electron.createChatWindow({
- dir: window.appConfig.get('GOOSE_WORKING_DIR') as string | undefined,
- });
+ // Determine flex direction based on navigation position (for push mode)
+ const getLayoutClass = () => {
+ if (effectiveNavigationMode === 'overlay') {
+ return 'flex-row';
+ }
+
+ switch (navigationPosition) {
+ case 'top':
+ return 'flex-col';
+ case 'bottom':
+ return 'flex-col-reverse';
+ case 'left':
+ return 'flex-row';
+ case 'right':
+ return 'flex-row-reverse';
+ default:
+ return 'flex-row';
+ }
};
- return (
-
- {!shouldHideButtons && (
-
-
-
-
- )}
-
-
-
-
+ // Main content area
+ const mainContent = (
+
+
{/* Always render ChatSessionsContainer to keep SSE connections alive.
- When navigating away from /pair */}
+ When navigating away from /pair, hide it with CSS */}