@jant/core 0.3.25 → 0.3.27

package/src/routes/dash/settings.tsx

@@ -5,19 +5,28 @@
  */
 
 import { Hono } from "hono";
-import { useLingui } from "@lingui/react/macro";
 import type { Bindings } from "../../types.js";
 import type { AppVariables } from "../../app.js";
 import { DashLayout } from "../../ui/layouts/DashLayout.js";
 import { sse, dsRedirect, dsToast } from "../../lib/sse.js";
+import { arrayBufferToBase64 } from "../../lib/favicon.js";
 import {
   getSiteLanguage,
   getSiteName,
+  getHomeDefaultView,
+  getTimeZone,
+  getSiteFooter,
+  isNoIndex,
   getConfigFallback,
 } from "../../lib/config.js";
 import { SETTINGS_KEYS } from "../../lib/constants.js";
 import { getAvailableThemes } from "../../lib/theme.js";
-import type { ColorTheme } from "../../ui/color-themes.js";
+import { getMediaUrl, getPublicUrlForProvider } from "../../lib/image.js";
+import { TIMEZONES } from "../../lib/timezones.js";
+import { BUILTIN_FONT_THEMES } from "../../ui/font-themes.js";
+import { GeneralContent } from "../../ui/dash/settings/GeneralContent.js";
+import { AppearanceContent } from "../../ui/dash/settings/AppearanceContent.js";
+import { AccountContent } from "../../ui/dash/settings/AccountContent.js";
 
 /** Escape HTML special characters for safe insertion into HTML strings */
 function escapeHtml(str: string): string {
@@ -32,544 +41,46 @@ type Env = { Bindings: Bindings; Variables: AppVariables };
 
 export const settingsRoutes = new Hono<Env>();
 
-// ---------------------------------------------------------------------------
-// Shared sub-navigation
-// ---------------------------------------------------------------------------
-
-type SettingsTab = "general" | "appearance" | "account";
-
-function SettingsNav({ currentTab }: { currentTab: SettingsTab }) {
-  const { t } = useLingui();
-
-  const tabs: { id: SettingsTab; label: string; href: string }[] = [
-    {
-      id: "general",
-      label: t({
-        message: "General",
-        comment: "@context: Settings sub-navigation tab",
-      }),
-      href: "/dash/settings",
-    },
-    {
-      id: "appearance",
-      label: t({
-        message: "Appearance",
-        comment: "@context: Settings sub-navigation tab",
-      }),
-      href: "/dash/settings/appearance",
-    },
-    {
-      id: "account",
-      label: t({
-        message: "Account",
-        comment: "@context: Settings sub-navigation tab",
-      }),
-      href: "/dash/settings/account",
-    },
-  ];
-
-  return (
-    <nav class="flex gap-1 mb-6">
-      {tabs.map((tab) => (
-        <a
-          key={tab.id}
-          href={tab.href}
-          class={`px-3 py-2 text-sm rounded-md ${
-            tab.id === currentTab
-              ? "bg-accent text-accent-foreground font-medium"
-              : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-          }`}
-        >
-          {tab.label}
-        </a>
-      ))}
-    </nav>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// General tab
-// ---------------------------------------------------------------------------
-
-function GeneralContent({
-  siteName,
-  siteDescription,
-  siteLanguage,
-  siteNameFallback,
-  siteDescriptionFallback,
-}: {
-  siteName: string;
-  siteDescription: string;
-  siteLanguage: string;
-  siteNameFallback: string;
-  siteDescriptionFallback: string;
-}) {
-  const { t } = useLingui();
-
-  const generalSignals = JSON.stringify({
-    siteName,
-    siteDescription,
-    siteLanguage,
-  }).replace(/</g, "\\u003c");
-
-  return (
-    <>
-      <h1 class="text-2xl font-semibold mb-2">
-        {t({ message: "Settings", comment: "@context: Dashboard heading" })}
-      </h1>
-      <SettingsNav currentTab="general" />
-
-      <div class="flex flex-col gap-6 max-w-lg">
-        <form
-          data-signals={generalSignals}
-          data-on:submit__prevent="@post('/dash/settings')"
-          data-indicator="_loading"
-        >
-          <div class="card">
-            <header>
-              <h2>
-                {t({
-                  message: "General",
-                  comment: "@context: Settings section heading",
-                })}
-              </h2>
-            </header>
-            <section class="flex flex-col gap-4">
-              <div class="field">
-                <label class="label">
-                  {t({
-                    message: "Site Name",
-                    comment: "@context: Settings form field",
-                  })}
-                </label>
-                <input
-                  type="text"
-                  data-bind="siteName"
-                  class="input"
-                  placeholder={siteNameFallback}
-                />
-              </div>
-
-              <div class="field">
-                <label class="label">
-                  {t({
-                    message: "Site Description",
-                    comment: "@context: Settings form field",
-                  })}
-                </label>
-                <textarea
-                  data-bind="siteDescription"
-                  class="textarea"
-                  rows={3}
-                  placeholder={siteDescriptionFallback}
-                >
-                  {siteDescription}
-                </textarea>
-              </div>
-
-              <div class="field">
-                <label class="label">
-                  {t({
-                    message: "Language",
-                    comment: "@context: Settings form field",
-                  })}
-                </label>
-                <select data-bind="siteLanguage" class="select">
-                  <option value="en" selected={siteLanguage === "en"}>
-                    English
-                  </option>
-                  <option value="zh-Hans" selected={siteLanguage === "zh-Hans"}>
-                    简体中文
-                  </option>
-                  <option value="zh-Hant" selected={siteLanguage === "zh-Hant"}>
-                    繁體中文
-                  </option>
-                </select>
-              </div>
-            </section>
-          </div>
-
-          <button type="submit" class="btn mt-4" data-attr-disabled="$_loading">
-            <span data-show="!$_loading">
-              {t({
-                message: "Save Settings",
-                comment: "@context: Button to save settings",
-              })}
-            </span>
-            <span data-show="$_loading">
-              {t({
-                message: "Processing...",
-                comment:
-                  "@context: Loading text shown on submit button while request is in progress",
-              })}
-            </span>
-          </button>
-        </form>
-      </div>
-    </>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Appearance tab
-// ---------------------------------------------------------------------------
-
-function ThemeCard({
-  theme,
-  selected,
-}: {
-  theme: ColorTheme;
-  selected: boolean;
-}) {
-  const expr = `$theme === '${theme.id}'`;
-  const { preview } = theme;
-
-  return (
-    <label
-      class={`block cursor-pointer rounded-lg border overflow-hidden transition-colors ${selected ? "border-primary" : "border-border"}`}
-      data-class:border-primary={expr}
-      data-class:border-border={`$theme !== '${theme.id}'`}
-    >
-      <div class="grid grid-cols-2">
-        <div
-          class="p-5"
-          style={`background-color:${preview.lightBg};color:${preview.lightText}`}
-        >
-          <input
-            type="radio"
-            name="theme"
-            value={theme.id}
-            data-bind="theme"
-            checked={selected || undefined}
-            class="mb-1"
-          />
-          <h3 class="font-bold text-lg">{theme.name}</h3>
-          <p class="text-sm mt-2 leading-relaxed">
-            This is the {theme.name} theme in light mode. Links{" "}
-            <a
-              tabIndex={-1}
-              class="underline"
-              style={`color:${preview.lightLink}`}
-            >
-              look like this
-            </a>
-            . We'll show the correct light or dark mode based on your visitor's
-            settings.
-          </p>
-        </div>
-        <div
-          class="p-5"
-          style={`background-color:${preview.darkBg};color:${preview.darkText}`}
-        >
-          <h3 class="font-bold text-lg">{theme.name}</h3>
-          <p class="text-sm mt-2 leading-relaxed">
-            This is the {theme.name} theme in dark mode. Links{" "}
-            <a
-              tabIndex={-1}
-              class="underline"
-              style={`color:${preview.darkLink}`}
-            >
-              look like this
-            </a>
-            . We'll show the correct light or dark mode based on your visitor's
-            settings.
-          </p>
-        </div>
-      </div>
-    </label>
-  );
-}
-
-function AppearanceContent({
-  themes,
-  currentThemeId,
-  customCSS,
-}: {
-  themes: ColorTheme[];
-  currentThemeId: string;
-  customCSS: string;
-}) {
-  const { t } = useLingui();
-
-  const themeSignals = JSON.stringify({ theme: currentThemeId }).replace(
-    /</g,
-    "\\u003c",
-  );
-
-  const cssSignals = JSON.stringify({ customCSS }).replace(/</g, "\\u003c");
-
-  return (
-    <>
-      <h1 class="text-2xl font-semibold mb-2">
-        {t({ message: "Settings", comment: "@context: Dashboard heading" })}
-      </h1>
-      <SettingsNav currentTab="appearance" />
-
-      <div
-        data-signals={themeSignals}
-        data-on:change="@post('/dash/settings/appearance')"
-        class="max-w-3xl"
-      >
-        <fieldset>
-          <legend class="text-lg font-semibold">
-            {t({
-              message: "Color theme",
-              comment: "@context: Appearance settings heading",
-            })}
-          </legend>
-          <p class="text-sm text-muted-foreground mb-4">
-            {t({
-              message:
-                "This will theme both your site and your dashboard. All color themes support dark mode.",
-              comment: "@context: Appearance settings description",
-            })}
-          </p>
-
-          <div class="flex flex-col gap-4">
-            {themes.map((theme) => (
-              <ThemeCard
-                key={theme.id}
-                theme={theme}
-                selected={theme.id === currentThemeId}
-              />
-            ))}
-          </div>
-        </fieldset>
-      </div>
-
-      <form
-        data-signals={cssSignals}
-        data-on:submit__prevent="@post('/dash/settings/custom-css')"
-        data-indicator="_cssLoading"
-        class="max-w-3xl mt-8"
-      >
-        <fieldset>
-          <legend class="text-lg font-semibold">
-            {t({
-              message: "Custom CSS",
-              comment: "@context: Appearance settings heading for custom CSS",
-            })}
-          </legend>
-          <p class="text-sm text-muted-foreground mb-4">
-            {t({
-              message:
-                "Add custom CSS to override any styles. Use data attributes like [data-page], [data-post], [data-format] to target specific elements.",
-              comment: "@context: Custom CSS settings description",
-            })}
-          </p>
-          <textarea
-            data-bind="customCSS"
-            class="textarea font-mono text-sm min-h-32"
-            rows={8}
-            placeholder={t({
-              message: "/* Your custom CSS here */",
-              comment: "@context: Custom CSS textarea placeholder",
-            })}
-          >
-            {customCSS}
-          </textarea>
-        </fieldset>
-        <button
-          type="submit"
-          class="btn mt-4"
-          data-attr-disabled="$_cssLoading"
-        >
-          <span data-show="!$_cssLoading">
-            {t({
-              message: "Save CSS",
-              comment: "@context: Button to save custom CSS",
-            })}
-          </span>
-          <span data-show="$_cssLoading">
-            {t({
-              message: "Processing...",
-              comment:
-                "@context: Loading text shown on submit button while request is in progress",
-            })}
-          </span>
-        </button>
-      </form>
-    </>
-  );
-}
+// ===========================================================================
+// General settings
+// ===========================================================================
 
-// ---------------------------------------------------------------------------
-// Account tab
-// ---------------------------------------------------------------------------
-
-function AccountContent({ userName }: { userName: string }) {
-  const { t } = useLingui();
-
-  const profileSignals = JSON.stringify({ userName }).replace(/</g, "\\u003c");
-
-  return (
-    <>
-      <h1 class="text-2xl font-semibold mb-2">
-        {t({ message: "Settings", comment: "@context: Dashboard heading" })}
-      </h1>
-      <SettingsNav currentTab="account" />
-
-      <div class="flex flex-col gap-6 max-w-lg">
-        <form
-          data-signals={profileSignals}
-          data-on:submit__prevent="@post('/dash/settings/account')"
-          data-indicator="_profileLoading"
-        >
-          <div class="card">
-            <header>
-              <h2>
-                {t({
-                  message: "Profile",
-                  comment: "@context: Account settings section heading",
-                })}
-              </h2>
-            </header>
-            <section class="flex flex-col gap-4">
-              <div class="field">
-                <label class="label">
-                  {t({
-                    message: "Name",
-                    comment: "@context: Account settings form field",
-                  })}
-                </label>
-                <input
-                  type="text"
-                  data-bind="userName"
-                  class="input"
-                  required
-                />
-              </div>
-            </section>
-          </div>
-
-          <button
-            type="submit"
-            class="btn mt-4"
-            data-attr-disabled="$_profileLoading"
-          >
-            <span data-show="!$_profileLoading">
-              {t({
-                message: "Save Profile",
-                comment: "@context: Button to save profile",
-              })}
-            </span>
-            <span data-show="$_profileLoading">
-              {t({
-                message: "Processing...",
-                comment:
-                  "@context: Loading text shown on submit button while request is in progress",
-              })}
-            </span>
-          </button>
-        </form>
-
-        <form
-          data-signals="{currentPassword: '', newPassword: '', confirmPassword: ''}"
-          data-on:submit__prevent="@post('/dash/settings/password')"
-          data-indicator="_passwordLoading"
-        >
-          <div class="card">
-            <header>
-              <h2>
-                {t({
-                  message: "Change Password",
-                  comment: "@context: Settings section heading",
-                })}
-              </h2>
-            </header>
-            <section class="flex flex-col gap-4">
-              <div class="field">
-                <label class="label">
-                  {t({
-                    message: "Current Password",
-                    comment: "@context: Password form field",
-                  })}
-                </label>
-                <input
-                  type="password"
-                  data-bind="currentPassword"
-                  class="input"
-                  required
-                  autocomplete="current-password"
-                />
-              </div>
-
-              <div class="field">
-                <label class="label">
-                  {t({
-                    message: "New Password",
-                    comment: "@context: Password form field",
-                  })}
-                </label>
-                <input
-                  type="password"
-                  data-bind="newPassword"
-                  class="input"
-                  required
-                  minlength={8}
-                  autocomplete="new-password"
-                />
-              </div>
-
-              <div class="field">
-                <label class="label">
-                  {t({
-                    message: "Confirm New Password",
-                    comment: "@context: Password form field",
-                  })}
-                </label>
-                <input
-                  type="password"
-                  data-bind="confirmPassword"
-                  class="input"
-                  required
-                  minlength={8}
-                  autocomplete="new-password"
-                />
-              </div>
-            </section>
-          </div>
-
-          <button
-            type="submit"
-            class="btn mt-4"
-            data-attr-disabled="$_passwordLoading"
-          >
-            <span data-show="!$_passwordLoading">
-              {t({
-                message: "Change Password",
-                comment: "@context: Button to change password",
-              })}
-            </span>
-            <span data-show="$_passwordLoading">
-              {t({
-                message: "Processing...",
-                comment:
-                  "@context: Loading text shown on submit button while request is in progress",
-              })}
-            </span>
-          </button>
-        </form>
-      </div>
-    </>
+/** Resolve the avatar storage key to a URL */
+async function resolveAvatarUrl(c: {
+  var: { services: AppVariables["services"] };
+  env: Bindings;
+}): Promise<string> {
+  const avatarKey = await c.var.services.settings.get("SITE_AVATAR");
+  if (!avatarKey) return "";
+  const publicUrl = getPublicUrlForProvider(
+    c.env.STORAGE_DRIVER || "r2",
+    c.env.R2_PUBLIC_URL,
+    c.env.S3_PUBLIC_URL,
   );
+  return getMediaUrl(avatarKey, publicUrl);
 }
 
-// ===========================================================================
-// Route handlers
-// ===========================================================================
-
-// General settings page
 settingsRoutes.get("/", async (c) => {
   const { settings } = c.var.services;
 
   const dbSiteName = await settings.get("SITE_NAME");
   const dbSiteDescription = await settings.get("SITE_DESCRIPTION");
-  const siteLanguage = await getSiteLanguage(c);
+  const [siteLanguage, homeDefaultView, timeZone, siteFooter, noindex] =
+    await Promise.all([
+      getSiteLanguage(c),
+      getHomeDefaultView(c),
+      getTimeZone(c),
+      getSiteFooter(c),
+      isNoIndex(c),
+    ]);
 
   const siteNameFallback = getConfigFallback(c, "SITE_NAME");
   const siteDescriptionFallback = getConfigFallback(c, "SITE_DESCRIPTION");
 
+  const siteAvatarUrl = await resolveAvatarUrl(c);
+  const showHeaderAvatar =
+    (await settings.get("SHOW_HEADER_AVATAR")) === "true";
+
   const saved = c.req.query("saved") !== undefined;
 
   return c.html(
@@ -584,19 +95,27 @@ settingsRoutes.get("/", async (c) => {
         siteName={dbSiteName || ""}
         siteDescription={dbSiteDescription || ""}
         siteLanguage={siteLanguage}
+        homeDefaultView={homeDefaultView}
         siteNameFallback={siteNameFallback}
         siteDescriptionFallback={siteDescriptionFallback}
+        siteAvatarUrl={siteAvatarUrl}
+        showHeaderAvatar={showHeaderAvatar}
+        timeZone={timeZone}
+        siteFooter={siteFooter}
+        noindex={noindex}
+        timezones={TIMEZONES}
       />
     </DashLayout>,
   );
 });
 
-// Save general settings
 settingsRoutes.post("/", async (c) => {
   const body = await c.req.json<{
     siteName: string;
     siteDescription: string;
     siteLanguage: string;
+    homeDefaultView: string;
+    timeZone: string;
   }>();
 
   const { settings } = c.var.services;
@@ -617,6 +136,20 @@ settingsRoutes.post("/", async (c) => {
 
   await settings.set("SITE_LANGUAGE", body.siteLanguage);
 
+  // Save homepage default view (only store if non-default)
+  if (body.homeDefaultView === "featured") {
+    await settings.set("HOME_DEFAULT_VIEW", body.homeDefaultView);
+  } else {
+    await settings.remove("HOME_DEFAULT_VIEW");
+  }
+
+  // Timezone
+  if (body.timeZone && body.timeZone !== "UTC") {
+    await settings.set("TIME_ZONE", body.timeZone);
+  } else {
+    await settings.remove("TIME_ZONE");
+  }
+
   const languageChanged = oldLanguage !== body.siteLanguage;
   const displayName = body.siteName.trim() || getConfigFallback(c, "SITE_NAME");
 
@@ -633,15 +166,172 @@ settingsRoutes.post("/", async (c) => {
         selector: "title",
       });
       await stream.toast("Settings saved successfully.");
+      await stream.patchSignals({
+        _orig_siteName: body.siteName,
+        _orig_siteDescription: body.siteDescription,
+        _orig_siteLanguage: body.siteLanguage,
+        _orig_homeDefaultView: body.homeDefaultView,
+        _orig_timeZone: body.timeZone,
+        _generalDirty: false,
+      });
+    }
+  });
+});
+
+settingsRoutes.post("/footer", async (c) => {
+  const body = await c.req.json<{ siteFooter: string }>();
+  const { settings } = c.var.services;
+
+  if (body.siteFooter?.trim()) {
+    await settings.set("SITE_FOOTER", body.siteFooter.trim());
+  } else {
+    await settings.remove("SITE_FOOTER");
+  }
+
+  return sse(c, async (stream) => {
+    await stream.toast("Footer saved successfully.");
+    await stream.patchSignals({
+      _orig_siteFooter: body.siteFooter,
+      _footerDirty: false,
+    });
+  });
+});
+
+settingsRoutes.post("/seo", async (c) => {
+  const body = await c.req.json<{ noindex: string }>();
+  const { settings } = c.var.services;
+
+  // Checkbox "noindex" is the allow-indexing signal:
+  // checked (value "true") = indexing allowed -> remove NOINDEX
+  // unchecked (value "") = indexing blocked -> set NOINDEX=true
+  if (body.noindex === "true") {
+    await settings.remove("NOINDEX");
+  } else {
+    await settings.set("NOINDEX", "true");
+  }
+
+  return sse(c, async (stream) => {
+    await stream.toast("SEO settings saved successfully.");
+    await stream.patchSignals({
+      _orig_noindex: body.noindex,
+      _seoDirty: false,
+    });
+  });
+});
+
+// ===========================================================================
+// Avatar upload & removal
+// ===========================================================================
+
+settingsRoutes.post("/avatar", async (c) => {
+  const storage = c.var.storage;
+  if (!storage) {
+    return dsToast("Storage not configured.", "error");
+  }
+
+  const formData = await c.req.formData();
+  const file = formData.get("file") as File | null;
+  if (!file) {
+    return dsToast("No file provided.", "error");
+  }
+
+  const allowedTypes = [
+    "image/jpeg",
+    "image/png",
+    "image/gif",
+    "image/webp",
+    "image/svg+xml",
+  ];
+  if (!allowedTypes.includes(file.type)) {
+    return dsToast("File type not allowed.", "error");
+  }
+
+  const maxSize = 10 * 1024 * 1024;
+  if (file.size > maxSize) {
+    return dsToast("File too large (max 10MB).", "error");
+  }
+
+  const { uuidv7 } = await import("uuidv7");
+  const ext = file.name.split(".").pop() || "bin";
+  const id = uuidv7();
+  const date = new Date();
+  const year = date.getUTCFullYear();
+  const month = String(date.getUTCMonth() + 1).padStart(2, "0");
+  const filename = `${id}.${ext}`;
+  const storageKey = `media/${year}/${month}/${filename}`;
+
+  try {
+    await storage.put(storageKey, file.stream(), {
+      contentType: file.type,
+    });
+
+    await c.var.services.media.create({
+      id,
+      filename,
+      originalName: file.name,
+      mimeType: file.type,
+      size: file.size,
+      storageKey,
+      provider: c.env.STORAGE_DRIVER || "r2",
+    });
+
+    await c.var.services.settings.set("SITE_AVATAR", storageKey);
+
+    // Store favicon variants as base64 in settings (small files, accessed every page load)
+    const faviconFile = formData.get("favicon") as File | null;
+    const appleTouchFile = formData.get("appleTouch") as File | null;
+
+    if (faviconFile) {
+      const b64 = arrayBufferToBase64(await faviconFile.arrayBuffer());
+      await c.var.services.settings.set("SITE_FAVICON_ICO", b64);
     }
+
+    if (appleTouchFile) {
+      const b64 = arrayBufferToBase64(await appleTouchFile.arrayBuffer());
+      await c.var.services.settings.set("SITE_FAVICON_APPLE_TOUCH", b64);
+    }
+
+    return dsRedirect("/dash/settings?saved");
+  } catch {
+    return dsToast("Upload failed. Please try again.", "error");
+  }
+});
+
+settingsRoutes.post("/avatar/remove", async (c) => {
+  await c.var.services.settings.remove("SITE_AVATAR");
+  await c.var.services.settings.remove("SITE_FAVICON_ICO");
+  await c.var.services.settings.remove("SITE_FAVICON_APPLE_TOUCH");
+  return dsRedirect("/dash/settings?saved");
+});
+
+settingsRoutes.post("/avatar/display", async (c) => {
+  const body = await c.req.json<{ showHeaderAvatar: string }>();
+  const { settings } = c.var.services;
+
+  if (body.showHeaderAvatar === "true") {
+    await settings.set("SHOW_HEADER_AVATAR", "true");
+  } else {
+    await settings.remove("SHOW_HEADER_AVATAR");
+  }
+
+  return sse(c, async (stream) => {
+    await stream.toast("Avatar display setting saved successfully.");
+    await stream.patchSignals({
+      _orig_showHeaderAvatar: body.showHeaderAvatar,
+      _avatarDisplayDirty: false,
+    });
   });
 });
 
-// Appearance page
+// ===========================================================================
+// Appearance
+// ===========================================================================
+
 settingsRoutes.get("/appearance", async (c) => {
   const { settings } = c.var.services;
   const siteName = await getSiteName(c);
   const currentThemeId = (await settings.get(SETTINGS_KEYS.THEME)) ?? "default";
+  const currentFontThemeId = (await settings.get("FONT_THEME")) ?? "default";
   const customCSS = (await settings.get(SETTINGS_KEYS.CUSTOM_CSS)) ?? "";
   const themes = getAvailableThemes(c.var.config);
   const saved = c.req.query("saved") !== undefined;
@@ -657,13 +347,14 @@ settingsRoutes.get("/appearance", async (c) => {
       <AppearanceContent
         themes={themes}
         currentThemeId={currentThemeId}
+        fontThemes={BUILTIN_FONT_THEMES}
+        currentFontThemeId={currentFontThemeId}
         customCSS={customCSS}
       />
     </DashLayout>,
   );
 });
 
-// Save theme
 settingsRoutes.post("/appearance", async (c) => {
   const body = await c.req.json<{ theme: string }>();
   const { settings } = c.var.services;
@@ -683,7 +374,24 @@ settingsRoutes.post("/appearance", async (c) => {
   return dsRedirect("/dash/settings/appearance?saved");
 });
 
-// Save custom CSS
+settingsRoutes.post("/font-theme", async (c) => {
+  const body = await c.req.json<{ fontTheme: string }>();
+  const { settings } = c.var.services;
+
+  const validFont = BUILTIN_FONT_THEMES.find((f) => f.id === body.fontTheme);
+  if (!validFont) {
+    return dsToast("Invalid font theme selected.", "error");
+  }
+
+  if (validFont.id === "default") {
+    await settings.remove("FONT_THEME");
+  } else {
+    await settings.set("FONT_THEME", validFont.id);
+  }
+
+  return dsRedirect("/dash/settings/appearance?saved");
+});
+
 settingsRoutes.post("/custom-css", async (c) => {
   const body = await c.req.json<{ customCSS: string }>();
   const { settings } = c.var.services;
@@ -699,7 +407,10 @@ settingsRoutes.post("/custom-css", async (c) => {
   return dsToast("Custom CSS saved successfully.");
 });
 
-// Account page
+// ===========================================================================
+// Account
+// ===========================================================================
+
 settingsRoutes.get("/account", async (c) => {
   const siteName = await getSiteName(c);
   const session = await c.var.auth.api.getSession({
@@ -721,7 +432,6 @@ settingsRoutes.get("/account", async (c) => {
   );
 });
 
-// Save account profile
 settingsRoutes.post("/account", async (c) => {
   const body = await c.req.json<{ userName: string }>();
   const name = body.userName?.trim();
@@ -742,7 +452,6 @@ settingsRoutes.post("/account", async (c) => {
   return dsToast("Profile saved successfully.");
 });
 
-// Change password
 settingsRoutes.post("/password", async (c) => {
   const body = await c.req.json<{
     currentPassword: string;