@jant/core 0.2.12 → 0.2.13

package/src/routes/dash/settings.tsx

@@ -3,10 +3,11 @@
  */
 
 import { Hono } from "hono";
-import { useLingui } from "../../i18n/index.js";
+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 { sse } from "../../lib/sse.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -16,98 +17,290 @@ function SettingsContent({
   siteName,
   siteDescription,
   siteLanguage,
+  saved,
 }: {
   siteName: string;
   siteDescription: string;
   siteLanguage: string;
+  saved: boolean;
 }) {
   const { t } = useLingui();
 
+  const generalSignals = JSON.stringify({
+    siteName,
+    siteDescription,
+    siteLanguage,
+  }).replace(/</g, "\\u003c");
+
   return (
     <>
       <h1 class="text-2xl font-semibold mb-6">
         {t({ message: "Settings", comment: "@context: Dashboard heading" })}
       </h1>
 
-      <form method="post" action="/dash/settings" class="flex flex-col gap-6 max-w-lg">
-        <div class="card">
-          <header>
-            <h2>{t({ message: "General", comment: "@context: Settings section heading" })}</h2>
-          </header>
-          <section class="flex flex-col gap-4">
-            <div class="field">
-              <label class="label">
-                {t({ message: "Site Name", comment: "@context: Settings form field" })}
-              </label>
-              <input type="text" name="siteName" class="input" value={siteName} required />
-            </div>
-
-            <div class="field">
-              <label class="label">
-                {t({ message: "Site Description", comment: "@context: Settings form field" })}
-              </label>
-              <textarea name="siteDescription" class="textarea" rows={3}>
-                {siteDescription}
-              </textarea>
-            </div>
-
-            <div class="field">
-              <label class="label">
-                {t({ message: "Language", comment: "@context: Settings form field" })}
-              </label>
-              <select name="siteLanguage" class="select">
-                <option value="en" selected={siteLanguage === "en"}>
-                  English
-                </option>
-                <option value="zh-Hans" selected={siteLanguage === "zh-Hans"}>
-                  简体中文
-                </option>
-                <option value="zh-Hant" selected={siteLanguage === "zh-Hant"}>
-                  繁體中文
-                </option>
-              </select>
-            </div>
-          </section>
+      {saved && (
+        <div
+          id="settings-saved-toast"
+          class="mb-4 max-w-lg rounded-md border border-green-200 bg-green-50 p-3 text-sm text-green-800 transition-opacity duration-300 dark:border-green-800 dark:bg-green-950 dark:text-green-200"
+          data-init={`console.log('[toast] init fired at', Date.now()); history.replaceState({}, '', '/dash/settings'); setTimeout(() => { console.log('[toast] hiding at', Date.now()); const el = document.getElementById('settings-saved-toast'); if (el) { el.style.opacity = '0'; setTimeout(() => el.remove(), 300) } }, 3000)`}
+        >
+          {t({
+            message: "Settings saved successfully.",
+            comment: "@context: Toast message after saving settings",
+          })}
         </div>
+      )}
+
+      <div class="flex flex-col gap-6 max-w-lg">
+        <form
+          data-signals={generalSignals}
+          data-on:submit__prevent="@post('/dash/settings')"
+        >
+          <div id="settings-message"></div>
+          <div class="card">
+            <header>
+              <h2>
+                {t({
+                  message: "General",
+                  comment: "@context: Settings section heading",
+                })}
+              </h2>
+            </header>
+            <section class="flex flex-col gap-4">
+              <div class="field">
+                <label class="label">
+                  {t({
+                    message: "Site Name",
+                    comment: "@context: Settings form field",
+                  })}
+                </label>
+                <input
+                  type="text"
+                  data-bind="siteName"
+                  class="input"
+                  required
+                />
+              </div>
+
+              <div class="field">
+                <label class="label">
+                  {t({
+                    message: "Site Description",
+                    comment: "@context: Settings form field",
+                  })}
+                </label>
+                <textarea data-bind="siteDescription" class="textarea" rows={3}>
+                  {siteDescription}
+                </textarea>
+              </div>
+
+              <div class="field">
+                <label class="label">
+                  {t({
+                    message: "Language",
+                    comment: "@context: Settings form field",
+                  })}
+                </label>
+                <select data-bind="siteLanguage" class="select">
+                  <option value="en" selected={siteLanguage === "en"}>
+                    English
+                  </option>
+                  <option value="zh-Hans" selected={siteLanguage === "zh-Hans"}>
+                    简体中文
+                  </option>
+                  <option value="zh-Hant" selected={siteLanguage === "zh-Hant"}>
+                    繁體中文
+                  </option>
+                </select>
+              </div>
+            </section>
+          </div>
+
+          <button type="submit" class="btn mt-4">
+            {t({
+              message: "Save Settings",
+              comment: "@context: Button to save settings",
+            })}
+          </button>
+        </form>
+
+        <form
+          data-signals="{currentPassword: '', newPassword: '', confirmPassword: ''}"
+          data-on:submit__prevent="@post('/dash/settings/password')"
+        >
+          <div id="password-message"></div>
+          <div class="card">
+            <header>
+              <h2>
+                {t({
+                  message: "Change Password",
+                  comment: "@context: Settings section heading",
+                })}
+              </h2>
+            </header>
+            <section class="flex flex-col gap-4">
+              <div class="field">
+                <label class="label">
+                  {t({
+                    message: "Current Password",
+                    comment: "@context: Password form field",
+                  })}
+                </label>
+                <input
+                  type="password"
+                  data-bind="currentPassword"
+                  class="input"
+                  required
+                  autocomplete="current-password"
+                />
+              </div>
+
+              <div class="field">
+                <label class="label">
+                  {t({
+                    message: "New Password",
+                    comment: "@context: Password form field",
+                  })}
+                </label>
+                <input
+                  type="password"
+                  data-bind="newPassword"
+                  class="input"
+                  required
+                  minlength={8}
+                  autocomplete="new-password"
+                />
+              </div>
+
+              <div class="field">
+                <label class="label">
+                  {t({
+                    message: "Confirm New Password",
+                    comment: "@context: Password form field",
+                  })}
+                </label>
+                <input
+                  type="password"
+                  data-bind="confirmPassword"
+                  class="input"
+                  required
+                  minlength={8}
+                  autocomplete="new-password"
+                />
+              </div>
+            </section>
+          </div>
 
-        <button type="submit" class="btn">
-          {t({ message: "Save Settings", comment: "@context: Button to save settings" })}
-        </button>
-      </form>
+          <button type="submit" class="btn mt-4">
+            {t({
+              message: "Change Password",
+              comment: "@context: Button to change password",
+            })}
+          </button>
+        </form>
+      </div>
     </>
   );
 }
 
 // Settings page
 settingsRoutes.get("/", async (c) => {
-  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
-  const siteDescription = (await c.var.services.settings.get("SITE_DESCRIPTION")) ?? "";
-  const siteLanguage = (await c.var.services.settings.get("SITE_LANGUAGE")) ?? "en";
+  const all = await c.var.services.settings.getAll();
+  const siteName = all["SITE_NAME"] ?? "Jant";
+  const siteDescription = all["SITE_DESCRIPTION"] ?? "";
+  const siteLanguage = all["SITE_LANGUAGE"] ?? "en";
+  const saved = c.req.query("saved") !== undefined;
 
   return c.html(
-    <DashLayout c={c} title="Settings" siteName={siteName} currentPath="/dash/settings">
+    <DashLayout
+      c={c}
+      title="Settings"
+      siteName={siteName}
+      currentPath="/dash/settings"
+    >
       <SettingsContent
         siteName={siteName}
         siteDescription={siteDescription}
         siteLanguage={siteLanguage}
+        saved={saved}
       />
-    </DashLayout>
+    </DashLayout>,
   );
 });
 
 // Update settings
 settingsRoutes.post("/", async (c) => {
-  const formData = await c.req.formData();
+  const body = await c.req.json<{
+    siteName: string;
+    siteDescription: string;
+    siteLanguage: string;
+  }>();
 
-  const siteName = formData.get("siteName") as string;
-  const siteDescription = formData.get("siteDescription") as string;
-  const siteLanguage = formData.get("siteLanguage") as string;
+  const oldLanguage =
+    (await c.var.services.settings.get("SITE_LANGUAGE")) ?? "en";
 
   await c.var.services.settings.setMany({
-    SITE_NAME: siteName,
-    SITE_DESCRIPTION: siteDescription,
-    SITE_LANGUAGE: siteLanguage,
+    SITE_NAME: body.siteName,
+    SITE_DESCRIPTION: body.siteDescription,
+    SITE_LANGUAGE: body.siteLanguage,
   });
 
-  return c.redirect("/dash/settings?saved=1");
+  const languageChanged = oldLanguage !== body.siteLanguage;
+
+  return sse(c, async (stream) => {
+    if (languageChanged) {
+      // Language changed - full reload needed to update all UI text
+      await stream.redirect("/dash/settings?saved");
+    } else {
+      // No language change - show inline success message
+      await stream.patchElements(
+        '<div id="settings-message"><div class="rounded-md border border-green-200 bg-green-50 p-3 text-sm text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-200 mb-4 transition-opacity duration-300" data-init="setTimeout(() => { el.style.opacity = \'0\'; setTimeout(() => el.remove(), 300) }, 3000)">Settings saved successfully.</div></div>',
+      );
+    }
+  });
+});
+
+// Change password
+settingsRoutes.post("/password", async (c) => {
+  const body = await c.req.json<{
+    currentPassword: string;
+    newPassword: string;
+    confirmPassword: string;
+  }>();
+
+  if (body.newPassword !== body.confirmPassword) {
+    return sse(c, async (stream) => {
+      await stream.patchElements(
+        '<div id="password-message"><div class="rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-800 dark:border-red-800 dark:bg-red-950 dark:text-red-200 mb-4">Passwords do not match.</div></div>',
+      );
+    });
+  }
+
+  try {
+    await c.var.auth.api.changePassword({
+      body: {
+        currentPassword: body.currentPassword,
+        newPassword: body.newPassword,
+        revokeOtherSessions: false,
+      },
+      headers: c.req.raw.headers,
+    });
+  } catch {
+    return sse(c, async (stream) => {
+      await stream.patchElements(
+        '<div id="password-message"><div class="rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-800 dark:border-red-800 dark:bg-red-950 dark:text-red-200 mb-4">Current password is incorrect.</div></div>',
+      );
+    });
+  }
+
+  return sse(c, async (stream) => {
+    await stream.patchElements(
+      '<div id="password-message"><div class="rounded-md border border-green-200 bg-green-50 p-3 text-sm text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-200 mb-4">Password changed successfully.</div></div>',
+    );
+    await stream.patchSignals({
+      currentPassword: "",
+      newPassword: "",
+      confirmPassword: "",
+    });
+  });
 });

package/src/routes/feed/rss.ts

@@ -14,8 +14,9 @@ export const rssRoutes = new Hono<Env>();
 
 // RSS 2.0 Feed - main feed at /feed
 rssRoutes.get("/", async (c) => {
-  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
-  const siteDescription = (await c.var.services.settings.get("SITE_DESCRIPTION")) ?? "";
+  const all = await c.var.services.settings.getAll();
+  const siteName = all["SITE_NAME"] ?? "Jant";
+  const siteDescription = all["SITE_DESCRIPTION"] ?? "";
   const siteUrl = c.env.SITE_URL;
 
   const posts = await c.var.services.posts.list({
@@ -61,8 +62,9 @@ rssRoutes.get("/", async (c) => {
 
 // Atom Feed
 rssRoutes.get("/atom.xml", async (c) => {
-  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
-  const siteDescription = (await c.var.services.settings.get("SITE_DESCRIPTION")) ?? "";
+  const all = await c.var.services.settings.getAll();
+  const siteName = all["SITE_NAME"] ?? "Jant";
+  const siteDescription = all["SITE_DESCRIPTION"] ?? "";
   const siteUrl = c.env.SITE_URL;
 
   const posts = await c.var.services.posts.list({

package/src/routes/pages/archive.tsx

@@ -5,7 +5,7 @@
  */
 
 import { Hono } from "hono";
-import { useLingui } from "../../i18n/index.js";
+import { useLingui } from "@lingui/react/macro";
 import type { Bindings, Post, PostType } from "../../types.js";
 import type { AppVariables } from "../../app.js";
 import { BaseLayout } from "../../theme/layouts/index.js";
@@ -24,10 +24,19 @@ function getTypeLabel(type: string): string {
   const { t } = useLingui();
   const labels: Record<string, string> = {
     note: t({ message: "Note", comment: "@context: Post type label - note" }),
-    article: t({ message: "Article", comment: "@context: Post type label - article" }),
+    article: t({
+      message: "Article",
+      comment: "@context: Post type label - article",
+    }),
     link: t({ message: "Link", comment: "@context: Post type label - link" }),
-    quote: t({ message: "Quote", comment: "@context: Post type label - quote" }),
-    image: t({ message: "Image", comment: "@context: Post type label - image" }),
+    quote: t({
+      message: "Quote",
+      comment: "@context: Post type label - quote",
+    }),
+    image: t({
+      message: "Image",
+      comment: "@context: Post type label - image",
+    }),
     page: t({ message: "Page", comment: "@context: Post type label - page" }),
   };
   return labels[type] ?? type;
@@ -36,12 +45,30 @@ function getTypeLabel(type: string): string {
 function getTypeLabelPlural(type: string): string {
   const { t } = useLingui();
   const labels: Record<string, string> = {
-    note: t({ message: "Notes", comment: "@context: Post type label plural - notes" }),
-    article: t({ message: "Articles", comment: "@context: Post type label plural - articles" }),
-    link: t({ message: "Links", comment: "@context: Post type label plural - links" }),
-    quote: t({ message: "Quotes", comment: "@context: Post type label plural - quotes" }),
-    image: t({ message: "Images", comment: "@context: Post type label plural - images" }),
-    page: t({ message: "Pages", comment: "@context: Post type label plural - pages" }),
+    note: t({
+      message: "Notes",
+      comment: "@context: Post type label plural - notes",
+    }),
+    article: t({
+      message: "Articles",
+      comment: "@context: Post type label plural - articles",
+    }),
+    link: t({
+      message: "Links",
+      comment: "@context: Post type label plural - links",
+    }),
+    quote: t({
+      message: "Quotes",
+      comment: "@context: Post type label plural - quotes",
+    }),
+    image: t({
+      message: "Images",
+      comment: "@context: Post type label plural - images",
+    }),
+    page: t({
+      message: "Pages",
+      comment: "@context: Post type label plural - pages",
+    }),
   };
   return labels[type] ?? `${type}s`;
 }
@@ -80,8 +107,14 @@ function ArchiveContent({
 
         {/* Type filter */}
         <nav class="flex flex-wrap gap-2 mt-4">
-          <a href="/archive" class={`badge ${!type ? "badge-primary" : "badge-outline"}`}>
-            {t({ message: "All", comment: "@context: Archive filter - all types" })}
+          <a
+            href="/archive"
+            class={`badge ${!type ? "badge-primary" : "badge-outline"}`}
+          >
+            {t({
+              message: "All",
+              comment: "@context: Archive filter - all types",
+            })}
           </a>
           {POST_TYPES.filter((t) => t !== "page").map((typeKey) => (
             <a
@@ -98,7 +131,10 @@ function ArchiveContent({
       <main>
         {displayPosts.length === 0 ? (
           <p class="text-muted-foreground">
-            {t({ message: "No posts found.", comment: "@context: Archive empty state" })}
+            {t({
+              message: "No posts found.",
+              comment: "@context: Archive empty state",
+            })}
           </p>
         ) : (
           Array.from(grouped.entries()).map(([yearMonth, monthPosts]) => (
@@ -118,11 +154,18 @@ function ArchiveContent({
                         {new Date(post.publishedAt * 1000).getDate()}
                       </time>
                       <div class="flex-1 min-w-0">
-                        <a href={`/p/${sqid.encode(post.id)}`} class="hover:underline">
-                          {post.title || post.content?.slice(0, 80) || `Post #${post.id}`}
+                        <a
+                          href={`/p/${sqid.encode(post.id)}`}
+                          class="hover:underline"
+                        >
+                          {post.title ||
+                            post.content?.slice(0, 80) ||
+                            `Post #${post.id}`}
                         </a>
                         {!type && (
-                          <span class="ml-2 badge-outline text-xs">{getTypeLabel(post.type)}</span>
+                          <span class="ml-2 badge-outline text-xs">
+                            {getTypeLabel(post.type)}
+                          </span>
                         )}
                         {replyCount && replyCount > 0 && (
                           <span class="ml-2 text-xs text-muted-foreground">
@@ -130,11 +173,13 @@ function ArchiveContent({
                             {replyCount === 1
                               ? t({
                                   message: "1 reply",
-                                  comment: "@context: Archive post reply indicator - single",
+                                  comment:
+                                    "@context: Archive post reply indicator - single",
                                 })
                               : t({
                                   message: "{count} replies",
-                                  comment: "@context: Archive post reply indicator - plural",
+                                  comment:
+                                    "@context: Archive post reply indicator - plural",
                                   values: { count: String(replyCount) },
                                 })}
                             )
@@ -159,7 +204,11 @@ function ArchiveContent({
 
       <nav class="mt-4">
         <a href="/" class="text-sm hover:underline">
-          ← {t({ message: "Back to home", comment: "@context: Navigation link back to home page" })}
+          ←{" "}
+          {t({
+            message: "Back to home",
+            comment: "@context: Navigation link back to home page",
+          })}
         </a>
       </nav>
     </div>
@@ -169,7 +218,8 @@ function ArchiveContent({
 // Archive page - all posts
 archiveRoutes.get("/", async (c) => {
   const typeParam = c.req.query("type") as PostType | undefined;
-  const type = typeParam && POST_TYPES.includes(typeParam) ? typeParam : undefined;
+  const type =
+    typeParam && POST_TYPES.includes(typeParam) ? typeParam : undefined;
 
   // Parse cursor
   const cursorParam = c.req.query("cursor");
@@ -222,6 +272,6 @@ archiveRoutes.get("/", async (c) => {
         grouped={grouped}
         replyCounts={replyCounts}
       />
-    </BaseLayout>
+    </BaseLayout>,
   );
 });

package/src/routes/pages/collection.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 { BaseLayout } from "../../theme/layouts/index.js";
@@ -14,7 +14,13 @@ type Env = { Bindings: Bindings; Variables: AppVariables };
 
 export const collectionRoutes = new Hono<Env>();
 
-function CollectionContent({ collection, posts }: { collection: Collection; posts: Post[] }) {
+function CollectionContent({
+  collection,
+  posts,
+}: {
+  collection: Collection;
+  posts: Post[];
+}) {
   const { t } = useLingui();
 
   return (
@@ -39,7 +45,10 @@ function CollectionContent({ collection, posts }: { collection: Collection; post
             <article key={post.id} class="h-entry">
               {post.title && (
                 <h2 class="p-name text-lg font-medium mb-2">
-                  <a href={`/p/${sqid.encode(post.id)}`} class="u-url hover:underline">
+                  <a
+                    href={`/p/${sqid.encode(post.id)}`}
+                    class="u-url hover:underline"
+                  >
                     {post.title}
                   </a>
                 </h2>
@@ -49,7 +58,10 @@ function CollectionContent({ collection, posts }: { collection: Collection; post
                 dangerouslySetInnerHTML={{ __html: post.contentHtml || "" }}
               />
               <footer class="mt-2 text-sm text-muted-foreground">
-                <time class="dt-published" datetime={time.toISOString(post.publishedAt)}>
+                <time
+                  class="dt-published"
+                  datetime={time.toISOString(post.publishedAt)}
+                >
                   {time.formatDate(post.publishedAt)}
                 </time>
               </footer>
@@ -60,7 +72,10 @@ function CollectionContent({ collection, posts }: { collection: Collection; post
 
       <nav class="mt-8">
         <a href="/" class="text-sm hover:underline">
-          {t({ message: "← Back to home", comment: "@context: Navigation link" })}
+          {t({
+            message: "← Back to home",
+            comment: "@context: Navigation link",
+          })}
         </a>
       </nav>
     </div>
@@ -83,6 +98,6 @@ collectionRoutes.get("/:path", async (c) => {
       c={c}
     >
       <CollectionContent collection={collection} posts={posts} />
-    </BaseLayout>
+    </BaseLayout>,
   );
 });