Keep app chrome visible in settings

Generated-By: PostHog Code
Task-Id: 5579dbc2-d5dd-440f-8fb5-3cbd00ed0957

Author: puemos

packages/ui/src/features/settings/components/SettingsPanel.tsx

@@ -15,28 +15,23 @@ import {
   Palette,
   Plugs,
   Robot,
-  SignOut,
   SlackLogo,
   Terminal,
   TrafficSignal,
   TreeStructure,
   Wrench,
 } from "@phosphor-icons/react";
 import { BILLING_FLAG } from "@posthog/shared";
-import { useOptionalAuthenticatedClient } from "@posthog/ui/features/auth/authClient";
-import { useAuthStateValue } from "@posthog/ui/features/auth/store";
-import { useLogoutMutation } from "@posthog/ui/features/auth/useAuthMutations";
-import { useCurrentUser } from "@posthog/ui/features/auth/useCurrentUser";
-import { getUserInitials } from "@posthog/ui/features/auth/userInitials";
 import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag";
 import { SettingsPageContent } from "@posthog/ui/features/settings/components/SettingsPageContent";
 import { closeSettings } from "@posthog/ui/features/settings/hooks/useOpenSettings";
 import { useSettingsPageStore } from "@posthog/ui/features/settings/stores/settingsPageStore";
 import type { SettingsCategory } from "@posthog/ui/features/settings/types";
+import { ProjectSwitcher } from "@posthog/ui/features/sidebar/components/ProjectSwitcher";
 import { useSpendAnalysisEnabled } from "@posthog/ui/features/usage/useSpendAnalysisEnabled";
 import * as nav from "@posthog/ui/router/navigationBridge";
 import { useHostCapabilities } from "@posthog/ui/shell/useHostCapabilities";
-import { Avatar, Flex, ScrollArea, Text } from "@radix-ui/themes";
+import { Box, ScrollArea, Text } from "@radix-ui/themes";
 import type { ReactNode } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 
@@ -170,27 +165,24 @@ export interface SettingsPanelProps {
   onClose?: () => void;
   /** Override the category-change handler. Defaults to router navigation. */
   onCategoryChange?: (category: SettingsCategory) => void;
+  /** Whether to show the settings navigation sidebar. */
+  sidebarOpen?: boolean;
 }
 
 export function SettingsPanel({
   activeCategory: activeCategoryProp,
   onClose,
   onCategoryChange,
+  sidebarOpen = true,
 }: SettingsPanelProps = {}) {
   const formMode = useSettingsPageStore((s) => s.formMode);
   const activeCategory = activeCategoryProp ?? "general";
   const close = onClose ?? closeSettings;
   const setCategory =
     onCategoryChange ??
     ((cat: SettingsCategory) => nav.navigateToSettings(cat, { replace: true }));
-  const isAuthenticated = useAuthStateValue(
-    (state) => state.status === "authenticated",
-  );
-  const client = useOptionalAuthenticatedClient();
-  const { data: user } = useCurrentUser({ client });
   const billingEnabled = useFeatureFlag(BILLING_FLAG);
   const { localWorkspaces } = useHostCapabilities();
-  const logoutMutation = useLogoutMutation();
 
   const spendAnalysisEnabled = useSpendAnalysisEnabled();
   const hiddenCategories = getHiddenSettingsCategories({
@@ -226,83 +218,52 @@ export function SettingsPanel({
     (item) => item.id === activeSidebarCategory,
   )?.icon;
 
-  const initials = getUserInitials(user);
-
   return (
     <div
       className="flex h-full w-full bg-(--color-background)"
       data-page="settings"
     >
-      <div className="flex h-full w-[256px] shrink-0 flex-col border-gray-6 border-r">
-        <div className="drag h-[36px] shrink-0 border-b border-b-(--gray-6)" />
-
-        {isAuthenticated && user && (
-          <Flex
-            align="center"
-            gap="3"
-            px="3"
-            py="3"
-            className="border-b border-b-(--gray-5)"
-          >
-            <Avatar size="2" fallback={initials} radius="full" color="amber" />
-            <Flex direction="column" className="min-w-0">
-              <Text truncate className="font-medium text-sm">
-                {user.email}
-              </Text>
-            </Flex>
-          </Flex>
-        )}
-
-        <button
-          type="button"
-          className="mt-2 flex cursor-pointer items-center gap-2 border-0 bg-transparent px-3 py-2 text-left text-[13px] text-gray-11 transition-colors hover:bg-gray-3"
-          onClick={close}
-        >
-          <ArrowLeft size={14} />
-          <span>Back to app</span>
-        </button>
-
-        <ScrollArea className="flex-1">
-          <div className="flex flex-col gap-3 py-2">
-            {sidebarGroups.map((group) => (
-              <div key={group.label}>
-                <Text className="px-3 pb-1 font-medium text-[10px] text-gray-9 uppercase tracking-wider">
-                  {group.label}
-                </Text>
-                {group.items.map((item) => {
-                  const isActive = activeSidebarCategory === item.id;
-                  return (
-                    <SidebarNavItem
-                      key={item.id}
-                      item={item}
-                      isActive={isActive}
-                      onClick={() => setCategory(item.id)}
-                    />
-                  );
-                })}
-              </div>
-            ))}
-          </div>
-        </ScrollArea>
-
-        {isAuthenticated && (
+      {sidebarOpen && (
+        <div className="flex h-full w-[256px] shrink-0 flex-col border-gray-6 border-r">
           <button
             type="button"
-            disabled={logoutMutation.isPending}
-            className="flex cursor-pointer items-center gap-2 border-0 border-gray-5 border-t bg-transparent px-3 py-2.5 text-left font-mono text-[12px] text-gray-9 transition-colors hover:bg-gray-3 hover:text-gray-11 disabled:pointer-events-none disabled:opacity-50"
-            onClick={() => {
-              close();
-              logoutMutation.mutate();
-            }}
+            className="mt-2 flex cursor-pointer items-center gap-2 border-0 bg-transparent px-3 py-2 text-left text-[13px] text-gray-11 transition-colors hover:bg-gray-3"
+            onClick={close}
           >
-            <SignOut size={14} />
-            <span>Sign out</span>
+            <ArrowLeft size={14} />
+            <span>Back to app</span>
           </button>
-        )}
-      </div>
+
+          <ScrollArea className="flex-1">
+            <div className="flex flex-col gap-3 py-2">
+              {sidebarGroups.map((group) => (
+                <div key={group.label}>
+                  <Text className="px-3 pb-1 font-medium text-[10px] text-gray-9 uppercase tracking-wider">
+                    {group.label}
+                  </Text>
+                  {group.items.map((item) => {
+                    const isActive = activeSidebarCategory === item.id;
+                    return (
+                      <SidebarNavItem
+                        key={item.id}
+                        item={item}
+                        isActive={isActive}
+                        onClick={() => setCategory(item.id)}
+                      />
+                    );
+                  })}
+                </div>
+              ))}
+            </div>
+          </ScrollArea>
+
+          <Box className="shrink-0 px-2 pb-2">
+            <ProjectSwitcher />
+          </Box>
+        </div>
+      )}
 
       <div className="relative flex flex-1 flex-col overflow-hidden">
-        <div className="drag h-[36px] shrink-0 border-b border-b-(--gray-6)" />
         <div className="relative flex flex-1 justify-center overflow-hidden">
           <svg
             aria-hidden="true"

packages/ui/src/router/routes/__root.tsx

@@ -275,8 +275,6 @@ function RootLayout() {
     }
   }, [flagsLoaded, homeTabEnabled, view.type]);
 
-  // Settings is a full-page route — drop the app chrome (header/sidebar/
-  // space-switcher) so the panel occupies the full window.
   const isSettingsRoute = useRouterState({
     select: (s) => s.matches.some((m) => m.routeId.startsWith("/settings")),
   });
@@ -311,31 +309,6 @@ function RootLayout() {
   const activeTabBlank = useActiveTabIsBlank();
   const showBlankTab = onChannelsIndex && activeTabBlank;
 
-  if (isSettingsRoute) {
-    return (
-      <Flex direction="column" height="100%">
-        <ConnectivityBanner />
-        <Outlet />
-        <CommandMenu open={commandMenuOpen} onOpenChange={setCommandMenuOpen} />
-        <GlobalFilePicker />
-        <KeyboardShortcutsSheet
-          open={shortcutsSheetOpen}
-          onOpenChange={(open) => (open ? null : closeShortcutsSheet())}
-        />
-        <GlobalEventHandlers
-          onToggleCommandMenu={toggleCommandMenu}
-          onToggleShortcutsSheet={toggleShortcutsSheet}
-        />
-        {billingEnabled && <UsageLimitModal />}
-        <UsageBillingAnnouncementModal />
-        <UpdateAvailableModal />
-        <WhatsNewModal />
-        <RemoteBranchCheckoutDialog />
-        <ExistingWorktreeDialog />
-      </Flex>
-    );
-  }
-
   return (
     // DnD scope for the tab strip's drag-to-reorder (pill sortables live in
     // the title bar; the provider must sit above them).
@@ -365,12 +338,17 @@ function RootLayout() {
               // over- or under-shoots; the env var fallback covers hosts
               // without Window Controls Overlay.
               paddingLeft: isMac ? "env(titlebar-area-x, 78px)" : "78px",
-              width: sidebarOpen ? channelsSidebarWidth : undefined,
+              width: sidebarOpen
+                ? isSettingsRoute
+                  ? "256px"
+                  : channelsSidebarWidth
+                : undefined,
               // Same curve/duration as ResizableSidebar's SLIDE_EASING so the
               // title bar tracks the sidebar edge.
-              transition: sidebarIsResizing
-                ? "none"
-                : "width 0.2s cubic-bezier(0, 0, 0.2, 1)",
+              transition:
+                isSettingsRoute || sidebarIsResizing
+                  ? "none"
+                  : "width 0.2s cubic-bezier(0, 0, 0.2, 1)",
             }}
           >
             <Flex align="center" gap="2" className="no-drag">
@@ -383,7 +361,7 @@ function RootLayout() {
                 aria-label="Toggle sidebar"
                 onClick={handleToggleSidebar}
                 onMouseEnter={() => {
-                  if (!sidebarOpen) beginSidebarPeek();
+                  if (!isSettingsRoute && !sidebarOpen) beginSidebarPeek();
                 }}
               >
                 {sidebarOpen ? (
@@ -444,42 +422,51 @@ function RootLayout() {
           )}
         </Flex>
         <ConnectivityBanner />
-        <Flex flexGrow="1" overflow="hidden" className="relative">
-          {/* Scrim under the peeked nav: dims the content while the overlay is
-              out. Purely visual (pointer-transparent) and paired with the
-              panel's slide — same 200ms ease-out — so they read as one unit. */}
-          {!sidebarOpen && (
-            <Box
-              aria-hidden
-              // The radix preset replaces Tailwind's palette, so plain
-              // `bg-black/*` doesn't exist — use the radix black-alpha scale
-              // (--black-a2 = 10%, --black-a5 = 30%).
-              className={`pointer-events-none absolute inset-0 z-40 bg-blackA-2 transition-opacity duration-200 ease-out motion-reduce:transition-none dark:bg-blackA-5 ${
-                sidebarPeek ? "opacity-100" : "opacity-0"
-              }`}
-            />
-          )}
-          <ChannelsSidebar />
-          {/* Content sits in a bordered, rounded card inset from the window
-              edges — the framed pane from the design. */}
-          <Box flexGrow="1" className="overflow-hidden">
-            <Box
-              className={`h-full overflow-hidden border-border border-t border-l bg-background ${
-                sidebarOpen ? "rounded-tl-sm" : ""
-              }`}
-            >
-              <Flex direction="column" height="100%">
-                {/* The /website space renders its own header (WebsiteLayout);
-                      everywhere else the shared header carries the view title
-                      and, on a task, its action row. */}
-                {!onWebsitePath && <ContentHeader />}
-                <Box flexGrow="1" overflow="hidden">
-                  {showBlankTab ? <BlankTabView /> : <Outlet />}
-                </Box>
-              </Flex>
-            </Box>
+        {isSettingsRoute ? (
+          <Box
+            flexGrow="1"
+            className="overflow-hidden border-border border-t bg-background"
+          >
+            <Outlet />
           </Box>
-        </Flex>
+        ) : (
+          <Flex flexGrow="1" overflow="hidden" className="relative">
+            {/* Scrim under the peeked nav: dims the content while the overlay is
+                out. Purely visual (pointer-transparent) and paired with the
+                panel's slide — same 200ms ease-out — so they read as one unit. */}
+            {!sidebarOpen && (
+              <Box
+                aria-hidden
+                // The radix preset replaces Tailwind's palette, so plain
+                // `bg-black/*` doesn't exist — use the radix black-alpha scale
+                // (--black-a2 = 10%, --black-a5 = 30%).
+                className={`pointer-events-none absolute inset-0 z-40 bg-blackA-2 transition-opacity duration-200 ease-out motion-reduce:transition-none dark:bg-blackA-5 ${
+                  sidebarPeek ? "opacity-100" : "opacity-0"
+                }`}
+              />
+            )}
+            <ChannelsSidebar />
+            {/* Content sits in a bordered, rounded card inset from the window
+                edges — the framed pane from the design. */}
+            <Box flexGrow="1" className="overflow-hidden">
+              <Box
+                className={`h-full overflow-hidden border-border border-t border-l bg-background ${
+                  sidebarOpen ? "rounded-tl-sm" : ""
+                }`}
+              >
+                <Flex direction="column" height="100%">
+                  {/* The /website space renders its own header (WebsiteLayout);
+                        everywhere else the shared header carries the view title
+                        and, on a task, its action row. */}
+                  {!onWebsitePath && <ContentHeader />}
+                  <Box flexGrow="1" overflow="hidden">
+                    {showBlankTab ? <BlankTabView /> : <Outlet />}
+                  </Box>
+                </Flex>
+              </Box>
+            </Box>
+          </Flex>
+        )}
         <CommandMenu open={commandMenuOpen} onOpenChange={setCommandMenuOpen} />
         <GlobalFilePicker />
         <KeyboardShortcutsSheet

packages/ui/src/router/routes/settings/$category.tsx

@@ -1,6 +1,7 @@
 import { SettingsPanel } from "@posthog/ui/features/settings/components/SettingsPanel";
 import { useSettingsPageStore } from "@posthog/ui/features/settings/stores/settingsPageStore";
 import { isSettingsCategory } from "@posthog/ui/features/settings/types";
+import { useSidebarStore } from "@posthog/ui/features/sidebar/sidebarStore";
 import { createFileRoute } from "@tanstack/react-router";
 import { useEffect } from "react";
 
@@ -11,6 +12,7 @@ export const Route = createFileRoute("/settings/$category")({
 function SettingsRoute() {
   const { category } = Route.useParams();
   const cat = isSettingsCategory(category) ? category : "general";
+  const sidebarOpen = useSidebarStore((state) => state.open);
 
   // Reset transient state when leaving the route entirely. Switching between
   // categories (e.g. general → environments) does not unmount this component,
@@ -19,5 +21,5 @@ function SettingsRoute() {
     return () => useSettingsPageStore.getState().reset();
   }, []);
 
-  return <SettingsPanel activeCategory={cat} />;
+  return <SettingsPanel activeCategory={cat} sidebarOpen={sidebarOpen} />;
 }