@jant/core 0.3.24 → 0.3.26

package/src/{theme/components → ui/dash}/PostForm.tsx

@@ -41,7 +41,6 @@ export const PostForm: FC<PostFormProps> = ({
     body: post?.body ?? "",
     url: post?.url ?? "",
     quoteText: post?.quoteText ?? "",
-    slug: post?.slug ?? "",
     status: post?.status ?? "published",
     featured: post?.featured === 1,
     pinned: post?.pinned === 1,
@@ -169,7 +168,7 @@ export const PostForm: FC<PostFormProps> = ({
                 r2PublicUrl,
                 s3PublicUrl,
               );
-              const mUrl = getMediaUrl(m.id, m.storageKey, pUrl);
+              const mUrl = getMediaUrl(m.storageKey, pUrl);
               const thumbUrl = getImageUrl(mUrl, imageTransformUrl, {
                 width: 150,
                 quality: 80,
@@ -287,51 +286,33 @@ export const PostForm: FC<PostFormProps> = ({
         </div>
       )}
 
-      {/* Custom slug (optional) */}
-      <div class="field">
-        <label class="label">
-          {t({
-            message: "Custom Slug (optional)",
-            comment: "@context: Post form field",
-          })}
-        </label>
-        <input
-          type="text"
-          data-bind="slug"
-          class="input"
-          placeholder="my-custom-url"
-          pattern="[a-z0-9-]*"
-        />
-        <p class="text-xs text-muted-foreground mt-1">
-          {t({
-            message:
-              "Custom URL path. Leave empty to use default /p/ID format.",
-            comment: "@context: Slug help text",
-          })}
-        </p>
-      </div>
-
       {/* Submit */}
       <div class="flex gap-2">
-        <button type="submit" class="btn" data-attr-disabled="$_loading">
-          <span data-show="!$_loading">
-            {isEdit
-              ? t({
-                  message: "Update",
-                  comment: "@context: Button to update existing post",
-                })
-              : t({
-                  message: "Publish",
-                  comment: "@context: Button to publish new post",
-                })}
-          </span>
-          <span data-show="$_loading">
-            {t({
-              message: "Processing...",
-              comment:
-                "@context: Loading text shown on submit button while request is in progress",
-            })}
-          </span>
+        <button type="submit" class="btn" data-attr:disabled="$_loading">
+          <svg
+            data-show="$_loading"
+            style="display:none"
+            class="animate-spin size-4"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            role="status"
+          >
+            <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+          </svg>
+          {isEdit
+            ? t({
+                message: "Update",
+                comment: "@context: Button to update existing post",
+              })
+            : t({
+                message: "Publish",
+                comment: "@context: Button to publish new post",
+              })}
         </button>
         <a href="/dash/posts" class="btn-outline">
           {t({ message: "Cancel", comment: "@context: Button to cancel form" })}

package/src/{theme/components → ui/dash}/PostList.tsx

@@ -7,9 +7,9 @@ import { useLingui } from "@lingui/react/macro";
 import type { Post } from "../../types.js";
 import * as sqid from "../../lib/sqid.js";
 import * as time from "../../lib/time.js";
-import { VisibilityBadge } from "./VisibilityBadge.js";
-import { TypeBadge } from "./TypeBadge.js";
-import { EmptyState } from "./EmptyState.js";
+import { StatusBadge } from "./StatusBadge.js";
+import { FormatBadge } from "./FormatBadge.js";
+import { EmptyState } from "../shared/EmptyState.js";
 import { ListItemRow } from "./ListItemRow.js";
 import { ActionButtons } from "./ActionButtons.js";
 
@@ -38,8 +38,8 @@ export const PostList: FC<PostListProps> = ({ posts }) => {
   return (
     <div class="flex flex-col divide-y">
       {posts.map((post) => {
-        const permalink = post.slug
-          ? `/${post.slug}`
+        const permalink = post.path
+          ? `/${post.path}`
           : `/p/${sqid.encode(post.id)}`;
         return (
           <ListItemRow
@@ -67,8 +67,8 @@ export const PostList: FC<PostListProps> = ({ posts }) => {
             }
           >
             <div class="flex items-center gap-2 mb-1">
-              <TypeBadge type={post.format} />
-              <VisibilityBadge
+              <FormatBadge type={post.format} />
+              <StatusBadge
                 status={post.status}
                 featured={post.featured === 1}
                 pinned={post.pinned === 1}

package/src/{theme/components/VisibilityBadge.tsx → ui/dash/StatusBadge.tsx}

@@ -2,20 +2,19 @@
  * Status Badge Component
  *
  * Displays badges for post status, featured, and pinned state.
- * Named VisibilityBadge for backward compatibility with theme overrides.
  */
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
 import type { Status } from "../../types.js";
 
-export interface VisibilityBadgeProps {
+export interface StatusBadgeProps {
   status: Status;
   featured?: boolean;
   pinned?: boolean;
 }
 
-export const VisibilityBadge: FC<VisibilityBadgeProps> = ({
+export const StatusBadge: FC<StatusBadgeProps> = ({
   status,
   featured,
   pinned,

package/src/ui/dash/collections/CollectionForm.tsx

@@ -0,0 +1,153 @@
+/**
+ * Shared collection form (new + edit)
+ */
+
+import { useLingui } from "@lingui/react/macro";
+import type { Collection } from "../../../types.js";
+
+export function CollectionForm({
+  collection,
+  isEdit,
+}: {
+  collection?: Collection;
+  isEdit?: boolean;
+}) {
+  const { t } = useLingui();
+
+  const signals = JSON.stringify({
+    title: collection?.title ?? "",
+    slug: collection?.slug ?? "",
+    description: collection?.description ?? "",
+  }).replace(/</g, "\\u003c");
+
+  const action = isEdit
+    ? `/dash/collections/${collection?.id}`
+    : "/dash/collections";
+
+  const heading = isEdit
+    ? t({ message: "Edit Collection", comment: "@context: Page heading" })
+    : t({ message: "New Collection", comment: "@context: Page heading" });
+
+  const submitLabel = isEdit
+    ? t({
+        message: "Update Collection",
+        comment: "@context: Button to save collection changes",
+      })
+    : t({
+        message: "Create Collection",
+        comment: "@context: Button to save new collection",
+      });
+
+  const cancelHref = isEdit
+    ? `/dash/collections/${collection?.id}`
+    : "/dash/collections";
+
+  return (
+    <>
+      <h1 class="text-2xl font-semibold mb-6">{heading}</h1>
+
+      <form
+        data-signals={signals}
+        data-on:submit__prevent={`@post('${action}')`}
+        data-indicator="_loading"
+        class="flex flex-col gap-4 max-w-lg"
+      >
+        <div class="field">
+          <label class="label">
+            {t({
+              message: "Title",
+              comment: "@context: Collection form field",
+            })}
+          </label>
+          <input
+            type="text"
+            data-bind="title"
+            class="input"
+            required
+            placeholder={
+              isEdit
+                ? undefined
+                : t({
+                    message: "My Collection",
+                    comment: "@context: Collection title placeholder",
+                  })
+            }
+          />
+        </div>
+
+        <div class="field">
+          <label class="label">
+            {t({ message: "Slug", comment: "@context: Collection form field" })}
+          </label>
+          <input
+            type="text"
+            data-bind="slug"
+            class="input"
+            required
+            pattern="[a-z0-9-]+"
+            placeholder={isEdit ? undefined : "my-collection"}
+          />
+          {!isEdit && (
+            <p class="text-xs text-muted-foreground mt-1">
+              {t({
+                message: "URL-safe identifier (lowercase, numbers, hyphens)",
+                comment: "@context: Collection path help text",
+              })}
+            </p>
+          )}
+        </div>
+
+        <div class="field">
+          <label class="label">
+            {t({
+              message: "Description (optional)",
+              comment: "@context: Collection form field",
+            })}
+          </label>
+          <textarea
+            data-bind="description"
+            class="textarea"
+            rows={3}
+            placeholder={
+              isEdit
+                ? undefined
+                : t({
+                    message: "What's this collection about?",
+                    comment: "@context: Collection description placeholder",
+                  })
+            }
+          >
+            {collection?.description ?? ""}
+          </textarea>
+        </div>
+
+        <div class="flex gap-2">
+          <button type="submit" class="btn" data-attr:disabled="$_loading">
+            <svg
+              data-show="$_loading"
+              style="display:none"
+              class="animate-spin size-4"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              role="status"
+            >
+              <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+            </svg>
+            {submitLabel}
+          </button>
+          <a href={cancelHref} class="btn-outline">
+            {t({
+              message: "Cancel",
+              comment: "@context: Button to cancel form",
+            })}
+          </a>
+        </div>
+      </form>
+    </>
+  );
+}

package/src/ui/dash/collections/CollectionsListContent.tsx

@@ -0,0 +1,85 @@
+/**
+ * Collections list view
+ */
+
+import { useLingui } from "@lingui/react/macro";
+import type { Collection } from "../../../types.js";
+import {
+  EmptyState,
+  ListItemRow,
+  ActionButtons,
+  CrudPageHeader,
+} from "../index.js";
+
+export function CollectionsListContent({
+  collections,
+}: {
+  collections: Collection[];
+}) {
+  const { t } = useLingui();
+
+  return (
+    <>
+      <CrudPageHeader
+        title={t({
+          message: "Collections",
+          comment: "@context: Dashboard heading",
+        })}
+        ctaLabel={t({
+          message: "New Collection",
+          comment: "@context: Button to create new collection",
+        })}
+        ctaHref="/dash/collections/new"
+      />
+
+      {collections.length === 0 ? (
+        <EmptyState
+          message={t({
+            message: "No collections yet.",
+            comment: "@context: Empty state message",
+          })}
+          ctaText={t({
+            message: "New Collection",
+            comment: "@context: Button to create new collection",
+          })}
+          ctaHref="/dash/collections/new"
+        />
+      ) : (
+        <div class="flex flex-col divide-y">
+          {collections.map((col) => (
+            <ListItemRow
+              key={col.id}
+              actions={
+                <ActionButtons
+                  editHref={`/dash/collections/${col.id}/edit`}
+                  editLabel={t({
+                    message: "Edit",
+                    comment: "@context: Button to edit collection",
+                  })}
+                  viewHref={`/c/${col.slug}`}
+                  viewLabel={t({
+                    message: "View",
+                    comment: "@context: Button to view collection",
+                  })}
+                />
+              }
+            >
+              <a
+                href={`/dash/collections/${col.id}`}
+                class="font-medium hover:underline"
+              >
+                {col.title}
+              </a>
+              <p class="text-sm text-muted-foreground">/{col.slug}</p>
+              {col.description && (
+                <p class="text-sm text-muted-foreground mt-1">
+                  {col.description}
+                </p>
+              )}
+            </ListItemRow>
+          ))}
+        </div>
+      )}
+    </>
+  );
+}

package/src/ui/dash/collections/ViewCollectionContent.tsx

@@ -0,0 +1,92 @@
+/**
+ * Single collection detail view
+ */
+
+import { useLingui } from "@lingui/react/macro";
+import type { Collection, PostView } from "../../../types.js";
+import { ActionButtons } from "../index.js";
+import { encode } from "../../../lib/sqid.js";
+
+export function ViewCollectionContent({
+  collection,
+  posts,
+}: {
+  collection: Collection;
+  posts: PostView[];
+}) {
+  const { t } = useLingui();
+  const postsHeader = t({
+    message: "Posts in Collection ({count})",
+    comment: "@context: Collection posts section heading",
+    values: { count: String(posts.length) },
+  });
+
+  return (
+    <>
+      <div class="flex items-center justify-between mb-6">
+        <div>
+          <h1 class="text-2xl font-semibold">{collection.title}</h1>
+          <p class="text-sm text-muted-foreground">/{collection.slug}</p>
+        </div>
+        <ActionButtons
+          editHref={`/dash/collections/${collection.id}/edit`}
+          editLabel={t({
+            message: "Edit",
+            comment: "@context: Button to edit collection",
+          })}
+          viewHref={`/c/${collection.slug}`}
+          viewLabel={t({
+            message: "View",
+            comment: "@context: Button to view collection",
+          })}
+        />
+      </div>
+
+      {collection.description && (
+        <p class="text-muted-foreground mb-6">{collection.description}</p>
+      )}
+
+      <div class="card">
+        <header>
+          <h2>{postsHeader}</h2>
+        </header>
+        <section>
+          {posts.length === 0 ? (
+            <p class="text-muted-foreground">
+              {t({
+                message: "No posts in this collection.",
+                comment: "@context: Empty state message",
+              })}
+            </p>
+          ) : (
+            <div class="flex flex-col divide-y">
+              {posts.map((post) => (
+                <div key={post.id} class="py-3 flex items-center gap-4">
+                  <div class="flex-1 min-w-0">
+                    <a
+                      href={`/dash/posts/${encode(post.id)}`}
+                      class="font-medium hover:underline"
+                    >
+                      {post.title ||
+                        post.excerpt?.slice(0, 50) ||
+                        `Post #${post.id}`}
+                    </a>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </section>
+      </div>
+
+      <div class="mt-6">
+        <a href="/dash/collections" class="text-sm hover:underline">
+          {t({
+            message: "\u2190 Back to Collections",
+            comment: "@context: Navigation link",
+          })}
+        </a>
+      </div>
+    </>
+  );
+}

package/src/ui/dash/index.ts

@@ -0,0 +1,10 @@
+export { ActionButtons, type ActionButtonsProps } from "./ActionButtons.js";
+export { CrudPageHeader, type CrudPageHeaderProps } from "./CrudPageHeader.js";
+export { DangerZone, type DangerZoneProps } from "./DangerZone.js";
+export { EmptyState, type EmptyStateProps } from "../shared/EmptyState.js";
+export { FormatBadge, type FormatBadgeProps } from "./FormatBadge.js";
+export { ListItemRow, type ListItemRowProps } from "./ListItemRow.js";
+export { PageForm, type PageFormProps } from "./PageForm.js";
+export { PostForm, type PostFormProps } from "./PostForm.js";
+export { PostList, type PostListProps } from "./PostList.js";
+export { StatusBadge, type StatusBadgeProps } from "./StatusBadge.js";

package/src/ui/dash/media/MediaListContent.tsx

@@ -0,0 +1,201 @@
+/**
+ * Media grid list with upload UI
+ */
+
+import { useLingui } from "@lingui/react/macro";
+import type { Media } from "../../../types.js";
+import { EmptyState } from "../index.js";
+import {
+  getMediaUrl,
+  getImageUrl,
+  getPublicUrlForProvider,
+} from "../../../lib/image.js";
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function MediaCard({
+  media,
+  r2PublicUrl,
+  imageTransformUrl,
+  s3PublicUrl,
+}: {
+  media: Media;
+  r2PublicUrl?: string;
+  imageTransformUrl?: string;
+  s3PublicUrl?: string;
+}) {
+  const publicUrl = getPublicUrlForProvider(
+    media.provider,
+    r2PublicUrl,
+    s3PublicUrl,
+  );
+  const fullUrl = getMediaUrl(media.storageKey, publicUrl);
+  const thumbnailUrl = getImageUrl(fullUrl, imageTransformUrl, {
+    width: 300,
+    quality: 80,
+    format: "auto",
+    fit: "cover",
+  });
+  const isImage = media.mimeType.startsWith("image/");
+
+  return (
+    <div class="group relative" data-media-id={media.id}>
+      {isImage ? (
+        <button
+          type="button"
+          class="block w-full aspect-square bg-muted rounded-lg overflow-hidden border hover:border-primary cursor-pointer"
+          onclick={`document.getElementById('lightbox-img').src = '${fullUrl}'; document.getElementById('lightbox').showModal()`}
+        >
+          <img
+            src={thumbnailUrl}
+            alt={media.alt || media.originalName}
+            class="w-full h-full object-cover"
+            loading="lazy"
+          />
+        </button>
+      ) : (
+        <a
+          href={`/dash/media/${media.id}`}
+          class="block aspect-square bg-muted rounded-lg overflow-hidden border hover:border-primary"
+        >
+          <div class="w-full h-full flex items-center justify-center text-muted-foreground">
+            <span class="text-xs">{media.mimeType}</span>
+          </div>
+        </a>
+      )}
+      <a
+        href={`/dash/media/${media.id}`}
+        class="block mt-2 text-xs truncate hover:underline"
+        title={media.originalName}
+      >
+        {media.originalName}
+      </a>
+      <div class="text-xs text-muted-foreground">{formatSize(media.size)}</div>
+    </div>
+  );
+}
+
+export function MediaListContent({
+  mediaList,
+  r2PublicUrl,
+  imageTransformUrl,
+  s3PublicUrl,
+}: {
+  mediaList: Media[];
+  r2PublicUrl?: string;
+  imageTransformUrl?: string;
+  s3PublicUrl?: string;
+}) {
+  const { t } = useLingui();
+
+  const processingText = t({
+    message: "Processing...",
+    comment: "@context: Upload status - processing",
+  });
+  const uploadingText = t({
+    message: "Uploading...",
+    comment: "@context: Upload status - uploading",
+  });
+  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",
+  });
+
+  return (
+    <>
+      {/* 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">
+        <h1 class="text-2xl font-semibold">
+          {t({ message: "Media", comment: "@context: Media main heading" })}
+        </h1>
+        <label class="btn cursor-pointer">
+          <span>{uploadText}</span>
+          <input
+            type="file"
+            class="hidden"
+            accept="image/*"
+            data-media-upload
+            data-text-processing={processingText}
+            data-text-uploading={uploadingText}
+            data-text-error={errorText}
+          />
+        </label>
+      </div>
+
+      {/* Upload instructions */}
+      <div class="card mb-6">
+        <section class="text-sm text-muted-foreground">
+          <p>
+            {t({
+              message:
+                "Images are automatically optimized: resized to max 1920px, converted to WebP, and metadata stripped.",
+              comment:
+                "@context: Media upload instructions - auto optimization",
+            })}
+          </p>
+        </section>
+      </div>
+
+      {/* Media grid or empty state */}
+      <div id="media-content">
+        {mediaList.length === 0 ? (
+          <div id="empty-state">
+            <EmptyState
+              message={t({
+                message: "No media uploaded yet.",
+                comment: "@context: Empty state message when no media exists",
+              })}
+            />
+          </div>
+        ) : (
+          <div
+            id="media-grid"
+            class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4"
+          >
+            {mediaList.map((m) => (
+              <MediaCard
+                key={m.id}
+                media={m}
+                r2PublicUrl={r2PublicUrl}
+                imageTransformUrl={imageTransformUrl}
+                s3PublicUrl={s3PublicUrl}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Lightbox */}
+      <dialog
+        id="lightbox"
+        class="p-0 m-auto bg-transparent backdrop:bg-black/80"
+        onclick="event.target === this && this.close()"
+      >
+        <img
+          id="lightbox-img"
+          src=""
+          alt=""
+          class="max-w-[90vw] max-h-[90vh] object-contain rounded-lg"
+        />
+      </dialog>
+    </>
+  );
+}