feat(web): redesign settings

apps/web/src/components/account/change-password-settings.tsx

@@ -22,6 +22,7 @@ import { Input, type InputProps } from "@/components/ui/input";
 import useChangePassword from "@/hooks/mutations/use-change-password";
 import useListAccounts from "@/hooks/queries/use-list-accounts";
 import { toast } from "@/lib/toast";
+import { SettingsSectionHeader } from "@/components/settings/settings-section-header";
 
 type ChangePasswordFormValues = {
   currentPassword: string;
@@ -114,17 +115,13 @@ export function ChangePasswordSettings() {
   };
 
   return (
-    <div className="space-y-6">
-      <div className="space-y-1">
-        <h2 className="text-md font-medium">
-          {t("settings:securityPage.sectionTitle")}
-        </h2>
-        <p className="text-xs text-muted-foreground">
-          {t("settings:securityPage.sectionSubtitle")}
-        </p>
-      </div>
+    <div className="space-y-3">
+      <SettingsSectionHeader
+        title={t("settings:securityPage.sectionTitle")}
+        description={t("settings:securityPage.sectionSubtitle")}
+      />
 
-      <div className="space-y-4 border border-border rounded-md p-4 bg-sidebar">
+      <div className="space-y-4 rounded-xl border border-border bg-card p-4">
         {isLoading ? (
           <div className="flex justify-center py-6">
             <Loader2 className="size-4 animate-spin text-muted-foreground" />

apps/web/src/components/account/notification-preferences-settings.tsx

@@ -118,7 +118,7 @@ function ChannelCard({
 }) {
   return (
     <div
-      className="space-y-4 rounded-md border border-border bg-sidebar p-4"
+      className="space-y-4 rounded-xl border border-border bg-card p-4"
       data-channel={channel}
     >
       <div className="flex items-start justify-between gap-4">
@@ -245,7 +245,7 @@ function WorkspaceRuleCard({
   };
 
   return (
-    <div className="space-y-4 border border-border rounded-md bg-sidebar p-4">
+    <div className="space-y-4 rounded-xl border border-border bg-card p-4">
       <div className="flex items-start justify-between gap-4">
         <div className="min-w-0 space-y-1">
           <p className="text-sm font-medium">{workspace.name}</p>
@@ -574,7 +574,7 @@ export function NotificationPreferencesSettings() {
 
   return (
     <div className="space-y-8">
-      <div className="flex flex-col gap-5 rounded-md border bg-sidebar p-4">
+      <div className="flex flex-col gap-5 rounded-xl border border-border bg-card p-4">
         <div className="flex flex-col gap-1">
           <h2 className="font-medium">
             {t("settings:notificationsPage.eventPreferencesTitle")}

apps/web/src/components/account/theme-picker.tsx

@@ -0,0 +1,65 @@
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { Check } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { ThemePreviewWindow } from "@/components/account/theme-preview-window";
+import { RadioGroup } from "@/components/ui/radio-group";
+type Theme = "light" | "dark" | "system";
+
+const THEMES: { value: Theme; labelKey: string }[] = [
+  { value: "light", labelKey: "settings:preferencesPage.themeLight" },
+  { value: "dark", labelKey: "settings:preferencesPage.themeDark" },
+  { value: "system", labelKey: "settings:preferencesPage.themeSystem" },
+];
+
+type ThemePickerProps = {
+  value: Theme;
+  onChange: (theme: Theme) => void;
+};
+
+export function ThemePicker({ value, onChange }: ThemePickerProps) {
+  const { t } = useTranslation();
+
+  return (
+    <RadioGroup
+      value={value}
+      onValueChange={(next) => onChange(next as Theme)}
+      aria-label={t("settings:preferencesPage.theme")}
+      className="grid grid-cols-3 gap-3"
+    >
+      {THEMES.map((theme) => {
+        const checked = theme.value === value;
+
+        return (
+          <label
+            key={theme.value}
+            className="flex cursor-pointer flex-col gap-2"
+          >
+            <RadioPrimitive.Root
+              value={theme.value}
+              aria-label={t(theme.labelKey)}
+              className="h-20 overflow-hidden rounded-lg border border-border outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background data-checked:border-foreground data-checked:ring-2 data-checked:ring-foreground/15 sm:h-24"
+            >
+              {theme.value === "system" ? (
+                <span className="grid h-full grid-cols-2">
+                  <ThemePreviewWindow tone="light" />
+                  <ThemePreviewWindow tone="dark" className="pl-0" />
+                </span>
+              ) : (
+                <ThemePreviewWindow tone={theme.value} />
+              )}
+            </RadioPrimitive.Root>
+            <span
+              aria-hidden="true"
+              className="flex items-center gap-1.5 text-xs text-muted-foreground has-[svg]:font-medium has-[svg]:text-foreground"
+            >
+              {checked ? (
+                <Check aria-hidden="true" className="size-3.5" />
+              ) : null}
+              {t(theme.labelKey)}
+            </span>
+          </label>
+        );
+      })}
+    </RadioGroup>
+  );
+}

apps/web/src/components/account/theme-preview-window.tsx

@@ -0,0 +1,61 @@
+import { cn } from "@/lib/cn";
+
+type ThemePreviewWindowProps = {
+  tone: "light" | "dark";
+  className?: string;
+};
+
+// A tiny sketch of the app frame in a fixed palette, so each option shows
+// its theme regardless of the theme currently applied.
+export function ThemePreviewWindow({
+  tone,
+  className,
+}: ThemePreviewWindowProps) {
+  const dark = tone === "dark";
+
+  return (
+    <span
+      className={cn(
+        "flex h-full pt-2.5 pl-2.5",
+        dark ? "bg-neutral-950" : "bg-neutral-100",
+        className,
+      )}
+    >
+      <span
+        className={cn(
+          "flex flex-1 gap-2 rounded-tl-md border-t border-l p-2.5",
+          dark ? "border-white/10 bg-neutral-900" : "border-black/5 bg-white",
+        )}
+      >
+        <span className="flex w-8 shrink-0 flex-col gap-1.5">
+          <span
+            className={cn(
+              "h-1.5 rounded-full",
+              dark ? "bg-white/25" : "bg-black/15",
+            )}
+          />
+          <span
+            className={cn(
+              "h-1.5 w-6 rounded-full",
+              dark ? "bg-white/10" : "bg-black/5",
+            )}
+          />
+          <span
+            className={cn(
+              "h-1.5 w-7 rounded-full",
+              dark ? "bg-white/10" : "bg-black/5",
+            )}
+          />
+        </span>
+        <span className="flex min-w-0 flex-1 flex-col gap-1.5">
+          <span
+            className={cn("h-5 rounded", dark ? "bg-white/5" : "bg-black/4")}
+          />
+          <span
+            className={cn("h-5 rounded", dark ? "bg-white/5" : "bg-black/4")}
+          />
+        </span>
+      </span>
+    </span>
+  );
+}

apps/web/src/components/admin/user-management-panel.tsx

@@ -81,6 +81,7 @@ import {
   hasInstanceAdminRole,
   withInstanceAdminRole,
 } from "@/lib/instance-admin";
+import { SettingsPage } from "@/components/settings/settings-page";
 
 type PendingAction = {
   type: "deactivate" | "reactivate" | "delete";
@@ -222,30 +223,20 @@ function UserManagementPanel() {
   };
 
   return (
-    <div className="mx-auto flex w-full max-w-6xl flex-col gap-6">
-      <header className="flex flex-col gap-2">
-        <div className="flex items-center gap-3">
-          <div className="flex size-10 items-center justify-center rounded-xl border bg-sidebar text-muted-foreground shadow-xs/5">
-            <UsersRoundIcon aria-hidden="true" />
-          </div>
-          <div className="min-w-0">
-            <div className="flex items-center gap-2">
-              <h1 className="text-2xl font-semibold tracking-tight">
-                {t("settings:adminUsers.title")}
-              </h1>
-              <Badge variant="outline" size="sm">
-                {t("settings:adminUsers.instanceBadge")}
-              </Badge>
-            </div>
-            <p className="text-sm text-muted-foreground">
-              {t("settings:adminUsers.subtitle")}
-            </p>
-          </div>
-        </div>
-      </header>
-
+    <SettingsPage
+      className="max-w-5xl"
+      title={
+        <span className="flex items-center gap-2">
+          {t("settings:adminUsers.title")}
+          <Badge variant="outline" size="sm">
+            {t("settings:adminUsers.instanceBadge")}
+          </Badge>
+        </span>
+      }
+      description={t("settings:adminUsers.subtitle")}
+    >
       <section className="overflow-hidden rounded-xl border bg-card shadow-xs/5">
-        <div className="flex flex-col gap-4 border-b bg-sidebar/40 p-4 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex flex-col gap-4 border-b p-4 sm:flex-row sm:items-center sm:justify-between">
           <div className="flex items-center gap-3">
             <div>
               <h2 className="text-sm font-medium">
@@ -519,7 +510,7 @@ function UserManagementPanel() {
         </div>
 
         {!isLoading && !isError ? (
-          <div className="flex items-center justify-between gap-4 border-t bg-sidebar/30 px-4 py-3">
+          <div className="flex items-center justify-between gap-4 border-t px-4 py-3">
             <p className="text-xs text-muted-foreground tabular-nums">
               {t("settings:adminUsers.pagination", {
                 current: page + 1,
@@ -699,7 +690,7 @@ function UserManagementPanel() {
           </AlertDialogFooter>
         </AlertDialogPopup>
       </AlertDialog>
-    </div>
+    </SettingsPage>
   );
 }
 

apps/web/src/components/billing/founding-free-card.tsx

@@ -6,7 +6,7 @@ export function FoundingFreeCard() {
   const { t } = useTranslation();
 
   return (
-    <div className="overflow-hidden rounded-md border border-primary/30 bg-sidebar">
+    <div className="overflow-hidden rounded-xl border border-primary/30 bg-card">
       <div className="flex items-start gap-3 p-5">
         <div className="mt-0.5 flex size-9 items-center justify-center rounded-md bg-primary/10 text-primary">
           <Sparkles className="size-4.5" />

apps/web/src/components/billing/subscription-card.tsx

@@ -35,7 +35,7 @@ export function SubscriptionCard({
   const renews = formatBillingDate(billing.currentPeriodEnd);
 
   return (
-    <div className="rounded-md border border-border bg-sidebar">
+    <div className="rounded-xl border border-border bg-card">
       <div className="flex flex-wrap items-start justify-between gap-4 p-5">
         <div className="space-y-1.5">
           <div className="flex items-center gap-2">