move settings into app shell

ui/goose2/src/app/AppShell.tsx

@@ -5,8 +5,11 @@ import { Sidebar } from "@/features/sidebar/ui/Sidebar";
 import { CreateProjectDialog } from "@/features/projects/ui/CreateProjectDialog";
 import { archiveProject } from "@/features/projects/api/projects";
 import type { ProjectInfo } from "@/features/projects/api/projects";
-import { SettingsModal } from "@/features/settings/ui/SettingsModal";
-import type { SectionId } from "@/features/settings/ui/SettingsModal";
+import {
+  DEFAULT_SETTINGS_SECTION,
+  isSettingsSection,
+  type SectionId,
+} from "@/features/settings/ui/settingsSections";
 import { OPEN_SETTINGS_EVENT } from "@/features/settings/lib/settingsEvents";
 import { TopBar } from "./ui/TopBar";
 import { useChatStore } from "@/features/chat/stores/chatStore";
@@ -56,7 +59,8 @@ export type AppView =
   | "extensions"
   | "agents"
   | "projects"
-  | "session-history";
+  | "session-history"
+  | "settings";
 
 const SIDEBAR_OUTER_GUTTER_WIDTH = 12;
 const SIDEBAR_RESIZE_HANDLE_WIDTH = 12;
@@ -72,24 +76,38 @@ const COLLAPSED_WINDOW_MIN_WIDTH =
   SIDEBAR_COLLAPSED_WIDTH +
   APP_SHELL_HORIZONTAL_CHROME_WIDTH +
   MIN_MAIN_CONTENT_WIDTH;
-const SETTINGS_SECTIONS = new Set<SectionId>([
-  "appearance",
-  "providers",
-  "compaction",
-  "voice",
-  "general",
-  "projects",
-  "chats",
-  "doctor",
-  "about",
-]);
-
 function getExpandedSidebarFitWidth(sidebarWidth: number) {
   return (
     sidebarWidth + APP_SHELL_HORIZONTAL_CHROME_WIDTH + MIN_MAIN_CONTENT_WIDTH
   );
 }
 
+function getInitialSettingsSection(): SectionId | null {
+  if (typeof window === "undefined") return null;
+  if (window.location.pathname !== "/settings") return null;
+  const section = new URLSearchParams(window.location.search).get("section");
+  if (!section) return DEFAULT_SETTINGS_SECTION;
+  return isSettingsSection(section) ? section : DEFAULT_SETTINGS_SECTION;
+}
+
+function setSettingsSectionUrl(section: SectionId) {
+  if (typeof window === "undefined") return;
+  const url = new URL(window.location.href);
+  url.pathname = "/settings";
+  url.searchParams.set("section", section);
+  window.history.replaceState(window.history.state, "", url);
+}
+
+function clearSettingsSectionUrl() {
+  if (typeof window === "undefined") return;
+  const url = new URL(window.location.href);
+  if (url.pathname === "/settings") {
+    url.pathname = "/";
+  }
+  url.searchParams.delete("section");
+  window.history.replaceState(window.history.state, "", url);
+}
+
 async function ensureWindowWidth(minWidth: number) {
   if (!window.__TAURI_INTERNALS__ || window.innerWidth >= minWidth) {
     return;
@@ -121,16 +139,19 @@ export function AppShell({ children }: { children?: React.ReactNode }) {
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const [sidebarWidth, setSidebarWidth] = useState(SIDEBAR_DEFAULT_WIDTH);
   const [isResizing, setIsResizing] = useState(false);
-  const [settingsOpen, setSettingsOpen] = useState(false);
-  const [settingsInitialSection, setSettingsInitialSection] =
-    useState<SectionId>("appearance");
+  const initialSettingsSection = getInitialSettingsSection();
+  const [activeSettingsSection, setActiveSettingsSection] = useState<SectionId>(
+    initialSettingsSection ?? DEFAULT_SETTINGS_SECTION,
+  );
   const [createProjectOpen, setCreateProjectOpen] = useState(false);
   const [createProjectInitialWorkingDir, setCreateProjectInitialWorkingDir] =
     useState<string | null>(null);
   const [editingProject, setEditingProject] = useState<ProjectInfo | null>(
     null,
   );
-  const [activeView, setActiveView] = useState<AppView>("home");
+  const [activeView, setActiveView] = useState<AppView>(
+    initialSettingsSection ? "settings" : "home",
+  );
   const [homeSessionId, setHomeSessionId] = useState<string | null>(() =>
     loadStoredHomeSessionId(),
   );
@@ -156,6 +177,7 @@ export function AppShell({ children }: { children?: React.ReactNode }) {
   const pendingProjectCreatedRef = useRef<((projectId: string) => void) | null>(
     null,
   );
+  const lastNonSettingsViewRef = useRef<AppView>("home");
   const homeSessionRequestRef = useRef<Promise<ChatSession | null> | null>(
     null,
   );
@@ -214,6 +236,12 @@ export function AppShell({ children }: { children?: React.ReactNode }) {
     }
   }, [activeSessionId, activeView]);
 
+  useEffect(() => {
+    if (activeView !== "settings") {
+      lastNonSettingsViewRef.current = activeView;
+    }
+  }, [activeView]);
+
   const activeSession = activeSessionId
     ? sessions.find((session) => session.id === activeSessionId)
     : undefined;
@@ -396,6 +424,7 @@ export function AppShell({ children }: { children?: React.ReactNode }) {
 
       if (existingDraft) {
         setActiveSession(existingDraft.id);
+        clearSettingsSectionUrl();
         setActiveView("chat");
         setChatActiveSession(existingDraft.id);
         perfLog(
@@ -414,6 +443,7 @@ export function AppShell({ children }: { children?: React.ReactNode }) {
         modelName: sessionModelPreference.modelName,
       });
       setActiveSession(session.id);
+      clearSettingsSectionUrl();
       setActiveView("chat");
       setChatActiveSession(session.id);
       perfLog(
@@ -482,21 +512,55 @@ export function AppShell({ children }: { children?: React.ReactNode }) {
     (sessionId: string) => {
       cleanupChatSession(sessionId);
       setActiveSession(null);
+      clearSettingsSectionUrl();
       setActiveView("home");
     },
     [cleanupChatSession, setActiveSession],
   );
-  const openSettings = useCallback((section: SectionId = "appearance") => {
-    setSettingsInitialSection(section);
-    setSettingsOpen(true);
+
+  const expandSidebar = useCallback(async () => {
+    const expandedFitWidth = getExpandedSidebarFitWidth(sidebarWidth);
+
+    try {
+      await ensureWindowWidth(expandedFitWidth);
+    } catch (error) {
+      console.warn("Failed to resize window before expanding sidebar:", error);
+    }
+
+    setSidebarCollapsed(false);
+  }, [sidebarWidth]);
+
+  const openSettings = useCallback(
+    (section: SectionId = DEFAULT_SETTINGS_SECTION) => {
+      if (activeView !== "settings") {
+        lastNonSettingsViewRef.current = activeView;
+      }
+      setActiveSettingsSection(section);
+      setSettingsSectionUrl(section);
+      setActiveView("settings");
+      if (sidebarCollapsed) {
+        void expandSidebar();
+      }
+    },
+    [activeView, expandSidebar, sidebarCollapsed],
+  );
+
+  const leaveSettings = useCallback(() => {
+    clearSettingsSectionUrl();
+    setActiveView(lastNonSettingsViewRef.current);
+  }, []);
+
+  const selectSettingsSection = useCallback((section: SectionId) => {
+    setActiveSettingsSection(section);
+    setSettingsSectionUrl(section);
   }, []);
 
   useEffect(() => {
     const handleOpenSettingsEvent = (event: Event) => {
       const section = (event as CustomEvent<{ section?: string }>).detail
         ?.section;
-      if (section && SETTINGS_SECTIONS.has(section as SectionId)) {
-        openSettings(section as SectionId);
+      if (section && isSettingsSection(section)) {
+        openSettings(section);
         return;
       }
 
@@ -614,6 +678,7 @@ export function AppShell({ children }: { children?: React.ReactNode }) {
         setHomeSessionId(null);
       }
       setActiveSession(sessionId);
+      clearSettingsSectionUrl();
       setActiveView("chat");
       setChatActiveSession(sessionId);
       useChatStore.getState().markSessionRead(sessionId);
@@ -624,6 +689,7 @@ export function AppShell({ children }: { children?: React.ReactNode }) {
   const handleSelectSession = useCallback(
     (id: string) => {
       setActiveSession(id);
+      clearSettingsSectionUrl();
       setActiveView("chat");
       setChatActiveSession(id);
       useChatStore.getState().markSessionRead(id);
@@ -646,12 +712,17 @@ export function AppShell({ children }: { children?: React.ReactNode }) {
 
   const handleNavigate = useCallback(
     (view: AppView) => {
+      if (view === "settings") {
+        openSettings();
+        return;
+      }
       if (view !== "chat") {
         setActiveSession(null);
       }
+      clearSettingsSectionUrl();
       setActiveView(view);
     },
-    [setActiveSession],
+    [openSettings, setActiveSession],
   );
 
   const handleCreatePersona = useCreatePersonaNavigation(() =>
@@ -662,18 +733,6 @@ export function AppShell({ children }: { children?: React.ReactNode }) {
     setSidebarCollapsed(true);
   }, []);
 
-  const expandSidebar = useCallback(async () => {
-    const expandedFitWidth = getExpandedSidebarFitWidth(sidebarWidth);
-
-    try {
-      await ensureWindowWidth(expandedFitWidth);
-    } catch (error) {
-      console.warn("Failed to resize window before expanding sidebar:", error);
-    }
-
-    setSidebarCollapsed(false);
-  }, [sidebarWidth]);
-
   const toggleSidebar = useCallback(() => {
     if (sidebarCollapsed) {
       void expandSidebar();
@@ -766,7 +825,11 @@ export function AppShell({ children }: { children?: React.ReactNode }) {
       // Cmd+, for settings
       if (e.key === "," && e.metaKey) {
         e.preventDefault();
-        setSettingsOpen((prev) => !prev);
+        if (activeView === "settings") {
+          leaveSettings();
+          return;
+        }
+        openSettings();
       }
       // Cmd+B for sidebar toggle
       if (e.key === "b" && e.metaKey) {
@@ -776,6 +839,10 @@ export function AppShell({ children }: { children?: React.ReactNode }) {
       // Cmd+W returns to home instead of closing the window
       if (e.key === "w" && e.metaKey) {
         e.preventDefault();
+        if (activeView === "settings") {
+          leaveSettings();
+          return;
+        }
         const { activeSessionId } = useChatSessionStore.getState();
         if (activeSessionId) {
           clearActiveSession(activeSessionId);
@@ -785,12 +852,20 @@ export function AppShell({ children }: { children?: React.ReactNode }) {
       if (e.key === "n" && e.metaKey) {
         e.preventDefault();
         setActiveSession(null);
+        clearSettingsSectionUrl();
         setActiveView("home");
       }
     };
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [clearActiveSession, setActiveSession, toggleSidebar]);
+  }, [
+    activeView,
+    clearActiveSession,
+    leaveSettings,
+    openSettings,
+    setActiveSession,
+    toggleSidebar,
+  ]);
 
   if (!startup.ready) {
     return (
@@ -832,10 +907,13 @@ export function AppShell({ children }: { children?: React.ReactNode }) {
             isResizing={isResizing}
             onCollapse={toggleSidebar}
             onSettingsClick={() => openSettings()}
+            onSettingsBack={leaveSettings}
+            onSettingsSectionChange={selectSettingsSection}
             onNavigate={handleNavigate}
             onNewChatInProject={handleNewChatInProject}
             onNewChat={() => {
               setActiveSession(null);
+              clearSettingsSectionUrl();
               setActiveView("home");
             }}
             onCreateProject={() => openCreateProjectDialog()}
@@ -848,6 +926,7 @@ export function AppShell({ children }: { children?: React.ReactNode }) {
             onSelectSession={handleSelectSession}
             onSelectSearchResult={handleSelectSearchResult}
             activeView={activeView}
+            activeSettingsSection={activeSettingsSection}
             activeSessionId={activeSessionId}
             projects={projects}
             className="h-full rounded-xl"
@@ -868,6 +947,7 @@ export function AppShell({ children }: { children?: React.ReactNode }) {
           {children ?? (
             <AppShellContent
               activeView={activeView}
+              activeSettingsSection={activeSettingsSection}
               activeSession={activeSession}
               homeSessionId={homeSessionId}
               onCreatePersona={handleCreatePersona}
@@ -884,13 +964,6 @@ export function AppShell({ children }: { children?: React.ReactNode }) {
         </main>
       </div>
 
-      {settingsOpen && (
-        <SettingsModal
-          initialSection={settingsInitialSection}
-          onClose={() => setSettingsOpen(false)}
-        />
-      )}
-
       <CreateProjectDialog
         isOpen={createProjectOpen}
         onClose={() => {

ui/goose2/src/app/ui/AppShellContent.tsx

@@ -5,13 +5,16 @@ import { ExtensionsView } from "@/features/extensions/ui/ExtensionsView";
 import { AgentsView } from "@/features/agents/ui/AgentsView";
 import { ProjectsView } from "@/features/projects/ui/ProjectsView";
 import { SessionHistoryView } from "@/features/sessions/ui/SessionHistoryView";
+import { SettingsView } from "@/features/settings/ui/SettingsView";
 import type { ChatSession } from "@/features/chat/stores/chatSessionStore";
 import type { SkillInfo } from "@/features/skills/api/skills";
 import type { ProjectInfo } from "@/features/projects/api/projects";
 import type { AppView } from "../AppShell";
+import type { SectionId } from "@/features/settings/ui/settingsSections";
 
 interface AppShellContentProps {
   activeView: AppView;
+  activeSettingsSection: SectionId;
   activeSession?: ChatSession;
   homeSessionId: string | null;
   onCreatePersona: () => void;
@@ -34,6 +37,7 @@ interface AppShellContentProps {
 
 export function AppShellContent({
   activeView,
+  activeSettingsSection,
   activeSession,
   homeSessionId,
   onCreatePersona,
@@ -47,6 +51,8 @@ export function AppShellContent({
   onStartChatWithSkill,
 }: AppShellContentProps) {
   switch (activeView) {
+    case "settings":
+      return <SettingsView activeSection={activeSettingsSection} />;
     case "skills":
       return <SkillsView onStartChatWithSkill={onStartChatWithSkill} />;
     case "extensions":

ui/goose2/src/features/chat/ui/ChatInputToolbar.tsx

@@ -195,7 +195,7 @@ export function ChatInputToolbar({
 
   const handleOpenAutoCompactSettings = () => {
     setIsContextPopoverOpen(false);
-    requestOpenSettings("compaction");
+    requestOpenSettings("general");
   };
 
   useEffect(() => {

ui/goose2/src/features/chat/ui/__tests__/ChatInput.test.tsx

@@ -335,7 +335,7 @@ describe("ChatInput", () => {
     expect(dispatchEventSpy).toHaveBeenCalledWith(
       expect.objectContaining({
         type: OPEN_SETTINGS_EVENT,
-        detail: { section: "compaction" },
+        detail: { section: "general" },
       }),
     );