Polish desktop navigation chrome

crates/buzz-relay/src/handlers/event.rs

@@ -1065,6 +1065,7 @@ mod tests {
                 CancellationToken::new(),
                 Arc::new(AtomicU8::new(0)),
                 Arc::new(Mutex::new(HashMap::new())),
+                3,
             );
             state.sub_registry.register(
                 conn_id,

desktop/src-tauri/tauri.conf.json

@@ -25,8 +25,8 @@
         "hiddenTitle": true,
         "dragDropEnabled": false,
         "trafficLightPosition": {
-          "x": 12,
-          "y": 22
+          "x": 16,
+          "y": 24
         },
         "backgroundThrottling": "disabled",
         "minWidth": 800,

desktop/src/app/AppShell.tsx

@@ -767,7 +767,7 @@ export function AppShell() {
                     isHuddleDrawerOpen && "buzz-huddle-app-surface-open",
                   )}
                 >
-                  <SidebarProvider className="min-h-0 flex-1 overflow-hidden">
+                  <SidebarProvider className="min-h-0 flex-1 flex-col overflow-hidden">
                     {!settingsOpen ? (
                       <AppTopChrome
                         canGoBack={canGoBack}
@@ -777,45 +777,49 @@ export function AppShell() {
                       />
                     ) : null}
                     {settingsOpen ? (
-                      <React.Suspense fallback={null}>
-                        <LazySettingsScreen
-                          currentPubkey={identityQuery.data?.pubkey}
-                          fallbackDisplayName={identityQuery.data?.displayName}
-                          isUpdatingDesktopNotifications={
-                            notificationSettings.isUpdatingDesktopEnabled
-                          }
-                          notificationErrorMessage={
-                            notificationSettings.errorMessage
-                          }
-                          notificationPermission={
-                            notificationSettings.permission
-                          }
-                          notificationSettings={notificationSettings.settings}
-                          onClose={handleCloseSettings}
-                          onSectionChange={handleSettingsSectionChange}
-                          onSetDesktopNotificationsEnabled={
-                            notificationSettings.setDesktopEnabled
-                          }
-                          onSetHomeBadgeEnabled={
-                            notificationSettings.setHomeBadgeEnabled
-                          }
-                          onSetSlotAlertsEnabled={
-                            notificationSettings.setSlotAlertsEnabled
-                          }
-                          onSetNotifyWhileViewing={
-                            notificationSettings.setNotifyWhileViewing
-                          }
-                          onSetAllSlotAlertsEnabled={
-                            notificationSettings.setAllSlotAlertsEnabled
-                          }
-                          onSetSoundForSlot={
-                            notificationSettings.setSoundForSlot
-                          }
-                          section={settingsSection}
-                        />
-                      </React.Suspense>
+                      <div className="flex min-h-0 flex-1 overflow-hidden">
+                        <React.Suspense fallback={null}>
+                          <LazySettingsScreen
+                            currentPubkey={identityQuery.data?.pubkey}
+                            fallbackDisplayName={
+                              identityQuery.data?.displayName
+                            }
+                            isUpdatingDesktopNotifications={
+                              notificationSettings.isUpdatingDesktopEnabled
+                            }
+                            notificationErrorMessage={
+                              notificationSettings.errorMessage
+                            }
+                            notificationPermission={
+                              notificationSettings.permission
+                            }
+                            notificationSettings={notificationSettings.settings}
+                            onClose={handleCloseSettings}
+                            onSectionChange={handleSettingsSectionChange}
+                            onSetDesktopNotificationsEnabled={
+                              notificationSettings.setDesktopEnabled
+                            }
+                            onSetHomeBadgeEnabled={
+                              notificationSettings.setHomeBadgeEnabled
+                            }
+                            onSetSlotAlertsEnabled={
+                              notificationSettings.setSlotAlertsEnabled
+                            }
+                            onSetNotifyWhileViewing={
+                              notificationSettings.setNotifyWhileViewing
+                            }
+                            onSetAllSlotAlertsEnabled={
+                              notificationSettings.setAllSlotAlertsEnabled
+                            }
+                            onSetSoundForSlot={
+                              notificationSettings.setSoundForSlot
+                            }
+                            section={settingsSection}
+                          />
+                        </React.Suspense>
+                      </div>
                     ) : (
-                      <>
+                      <div className="flex min-h-0 flex-1 overflow-hidden">
                         <AppSidebar
                           activeWorkspace={workspacesHook.activeWorkspace}
                           channels={sidebarChannels}
@@ -950,22 +954,22 @@ export function AppShell() {
                           onStarChannel={starChannel}
                           onUnstarChannel={unstarChannel}
                         />
-
                         <MainInsetProvider mainInsetRef={mainInsetRef}>
                           <SidebarInset
                             ref={mainInsetRef}
-                            className="min-h-0 min-w-0 overflow-hidden"
+                            className="isolate min-h-0 min-w-0 overflow-hidden bg-sidebar"
                             style={chromeCssVarDefaults}
                           >
-                            <ConnectionBanner
-                              errorMessage={channelsErrorMessage}
-                            />
-                            <Outlet />
+                            <div className="relative z-10 ml-px mt-px flex min-h-0 flex-1 flex-col overflow-hidden rounded-tl-xl bg-background shadow-[-1px_-1px_0_0_hsl(var(--sidebar-border)/0.45)]">
+                              <ConnectionBanner
+                                errorMessage={channelsErrorMessage}
+                              />
+                              <Outlet />
+                            </div>
                           </SidebarInset>
                         </MainInsetProvider>
-                      </>
+                      </div>
                     )}
-
                     <AppShellOverlays
                       activeChannel={activeChannel}
                       browseDialogType={browseDialogType}

desktop/src/app/AppTopChrome.tsx

@@ -4,12 +4,12 @@ import {
   PanelLeftClose,
   PanelLeftOpen,
 } from "lucide-react";
-import * as React from "react";
 
 import { isMacPlatform } from "@/shared/lib/platform";
 import { useIsFullscreen } from "@/shared/lib/useIsFullscreen";
 import { Button } from "@/shared/ui/button";
 import { cn } from "@/shared/lib/cn";
+import { topChromeBackdrop } from "@/shared/layout/chromeLayout";
 import { useOptionalSidebar } from "@/shared/ui/sidebar";
 
 type AppTopChromeProps = {
@@ -20,8 +20,7 @@ type AppTopChromeProps = {
 };
 
 const TOP_CHROME_ICON_BUTTON_CLASS =
-  "h-7 w-7 rounded-[4px] text-muted-foreground/70 hover:bg-border/45 hover:text-foreground [&_svg]:size-4";
-const TOP_CHROME_WHEEL_GUARD_HEIGHT = 40;
+  "h-7 w-7 rounded-[4px] text-sidebar-foreground/65 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground [&_svg]:size-4";
 
 function TopChromeSidebarTrigger() {
   const sidebar = useOptionalSidebar();
@@ -52,42 +51,25 @@ export function AppTopChrome({
   onGoForward,
 }: AppTopChromeProps) {
   const isFullscreen = useIsFullscreen();
-  // On macOS the traffic-light buttons overlay the chrome at x≈12 (see
-  // `trafficLightPosition` in `tauri.conf.json`), so the nav row sits at
-  // `left-[80px]` to clear them. In fullscreen those buttons hide, so shift
-  // the row back to the standard left inset.
-  const navRowLeftClass =
-    isMacPlatform() && isFullscreen ? "left-[12px]" : "left-[80px]";
-
-  React.useEffect(() => {
-    const handleWheel = (event: WheelEvent) => {
-      if (event.clientY <= TOP_CHROME_WHEEL_GUARD_HEIGHT) {
-        event.preventDefault();
-      }
-    };
-
-    document.addEventListener("wheel", handleWheel, {
-      capture: true,
-      passive: false,
-    });
-    return () => {
-      document.removeEventListener("wheel", handleWheel, { capture: true });
-    };
-  }, []);
+  // On macOS the traffic-light buttons overlay the chrome (see
+  // `trafficLightPosition` in `tauri.conf.json`), so the nav row clears their
+  // x-position and shifts to align the nav icon centers with the native dot
+  // centers. In fullscreen those buttons hide, so use the standard alignment.
+  const navRowPaddingClass =
+    isMacPlatform() && !isFullscreen ? "pl-20" : "pl-3";
+  const navRowAlignmentClass =
+    isMacPlatform() && !isFullscreen ? "translate-y-[3px]" : null;
 
   return (
-    <>
-      <div
-        aria-hidden="true"
-        className="fixed inset-x-0 top-0 z-20 h-10 cursor-default select-none"
-        data-tauri-drag-region
-      />
-      <div
-        className={cn(
-          "fixed top-[6px] z-45 flex items-center gap-0.5",
-          navRowLeftClass,
-        )}
-      >
+    <div
+      className={cn(
+        "relative z-45 flex shrink-0 cursor-default select-none items-center bg-sidebar pr-3 text-sidebar-foreground",
+        topChromeBackdrop.height,
+        navRowPaddingClass,
+      )}
+      data-tauri-drag-region
+    >
+      <div className={cn("flex items-center gap-0.5", navRowAlignmentClass)}>
         <TopChromeSidebarTrigger />
         <Button
           aria-label="Go back"
@@ -112,6 +94,6 @@ export function AppTopChrome({
           <ChevronRight />
         </Button>
       </div>
-    </>
+    </div>
   );
 }

desktop/src/features/agents/ui/AgentsView.tsx

@@ -1,6 +1,4 @@
 import * as React from "react";
-import { topChromeInset } from "@/shared/layout/chromeLayout";
-import { cn } from "@/shared/lib/cn";
 import {
   consumePendingOpenCreateAgent,
   subscribeOpenCreateAgent,
@@ -59,12 +57,7 @@ export function AgentsView() {
 
   return (
     <>
-      <div
-        className={cn(
-          "flex-1 overflow-y-auto overflow-x-hidden overscroll-contain px-4 pb-4 sm:px-6",
-          topChromeInset.padding,
-        )}
-      >
+      <div className="flex-1 overflow-y-auto overflow-x-hidden overscroll-contain px-4 pb-4 pt-4 sm:px-6">
         <div className="mx-auto flex w-full max-w-6xl flex-col gap-6">
           <div className="flex flex-col gap-6">
             <UnifiedAgentsSection

desktop/src/features/channels/ui/AgentSessionThreadPanel.tsx

@@ -150,7 +150,7 @@ export function AgentSessionThreadPanel({
       className={cn(
         "min-h-0 flex-1 overflow-y-auto px-3 pb-4",
         isSplitLayout && auxiliaryPanelContentPaddingClass,
-        !isSplitLayout && (isOverlay ? "pt-4" : "pt-[4.75rem]"),
+        !isSplitLayout && (isFloatingOverlay ? "pt-4" : "pt-[3.25rem]"),
       )}
     >
       <ManagedAgentSessionPanel
@@ -193,16 +193,16 @@ export function AgentSessionThreadPanel({
         {!isOverlay ? (
           <div
             aria-hidden="true"
-            className="pointer-events-none absolute inset-x-0 top-0 z-40 h-[4.75rem] bg-background/75 backdrop-blur-md before:absolute before:left-0 before:right-0 before:top-10 before:h-px before:bg-border/35 supports-[backdrop-filter]:bg-background/65 dark:bg-background/45 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/35"
+            className="pointer-events-none absolute inset-x-0 top-0 z-40 h-[3.25rem] bg-background/75 backdrop-blur-md supports-[backdrop-filter]:bg-background/65 dark:bg-background/45 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/35"
           />
         ) : null}
 
         <div
           className={cn(
             "flex cursor-default select-none items-center",
             isSinglePanelView
-              ? `relative ${PANEL_SINGLE_COLUMN_HEADER_LAYER_CLASS} -mb-[4.75rem] min-h-[4.75rem] shrink-0 gap-2.5 bg-background/80 pb-1 pl-4 pr-2 pt-[2.625rem] backdrop-blur-md supports-[backdrop-filter]:bg-background/70 sm:pl-6 sm:pr-3 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/55`
-              : "relative z-50 min-h-14 shrink-0 gap-3 bg-background/80 px-5 py-2 backdrop-blur-md supports-[backdrop-filter]:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/55",
+              ? `relative ${PANEL_SINGLE_COLUMN_HEADER_LAYER_CLASS} -mb-[3.25rem] min-h-[3.25rem] shrink-0 gap-2.5 bg-background/80 px-4 py-2 backdrop-blur-md supports-[backdrop-filter]:bg-background/70 sm:pl-6 sm:pr-3 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/55`
+              : "relative z-50 min-h-[3.25rem] shrink-0 gap-3 bg-background/80 px-5 py-2 backdrop-blur-md supports-[backdrop-filter]:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/55",
           )}
           data-tauri-drag-region
         >