refactor(ui): streamline header, settings layout

2026-02-10 02:36:02 +02:00
parent 91a1f64f77
commit 735aba7d0c
7 changed files with 212 additions and 109 deletions
@@ -26,7 +26,7 @@ import { useGitHubAuthStore } from '@/stores/useGitHubAuthStore';
 import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
 import { ContextUsageDisplay } from '@/components/ui/ContextUsageDisplay';
 import { useDeviceInfo } from '@/lib/device';
-import { cn, getModifierLabel, hasModifier } from '@/lib/utils';
+import { cn, hasModifier } from '@/lib/utils';
 import { useDiffFileCount } from '@/components/views/DiffView';
 import { McpDropdown, McpDropdownContent } from '@/components/mcp/McpDropdown';
 import { ProviderLogo } from '@/components/ui/ProviderLogo';
@@ -52,6 +52,7 @@ import type { GitHubAuthStatus } from '@/lib/api/types';
 import { DesktopHostSwitcherDialog } from '@/components/desktop/DesktopHostSwitcher';
 import { OpenInAppButton } from '@/components/desktop/OpenInAppButton';
 import { isDesktopShell } from '@/lib/desktop';
+import { desktopHostsGet } from '@/lib/desktopHosts';

 const formatTime = (timestamp: number | null) => {
  if (!timestamp) return '-';
@@ -112,7 +113,6 @@ export const Header: React.FC = () => {
  const toggleBottomTerminal = useUIStore((state) => state.toggleBottomTerminal);
  const toggleRightSidebar = useUIStore((state) => state.toggleRightSidebar);
  const setSettingsDialogOpen = useUIStore((state) => state.setSettingsDialogOpen);
-  const toggleCommandPalette = useUIStore((state) => state.toggleCommandPalette);
  const activeMainTab = useUIStore((state) => state.activeMainTab);
  const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);

@@ -201,6 +201,7 @@ export const Header: React.FC = () => {
  const [isMobileRateLimitsOpen, setIsMobileRateLimitsOpen] = React.useState(false);
  const [isDesktopServicesOpen, setIsDesktopServicesOpen] = React.useState(false);
  const [isUsageRefreshSpinning, setIsUsageRefreshSpinning] = React.useState(false);
+  const [currentInstanceLabel, setCurrentInstanceLabel] = React.useState('Local');
  const [desktopServicesTab, setDesktopServicesTab] = React.useState<'instance' | 'usage' | 'mcp'>(
    isDesktopApp ? 'instance' : 'usage'
  );
@@ -209,6 +210,65 @@ export const Header: React.FC = () => {
      setDesktopServicesTab('usage');
    }
  }, [desktopServicesTab, isDesktopApp]);
+
+  const refreshCurrentInstanceLabel = React.useCallback(async () => {
+    if (typeof window === 'undefined' || !isDesktopApp) {
+      return;
+    }
+
+    const normalizeHostUrl = (raw: string): string | null => {
+      const trimmed = raw.trim();
+      if (!trimmed) return null;
+      try {
+        const url = new URL(trimmed);
+        if (url.protocol !== 'http:' && url.protocol !== 'https:') {
+          return null;
+        }
+        return url.origin;
+      } catch {
+        try {
+          const url = new URL(trimmed.endsWith('/') ? trimmed : `${trimmed}/`);
+          if (url.protocol !== 'http:' && url.protocol !== 'https:') {
+            return null;
+          }
+          return url.origin;
+        } catch {
+          return null;
+        }
+      }
+    };
+
+    try {
+      const cfg = await desktopHostsGet();
+      const currentOrigin = window.location.origin;
+      const localOrigin = window.__OPENCHAMBER_LOCAL_ORIGIN__ || currentOrigin;
+      const normalizedCurrent = normalizeHostUrl(currentOrigin) || currentOrigin;
+      const normalizedLocal = normalizeHostUrl(localOrigin) || localOrigin;
+
+      if (normalizedCurrent && normalizedLocal && normalizedCurrent === normalizedLocal) {
+        setCurrentInstanceLabel('Local');
+        return;
+      }
+
+      const match = cfg.hosts.find((host) => {
+        const normalized = normalizeHostUrl(host.url);
+        return normalized && normalized === normalizedCurrent;
+      });
+
+      if (match?.label?.trim()) {
+        setCurrentInstanceLabel(match.label.trim());
+        return;
+      }
+
+      setCurrentInstanceLabel('Instance');
+    } catch {
+      setCurrentInstanceLabel('Local');
+    }
+  }, [isDesktopApp]);
+
+  useEffect(() => {
+    void refreshCurrentInstanceLabel();
+  }, [refreshCurrentInstanceLabel]);
  useQuotaAutoRefresh();
  const selectedModels = useQuotaStore((state) => state.selectedModels);
  const expandedFamilies = useQuotaStore((state) => state.expandedFamilies);
@@ -809,8 +869,11 @@ export const Header: React.FC = () => {
            open={isDesktopServicesOpen}
            onOpenChange={(open) => {
              setIsDesktopServicesOpen(open);
-              if (open && desktopServicesTab === 'usage' && quotaResults.length === 0) {
-                fetchAllQuotas();
+              if (open) {
+                void refreshCurrentInstanceLabel();
+                if (desktopServicesTab === 'usage' && quotaResults.length === 0) {
+                  fetchAllQuotas();
+                }
              }
            }}
          >
@@ -819,15 +882,19 @@ export const Header: React.FC = () => {
                <DropdownMenuTrigger asChild>
                  <button
                    type="button"
-                    aria-label="Open instance, usage and MCP"
-                    className={headerIconButtonClass}
+                    aria-label={`Open instance, usage and MCP (current: ${currentInstanceLabel})`}
+                    className={cn(
+                      headerIconButtonClass,
+                      'w-auto max-w-[14rem] justify-start gap-1.5 px-2.5'
+                    )}
                  >
                    <RiStackLine className="h-5 w-5" />
+                    <span className="truncate text-base font-normal">{currentInstanceLabel}</span>
                  </button>
                </DropdownMenuTrigger>
              </TooltipTrigger>
              <TooltipContent>
-                <p>Instance / Usage / MCP</p>
+                <p>Current instance: {currentInstanceLabel}</p>
              </TooltipContent>
            </Tooltip>
            <DropdownMenuContent
@@ -1045,22 +1112,6 @@ export const Header: React.FC = () => {
              )}
            </DropdownMenuContent>
          </DropdownMenu>
-        <Tooltip delayDuration={500}>
-          <TooltipTrigger asChild>
-            <button
-              type="button"
-              onClick={toggleCommandPalette}
-              aria-label="Open command palette"
-              className={headerIconButtonClass}
-            >
-              <RiCommandLine className="h-5 w-5" />
-            </button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Command Palette ({getModifierLabel()}+K)</p>
-          </TooltipContent>
-        </Tooltip>
-
        <Tooltip delayDuration={500}>
          <TooltipTrigger asChild>
            <button
@@ -1,11 +1,10 @@
 import React from 'react';
-import { RiDiscordFill, RiDownloadLine, RiGithubFill, RiLoaderLine, RiRestartLine, RiTwitterXFill } from '@remixicon/react';
+import { RiDiscordFill, RiDownloadLine, RiGithubFill, RiLoaderLine, RiTwitterXFill } from '@remixicon/react';
 import { useUpdateStore } from '@/stores/useUpdateStore';
 import { UpdateDialog } from '@/components/ui/UpdateDialog';
 import { useDeviceInfo } from '@/lib/device';
 import { toast } from '@/components/ui';
 import { cn } from '@/lib/utils';
-import { reloadOpenCodeConfiguration } from '@/stores/useAgentsStore';

 const GITHUB_URL = 'https://github.com/btriapitsyn/openchamber';

@@ -46,15 +45,6 @@ export const AboutSettings: React.FC = () => {
  if (isMobile) {
    return (
      <div className="w-full space-y-2">
-        {/* Reload OpenCode Configuration */}
-        <button
-          onClick={() => reloadOpenCodeConfiguration()}
-          className="flex items-center gap-1.5 typography-meta text-muted-foreground hover:text-foreground transition-colors"
-        >
-          <RiRestartLine className="h-3.5 w-3.5" />
-          <span>Reload OpenCode Configuration</span>
-        </button>
-
        {/* Version row with update status */}
        <div className="flex items-center justify-between">
          <span className="typography-meta text-muted-foreground">
@@ -1,8 +1,11 @@
 import React from 'react';
+import { RiRestartLine } from '@remixicon/react';
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useDeviceInfo } from '@/lib/device';
 import { isVSCodeRuntime, isWebRuntime } from '@/lib/desktop';
 import { AboutSettings } from './AboutSettings';
+import { reloadOpenCodeConfiguration } from '@/stores/useAgentsStore';
 import { cn } from '@/lib/utils';

 export type OpenChamberSection = 'visual' | 'chat' | 'sessions' | 'git' | 'github' | 'notifications' | 'voice';
@@ -68,9 +71,20 @@ export const OpenChamberSidebar: React.FC<OpenChamberSidebarProps> = ({
 }) => {
  const { isMobile } = useDeviceInfo();
  const showAbout = isMobile && isWebRuntime();
+  const [isReloadingConfig, setIsReloadingConfig] = React.useState(false);

  const isVSCode = React.useMemo(() => isVSCodeRuntime(), []);
  const isWeb = React.useMemo(() => isWebRuntime(), []);
+  const showReload = !isVSCode;
+
+  const handleReloadConfiguration = React.useCallback(async () => {
+    setIsReloadingConfig(true);
+    try {
+      await reloadOpenCodeConfiguration({ message: 'Restarting OpenCode…', mode: 'projects', scopes: ['all'] });
+    } finally {
+      setIsReloadingConfig(false);
+    }
+  }, []);

  const visibleSections = React.useMemo(() => {
    return OPENCHAMBER_SECTION_GROUPS.filter((group) => {
@@ -86,45 +100,105 @@ export const OpenChamberSidebar: React.FC<OpenChamberSidebarProps> = ({
  const bgClass = isVSCode ? 'bg-background' : 'bg-sidebar';

  return (
-    <div className={cn('flex h-full flex-col', bgClass)}>
-      <ScrollableOverlay outerClassName="flex-1 min-h-0" className="space-y-1 px-3 py-2 overflow-x-hidden">
-        {visibleSections.map((group) => {
-          const isSelected = selectedSection === group.id;
-          return (
-            <div
-              key={group.id}
-              className={cn(
-                'group relative rounded-md px-1.5 py-1 transition-all duration-200',
-                isSelected ? 'bg-interactive-selection' : 'hover:bg-interactive-hover'
-              )}
-            >
-              <button
-                onClick={() => onSelectSection(group.id)}
-                className="w-full text-left flex flex-col gap-0 rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+    <div className={cn('grid h-full min-h-0 grid-rows-[minmax(0,1fr)_auto]', bgClass)}>
+      <div className="min-h-0">
+        <ScrollableOverlay outerClassName="h-full" className="space-y-1 px-3 py-2 overflow-x-hidden">
+          {visibleSections.map((group) => {
+            const isSelected = selectedSection === group.id;
+            return (
+              <div
+                key={group.id}
+                className={cn(
+                  'group relative rounded-md px-1.5 py-1 transition-all duration-200',
+                  isSelected ? 'bg-interactive-selection' : 'hover:bg-interactive-hover'
+                )}
              >
-                <div className="flex items-center gap-2">
-                  <span className="typography-ui-label font-normal text-foreground">
-                    {group.label}
-                  </span>
-                  {group.badge && (
-                    <span className="text-[10px] leading-none uppercase font-bold tracking-tight bg-[var(--status-warning-background)] text-[var(--status-warning)] border border-[var(--status-warning-border)] px-1.5 py-0.5 rounded">
-                      {group.badge}
+                <button
+                  onClick={() => onSelectSection(group.id)}
+                  className="w-full text-left flex flex-col gap-0 rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+                >
+                  <div className="flex items-center gap-2">
+                    <span className="typography-ui-label font-normal text-foreground">
+                      {group.label}
                    </span>
-                  )}
-                </div>
-                <div className="typography-micro text-muted-foreground/60 leading-tight">
-                  {group.items.join(' · ')}
-                </div>
-              </button>
-            </div>
-          );
-        })}
-      </ScrollableOverlay>
+                    {group.badge && (
+                      <span className="text-[10px] leading-none uppercase font-bold tracking-tight bg-[var(--status-warning-background)] text-[var(--status-warning)] border border-[var(--status-warning-border)] px-1.5 py-0.5 rounded">
+                        {group.badge}
+                      </span>
+                    )}
+                  </div>
+                  <div className="typography-micro text-muted-foreground/60 leading-tight">
+                    {group.items.join(' · ')}
+                  </div>
+                </button>
+              </div>
+            );
+          })}
+        </ScrollableOverlay>
+      </div>

-      {/* Mobile footer: About section */}
-      {showAbout && (
-        <div className="border-t px-3 py-4">
-          <AboutSettings />
+      {(showReload || showAbout) && (
+        <div className={cn(
+          'border-t border-border bg-sidebar',
+          showAbout ? 'px-3 py-3 space-y-3' : 'flex-shrink-0 h-12 px-2'
+        )}>
+          {showAbout ? (
+            <>
+              {showReload && (
+                <Tooltip delayDuration={300}>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      className={cn(
+                        'flex h-8 w-full items-center gap-2 rounded-md px-2',
+                        'text-sm font-semibold text-sidebar-foreground/90',
+                        'hover:text-sidebar-foreground hover:bg-interactive-hover',
+                        'transition-all duration-200',
+                        'disabled:pointer-events-none disabled:opacity-50'
+                      )}
+                      onClick={() => void handleReloadConfiguration()}
+                      disabled={isReloadingConfig}
+                    >
+                      <RiRestartLine className="h-4 w-4" />
+                      {isReloadingConfig ? 'Reloading OpenCode…' : 'Reload OpenCode'}
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    Restart OpenCode and reload its configuration (agents, commands, skills, providers).
+                  </TooltipContent>
+                </Tooltip>
+              )}
+              <AboutSettings />
+            </>
+          ) : (
+            <div className="flex h-full items-center justify-between gap-2">
+              {showReload && (
+                <Tooltip delayDuration={300}>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      className={cn(
+                        'flex h-8 items-center gap-2 rounded-md px-2',
+                        'text-sm font-semibold text-sidebar-foreground/90',
+                        'hover:text-sidebar-foreground hover:bg-interactive-hover',
+                        'transition-all duration-200',
+                        'disabled:pointer-events-none disabled:opacity-50'
+                      )}
+                      onClick={() => void handleReloadConfiguration()}
+                      disabled={isReloadingConfig}
+                    >
+                      <RiRestartLine className="h-4 w-4" />
+                      {isReloadingConfig ? 'Reloading OpenCode…' : 'Reload OpenCode'}
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    Restart OpenCode and reload its configuration (agents, commands, skills, providers).
+                  </TooltipContent>
+                </Tooltip>
+              )}
+              <div />
+            </div>
+          )}
        </div>
      )}

@@ -15,8 +15,7 @@ import { useDirectoryStore } from '@/stores/useDirectoryStore';
 import { useConfigStore } from '@/stores/useConfigStore';
 import { useThemeSystem } from '@/contexts/useThemeSystem';
 import { useDeviceInfo } from '@/lib/device';
-import { RiAddLine, RiChatAi3Line, RiCheckLine, RiCodeLine, RiComputerLine, RiGitBranchLine, RiLayoutLeftLine, RiMoonLine, RiQuestionLine, RiRestartLine, RiSettings3Line, RiSunLine, RiTerminalBoxLine, RiTimeLine } from '@remixicon/react';
-import { reloadOpenCodeConfiguration } from '@/stores/useAgentsStore';
+import { RiAddLine, RiChatAi3Line, RiCheckLine, RiCodeLine, RiComputerLine, RiGitBranchLine, RiLayoutLeftLine, RiMoonLine, RiQuestionLine, RiSettings3Line, RiSunLine, RiTerminalBoxLine, RiTimeLine } from '@remixicon/react';
 import { getModifierLabel } from '@/lib/utils';
 import { createWorktreeSession } from '@/lib/worktreeSessionCreator';

@@ -106,11 +105,6 @@ export const CommandPalette: React.FC = () => {
    handleClose();
  };

-  const handleReloadConfiguration = () => {
-    reloadOpenCodeConfiguration();
-    handleClose();
-  };
-
  const handleOpenTimeline = () => {
    setTimelineDialogOpen(true);
    handleClose();
@@ -177,10 +171,6 @@ export const CommandPalette: React.FC = () => {
            <span>Open Settings</span>
            <CommandShortcut>{getModifierLabel()} + ,</CommandShortcut>
          </CommandItem>
-          <CommandItem onSelect={handleReloadConfiguration}>
-            <RiRestartLine className="mr-2 h-4 w-4" />
-            <span>Reload OpenCode Configuration</span>
-          </CommandItem>
        </CommandGroup>

        <CommandSeparator />
@@ -17,13 +17,11 @@ import {
  RiCloseCircleLine,
  RiCodeLine,
  RiCommandLine,
-  RiFolder6Line,
  RiGitBranchLine,
  RiLayoutLeftLine,
  RiPaletteLine,
  RiQuestionLine,
  RiSettings3Line,
-  RiTerminalBoxLine,
  RiText,
  RiTimeLine,
  RiWindowLine,
@@ -166,21 +164,6 @@ export const HelpDialog: React.FC = () => {
          description: "Open Diff Panel",
          icon: RiCodeLine,
        },
-        {
-          keys: [`${mod} + 3`],
-          description: "Open Files",
-          icon: RiFolder6Line,
-        },
-        {
-          keys: [`${mod} + 4`],
-          description: "Open Terminal",
-          icon: RiTerminalBoxLine,
-        },
-        {
-          keys: [`${mod} + 5`],
-          description: "Open Git Panel",
-          icon: RiGitBranchLine,
-        },
        {
          keys: [`${mod} + T`],
          description: "Open Timeline",
@@ -290,13 +290,15 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
    switch (activeTab) {
      case 'settings':
        return (
-          <OpenChamberSidebar
-            selectedSection={selectedOpenChamberSection}
-            onSelectSection={(section) => {
-              setSelectedOpenChamberSection(section);
-              handleMobileSidebarClick();
-            }}
-          />
+          <div className="h-full">
+            <OpenChamberSidebar
+              selectedSection={selectedOpenChamberSection}
+              onSelectSection={(section) => {
+                setSelectedOpenChamberSection(section);
+                handleMobileSidebarClick();
+              }}
+            />
+          </div>
        );
      case 'agents':
        return <AgentsSidebar onItemSelect={handleMobileSidebarClick} />;
@@ -354,7 +356,7 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile


  return (
-    <div ref={containerRef} className={cn('flex h-full flex-col overflow-hidden bg-background')}>
+    <div ref={containerRef} data-settings-view="true" className={cn('flex h-full flex-col overflow-hidden bg-background')}>
      {/* Header with tabs and close button */}
      <div
        onMouseDown={!isMobile ? handleDragStart : undefined}
@@ -521,7 +523,9 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
            </div>
          ) : (
            <div className={cn('flex-1 overflow-hidden', isVSCode ? 'bg-background' : 'bg-sidebar')}>
-              <ErrorBoundary>{renderSidebarContent()}</ErrorBoundary>
+              <div className="flex h-full min-h-0 flex-col">
+                <ErrorBoundary>{renderSidebarContent()}</ErrorBoundary>
+              </div>
            </div>
          )
        ) : (
@@ -530,7 +534,7 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
            {hasSidebar && (
              <div
                className={cn(
-                  'relative overflow-hidden border-r',
+                  'relative flex h-full min-h-0 flex-col overflow-hidden border-r',
                  isDesktopApp
                    ? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
                    : isVSCode
@@ -555,7 +559,9 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
                  aria-orientation="vertical"
                  aria-label="Resize settings sidebar"
                />
-                <ErrorBoundary>{renderSidebarContent()}</ErrorBoundary>
+                <div className="flex h-full min-h-0 flex-col">
+                  <ErrorBoundary>{renderSidebarContent()}</ErrorBoundary>
+                </div>
              </div>
            )}

@@ -192,6 +192,15 @@ export const useKeyboardShortcuts = () => {
      }

      if (e.key === 'Escape') {
+        const target = e.target as Element | null;
+        const isInsideDialog = Boolean(target?.closest('[role="dialog"]'));
+        const isSettingsMounted = Boolean(document.querySelector('[data-settings-view="true"]'));
+
+        if (isInsideDialog || isSettingsMounted) {
+          resetAbortPriming();
+          return;
+        }
+
        const {
          isSettingsDialogOpen,
          isCommandPaletteOpen,