Skip to content

Polish desktop navigation chrome #1238

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wesbillman merged 5 commits into from
Jun 24, 2026
Merged

Polish desktop navigation chrome #1238

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4a69860
Polish desktop navigation chrome
klopez4212 Jun 24, 2026
9a121cc
Address navigation chrome review feedback
klopez4212 Jun 24, 2026
2d10177
Normalize remaining top chrome insets
klopez4212 Jun 24, 2026
df8b6e1
Stabilize top chrome screenshot spec
klopez4212 Jun 24, 2026
e180de9
Fix relay test connection registration
klopez4212 Jun 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions desktop/src-tauri/tauri.conf.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@
"hiddenTitle": true,
"dragDropEnabled": false,
"trafficLightPosition": {
"x": 12,
"y": 22
"x": 16,
"y": 24
},
"backgroundThrottling": "disabled",
"minWidth": 800,
Expand Down
98 changes: 51 additions & 47 deletions desktop/src/app/AppShell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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">
Comment thread
klopez4212 marked this conversation as resolved.
Resolved
<AppSidebar
activeWorkspace={workspacesHook.activeWorkspace}
channels={sidebarChannels}
Expand Down Expand Up @@ -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}
Expand Down
58 changes: 20 additions & 38 deletions desktop/src/app/AppTopChrome.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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();
Expand Down Expand Up @@ -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"
Expand All @@ -112,6 +94,6 @@ export function AppTopChrome({
<ChevronRight />
</Button>
</div>
</>
</div>
);
}
9 changes: 1 addition & 8 deletions desktop/src/features/agents/ui/AgentsView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import * as React from "react";
import { topChromeInset } from "@/shared/layout/chromeLayout";
import { cn } from "@/shared/lib/cn";
import {
consumePendingOpenCreateAgent,
subscribeOpenCreateAgent,
Expand Down Expand Up @@ -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
Expand Down
8 changes: 4 additions & 4 deletions desktop/src/features/channels/ui/AgentSessionThreadPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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",
Comment thread
klopez4212 marked this conversation as resolved.
Resolved
)}
data-tauri-drag-region
>
Expand Down
Loading
Loading