@jant/core 0.3.35 → 0.3.37

package/src/routes/dash/settings.tsx

@@ -1,64 +1,100 @@
 /**
- * Dashboard Settings Routes
+ * 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, 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";
+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 { 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 };
 
 export const settingsRoutes = new Hono<Env>();
 
 // ===========================================================================
-// General settings
+// Settings root — iOS-style grouped list
 // ===========================================================================
 
 settingsRoutes.get("/", async (c) => {
+  const navData = await getNavigationData(c);
+
+  return renderPublicPage(c, {
+    title: `Settings - ${navData.siteName}`,
+    navData,
+    content: <SettingsRootContent />,
+  });
+});
+
+// ===========================================================================
+// General settings
+// ===========================================================================
+
+settingsRoutes.get("/general", async (c) => {
   const { allSettings, appConfig } = c.var;
 
   const dbSiteName = allSettings["SITE_NAME"] ?? "";
   const dbSiteDescription = allSettings["SITE_DESCRIPTION"] ?? "";
 
   const saved = c.req.query("saved") !== undefined;
-
-  return c.html(
-    <DashLayout
-      c={c}
-      title="Settings"
-      siteName={dbSiteName || appConfig.fallbacks.siteName}
-      currentPath="/dash/settings"
-      toast={saved ? { message: "Settings saved successfully." } : undefined}
-    >
-      <GeneralContent
-        siteName={dbSiteName || ""}
-        siteDescription={dbSiteDescription || ""}
-        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}
-        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("/", async (c) => {
+settingsRoutes.post("/general", async (c) => {
   const i18n = getI18n(c);
   const body = await c.req.json<{
     siteName: string;
@@ -76,43 +112,36 @@ settingsRoutes.post("/", 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?saved",
-      });
-    }
     return c.json({
-      status: "ok" as const,
-      toast: i18n._(
-        msg({
-          message: "Settings saved successfully.",
-          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?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(`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 +158,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 +179,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 +190,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 +203,33 @@ settingsRoutes.post("/seo", async (c) => {
 });
 
 // ===========================================================================
-// Avatar upload & removal
+// Avatar
 // ===========================================================================
 
+settingsRoutes.get("/avatar", async (c) => {
+  const saved = c.req.query("saved") !== undefined;
+  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) => {
   const i18n = getI18n(c);
   const storage = c.var.storage;
@@ -184,7 +237,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 +251,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 +275,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("/settings/avatar?saved");
   } catch (e) {
     if (e instanceof ValidationError) {
       return dsToast(e.message, "error");
@@ -233,7 +287,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 +302,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: "/settings/avatar?saved",
+    });
   }
 
-  return dsRedirect("/dash/settings?saved");
+  return dsRedirect("/settings/avatar?saved");
 });
 
 settingsRoutes.post("/avatar/display", async (c) => {
@@ -272,7 +329,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 +340,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",
         }),
       ),
@@ -296,75 +353,343 @@ settingsRoutes.post("/avatar/display", async (c) => {
 });
 
 // ===========================================================================
-// Account
+// Navigation (moved from appearance routes)
 // ===========================================================================
 
-settingsRoutes.get("/account", async (c) => {
-  const siteName = c.var.appConfig.siteName;
-  const session = await c.var.auth.api.getSession({
-    headers: c.req.raw.headers,
+settingsRoutes.get("/navigation", async (c) => {
+  const navItems = await c.var.services.navItems.list();
+  const headerNavMaxVisible = c.var.appConfig.headerNavMaxVisible;
+  const homeDefaultView = c.var.appConfig.homeDefaultView;
+  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}
+        />
+      </>
+    ),
   });
-  const userName = session?.user?.name ?? "";
-  const saved = c.req.query("saved") !== undefined;
+});
 
-  return c.html(
-    <DashLayout
-      c={c}
-      title="Settings"
-      siteName={siteName}
-      currentPath="/dash/settings"
-      toast={saved ? { message: "Profile saved successfully." } : undefined}
-    >
-      <AccountContent userName={userName} />
-    </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("/account", async (c) => {
+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 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;
+  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) => {
   const i18n = getI18n(c);
-  const body = await c.req.json<{ userName: string }>();
-  const name = body.userName?.trim();
+  const body = await c.req.json<{ theme: string }>();
+  const { settings } = c.var.services;
+  const themes = getAvailableThemes();
 
-  if (!name) {
+  const validTheme = themes.find((t) => t.id === body.theme);
+  if (!validTheme) {
     return dsToast(
       i18n._(
         msg({
-          message: "Name is required.",
-          comment: "@context: Error toast when display name is empty",
+          message: "That theme isn't available. Pick another one.",
+          comment: "@context: Error toast when selected theme is not valid",
         }),
       ),
       "error",
     );
   }
 
-  try {
-    await c.var.auth.api.updateUser({
-      body: { name },
-      headers: c.req.raw.headers,
-    });
-  } catch {
+  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("/settings/color-theme?saved");
+});
+
+// ===========================================================================
+// Font Theme (moved from appearance routes)
+// ===========================================================================
+
+settingsRoutes.get("/font-theme", async (c) => {
+  const currentFontThemeId = c.var.allSettings["FONT_THEME"] ?? "default";
+  const saved = c.req.query("saved") !== undefined;
+  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) => {
+  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: "Failed to update profile.",
-          comment: "@context: Error toast when profile update fails",
+          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("/settings/font-theme?saved");
+});
+
+// ===========================================================================
+// Custom CSS (moved from appearance routes)
+// ===========================================================================
+
+settingsRoutes.get("/custom-css", async (c) => {
+  const customCSS = c.var.allSettings[SETTINGS_KEYS.CUSTOM_CSS] ?? "";
+  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) => {
+  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: "Profile saved successfully.",
-        comment: "@context: Toast after saving user profile",
+        message: "Custom CSS updated.",
+        comment: "@context: Toast after saving custom CSS",
       }),
     ),
   );
 });
 
-settingsRoutes.post("/password", async (c) => {
+// ===========================================================================
+// Account sub-menu
+// ===========================================================================
+
+settingsRoutes.get("/account", async (c) => {
+  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 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,
+    }),
+  );
+
+  // 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;
+  });
+
+  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.revokeSession({
+      body: { token },
+      headers: c.req.raw.headers,
+    });
+  } catch {
+    // Session may already be expired/revoked — still redirect
+  }
+
+  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("/account/password", async (c) => {
   const i18n = getI18n(c);
   const body = await c.req.json<{
     currentPassword: string;
@@ -376,7 +701,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 +724,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 +737,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",
         }),
       ),
@@ -423,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");
+});