@jant/core 0.2.17 → 0.2.19

package/src/routes/dash/posts.tsx

@@ -15,7 +15,7 @@ import {
   ActionButtons,
 } from "../../theme/components/index.js";
 import * as sqid from "../../lib/sqid.js";
-import { sse } from "../../lib/sse.js";
+import { dsRedirect } from "../../lib/sse.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -105,9 +105,7 @@ postsRoutes.post("/", async (c) => {
     path: body.path || undefined,
   });
 
-  return sse(c, async (stream) => {
-    await stream.redirect(`/dash/posts/${sqid.encode(post.id)}`);
-  });
+  return dsRedirect(`/dash/posts/${sqid.encode(post.id)}`);
 });
 
 function ViewPostContent({ post }: { post: Post }) {
@@ -227,9 +225,7 @@ postsRoutes.post("/:id", async (c) => {
     path: body.path || null,
   });
 
-  return sse(c, async (stream) => {
-    await stream.redirect(`/dash/posts/${sqid.encode(id)}`);
-  });
+  return dsRedirect(`/dash/posts/${sqid.encode(id)}`);
 });
 
 // Delete post
@@ -239,7 +235,5 @@ postsRoutes.post("/:id/delete", async (c) => {
 
   await c.var.services.posts.delete(id);
 
-  return sse(c, async (stream) => {
-    await stream.redirect("/dash/posts");
-  });
+  return dsRedirect("/dash/posts");
 });

package/src/routes/dash/redirects.tsx

@@ -14,7 +14,7 @@ import {
   ActionButtons,
   CrudPageHeader,
 } from "../../theme/components/index.js";
-import { sse } from "../../lib/sse.js";
+import { dsRedirect } from "../../lib/sse.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -219,9 +219,7 @@ redirectsRoutes.post("/", async (c) => {
   const type = parseInt(body.type, 10) as 301 | 302;
   await c.var.services.redirects.create(body.fromPath, body.toPath, type);
 
-  return sse(c, async (stream) => {
-    await stream.redirect("/dash/redirects");
-  });
+  return dsRedirect("/dash/redirects");
 });
 
 // Delete redirect
@@ -231,7 +229,5 @@ redirectsRoutes.post("/:id/delete", async (c) => {
     await c.var.services.redirects.delete(id);
   }
 
-  return sse(c, async (stream) => {
-    await stream.redirect("/dash/redirects");
-  });
+  return dsRedirect("/dash/redirects");
 });

package/src/routes/dash/settings.tsx

@@ -7,12 +7,17 @@ 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";
-import {
-  getSiteName,
-  getSiteDescription,
-  getSiteLanguage,
-} from "../../lib/config.js";
+import { sse, dsToast } from "../../lib/sse.js";
+import { getSiteLanguage, getConfigFallback } from "../../lib/config.js";
+
+/** Escape HTML special characters for safe insertion into HTML strings */
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -22,12 +27,14 @@ function SettingsContent({
   siteName,
   siteDescription,
   siteLanguage,
-  saved,
+  siteNameFallback,
+  siteDescriptionFallback,
 }: {
   siteName: string;
   siteDescription: string;
   siteLanguage: string;
-  saved: boolean;
+  siteNameFallback: string;
+  siteDescriptionFallback: string;
 }) {
   const { t } = useLingui();
 
@@ -43,27 +50,11 @@ function SettingsContent({
         {t({ message: "Settings", comment: "@context: Dashboard heading" })}
       </h1>
 
-      {saved && (
-        <div
-          id="settings-saved-toast"
-          class="alert mb-4 max-w-lg transition-opacity duration-300"
-          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)`}
-        >
-          <h2>
-            {t({
-              message: "Settings saved successfully.",
-              comment: "@context: Toast message after saving settings",
-            })}
-          </h2>
-        </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>
@@ -85,7 +76,7 @@ function SettingsContent({
                   type="text"
                   data-bind="siteName"
                   class="input"
-                  required
+                  placeholder={siteNameFallback}
                 />
               </div>
 
@@ -96,7 +87,12 @@ function SettingsContent({
                     comment: "@context: Settings form field",
                   })}
                 </label>
-                <textarea data-bind="siteDescription" class="textarea" rows={3}>
+                <textarea
+                  data-bind="siteDescription"
+                  class="textarea"
+                  rows={3}
+                  placeholder={siteDescriptionFallback}
+                >
                   {siteDescription}
                 </textarea>
               </div>
@@ -135,7 +131,6 @@ function SettingsContent({
           data-signals="{currentPassword: '', newPassword: '', confirmPassword: ''}"
           data-on:submit__prevent="@post('/dash/settings/password')"
         >
-          <div id="password-message"></div>
           <div class="card">
             <header>
               <h2>
@@ -212,23 +207,33 @@ function SettingsContent({
 
 // Settings page
 settingsRoutes.get("/", async (c) => {
-  const siteName = await getSiteName(c);
-  const siteDescription = await getSiteDescription(c);
+  const { settings } = c.var.services;
+
+  // Fetch raw DB values (null if not set)
+  const dbSiteName = await settings.get("SITE_NAME");
+  const dbSiteDescription = await settings.get("SITE_DESCRIPTION");
   const siteLanguage = await getSiteLanguage(c);
+
+  // Fallback values (ENV > Default) for placeholders
+  const siteNameFallback = getConfigFallback(c, "SITE_NAME");
+  const siteDescriptionFallback = getConfigFallback(c, "SITE_DESCRIPTION");
+
   const saved = c.req.query("saved") !== undefined;
 
   return c.html(
     <DashLayout
       c={c}
       title="Settings"
-      siteName={siteName}
+      siteName={dbSiteName || siteNameFallback}
       currentPath="/dash/settings"
+      toast={saved ? { message: "Settings saved successfully." } : undefined}
     >
       <SettingsContent
-        siteName={siteName}
-        siteDescription={siteDescription}
+        siteName={dbSiteName || ""}
+        siteDescription={dbSiteDescription || ""}
         siteLanguage={siteLanguage}
-        saved={saved}
+        siteNameFallback={siteNameFallback}
+        siteDescriptionFallback={siteDescriptionFallback}
       />
     </DashLayout>,
   );
@@ -242,26 +247,47 @@ settingsRoutes.post("/", async (c) => {
     siteLanguage: string;
   }>();
 
-  const oldLanguage =
-    (await c.var.services.settings.get("SITE_LANGUAGE")) ?? "en";
+  const { settings } = c.var.services;
 
-  await c.var.services.settings.setMany({
-    SITE_NAME: body.siteName,
-    SITE_DESCRIPTION: body.siteDescription,
-    SITE_LANGUAGE: body.siteLanguage,
-  });
+  const oldLanguage = (await settings.get("SITE_LANGUAGE")) ?? "en";
+
+  // For text fields: empty = remove from DB (fall back to ENV > Default)
+  if (body.siteName.trim()) {
+    await settings.set("SITE_NAME", body.siteName.trim());
+  } else {
+    await settings.remove("SITE_NAME");
+  }
+
+  if (body.siteDescription.trim()) {
+    await settings.set("SITE_DESCRIPTION", body.siteDescription.trim());
+  } else {
+    await settings.remove("SITE_DESCRIPTION");
+  }
+
+  // Language always has a value from the select
+  await settings.set("SITE_LANGUAGE", body.siteLanguage);
 
   const languageChanged = oldLanguage !== body.siteLanguage;
 
+  // Determine the effective display name after save
+  const displayName = body.siteName.trim() || getConfigFallback(c, "SITE_NAME");
+
   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
+      const escaped = escapeHtml(displayName);
+      // Update header site name
       await stream.patchElements(
-        '<div id="settings-message"><div class="alert mb-4 transition-opacity duration-300" data-init="setTimeout(() => { el.style.opacity = \'0\'; setTimeout(() => el.remove(), 300) }, 3000)"><h2>Settings saved successfully.</h2></div></div>',
+        `<a id="site-name" href="/dash" class="font-semibold">${escaped}</a>`,
       );
+      // Update page title
+      await stream.patchElements(`Settings - ${escaped}`, {
+        mode: "inner",
+        selector: "title",
+      });
+      await stream.toast("Settings saved successfully.");
     }
   });
 });
@@ -275,11 +301,7 @@ settingsRoutes.post("/password", async (c) => {
   }>();
 
   if (body.newPassword !== body.confirmPassword) {
-    return sse(c, async (stream) => {
-      await stream.patchElements(
-        '<div id="password-message"><div class="alert-destructive mb-4"><h2>Passwords do not match.</h2></div></div>',
-      );
-    });
+    return dsToast("Passwords do not match.", "error");
   }
 
   try {
@@ -292,17 +314,11 @@ settingsRoutes.post("/password", async (c) => {
       headers: c.req.raw.headers,
     });
   } catch {
-    return sse(c, async (stream) => {
-      await stream.patchElements(
-        '<div id="password-message"><div class="alert-destructive mb-4"><h2>Current password is incorrect.</h2></div></div>',
-      );
-    });
+    return dsToast("Current password is incorrect.", "error");
   }
 
   return sse(c, async (stream) => {
-    await stream.patchElements(
-      '<div id="password-message"><div class="alert mb-4"><h2>Password changed successfully.</h2></div></div>',
-    );
+    await stream.toast("Password changed successfully.");
     await stream.patchSignals({
       currentPassword: "",
       newPassword: "",

package/src/services/settings.ts

@@ -19,6 +19,7 @@ export interface SettingsService {
   getAll(): Promise<Record<string, string>>;
   set(key: SettingsKey, value: string): Promise<void>;
   setMany(entries: Partial<Record<SettingsKey, string>>): Promise<void>;
+  remove(key: SettingsKey): Promise<void>;
   isOnboardingComplete(): Promise<boolean>;
   completeOnboarding(): Promise<void>;
 }
@@ -54,6 +55,10 @@ export function createSettingsService(db: Database): SettingsService {
         });
     },
 
+    async remove(key) {
+      await db.delete(settings).where(eq(settings.key, key));
+    },
+
     async setMany(entries) {
       const timestamp = now();
       const keys = Object.keys(entries) as SettingsKey[];

package/src/styles/components.css

@@ -12,6 +12,32 @@
   }
 }
 
+/* Alert variants */
+@layer components {
+  .alert-success {
+    @apply relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current;
+    @apply text-success bg-card [&>svg]:text-current;
+
+    > h2,
+    > h3,
+    > h4,
+    > h5,
+    > h6,
+    > strong,
+    > [data-title] {
+      @apply col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight;
+    }
+
+    > section {
+      @apply text-success col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed;
+
+      ul {
+        @apply list-inside list-disc text-sm;
+      }
+    }
+  }
+}
+
 /* Badge components */
 @layer components {
   .badge {
@@ -45,3 +71,70 @@
     color: white;
   }
 }
+
+/* Toast notifications */
+@layer components {
+  .toast-container {
+    @apply fixed top-4 right-4 z-50 flex flex-col gap-2 pointer-events-none;
+  }
+
+  .toast {
+    @apply pointer-events-auto rounded-lg border px-4 py-3 text-sm shadow-lg;
+    @apply flex items-start gap-2.5 min-w-64 max-w-sm;
+    background-color: var(--color-card);
+    animation: toast-in 0.3s ease-out;
+
+    > svg:first-child {
+      @apply size-4 shrink-0 translate-y-0.5;
+    }
+
+    > span {
+      @apply flex-1;
+    }
+  }
+
+  .toast-success {
+    color: var(--color-success);
+  }
+
+  .toast-error {
+    color: var(--color-destructive);
+  }
+
+  .toast-close {
+    @apply shrink-0 translate-y-0.5 cursor-pointer rounded-sm p-0 border-0 bg-transparent;
+    color: var(--color-muted-foreground);
+
+    &:hover {
+      color: var(--color-foreground);
+    }
+
+    > svg {
+      @apply size-3.5;
+    }
+  }
+
+  .toast-out {
+    animation: toast-out 0.3s ease-in forwards;
+  }
+}
+
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(-0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes toast-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}