- isElectron - ? "drag-region flex h-[var(--workspace-topbar-height)] min-h-[var(--workspace-topbar-height)] shrink-0 items-center" - : "flex h-[var(--workspace-topbar-height)] min-h-[var(--workspace-topbar-height)] shrink-0 items-center", - COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS, - )} - > {isElectron ? ( - + No active thread - No active thread - ) : (

@@ -28,7 +17,7 @@

)} -

``` ## apps/web/src/components/WorkspacePageHeader.tsx Status: added; +28; −0 ```diff @@ -1,0 +1,28 @@ +import type { ComponentPropsWithoutRef } from "react"; + +import { cn } from "../lib/utils"; +import { COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS } from "../workspaceTitlebar"; + +/** Shared workspace top-bar geometry. */ +export function WorkspacePageHeader({ + electron = false, + reserveNativeControls = electron, + className, + ...props +}: ComponentPropsWithoutRef<"header"> & { + readonly electron?: boolean; + readonly reserveNativeControls?: boolean; +}) { + return ( +

+ ); +} ``` ## apps/web/src/components/settings/DiagnosticsSettings.tsx Status: modified; +1; −1 ```diff @@ -992,7 +992,7 @@ : false; return ( - + +

- {!isElectron && ( -

- -

- )} - {isElectron && ( + + + -

- -

- )}

``` ## apps/web/src/components/settings/SettingsSidebarNav.tsx Status: modified; +5; −22 ```diff @@ -9,7 +9,6 @@ } from "react"; import { ArchiveIcon, - ArrowLeftIcon, BlocksIcon, BotIcon, GitBranchIcon, @@ -20,7 +19,7 @@ Settings2Icon, XIcon, } from "lucide-react"; -import { useCanGoBack, useLocation, useNavigate } from "@tanstack/react-router"; +import { useLocation, useNavigate } from "@tanstack/react-router"; import { Button } from "../ui/button"; import { Input } from "../ui/input"; @@ -35,6 +34,7 @@ useSidebar, } from "../ui/sidebar"; import { T3ConnectSidebarAvatar, T3ConnectSidebarSignIn } from "../clerk/T3ConnectSidebarSignIn"; +import { SidebarUtilityMenu } from "../sidebar/SidebarChrome"; import { scrollToSettingsTarget } from "./settingsLayout"; import { searchSettings, @@ -74,7 +74,6 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) { const navigate = useNavigate(); const currentHash = useLocation({ select: (location) => location.hash }); - const canGoBack = useCanGoBack(); const { isMobile, setOpenMobile, open, setOpen } = useSidebar(); const searchInputRef = useRef(null); const [query, setQuery] = useState(""); @@ -178,17 +177,6 @@ }, [activeResultIndex, clearSearch, handleSearchResultClick, isSearching, results], ); - const handleBackClick = useCallback(() => { - if (isMobile) { - setOpenMobile(false); - } - if (canGoBack) { - window.history.back(); - return; - } - void navigate({ to: "/" }); - }, [canGoBack, isMobile, navigate, setOpenMobile]); - return ( <> @@ -298,14 +286,9 @@

+ - +

- - - - Back - - -

``` ## apps/web/src/components/settings/settingsLayout.tsx Status: modified; +18; −2 ```diff @@ -15,6 +15,14 @@ import { Button } from "../ui/button"; import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip"; +type SettingsPageWidth = "readable" | "wide" | "expanded"; + +const SETTINGS_PAGE_WIDTH_CLASS: Record = { + readable: "max-w-4xl", + wide: "max-w-5xl", + expanded: "max-w-6xl", +}; + interface SettingsSearchTargetContextValue { readonly targetId: string | null; readonly onTargetHandled: () => void; @@ -233,9 +241,11 @@ export function SettingsPageContainer({ children, className, + width = "readable", }: { children: ReactNode; className?: string; + width?: SettingsPageWidth; }) { const navigate = useNavigate(); const hash = useLocation({ select: (location) => location.hash }); @@ -247,10 +257,16 @@ return (

+ className={cn( + "mx-auto flex w-full flex-col gap-12 px-5 pt-6 pb-12 sm:px-6", + SETTINGS_PAGE_WIDTH_CLASS[width], + className, + )} + > {children}

``` ## apps/web/src/components/sidebar/SidebarChrome.tsx Status: modified; +78; −68 ```diff @@ -4,8 +4,9 @@ GitPullRequestIcon, SettingsIcon, } from "lucide-react"; +import type { ReactNode } from "react"; import { memo, useCallback } from "react"; +import { Link, useCanGoBack, useLocation, useNavigate } from "@tanstack/react-router"; -import { Link, useLocation, useNavigate } from "@tanstack/react-router"; import { useEnvironmentIdentificationMode } from "../../hooks/useSettings"; import { cn } from "../../lib/utils"; @@ -117,16 +118,44 @@ ); } +function SidebarUtilityItem({ + icon, + label, + onClick, +}: { + icon: ReactNode; + label: string; + onClick: () => void; +}) { + return ( + + + + {icon} + + } + /> + {label} + -export const SidebarChromeFooter = memo(function SidebarChromeFooter() { + + ); +} + +export const SidebarUtilityMenu = memo(function SidebarUtilityMenu() { const navigate = useNavigate(); + const canGoBack = useCanGoBack(); const { isMobile, setOpenMobile } = useSidebar(); const currentFooterPage = useLocation({ select: (location) => + /^\/settings(?:\/|$)/.test(location.pathname) + ? "settings" + : location.pathname === "/usage" + ? "usage" + : location.pathname === "/pull-requests" + ? "pull-requests" - location.pathname === "/usage" + : null, - ? "usage" - : location.pathname === "/pull-requests" - ? "pull-requests" - : null, }); const { environments } = useEnvironments(); // The page reads every connected server, so one of them offering pull requests is enough for @@ -157,73 +186,54 @@ const handleBackClick = useCallback(() => { closeMobileSidebar(); + if (canGoBack) { + window.history.back(); + return; + } void navigate({ to: "/" }); + }, [canGoBack, closeMobileSidebar, navigate]); - }, [closeMobileSidebar, navigate]); return ( + + {currentFooterPage ? ( + + + + Back + + + ) : ( + <> + } + label="Settings" + onClick={handleSettingsClick} + /> + {pullRequestsSupported ? ( + } + label="Pull Requests" + onClick={handlePullRequestsClick} + /> + ) : null} + } + label="Usage" + onClick={handleUsageClick} + /> + + )} + + + ); +}); + +export const SidebarChromeFooter = memo(function SidebarChromeFooter() { + return ( + - - {currentFooterPage ? ( - - - - Back - - - ) : ( - <> - - - - - - } - /> - Settings - - - {pullRequestsSupported ? ( - - - - - - } - /> - Pull Requests - - - ) : null} - - - - - - } - /> - Usage - - - - )} - - ); }); ``` ## apps/web/src/routes/\-chatIndexTitlebar.test.ts Status: modified; +9; −3 ```diff @@ -15,9 +15,15 @@ const onboardingHeader = routeSource.slice(onboardingStart, onboardingEnd); - expect(onboardingHeader).toContain("h-[var(--workspace-topbar-height)]"); - expect(onboardingHeader).toContain("min-h-[var(--workspace-topbar-height)]"); - expect(onboardingHeader).toContain("COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS"); + expect(onboardingHeader).toContain("

{APP_DISPLAY_NAME}

+ -

``` ## apps/web/src/routes/settings.tsx Status: modified; +10; −36 ```diff @@ -13,9 +13,8 @@ import { SettingsBreadcrumb } from "../components/settings/SettingsBreadcrumb"; import { Button } from "../components/ui/button"; import { SidebarInset } from "../components/ui/sidebar"; +import { WorkspacePageHeader } from "../components/WorkspacePageHeader"; import { isElectron } from "../env"; -import { cn } from "~/lib/utils"; -import { COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS } from "~/workspaceTitlebar"; function RestoreDefaultsButton({ onRestored }: { onRestored: () => void }) { const { changedSettingLabels, restoreDefaults } = useSettingsRestore(onRestored); @@ -72,41 +71,16 @@ return (

- {!isElectron && ( -

- - {showRestoreDefaults ? ( -

- -

- ) : null} -

- )} - - {isElectron && ( -

- )} + + {showRestoreDefaults ? ( +

+ +

+ ) : null} - > -

- - {showRestoreDefaults ? ( -

- -

- ) : null} -

- )} +

```