@jant/core 0.3.36 → 0.3.38

package/src/routes/dash/settings.tsx

@@ -1,18 +1,20 @@
 /**
- * Dashboard Settings Routes
+ * Settings Routes
  *
  * 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.
+ * Font Theme, Custom CSS, Account (Sessions + Password), and API Tokens.
  */
 
 import { Hono } from "hono";
 import { msg } from "@lingui/core/macro";
 import type { Bindings } from "../../types.js";
 import type { AppVariables } from "../../types/app-context.js";
-import { DashLayout } from "../../ui/layouts/DashLayout.js";
 import { sse, dsRedirect, dsToast } from "../../lib/sse.js";
 import { getI18n } from "../../i18n/index.js";
+import { renderPublicPage } from "../../lib/render.js";
+import { getNavigationData } from "../../lib/navigation.js";
+import { AdminBreadcrumb } from "../../ui/shared/AdminBreadcrumb.js";
 import { TIMEZONES } from "../../lib/timezones.js";
 import { escapeHtml } from "../../lib/html.js";
 import { ValidationError } from "../../lib/errors.js";
@@ -22,11 +24,17 @@ 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 { AccountMenuContent } from "../../ui/dash/settings/AccountMenuContent.js";
 import { AccountContent } from "../../ui/dash/settings/AccountContent.js";
+import {
+  SessionsContent,
+  type SessionInfo,
+} from "../../ui/dash/settings/SessionsContent.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";
+import { ApiTokensContent } from "../../ui/dash/settings/ApiTokensContent.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -37,19 +45,13 @@ export const settingsRoutes = new Hono<Env>();
 // ===========================================================================
 
 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>,
-  );
+  const navData = await getNavigationData(c);
+
+  return renderPublicPage(c, {
+    title: `Settings - ${navData.siteName}`,
+    navData,
+    content: <SettingsRootContent />,
+  });
 });
 
 // ===========================================================================
@@ -63,34 +65,33 @@ settingsRoutes.get("/general", async (c) => {
   const dbSiteDescription = allSettings["SITE_DESCRIPTION"] ?? "";
 
   const saved = c.req.query("saved") !== undefined;
-
-  return c.html(
-    <DashLayout
-      c={c}
-      title="General"
-      siteName={dbSiteName || appConfig.fallbacks.siteName}
-      siteAvatarUrl={appConfig.siteAvatarUrl}
-      currentPath="/dash/settings"
-      breadcrumb={{
-        parent: "Settings",
-        parentHref: "/dash/settings",
-        current: "General",
-      }}
-      toast={saved ? { message: "Settings updated." } : undefined}
-    >
-      <GeneralContent
-        siteName={dbSiteName || ""}
-        siteDescription={dbSiteDescription || ""}
-        siteLanguage={appConfig.siteLanguage}
-        siteNameFallback={appConfig.fallbacks.siteName}
-        siteDescriptionFallback={appConfig.fallbacks.siteDescription}
-        timeZone={appConfig.timeZone}
-        siteFooter={appConfig.siteFooter}
-        noindex={appConfig.noindex}
-        timezones={TIMEZONES}
-      />
-    </DashLayout>,
-  );
+  const navData = await getNavigationData(c);
+
+  return renderPublicPage(c, {
+    title: `General - ${navData.siteName}`,
+    navData,
+    toast: saved ? { message: "Settings updated." } : undefined,
+    content: (
+      <>
+        <AdminBreadcrumb
+          parent="Settings"
+          parentHref="/settings"
+          current="General"
+        />
+        <GeneralContent
+          siteName={dbSiteName || ""}
+          siteDescription={dbSiteDescription || ""}
+          siteLanguage={appConfig.siteLanguage}
+          siteNameFallback={appConfig.fallbacks.siteName}
+          siteDescriptionFallback={appConfig.fallbacks.siteDescription}
+          timeZone={appConfig.timeZone}
+          siteFooter={appConfig.siteFooter}
+          noindex={appConfig.noindex}
+          timezones={TIMEZONES}
+        />
+      </>
+    ),
+  });
 });
 
 settingsRoutes.post("/general", async (c) => {
@@ -111,35 +112,28 @@ settingsRoutes.post("/general", async (c) => {
       fallbackSiteName: c.var.appConfig.fallbacks.siteName,
     });
 
+  // Sync user.name with site name (better-auth requires this field)
+  await c.var.auth.api.updateUser({
+    body: { name: displayName },
+    headers: c.req.raw.headers,
+  });
+
   // ── JSON response mode (used by Lit settings bridge) ──────────────
+  // Always redirect — site name appears in the header/title and a full
+  // reload is the simplest way to keep everything in sync.
   const wantsJson = c.req.header("accept")?.includes("application/json");
   if (wantsJson) {
-    if (languageChanged) {
-      return c.json({
-        status: "redirect" as const,
-        url: "/dash/settings/general?saved",
-      });
-    }
     return c.json({
-      status: "ok" as const,
-      toast: i18n._(
-        msg({
-          message: "Settings updated.",
-          comment: "@context: Toast after saving general settings",
-        }),
-      ),
-      siteName: displayName,
+      status: "redirect" as const,
+      url: "/settings/general?saved",
     });
   }
 
   return sse(c, async (stream) => {
     if (languageChanged) {
-      await stream.redirect("/dash/settings/general?saved");
+      await stream.redirect("/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(`General - ${escaped}`, {
         mode: "inner",
         selector: "title",
@@ -213,29 +207,27 @@ settingsRoutes.post("/general/seo", async (c) => {
 // ===========================================================================
 
 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>,
-  );
+  const navData = await getNavigationData(c);
+
+  return renderPublicPage(c, {
+    title: `Avatar - ${navData.siteName}`,
+    navData,
+    toast: saved ? { message: "Avatar updated." } : undefined,
+    content: (
+      <>
+        <AdminBreadcrumb
+          parent="Settings"
+          parentHref="/settings"
+          current="Avatar"
+        />
+        <AvatarContent
+          siteAvatarUrl={c.var.appConfig.siteAvatarUrl}
+          showHeaderAvatar={c.var.appConfig.showHeaderAvatar}
+        />
+      </>
+    ),
+  });
 });
 
 settingsRoutes.post("/avatar", async (c) => {
@@ -287,7 +279,7 @@ settingsRoutes.post("/avatar", async (c) => {
       },
     );
 
-    return dsRedirect("/dash/settings/avatar?saved");
+    return dsRedirect("/settings/avatar?saved");
   } catch (e) {
     if (e instanceof ValidationError) {
       return dsToast(e.message, "error");
@@ -312,11 +304,11 @@ settingsRoutes.post("/avatar/remove", async (c) => {
   if (wantsJson) {
     return c.json({
       status: "redirect" as const,
-      url: "/dash/settings/avatar?saved",
+      url: "/settings/avatar?saved",
     });
   }
 
-  return dsRedirect("/dash/settings/avatar?saved");
+  return dsRedirect("/settings/avatar?saved");
 });
 
 settingsRoutes.post("/avatar/display", async (c) => {
@@ -365,36 +357,30 @@ settingsRoutes.post("/avatar/display", async (c) => {
 // ===========================================================================
 
 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 navItems = await c.var.services.navItems.list();
   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>,
-  );
+  const navData = await getNavigationData(c);
+
+  return renderPublicPage(c, {
+    title: `Navigation - ${navData.siteName}`,
+    navData,
+    content: (
+      <>
+        <AdminBreadcrumb
+          parent="Settings"
+          parentHref="/settings"
+          current="Navigation"
+        />
+        <NavigationContent
+          navItems={navItems}
+          headerNavMaxVisible={headerNavMaxVisible}
+          homeDefaultView={homeDefaultView}
+          siteName={navData.siteName}
+        />
+      </>
+    ),
+  });
 });
 
 settingsRoutes.post("/navigation/nav-max-visible", async (c) => {
@@ -429,30 +415,28 @@ settingsRoutes.post("/navigation/home-default-view", async (c) => {
 // ===========================================================================
 
 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>,
-  );
+  const navData = await getNavigationData(c);
+
+  return renderPublicPage(c, {
+    title: `Color Theme - ${navData.siteName}`,
+    navData,
+    toast: saved ? { message: "Theme updated." } : undefined,
+    content: (
+      <>
+        <AdminBreadcrumb
+          parent="Settings"
+          parentHref="/settings"
+          current="Color Theme"
+        />
+        <ColorThemeContent themes={themes} currentThemeId={currentThemeId} />
+      </>
+    ),
+  });
 });
 
 settingsRoutes.post("/color-theme", async (c) => {
@@ -481,7 +465,7 @@ settingsRoutes.post("/color-theme", async (c) => {
     await settings.set(SETTINGS_KEYS.THEME, validTheme.id);
   }
 
-  return dsRedirect("/dash/settings/color-theme?saved");
+  return dsRedirect("/settings/color-theme?saved");
 });
 
 // ===========================================================================
@@ -489,30 +473,28 @@ settingsRoutes.post("/color-theme", async (c) => {
 // ===========================================================================
 
 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>,
-  );
+  const navData = await getNavigationData(c);
+
+  return renderPublicPage(c, {
+    title: `Font Theme - ${navData.siteName}`,
+    navData,
+    toast: saved ? { message: "Font theme updated." } : undefined,
+    content: (
+      <>
+        <AdminBreadcrumb
+          parent="Settings"
+          parentHref="/settings"
+          current="Font Theme"
+        />
+        <FontThemeContent
+          fontThemes={BUILTIN_FONT_THEMES}
+          currentFontThemeId={currentFontThemeId}
+        />
+      </>
+    ),
+  });
 });
 
 settingsRoutes.post("/font-theme", async (c) => {
@@ -540,7 +522,7 @@ settingsRoutes.post("/font-theme", async (c) => {
     await settings.set("FONT_THEME", validFont.id);
   }
 
-  return dsRedirect("/dash/settings/font-theme?saved");
+  return dsRedirect("/settings/font-theme?saved");
 });
 
 // ===========================================================================
@@ -548,25 +530,23 @@ settingsRoutes.post("/font-theme", async (c) => {
 // ===========================================================================
 
 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>,
-  );
+  const navData = await getNavigationData(c);
+
+  return renderPublicPage(c, {
+    title: `Custom CSS - ${navData.siteName}`,
+    navData,
+    content: (
+      <>
+        <AdminBreadcrumb
+          parent="Settings"
+          parentHref="/settings"
+          current="Custom CSS"
+        />
+        <AdvancedContent customCSS={customCSS} />
+      </>
+    ),
+  });
 });
 
 settingsRoutes.post("/custom-css", async (c) => {
@@ -593,81 +573,123 @@ settingsRoutes.post("/custom-css", async (c) => {
 });
 
 // ===========================================================================
-// Account
+// Account sub-menu
 // ===========================================================================
 
 settingsRoutes.get("/account", async (c) => {
-  const siteName = c.var.appConfig.siteName;
-  const session = await c.var.auth.api.getSession({
+  const navData = await getNavigationData(c);
+
+  return renderPublicPage(c, {
+    title: `Account - ${navData.siteName}`,
+    navData,
+    content: (
+      <>
+        <AdminBreadcrumb
+          parent="Settings"
+          parentHref="/settings"
+          current="Account"
+        />
+        <AccountMenuContent />
+      </>
+    ),
+  });
+});
+
+// ===========================================================================
+// Sessions
+// ===========================================================================
+
+settingsRoutes.get("/account/sessions", async (c) => {
+  const navData = await getNavigationData(c);
+
+  // Get current session to mark it
+  const currentSession = await c.var.auth.api.getSession({
+    headers: c.req.raw.headers,
+  });
+  const currentToken = currentSession?.session?.token ?? "";
+
+  // List all active sessions
+  const rawSessions = await c.var.auth.api.listSessions({
     headers: c.req.raw.headers,
   });
-  const userName = session?.user?.name ?? "";
-  const saved = c.req.query("saved") !== undefined;
 
-  return c.html(
-    <DashLayout
-      c={c}
-      title="Account"
-      siteName={siteName}
-      siteAvatarUrl={c.var.appConfig.siteAvatarUrl}
-      currentPath="/dash/settings"
-      breadcrumb={{
-        parent: "Settings",
-        parentHref: "/dash/settings",
-        current: "Account",
-      }}
-      toast={saved ? { message: "Profile updated." } : undefined}
-    >
-      <AccountContent userName={userName} />
-    </DashLayout>,
+  const sessions: SessionInfo[] = (rawSessions ?? []).map(
+    (s: {
+      token: string;
+      ipAddress?: string | null;
+      userAgent?: string | null;
+      createdAt: Date;
+    }) => ({
+      token: s.token,
+      ipAddress: s.ipAddress ?? null,
+      userAgent: s.userAgent ?? null,
+      createdAt: Math.floor(new Date(s.createdAt).getTime() / 1000),
+      isCurrent: s.token === currentToken,
+    }),
   );
-});
 
-settingsRoutes.post("/account", async (c) => {
-  const i18n = getI18n(c);
-  const body = await c.req.json<{ userName: string }>();
-  const name = body.userName?.trim();
+  // Sort: current session first, then by creation date descending
+  sessions.sort((a, b) => {
+    if (a.isCurrent) return -1;
+    if (b.isCurrent) return 1;
+    return b.createdAt - a.createdAt;
+  });
 
-  if (!name) {
-    return dsToast(
-      i18n._(
-        msg({
-          message: "A display name is required.",
-          comment: "@context: Error toast when display name is empty",
-        }),
-      ),
-      "error",
-    );
-  }
+  return renderPublicPage(c, {
+    title: `Sessions - ${navData.siteName}`,
+    navData,
+    content: (
+      <>
+        <AdminBreadcrumb
+          parent="Account"
+          parentHref="/settings/account"
+          current="Sessions"
+        />
+        <SessionsContent sessions={sessions} />
+      </>
+    ),
+  });
+});
+
+settingsRoutes.post("/account/sessions/:token/revoke", async (c) => {
+  const token = c.req.param("token");
 
   try {
-    await c.var.auth.api.updateUser({
-      body: { name },
+    await c.var.auth.api.revokeSession({
+      body: { token },
       headers: c.req.raw.headers,
     });
   } catch {
-    return dsToast(
-      i18n._(
-        msg({
-          message: "Couldn't update your profile. Try again in a moment.",
-          comment: "@context: Error toast when profile update fails",
-        }),
-      ),
-      "error",
-    );
+    // Session may already be expired/revoked — still redirect
   }
 
-  return dsToast(
-    i18n._(
-      msg({
-        message: "Profile updated.",
-        comment: "@context: Toast after saving user profile",
-      }),
+  return dsRedirect("/settings/account/sessions");
+});
+
+// ===========================================================================
+// Password
+// ===========================================================================
+
+settingsRoutes.get("/account/password", async (c) => {
+  const navData = await getNavigationData(c);
+
+  return renderPublicPage(c, {
+    title: `Password - ${navData.siteName}`,
+    navData,
+    content: (
+      <>
+        <AdminBreadcrumb
+          parent="Account"
+          parentHref="/settings/account"
+          current="Password"
+        />
+        <AccountContent />
+      </>
     ),
-  );
+  });
 });
 
-settingsRoutes.post("/password", async (c) => {
+settingsRoutes.post("/account/password", async (c) => {
   const i18n = getI18n(c);
   const body = await c.req.json<{
     currentPassword: string;
@@ -727,3 +749,53 @@ settingsRoutes.post("/password", async (c) => {
     });
   });
 });
+
+// ===========================================================================
+// API Tokens
+// ===========================================================================
+
+settingsRoutes.get("/api-tokens", async (c) => {
+  const tokens = await c.var.services.apiTokens.list();
+  const navData = await getNavigationData(c);
+  const siteUrl = c.env.SITE_URL;
+
+  return renderPublicPage(c, {
+    title: `API Tokens - ${navData.siteName}`,
+    navData,
+    content: (
+      <>
+        <AdminBreadcrumb
+          parent="Settings"
+          parentHref="/settings"
+          current="API Tokens"
+        />
+        <ApiTokensContent tokens={tokens} siteUrl={siteUrl} />
+      </>
+    ),
+  });
+});
+
+settingsRoutes.post("/api-tokens", async (c) => {
+  const body = await c.req.json<{ tokenName: string }>();
+  const name = body.tokenName?.trim();
+
+  if (!name) {
+    return dsToast("Token name is required.", "error");
+  }
+
+  const { plaintext } = await c.var.services.apiTokens.create(name);
+
+  return sse(c, async (stream) => {
+    await stream.patchSignals({
+      _newPlaintext: plaintext,
+      tokenName: "",
+    });
+  });
+});
+
+settingsRoutes.post("/api-tokens/:id/delete", async (c) => {
+  const id = c.req.param("id");
+  await c.var.services.apiTokens.delete(id);
+
+  return dsRedirect("/settings/api-tokens");
+});