feat: refactor settings components and sidebar layout

2025-12-28 02:17:09 +02:00
parent c074b9a3f2
commit 0fefc1b301
27 changed files with 1788 additions and 675 deletions
@@ -1,7 +1,6 @@
 import React from 'react';
 import { Header, FixedSessionsButton } from './Header';
 import { Sidebar } from './Sidebar';
-import { SettingsDialog } from './SettingsDialog';
 import { ErrorBoundary } from '../ui/ErrorBoundary';
 import { CommandPalette } from '../ui/CommandPalette';
 import { HelpDialog } from '../ui/HelpDialog';
@@ -16,7 +15,7 @@ import { useDeviceInfo } from '@/lib/device';
 import { useEdgeSwipe } from '@/hooks/useEdgeSwipe';
 import { cn } from '@/lib/utils';

-import { ChatView, GitView, DiffView, TerminalView } from '@/components/views';
+import { ChatView, GitView, DiffView, TerminalView, SettingsView } from '@/components/views';

 export const MainLayout: React.FC = () => {
    const {
@@ -218,6 +217,7 @@ export const MainLayout: React.FC = () => {
    }, [activeMainTab]);

    const isChatActive = activeMainTab === 'chat';
+    const isSettingsActive = isSettingsDialogOpen && !isMobile;

    return (
        <DiffWorkerProvider>
@@ -231,13 +231,16 @@ export const MainLayout: React.FC = () => {
                <CommandPalette />
                <HelpDialog />
                <SessionDialogs />
-                <SettingsDialog isOpen={isSettingsDialogOpen} onClose={() => setSettingsDialogOpen(false)} />

                {isMobile ? (
                <>
-                    <Header />
+                    {/* Mobile: Header + content + settings overlay */}
+                    {!isSettingsDialogOpen && <Header />}
                    <div
-                        className="flex flex-1 overflow-hidden bg-background"
+                        className={cn(
+                            'flex flex-1 overflow-hidden bg-background',
+                            isSettingsDialogOpen && 'hidden'
+                        )}
                        style={{ paddingTop: 'var(--oc-header-height, 56px)' }}
                    >
                        <main className="flex-1 overflow-hidden bg-background relative">
@@ -259,33 +262,53 @@ export const MainLayout: React.FC = () => {
                    >
                        <SessionSidebar mobileVariant />
                    </MobileOverlayPanel>
+
+                    {/* Mobile settings: full screen */}
+                    {isSettingsDialogOpen && (
+                        <div className="absolute inset-0 z-10 bg-background">
+                            <ErrorBoundary><SettingsView onClose={() => setSettingsDialogOpen(false)} /></ErrorBoundary>
+                        </div>
+                    )}
                </>
            ) : (
                <>
-                    <Sidebar isOpen={isSidebarOpen} isMobile={isMobile}>
-                        <SessionSidebar />
-                    </Sidebar>
+                    {!isSettingsActive && (
+                        <Sidebar isOpen={isSidebarOpen} isMobile={isMobile}>
+                            <SessionSidebar />
+                        </Sidebar>
+                    )}

-                    <div className="flex flex-1 flex-col overflow-hidden">
-                        <Header />
-
-                        <div className="flex flex-1 overflow-hidden bg-background">
-                            <main className="flex-1 overflow-hidden bg-background relative">
-                                <div className={cn('absolute inset-0', !isChatActive && 'invisible')}>
-                                    <ErrorBoundary><ChatView /></ErrorBoundary>
-                                </div>
-                                {secondaryView && (
-                                    <div className="absolute inset-0">
-                                        <ErrorBoundary>{secondaryView}</ErrorBoundary>
+                    {/* Main content area */}
+                    <div className="flex flex-1 flex-col overflow-hidden relative">
+                        {/* Normal view: Header + content */}
+                        <div className={cn('absolute inset-0 flex flex-col', isSettingsActive && 'invisible')}>
+                            <Header />
+                            <div className="flex flex-1 overflow-hidden bg-background">
+                                <main className="flex-1 overflow-hidden bg-background relative">
+                                    <div className={cn('absolute inset-0', !isChatActive && 'invisible')}>
+                                        <ErrorBoundary><ChatView /></ErrorBoundary>
                                    </div>
-                                )}
-                            </main>
+                                    {secondaryView && (
+                                        <div className="absolute inset-0">
+                                            <ErrorBoundary>{secondaryView}</ErrorBoundary>
+                                        </div>
+                                    )}
+                                </main>
+                            </div>
                        </div>
                    </div>
+
+                    {/* Settings view: full screen overlay */}
+                    {isSettingsActive && (
+                        <div className={cn('absolute inset-0 z-10', isDesktopRuntime ? 'bg-transparent' : 'bg-background')}>
+                            <ErrorBoundary><SettingsView onClose={() => setSettingsDialogOpen(false)} /></ErrorBoundary>
+                        </div>
+                    )}
                </>
            )}

-            <FixedSessionsButton />
+            {/* Hide fixed sessions button when settings is open */}
+            {!isSettingsActive && <FixedSessionsButton />}
        </div>
    </DiffWorkerProvider>
    );
@@ -1,11 +1,4 @@
 import React from 'react';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
 import { cn } from '@/lib/utils';
 import { SIDEBAR_SECTIONS } from '@/constants/sidebar';
 import type { SidebarSection } from '@/constants/sidebar';
@@ -19,10 +12,8 @@ import { ProvidersSidebar } from '@/components/sections/providers/ProvidersSideb
 import { ProvidersPage } from '@/components/sections/providers/ProvidersPage';
 import { GitIdentitiesSidebar } from '@/components/sections/git-identities/GitIdentitiesSidebar';
 import { GitIdentitiesPage } from '@/components/sections/git-identities/GitIdentitiesPage';
-import { SettingsPage } from '@/components/sections/settings/SettingsPage';
-import { useDeviceInfo } from '@/lib/device';
+import { OpenChamberPage } from '@/components/sections/openchamber/OpenChamberPage';
 import { ErrorBoundary } from '@/components/ui/ErrorBoundary';
-import { SIDEBAR_CONTENT_WIDTH } from '@/components/layout/Sidebar';
 import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';

 interface SettingsDialogProps {
@@ -37,10 +28,13 @@ const SETTINGS_SECTIONS = (() => {
  return settingsSection ? [settingsSection, ...otherSections] : filtered;
 })();

+/**
+ * Mobile-only settings dialog using MobileOverlayPanel.
+ * Desktop uses SettingsView rendered inline in MainLayout.
+ */
 export const SettingsDialog: React.FC<SettingsDialogProps> = ({ isOpen, onClose }) => {
  const [activeTab, setActiveTab] = React.useState<SidebarSection>('settings');
  const [showPageContent, setShowPageContent] = React.useState(false);
-  const { isMobile } = useDeviceInfo();

  React.useEffect(() => {
    if (isOpen) {
@@ -51,19 +45,14 @@ export const SettingsDialog: React.FC<SettingsDialogProps> = ({ isOpen, onClose

  const handleTabChange = React.useCallback((tab: SidebarSection) => {
    setActiveTab(tab);
-    if (isMobile) {
-      setShowPageContent(false);
-    }
-  }, [isMobile]);
+    setShowPageContent(false);
+  }, []);

  const handleItemSelect = React.useCallback(() => {
-    if (isMobile) {
-      setShowPageContent(true);
-    }
-  }, [isMobile]);
+    setShowPageContent(true);
+  }, []);

  const renderSidebarContent = () => {
-
    if (activeTab === 'settings') {
      return null;
    }
@@ -73,21 +62,17 @@ export const SettingsDialog: React.FC<SettingsDialogProps> = ({ isOpen, onClose
        case 'agents':
          return <AgentsSidebar />;
        case 'commands':
-      return <CommandsSidebar />;
-    case 'providers':
-      return <ProvidersSidebar />;
-    case 'git-identities':
-      return <GitIdentitiesSidebar />;
-    default:
-      return null;
-  }
+          return <CommandsSidebar />;
+        case 'providers':
+          return <ProvidersSidebar />;
+        case 'git-identities':
+          return <GitIdentitiesSidebar />;
+        default:
+          return null;
+      }
    })();

-    if (isMobile) {
-      return <div onClick={handleItemSelect}>{content}</div>;
-    }
-
-    return content;
+    return <div onClick={handleItemSelect}>{content}</div>;
  };

  const renderPageContent = () => {
@@ -97,50 +82,19 @@ export const SettingsDialog: React.FC<SettingsDialogProps> = ({ isOpen, onClose
      case 'commands':
        return <CommandsPage />;
      case 'providers':
-      return <ProvidersPage />;
-    case 'git-identities':
-      return <GitIdentitiesPage />;
-    case 'settings':
-      return <SettingsPage />;
+        return <ProvidersPage />;
+      case 'git-identities':
+        return <GitIdentitiesPage />;
+      case 'settings':
+        return <OpenChamberPage />;
      default:
        return null;
    }
  };

-  const activeSection = SETTINGS_SECTIONS.find(s => s.id === activeTab);
-  const useMobileOverlay = isMobile;
-
-  const headerContent = (
-    <DialogHeader
-      className="border-b border-border/40 px-6 pb-4 pt-[calc(var(--oc-safe-area-top,0px)+0.5rem)]"
-    >
-      <div className="relative flex items-center justify-center">
-        {isMobile && showPageContent && (
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={() => setShowPageContent(false)}
-            className="absolute left-0 h-6 w-6 flex-shrink-0"
-          >
-            <RiArrowLeftSLine className="h-5 w-5" />
-            <span className="sr-only">Back to sidebar</span>
-          </Button>
-        )}
-        <DialogTitle className="typography-ui-header">Settings</DialogTitle>
-      </div>
-      {activeSection && (
-        <DialogDescription className="typography-meta text-muted-foreground hidden sm:block">
-          {activeSection.description}
-        </DialogDescription>
-      )}
-    </DialogHeader>
-  );
-
  const mainContent = (
-    <div className={cn(
-      'flex flex-col min-h-0',
-      isMobile ? 'h-full overflow-hidden' : 'flex-1 overflow-hidden'
-    )}>
+    <div className="flex flex-col h-full overflow-hidden">
+      {/* Tab bar */}
      <div className="flex flex-wrap items-center gap-1 border-b border-border/40 bg-background/95 px-3 py-1.5">
        {SETTINGS_SECTIONS.map(({ id, label, icon: Icon }) => {
          const isActive = activeTab === id;
@@ -157,35 +111,22 @@ export const SettingsDialog: React.FC<SettingsDialogProps> = ({ isOpen, onClose
              aria-pressed={isActive}
              aria-label={label}
            >
-              <PhosphorIcon className={cn('h-5 w-5 sm:h-4 sm:w-4')} weight="regular" />
-              <span className="hidden sm:inline">{label}</span>
+              <PhosphorIcon className="h-5 w-5" weight="regular" />
            </button>
          );
        })}
      </div>

+      {/* Content area - mobile drill-down pattern */}
      <div className="flex flex-1 overflow-hidden">
-        {activeTab !== 'settings' && (!isMobile || !showPageContent) && (
-          <div
-            className={cn(
-              'overflow-hidden border-r bg-sidebar',
-              isMobile && 'w-full border-r-0'
-            )}
-            style={
-              !isMobile
-                ? {
-                    width: `${SIDEBAR_CONTENT_WIDTH}px`,
-                    minWidth: `${SIDEBAR_CONTENT_WIDTH}px`,
-                  }
-                : undefined
-            }
-          >
+        {activeTab !== 'settings' && !showPageContent && (
+          <div className="w-full overflow-hidden bg-sidebar">
            <ErrorBoundary>{renderSidebarContent()}</ErrorBoundary>
          </div>
        )}

-        {(activeTab === 'settings' || !isMobile || showPageContent) && (
-          <div className={cn('flex-1 overflow-hidden bg-background', isMobile && 'w-full')}>
+        {(activeTab === 'settings' || showPageContent) && (
+          <div className="w-full flex-1 overflow-hidden bg-background">
            <ErrorBoundary>{renderPageContent()}</ErrorBoundary>
          </div>
        )}
@@ -193,56 +134,34 @@ export const SettingsDialog: React.FC<SettingsDialogProps> = ({ isOpen, onClose
    </div>
  );

-  const panelContent = (
-    <div className="flex h-full flex-col overflow-hidden">
-      {!useMobileOverlay && headerContent}
-      {mainContent}
-    </div>
-  );
-
-  if (useMobileOverlay) {
-    return (
-      <MobileOverlayPanel
-        open={isOpen}
-        onClose={onClose}
-        title="Settings"
-        className="max-w-full"
-        contentMaxHeightClassName="h-[min(80dvh,720px)]"
-        renderHeader={(closeButton) => (
-          <div className="flex items-center justify-between px-3 py-2 border-b border-border/40">
-            <div className="relative flex flex-1 items-center justify-center">
-              {showPageContent && (
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => setShowPageContent(false)}
-                  className="absolute left-0 h-6 w-6 flex-shrink-0"
-                >
-                  <RiArrowLeftSLine className="h-5 w-5" />
-                  <span className="sr-only">Back to sidebar</span>
-                </Button>
-              )}
-              <span className="typography-ui-header">Settings</span>
-            </div>
-            {closeButton}
-          </div>
-        )}
-      >
-        {mainContent}
-      </MobileOverlayPanel>
-    );
-  }
-
  return (
-    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent
-        className={cn(
-          'flex flex-col gap-0 p-0',
-          'h-[88vh] w-[65vw] max-w-[900px]'
-        )}
-      >
-        {panelContent}
-      </DialogContent>
-    </Dialog>
+    <MobileOverlayPanel
+      open={isOpen}
+      onClose={onClose}
+      title="Settings"
+      className="max-w-full"
+      contentMaxHeightClassName="h-[min(80dvh,720px)]"
+      renderHeader={(closeButton) => (
+        <div className="flex items-center justify-between px-3 py-2 border-b border-border/40">
+          <div className="relative flex flex-1 items-center justify-center">
+            {showPageContent && (
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setShowPageContent(false)}
+                className="absolute left-0 h-6 w-6 flex-shrink-0"
+              >
+                <RiArrowLeftSLine className="h-5 w-5" />
+                <span className="sr-only">Back to sidebar</span>
+              </Button>
+            )}
+            <span className="typography-ui-header">Settings</span>
+          </div>
+          {closeButton}
+        </div>
+      )}
+    >
+      {mainContent}
+    </MobileOverlayPanel>
  );
 };
@@ -6,7 +6,7 @@ import { useSessionStore } from '@/stores/useSessionStore';
 import { useConfigStore } from '@/stores/useConfigStore';
 import { ContextUsageDisplay } from '@/components/ui/ContextUsageDisplay';
 import { RiAddLine, RiArrowLeftLine, RiSettings3Line } from '@remixicon/react';
-import { SettingsPage } from '@/components/sections/settings/SettingsPage';
+import { OpenChamberPage } from '@/components/sections/openchamber/OpenChamberPage';

 type VSCodeView = 'sessions' | 'chat' | 'settings';

@@ -229,7 +229,7 @@ const VSCodeSettingsView: React.FC = () => {
    <div className="flex flex-col h-full">
      {/* Content */}
      <div className="flex-1 overflow-y-auto p-4">
-        <SettingsPage />
+        <OpenChamberPage />
      </div>
    </div>
  );