@jant/core 0.3.23 → 0.3.25

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

@@ -19,7 +19,6 @@ export interface PostFormProps {
   imageTransformUrl?: string;
   s3PublicUrl?: string;
   collections?: Collection[];
-  postCollectionIds?: number[];
 }
 
 export const PostForm: FC<PostFormProps> = ({
@@ -30,7 +29,6 @@ export const PostForm: FC<PostFormProps> = ({
   imageTransformUrl,
   s3PublicUrl,
   collections,
-  postCollectionIds,
 }) => {
   const { t } = useLingui();
   const isEdit = !!post;
@@ -38,15 +36,17 @@ export const PostForm: FC<PostFormProps> = ({
   const existingMediaIds = (mediaAttachments ?? []).map((m) => m.id);
 
   const signals = JSON.stringify({
-    type: post?.type ?? "note",
+    format: post?.format ?? "note",
     title: post?.title ?? "",
-    content: post?.content ?? "",
-    sourceUrl: post?.sourceUrl ?? "",
-    sourceName: post?.sourceName ?? "",
-    visibility: post?.visibility ?? "quiet",
-    path: post?.path ?? "",
+    body: post?.body ?? "",
+    url: post?.url ?? "",
+    quoteText: post?.quoteText ?? "",
+    status: post?.status ?? "published",
+    featured: post?.featured === 1,
+    pinned: post?.pinned === 1,
+    rating: post?.rating ?? 0,
+    collectionId: post?.collectionId ?? 0,
     mediaIds: existingMediaIds,
-    collectionIds: postCollectionIds ?? [],
   }).replace(/</g, "\\u003c");
 
   return (
@@ -58,29 +58,23 @@ export const PostForm: FC<PostFormProps> = ({
     >
       <div id="post-form-message"></div>
 
-      {/* Type selector */}
+      {/* Format selector */}
       <div class="field">
         <label class="label">
           {t({
-            message: "Type",
-            comment: "@context: Post form field - post type",
+            message: "Format",
+            comment: "@context: Post form field - post format",
           })}
         </label>
-        <select data-bind="type" class="select" required>
-          <option value="note" selected={post?.type === "note"}>
-            {t({ message: "Note", comment: "@context: Post type option" })}
+        <select data-bind="format" class="select" required>
+          <option value="note" selected={post?.format === "note" || !post}>
+            {t({ message: "Note", comment: "@context: Post format option" })}
           </option>
-          <option value="article" selected={post?.type === "article"}>
-            {t({ message: "Article", comment: "@context: Post type option" })}
+          <option value="link" selected={post?.format === "link"}>
+            {t({ message: "Link", comment: "@context: Post format option" })}
           </option>
-          <option value="link" selected={post?.type === "link"}>
-            {t({ message: "Link", comment: "@context: Post type option" })}
-          </option>
-          <option value="quote" selected={post?.type === "quote"}>
-            {t({ message: "Quote", comment: "@context: Post type option" })}
-          </option>
-          <option value="image" selected={post?.type === "image"}>
-            {t({ message: "Image", comment: "@context: Post type option" })}
+          <option value="quote" selected={post?.format === "quote"}>
+            {t({ message: "Quote", comment: "@context: Post format option" })}
           </option>
         </select>
       </div>
@@ -104,41 +98,68 @@ export const PostForm: FC<PostFormProps> = ({
         />
       </div>
 
-      {/* Content */}
+      {/* Body */}
       <div class="field">
         <label class="label">
           {t({ message: "Content", comment: "@context: Post form field" })}
         </label>
         <textarea
-          data-bind="content"
+          data-bind="body"
           class="textarea min-h-32"
           placeholder={t({
             message: "What's on your mind?",
             comment: "@context: Post content placeholder",
           })}
-          required
         >
-          {post?.content ?? ""}
+          {post?.body ?? ""}
         </textarea>
       </div>
 
-      {/* Media attachments */}
-      <div class="field" data-show="$type !== 'page'">
+      {/* URL (for link/quote formats) */}
+      <div class="field">
         <label class="label">
           {t({
-            message: "Media",
-            comment: "@context: Post form field - media attachments",
+            message: "URL (optional)",
+            comment: "@context: Post form field - source URL",
           })}
         </label>
-        <p
-          class="text-xs text-muted-foreground mb-2"
-          data-show="$type === 'image'"
+        <input
+          type="url"
+          data-bind="url"
+          class="input"
+          placeholder="https://..."
+        />
+      </div>
+
+      {/* Quote Text (for quote format) */}
+      <div class="field" data-show="$format === 'quote'">
+        <label class="label">
+          {t({
+            message: "Quote Text",
+            comment: "@context: Post form field - quoted text",
+          })}
+        </label>
+        <textarea
+          data-bind="quoteText"
+          class="textarea"
+          placeholder={t({
+            message: "The text being quoted...",
+            comment: "@context: Quote text placeholder",
+          })}
+          rows={3}
         >
+          {post?.quoteText ?? ""}
+        </textarea>
+      </div>
+
+      {/* Media attachments */}
+      <div class="field">
+        <label class="label">
           {t({
-            message: "At least 1 image required for image posts.",
-            comment: "@context: Hint for image post type media requirement",
+            message: "Media",
+            comment: "@context: Post form field - media attachments",
           })}
-        </p>
+        </label>
         {mediaAttachments && mediaAttachments.length > 0 && (
           <div class="grid grid-cols-4 sm:grid-cols-6 gap-2 mb-2">
             {mediaAttachments.map((m) => {
@@ -147,8 +168,8 @@ export const PostForm: FC<PostFormProps> = ({
                 r2PublicUrl,
                 s3PublicUrl,
               );
-              const url = getMediaUrl(m.id, m.storageKey, pUrl);
-              const thumbUrl = getImageUrl(url, imageTransformUrl, {
+              const mUrl = getMediaUrl(m.id, m.storageKey, pUrl);
+              const thumbUrl = getImageUrl(mUrl, imageTransformUrl, {
                 width: 150,
                 quality: 80,
                 format: "auto",
@@ -194,119 +215,77 @@ export const PostForm: FC<PostFormProps> = ({
         </button>
       </div>
 
-      {/* Source URL (for link/quote types) */}
+      {/* Status */}
       <div class="field">
         <label class="label">
-          {t({
-            message: "Source URL (optional)",
-            comment: "@context: Post form field",
-          })}
+          {t({ message: "Status", comment: "@context: Post form field" })}
         </label>
-        <input
-          type="url"
-          data-bind="sourceUrl"
-          class="input"
-          placeholder="https://..."
-        />
-      </div>
-
-      {/* Source Name (for link/quote types) */}
-      <div class="field">
-        <label class="label">
-          {t({
-            message: "Source Name (optional)",
-            comment:
-              "@context: Post form field - name of the source website or author",
-          })}
-        </label>
-        <input
-          type="text"
-          data-bind="sourceName"
-          class="input"
-          placeholder={t({
-            message: "e.g. The Verge, John Doe",
-            comment: "@context: Source name placeholder",
-          })}
-        />
-      </div>
-
-      {/* Visibility */}
-      <div class="field">
-        <label class="label">
-          {t({ message: "Visibility", comment: "@context: Post form field" })}
-        </label>
-        <select data-bind="visibility" class="select">
+        <select data-bind="status" class="select">
           <option
-            value="quiet"
-            selected={post?.visibility === "quiet" || !post}
+            value="published"
+            selected={post?.status === "published" || !post}
           >
             {t({
-              message: "Quiet (normal)",
-              comment: "@context: Post visibility option",
-            })}
-          </option>
-          <option value="featured" selected={post?.visibility === "featured"}>
-            {t({
-              message: "Featured",
-              comment: "@context: Post visibility option",
+              message: "Published",
+              comment: "@context: Post status option",
             })}
           </option>
-          <option value="unlisted" selected={post?.visibility === "unlisted"}>
-            {t({
-              message: "Unlisted",
-              comment: "@context: Post visibility option",
-            })}
-          </option>
-          <option value="draft" selected={post?.visibility === "draft"}>
+          <option value="draft" selected={post?.status === "draft"}>
             {t({
               message: "Draft",
-              comment: "@context: Post visibility option",
+              comment: "@context: Post status option",
             })}
           </option>
         </select>
       </div>
 
-      {/* Collections */}
+      {/* Featured & Pinned */}
+      <div class="flex gap-4">
+        <label class="flex items-center gap-2 text-sm">
+          <input type="checkbox" class="checkbox" data-bind="featured" />
+          {t({
+            message: "Featured",
+            comment: "@context: Post form checkbox - mark as featured",
+          })}
+        </label>
+        <label class="flex items-center gap-2 text-sm">
+          <input type="checkbox" class="checkbox" data-bind="pinned" />
+          {t({
+            message: "Pinned",
+            comment: "@context: Post form checkbox - pin to top",
+          })}
+        </label>
+      </div>
+
+      {/* Collection */}
       {collections && collections.length > 0 && (
-        <fieldset class="field">
-          <legend class="label">
+        <div class="field">
+          <label class="label">
             {t({
-              message: "Collections (optional)",
-              comment: "@context: Post form field - assign to collections",
+              message: "Collection (optional)",
+              comment: "@context: Post form field - assign to collection",
             })}
-          </legend>
-          <div class="flex flex-col gap-1">
+          </label>
+          <select data-bind="collectionId" class="select">
+            <option value="0">
+              {t({
+                message: "None",
+                comment: "@context: No collection selected",
+              })}
+            </option>
             {collections.map((col) => (
-              <label key={col.id} class="flex items-center gap-2 text-sm">
-                <input
-                  type="checkbox"
-                  class="checkbox"
-                  data-attr:checked={`$collectionIds.includes(${col.id})`}
-                  data-on:change={`$collectionIds.includes(${col.id}) ? $collectionIds = $collectionIds.filter(id => id !== ${col.id}) : $collectionIds = [...$collectionIds, ${col.id}]`}
-                />
+              <option
+                key={col.id}
+                value={col.id}
+                selected={post?.collectionId === col.id}
+              >
                 {col.title}
-              </label>
+              </option>
             ))}
-          </div>
-        </fieldset>
+          </select>
+        </div>
       )}
 
-      {/* Custom path (optional) */}
-      <div class="field">
-        <label class="label">
-          {t({
-            message: "Custom Path (optional)",
-            comment: "@context: Post form field",
-          })}
-        </label>
-        <input
-          type="text"
-          data-bind="path"
-          class="input"
-          placeholder="my-custom-url"
-        />
-      </div>
-
       {/* Submit */}
       <div class="flex gap-2">
         <button type="submit" class="btn" data-attr-disabled="$_loading">

package/src/ui/dash/PostList.tsx

@@ -0,0 +1,101 @@
+/**
+ * Post List Component
+ */
+
+import type { FC } from "hono/jsx";
+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 { 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";
+
+export interface PostListProps {
+  posts: Post[];
+}
+
+export const PostList: FC<PostListProps> = ({ posts }) => {
+  const { t } = useLingui();
+  if (posts.length === 0) {
+    return (
+      <EmptyState
+        message={t({
+          message: "No posts yet.",
+          comment: "@context: Empty state message when no posts exist",
+        })}
+        ctaText={t({
+          message: "Create your first post",
+          comment: "@context: Button in empty state to create first post",
+        })}
+        ctaHref="/dash/posts/new"
+      />
+    );
+  }
+
+  return (
+    <div class="flex flex-col divide-y">
+      {posts.map((post) => {
+        const permalink = post.path
+          ? `/${post.path}`
+          : `/p/${sqid.encode(post.id)}`;
+        return (
+          <ListItemRow
+            key={post.id}
+            actions={
+              <ActionButtons
+                editHref={`/dash/posts/${sqid.encode(post.id)}/edit`}
+                editLabel={t({
+                  message: "Edit",
+                  comment: "@context: Button to edit post",
+                })}
+                viewHref={permalink}
+                viewLabel={t({
+                  message: "View",
+                  comment: "@context: Button to view post on public site",
+                })}
+                deleteAction={`/dash/posts/${sqid.encode(post.id)}/delete`}
+                deleteConfirm={t({
+                  message:
+                    "Are you sure you want to delete this post? This cannot be undone.",
+                  comment:
+                    "@context: Confirmation dialog when deleting a post from the list",
+                })}
+              />
+            }
+          >
+            <div class="flex items-center gap-2 mb-1">
+              <FormatBadge type={post.format} />
+              <StatusBadge
+                status={post.status}
+                featured={post.featured === 1}
+                pinned={post.pinned === 1}
+              />
+              <span class="text-xs text-muted-foreground">
+                {time.formatDate(post.publishedAt)}
+              </span>
+            </div>
+            <a
+              href={`/dash/posts/${sqid.encode(post.id)}`}
+              class="font-medium hover:underline"
+            >
+              {post.title ||
+                post.body?.slice(0, 60) ||
+                t({
+                  message: "Untitled",
+                  comment: "@context: Default title for untitled post",
+                })}
+            </a>
+            {post.body && !post.title && (
+              <p class="text-sm text-muted-foreground mt-1 line-clamp-2">
+                {post.body.slice(0, 120)}
+              </p>
+            )}
+          </ListItemRow>
+        );
+      })}
+    </div>
+  );
+};

package/src/ui/dash/StatusBadge.tsx

@@ -0,0 +1,61 @@
+/**
+ * Status Badge Component
+ *
+ * Displays badges for post status, featured, and pinned state.
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type { Status } from "../../types.js";
+
+export interface StatusBadgeProps {
+  status: Status;
+  featured?: boolean;
+  pinned?: boolean;
+}
+
+export const StatusBadge: FC<StatusBadgeProps> = ({
+  status,
+  featured,
+  pinned,
+}) => {
+  const { t } = useLingui();
+
+  const statusVariants: Record<Status, string> = {
+    published: "badge-secondary",
+    draft: "badge-outline",
+  };
+
+  const statusLabels: Record<Status, string> = {
+    published: t({
+      message: "Published",
+      comment: "@context: Post status badge - published",
+    }),
+    draft: t({
+      message: "Draft",
+      comment: "@context: Post status badge - draft",
+    }),
+  };
+
+  return (
+    <span class="flex items-center gap-1">
+      <span class={statusVariants[status]}>{statusLabels[status]}</span>
+      {featured && (
+        <span class="badge-primary">
+          {t({
+            message: "Featured",
+            comment: "@context: Post badge - featured",
+          })}
+        </span>
+      )}
+      {pinned && (
+        <span class="badge-outline">
+          {t({
+            message: "Pinned",
+            comment: "@context: Post badge - pinned",
+          })}
+        </span>
+      )}
+    </span>
+  );
+};

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/feed/LinkCard.tsx

@@ -0,0 +1,72 @@
+/**
+ * Link Card
+ *
+ * Compact link preview box — date is shown at the feed level as a group header.
+ */
+
+import type { FC } from "hono/jsx";
+import type { TimelineCardProps } from "../../types.js";
+
+export const LinkCard: FC<TimelineCardProps> = ({ post, compact }) => {
+  // Extract domain from URL for display
+  let domain: string | undefined;
+  if (post.url) {
+    try {
+      domain = new URL(post.url).hostname.replace(/^www\./, "");
+    } catch {
+      // Invalid URL, skip domain display
+    }
+  }
+
+  return (
+    <article
+      class={`h-entry${compact ? " feed-compact" : ""}`}
+      data-post
+      data-format="link"
+    >
+      {domain && (
+        <div class="text-xs text-muted-foreground mb-1 flex items-center gap-1">
+          <svg
+            class="size-3"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+          >
+            <path d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+          </svg>
+          <span>{domain}</span>
+        </div>
+      )}
+      {post.title && (
+        <h2
+          class={`p-name font-semibold ${compact ? "text-sm" : "text-base"} mb-1`}
+        >
+          <a
+            href={post.url || post.permalink}
+            class="u-url hover:underline"
+            target={post.url ? "_blank" : undefined}
+            rel={post.url ? "noopener noreferrer" : undefined}
+          >
+            {post.title}
+          </a>
+        </h2>
+      )}
+      {!compact && post.bodyHtml && (
+        <div
+          class="e-content prose text-muted-foreground"
+          data-post-body
+          dangerouslySetInnerHTML={{ __html: post.bodyHtml }}
+        />
+      )}
+      <footer class="mt-2 text-xs text-muted-foreground" data-post-meta>
+        <a href={post.permalink} class="hover:underline">
+          <time class="dt-published" datetime={post.publishedAt}>
+            {post.publishedAtFormatted}
+          </time>
+        </a>
+      </footer>
+    </article>
+  );
+};

package/src/ui/feed/NoteCard.tsx

@@ -0,0 +1,63 @@
+/**
+ * Note Card
+ *
+ * Without title: plain text note with full date in footer.
+ * With title: article-style rendering with summary excerpt and "Read more" link.
+ */
+
+import type { FC } from "hono/jsx";
+import type { TimelineCardProps } from "../../types.js";
+import { MediaGallery } from "../shared/MediaGallery.js";
+
+export const NoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
+  const isArticle = !!post.title;
+  const displayHtml = isArticle ? post.summaryHtml : post.bodyHtml;
+
+  return (
+    <article
+      class={`h-entry${compact ? " feed-compact" : ""}`}
+      data-post
+      data-format="note"
+    >
+      {isArticle && (
+        <h2
+          class={`p-name font-semibold ${compact ? "text-sm" : "text-base"} mb-1`}
+        >
+          <a href={post.permalink} class="u-url hover:underline">
+            {post.title}
+          </a>
+        </h2>
+      )}
+      {displayHtml && (
+        <div
+          class={`e-content prose ${compact ? "prose-sm" : isArticle ? "text-muted-foreground" : ""}`}
+          data-post-body
+          dangerouslySetInnerHTML={{ __html: displayHtml }}
+        />
+      )}
+      {!compact && post.media.length > 0 && (
+        <div class="mt-3" data-post-media>
+          <MediaGallery attachments={post.media} />
+        </div>
+      )}
+      {!compact && isArticle && post.summaryHasMore && (
+        <a
+          href={post.permalink}
+          class="text-sm text-muted-foreground hover:underline mt-1 inline-block"
+        >
+          Read more →
+        </a>
+      )}
+      <footer class="mt-2" data-post-meta>
+        <a
+          href={post.permalink}
+          class="u-url text-xs text-muted-foreground hover:underline"
+        >
+          <time class="dt-published" datetime={post.publishedAt}>
+            {post.publishedAtFormatted}
+          </time>
+        </a>
+      </footer>
+    </article>
+  );
+};