@jant/core 0.2.18 → 0.2.19

package/src/routes/dash/media.tsx

@@ -14,7 +14,7 @@ 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";
+import { dsRedirect } from "../../lib/sse.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -90,8 +90,7 @@ function MediaCard({
 /**
  * Media list page content
  *
- * Uses plain JavaScript for upload state management (more reliable than Datastar signals
- * for complex async flows like file uploads with SSE responses).
+ * Upload is handled by media-upload.ts (client module) + Datastar @post for SSE.
  */
 function MediaListContent({
   mediaList,
@@ -121,163 +120,17 @@ function MediaListContent({
     comment: "@context: Upload error message",
   });
 
-  // Plain JavaScript upload handler - shows progress in the list
-  const uploadScript = `
-async function handleMediaUpload(input) {
-  if (!input.files || !input.files[0]) return;
-
-  const file = input.files[0];
-  const errorBox = document.getElementById('upload-error');
-  errorBox.classList.add('hidden');
-
-  // Ensure grid exists (remove empty state if needed)
-  let grid = document.getElementById('media-grid');
-  if (!grid) {
-    document.getElementById('empty-state')?.remove();
-    grid = document.createElement('div');
-    grid.id = 'media-grid';
-    grid.className = 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4';
-    document.getElementById('media-content').appendChild(grid);
-  }
-
-  // Create placeholder card showing progress
-  const placeholder = document.createElement('div');
-  placeholder.id = 'upload-placeholder';
-  placeholder.className = 'group relative';
-  placeholder.innerHTML = \`
-    <div class="aspect-square bg-muted rounded-lg overflow-hidden border flex items-center justify-center">
-      <div class="text-center px-2">
-        <svg class="animate-spin h-6 w-6 text-muted-foreground mx-auto mb-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-        </svg>
-        <span id="upload-status" class="text-xs text-muted-foreground">${processingText}</span>
-      </div>
-    </div>
-    <div class="mt-2 text-xs truncate" title="\${file.name}">\${file.name}</div>
-    <div class="text-xs text-muted-foreground">\${formatFileSize(file.size)}</div>
-  \`;
-  grid.prepend(placeholder);
-
-  try {
-    if (typeof ImageProcessor === 'undefined') {
-      throw new Error('ImageProcessor not loaded');
-    }
-
-    // Process image client-side
-    const processed = await ImageProcessor.processToFile(file);
-    document.getElementById('upload-status').textContent = '${uploadingText}';
-
-    // Upload with SSE response
-    const fd = new FormData();
-    fd.append('file', processed);
-
-    const response = await fetch('/api/upload', {
-      method: 'POST',
-      body: fd,
-      headers: { 'Accept': 'text/event-stream' }
-    });
-
-    if (!response.ok) throw new Error('Upload failed: ' + response.status);
-
-    // Parse SSE stream - will replace placeholder with real card
-    const reader = response.body.getReader();
-    const decoder = new TextDecoder();
-    let buffer = '';
-
-    while (true) {
-      const { done, value } = await reader.read();
-      if (done) break;
-
-      buffer += decoder.decode(value, { stream: true });
-      const events = buffer.split('\\n\\n');
-      buffer = events.pop() || '';
-
-      for (const event of events) {
-        if (!event.trim()) continue;
-        processSSEEvent(event);
-      }
-    }
-
-  } catch (err) {
-    console.error('Upload error:', err);
-    // Show error in placeholder
-    placeholder.innerHTML = \`
-      <div class="aspect-square bg-destructive/10 rounded-lg overflow-hidden border border-destructive flex items-center justify-center">
-        <div class="text-center px-2">
-          <span class="text-xs text-destructive">\${err.message || '${errorText}'}</span>
-        </div>
-      </div>
-      <div class="mt-2 text-xs truncate text-destructive">\${file.name}</div>
-      <button type="button" class="text-xs text-muted-foreground hover:underline" onclick="this.closest('.group').remove()">Remove</button>
-    \`;
-  }
-
-  input.value = '';
-}
-
-function formatFileSize(bytes) {
-  if (bytes < 1024) return bytes + ' B';
-  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
-  return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
-}
-
-function processSSEEvent(event) {
-  const lines = event.split('\\n');
-  let eventType = '';
-  const data = {};
-  let elementsLines = [];
-  let inElements = false;
-
-  for (const line of lines) {
-    if (line.startsWith('event: ')) {
-      eventType = line.slice(7);
-    } else if (line.startsWith('data: ')) {
-      const content = line.slice(6);
-      if (content.startsWith('mode ')) {
-        data.mode = content.slice(5);
-        inElements = false;
-      } else if (content.startsWith('selector ')) {
-        data.selector = content.slice(9);
-        inElements = false;
-      } else if (content.startsWith('elements ')) {
-        elementsLines = [content.slice(9)];
-        inElements = true;
-      } else if (inElements) {
-        // Continuation of elements content
-        elementsLines.push(content);
-      }
-    }
-  }
-
-  if (elementsLines.length > 0) {
-    data.elements = elementsLines.join('\\n');
-  }
-
-  if (eventType === 'datastar-patch-elements') {
-    if (data.mode === 'remove' && data.selector) {
-      document.querySelector(data.selector)?.remove();
-    } else if (data.mode === 'outer' && data.selector && data.elements) {
-      // Replace element entirely (used for placeholder -> real card)
-      const target = document.querySelector(data.selector);
-      if (target) {
-        const temp = document.createElement('div');
-        temp.innerHTML = data.elements;
-        const newElement = temp.firstElementChild;
-        if (newElement) {
-          target.replaceWith(newElement);
-          if (window.Datastar) Datastar.apply(newElement);
-        }
-      }
-    }
-  }
-}
-`.trim();
-
   return (
     <>
-      {/* Upload script */}
-      <script dangerouslySetInnerHTML={{ __html: uploadScript }}></script>
+      {/* Hidden form for Datastar-driven upload */}
+      <form
+        id="upload-form"
+        class="hidden"
+        enctype="multipart/form-data"
+        data-on:submit__prevent="@post('/api/upload', {contentType: 'form'})"
+      >
+        <input id="upload-file-input" type="file" name="file" />
+      </form>
 
       {/* Header */}
       <div class="flex items-center justify-between mb-6">
@@ -290,14 +143,14 @@ function processSSEEvent(event) {
             type="file"
             class="hidden"
             accept="image/*"
-            onchange="handleMediaUpload(this)"
+            data-media-upload
+            data-text-processing={processingText}
+            data-text-uploading={uploadingText}
+            data-text-error={errorText}
           />
         </label>
       </div>
 
-      {/* Hidden error container for global errors */}
-      <div id="upload-error" class="hidden"></div>
-
       {/* Upload instructions */}
       <div class="card mb-6">
         <section class="text-sm text-muted-foreground">
@@ -610,7 +463,5 @@ mediaRoutes.post("/:id/delete", async (c) => {
   // Delete from database
   await c.var.services.media.delete(id);
 
-  return sse(c, async (stream) => {
-    await stream.redirect("/dash/media");
-  });
+  return dsRedirect("/dash/media");
 });

package/src/routes/dash/pages.tsx

@@ -21,7 +21,7 @@ import {
 } from "../../theme/components/index.js";
 import * as sqid from "../../lib/sqid.js";
 import * as time from "../../lib/time.js";
-import { sse } from "../../lib/sse.js";
+import { dsRedirect } from "../../lib/sse.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -237,9 +237,7 @@ pagesRoutes.post("/", async (c) => {
     path: body.path.toLowerCase().replace(/[^a-z0-9-]/g, "-"),
   });
 
-  return sse(c, async (stream) => {
-    await stream.redirect(`/dash/pages/${sqid.encode(page.id)}`);
-  });
+  return dsRedirect(`/dash/pages/${sqid.encode(page.id)}`);
 });
 
 // View single page
@@ -306,9 +304,7 @@ pagesRoutes.post("/:id", async (c) => {
     path: body.path.toLowerCase().replace(/[^a-z0-9-]/g, "-"),
   });
 
-  return sse(c, async (stream) => {
-    await stream.redirect(`/dash/pages/${sqid.encode(id)}`);
-  });
+  return dsRedirect(`/dash/pages/${sqid.encode(id)}`);
 });
 
 // Delete page
@@ -318,7 +314,5 @@ pagesRoutes.post("/:id/delete", async (c) => {
 
   await c.var.services.posts.delete(id);
 
-  return sse(c, async (stream) => {
-    await stream.redirect("/dash/pages");
-  });
+  return dsRedirect("/dash/pages");
 });

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,9 +7,18 @@ 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 { 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 };
 
 export const settingsRoutes = new Hono<Env>();
@@ -260,11 +269,24 @@ settingsRoutes.post("/", async (c) => {
 
   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 {
+      const escaped = escapeHtml(displayName);
+      // Update header site name
+      await stream.patchElements(
+        `<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.");
     }
   });
@@ -279,9 +301,7 @@ settingsRoutes.post("/password", async (c) => {
   }>();
 
   if (body.newPassword !== body.confirmPassword) {
-    return sse(c, async (stream) => {
-      await stream.toast("Passwords do not match.", "error");
-    });
+    return dsToast("Passwords do not match.", "error");
   }
 
   try {
@@ -294,9 +314,7 @@ settingsRoutes.post("/password", async (c) => {
       headers: c.req.raw.headers,
     });
   } catch {
-    return sse(c, async (stream) => {
-      await stream.toast("Current password is incorrect.", "error");
-    });
+    return dsToast("Current password is incorrect.", "error");
   }
 
   return sse(c, async (stream) => {

package/src/theme/layouts/DashLayout.tsx

@@ -42,7 +42,7 @@ function DashLayoutContent({
       {/* Header */}
       <header class="border-b bg-card">
         <div class="container flex h-14 items-center justify-between">
-          <a href="/dash" class="font-semibold">
+          <a id="site-name" href="/dash" class="font-semibold">
             {siteName}
           </a>
           <nav class="flex items-center gap-4">