jerry/buzz
1
0
Fork 0
mirror of https://github.com/block/buzz.git synced 2026-11-05 17:01:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move settings into the app shell (#893)

Browse Source
This commit is contained in:
klopez4212
2026-06-08 15:23:11 +01:00
committed by GitHub
parent 45f3dfe5ba
commit 32039b9a25
9 changed files with 404 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

362
desktop/src/app/AppShell.tsx
View File

@@ -173,9 +173,6 @@ export function AppShell() {
const [settingsSection, setSettingsSection] = React.useState<SettingsSection>( const [settingsSection, setSettingsSection] = React.useState<SettingsSection>(
DEFAULT_SETTINGS_SECTION, DEFAULT_SETTINGS_SECTION,
); );
const [settingsMode, setSettingsMode] = React.useState<
"profile" | "preferences"
>("preferences");
const [isChannelManagementOpen, setIsChannelManagementOpen] = const [isChannelManagementOpen, setIsChannelManagementOpen] =
React.useState(false); React.useState(false);
@@ -423,9 +420,8 @@ export function AppShell() {
); );
const handleOpenSettings = React.useCallback( const handleOpenSettings = React.useCallback(
(section: SettingsSection = "appearance") => { (section: SettingsSection = DEFAULT_SETTINGS_SECTION) => {
setIsChannelManagementOpen(false); setIsChannelManagementOpen(false);
setSettingsMode(section === "profile" ? "profile" : "preferences");
setSettingsSection(section); setSettingsSection(section);
setSettingsOpen(true); setSettingsOpen(true);
}, },
@@ -684,155 +680,191 @@ export function AppShell() {
> >
<HuddleProvider> <HuddleProvider>
<div className="flex h-dvh flex-col overflow-hidden overscroll-none"> <div className="flex h-dvh flex-col overflow-hidden overscroll-none">
<SidebarProvider <SidebarProvider className="min-h-0 flex-1 overflow-hidden">
className="min-h-0 flex-1 overflow-hidden" {!settingsOpen ? (
disableRail={settingsOpen} <AppTopChrome
> canGoBack={canGoBack}
<AppTopChrome canGoForward={canGoForward}
canGoBack={canGoBack} channels={channels}
canGoForward={canGoForward} currentPubkey={identityQuery.data?.pubkey}
channels={channels} onGoBack={goBack}
currentPubkey={identityQuery.data?.pubkey} onGoForward={goForward}
onGoBack={goBack} onOpenChannel={(channelId) => {
onGoForward={goForward} void goChannel(channelId);
onOpenChannel={(channelId) => { }}
void goChannel(channelId); onOpenResult={handleOpenSearchResult}
}} searchFocusRequest={searchFocusRequest}
onOpenResult={handleOpenSearchResult} />
searchFocusRequest={searchFocusRequest} ) : null}
/> {settingsOpen ? (
<AppSidebar <React.Suspense fallback={null}>
activeWorkspace={workspacesHook.activeWorkspace} <LazySettingsScreen
channels={sidebarChannels} currentPubkey={identityQuery.data?.pubkey}
currentPubkey={identityQuery.data?.pubkey} fallbackDisplayName={identityQuery.data?.displayName}
errorMessage={ isUpdatingDesktopNotifications={
channelsQuery.error instanceof Error notificationSettings.isUpdatingDesktopEnabled
? channelsQuery.error.message }
: undefined notificationErrorMessage={
} notificationSettings.errorMessage
fallbackDisplayName={identityQuery.data?.displayName} }
homeBadgeCount={homeBadgeCount} notificationPermission={notificationSettings.permission}
isAddWorkspaceOpen={isAddWorkspaceOpen} notificationSettings={notificationSettings.settings}
isCreatingChannel={createChannelMutation.isPending} onClose={handleCloseSettings}
isCreatingForum={createForumMutation.isPending} onSectionChange={setSettingsSection}
isLoading={channelsQuery.isLoading} onSetDesktopNotificationsEnabled={
isOpeningDm={openDmMutation.isPending} notificationSettings.setDesktopEnabled
isNewDmOpen={isNewDmOpen} }
isCreateChannelOpen={isCreateChannelOpen} onSetHomeBadgeEnabled={
isPresencePending={presenceSession.isPending} notificationSettings.setHomeBadgeEnabled
onAddWorkspace={(workspace) => { }
const id = workspacesHook.addWorkspace(workspace); onSetMentionNotificationsEnabled={
workspacesHook.switchWorkspace(id); notificationSettings.setMentionsEnabled
}} }
onAddWorkspaceOpenChange={setIsAddWorkspaceOpen} onSetNeedsActionNotificationsEnabled={
onNewDmOpenChange={setIsNewDmOpen} notificationSettings.setNeedsActionEnabled
onCreateChannelOpenChange={setIsCreateChannelOpen} }
onOpenAddWorkspace={() => setIsAddWorkspaceOpen(true)} onSetSoundEnabled={notificationSettings.setSoundEnabled}
onUpdateWorkspace={workspacesHook.updateWorkspace} section={settingsSection}
onRemoveWorkspace={workspacesHook.removeWorkspace} />
onSwitchWorkspace={workspacesHook.switchWorkspace} </React.Suspense>
selfPresenceStatus={presenceSession.currentStatus} ) : (
workspaces={workspacesHook.workspaces} <>
onCreateChannel={async ({ <AppSidebar
description, activeWorkspace={workspacesHook.activeWorkspace}
name, channels={sidebarChannels}
visibility, currentPubkey={identityQuery.data?.pubkey}
ttlSeconds, errorMessage={
templateId, channelsQuery.error instanceof Error
}) => { ? channelsQuery.error.message
const createdChannel = : undefined
await createChannelMutation.mutateAsync({ }
name, fallbackDisplayName={identityQuery.data?.displayName}
homeBadgeCount={homeBadgeCount}
isAddWorkspaceOpen={isAddWorkspaceOpen}
isCreatingChannel={createChannelMutation.isPending}
isCreatingForum={createForumMutation.isPending}
isLoading={channelsQuery.isLoading}
isOpeningDm={openDmMutation.isPending}
isNewDmOpen={isNewDmOpen}
isCreateChannelOpen={isCreateChannelOpen}
isPresencePending={presenceSession.isPending}
onAddWorkspace={(workspace) => {
const id = workspacesHook.addWorkspace(workspace);
workspacesHook.switchWorkspace(id);
}}
onAddWorkspaceOpenChange={setIsAddWorkspaceOpen}
onNewDmOpenChange={setIsNewDmOpen}
onCreateChannelOpenChange={setIsCreateChannelOpen}
onOpenAddWorkspace={() => setIsAddWorkspaceOpen(true)}
onUpdateWorkspace={workspacesHook.updateWorkspace}
onRemoveWorkspace={workspacesHook.removeWorkspace}
onSwitchWorkspace={workspacesHook.switchWorkspace}
selfPresenceStatus={presenceSession.currentStatus}
workspaces={workspacesHook.workspaces}
onCreateChannel={async ({
description, description,
channelType: "stream", name,
visibility, visibility,
ttlSeconds, ttlSeconds,
}); templateId,
}) => {
const createdChannel =
await createChannelMutation.mutateAsync({
name,
description,
channelType: "stream",
visibility,
ttlSeconds,
});
await applyCanvas(templateId, createdChannel.id, name); await applyCanvas(templateId, createdChannel.id, name);
await goChannel(createdChannel.id); await goChannel(createdChannel.id);
void applyAgents(templateId, createdChannel.id); void applyAgents(templateId, createdChannel.id);
}} }}
onCreateForum={async ({ onCreateForum={async ({
description, description,
name, name,
visibility, visibility,
ttlSeconds, ttlSeconds,
templateId, templateId,
}) => { }) => {
const createdForum = await createForumMutation.mutateAsync({ const createdForum =
name, await createForumMutation.mutateAsync({
description, name,
channelType: "forum", description,
visibility, channelType: "forum",
ttlSeconds, visibility,
}); ttlSeconds,
});
await applyCanvas(templateId, createdForum.id, name); await applyCanvas(templateId, createdForum.id, name);
await goChannel(createdForum.id); await goChannel(createdForum.id);
void applyAgents(templateId, createdForum.id); void applyAgents(templateId, createdForum.id);
}} }}
onHideDm={handleHideDm} onHideDm={handleHideDm}
onMarkAllChannelsRead={markAllChannelsRead} onMarkAllChannelsRead={markAllChannelsRead}
onMarkChannelRead={markChannelRead} onMarkChannelRead={markChannelRead}
onMarkChannelUnread={markChannelUnread} onMarkChannelUnread={markChannelUnread}
onOpenBrowseChannels={handleOpenBrowseChannels} onOpenBrowseChannels={handleOpenBrowseChannels}
onOpenBrowseForums={handleOpenBrowseForums} onOpenBrowseForums={handleOpenBrowseForums}
onOpenDm={async ({ pubkeys }) => { onOpenDm={async ({ pubkeys }) => {
const directMessage = await openDmMutation.mutateAsync({ const directMessage = await openDmMutation.mutateAsync({
pubkeys, pubkeys,
}); });
await goChannel(directMessage.id); await goChannel(directMessage.id);
}} }}
onSelectAgents={() => { onSelectAgents={() => {
void goAgents(); void goAgents();
}} }}
onSelectChannel={(channelId) => { onSelectChannel={(channelId) => {
void goChannel(channelId); void goChannel(channelId);
}} }}
onSelectHome={() => { onSelectHome={() => {
void goHome(); void goHome();
}} }}
onSelectProjects={() => { onSelectProjects={() => {
void goProjects(); void goProjects();
}} }}
onSelectPulse={() => { onSelectPulse={() => {
void goPulse(); void goPulse();
}} }}
onSelectSettings={handleOpenSettings} onSelectSettings={handleOpenSettings}
onSelectWorkflows={() => { onSelectWorkflows={() => {
void goWorkflows(); void goWorkflows();
}} }}
onSetPresenceStatus={(status) => onSetPresenceStatus={(status) =>
presenceSession.setStatus(status) presenceSession.setStatus(status)
} }
onSetUserStatus={(text, emoji) => onSetUserStatus={(text, emoji) =>
setUserStatusMutation.mutate({ text, emoji }) setUserStatusMutation.mutate({ text, emoji })
} }
onClearUserStatus={() => onClearUserStatus={() =>
setUserStatusMutation.mutate({ text: "", emoji: "" }) setUserStatusMutation.mutate({ text: "", emoji: "" })
} }
profile={profileQuery.data} profile={profileQuery.data}
selfUserStatus={ selfUserStatus={
deferredPubkey deferredPubkey
? (selfStatusQuery.data?.[deferredPubkey.toLowerCase()] ?? ? (selfStatusQuery.data?.[
undefined) deferredPubkey.toLowerCase()
: undefined ] ?? undefined)
} : undefined
selectedChannelId={selectedChannelId} }
selectedView={selectedView} selectedChannelId={selectedChannelId}
unreadChannelIds={unreadChannelIds} selectedView={selectedView}
mutedChannelIds={mutedChannelIds} unreadChannelIds={unreadChannelIds}
onMuteChannel={muteChannel} mutedChannelIds={mutedChannelIds}
onUnmuteChannel={unmuteChannel} onMuteChannel={muteChannel}
starredChannelIds={starredChannelIds} onUnmuteChannel={unmuteChannel}
onStarChannel={starChannel} starredChannelIds={starredChannelIds}
onUnstarChannel={unstarChannel} onStarChannel={starChannel}
/> onUnstarChannel={unstarChannel}
/>
<SidebarInset className="min-h-0 min-w-0 overflow-hidden"> <SidebarInset className="min-h-0 min-w-0 overflow-hidden">
<Outlet /> <Outlet />
</SidebarInset> </SidebarInset>
</>
)}
<AppShellOverlays <AppShellOverlays
activeChannel={activeChannel} activeChannel={activeChannel}
@@ -851,40 +883,6 @@ export function AppShell() {
void goChannel(channelId); void goChannel(channelId);
}} }}
/> />
{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={setSettingsSection}
mode={settingsMode}
onSetDesktopNotificationsEnabled={
notificationSettings.setDesktopEnabled
}
onSetHomeBadgeEnabled={
notificationSettings.setHomeBadgeEnabled
}
onSetMentionNotificationsEnabled={
notificationSettings.setMentionsEnabled
}
onSetNeedsActionNotificationsEnabled={
notificationSettings.setNeedsActionEnabled
}
onSetSoundEnabled={notificationSettings.setSoundEnabled}
section={settingsSection}
/>
</React.Suspense>
) : null}
</SidebarProvider> </SidebarProvider>
<HuddleBar /> <HuddleBar />
</div> </div>

24
desktop/src/features/profile/ui/ProfilePopover.tsx
View File

@@ -72,7 +72,7 @@ export function ProfilePopover({
const [presenceMenuOpen, setPresenceMenuOpen] = React.useState(false); const [presenceMenuOpen, setPresenceMenuOpen] = React.useState(false);
const presenceHoverTimer = React.useRef<number | null>(null); const presenceHoverTimer = React.useRef<number | null>(null);
const hasUserStatus = Boolean(userStatusText || userStatusEmoji); const hasUserStatus = Boolean(userStatusText || userStatusEmoji);
const preferencesShortcutLabel = isMacPlatform() ? "⌘," : "Ctrl+,"; const settingsShortcutLabel = isMacPlatform() ? "⌘," : "Ctrl+,";
function clearPresenceHoverTimer() { function clearPresenceHoverTimer() {
if (presenceHoverTimer.current !== null) { if (presenceHoverTimer.current !== null) {
@@ -249,36 +249,22 @@ export function ProfilePopover({
<hr className="my-1 h-px border-0 bg-border" /> <hr className="my-1 h-px border-0 bg-border" />
{/* ── Profile / preferences ──────────────────────────── */} {/* ── Settings ───────────────────────────────────────── */}
<button
className={MENU_ITEM_CLASS}
data-testid="profile-popover-profile"
onClick={() => {
closePopover();
window.requestAnimationFrame(() => {
onOpenSettings("profile");
});
}}
role="menuitem"
type="button"
>
<span className="flex-1">Profile</span>
</button>
<button <button
className={MENU_ITEM_CLASS} className={MENU_ITEM_CLASS}
data-testid="profile-popover-settings" data-testid="profile-popover-settings"
onClick={() => { onClick={() => {
closePopover(); closePopover();
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
onOpenSettings("appearance"); onOpenSettings();
}); });
}} }}
role="menuitem" role="menuitem"
type="button" type="button"
> >
<span className="flex-1">Preferences</span> <span className="flex-1">Settings</span>
<kbd className="text-xs text-muted-foreground"> <kbd className="text-xs text-muted-foreground">
{preferencesShortcutLabel} {settingsShortcutLabel}
</kbd> </kbd>
</button> </button>

2
desktop/src/features/settings/ui/ProfileSettingsCard.tsx
View File

@@ -139,6 +139,8 @@ export function ProfileSettingsCard({
return ( return (
<section className="min-w-0" data-testid="settings-profile"> <section className="min-w-0" data-testid="settings-profile">
<div className="space-y-6"> <div className="space-y-6">
<h2 className="text-2xl font-semibold tracking-tight">Profile</h2>
{profileQuery.error instanceof Error ? ( {profileQuery.error instanceof Error ? (
<p className="rounded-xl border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive"> <p className="rounded-xl border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
{profileQuery.error.message} {profileQuery.error.message}

3
desktop/src/features/settings/ui/SettingsScreen.tsx
View File

@@ -7,7 +7,6 @@ type SettingsScreenProps = {
currentPubkey?: string; currentPubkey?: string;
fallbackDisplayName?: string; fallbackDisplayName?: string;
isUpdatingDesktopNotifications: boolean; isUpdatingDesktopNotifications: boolean;
mode: "profile" | "preferences";
notificationErrorMessage: string | null; notificationErrorMessage: string | null;
notificationPermission: DesktopNotificationPermissionState; notificationPermission: DesktopNotificationPermissionState;
notificationSettings: NotificationSettings; notificationSettings: NotificationSettings;
@@ -25,7 +24,6 @@ export function SettingsScreen({
currentPubkey, currentPubkey,
fallbackDisplayName, fallbackDisplayName,
isUpdatingDesktopNotifications, isUpdatingDesktopNotifications,
mode,
notificationErrorMessage, notificationErrorMessage,
notificationPermission, notificationPermission,
notificationSettings, notificationSettings,
@@ -43,7 +41,6 @@ export function SettingsScreen({
currentPubkey={currentPubkey} currentPubkey={currentPubkey}
fallbackDisplayName={fallbackDisplayName} fallbackDisplayName={fallbackDisplayName}
isUpdatingDesktopNotifications={isUpdatingDesktopNotifications} isUpdatingDesktopNotifications={isUpdatingDesktopNotifications}
mode={mode}
notificationErrorMessage={notificationErrorMessage} notificationErrorMessage={notificationErrorMessage}
notificationPermission={notificationPermission} notificationPermission={notificationPermission}
notificationSettings={notificationSettings} notificationSettings={notificationSettings}

282
desktop/src/features/settings/ui/SettingsView.tsx
View File

@@ -1,14 +1,29 @@
import * as React from "react"; import * as React from "react";
import { getVersion } from "@tauri-apps/api/app"; import { getVersion } from "@tauri-apps/api/app";
import { X } from "lucide-react"; import { ArrowLeft } from "lucide-react";
import { useMyRelayMembershipQuery } from "@/features/relay-members/hooks"; import { useMyRelayMembershipQuery } from "@/features/relay-members/hooks";
import { cn } from "@/shared/lib/cn"; import { cn } from "@/shared/lib/cn";
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarHeader,
SidebarInset,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
useSidebar,
} from "@/shared/ui/sidebar";
import { import {
renderSettingsSection, renderSettingsSection,
settingsSections, settingsSections,
type SettingsPanelProps, type SettingsPanelProps,
type SettingsSection, type SettingsSection,
type SettingsSectionDescriptor,
} from "./SettingsPanels"; } from "./SettingsPanels";
export { export {
@@ -17,49 +32,67 @@ export {
} from "./SettingsPanels"; } from "./SettingsPanels";
type SettingsViewProps = SettingsPanelProps & { type SettingsViewProps = SettingsPanelProps & {
mode: "profile" | "preferences";
onClose: () => void; onClose: () => void;
onSectionChange: (section: SettingsSection) => void; onSectionChange: (section: SettingsSection) => void;
section: SettingsSection; section: SettingsSection;
}; };
const settingsNavGroups: Array<{
label: string;
sections: SettingsSection[];
}> = [
{
label: "Personal",
sections: [
"profile",
"appearance",
"notifications",
"shortcuts",
"custom-emoji",
],
},
{
label: "Workspaces",
sections: ["channel-templates", "relay-members"],
},
{
label: "App",
sections: ["agents", "compute", "mobile", "updates", "doctor"],
},
];
function SettingsSectionButton({ function SettingsSectionButton({
active, active,
isLoaded,
onSelect, onSelect,
section, section,
}: { }: {
active: boolean; active: boolean;
isLoaded: boolean;
onSelect: (section: SettingsSection) => void; onSelect: (section: SettingsSection) => void;
section: (typeof settingsSections)[number]; section: (typeof settingsSections)[number];
}) { }) {
const Icon = section.icon; const Icon = section.icon;
return ( return (
<button <SidebarMenuItem>
aria-pressed={active} <SidebarMenuButton
className={cn( aria-pressed={active}
"group inline-flex min-w-fit items-center gap-2 rounded-lg border px-3 py-2 text-sm font-medium whitespace-nowrap motion-safe:transition-all motion-safe:duration-200 motion-safe:ease-out focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring", data-testid={`settings-nav-${section.value}`}
active isActive={active}
? "border-border bg-background text-foreground shadow-xs" onClick={() => onSelect(section.value)}
: "border-transparent bg-transparent text-muted-foreground hover:bg-background/70 hover:text-foreground", tooltip={section.label}
isLoaded ? "opacity-100 translate-x-0" : "opacity-0 -translate-x-2", type="button"
)} >
data-testid={`settings-nav-${section.value}`} <Icon
onClick={() => onSelect(section.value)} className={cn(
type="button" "h-4 w-4 shrink-0 transition-colors",
> active
<Icon ? "text-sidebar-active-foreground"
className={cn( : "text-sidebar-foreground/70",
"h-4 w-4 shrink-0 transition-colors", )}
active />
? "text-primary" <span>{section.label}</span>
: "text-muted-foreground group-hover:text-foreground", </SidebarMenuButton>
)} </SidebarMenuItem>
/>
<span className="truncate">{section.label}</span>
</button>
); );
} }
@@ -70,7 +103,6 @@ export function SettingsView({
notificationErrorMessage, notificationErrorMessage,
notificationPermission, notificationPermission,
notificationSettings, notificationSettings,
mode,
onClose, onClose,
onSectionChange, onSectionChange,
onSetDesktopNotificationsEnabled, onSetDesktopNotificationsEnabled,
@@ -80,13 +112,11 @@ export function SettingsView({
onSetSoundEnabled, onSetSoundEnabled,
section, section,
}: SettingsViewProps) { }: SettingsViewProps) {
const { isMobile, open: sidebarOpen, setOpen: setSidebarOpen } = useSidebar();
const myMembershipQuery = useMyRelayMembershipQuery(); const myMembershipQuery = useMyRelayMembershipQuery();
const visibleSections = React.useMemo(() => { const visibleSections = React.useMemo(() => {
const membership = myMembershipQuery.data; const membership = myMembershipQuery.data;
return settingsSections.filter((s) => { return settingsSections.filter((s) => {
if (mode === "preferences" && s.value === "profile") {
return false;
}
if (s.value === "relay-members") { if (s.value === "relay-members") {
return ( return (
membership != null && membership != null &&
@@ -95,32 +125,31 @@ export function SettingsView({
} }
return true; return true;
}); });
}, [mode, myMembershipQuery.data]); }, [myMembershipQuery.data]);
const [isLoaded, setIsLoaded] = React.useState(false); const [isLoaded, setIsLoaded] = React.useState(false);
const [appVersion, setAppVersion] = React.useState<string | null>(null); const [appVersion, setAppVersion] = React.useState<string | null>(null);
React.useEffect(() => { React.useEffect(() => {
const frameId = window.requestAnimationFrame(() => setIsLoaded(true)); const frameId = window.requestAnimationFrame(() => setIsLoaded(true));
return () => window.cancelAnimationFrame(frameId); return () => window.cancelAnimationFrame(frameId);
}, []); }, []);
React.useEffect(() => { React.useEffect(() => {
void getVersion().then(setAppVersion); void getVersion().then(setAppVersion);
}, []); }, []);
React.useEffect(() => { React.useEffect(() => {
if (mode === "profile") {
if (section !== "profile") {
onSectionChange("profile");
}
return;
}
if (!visibleSections.some((entry) => entry.value === section)) { if (!visibleSections.some((entry) => entry.value === section)) {
onSectionChange(visibleSections[0]?.value ?? "appearance"); onSectionChange(visibleSections[0]?.value ?? "appearance");
} }
}, [mode, onSectionChange, section, visibleSections]); }, [onSectionChange, section, visibleSections]);
const showSectionNav = mode === "preferences"; React.useEffect(() => {
if (!isMobile && !sidebarOpen) {
setSidebarOpen(true);
}
}, [isMobile, setSidebarOpen, sidebarOpen]);
React.useEffect(() => { React.useEffect(() => {
function handleKeyDown(event: KeyboardEvent) { function handleKeyDown(event: KeyboardEvent) {
@@ -134,96 +163,97 @@ export function SettingsView({
return () => window.removeEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown);
}, [onClose]); }, [onClose]);
return ( const visibleSectionByValue = React.useMemo(
<div () => new Map(visibleSections.map((entry) => [entry.value, entry])),
className={cn( [visibleSections],
"fixed inset-0 z-50 flex items-center justify-center motion-safe:transition-opacity motion-safe:duration-200", );
isLoaded ? "opacity-100" : "opacity-0", const visibleNavGroups = React.useMemo(
)} () =>
data-testid="settings-overlay" settingsNavGroups
> .map((group) => ({
<div ...group,
aria-hidden="true" sections: group.sections
className="absolute inset-0 bg-background/80 backdrop-blur-sm" .map((value) => visibleSectionByValue.get(value))
onClick={onClose} .filter(
/> (entry): entry is SettingsSectionDescriptor => entry != null,
),
}))
.filter((group) => group.sections.length > 0),
[visibleSectionByValue],
);
{/* biome-ignore lint/a11y/useKeyWithClickEvents: Click stops propagation to backdrop; keyboard dismiss handled by Escape key. */} return (
<div <>
aria-labelledby="settings-title" <Sidebar
aria-modal="true" className="!border-r-0"
className={cn( collapsible="offcanvas"
"relative mx-auto flex h-[min(600px,calc(100vh-2rem))] w-[calc(100%-4rem)] max-w-3xl flex-col overflow-hidden rounded-xl border border-border bg-background shadow-lg motion-safe:transition-all motion-safe:duration-200 motion-safe:ease-out", data-testid="settings-sidebar"
isLoaded ? "opacity-100 scale-100" : "opacity-0 scale-95", variant="sidebar"
)}
data-testid="settings-view"
onClick={(e) => e.stopPropagation()}
role="dialog"
> >
<header <SidebarHeader
className="flex shrink-0 items-center justify-between border-b border-border px-4 py-3" className="cursor-default select-none pt-11"
data-tauri-drag-region data-tauri-drag-region
> >
<h2 <SidebarMenu>
className="text-base font-semibold" <SidebarMenuItem>
data-testid="settings-title" <SidebarMenuButton
id="settings-title" data-testid="settings-back-to-app"
> onClick={onClose}
{mode === "profile" ? "Profile" : "Settings"} tooltip="Back to app"
</h2> type="button"
<button
aria-label="Close settings"
className="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
data-testid="settings-close"
onClick={onClose}
type="button"
>
<X className="h-4 w-4" />
</button>
</header>
<div
className={cn(
"grid min-h-0 flex-1 grid-rows-[auto_minmax(0,1fr)] overflow-hidden md:grid-rows-1",
showSectionNav
? "md:grid-cols-[220px_minmax(0,1fr)]"
: "md:grid-cols-1",
)}
>
{showSectionNav ? (
<aside
className={cn(
"flex flex-col border-b border-border/70 bg-muted/20 motion-safe:transition-all motion-safe:duration-200 motion-safe:ease-out md:border-b-0 md:border-r",
isLoaded
? "opacity-100 translate-x-0"
: "opacity-0 -translate-x-2",
)}
>
<nav
aria-label="Settings sections"
className="flex gap-1 overflow-x-auto px-3 py-3 md:flex-1 md:flex-col md:overflow-y-auto md:pt-1"
> >
{visibleSections.map((entry) => ( <ArrowLeft className="h-4 w-4" />
<SettingsSectionButton <span>Back to app</span>
active={entry.value === section} </SidebarMenuButton>
isLoaded={isLoaded} </SidebarMenuItem>
key={entry.value} </SidebarMenu>
onSelect={onSectionChange} </SidebarHeader>
section={entry}
/>
))}
</nav>
{appVersion ? (
<p className="hidden px-3 pb-3 text-xs text-muted-foreground/60 md:block">
v{appVersion}
</p>
) : null}
</aside>
) : null}
<section className="flex min-h-0 flex-col overflow-y-auto px-4 pt-4 sm:px-6"> <SidebarContent>
{visibleNavGroups.map((group) => (
<SidebarGroup key={group.label}>
<SidebarGroupLabel>{group.label}</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu aria-label={`${group.label} settings sections`}>
{group.sections.map((entry) => (
<SettingsSectionButton
active={entry.value === section}
key={entry.value}
onSelect={onSectionChange}
section={entry}
/>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
))}
</SidebarContent>
<SidebarFooter>
{appVersion ? (
<p className="px-2 pb-1 text-xs text-sidebar-foreground/45">
v{appVersion}
</p>
) : null}
</SidebarFooter>
</Sidebar>
<SidebarInset
className={cn(
"relative min-h-0 min-w-0 overflow-hidden motion-safe:transition-opacity motion-safe:duration-200",
isLoaded ? "opacity-100" : "opacity-0",
)}
data-testid="settings-view"
>
<div
aria-hidden="true"
className="absolute inset-x-0 top-0 h-11"
data-tauri-drag-region
/>
<div className="flex min-h-0 flex-1 flex-col overflow-hidden pt-11">
<section className="min-h-0 flex-1 overflow-y-auto px-5 pb-5 pt-4 sm:px-6">
<div <div
className="mx-auto flex w-full max-w-4xl flex-1 flex-col gap-4" className="mx-auto flex w-full max-w-4xl flex-col gap-4"
data-testid={`settings-panel-${section}`} data-testid={`settings-panel-${section}`}
> >
{renderSettingsSection(section, { {renderSettingsSection(section, {
@@ -242,7 +272,7 @@ export function SettingsView({
</div> </div>
</section> </section>
</div> </div>
</div> </SidebarInset>
</div> </>
); );
} }

2
desktop/tests/e2e/integration.spec.ts
View File

@@ -41,7 +41,7 @@ async function assertDesktopNotificationsEnabled(
await expect(page.getByTestId("notifications-desktop-state")).toContainText( await expect(page.getByTestId("notifications-desktop-state")).toContainText(
"On", "On",
); );
await page.getByTestId("settings-close").click(); await page.getByTestId("settings-back-to-app").click();
} }
async function sendChannelMessage( async function sendChannelMessage(

2
desktop/tests/e2e/messaging.spec.ts
View File

@@ -379,7 +379,7 @@ test("shows your avatar on your own message when profile avatar is set", async (
await openSettings(page, "profile"); await openSettings(page, "profile");
await page.getByTestId("profile-avatar-url").fill(avatarUrl); await page.getByTestId("profile-avatar-url").fill(avatarUrl);
await page.getByTestId("profile-save").click(); await page.getByTestId("profile-save").click();
await page.getByTestId("settings-close").click(); await page.getByTestId("settings-back-to-app").click();
await page.getByTestId("channel-general").click(); await page.getByTestId("channel-general").click();
await expect(page.getByTestId("chat-title")).toHaveText("general"); await expect(page.getByTestId("chat-title")).toHaveText("general");

70
desktop/tests/e2e/profile.spec.ts
View File

@@ -19,7 +19,12 @@ test("updates the relay-backed profile from settings", async ({ page }) => {
await page.goto("/"); await page.goto("/");
await openSettings(page, "profile"); await openSettings(page, "profile");
await expect(page.getByTestId("settings-title")).toHaveText("Profile"); await expect(
page.getByTestId("settings-profile").getByRole("heading", {
exact: true,
name: "Profile",
}),
).toBeVisible();
await expect(page.getByTestId("profile-pubkey")).toContainText("deadbeef"); await expect(page.getByTestId("profile-pubkey")).toContainText("deadbeef");
await expect(page.getByTestId("profile-nip05")).toContainText("Not set"); await expect(page.getByTestId("profile-nip05")).toContainText("Not set");
@@ -36,7 +41,7 @@ test("updates the relay-backed profile from settings", async ({ page }) => {
await expect(page.getByTestId("profile-avatar-url")).toHaveValue(avatarUrl); await expect(page.getByTestId("profile-avatar-url")).toHaveValue(avatarUrl);
await expect(page.getByTestId("profile-about")).toHaveValue(about); await expect(page.getByTestId("profile-about")).toHaveValue(about);
await page.getByTestId("settings-close").click(); await page.getByTestId("settings-back-to-app").click();
await expectHomeView(page); await expectHomeView(page);
await expect(page.getByTestId("open-settings")).toBeVisible(); await expect(page.getByTestId("open-settings")).toBeVisible();
@@ -72,15 +77,45 @@ test("updates presence from the profile menu", async ({ page }) => {
).toContainText("Offline"); ).toContainText("Offline");
}); });
test("disables sidebar resize while settings are open", async ({ page }) => { test("renders settings in the app shell with a back button", async ({
page,
}) => {
await page.goto("/"); await page.goto("/");
const sidebarRail = page.locator('[data-sidebar="rail"]'); await expect(page.getByRole("button", { name: "Home" })).toBeVisible();
await expect(sidebarRail).toBeEnabled();
await openSettings(page, "appearance"); await openSettings(page);
await expect(sidebarRail).toBeDisabled(); await expect(page.getByTestId("settings-sidebar")).toBeVisible();
await expect(sidebarRail).toHaveCSS("pointer-events", "none"); await expect(page.getByTestId("settings-back-to-app")).toBeVisible();
await expect(page.getByPlaceholder("Search everything")).toHaveCount(0);
await expect(page.getByText("Personal", { exact: true })).toBeVisible();
await expect(page.getByTestId("settings-nav-profile")).toHaveAttribute(
"aria-pressed",
"true",
);
await expect(page.getByText("Workspaces", { exact: true })).toBeVisible();
await expect(
page.getByTestId("settings-nav-channel-templates"),
).toBeVisible();
await expect(page.getByText("App", { exact: true })).toBeVisible();
await expect(page.getByTestId("settings-nav-agents")).toBeVisible();
await expect(
page.getByTestId("settings-profile").getByRole("heading", {
exact: true,
name: "Profile",
}),
).toBeVisible();
await page.getByTestId("settings-nav-appearance").click();
await expect(
page.getByTestId("settings-theme").getByRole("heading", {
name: "Appearance",
}),
).toBeVisible();
await expect(page.getByRole("button", { name: "Home" })).toHaveCount(0);
await page.getByTestId("settings-back-to-app").click();
await expectHomeView(page);
await expect(page.getByRole("button", { name: "Home" })).toBeVisible();
}); });
test("notification settings drive the Home badge and desktop alerts", async ({ test("notification settings drive the Home badge and desktop alerts", async ({
@@ -105,7 +140,7 @@ test("notification settings drive the Home badge and desktop alerts", async ({
"On", "On",
); );
await page.getByTestId("settings-close").click(); await page.getByTestId("settings-back-to-app").click();
await page.getByTestId("channel-general").click(); await page.getByTestId("channel-general").click();
await expect(page.getByTestId("chat-title")).toHaveText("general"); await expect(page.getByTestId("chat-title")).toHaveText("general");
@@ -201,14 +236,14 @@ test("notification settings drive the Home badge and desktop alerts", async ({
await openSettings(page, "notifications"); await openSettings(page, "notifications");
await page.getByTestId("notifications-home-badge-toggle").click(); await page.getByTestId("notifications-home-badge-toggle").click();
await page.getByTestId("settings-close").click(); await page.getByTestId("settings-back-to-app").click();
await expect(page.getByTestId("chat-title")).toHaveText("engineering"); await expect(page.getByTestId("chat-title")).toHaveText("engineering");
await expect(page.getByTestId("sidebar-home-count")).toHaveCount(0); await expect(page.getByTestId("sidebar-home-count")).toHaveCount(0);
await expect.poll(getAppBadgeCount).toBe(baseline); await expect.poll(getAppBadgeCount).toBe(baseline);
await openSettings(page, "notifications"); await openSettings(page, "notifications");
await page.getByTestId("notifications-home-badge-toggle").click(); await page.getByTestId("notifications-home-badge-toggle").click();
await page.getByTestId("settings-close").click(); await page.getByTestId("settings-back-to-app").click();
await expect(page.getByTestId("sidebar-home-count")).toHaveText("1"); await expect(page.getByTestId("sidebar-home-count")).toHaveText("1");
await expect.poll(getAppBadgeCount).toBe(baseline + 1); await expect.poll(getAppBadgeCount).toBe(baseline + 1);
@@ -227,7 +262,7 @@ test("desktop notification clicks open the matching forum thread", async ({
await expect(page.getByTestId("notifications-desktop-state")).toContainText( await expect(page.getByTestId("notifications-desktop-state")).toContainText(
"On", "On",
); );
await page.getByTestId("settings-close").click(); await page.getByTestId("settings-back-to-app").click();
await expectHomeView(page); await expectHomeView(page);
await page.evaluate(() => { await page.evaluate(() => {
@@ -303,7 +338,16 @@ test("opens settings with the keyboard shortcut and updates theme", async ({
); );
await expect(page.getByTestId("settings-view")).toBeVisible(); await expect(page.getByTestId("settings-view")).toBeVisible();
await expect(page.getByTestId("settings-nav-appearance")).toBeVisible(); await expect(page.getByTestId("settings-nav-profile")).toHaveAttribute(
"aria-pressed",
"true",
);
await expect(
page.getByTestId("settings-profile").getByRole("heading", {
exact: true,
name: "Profile",
}),
).toBeVisible();
await page.getByTestId("settings-nav-appearance").click(); await page.getByTestId("settings-nav-appearance").click();
// Default theme is catppuccin-macchiato (dark) // Default theme is catppuccin-macchiato (dark)

8
desktop/tests/helpers/settings.ts
View File

@@ -21,14 +21,10 @@ export async function openProfileMenu(page: Page) {
export async function openSettings(page: Page, section?: SettingsSection) { export async function openSettings(page: Page, section?: SettingsSection) {
await openProfileMenu(page); await openProfileMenu(page);
if (section === "profile") { await page.getByTestId("profile-popover-settings").click();
await page.getByTestId("profile-popover-profile").click();
} else {
await page.getByTestId("profile-popover-settings").click();
}
await expect(page.getByTestId("settings-view")).toBeVisible(); await expect(page.getByTestId("settings-view")).toBeVisible();
if (section && section !== "profile") { if (section) {
await page.getByTestId(`settings-nav-${section}`).click(); await page.getByTestId(`settings-nav-${section}`).click();
} }
} }