@jant/core 0.3.6 → 0.3.8

package/src/routes/api/timeline.tsx

@@ -0,0 +1,145 @@
+/**
+ * Timeline API Routes
+ *
+ * Provides load-more functionality for the timeline feed via SSE.
+ */
+
+import { Hono } from "hono";
+import type { Bindings, PostWithMedia, TimelineItemData } from "../../types.js";
+import type { AppVariables } from "../../app.js";
+import { sse } from "../../lib/sse.js";
+import { buildMediaMap } from "../../lib/media-helpers.js";
+import { TimelineItem } from "../../theme/components/timeline/TimelineItem.js";
+import { ThreadPreview } from "../../theme/components/timeline/ThreadPreview.js";
+
+type Env = { Bindings: Bindings; Variables: AppVariables };
+
+const PAGE_SIZE = 20;
+
+export const timelineApiRoutes = new Hono<Env>();
+
+timelineApiRoutes.get("/", async (c) => {
+  const cursorParam = c.req.query("cursor");
+  const cursor = cursorParam ? parseInt(cursorParam, 10) : undefined;
+
+  if (!cursor || isNaN(cursor)) {
+    return c.json({ error: "cursor parameter required" }, 400);
+  }
+
+  // Fetch one extra to determine if there are more
+  const posts = await c.var.services.posts.list({
+    visibility: ["featured", "quiet"],
+    excludeReplies: true,
+    excludeTypes: ["page"],
+    limit: PAGE_SIZE + 1,
+    cursor,
+  });
+
+  const hasMore = posts.length > PAGE_SIZE;
+  const displayPosts = hasMore ? posts.slice(0, PAGE_SIZE) : posts;
+
+  if (displayPosts.length === 0) {
+    return sse(c, async (stream) => {
+      stream.remove("#load-more-container");
+    });
+  }
+
+  // Build media map
+  const postIds = displayPosts.map((p) => p.id);
+  const rawMediaMap = await c.var.services.media.getByPostIds(postIds);
+  const r2PublicUrl = c.env.R2_PUBLIC_URL;
+  const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
+  const mediaMap = buildMediaMap(rawMediaMap, r2PublicUrl, imageTransformUrl);
+
+  // Get reply counts to identify thread roots
+  const replyCounts = await c.var.services.posts.getReplyCounts(postIds);
+  const threadRootIds = postIds.filter((id) => (replyCounts.get(id) ?? 0) > 0);
+
+  // Get thread previews
+  const threadPreviews = await c.var.services.posts.getThreadPreviews(
+    threadRootIds,
+    3,
+  );
+
+  // Load media for preview replies
+  const previewReplyIds: number[] = [];
+  for (const replies of threadPreviews.values()) {
+    for (const reply of replies) {
+      previewReplyIds.push(reply.id);
+    }
+  }
+  const previewMediaMap =
+    previewReplyIds.length > 0
+      ? buildMediaMap(
+          await c.var.services.media.getByPostIds(previewReplyIds),
+          r2PublicUrl,
+          imageTransformUrl,
+        )
+      : new Map();
+
+  // Assemble timeline items
+  const items: TimelineItemData[] = displayPosts.map((post) => {
+    const postWithMedia: PostWithMedia = {
+      ...post,
+      mediaAttachments: mediaMap.get(post.id) ?? [],
+    };
+
+    const replyCount = replyCounts.get(post.id) ?? 0;
+    const previewReplies = threadPreviews.get(post.id);
+
+    if (replyCount > 0 && previewReplies) {
+      return {
+        post: postWithMedia,
+        threadPreview: {
+          replies: previewReplies.map((r) => ({
+            ...r,
+            mediaAttachments: previewMediaMap.get(r.id) ?? [],
+          })),
+          totalReplyCount: replyCount,
+        },
+      };
+    }
+
+    return { post: postWithMedia };
+  });
+
+  // Render items to HTML
+  const itemsHtml = items
+    .map((item) => {
+      if (item.threadPreview) {
+        return (
+          <ThreadPreview
+            rootPost={item.post}
+            previewReplies={item.threadPreview.replies}
+            totalReplyCount={item.threadPreview.totalReplyCount}
+          />
+        );
+      }
+      return <TimelineItem item={item} />;
+    })
+    .map((jsx) => jsx.toString())
+    .join("");
+
+  // Determine next cursor
+  const lastPost = displayPosts[displayPosts.length - 1];
+  const nextCursor = hasMore && lastPost ? lastPost.id : undefined;
+
+  // Build load-more button HTML
+  const loadMoreHtml = nextCursor
+    ? `<div id="load-more-container" class="mt-6 text-center"><button class="btn btn-outline" data-on:click="@get('/api/timeline?cursor=${nextCursor}')">Load more</button></div>`
+    : "";
+
+  return sse(c, async (stream) => {
+    // Append new items to the feed
+    stream.patchElements(itemsHtml, {
+      mode: "append",
+      selector: "#timeline-feed",
+    });
+    // Replace or remove the load-more container
+    if (loadMoreHtml) {
+      stream.patchElements(loadMoreHtml);
+    } else {
+      stream.remove("#load-more-container");
+    }
+  });
+});

package/src/routes/api/upload.ts

@@ -7,6 +7,7 @@
 
 import { Hono } from "hono";
 import { html } from "hono/html";
+import { uuidv7 } from "uuidv7";
 import type { Bindings } from "../../types.js";
 import type { AppVariables } from "../../app.js";
 import { requireAuthApi } from "../../middleware/auth.js";
@@ -156,12 +157,14 @@ uploadApiRoutes.post("/", async (c) => {
     return c.json({ error: "File too large (max 10MB)" }, 400);
   }
 
-  // Generate unique filename
+  // Generate unique filename using UUIDv7
   const ext = file.name.split(".").pop() || "bin";
-  const timestamp = Date.now();
-  const random = Math.random().toString(36).substring(2, 8);
-  const filename = `${timestamp}-${random}.${ext}`;
-  const r2Key = `uploads/${filename}`;
+  const id = uuidv7();
+  const date = new Date();
+  const year = date.getUTCFullYear();
+  const month = String(date.getUTCMonth() + 1).padStart(2, "0");
+  const filename = `${id}.${ext}`;
+  const r2Key = `media/${year}/${month}/${filename}`;
 
   try {
     // Upload to R2
@@ -173,6 +176,7 @@ uploadApiRoutes.post("/", async (c) => {
 
     // Save to database
     const media = await c.var.services.media.create({
+      id,
       filename,
       originalName: file.name,
       mimeType: file.type,

package/src/routes/dash/media.tsx

@@ -418,6 +418,56 @@ mediaRoutes.get("/", async (c) => {
   );
 });
 
+// Media picker (returns HTML fragment for PostForm dialog)
+// Must be defined before /:id to avoid "picker" matching as an ID
+mediaRoutes.get("/picker", async (c) => {
+  const mediaList = await c.var.services.media.list(100);
+  const r2PublicUrl = c.env.R2_PUBLIC_URL;
+  const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
+
+  if (mediaList.length === 0) {
+    return c.html(
+      <p class="text-muted-foreground text-sm col-span-4">
+        No media uploaded yet. Upload media from the Media page first.
+      </p>,
+    );
+  }
+
+  return c.html(
+    <>
+      {mediaList
+        .filter((m) => m.mimeType.startsWith("image/"))
+        .map((m) => {
+          const url = getMediaUrl(m.id, m.r2Key, r2PublicUrl);
+          const thumbUrl = getImageUrl(url, imageTransformUrl, {
+            width: 150,
+            quality: 80,
+            format: "auto",
+            fit: "cover",
+          });
+          return (
+            <button
+              key={m.id}
+              type="button"
+              class="aspect-square rounded-lg overflow-hidden border-2 hover:border-primary cursor-pointer transition-colors"
+              data-on:click={`$mediaIds.includes('${m.id}') ? ($mediaIds = $mediaIds.filter(id => id !== '${m.id}')) : ($mediaIds = [...$mediaIds, '${m.id}'])`}
+              data-class:border-primary={`$mediaIds.includes('${m.id}')`}
+              data-class:ring-2={`$mediaIds.includes('${m.id}')`}
+              data-class:ring-primary={`$mediaIds.includes('${m.id}')`}
+            >
+              <img
+                src={thumbUrl}
+                alt={m.alt || m.originalName}
+                class="w-full h-full object-cover"
+                loading="lazy"
+              />
+            </button>
+          );
+        })}
+    </>,
+  );
+});
+
 // View single media
 mediaRoutes.get("/:id", async (c) => {
   const id = c.req.param("id");

package/src/routes/dash/navigation.tsx

@@ -0,0 +1,306 @@
+import { getSiteName } from "../../lib/config.js";
+/**
+ * Dashboard Navigation Links Routes
+ */
+
+import { Hono } from "hono";
+import { useLingui } from "@lingui/react/macro";
+import type { Bindings, NavigationLink } from "../../types.js";
+import type { AppVariables } from "../../app.js";
+import { DashLayout } from "../../theme/layouts/index.js";
+import {
+  EmptyState,
+  ListItemRow,
+  ActionButtons,
+  CrudPageHeader,
+} from "../../theme/components/index.js";
+import { dsRedirect, dsToast } from "../../lib/sse.js";
+
+type Env = { Bindings: Bindings; Variables: AppVariables };
+
+export const navigationRoutes = new Hono<Env>();
+
+function NavigationListContent({ links }: { links: NavigationLink[] }) {
+  const { t } = useLingui();
+
+  return (
+    <>
+      <CrudPageHeader
+        title={t({
+          message: "Navigation",
+          comment: "@context: Dashboard heading",
+        })}
+        ctaLabel={t({
+          message: "New Link",
+          comment: "@context: Button to create new navigation link",
+        })}
+        ctaHref="/dash/navigation/new"
+      />
+
+      {links.length === 0 ? (
+        <EmptyState
+          message={t({
+            message: "No navigation links configured.",
+            comment: "@context: Empty state message",
+          })}
+          ctaText={t({
+            message: "New Link",
+            comment: "@context: Button to create new navigation link",
+          })}
+          ctaHref="/dash/navigation/new"
+        />
+      ) : (
+        <>
+          <div id="nav-links-list" class="flex flex-col divide-y">
+            {links.map((link) => (
+              <ListItemRow
+                key={link.id}
+                actions={
+                  <ActionButtons
+                    editHref={`/dash/navigation/${link.id}/edit`}
+                    editLabel={t({
+                      message: "Edit",
+                      comment: "@context: Button to edit navigation link",
+                    })}
+                    deleteAction={`/dash/navigation/${link.id}/delete`}
+                    deleteLabel={t({
+                      message: "Delete",
+                      comment: "@context: Button to delete navigation link",
+                    })}
+                  />
+                }
+              >
+                <div
+                  class="flex items-center gap-3 cursor-grab"
+                  data-id={link.id}
+                >
+                  <span class="text-muted-foreground select-none">⠿</span>
+                  <div class="flex items-center gap-2">
+                    <span class="font-medium">{link.label}</span>
+                    <code class="text-sm text-muted-foreground bg-muted px-1 rounded">
+                      {link.url}
+                    </code>
+                  </div>
+                </div>
+              </ListItemRow>
+            ))}
+          </div>
+
+          {/* SortableJS is initialized by client.ts via lib/nav-reorder.ts */}
+        </>
+      )}
+    </>
+  );
+}
+
+function NavigationFormContent({
+  link,
+  isEdit,
+}: {
+  link?: NavigationLink;
+  isEdit?: boolean;
+}) {
+  const { t } = useLingui();
+  const title = isEdit
+    ? t({ message: "Edit Link", comment: "@context: Page heading" })
+    : t({ message: "New Link", comment: "@context: Page heading" });
+
+  const signals = JSON.stringify({
+    label: link?.label ?? "",
+    url: link?.url ?? "",
+  }).replace(/</g, "\\u003c");
+
+  const action = isEdit ? `/dash/navigation/${link?.id}` : "/dash/navigation";
+
+  return (
+    <>
+      <h1 class="text-2xl font-semibold mb-6">{title}</h1>
+
+      <form
+        data-signals={signals}
+        data-on:submit__prevent={`@post('${action}')`}
+        class="flex flex-col gap-4 max-w-lg"
+      >
+        <div class="field">
+          <label class="label">
+            {t({
+              message: "Label",
+              comment: "@context: Navigation link form field",
+            })}
+          </label>
+          <input
+            type="text"
+            data-bind="label"
+            class="input"
+            placeholder="Home"
+            required
+          />
+          <p class="text-xs text-muted-foreground mt-1">
+            {t({
+              message: "Display text for the link",
+              comment: "@context: Navigation label help text",
+            })}
+          </p>
+        </div>
+
+        <div class="field">
+          <label class="label">
+            {t({
+              message: "URL",
+              comment: "@context: Navigation link form field",
+            })}
+          </label>
+          <input
+            type="text"
+            data-bind="url"
+            class="input"
+            placeholder="/archive or https://..."
+            required
+          />
+          <p class="text-xs text-muted-foreground mt-1">
+            {t({
+              message:
+                "Path (e.g. /archive) or full URL (e.g. https://example.com)",
+              comment: "@context: Navigation URL help text",
+            })}
+          </p>
+        </div>
+
+        <div class="flex gap-2">
+          <button type="submit" class="btn">
+            {isEdit
+              ? t({
+                  message: "Save Changes",
+                  comment: "@context: Button to save edited navigation link",
+                })
+              : t({
+                  message: "Create Link",
+                  comment: "@context: Button to save new navigation link",
+                })}
+          </button>
+          <a href="/dash/navigation" class="btn-outline">
+            {t({
+              message: "Cancel",
+              comment: "@context: Button to cancel form",
+            })}
+          </a>
+        </div>
+      </form>
+    </>
+  );
+}
+
+// List navigation links
+navigationRoutes.get("/", async (c) => {
+  const siteName = await getSiteName(c);
+  const links = await c.var.services.navigationLinks.list();
+
+  return c.html(
+    <DashLayout
+      c={c}
+      title="Navigation"
+      siteName={siteName}
+      currentPath="/dash/navigation"
+    >
+      <NavigationListContent links={links} />
+    </DashLayout>,
+  );
+});
+
+// New link form
+navigationRoutes.get("/new", async (c) => {
+  const siteName = await getSiteName(c);
+
+  return c.html(
+    <DashLayout
+      c={c}
+      title="New Link"
+      siteName={siteName}
+      currentPath="/dash/navigation"
+    >
+      <NavigationFormContent />
+    </DashLayout>,
+  );
+});
+
+// Create link
+navigationRoutes.post("/", async (c) => {
+  const body = await c.req.json<{ label: string; url: string }>();
+
+  if (!body.label || !body.url) {
+    return dsToast("Label and URL are required", "error");
+  }
+
+  await c.var.services.navigationLinks.create({
+    label: body.label,
+    url: body.url,
+  });
+
+  return dsRedirect("/dash/navigation");
+});
+
+// Reorder links (must be before /:id to avoid "reorder" matching as :id)
+navigationRoutes.post("/reorder", async (c) => {
+  const body = await c.req.json<{ ids: number[] }>();
+
+  if (!Array.isArray(body.ids)) {
+    return dsToast("Invalid request", "error");
+  }
+
+  await c.var.services.navigationLinks.reorder(body.ids);
+
+  return dsToast("Order saved");
+});
+
+// Edit link form
+navigationRoutes.get("/:id/edit", async (c) => {
+  const id = parseInt(c.req.param("id"), 10);
+  if (isNaN(id)) return c.notFound();
+
+  const link = await c.var.services.navigationLinks.getById(id);
+  if (!link) return c.notFound();
+
+  const siteName = await getSiteName(c);
+
+  return c.html(
+    <DashLayout
+      c={c}
+      title="Edit Link"
+      siteName={siteName}
+      currentPath="/dash/navigation"
+    >
+      <NavigationFormContent link={link} isEdit />
+    </DashLayout>,
+  );
+});
+
+// Update link
+navigationRoutes.post("/:id", async (c) => {
+  const id = parseInt(c.req.param("id"), 10);
+  if (isNaN(id)) return c.notFound();
+
+  const body = await c.req.json<{ label: string; url: string }>();
+
+  if (!body.label || !body.url) {
+    return dsToast("Label and URL are required", "error");
+  }
+
+  const updated = await c.var.services.navigationLinks.update(id, {
+    label: body.label,
+    url: body.url,
+  });
+
+  if (!updated) return c.notFound();
+
+  return dsRedirect("/dash/navigation");
+});
+
+// Delete link
+navigationRoutes.post("/:id/delete", async (c) => {
+  const id = parseInt(c.req.param("id"), 10);
+  if (!isNaN(id)) {
+    await c.var.services.navigationLinks.delete(id);
+  }
+
+  return dsRedirect("/dash/navigation");
+});