@jant/core 0.2.12 → 0.2.13

package/src/routes/dash/collections.tsx

@@ -3,7 +3,7 @@
  */
 
 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";
@@ -15,18 +15,26 @@ import {
   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" })}
+        title={t({
+          message: "Collections",
+          comment: "@context: Dashboard heading",
+        })}
         ctaLabel={t({
           message: "New Collection",
           comment: "@context: Button to create new collection",
@@ -36,7 +44,10 @@ function CollectionsListContent({ collections }: { collections: Collection[] })
 
       {collections.length === 0 ? (
         <EmptyState
-          message={t({ message: "No collections yet.", comment: "@context: Empty state message" })}
+          message={t({
+            message: "No collections yet.",
+            comment: "@context: Empty state message",
+          })}
           ctaText={t({
             message: "New Collection",
             comment: "@context: Button to create new collection",
@@ -51,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>
           ))}
@@ -80,14 +102,21 @@ function NewCollectionContent() {
         {t({ message: "New Collection", comment: "@context: Page heading" })}
       </h1>
 
-      <form method="post" action="/dash/collections" class="flex flex-col gap-4 max-w-lg">
+      <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" })}
+            {t({
+              message: "Title",
+              comment: "@context: Collection form field",
+            })}
           </label>
           <input
             type="text"
-            name="title"
+            data-bind="title"
             class="input"
             required
             placeholder={t({
@@ -103,7 +132,7 @@ function NewCollectionContent() {
           </label>
           <input
             type="text"
-            name="path"
+            data-bind="path"
             class="input"
             required
             placeholder="my-collection"
@@ -119,10 +148,13 @@ function NewCollectionContent() {
 
         <div class="field">
           <label class="label">
-            {t({ message: "Description (optional)", comment: "@context: Collection form field" })}
+            {t({
+              message: "Description (optional)",
+              comment: "@context: Collection form field",
+            })}
           </label>
           <textarea
-            name="description"
+            data-bind="description"
             class="textarea"
             rows={3}
             placeholder={t({
@@ -140,7 +172,10 @@ function NewCollectionContent() {
             })}
           </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>
@@ -148,7 +183,13 @@ 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})",
@@ -165,13 +206,21 @@ 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>
 
-      {collection.description && <p class="text-muted-foreground mb-6">{collection.description}</p>}
+      {collection.description && (
+        <p class="text-muted-foreground mb-6">{collection.description}</p>
+      )}
 
       <div class="card">
         <header>
@@ -194,18 +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>
@@ -215,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>
     </>
@@ -225,6 +281,12 @@ 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">
@@ -232,15 +294,18 @@ function EditCollectionContent({ collection }: { collection: Collection }) {
       </h1>
 
       <form
-        method="post"
-        action={`/dash/collections/${collection.id}`}
+        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" })}
+            {t({
+              message: "Title",
+              comment: "@context: Collection form field",
+            })}
           </label>
-          <input type="text" name="title" class="input" required value={collection.title} />
+          <input type="text" data-bind="title" class="input" required />
         </div>
 
         <div class="field">
@@ -249,19 +314,21 @@ function EditCollectionContent({ collection }: { collection: Collection }) {
           </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" })}
+            {t({
+              message: "Description (optional)",
+              comment: "@context: Collection form field",
+            })}
           </label>
-          <textarea name="description" class="textarea" rows={3}>
+          <textarea data-bind="description" class="textarea" rows={3}>
             {collection.description ?? ""}
           </textarea>
         </div>
@@ -274,7 +341,10 @@ function EditCollectionContent({ collection }: { collection: Collection }) {
             })}
           </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>
@@ -297,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>,
   );
 });
 
@@ -308,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
@@ -343,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>,
   );
 });
 
@@ -367,7 +454,7 @@ collectionsRoutes.get("/:id/edit", async (c) => {
       currentPath="/dash/collections"
     >
       <EditCollectionContent collection={collection} />
-    </DashLayout>
+    </DashLayout>,
   );
 });
 
@@ -376,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
@@ -398,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
@@ -406,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>
@@ -83,7 +95,10 @@ dashIndexRoutes.get("/", async (c) => {
 
   return c.html(
     <DashLayout c={c} title="Dashboard" siteName={siteName} currentPath="/dash">
-      <DashboardContent publishedCount={publishedPosts.length} draftCount={draftPosts.length} />
-    </DashLayout>
+      <DashboardContent
+        publishedCount={publishedPosts.length}
+        draftCount={draftPosts.length}
+      />
+    </DashLayout>,
   );
 });

package/src/routes/dash/media.tsx

@@ -6,13 +6,14 @@
  */
 
 import { Hono } from "hono";
-import { useLingui } from "../../i18n/index.js";
+import { useLingui } from "@lingui/react/macro";
 import type { Bindings, Media } from "../../types.js";
 import type { AppVariables } from "../../app.js";
 import { DashLayout } from "../../theme/layouts/index.js";
 import { EmptyState, DangerZone } from "../../theme/components/index.js";
 import * as time from "../../lib/time.js";
 import { getMediaUrl, getImageUrl } from "../../lib/image.js";
+import { sse } from "../../lib/sse.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -110,7 +111,10 @@ function MediaListContent({
     message: "Uploading...",
     comment: "@context: Upload status - uploading",
   });
-  const uploadText = t({ message: "Upload", comment: "@context: Button to upload media file" });
+  const uploadText = t({
+    message: "Upload",
+    comment: "@context: Button to upload media file",
+  });
   const errorText = t({
     message: "Upload failed. Please try again.",
     comment: "@context: Upload error message",
@@ -281,7 +285,12 @@ function processSSEEvent(event) {
         </h1>
         <label class="btn cursor-pointer">
           <span>{uploadText}</span>
-          <input type="file" class="hidden" accept="image/*" onchange="handleMediaUpload(this)" />
+          <input
+            type="file"
+            class="hidden"
+            accept="image/*"
+            onchange="handleMediaUpload(this)"
+          />
         </label>
       </div>
 
@@ -295,7 +304,8 @@ function processSSEEvent(event) {
             {t({
               message:
                 "Images are automatically optimized: resized to max 1920px, converted to WebP, and metadata stripped.",
-              comment: "@context: Media upload instructions - auto optimization",
+              comment:
+                "@context: Media upload instructions - auto optimization",
             })}
           </p>
         </section>
@@ -373,11 +383,15 @@ function ViewMediaContent({
         <div>
           <h1 class="text-2xl font-semibold">{media.originalName}</h1>
           <p class="text-muted-foreground mt-1">
-            {formatSize(media.size)} · {media.mimeType} · {time.formatDate(media.createdAt)}
+            {formatSize(media.size)} · {media.mimeType} ·{" "}
+            {time.formatDate(media.createdAt)}
           </p>
         </div>
         <a href="/dash/media" class="btn-outline">
-          {t({ message: "Back", comment: "@context: Button to go back to media list" })}
+          {t({
+            message: "Back",
+            comment: "@context: Button to go back to media list",
+          })}
         </a>
       </div>
 
@@ -386,7 +400,10 @@ function ViewMediaContent({
         <div class="card">
           <header>
             <h2>
-              {t({ message: "Preview", comment: "@context: Media detail section - preview" })}
+              {t({
+                message: "Preview",
+                comment: "@context: Media detail section - preview",
+              })}
             </h2>
           </header>
           <section>
@@ -422,17 +439,30 @@ function ViewMediaContent({
         <div class="space-y-6">
           <div class="card">
             <header>
-              <h2>{t({ message: "URL", comment: "@context: Media detail section - URL" })}</h2>
+              <h2>
+                {t({
+                  message: "URL",
+                  comment: "@context: Media detail section - URL",
+                })}
+              </h2>
             </header>
             <section>
               <div class="flex items-center gap-2">
-                <input type="text" class="input flex-1 font-mono text-sm" value={url} readonly />
+                <input
+                  type="text"
+                  class="input flex-1 font-mono text-sm"
+                  value={url}
+                  readonly
+                />
                 <button
                   type="button"
                   class="btn-outline"
                   onclick={`navigator.clipboard.writeText('${url}')`}
                 >
-                  {t({ message: "Copy", comment: "@context: Button to copy URL to clipboard" })}
+                  {t({
+                    message: "Copy",
+                    comment: "@context: Button to copy URL to clipboard",
+                  })}
                 </button>
               </div>
               <p class="text-xs text-muted-foreground mt-2">
@@ -484,7 +514,8 @@ function ViewMediaContent({
             formAction={`/dash/media/${media.id}/delete`}
             confirmMessage="Are you sure you want to delete this media?"
             description={t({
-              message: "Deleting this media will remove it permanently from storage.",
+              message:
+                "Deleting this media will remove it permanently from storage.",
               comment: "@context: Warning message before deleting media",
             })}
           />
@@ -518,13 +549,18 @@ mediaRoutes.get("/", async (c) => {
   const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
 
   return c.html(
-    <DashLayout c={c} title="Media" siteName={siteName} currentPath="/dash/media">
+    <DashLayout
+      c={c}
+      title="Media"
+      siteName={siteName}
+      currentPath="/dash/media"
+    >
       <MediaListContent
         mediaList={mediaList}
         r2PublicUrl={r2PublicUrl}
         imageTransformUrl={imageTransformUrl}
       />
-    </DashLayout>
+    </DashLayout>,
   );
 });
 
@@ -539,13 +575,18 @@ mediaRoutes.get("/:id", async (c) => {
   const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
 
   return c.html(
-    <DashLayout c={c} title={media.originalName} siteName={siteName} currentPath="/dash/media">
+    <DashLayout
+      c={c}
+      title={media.originalName}
+      siteName={siteName}
+      currentPath="/dash/media"
+    >
       <ViewMediaContent
         media={media}
         r2PublicUrl={r2PublicUrl}
         imageTransformUrl={imageTransformUrl}
       />
-    </DashLayout>
+    </DashLayout>,
   );
 });
 
@@ -568,5 +609,7 @@ mediaRoutes.post("/:id/delete", async (c) => {
   // Delete from database
   await c.var.services.media.delete(id);
 
-  return c.redirect("/dash/media");
+  return sse(c, async (stream) => {
+    await stream.redirect("/dash/media");
+  });
 });