@jant/core 0.3.26 → 0.3.28

package/src/routes/dash/__tests__/font-theme.test.ts

@@ -0,0 +1,110 @@
+/**
+ * Font theme save & read flow test.
+ *
+ * Verifies that FONT_THEME setting persists and buildThemeStyle generates
+ * the correct CSS overrides for --font-body and --font-heading.
+ */
+
+import { describe, it, expect, beforeEach } from "vitest";
+import { createTestDatabase } from "../../../__tests__/helpers/db.js";
+import { createSettingsService } from "../../../services/settings.js";
+import { BUILTIN_FONT_THEMES } from "../../../ui/font-themes.js";
+import { buildThemeStyle } from "../../../lib/theme.js";
+import type { Database } from "../../../db/index.js";
+
+describe("Font theme save & CSS generation", () => {
+  let db: Database;
+  let settings: ReturnType<typeof createSettingsService>;
+
+  beforeEach(() => {
+    const testDb = createTestDatabase();
+    db = testDb.db as unknown as Database;
+    settings = createSettingsService(db);
+  });
+
+  it("saves and reads FONT_THEME setting", async () => {
+    // Initially null
+    const initial = await settings.get("FONT_THEME");
+    expect(initial).toBeNull();
+
+    // Save classic-editorial
+    await settings.set("FONT_THEME", "classic-editorial");
+    expect(await settings.get("FONT_THEME")).toBe("classic-editorial");
+
+    // Update to geometric
+    await settings.set("FONT_THEME", "geometric");
+    expect(await settings.get("FONT_THEME")).toBe("geometric");
+
+    // Remove (reset to default)
+    await settings.remove("FONT_THEME");
+    expect(await settings.get("FONT_THEME")).toBeNull();
+  });
+
+  it("generates correct CSS with both --font-body and --font-heading", async () => {
+    // Save classic-editorial, then switch to geometric — simulates the middleware flow
+    await settings.set("FONT_THEME", "classic-editorial");
+    await settings.set("FONT_THEME", "geometric");
+
+    const fontThemeId = await settings.get("FONT_THEME");
+    expect(fontThemeId).toBe("geometric");
+
+    const fontTheme = BUILTIN_FONT_THEMES.find(
+      (f) => f.id === fontThemeId,
+    ) as (typeof BUILTIN_FONT_THEMES)[number];
+    expect(fontTheme).toBeDefined();
+    expect(fontTheme.headingFontFamily).toContain("Futura");
+    expect(fontTheme.bodyFontFamily).toContain("system-ui");
+
+    const fontOverrides = {
+      "--font-body": fontTheme.bodyFontFamily,
+      "--font-heading": fontTheme.headingFontFamily,
+    };
+    const css = buildThemeStyle(undefined, fontOverrides);
+
+    expect(css).toContain("--font-body:");
+    expect(css).toContain("--font-heading:");
+    expect(css).toContain("Futura");
+    expect(css).not.toContain("Charter");
+  });
+
+  it("generates no font override when default theme is selected", async () => {
+    // Default theme -> no FONT_THEME setting -> no font override
+    const fontThemeId = await settings.get("FONT_THEME");
+    expect(fontThemeId).toBeNull();
+
+    const fontTheme = fontThemeId
+      ? BUILTIN_FONT_THEMES.find((f) => f.id === fontThemeId)
+      : undefined;
+    expect(fontTheme).toBeUndefined();
+
+    const fontOverrides: Record<string, string> = {};
+    if (fontTheme) {
+      fontOverrides["--font-body"] = fontTheme.bodyFontFamily;
+      fontOverrides["--font-heading"] = fontTheme.headingFontFamily;
+    }
+
+    const css = buildThemeStyle(undefined, fontOverrides);
+    expect(css).toBe("");
+  });
+
+  it("classic-editorial has serif heading and sans body", async () => {
+    await settings.set("FONT_THEME", "classic-editorial");
+
+    const fontThemeId = await settings.get("FONT_THEME");
+    const fontTheme = BUILTIN_FONT_THEMES.find(
+      (f) => f.id === fontThemeId,
+    ) as (typeof BUILTIN_FONT_THEMES)[number];
+
+    expect(fontTheme.headingFontFamily).toContain("Charter");
+    expect(fontTheme.bodyFontFamily).toContain("system-ui");
+
+    const fontOverrides = {
+      "--font-body": fontTheme.bodyFontFamily,
+      "--font-heading": fontTheme.headingFontFamily,
+    };
+    const css = buildThemeStyle(undefined, fontOverrides);
+
+    expect(css).toContain("--font-heading:");
+    expect(css).toContain("Charter");
+  });
+});

package/src/routes/dash/__tests__/pages.test.ts

@@ -94,7 +94,7 @@ describe("Dashboard Pages - Nav Management Logic", () => {
         slug: "about",
         title: "About",
       });
-      const navItem = await navItemService.create({
+      await navItemService.create({
         type: "page",
         label: "About",
         url: "/about",
@@ -105,7 +105,7 @@ describe("Dashboard Pages - Nav Management Logic", () => {
       const allNavItems = await navItemService.list();
       const found = allNavItems.find((item) => item.pageId === page.id);
       expect(found).toBeDefined();
-      await navItemService.delete(found!.id);
+      await navItemService.delete(found?.id as number);
 
       // Nav item should be gone
       const navItems = await navItemService.list();

package/src/routes/dash/__tests__/settings-avatar.test.ts

@@ -1,5 +1,5 @@
 /**
- * Tests for avatar upload with favicon variant storage in DB settings.
+ * Tests for avatar upload with favicon variant storage.
  *
  * Note: Route handlers that import JSX components with @lingui/react/macro
  * cannot run in vitest (requires SWC plugin). These tests verify the
@@ -28,7 +28,7 @@ describe("Dashboard Settings - Avatar Upload Logic", () => {
     mediaService = createMediaService(db);
   });
 
-  describe("avatar upload with favicon variants in DB", () => {
+  describe("avatar upload with favicon variants", () => {
     it("stores avatar media and sets SITE_AVATAR to storageKey", async () => {
       const storageKey = "media/2026/02/test-avatar-id.png";
       await mediaService.create({
@@ -54,36 +54,47 @@ describe("Dashboard Settings - Avatar Upload Logic", () => {
 
       const stored = await settingsService.get("SITE_FAVICON_ICO");
       expect(stored).not.toBeNull();
-      const decoded = base64ToUint8Array(stored!);
+      const decoded = base64ToUint8Array(stored as string);
       expect(Array.from(decoded)).toEqual(Array.from(fakeIcoData));
     });
 
-    it("stores apple-touch-icon as base64 in settings", async () => {
-      const fakePng = new Uint8Array([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a]);
-      const b64 = arrayBufferToBase64(fakePng.buffer);
-      await settingsService.set("SITE_FAVICON_APPLE_TOUCH", b64);
+    it("stores apple-touch-icon as R2 storage key in settings", async () => {
+      const appleTouchKey = "favicon/apple-touch-icon.png";
+      await settingsService.set("SITE_FAVICON_APPLE_TOUCH", appleTouchKey);
 
       const stored = await settingsService.get("SITE_FAVICON_APPLE_TOUCH");
-      expect(stored).not.toBeNull();
-      const decoded = base64ToUint8Array(stored!);
-      expect(Array.from(decoded)).toEqual(Array.from(fakePng));
+      expect(stored).toBe(appleTouchKey);
+    });
+
+    it("sets SITE_FAVICON_VERSION on upload", async () => {
+      const version = "202602191430";
+      await settingsService.set("SITE_FAVICON_VERSION", version);
+
+      const stored = await settingsService.get("SITE_FAVICON_VERSION");
+      expect(stored).toBe(version);
     });
   });
 
   describe("avatar removal cleans up favicon settings", () => {
-    it("removes all favicon-related settings", async () => {
+    it("removes all favicon-related settings including version", async () => {
       await settingsService.set("SITE_AVATAR", "media/2026/02/some-id.png");
       await settingsService.set("SITE_FAVICON_ICO", "base64data");
-      await settingsService.set("SITE_FAVICON_APPLE_TOUCH", "base64data");
+      await settingsService.set(
+        "SITE_FAVICON_APPLE_TOUCH",
+        "favicon/apple-touch-icon.png",
+      );
+      await settingsService.set("SITE_FAVICON_VERSION", "202602191430");
 
       // Simulate avatar removal
       await settingsService.remove("SITE_AVATAR");
       await settingsService.remove("SITE_FAVICON_ICO");
       await settingsService.remove("SITE_FAVICON_APPLE_TOUCH");
+      await settingsService.remove("SITE_FAVICON_VERSION");
 
       expect(await settingsService.get("SITE_AVATAR")).toBeNull();
       expect(await settingsService.get("SITE_FAVICON_ICO")).toBeNull();
       expect(await settingsService.get("SITE_FAVICON_APPLE_TOUCH")).toBeNull();
+      expect(await settingsService.get("SITE_FAVICON_VERSION")).toBeNull();
     });
   });
 });

package/src/routes/dash/appearance.tsx

@@ -0,0 +1,173 @@
+/**
+ * Dashboard Appearance Routes
+ *
+ * Sub-pages: Color Theme, Font Theme, Advanced (Custom CSS)
+ */
+
+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 { dsRedirect, dsToast } from "../../lib/sse.js";
+import { getI18n } from "../../i18n/index.js";
+import { SETTINGS_KEYS } from "../../lib/constants.js";
+import { getAvailableThemes } from "../../lib/theme.js";
+import { BUILTIN_FONT_THEMES } from "../../ui/font-themes.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 appearanceRoutes = new Hono<Env>();
+
+// ===========================================================================
+// Color Theme
+// ===========================================================================
+
+appearanceRoutes.get("/", 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="Appearance"
+      siteName={siteName}
+      currentPath="/dash/appearance"
+      toast={saved ? { message: "Theme saved successfully." } : undefined}
+    >
+      <ColorThemeContent themes={themes} currentThemeId={currentThemeId} />
+    </DashLayout>,
+  );
+});
+
+appearanceRoutes.post("/", 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: "Invalid theme selected.",
+          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/appearance?saved");
+});
+
+// ===========================================================================
+// Font Theme
+// ===========================================================================
+
+appearanceRoutes.get("/fonts", 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="Appearance"
+      siteName={siteName}
+      currentPath="/dash/appearance"
+      toast={saved ? { message: "Font theme saved successfully." } : undefined}
+    >
+      <FontThemeContent
+        fontThemes={BUILTIN_FONT_THEMES}
+        currentFontThemeId={currentFontThemeId}
+      />
+    </DashLayout>,
+  );
+});
+
+appearanceRoutes.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: "Invalid font theme selected.",
+          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/appearance/fonts?saved");
+});
+
+// ===========================================================================
+// Advanced (Custom CSS)
+// ===========================================================================
+
+appearanceRoutes.get("/advanced", async (c) => {
+  const siteName = c.var.appConfig.siteName;
+  const customCSS = c.var.allSettings[SETTINGS_KEYS.CUSTOM_CSS] ?? "";
+
+  return c.html(
+    <DashLayout
+      c={c}
+      title="Appearance"
+      siteName={siteName}
+      currentPath="/dash/appearance"
+    >
+      <AdvancedContent customCSS={customCSS} />
+    </DashLayout>,
+  );
+});
+
+appearanceRoutes.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 saved successfully.",
+        comment: "@context: Toast after saving custom CSS",
+      }),
+    ),
+  );
+});

package/src/routes/dash/collections.tsx

@@ -3,16 +3,17 @@
  */
 
 import { Hono } from "hono";
-import type { Bindings } from "../../types.js";
-import type { AppVariables } from "../../app.js";
+import type { Bindings, SortOrder } from "../../types.js";
+import type { AppVariables } from "../../types/app-context.js";
 import { DashLayout } from "../../ui/layouts/DashLayout.js";
 import { DangerZone } from "../../ui/dash/index.js";
 import { dsRedirect } from "../../lib/sse.js";
-import { getSiteName } from "../../lib/config.js";
 import { createMediaContext, toPostViewsFromPosts } from "../../lib/view.js";
+import { slugify } from "../../lib/url.js";
 import { CollectionsListContent } from "../../ui/dash/collections/CollectionsListContent.js";
 import { CollectionForm } from "../../ui/dash/collections/CollectionForm.js";
 import { ViewCollectionContent } from "../../ui/dash/collections/ViewCollectionContent.js";
+import { IconPickerGrid } from "../../ui/dash/collections/IconPickerGrid.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -20,8 +21,12 @@ export const collectionsRoutes = new Hono<Env>();
 
 // List collections
 collectionsRoutes.get("/", async (c) => {
-  const siteName = await getSiteName(c);
-  const collections = await c.var.services.collections.list();
+  const siteName = c.var.appConfig.siteName;
+  const [collections, dividers, postCounts] = await Promise.all([
+    c.var.services.collections.list(),
+    c.var.services.collections.listDividers(),
+    c.var.services.collections.getPostCounts(),
+  ]);
 
   return c.html(
     <DashLayout
@@ -30,14 +35,18 @@ collectionsRoutes.get("/", async (c) => {
       siteName={siteName}
       currentPath="/dash/collections"
     >
-      <CollectionsListContent collections={collections} />
+      <CollectionsListContent
+        collections={collections}
+        dividers={dividers}
+        postCounts={postCounts}
+      />
     </DashLayout>,
   );
 });
 
 // New collection form
 collectionsRoutes.get("/new", async (c) => {
-  const siteName = await getSiteName(c);
+  const siteName = c.var.appConfig.siteName;
 
   return c.html(
     <DashLayout
@@ -53,19 +62,66 @@ collectionsRoutes.get("/new", async (c) => {
 
 // Create collection
 collectionsRoutes.post("/", async (c) => {
+  const wantsJson = c.req.header("Accept")?.includes("application/json");
   const body = await c.req.json<{
     title: string;
     slug: string;
     description?: string;
+    icon?: string;
+    sortOrder?: string;
   }>();
 
+  // Auto-generate slug from title if empty
+  const slug = body.slug || slugify(body.title);
+
   const collection = await c.var.services.collections.create({
     title: body.title,
-    slug: body.slug,
+    slug,
     description: body.description || undefined,
+    icon: body.icon || undefined,
+    sortOrder: (body.sortOrder as SortOrder) || undefined,
   });
 
-  return dsRedirect(`/dash/collections/${collection.id}`);
+  const redirectUrl = `/dash/collections/${collection.id}`;
+  if (wantsJson) {
+    return c.json({ status: "redirect" as const, url: redirectUrl });
+  }
+
+  return dsRedirect(redirectUrl);
+});
+
+// Reorder collections (accepts prefixed items)
+collectionsRoutes.post("/reorder", async (c) => {
+  const body = await c.req.json<{ items?: string[]; ids?: number[] }>();
+
+  if (body.items) {
+    await c.var.services.collections.reorderAll(body.items);
+  } else if (body.ids) {
+    // Backward compat: plain numeric IDs
+    await c.var.services.collections.reorder(body.ids);
+  }
+
+  return c.json({ success: true });
+});
+
+// Create divider
+collectionsRoutes.post("/dividers", async (c) => {
+  await c.var.services.collections.createDivider();
+  return dsRedirect("/dash/collections");
+});
+
+// Delete divider
+collectionsRoutes.post("/dividers/:id/delete", async (c) => {
+  const id = parseInt(c.req.param("id"), 10);
+  if (!isNaN(id)) {
+    await c.var.services.collections.deleteDivider(id);
+  }
+  return dsRedirect("/dash/collections");
+});
+
+// Icon picker grid (HTML fragment)
+collectionsRoutes.get("/icons", (c) => {
+  return c.html(<IconPickerGrid />);
 });
 
 // View single collection
@@ -77,9 +133,9 @@ collectionsRoutes.get("/:id", async (c) => {
   if (!collection) return c.notFound();
 
   const rawPosts = await c.var.services.posts.list({ collectionId: id });
-  const ctx = createMediaContext(c);
+  const ctx = createMediaContext(c.var.appConfig);
   const posts = toPostViewsFromPosts(rawPosts, ctx);
-  const siteName = await getSiteName(c);
+  const siteName = c.var.appConfig.siteName;
 
   return c.html(
     <DashLayout
@@ -101,7 +157,7 @@ collectionsRoutes.get("/:id/edit", async (c) => {
   const collection = await c.var.services.collections.getById(id);
   if (!collection) return c.notFound();
 
-  const siteName = await getSiteName(c);
+  const siteName = c.var.appConfig.siteName;
 
   return c.html(
     <DashLayout
@@ -125,19 +181,29 @@ collectionsRoutes.post("/:id", async (c) => {
   const id = parseInt(c.req.param("id"), 10);
   if (isNaN(id)) return c.notFound();
 
+  const wantsJson = c.req.header("Accept")?.includes("application/json");
   const body = await c.req.json<{
     title: string;
     slug: string;
     description?: string;
+    icon?: string;
+    sortOrder?: string;
   }>();
 
   await c.var.services.collections.update(id, {
     title: body.title,
     slug: body.slug,
-    description: body.description || undefined,
+    description: body.description || null,
+    icon: body.icon || null,
+    sortOrder: (body.sortOrder as SortOrder) || undefined,
   });
 
-  return dsRedirect(`/dash/collections/${id}`);
+  const redirectUrl = `/dash/collections/${id}`;
+  if (wantsJson) {
+    return c.json({ status: "redirect" as const, url: redirectUrl });
+  }
+
+  return dsRedirect(redirectUrl);
 });
 
 // Delete collection

package/src/routes/dash/index.tsx

@@ -7,9 +7,8 @@
 import { Hono } from "hono";
 import { Trans, useLingui } from "@lingui/react/macro";
 import type { Bindings } from "../../types.js";
-import type { AppVariables } from "../../app.js";
+import type { AppVariables } from "../../types/app-context.js";
 import { DashLayout } from "../../ui/layouts/DashLayout.js";
-import { getSiteName } from "../../lib/config.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -30,9 +29,8 @@ function DashboardContent({
   const { t } = useLingui();
 
   return (
-    <div class="container py-8">
+    <>
       <h1 class="text-2xl font-semibold mb-6">
-        {/* ✅ No more nesting! */}
         {t({
           message: "Dashboard",
           comment: "@context: Dashboard main heading",
@@ -64,7 +62,7 @@ function DashboardContent({
               comment: "@context: Dashboard section title",
             })}
           </p>
-          <a href="/dash/posts/new" class="btn btn-primary w-full">
+          <a href="/dash/posts/new" class="btn-primary w-full">
             {t({
               message: "New Post",
               comment: "@context: Button to create new post",
@@ -73,7 +71,6 @@ function DashboardContent({
         </div>
       </div>
 
-      {/* ✅ Trans component with embedded JSX! */}
       <p>
         <Trans comment="@context: Help text with link">
           Need help? Visit the{" "}
@@ -82,23 +79,24 @@ function DashboardContent({
           </a>
         </Trans>
       </p>
-    </div>
+    </>
   );
 }
 
 dashIndexRoutes.get("/", async (c) => {
-  const siteName = await getSiteName(c);
+  const siteName = c.var.appConfig.siteName;
 
-  // Get some stats
-  const allPosts = await c.var.services.posts.list({ limit: 1000 });
-  const publishedPosts = allPosts.filter((p) => p.status !== "draft");
-  const draftPosts = allPosts.filter((p) => p.status === "draft");
+  // Get stats via service-level counting (avoids loading all posts into memory)
+  const [publishedCount, draftCount] = await Promise.all([
+    c.var.services.posts.count({ status: "published" }),
+    c.var.services.posts.count({ status: "draft" }),
+  ]);
 
   return c.html(
     <DashLayout c={c} title="Dashboard" siteName={siteName} currentPath="/dash">
       <DashboardContent
-        publishedCount={publishedPosts.length}
-        draftCount={draftPosts.length}
+        publishedCount={publishedCount}
+        draftCount={draftCount}
       />
     </DashLayout>,
   );