@jant/core 0.3.24 → 0.3.25

package/src/routes/dash/settings.tsx

@@ -8,7 +8,7 @@ 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 "../../theme/layouts/index.js";
+import { DashLayout } from "../../ui/layouts/DashLayout.js";
 import { sse, dsRedirect, dsToast } from "../../lib/sse.js";
 import {
   getSiteLanguage,
@@ -17,7 +17,7 @@ import {
 } from "../../lib/config.js";
 import { SETTINGS_KEYS } from "../../lib/constants.js";
 import { getAvailableThemes } from "../../lib/theme.js";
-import type { ColorTheme } from "../../theme/color-themes.js";
+import type { ColorTheme } from "../../ui/color-themes.js";
 
 /** Escape HTML special characters for safe insertion into HTML strings */
 function escapeHtml(str: string): string {
@@ -283,17 +283,21 @@ function ThemeCard({
 function AppearanceContent({
   themes,
   currentThemeId,
+  customCSS,
 }: {
   themes: ColorTheme[];
   currentThemeId: string;
+  customCSS: string;
 }) {
   const { t } = useLingui();
 
-  const signals = JSON.stringify({ theme: currentThemeId }).replace(
+  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">
@@ -302,7 +306,7 @@ function AppearanceContent({
       <SettingsNav currentTab="appearance" />
 
       <div
-        data-signals={signals}
+        data-signals={themeSignals}
         data-on:change="@post('/dash/settings/appearance')"
         class="max-w-3xl"
       >
@@ -332,6 +336,59 @@ function AppearanceContent({
           </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>
     </>
   );
 }
@@ -585,6 +642,7 @@ 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 customCSS = (await settings.get(SETTINGS_KEYS.CUSTOM_CSS)) ?? "";
   const themes = getAvailableThemes(c.var.config);
   const saved = c.req.query("saved") !== undefined;
 
@@ -596,7 +654,11 @@ settingsRoutes.get("/appearance", async (c) => {
       currentPath="/dash/settings"
       toast={saved ? { message: "Theme saved successfully." } : undefined}
     >
-      <AppearanceContent themes={themes} currentThemeId={currentThemeId} />
+      <AppearanceContent
+        themes={themes}
+        currentThemeId={currentThemeId}
+        customCSS={customCSS}
+      />
     </DashLayout>,
   );
 });
@@ -621,6 +683,22 @@ settingsRoutes.post("/appearance", async (c) => {
   return dsRedirect("/dash/settings/appearance?saved");
 });
 
+// Save custom CSS
+settingsRoutes.post("/custom-css", async (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("Custom CSS saved successfully.");
+});
+
 // Account page
 settingsRoutes.get("/account", async (c) => {
   const siteName = await getSiteName(c);

package/src/routes/feed/rss.ts

@@ -64,7 +64,7 @@ async function buildFeedData(c: Context<Env>): Promise<FeedData> {
 rssRoutes.get("/", async (c) => {
   const feedData = await buildFeedData(c);
 
-  const renderer = c.var.config.theme?.feed?.rss ?? defaultRssRenderer;
+  const renderer = c.var.config.feed?.rss ?? defaultRssRenderer;
   const xml = renderer(feedData);
 
   return new Response(xml, {
@@ -78,7 +78,7 @@ rssRoutes.get("/", async (c) => {
 rssRoutes.get("/atom.xml", async (c) => {
   const feedData = await buildFeedData(c);
 
-  const renderer = c.var.config.theme?.feed?.atom ?? defaultAtomRenderer;
+  const renderer = c.var.config.feed?.atom ?? defaultAtomRenderer;
   const xml = renderer(feedData);
 
   return new Response(xml, {

package/src/routes/feed/sitemap.ts

@@ -35,7 +35,7 @@ sitemapRoutes.get("/sitemap.xml", async (c) => {
   const postViews = toPostViewsFromPosts(posts, mediaCtx);
   const pageViews = publishedPages.map(toPageView);
 
-  const renderer = c.var.config.theme?.feed?.sitemap ?? defaultSitemapRenderer;
+  const renderer = c.var.config.feed?.sitemap ?? defaultSitemapRenderer;
   const xml = renderer({ siteUrl, posts: postViews, pages: pageViews });
 
   return new Response(xml, {

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

@@ -0,0 +1,94 @@
+/**
+ * Tests for the collections listing page data logic.
+ *
+ * Note: Route handler tests that import JSX components with @lingui/react/macro
+ * cannot run in vitest (requires SWC plugin). These tests verify the service
+ * layer operations that the collections route orchestrates.
+ */
+
+import { describe, it, expect, beforeEach } from "vitest";
+import { createTestDatabase } from "../../../__tests__/helpers/db.js";
+import { createCollectionService } from "../../../services/collection.js";
+import { createPostService } from "../../../services/post.js";
+import type { Database } from "../../../db/index.js";
+
+describe("Collections Listing Page - Data Logic", () => {
+  let db: Database;
+  let collectionService: ReturnType<typeof createCollectionService>;
+  let postService: ReturnType<typeof createPostService>;
+
+  beforeEach(() => {
+    const testDb = createTestDatabase();
+    db = testDb.db as unknown as Database;
+    collectionService = createCollectionService(db);
+    postService = createPostService(db);
+  });
+
+  it("returns collections with post counts", async () => {
+    const recipes = await collectionService.create({
+      slug: "recipes",
+      title: "Recipes",
+    });
+    await collectionService.create({
+      slug: "travel",
+      title: "Travel",
+    });
+
+    // Add posts to recipes collection
+    await postService.create({
+      format: "note",
+      body: "Recipe 1",
+      collectionId: recipes.id,
+    });
+    await postService.create({
+      format: "note",
+      body: "Recipe 2",
+      collectionId: recipes.id,
+    });
+
+    // Simulate route handler logic
+    const [allCollections, postCounts] = await Promise.all([
+      collectionService.list(),
+      collectionService.getPostCounts(),
+    ]);
+
+    const collections = allCollections.map((col) => ({
+      ...col,
+      postCount: postCounts.get(col.id) ?? 0,
+    }));
+
+    expect(collections).toHaveLength(2);
+    const recipesResult = collections.find((c) => c.slug === "recipes");
+    const travelResult = collections.find((c) => c.slug === "travel");
+    expect(recipesResult?.postCount).toBe(2);
+    expect(travelResult?.postCount).toBe(0);
+  });
+
+  it("returns empty list when no collections exist", async () => {
+    const allCollections = await collectionService.list();
+    expect(allCollections).toHaveLength(0);
+  });
+
+  it("does not count soft-deleted posts", async () => {
+    const col = await collectionService.create({
+      slug: "test",
+      title: "Test",
+    });
+
+    const post = await postService.create({
+      format: "note",
+      body: "Will be deleted",
+      collectionId: col.id,
+    });
+    await postService.create({
+      format: "note",
+      body: "Will remain",
+      collectionId: col.id,
+    });
+
+    await postService.delete(post.id);
+
+    const postCounts = await collectionService.getPostCounts();
+    expect(postCounts.get(col.id)).toBe(1);
+  });
+});

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

@@ -0,0 +1,94 @@
+/**
+ * Tests for the featured page data logic.
+ *
+ * Note: Route handler tests that import JSX components with @lingui/react/macro
+ * cannot run in vitest (requires SWC plugin). These tests verify the service
+ * layer operations that the featured route orchestrates.
+ */
+
+import { describe, it, expect, beforeEach } from "vitest";
+import { createTestDatabase } from "../../../__tests__/helpers/db.js";
+import { createPostService } from "../../../services/post.js";
+import type { Database } from "../../../db/index.js";
+
+describe("Featured Page - Data Logic", () => {
+  let db: Database;
+  let postService: ReturnType<typeof createPostService>;
+
+  beforeEach(() => {
+    const testDb = createTestDatabase();
+    db = testDb.db as unknown as Database;
+    postService = createPostService(db);
+  });
+
+  it("returns only featured published posts", async () => {
+    await postService.create({
+      format: "note",
+      body: "Featured post",
+      featured: true,
+      status: "published",
+    });
+    await postService.create({
+      format: "note",
+      body: "Normal post",
+      featured: false,
+      status: "published",
+    });
+    await postService.create({
+      format: "note",
+      body: "Draft featured",
+      featured: true,
+      status: "draft",
+    });
+
+    const posts = await postService.list({
+      featured: true,
+      status: "published",
+      excludeReplies: true,
+    });
+
+    expect(posts).toHaveLength(1);
+    expect(posts[0]?.body).toBe("Featured post");
+  });
+
+  it("returns empty list when no featured posts exist", async () => {
+    await postService.create({
+      format: "note",
+      body: "Normal post",
+      status: "published",
+    });
+
+    const posts = await postService.list({
+      featured: true,
+      status: "published",
+      excludeReplies: true,
+    });
+
+    expect(posts).toHaveLength(0);
+  });
+
+  it("excludes replies from featured posts", async () => {
+    const root = await postService.create({
+      format: "note",
+      body: "Featured root",
+      featured: true,
+      status: "published",
+    });
+
+    // Reply inherits featured from root
+    await postService.create({
+      format: "note",
+      body: "Reply to featured",
+      replyToId: root.id,
+    });
+
+    const posts = await postService.list({
+      featured: true,
+      status: "published",
+      excludeReplies: true,
+    });
+
+    expect(posts).toHaveLength(1);
+    expect(posts[0]?.body).toBe("Featured root");
+  });
+});

package/src/routes/pages/archive.tsx

@@ -8,7 +8,7 @@ import { Hono } from "hono";
 import type { Bindings, Format } from "../../types.js";
 import type { AppVariables } from "../../app.js";
 import { FORMATS } from "../../types.js";
-import { ArchivePage as DefaultArchivePage } from "../../themes/threads/pages/ArchivePage.js";
+import { ArchivePage } from "../../ui/pages/ArchivePage.js";
 import { getNavigationData } from "../../lib/navigation.js";
 import { renderPublicPage } from "../../lib/render.js";
 import { createMediaContext, toArchiveGroups } from "../../lib/view.js";
@@ -69,20 +69,16 @@ archiveRoutes.get("/", async (c) => {
   const mediaCtx = createMediaContext(c);
   const groups = toArchiveGroups(grouped, mediaCtx);
 
-  const components = c.var.config.theme?.components;
-  const Page = components?.ArchivePage ?? DefaultArchivePage;
-
   return renderPublicPage(c, {
     title: `Archive - ${navData.siteName}`,
     navData,
     content: (
-      <Page
+      <ArchivePage
         groups={groups}
         hasMore={hasMore}
         nextCursor={nextCursor}
         format={format}
         featured={featured}
-        theme={components}
       />
     ),
   });

package/src/routes/pages/collection.tsx

@@ -5,7 +5,7 @@
 import { Hono } from "hono";
 import type { Bindings } from "../../types.js";
 import type { AppVariables } from "../../app.js";
-import { CollectionPage as DefaultCollectionPage } from "../../themes/threads/pages/CollectionPage.js";
+import { CollectionPage } from "../../ui/pages/CollectionPage.js";
 import { getNavigationData } from "../../lib/navigation.js";
 import { renderPublicPage } from "../../lib/render.js";
 import { createMediaContext, toPostViewsFromPosts } from "../../lib/view.js";
@@ -33,19 +33,15 @@ collectionRoutes.get("/:slug", async (c) => {
   const mediaCtx = createMediaContext(c);
   const postViews = toPostViewsFromPosts(posts, mediaCtx);
 
-  const components = c.var.config.theme?.components;
-  const Page = components?.CollectionPage ?? DefaultCollectionPage;
-
   return renderPublicPage(c, {
     title: `${collection.title} - ${navData.siteName}`,
     description: collection.description ?? undefined,
     navData,
     content: (
-      <Page
+      <CollectionPage
         collection={collection}
         posts={postViews}
         hasMore={false}
-        theme={components}
       />
     ),
   });

package/src/routes/pages/collections.tsx

@@ -0,0 +1,36 @@
+/**
+ * Collections Listing Page Route
+ *
+ * Lists all collections with their post counts.
+ */
+
+import { Hono } from "hono";
+import type { Bindings } from "../../types.js";
+import type { AppVariables } from "../../app.js";
+import { getNavigationData } from "../../lib/navigation.js";
+import { renderPublicPage } from "../../lib/render.js";
+import { CollectionsPage } from "../../ui/pages/CollectionsPage.js";
+
+type Env = { Bindings: Bindings; Variables: AppVariables };
+
+export const collectionsPageRoutes = new Hono<Env>();
+
+collectionsPageRoutes.get("/", async (c) => {
+  const [allCollections, postCounts] = await Promise.all([
+    c.var.services.collections.list(),
+    c.var.services.collections.getPostCounts(),
+  ]);
+
+  const collections = allCollections.map((col) => ({
+    ...col,
+    postCount: postCounts.get(col.id) ?? 0,
+  }));
+
+  const navData = await getNavigationData(c);
+
+  return renderPublicPage(c, {
+    title: `Collections - ${navData.siteName}`,
+    navData,
+    content: <CollectionsPage collections={collections} />,
+  });
+});

package/src/routes/pages/featured.tsx

@@ -0,0 +1,38 @@
+/**
+ * Featured Page Route
+ *
+ * Shows featured posts as a timeline feed.
+ */
+
+import { Hono } from "hono";
+import type { Bindings } from "../../types.js";
+import type { AppVariables } from "../../app.js";
+import { getNavigationData } from "../../lib/navigation.js";
+import { renderPublicPage } from "../../lib/render.js";
+import { createMediaContext, toPostViewsFromPosts } from "../../lib/view.js";
+import { FeaturedPage } from "../../ui/pages/FeaturedPage.js";
+
+type Env = { Bindings: Bindings; Variables: AppVariables };
+
+export const featuredRoutes = new Hono<Env>();
+
+featuredRoutes.get("/", async (c) => {
+  const posts = await c.var.services.posts.list({
+    featured: true,
+    status: "published",
+    excludeReplies: true,
+  });
+
+  const navData = await getNavigationData(c);
+  const mediaCtx = createMediaContext(c);
+  const postViews = toPostViewsFromPosts(posts, mediaCtx);
+
+  // Convert to timeline items (simple — no thread previews)
+  const items = postViews.map((post) => ({ post }));
+
+  return renderPublicPage(c, {
+    title: `Featured - ${navData.siteName}`,
+    navData,
+    content: <FeaturedPage items={items} />,
+  });
+});

package/src/routes/pages/home.tsx

@@ -2,7 +2,7 @@
  * Home Page Route
  *
  * Timeline feed with per-type card components and thread previews.
- * Handles both full-page rendering and load-more SSE responses.
+ * Uses page-based pagination.
  */
 
 import { Hono } from "hono";
@@ -11,63 +11,21 @@ import type { AppVariables } from "../../app.js";
 import { getNavigationData } from "../../lib/navigation.js";
 import { renderPublicPage } from "../../lib/render.js";
 import { assembleTimeline } from "../../lib/timeline.js";
-import { sse } from "../../lib/sse.js";
 import { createMediaContext, toPostViewsFromPosts } from "../../lib/view.js";
-import { HomePage as DefaultHomePage } from "../../themes/threads/pages/HomePage.js";
+import { HomePage } from "../../ui/pages/HomePage.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
 export const homeRoutes = new Hono<Env>();
 
 homeRoutes.get("/", async (c) => {
-  const cursorParam = c.req.query("cursor");
-  const cursor = cursorParam ? parseInt(cursorParam, 10) : undefined;
-  const lastDate = c.req.query("lastDate");
+  const pageParam = c.req.query("page");
+  const page = pageParam ? Math.max(1, parseInt(pageParam, 10) || 1) : 1;
 
-  const { items, hasMore, nextCursor } = await assembleTimeline(c, {
-    cursor: cursor && !isNaN(cursor) ? cursor : undefined,
+  const { items, currentPage, totalPages } = await assembleTimeline(c, {
+    page,
   });
 
-  // SSE load-more response
-  if (cursor && !isNaN(cursor)) {
-    if (items.length === 0) {
-      return sse(c, async (stream) => {
-        stream.remove("#load-more-container");
-      });
-    }
-
-    const themeConfig = c.var.config.theme;
-    const renderMore = themeConfig?.timelineMore;
-    if (!renderMore) {
-      // Should never happen — default theme always provides timelineMore
-      return sse(c, async (stream) => {
-        stream.remove("#load-more-container");
-      });
-    }
-
-    const patches = renderMore({
-      items,
-      lastDate: lastDate ?? undefined,
-      hasMore,
-      nextCursor,
-      theme: themeConfig?.components,
-    });
-
-    return sse(c, async (stream) => {
-      for (const patch of patches) {
-        if (patch.mode === "remove") {
-          stream.remove(patch.selector);
-        } else {
-          stream.patchElements(patch.content, {
-            mode: patch.mode,
-            selector: patch.selector,
-          });
-        }
-      }
-    });
-  }
-
-  // Full page render
   const navData = await getNavigationData(c);
 
   // Fetch pinned posts
@@ -79,19 +37,15 @@ homeRoutes.get("/", async (c) => {
   const mediaCtx = createMediaContext(c);
   const pinnedItems = toPostViewsFromPosts(pinnedPosts, mediaCtx);
 
-  const components = c.var.config.theme?.components;
-  const Page = components?.HomePage ?? DefaultHomePage;
-
   return renderPublicPage(c, {
     title: navData.siteName,
     navData,
     content: (
-      <Page
+      <HomePage
         items={items}
         pinnedItems={pinnedItems}
-        hasMore={hasMore}
-        nextCursor={nextCursor}
-        theme={components}
+        currentPage={currentPage}
+        totalPages={totalPages}
       />
     ),
   });