@jant/core 0.3.34 → 0.3.36

package/src/routes/dash/settings.tsx

@@ -1,7 +1,9 @@
 /**
  * Dashboard Settings Routes
  *
- * Sub-pages: General, Account
+ * Unified settings hub — root page with iOS-style grouped list,
+ * plus sub-pages for General, Avatar, Navigation, Color Theme,
+ * Font Theme, Custom CSS, and Account.
  */
 
 import { Hono } from "hono";
@@ -14,18 +16,47 @@ import { getI18n } from "../../i18n/index.js";
 import { TIMEZONES } from "../../lib/timezones.js";
 import { escapeHtml } from "../../lib/html.js";
 import { ValidationError } from "../../lib/errors.js";
+import { SETTINGS_KEYS } from "../../lib/constants.js";
+import { getAvailableThemes } from "../../lib/theme.js";
+import { BUILTIN_FONT_THEMES } from "../../ui/font-themes.js";
+import { SettingsRootContent } from "../../ui/dash/settings/SettingsRootContent.js";
 import { GeneralContent } from "../../ui/dash/settings/GeneralContent.js";
+import { AvatarContent } from "../../ui/dash/settings/AvatarContent.js";
 import { AccountContent } from "../../ui/dash/settings/AccountContent.js";
+import { NavigationContent } from "../../ui/dash/appearance/NavigationContent.js";
+import { ColorThemeContent } from "../../ui/dash/appearance/ColorThemeContent.js";
+import { FontThemeContent } from "../../ui/dash/appearance/FontThemeContent.js";
+import { AdvancedContent } from "../../ui/dash/appearance/AdvancedContent.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
 export const settingsRoutes = new Hono<Env>();
 
 // ===========================================================================
-// General settings
+// Settings root — iOS-style grouped list
 // ===========================================================================
 
 settingsRoutes.get("/", async (c) => {
+  const siteName = c.var.appConfig.siteName;
+
+  return c.html(
+    <DashLayout
+      c={c}
+      title="Settings"
+      siteName={siteName}
+      siteAvatarUrl={c.var.appConfig.siteAvatarUrl}
+      currentPath="/dash/settings"
+    >
+      <SettingsRootContent />
+    </DashLayout>,
+  );
+});
+
+// ===========================================================================
+// General settings
+// ===========================================================================
+
+settingsRoutes.get("/general", async (c) => {
   const { allSettings, appConfig } = c.var;
 
   const dbSiteName = allSettings["SITE_NAME"] ?? "";
@@ -36,10 +67,16 @@ settingsRoutes.get("/", async (c) => {
   return c.html(
     <DashLayout
       c={c}
-      title="Settings"
+      title="General"
       siteName={dbSiteName || appConfig.fallbacks.siteName}
+      siteAvatarUrl={appConfig.siteAvatarUrl}
       currentPath="/dash/settings"
-      toast={saved ? { message: "Settings saved successfully." } : undefined}
+      breadcrumb={{
+        parent: "Settings",
+        parentHref: "/dash/settings",
+        current: "General",
+      }}
+      toast={saved ? { message: "Settings updated." } : undefined}
     >
       <GeneralContent
         siteName={dbSiteName || ""}
@@ -47,8 +84,6 @@ settingsRoutes.get("/", async (c) => {
         siteLanguage={appConfig.siteLanguage}
         siteNameFallback={appConfig.fallbacks.siteName}
         siteDescriptionFallback={appConfig.fallbacks.siteDescription}
-        siteAvatarUrl={appConfig.siteAvatarUrl}
-        showHeaderAvatar={appConfig.showHeaderAvatar}
         timeZone={appConfig.timeZone}
         siteFooter={appConfig.siteFooter}
         noindex={appConfig.noindex}
@@ -58,7 +93,7 @@ settingsRoutes.get("/", async (c) => {
   );
 });
 
-settingsRoutes.post("/", async (c) => {
+settingsRoutes.post("/general", async (c) => {
   const i18n = getI18n(c);
   const body = await c.req.json<{
     siteName: string;
@@ -82,14 +117,14 @@ settingsRoutes.post("/", async (c) => {
     if (languageChanged) {
       return c.json({
         status: "redirect" as const,
-        url: "/dash/settings?saved",
+        url: "/dash/settings/general?saved",
       });
     }
     return c.json({
       status: "ok" as const,
       toast: i18n._(
         msg({
-          message: "Settings saved successfully.",
+          message: "Settings updated.",
           comment: "@context: Toast after saving general settings",
         }),
       ),
@@ -99,20 +134,20 @@ settingsRoutes.post("/", async (c) => {
 
   return sse(c, async (stream) => {
     if (languageChanged) {
-      await stream.redirect("/dash/settings?saved");
+      await stream.redirect("/dash/settings/general?saved");
     } else {
       const escaped = escapeHtml(displayName);
       await stream.patchElements(
         `<a id="site-name" href="/dash" class="font-semibold">${escaped}</a>`,
       );
-      await stream.patchElements(`Settings - ${escaped}`, {
+      await stream.patchElements(`General - ${escaped}`, {
         mode: "inner",
         selector: "title",
       });
       await stream.toast(
         i18n._(
           msg({
-            message: "Settings saved successfully.",
+            message: "Settings updated.",
             comment: "@context: Toast after saving general settings",
           }),
         ),
@@ -129,7 +164,7 @@ settingsRoutes.post("/", async (c) => {
   });
 });
 
-settingsRoutes.post("/seo", async (c) => {
+settingsRoutes.post("/general/seo", async (c) => {
   const i18n = getI18n(c);
   const body = await c.req.json<{ noindex: string }>();
   const { settings } = c.var.services;
@@ -150,7 +185,7 @@ settingsRoutes.post("/seo", async (c) => {
       status: "ok" as const,
       toast: i18n._(
         msg({
-          message: "SEO settings saved successfully.",
+          message: "SEO settings updated.",
           comment: "@context: Toast after saving SEO settings",
         }),
       ),
@@ -161,7 +196,7 @@ settingsRoutes.post("/seo", async (c) => {
     await stream.toast(
       i18n._(
         msg({
-          message: "SEO settings saved successfully.",
+          message: "SEO settings updated.",
           comment: "@context: Toast after saving SEO settings",
         }),
       ),
@@ -174,9 +209,35 @@ settingsRoutes.post("/seo", async (c) => {
 });
 
 // ===========================================================================
-// Avatar upload & removal
+// Avatar
 // ===========================================================================
 
+settingsRoutes.get("/avatar", async (c) => {
+  const siteName = c.var.appConfig.siteName;
+  const saved = c.req.query("saved") !== undefined;
+
+  return c.html(
+    <DashLayout
+      c={c}
+      title="Avatar"
+      siteName={siteName}
+      siteAvatarUrl={c.var.appConfig.siteAvatarUrl}
+      currentPath="/dash/settings"
+      breadcrumb={{
+        parent: "Settings",
+        parentHref: "/dash/settings",
+        current: "Avatar",
+      }}
+      toast={saved ? { message: "Avatar updated." } : undefined}
+    >
+      <AvatarContent
+        siteAvatarUrl={c.var.appConfig.siteAvatarUrl}
+        showHeaderAvatar={c.var.appConfig.showHeaderAvatar}
+      />
+    </DashLayout>,
+  );
+});
+
 settingsRoutes.post("/avatar", async (c) => {
   const i18n = getI18n(c);
   const storage = c.var.storage;
@@ -184,7 +245,7 @@ settingsRoutes.post("/avatar", async (c) => {
     return dsToast(
       i18n._(
         msg({
-          message: "Storage not configured.",
+          message: "File storage isn't set up. Check your server config.",
           comment: "@context: Error toast when file storage is not set up",
         }),
       ),
@@ -198,7 +259,7 @@ settingsRoutes.post("/avatar", async (c) => {
     return dsToast(
       i18n._(
         msg({
-          message: "No file provided.",
+          message: "No file selected. Choose a file to upload.",
           comment: "@context: Error toast when no file was selected for upload",
         }),
       ),
@@ -222,10 +283,11 @@ settingsRoutes.post("/avatar", async (c) => {
         media: c.var.services.media,
         storage,
         storageProvider: c.var.appConfig.storageDriver,
+        maxFileSizeMB: c.var.appConfig.uploadMaxFileSize,
       },
     );
 
-    return dsRedirect("/dash/settings?saved");
+    return dsRedirect("/dash/settings/avatar?saved");
   } catch (e) {
     if (e instanceof ValidationError) {
       return dsToast(e.message, "error");
@@ -233,7 +295,7 @@ settingsRoutes.post("/avatar", async (c) => {
     return dsToast(
       i18n._(
         msg({
-          message: "Upload failed. Please try again.",
+          message: "Upload didn't go through. Try again in a moment.",
           comment: "@context: Error toast when avatar upload fails",
         }),
       ),
@@ -248,10 +310,13 @@ settingsRoutes.post("/avatar/remove", async (c) => {
   // ── JSON response mode (used by Lit settings bridge) ──────────────
   const wantsJson = c.req.header("accept")?.includes("application/json");
   if (wantsJson) {
-    return c.json({ status: "redirect" as const, url: "/dash/settings?saved" });
+    return c.json({
+      status: "redirect" as const,
+      url: "/dash/settings/avatar?saved",
+    });
   }
 
-  return dsRedirect("/dash/settings?saved");
+  return dsRedirect("/dash/settings/avatar?saved");
 });
 
 settingsRoutes.post("/avatar/display", async (c) => {
@@ -272,7 +337,7 @@ settingsRoutes.post("/avatar/display", async (c) => {
       status: "ok" as const,
       toast: i18n._(
         msg({
-          message: "Avatar display setting saved successfully.",
+          message: "Avatar display updated.",
           comment: "@context: Toast after saving avatar display preference",
         }),
       ),
@@ -283,7 +348,7 @@ settingsRoutes.post("/avatar/display", async (c) => {
     await stream.toast(
       i18n._(
         msg({
-          message: "Avatar display setting saved successfully.",
+          message: "Avatar display updated.",
           comment: "@context: Toast after saving avatar display preference",
         }),
       ),
@@ -295,6 +360,238 @@ settingsRoutes.post("/avatar/display", async (c) => {
   });
 });
 
+// ===========================================================================
+// Navigation (moved from appearance routes)
+// ===========================================================================
+
+settingsRoutes.get("/navigation", async (c) => {
+  const [navItems, availablePages] = await Promise.all([
+    c.var.services.navItems.list(),
+    c.var.services.pages.listNotInNav(),
+  ]);
+  const siteName = c.var.appConfig.siteName;
+  const headerNavMaxVisible = c.var.appConfig.headerNavMaxVisible;
+  const homeDefaultView = c.var.appConfig.homeDefaultView;
+
+  return c.html(
+    <DashLayout
+      c={c}
+      title="Navigation"
+      siteName={siteName}
+      siteAvatarUrl={c.var.appConfig.siteAvatarUrl}
+      currentPath="/dash/settings"
+      breadcrumb={{
+        parent: "Settings",
+        parentHref: "/dash/settings",
+        current: "Navigation",
+      }}
+    >
+      <NavigationContent
+        navItems={navItems}
+        availablePages={availablePages}
+        headerNavMaxVisible={headerNavMaxVisible}
+        homeDefaultView={homeDefaultView}
+        siteName={siteName}
+      />
+    </DashLayout>,
+  );
+});
+
+settingsRoutes.post("/navigation/nav-max-visible", async (c) => {
+  const body = await c.req.json<{ value: number }>();
+  const { settings } = c.var.services;
+
+  const navMax = Math.max(0, Math.min(5, body.value ?? 3));
+  if (navMax !== 3) {
+    await settings.set("HEADER_NAV_MAX_VISIBLE", String(navMax));
+  } else {
+    await settings.remove("HEADER_NAV_MAX_VISIBLE");
+  }
+
+  return c.json({ ok: true });
+});
+
+settingsRoutes.post("/navigation/home-default-view", async (c) => {
+  const body = await c.req.json<{ value: string }>();
+  const { settings } = c.var.services;
+
+  if (body.value === "featured") {
+    await settings.set("HOME_DEFAULT_VIEW", "featured");
+  } else {
+    await settings.remove("HOME_DEFAULT_VIEW");
+  }
+
+  return c.json({ ok: true });
+});
+
+// ===========================================================================
+// Color Theme (moved from appearance routes)
+// ===========================================================================
+
+settingsRoutes.get("/color-theme", async (c) => {
+  const siteName = c.var.appConfig.siteName;
+  const defaultThemeId = c.var.appConfig.fallbacks.defaultTheme;
+  const currentThemeId =
+    c.var.allSettings[SETTINGS_KEYS.THEME] ?? defaultThemeId;
+  const themes = getAvailableThemes();
+  const saved = c.req.query("saved") !== undefined;
+
+  return c.html(
+    <DashLayout
+      c={c}
+      title="Color Theme"
+      siteName={siteName}
+      siteAvatarUrl={c.var.appConfig.siteAvatarUrl}
+      currentPath="/dash/settings"
+      breadcrumb={{
+        parent: "Settings",
+        parentHref: "/dash/settings",
+        current: "Color Theme",
+      }}
+      toast={saved ? { message: "Theme updated." } : undefined}
+    >
+      <ColorThemeContent themes={themes} currentThemeId={currentThemeId} />
+    </DashLayout>,
+  );
+});
+
+settingsRoutes.post("/color-theme", async (c) => {
+  const i18n = getI18n(c);
+  const body = await c.req.json<{ theme: string }>();
+  const { settings } = c.var.services;
+  const themes = getAvailableThemes();
+
+  const validTheme = themes.find((t) => t.id === body.theme);
+  if (!validTheme) {
+    return dsToast(
+      i18n._(
+        msg({
+          message: "That theme isn't available. Pick another one.",
+          comment: "@context: Error toast when selected theme is not valid",
+        }),
+      ),
+      "error",
+    );
+  }
+
+  const defaultThemeId = c.var.appConfig.fallbacks.defaultTheme;
+  if (validTheme.id === defaultThemeId) {
+    await settings.remove(SETTINGS_KEYS.THEME);
+  } else {
+    await settings.set(SETTINGS_KEYS.THEME, validTheme.id);
+  }
+
+  return dsRedirect("/dash/settings/color-theme?saved");
+});
+
+// ===========================================================================
+// Font Theme (moved from appearance routes)
+// ===========================================================================
+
+settingsRoutes.get("/font-theme", async (c) => {
+  const siteName = c.var.appConfig.siteName;
+  const currentFontThemeId = c.var.allSettings["FONT_THEME"] ?? "default";
+  const saved = c.req.query("saved") !== undefined;
+
+  return c.html(
+    <DashLayout
+      c={c}
+      title="Font Theme"
+      siteName={siteName}
+      siteAvatarUrl={c.var.appConfig.siteAvatarUrl}
+      currentPath="/dash/settings"
+      breadcrumb={{
+        parent: "Settings",
+        parentHref: "/dash/settings",
+        current: "Font Theme",
+      }}
+      toast={saved ? { message: "Font theme updated." } : undefined}
+    >
+      <FontThemeContent
+        fontThemes={BUILTIN_FONT_THEMES}
+        currentFontThemeId={currentFontThemeId}
+      />
+    </DashLayout>,
+  );
+});
+
+settingsRoutes.post("/font-theme", async (c) => {
+  const i18n = getI18n(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(
+      i18n._(
+        msg({
+          message: "That font theme isn't available. Pick another one.",
+          comment:
+            "@context: Error toast when selected font theme is not valid",
+        }),
+      ),
+      "error",
+    );
+  }
+
+  if (validFont.id === "default") {
+    await settings.remove("FONT_THEME");
+  } else {
+    await settings.set("FONT_THEME", validFont.id);
+  }
+
+  return dsRedirect("/dash/settings/font-theme?saved");
+});
+
+// ===========================================================================
+// Custom CSS (moved from appearance routes)
+// ===========================================================================
+
+settingsRoutes.get("/custom-css", async (c) => {
+  const siteName = c.var.appConfig.siteName;
+  const customCSS = c.var.allSettings[SETTINGS_KEYS.CUSTOM_CSS] ?? "";
+
+  return c.html(
+    <DashLayout
+      c={c}
+      title="Custom CSS"
+      siteName={siteName}
+      siteAvatarUrl={c.var.appConfig.siteAvatarUrl}
+      currentPath="/dash/settings"
+      breadcrumb={{
+        parent: "Settings",
+        parentHref: "/dash/settings",
+        current: "Custom CSS",
+      }}
+    >
+      <AdvancedContent customCSS={customCSS} />
+    </DashLayout>,
+  );
+});
+
+settingsRoutes.post("/custom-css", async (c) => {
+  const i18n = getI18n(c);
+  const body = await c.req.json<{ customCSS: string }>();
+  const { settings } = c.var.services;
+
+  const css = body.customCSS?.trim() ?? "";
+
+  if (css) {
+    await settings.set(SETTINGS_KEYS.CUSTOM_CSS, css);
+  } else {
+    await settings.remove(SETTINGS_KEYS.CUSTOM_CSS);
+  }
+
+  return dsToast(
+    i18n._(
+      msg({
+        message: "Custom CSS updated.",
+        comment: "@context: Toast after saving custom CSS",
+      }),
+    ),
+  );
+});
+
 // ===========================================================================
 // Account
 // ===========================================================================
@@ -310,10 +607,16 @@ settingsRoutes.get("/account", async (c) => {
   return c.html(
     <DashLayout
       c={c}
-      title="Settings"
+      title="Account"
       siteName={siteName}
+      siteAvatarUrl={c.var.appConfig.siteAvatarUrl}
       currentPath="/dash/settings"
-      toast={saved ? { message: "Profile saved successfully." } : undefined}
+      breadcrumb={{
+        parent: "Settings",
+        parentHref: "/dash/settings",
+        current: "Account",
+      }}
+      toast={saved ? { message: "Profile updated." } : undefined}
     >
       <AccountContent userName={userName} />
     </DashLayout>,
@@ -329,7 +632,7 @@ settingsRoutes.post("/account", async (c) => {
     return dsToast(
       i18n._(
         msg({
-          message: "Name is required.",
+          message: "A display name is required.",
           comment: "@context: Error toast when display name is empty",
         }),
       ),
@@ -346,7 +649,7 @@ settingsRoutes.post("/account", async (c) => {
     return dsToast(
       i18n._(
         msg({
-          message: "Failed to update profile.",
+          message: "Couldn't update your profile. Try again in a moment.",
           comment: "@context: Error toast when profile update fails",
         }),
       ),
@@ -357,7 +660,7 @@ settingsRoutes.post("/account", async (c) => {
   return dsToast(
     i18n._(
       msg({
-        message: "Profile saved successfully.",
+        message: "Profile updated.",
         comment: "@context: Toast after saving user profile",
       }),
     ),
@@ -376,7 +679,8 @@ settingsRoutes.post("/password", async (c) => {
     return dsToast(
       i18n._(
         msg({
-          message: "Passwords do not match.",
+          message:
+            "Passwords don't match. Make sure both fields are identical.",
           comment:
             "@context: Error toast when new password and confirmation differ",
         }),
@@ -398,7 +702,7 @@ settingsRoutes.post("/password", async (c) => {
     return dsToast(
       i18n._(
         msg({
-          message: "Current password is incorrect.",
+          message: "Current password doesn't match. Try again.",
           comment:
             "@context: Error toast when current password verification fails",
         }),
@@ -411,7 +715,7 @@ settingsRoutes.post("/password", async (c) => {
     await stream.toast(
       i18n._(
         msg({
-          message: "Password changed successfully.",
+          message: "Password changed.",
           comment: "@context: Toast after changing account password",
         }),
       ),