@jant/core 0.2.11 → 0.2.13

package/src/routes/dash/collections.tsx

@@ -3,32 +3,55 @@
  */
 
 import { Hono } from "hono";
-import { useLingui } from "../../i18n/index.js";
+import { useLingui } from "@lingui/react/macro";
 import type { Bindings, Collection, Post } from "../../types.js";
 import type { AppVariables } from "../../app.js";
 import { DashLayout } from "../../theme/layouts/index.js";
-import { EmptyState, ListItemRow, ActionButtons, CrudPageHeader, DangerZone } from "../../theme/components/index.js";
+import {
+  EmptyState,
+  ListItemRow,
+  ActionButtons,
+  CrudPageHeader,
+  DangerZone,
+} from "../../theme/components/index.js";
 import * as sqid from "../../lib/sqid.js";
+import { sse } from "../../lib/sse.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
 export const collectionsRoutes = new Hono<Env>();
 
-function CollectionsListContent({ collections }: { collections: Collection[] }) {
+function CollectionsListContent({
+  collections,
+}: {
+  collections: Collection[];
+}) {
   const { t } = useLingui();
 
   return (
     <>
       <CrudPageHeader
-        title={t({ message: "Collections", comment: "@context: Dashboard heading" })}
-        ctaLabel={t({ message: "New Collection", comment: "@context: Button to create new collection" })}
+        title={t({
+          message: "Collections",
+          comment: "@context: Dashboard heading",
+        })}
+        ctaLabel={t({
+          message: "New Collection",
+          comment: "@context: Button to create new collection",
+        })}
         ctaHref="/dash/collections/new"
       />
 
       {collections.length === 0 ? (
         <EmptyState
-          message={t({ message: "No collections yet.", comment: "@context: Empty state message" })}
-          ctaText={t({ message: "New Collection", comment: "@context: Button to create new collection" })}
+          message={t({
+            message: "No collections yet.",
+            comment: "@context: Empty state message",
+          })}
+          ctaText={t({
+            message: "New Collection",
+            comment: "@context: Button to create new collection",
+          })}
           ctaHref="/dash/collections/new"
         />
       ) : (
@@ -39,18 +62,29 @@ function CollectionsListContent({ collections }: { collections: Collection[] })
               actions={
                 <ActionButtons
                   editHref={`/dash/collections/${col.id}/edit`}
-                  editLabel={t({ message: "Edit", comment: "@context: Button to edit collection" })}
+                  editLabel={t({
+                    message: "Edit",
+                    comment: "@context: Button to edit collection",
+                  })}
                   viewHref={`/c/${col.path}`}
-                  viewLabel={t({ message: "View", comment: "@context: Button to view collection" })}
+                  viewLabel={t({
+                    message: "View",
+                    comment: "@context: Button to view collection",
+                  })}
                 />
               }
             >
-              <a href={`/dash/collections/${col.id}`} class="font-medium hover:underline">
+              <a
+                href={`/dash/collections/${col.id}`}
+                class="font-medium hover:underline"
+              >
                 {col.title}
               </a>
               <p class="text-sm text-muted-foreground">/{col.path}</p>
               {col.description && (
-                <p class="text-sm text-muted-foreground mt-1">{col.description}</p>
+                <p class="text-sm text-muted-foreground mt-1">
+                  {col.description}
+                </p>
               )}
             </ListItemRow>
           ))}
@@ -64,40 +98,84 @@ function NewCollectionContent() {
   const { t } = useLingui();
   return (
     <>
-      <h1 class="text-2xl font-semibold mb-6">{t({ message: "New Collection", comment: "@context: Page heading" })}</h1>
-
-      <form method="post" action="/dash/collections" class="flex flex-col gap-4 max-w-lg">
+      <h1 class="text-2xl font-semibold mb-6">
+        {t({ message: "New Collection", comment: "@context: Page heading" })}
+      </h1>
+
+      <form
+        data-signals="{title: '', path: '', description: ''}"
+        data-on:submit__prevent="@post('/dash/collections')"
+        class="flex flex-col gap-4 max-w-lg"
+      >
         <div class="field">
-          <label class="label">{t({ message: "Title", comment: "@context: Collection form field" })}</label>
-          <input type="text" name="title" class="input" required placeholder={t({ message: "My Collection", comment: "@context: Collection title placeholder" })} />
+          <label class="label">
+            {t({
+              message: "Title",
+              comment: "@context: Collection form field",
+            })}
+          </label>
+          <input
+            type="text"
+            data-bind="title"
+            class="input"
+            required
+            placeholder={t({
+              message: "My Collection",
+              comment: "@context: Collection title placeholder",
+            })}
+          />
         </div>
 
         <div class="field">
-          <label class="label">{t({ message: "Slug", comment: "@context: Collection form field" })}</label>
+          <label class="label">
+            {t({ message: "Slug", comment: "@context: Collection form field" })}
+          </label>
           <input
             type="text"
-            name="path"
+            data-bind="path"
             class="input"
             required
             placeholder="my-collection"
             pattern="[a-z0-9-]+"
           />
           <p class="text-xs text-muted-foreground mt-1">
-            {t({ message: "URL-safe identifier (lowercase, numbers, hyphens)", comment: "@context: Collection path help text" })}
+            {t({
+              message: "URL-safe identifier (lowercase, numbers, hyphens)",
+              comment: "@context: Collection path help text",
+            })}
           </p>
         </div>
 
         <div class="field">
-          <label class="label">{t({ message: "Description (optional)", comment: "@context: Collection form field" })}</label>
-          <textarea name="description" class="textarea" rows={3} placeholder={t({ message: "What's this collection about?", comment: "@context: Collection description placeholder" })} />
+          <label class="label">
+            {t({
+              message: "Description (optional)",
+              comment: "@context: Collection form field",
+            })}
+          </label>
+          <textarea
+            data-bind="description"
+            class="textarea"
+            rows={3}
+            placeholder={t({
+              message: "What's this collection about?",
+              comment: "@context: Collection description placeholder",
+            })}
+          />
         </div>
 
         <div class="flex gap-2">
           <button type="submit" class="btn">
-            {t({ message: "Create Collection", comment: "@context: Button to save new collection" })}
+            {t({
+              message: "Create Collection",
+              comment: "@context: Button to save new collection",
+            })}
           </button>
           <a href="/dash/collections" class="btn-outline">
-            {t({ message: "Cancel", comment: "@context: Button to cancel form" })}
+            {t({
+              message: "Cancel",
+              comment: "@context: Button to cancel form",
+            })}
           </a>
         </div>
       </form>
@@ -105,9 +183,19 @@ function NewCollectionContent() {
   );
 }
 
-function ViewCollectionContent({ collection, posts }: { collection: Collection; posts: Post[] }) {
+function ViewCollectionContent({
+  collection,
+  posts,
+}: {
+  collection: Collection;
+  posts: Post[];
+}) {
   const { t } = useLingui();
-  const postsHeader = t({ message: "Posts in Collection ({count})", comment: "@context: Collection posts section heading", values: { count: String(posts.length) } });
+  const postsHeader = t({
+    message: "Posts in Collection ({count})",
+    comment: "@context: Collection posts section heading",
+    values: { count: String(posts.length) },
+  });
 
   return (
     <>
@@ -118,9 +206,15 @@ function ViewCollectionContent({ collection, posts }: { collection: Collection;
         </div>
         <ActionButtons
           editHref={`/dash/collections/${collection.id}/edit`}
-          editLabel={t({ message: "Edit", comment: "@context: Button to edit collection" })}
+          editLabel={t({
+            message: "Edit",
+            comment: "@context: Button to edit collection",
+          })}
           viewHref={`/c/${collection.path}`}
-          viewLabel={t({ message: "View", comment: "@context: Button to view collection" })}
+          viewLabel={t({
+            message: "View",
+            comment: "@context: Button to view collection",
+          })}
         />
       </div>
 
@@ -134,7 +228,12 @@ function ViewCollectionContent({ collection, posts }: { collection: Collection;
         </header>
         <section>
           {posts.length === 0 ? (
-            <p class="text-muted-foreground">{t({ message: "No posts in this collection.", comment: "@context: Empty state message" })}</p>
+            <p class="text-muted-foreground">
+              {t({
+                message: "No posts in this collection.",
+                comment: "@context: Empty state message",
+              })}
+            </p>
           ) : (
             <div class="flex flex-col divide-y">
               {posts.map((post) => (
@@ -144,15 +243,22 @@ function ViewCollectionContent({ collection, posts }: { collection: Collection;
                       href={`/dash/posts/${sqid.encode(post.id)}`}
                       class="font-medium hover:underline"
                     >
-                      {post.title || post.content?.slice(0, 50) || `Post #${post.id}`}
+                      {post.title ||
+                        post.content?.slice(0, 50) ||
+                        `Post #${post.id}`}
                     </a>
                   </div>
-                  <form method="post" action={`/dash/collections/${collection.id}/remove-post`}>
-                    <input type="hidden" name="postId" value={post.id} />
-                    <button type="submit" class="btn-sm-ghost text-destructive">
-                      {t({ message: "Remove", comment: "@context: Button to remove post from collection" })}
-                    </button>
-                  </form>
+                  <button
+                    type="button"
+                    class="btn-sm-ghost text-destructive"
+                    data-on:click__prevent={`@post('/dash/collections/${collection.id}/remove-post', {payload: {postId: ${post.id}}})`}
+                  >
+                    {t({
+                      message: "Remove",
+                      comment:
+                        "@context: Button to remove post from collection",
+                    })}
+                  </button>
                 </div>
               ))}
             </div>
@@ -162,7 +268,10 @@ function ViewCollectionContent({ collection, posts }: { collection: Collection;
 
       <div class="mt-6">
         <a href="/dash/collections" class="text-sm hover:underline">
-          {t({ message: "← Back to Collections", comment: "@context: Navigation link" })}
+          {t({
+            message: "← Back to Collections",
+            comment: "@context: Navigation link",
+          })}
         </a>
       </div>
     </>
@@ -172,47 +281,79 @@ function ViewCollectionContent({ collection, posts }: { collection: Collection;
 function EditCollectionContent({ collection }: { collection: Collection }) {
   const { t } = useLingui();
 
+  const signals = JSON.stringify({
+    title: collection.title,
+    path: collection.path ?? "",
+    description: collection.description ?? "",
+  }).replace(/</g, "\\u003c");
+
   return (
     <>
-      <h1 class="text-2xl font-semibold mb-6">{t({ message: "Edit Collection", comment: "@context: Page heading" })}</h1>
-
-      <form method="post" action={`/dash/collections/${collection.id}`} class="flex flex-col gap-4 max-w-lg">
+      <h1 class="text-2xl font-semibold mb-6">
+        {t({ message: "Edit Collection", comment: "@context: Page heading" })}
+      </h1>
+
+      <form
+        data-signals={signals}
+        data-on:submit__prevent={`@post('/dash/collections/${collection.id}')`}
+        class="flex flex-col gap-4 max-w-lg"
+      >
         <div class="field">
-          <label class="label">{t({ message: "Title", comment: "@context: Collection form field" })}</label>
-          <input type="text" name="title" class="input" required value={collection.title} />
+          <label class="label">
+            {t({
+              message: "Title",
+              comment: "@context: Collection form field",
+            })}
+          </label>
+          <input type="text" data-bind="title" class="input" required />
         </div>
 
         <div class="field">
-          <label class="label">{t({ message: "Slug", comment: "@context: Collection form field" })}</label>
+          <label class="label">
+            {t({ message: "Slug", comment: "@context: Collection form field" })}
+          </label>
           <input
             type="text"
-            name="path"
+            data-bind="path"
             class="input"
             required
-            value={collection.path ?? ""}
             pattern="[a-z0-9-]+"
           />
         </div>
 
         <div class="field">
-          <label class="label">{t({ message: "Description (optional)", comment: "@context: Collection form field" })}</label>
-          <textarea name="description" class="textarea" rows={3}>
+          <label class="label">
+            {t({
+              message: "Description (optional)",
+              comment: "@context: Collection form field",
+            })}
+          </label>
+          <textarea data-bind="description" class="textarea" rows={3}>
             {collection.description ?? ""}
           </textarea>
         </div>
 
         <div class="flex gap-2">
           <button type="submit" class="btn">
-            {t({ message: "Update Collection", comment: "@context: Button to save collection changes" })}
+            {t({
+              message: "Update Collection",
+              comment: "@context: Button to save collection changes",
+            })}
           </button>
           <a href={`/dash/collections/${collection.id}`} class="btn-outline">
-            {t({ message: "Cancel", comment: "@context: Button to cancel form" })}
+            {t({
+              message: "Cancel",
+              comment: "@context: Button to cancel form",
+            })}
           </a>
         </div>
       </form>
 
       <DangerZone
-        actionLabel={t({ message: "Delete Collection", comment: "@context: Button to delete collection" })}
+        actionLabel={t({
+          message: "Delete Collection",
+          comment: "@context: Button to delete collection",
+        })}
         formAction={`/dash/collections/${collection.id}/delete`}
         confirmMessage="Are you sure you want to delete this collection?"
       />
@@ -226,9 +367,14 @@ collectionsRoutes.get("/", async (c) => {
   const collections = await c.var.services.collections.list();
 
   return c.html(
-    <DashLayout c={c} title="Collections" siteName={siteName} currentPath="/dash/collections">
+    <DashLayout
+      c={c}
+      title="Collections"
+      siteName={siteName}
+      currentPath="/dash/collections"
+    >
       <CollectionsListContent collections={collections} />
-    </DashLayout>
+    </DashLayout>,
   );
 });
 
@@ -237,27 +383,34 @@ collectionsRoutes.get("/new", async (c) => {
   const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
 
   return c.html(
-    <DashLayout c={c} title="New Collection" siteName={siteName} currentPath="/dash/collections">
+    <DashLayout
+      c={c}
+      title="New Collection"
+      siteName={siteName}
+      currentPath="/dash/collections"
+    >
       <NewCollectionContent />
-    </DashLayout>
+    </DashLayout>,
   );
 });
 
 // Create collection
 collectionsRoutes.post("/", async (c) => {
-  const formData = await c.req.formData();
-
-  const title = formData.get("title") as string;
-  const path = formData.get("path") as string;
-  const description = formData.get("description") as string;
+  const body = await c.req.json<{
+    title: string;
+    path: string;
+    description?: string;
+  }>();
 
   const collection = await c.var.services.collections.create({
-    title,
-    path,
-    description: description || undefined,
+    title: body.title,
+    path: body.path,
+    description: body.description || undefined,
   });
 
-  return c.redirect(`/dash/collections/${collection.id}`);
+  return sse(c, async (stream) => {
+    await stream.redirect(`/dash/collections/${collection.id}`);
+  });
 });
 
 // View single collection
@@ -272,9 +425,14 @@ collectionsRoutes.get("/:id", async (c) => {
   const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
 
   return c.html(
-    <DashLayout c={c} title={collection.title} siteName={siteName} currentPath="/dash/collections">
+    <DashLayout
+      c={c}
+      title={collection.title}
+      siteName={siteName}
+      currentPath="/dash/collections"
+    >
       <ViewCollectionContent collection={collection} posts={posts} />
-    </DashLayout>
+    </DashLayout>,
   );
 });
 
@@ -289,9 +447,14 @@ collectionsRoutes.get("/:id/edit", async (c) => {
   const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
 
   return c.html(
-    <DashLayout c={c} title={`Edit: ${collection.title}`} siteName={siteName} currentPath="/dash/collections">
+    <DashLayout
+      c={c}
+      title={`Edit: ${collection.title}`}
+      siteName={siteName}
+      currentPath="/dash/collections"
+    >
       <EditCollectionContent collection={collection} />
-    </DashLayout>
+    </DashLayout>,
   );
 });
 
@@ -300,19 +463,21 @@ collectionsRoutes.post("/:id", async (c) => {
   const id = parseInt(c.req.param("id"), 10);
   if (isNaN(id)) return c.notFound();
 
-  const formData = await c.req.formData();
-
-  const title = formData.get("title") as string;
-  const path = formData.get("path") as string;
-  const description = formData.get("description") as string;
+  const body = await c.req.json<{
+    title: string;
+    path: string;
+    description?: string;
+  }>();
 
   await c.var.services.collections.update(id, {
-    title,
-    path,
-    description: description || undefined,
+    title: body.title,
+    path: body.path,
+    description: body.description || undefined,
   });
 
-  return c.redirect(`/dash/collections/${id}`);
+  return sse(c, async (stream) => {
+    await stream.redirect(`/dash/collections/${id}`);
+  });
 });
 
 // Delete collection
@@ -322,7 +487,9 @@ collectionsRoutes.post("/:id/delete", async (c) => {
 
   await c.var.services.collections.delete(id);
 
-  return c.redirect("/dash/collections");
+  return sse(c, async (stream) => {
+    await stream.redirect("/dash/collections");
+  });
 });
 
 // Remove post from collection
@@ -330,12 +497,13 @@ collectionsRoutes.post("/:id/remove-post", async (c) => {
   const id = parseInt(c.req.param("id"), 10);
   if (isNaN(id)) return c.notFound();
 
-  const formData = await c.req.formData();
-  const postId = parseInt(formData.get("postId") as string, 10);
+  const body = await c.req.json<{ postId: number }>();
 
-  if (!isNaN(postId)) {
-    await c.var.services.collections.removePost(id, postId);
+  if (body.postId) {
+    await c.var.services.collections.removePost(id, body.postId);
   }
 
-  return c.redirect(`/dash/collections/${id}`);
+  return sse(c, async (stream) => {
+    await stream.redirect(`/dash/collections/${id}`);
+  });
 });

package/src/routes/dash/index.tsx

@@ -5,7 +5,7 @@
  */
 
 import { Hono } from "hono";
-import { Trans, useLingui } from "../../i18n/index.js";
+import { Trans, useLingui } from "@lingui/react/macro";
 import type { Bindings } from "../../types.js";
 import type { AppVariables } from "../../app.js";
 import { DashLayout } from "../../theme/layouts/index.js";
@@ -32,13 +32,19 @@ function DashboardContent({
     <div class="container py-8">
       <h1 class="text-2xl font-semibold mb-6">
         {/* ✅ No more nesting! */}
-        {t({ message: "Dashboard", comment: "@context: Dashboard main heading" })}
+        {t({
+          message: "Dashboard",
+          comment: "@context: Dashboard main heading",
+        })}
       </h1>
 
       <div class="grid gap-4 md:grid-cols-3 mb-6">
         <div class="p-4 border rounded">
           <p class="text-sm text-muted-foreground">
-            {t({ message: "Published", comment: "@context: Post status label" })}
+            {t({
+              message: "Published",
+              comment: "@context: Post status label",
+            })}
           </p>
           <p class="text-3xl font-bold">{publishedCount}</p>
         </div>
@@ -52,10 +58,16 @@ function DashboardContent({
 
         <div class="p-4 border rounded">
           <p class="text-sm text-muted-foreground mb-2">
-            {t({ message: "Quick Actions", comment: "@context: Dashboard section title" })}
+            {t({
+              message: "Quick Actions",
+              comment: "@context: Dashboard section title",
+            })}
           </p>
           <a href="/dash/posts/new" class="btn btn-primary w-full">
-            {t({ message: "New Post", comment: "@context: Button to create new post" })}
+            {t({
+              message: "New Post",
+              comment: "@context: Button to create new post",
+            })}
           </a>
         </div>
       </div>
@@ -63,7 +75,10 @@ function DashboardContent({
       {/* ✅ Trans component with embedded JSX! */}
       <p>
         <Trans comment="@context: Help text with link">
-          Need help? Visit the <a href="/docs" class="underline">documentation</a>
+          Need help? Visit the{" "}
+          <a href="/docs" class="underline">
+            documentation
+          </a>
         </Trans>
       </p>
     </div>
@@ -84,6 +99,6 @@ dashIndexRoutes.get("/", async (c) => {
         publishedCount={publishedPosts.length}
         draftCount={draftPosts.length}
       />
-    </DashLayout>
+    </DashLayout>,
   );
 });