@jant/core 0.3.26 → 0.3.28

package/src/routes/dash/media.tsx

@@ -4,10 +4,9 @@
 
 import { Hono } from "hono";
 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 { dsRedirect } from "../../lib/sse.js";
-import { getSiteName } from "../../lib/config.js";
 import {
   getMediaUrl,
   getImageUrl,
@@ -22,8 +21,8 @@ export const mediaRoutes = new Hono<Env>();
 
 // List media
 mediaRoutes.get("/", async (c) => {
-  const mediaList = await c.var.services.media.list(100);
-  const siteName = await getSiteName(c);
+  const mediaList = await c.var.services.media.list({ limit: 100 });
+  const siteName = c.var.appConfig.siteName;
 
   return c.html(
     <DashLayout
@@ -34,9 +33,9 @@ mediaRoutes.get("/", async (c) => {
     >
       <MediaListContent
         mediaList={mediaList}
-        r2PublicUrl={c.env.R2_PUBLIC_URL}
-        imageTransformUrl={c.env.IMAGE_TRANSFORM_URL}
-        s3PublicUrl={c.env.S3_PUBLIC_URL}
+        r2PublicUrl={c.var.appConfig.r2PublicUrl}
+        imageTransformUrl={c.var.appConfig.imageTransformUrl}
+        s3PublicUrl={c.var.appConfig.s3PublicUrl}
       />
     </DashLayout>,
   );
@@ -45,10 +44,13 @@ mediaRoutes.get("/", async (c) => {
 // Media picker (returns HTML fragment for PostForm dialog)
 // Must be defined before /:id to avoid "picker" matching as an ID
 mediaRoutes.get("/picker", async (c) => {
-  const mediaList = await c.var.services.media.list(100);
-  const r2PublicUrl = c.env.R2_PUBLIC_URL;
-  const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
-  const s3PublicUrl = c.env.S3_PUBLIC_URL;
+  const mediaList = await c.var.services.media.list({
+    limit: 100,
+    mimePrefix: "image/",
+  });
+  const r2PublicUrl = c.var.appConfig.r2PublicUrl;
+  const imageTransformUrl = c.var.appConfig.imageTransformUrl;
+  const s3PublicUrl = c.var.appConfig.s3PublicUrl;
 
   if (mediaList.length === 0) {
     return c.html(
@@ -60,40 +62,35 @@ mediaRoutes.get("/picker", async (c) => {
 
   return c.html(
     <>
-      {mediaList
-        .filter((m) => m.mimeType.startsWith("image/"))
-        .map((m) => {
-          const pUrl = getPublicUrlForProvider(
-            m.provider,
-            r2PublicUrl,
-            s3PublicUrl,
-          );
-          const url = getMediaUrl(m.storageKey, pUrl);
-          const thumbUrl = getImageUrl(url, imageTransformUrl, {
-            width: 150,
-            quality: 80,
-            format: "auto",
-            fit: "cover",
-          });
-          return (
-            <button
-              key={m.id}
-              type="button"
-              class="aspect-square rounded-lg overflow-hidden border-2 hover:border-primary cursor-pointer transition-colors"
-              data-on:click={`$mediaIds.includes('${m.id}') ? ($mediaIds = $mediaIds.filter(id => id !== '${m.id}')) : ($mediaIds = [...$mediaIds, '${m.id}'])`}
-              data-class:border-primary={`$mediaIds.includes('${m.id}')`}
-              data-class:ring-2={`$mediaIds.includes('${m.id}')`}
-              data-class:ring-primary={`$mediaIds.includes('${m.id}')`}
-            >
-              <img
-                src={thumbUrl}
-                alt={m.alt || m.originalName}
-                class="w-full h-full object-cover"
-                loading="lazy"
-              />
-            </button>
-          );
-        })}
+      {mediaList.map((m) => {
+        const pUrl = getPublicUrlForProvider(
+          m.provider,
+          r2PublicUrl,
+          s3PublicUrl,
+        );
+        const url = getMediaUrl(m.storageKey, pUrl);
+        const thumbUrl = getImageUrl(url, imageTransformUrl, {
+          width: 150,
+          quality: 80,
+          format: "auto",
+          fit: "cover",
+        });
+        return (
+          <button
+            key={m.id}
+            type="button"
+            class="aspect-square rounded-lg overflow-hidden border-2 hover:border-primary cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+            data-media-id={m.id}
+          >
+            <img
+              src={thumbUrl}
+              alt={m.alt || m.originalName}
+              class="w-full h-full object-cover"
+              loading="lazy"
+            />
+          </button>
+        );
+      })}
     </>,
   );
 });
@@ -104,7 +101,7 @@ mediaRoutes.get("/:id", async (c) => {
   const media = await c.var.services.media.getById(id);
   if (!media) return c.notFound();
 
-  const siteName = await getSiteName(c);
+  const siteName = c.var.appConfig.siteName;
 
   return c.html(
     <DashLayout
@@ -115,9 +112,9 @@ mediaRoutes.get("/:id", async (c) => {
     >
       <ViewMediaContent
         media={media}
-        r2PublicUrl={c.env.R2_PUBLIC_URL}
-        imageTransformUrl={c.env.IMAGE_TRANSFORM_URL}
-        s3PublicUrl={c.env.S3_PUBLIC_URL}
+        r2PublicUrl={c.var.appConfig.r2PublicUrl}
+        imageTransformUrl={c.var.appConfig.imageTransformUrl}
+        s3PublicUrl={c.var.appConfig.s3PublicUrl}
       />
     </DashLayout>,
   );

package/src/routes/dash/pages.tsx

@@ -5,15 +5,17 @@
  */
 
 import { Hono } from "hono";
+import { msg } from "@lingui/core/macro";
 import { useLingui } from "@lingui/react/macro";
 import type { Bindings, Page } 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 { PageForm, ActionButtons, DangerZone } from "../../ui/dash/index.js";
 import { dsRedirect, dsToast } from "../../lib/sse.js";
-import { getSiteName } from "../../lib/config.js";
+import { CreatePageSchema } from "../../lib/schemas.js";
 import { UnifiedPagesContent } from "../../ui/dash/pages/UnifiedPagesContent.js";
 import { LinkFormContent } from "../../ui/dash/pages/LinkFormContent.js";
+import { getI18n } from "../../i18n/index.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -109,7 +111,7 @@ pagesRoutes.get("/", async (c) => {
     c.var.services.navItems.list(),
     c.var.services.pages.listNotInNav(),
   ]);
-  const siteName = await getSiteName(c);
+  const siteName = c.var.appConfig.siteName;
 
   return c.html(
     <DashLayout
@@ -124,7 +126,7 @@ pagesRoutes.get("/", async (c) => {
 });
 
 pagesRoutes.get("/new", async (c) => {
-  const siteName = await getSiteName(c);
+  const siteName = c.var.appConfig.siteName;
   return c.html(
     <DashLayout
       c={c}
@@ -138,7 +140,7 @@ pagesRoutes.get("/new", async (c) => {
 });
 
 pagesRoutes.get("/links/new", async (c) => {
-  const siteName = await getSiteName(c);
+  const siteName = c.var.appConfig.siteName;
   return c.html(
     <DashLayout
       c={c}
@@ -152,9 +154,18 @@ pagesRoutes.get("/links/new", async (c) => {
 });
 
 pagesRoutes.post("/links", async (c) => {
+  const i18n = getI18n(c);
   const body = await c.req.json<{ label: string; url: string }>();
   if (!body.label || !body.url) {
-    return dsToast("Label and URL are required", "error");
+    return dsToast(
+      i18n._(
+        msg({
+          message: "Label and URL are required",
+          comment: "@context: Error toast when nav link fields are empty",
+        }),
+      ),
+      "error",
+    );
   }
 
   await c.var.services.navItems.create({
@@ -166,12 +177,28 @@ pagesRoutes.post("/links", async (c) => {
 });
 
 pagesRoutes.post("/reorder", async (c) => {
+  const i18n = getI18n(c);
   const body = await c.req.json<{ ids: number[] }>();
   if (!Array.isArray(body.ids)) {
-    return dsToast("Invalid request", "error");
+    return dsToast(
+      i18n._(
+        msg({
+          message: "Invalid request",
+          comment: "@context: Error toast when reorder request is malformed",
+        }),
+      ),
+      "error",
+    );
   }
   await c.var.services.navItems.reorder(body.ids);
-  return dsToast("Order saved");
+  return dsToast(
+    i18n._(
+      msg({
+        message: "Order saved",
+        comment: "@context: Toast after saving navigation item order",
+      }),
+    ),
+  );
 });
 
 pagesRoutes.get("/links/:id/edit", async (c) => {
@@ -181,7 +208,7 @@ pagesRoutes.get("/links/:id/edit", async (c) => {
   const item = await c.var.services.navItems.getById(id);
   if (!item) return c.notFound();
 
-  const siteName = await getSiteName(c);
+  const siteName = c.var.appConfig.siteName;
   return c.html(
     <DashLayout
       c={c}
@@ -195,12 +222,21 @@ pagesRoutes.get("/links/:id/edit", async (c) => {
 });
 
 pagesRoutes.post("/links/:id", async (c) => {
+  const i18n = getI18n(c);
   const id = parseInt(c.req.param("id"), 10);
   if (isNaN(id)) return c.notFound();
 
   const body = await c.req.json<{ label: string; url: string }>();
   if (!body.label || !body.url) {
-    return dsToast("Label and URL are required", "error");
+    return dsToast(
+      i18n._(
+        msg({
+          message: "Label and URL are required",
+          comment: "@context: Error toast when nav link fields are empty",
+        }),
+      ),
+      "error",
+    );
   }
 
   const updated = await c.var.services.navItems.update(id, {
@@ -221,18 +257,26 @@ pagesRoutes.post("/links/:id/delete", async (c) => {
 });
 
 pagesRoutes.post("/", async (c) => {
-  const body = await c.req.json<{
-    title: string;
-    body: string;
-    status: string;
-    slug: string;
-  }>();
+  const i18n = getI18n(c);
+  const raw = await c.req.json();
+  const parsed = CreatePageSchema.safeParse(raw);
+  if (!parsed.success) {
+    const errorMsg =
+      parsed.error.issues[0]?.message ??
+      i18n._(
+        msg({
+          message: "Invalid input",
+          comment: "@context: Fallback validation error for page form",
+        }),
+      );
+    return dsToast(errorMsg, "error");
+  }
 
   const page = await c.var.services.pages.create({
-    title: body.title,
-    body: body.body,
-    status: body.status as Page["status"],
-    slug: body.slug.toLowerCase().replace(/[^a-z0-9-]/g, "-"),
+    title: parsed.data.title,
+    body: parsed.data.body,
+    status: parsed.data.status,
+    slug: parsed.data.slug,
   });
 
   return dsRedirect(`/dash/pages/${page.id}`);
@@ -258,11 +302,7 @@ pagesRoutes.post("/:id/remove-from-nav", async (c) => {
   const pageId = parseInt(c.req.param("id"), 10);
   if (isNaN(pageId)) return c.notFound();
 
-  const navItems = await c.var.services.navItems.list();
-  const navItem = navItems.find((item) => item.pageId === pageId);
-  if (navItem) {
-    await c.var.services.navItems.delete(navItem.id);
-  }
+  await c.var.services.navItems.deleteByPageId(pageId);
   return dsRedirect("/dash/pages");
 });
 
@@ -273,7 +313,7 @@ pagesRoutes.get("/:id", async (c) => {
   const page = await c.var.services.pages.getById(id);
   if (!page) return c.notFound();
 
-  const siteName = await getSiteName(c);
+  const siteName = c.var.appConfig.siteName;
   return c.html(
     <DashLayout
       c={c}
@@ -293,7 +333,7 @@ pagesRoutes.get("/:id/edit", async (c) => {
   const page = await c.var.services.pages.getById(id);
   if (!page) return c.notFound();
 
-  const siteName = await getSiteName(c);
+  const siteName = c.var.appConfig.siteName;
   return c.html(
     <DashLayout
       c={c}
@@ -307,21 +347,29 @@ pagesRoutes.get("/:id/edit", async (c) => {
 });
 
 pagesRoutes.post("/:id", async (c) => {
+  const i18n = getI18n(c);
   const id = parseInt(c.req.param("id"), 10);
   if (isNaN(id)) return c.notFound();
 
-  const body = await c.req.json<{
-    title: string;
-    body: string;
-    status: string;
-    slug: string;
-  }>();
+  const raw = await c.req.json();
+  const parsed = CreatePageSchema.safeParse(raw);
+  if (!parsed.success) {
+    const errorMsg =
+      parsed.error.issues[0]?.message ??
+      i18n._(
+        msg({
+          message: "Invalid input",
+          comment: "@context: Fallback validation error for page form",
+        }),
+      );
+    return dsToast(errorMsg, "error");
+  }
 
   await c.var.services.pages.update(id, {
-    title: body.title,
-    body: body.body,
-    status: body.status as Page["status"],
-    slug: body.slug.toLowerCase().replace(/[^a-z0-9-]/g, "-"),
+    title: parsed.data.title,
+    body: parsed.data.body,
+    status: parsed.data.status,
+    slug: parsed.data.slug,
   });
 
   return dsRedirect(`/dash/pages/${id}`);

package/src/routes/dash/posts.tsx

@@ -1,12 +1,17 @@
-import { getSiteName } from "../../lib/config.js";
 /**
  * Dashboard Posts Routes
  */
 
 import { Hono } from "hono";
 import { useLingui } from "@lingui/react/macro";
-import type { Bindings, Post, Media, Collection } from "../../types.js";
-import type { AppVariables } from "../../app.js";
+import type {
+  Bindings,
+  Post,
+  PostView,
+  Media,
+  Collection,
+} from "../../types.js";
+import type { AppVariables } from "../../types/app-context.js";
 import { DashLayout } from "../../ui/layouts/DashLayout.js";
 import {
   PostForm,
@@ -16,12 +21,17 @@ import {
 } from "../../ui/dash/index.js";
 import * as sqid from "../../lib/sqid.js";
 import { dsRedirect } from "../../lib/sse.js";
+import {
+  toPostViewsFromPosts,
+  toPostViewFromPost,
+  createMediaContext,
+} from "../../lib/view.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
 export const postsRoutes = new Hono<Env>();
 
-function PostsListContent({ posts }: { posts: Post[] }) {
+function PostsListContent({ posts }: { posts: PostView[] }) {
   const { t } = useLingui();
   return (
     <>
@@ -55,7 +65,11 @@ postsRoutes.get("/", async (c) => {
   const posts = await c.var.services.posts.list({
     excludeReplies: true,
   });
-  const siteName = await getSiteName(c);
+  const siteName = c.var.appConfig.siteName;
+  const postViews = toPostViewsFromPosts(
+    posts,
+    createMediaContext(c.var.appConfig),
+  );
 
   return c.html(
     <DashLayout
@@ -64,14 +78,14 @@ postsRoutes.get("/", async (c) => {
       siteName={siteName}
       currentPath="/dash/posts"
     >
-      <PostsListContent posts={posts} />
+      <PostsListContent posts={postViews} />
     </DashLayout>,
   );
 });
 
 // New post form
 postsRoutes.get("/new", async (c) => {
-  const siteName = await getSiteName(c);
+  const siteName = c.var.appConfig.siteName;
   const collections = await c.var.services.collections.list();
 
   return c.html(
@@ -88,6 +102,7 @@ postsRoutes.get("/new", async (c) => {
 
 // Create post
 postsRoutes.post("/", async (c) => {
+  const wantsJson = c.req.header("Accept")?.includes("application/json");
   const body = await c.req.json<{
     format: string;
     title?: string;
@@ -98,7 +113,7 @@ postsRoutes.post("/", async (c) => {
     url?: string;
     quoteText?: string;
     rating?: number;
-    collectionId?: number;
+    collectionIds?: number[];
     mediaIds?: string[];
   }>();
 
@@ -112,7 +127,7 @@ postsRoutes.post("/", async (c) => {
     url: body.url || undefined,
     quoteText: body.quoteText || undefined,
     rating: body.rating || undefined,
-    collectionId: body.collectionId || undefined,
+    collectionIds: body.collectionIds?.length ? body.collectionIds : undefined,
   });
 
   // Attach media if provided
@@ -120,16 +135,20 @@ postsRoutes.post("/", async (c) => {
     await c.var.services.media.attachToPost(post.id, body.mediaIds);
   }
 
-  return dsRedirect(`/dash/posts/${sqid.encode(post.id)}`);
+  const redirectUrl = `/dash/posts/${sqid.encode(post.id)}`;
+  if (wantsJson) {
+    return c.json({ status: "redirect" as const, url: redirectUrl });
+  }
+
+  return dsRedirect(redirectUrl);
 });
 
-function ViewPostContent({ post }: { post: Post }) {
+function ViewPostContent({ post }: { post: PostView }) {
   const { t } = useLingui();
   const defaultTitle = t({
     message: "Post",
     comment: "@context: Default post title",
   });
-  const permalink = post.path ? `/${post.path}` : `/p/${sqid.encode(post.id)}`;
 
   return (
     <>
@@ -141,7 +160,7 @@ function ViewPostContent({ post }: { post: Post }) {
             message: "Edit",
             comment: "@context: Button to edit post",
           })}
-          viewHref={permalink}
+          viewHref={post.permalink}
           viewLabel={t({
             message: "View",
             comment: "@context: Button to view post",
@@ -168,6 +187,7 @@ function EditPostContent({
   imageTransformUrl,
   s3PublicUrl,
   collections,
+  postCollectionIds,
 }: {
   post: Post;
   mediaAttachments: Media[];
@@ -175,6 +195,7 @@ function EditPostContent({
   imageTransformUrl?: string;
   s3PublicUrl?: string;
   collections: Collection[];
+  postCollectionIds: number[];
 }) {
   const { t } = useLingui();
   return (
@@ -190,6 +211,8 @@ function EditPostContent({
         imageTransformUrl={imageTransformUrl}
         s3PublicUrl={s3PublicUrl}
         collections={collections}
+        postCollectionIds={postCollectionIds}
+        cancelHref={`/dash/posts/${sqid.encode(post.id)}`}
       />
     </>
   );
@@ -203,8 +226,12 @@ postsRoutes.get("/:id", async (c) => {
   const post = await c.var.services.posts.getById(id);
   if (!post) return c.notFound();
 
-  const siteName = await getSiteName(c);
+  const siteName = c.var.appConfig.siteName;
   const pageTitle = post.title || "Post";
+  const postView = toPostViewFromPost(
+    post,
+    createMediaContext(c.var.appConfig),
+  );
 
   return c.html(
     <DashLayout
@@ -213,7 +240,7 @@ postsRoutes.get("/:id", async (c) => {
       siteName={siteName}
       currentPath="/dash/posts"
     >
-      <ViewPostContent post={post} />
+      <ViewPostContent post={postView} />
     </DashLayout>,
   );
 });
@@ -226,12 +253,14 @@ postsRoutes.get("/:id/edit", async (c) => {
   const post = await c.var.services.posts.getById(id);
   if (!post) return c.notFound();
 
-  const siteName = await getSiteName(c);
+  const siteName = c.var.appConfig.siteName;
   const mediaAttachments = await c.var.services.media.getByPostId(post.id);
-  const r2PublicUrl = c.env.R2_PUBLIC_URL;
-  const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
-  const s3PublicUrl = c.env.S3_PUBLIC_URL;
-  const collections = await c.var.services.collections.list();
+  const { r2PublicUrl, imageTransformUrl, s3PublicUrl } = c.var.appConfig;
+  const [collections, postCollections] = await Promise.all([
+    c.var.services.collections.list(),
+    c.var.services.collections.getCollectionsByPostId(post.id),
+  ]);
+  const postCollectionIds = postCollections.map((c) => c.id);
 
   return c.html(
     <DashLayout
@@ -247,6 +276,7 @@ postsRoutes.get("/:id/edit", async (c) => {
         imageTransformUrl={imageTransformUrl}
         s3PublicUrl={s3PublicUrl}
         collections={collections}
+        postCollectionIds={postCollectionIds}
       />
     </DashLayout>,
   );
@@ -257,6 +287,8 @@ postsRoutes.post("/:id", async (c) => {
   const id = sqid.decode(c.req.param("id"));
   if (!id) return c.notFound();
 
+  const wantsJson = c.req.header("Accept")?.includes("application/json");
+
   const body = await c.req.json<{
     format: string;
     title?: string;
@@ -267,7 +299,7 @@ postsRoutes.post("/:id", async (c) => {
     url?: string;
     quoteText?: string;
     rating?: number;
-    collectionId?: number;
+    collectionIds?: number[];
     mediaIds?: string[];
   }>();
 
@@ -281,7 +313,7 @@ postsRoutes.post("/:id", async (c) => {
     url: body.url || null,
     quoteText: body.quoteText || null,
     rating: body.rating || null,
-    collectionId: body.collectionId || null,
+    collectionIds: body.collectionIds ?? [],
   });
 
   // Update media attachments if provided
@@ -289,7 +321,12 @@ postsRoutes.post("/:id", async (c) => {
     await c.var.services.media.attachToPost(id, body.mediaIds);
   }
 
-  return dsRedirect(`/dash/posts/${sqid.encode(id)}`);
+  const redirectUrl = `/dash/posts/${sqid.encode(id)}`;
+  if (wantsJson) {
+    return c.json({ status: "redirect" as const, url: redirectUrl });
+  }
+
+  return dsRedirect(redirectUrl);
 });
 
 // Delete post