@@ -888,7 +906,7 @@ export function TopbarSearch({
) : null}
+
+
+
+ {t("appearance.language.title")}
+
+
+ {t("appearance.language.description")}
+
+
+
+
+
{/* Mode selector: System / Light / Dark */}
{(
[
- { mode: "system" as const, label: "System", Icon: SunMoon },
- { mode: "light" as const, label: "Light", Icon: Sun },
- { mode: "dark" as const, label: "Dark", Icon: Moon },
+ {
+ mode: "system" as const,
+ label: t("appearance.mode.system"),
+ Icon: SunMoon,
+ },
+ {
+ mode: "light" as const,
+ label: t("appearance.mode.light"),
+ Icon: Sun,
+ },
+ {
+ mode: "dark" as const,
+ label: t("appearance.mode.dark"),
+ Icon: Moon,
+ },
] as const
).map(({ mode, label, Icon }) => (
- {/* Accent color picker — hidden for Buzz themes (pinned neutral accent).
+ {/* Shell style picker — Buzz themes only (Raft / Persona5 / …). */}
+ {shellPickerVisible ? (
+
+ ) : null}
+
+ {/* Accent color picker — hidden for Buzz themes (shell style owns chrome).
Reveal/hide with the translate-up + opacity fade defined by
ACCENT_PICKER_TRANSITION above. Reduced motion skips the transition
and just renders/unrenders. */}
@@ -731,6 +769,63 @@ function ThreadLayoutSetting() {
);
}
+/** Shell style grid for Buzz chrome (Raft / Persona5 / multi-palette). */
+function ShellStylePickerContent({
+ shellStyle,
+ setShellStyle,
+}: {
+ shellStyle: ShellStyleId;
+ setShellStyle: (id: ShellStyleId) => void;
+}) {
+ const { t } = useI18n();
+ return (
+
+
+
+ {t("appearance.shellStyle.title")}
+
+
+ {t("appearance.shellStyle.description")}
+
+
+
+ {SHELL_STYLES.map((style) => {
+ const active = shellStyle === style.id;
+ return (
+
+ );
+ })}
+
+
+ );
+}
+
/** Accent swatch grid — shared by the animated and reduced-motion reveal paths. */
function AccentPickerContent({
accentColor,
diff --git a/desktop/src/features/settings/ui/SettingsView.tsx b/desktop/src/features/settings/ui/SettingsView.tsx
index 20389b420a..f8ab3cd4f7 100644
--- a/desktop/src/features/settings/ui/SettingsView.tsx
+++ b/desktop/src/features/settings/ui/SettingsView.tsx
@@ -12,6 +12,7 @@ import {
resolveEnabled,
useFeatureSnapshot,
} from "@/shared/features/useFeatureEnabled";
+import { type MsgKey, useI18n } from "@/shared/i18n";
import { topChromeBackdrop } from "@/shared/layout/chromeLayout";
import { cn } from "@/shared/lib/cn";
import {
@@ -49,11 +50,11 @@ type SettingsViewProps = SettingsPanelProps & {
};
const settingsNavGroups: Array<{
- label: string;
+ labelKey: MsgKey;
sections: SettingsSection[];
}> = [
{
- label: "Personal",
+ labelKey: "settings.group.personal",
sections: [
"profile",
"appearance",
@@ -64,21 +65,41 @@ const settingsNavGroups: Array<{
],
},
{
- label: "Communities",
+ labelKey: "settings.group.communities",
sections: ["hosted-communities", "channel-templates", "community-members"],
},
{
- label: "App",
+ labelKey: "settings.group.app",
sections: ["agents", "compute", "experimental", "mobile", "updates"],
},
];
+const SETTINGS_SECTION_LABEL_KEYS: Record
= {
+ appearance: "settings.section.appearance",
+ profile: "settings.section.profile",
+ notifications: "settings.section.notifications",
+ experimental: "settings.section.experimental",
+ agents: "settings.section.agents",
+ "channel-templates": "settings.section.channel-templates",
+ compute: "settings.section.compute",
+ shortcuts: "settings.section.shortcuts",
+ "hosted-communities": "settings.section.hosted-communities",
+ "community-members": "settings.section.community-members",
+ moderation: "settings.section.moderation",
+ "custom-emoji": "settings.section.custom-emoji",
+ "local-archive": "settings.section.local-archive",
+ mobile: "settings.section.mobile",
+ updates: "settings.section.updates",
+};
+
function SettingsSectionButton({
active,
+ label,
onSelect,
section,
}: {
active: boolean;
+ label: string;
onSelect: (section: SettingsSection) => void;
section: (typeof settingsSections)[number];
}) {
@@ -91,7 +112,7 @@ function SettingsSectionButton({
data-testid={`settings-nav-${section.value}`}
isActive={active}
onClick={() => onSelect(section.value)}
- tooltip={section.label}
+ tooltip={label}
type="button"
>
- {section.label}
+ {label}
);
@@ -125,6 +146,7 @@ export function SettingsView({
onSetSoundForSlot,
section,
}: SettingsViewProps) {
+ const { t } = useI18n();
const { isMobile, open: sidebarOpen, setOpen: setSidebarOpen } = useSidebar();
const myMembershipQuery = useMyRelayMembershipLookupQuery();
const featureState = useFeatureSnapshot();
@@ -225,11 +247,11 @@ export function SettingsView({
- Back to app
+ {t("settings.backToApp")}
@@ -242,7 +264,7 @@ export function SettingsView({
data-testid="community-access-loading"
>
- Checking invite permissions…
+ {t("settings.checkingInvitePermissions")}
) : null}
{myMembershipQuery.isError ? (
@@ -252,7 +274,7 @@ export function SettingsView({
>