@jant/core 0.3.6 → 0.3.7

package/src/theme/components/PostForm.tsx

@@ -3,25 +3,44 @@
  */
 
 import type { FC } from "hono/jsx";
-import type { Post } from "../../types.js";
+import type { Post, Media, Collection } from "../../types.js";
 import { useLingui } from "@lingui/react/macro";
+import { getMediaUrl, getImageUrl } from "../../lib/image.js";
 
 export interface PostFormProps {
   post?: Post;
   action: string;
+  mediaAttachments?: Media[];
+  r2PublicUrl?: string;
+  imageTransformUrl?: string;
+  collections?: Collection[];
+  postCollectionIds?: number[];
 }
 
-export const PostForm: FC<PostFormProps> = ({ post, action }) => {
+export const PostForm: FC<PostFormProps> = ({
+  post,
+  action,
+  mediaAttachments,
+  r2PublicUrl,
+  imageTransformUrl,
+  collections,
+  postCollectionIds,
+}) => {
   const { t } = useLingui();
   const isEdit = !!post;
 
+  const existingMediaIds = (mediaAttachments ?? []).map((m) => m.id);
+
   const signals = JSON.stringify({
     type: post?.type ?? "note",
     title: post?.title ?? "",
     content: post?.content ?? "",
     sourceUrl: post?.sourceUrl ?? "",
+    sourceName: post?.sourceName ?? "",
     visibility: post?.visibility ?? "quiet",
     path: post?.path ?? "",
+    mediaIds: existingMediaIds,
+    collectionIds: postCollectionIds ?? [],
   }).replace(/</g, "\\u003c");
 
   return (
@@ -96,6 +115,73 @@ export const PostForm: FC<PostFormProps> = ({ post, action }) => {
         </textarea>
       </div>
 
+      {/* Media attachments */}
+      <div class="field" data-show="$type !== 'page'">
+        <label class="label">
+          {t({
+            message: "Media",
+            comment: "@context: Post form field - media attachments",
+          })}
+        </label>
+        <p
+          class="text-xs text-muted-foreground mb-2"
+          data-show="$type === 'image'"
+        >
+          {t({
+            message: "At least 1 image required for image posts.",
+            comment: "@context: Hint for image post type media requirement",
+          })}
+        </p>
+        {mediaAttachments && mediaAttachments.length > 0 && (
+          <div class="grid grid-cols-4 sm:grid-cols-6 gap-2 mb-2">
+            {mediaAttachments.map((m) => {
+              const url = getMediaUrl(m.id, m.r2Key, r2PublicUrl);
+              const thumbUrl = getImageUrl(url, imageTransformUrl, {
+                width: 150,
+                quality: 80,
+                format: "auto",
+                fit: "cover",
+              });
+              return (
+                <div
+                  key={m.id}
+                  class="relative group aspect-square"
+                  data-show={`$mediaIds.includes('${m.id}')`}
+                >
+                  <img
+                    src={thumbUrl}
+                    alt={m.alt || m.originalName}
+                    class="w-full h-full object-cover rounded-lg border"
+                    loading="lazy"
+                  />
+                  <button
+                    type="button"
+                    class="absolute top-1 right-1 w-5 h-5 flex items-center justify-center bg-black/60 text-white rounded-full text-xs opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
+                    data-on:click={`$mediaIds = $mediaIds.filter(id => id !== '${m.id}')`}
+                    title={t({
+                      message: "Remove",
+                      comment: "@context: Remove media attachment button",
+                    })}
+                  >
+                    &times;
+                  </button>
+                </div>
+              );
+            })}
+          </div>
+        )}
+        <button
+          type="button"
+          class="btn-outline text-sm"
+          data-on:click="document.getElementById('media-picker-dialog').showModal(); fetch('/dash/media/picker').then(r => r.text()).then(html => document.getElementById('media-picker-grid').innerHTML = html)"
+        >
+          {t({
+            message: "Add Media",
+            comment: "@context: Button to open media picker",
+          })}
+        </button>
+      </div>
+
       {/* Source URL (for link/quote types) */}
       <div class="field">
         <label class="label">
@@ -112,6 +198,26 @@ export const PostForm: FC<PostFormProps> = ({ post, action }) => {
         />
       </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">
@@ -148,6 +254,31 @@ export const PostForm: FC<PostFormProps> = ({ post, action }) => {
         </select>
       </div>
 
+      {/* Collections */}
+      {collections && collections.length > 0 && (
+        <fieldset class="field">
+          <legend class="label">
+            {t({
+              message: "Collections (optional)",
+              comment: "@context: Post form field - assign to collections",
+            })}
+          </legend>
+          <div class="flex flex-col gap-1">
+            {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}]`}
+                />
+                {col.title}
+              </label>
+            ))}
+          </div>
+        </fieldset>
+      )}
+
       {/* Custom path (optional) */}
       <div class="field">
         <label class="label">
@@ -181,6 +312,43 @@ export const PostForm: FC<PostFormProps> = ({ post, action }) => {
           {t({ message: "Cancel", comment: "@context: Button to cancel form" })}
         </a>
       </div>
+
+      {/* Media picker dialog */}
+      <dialog
+        id="media-picker-dialog"
+        class="p-6 rounded-lg max-w-2xl w-full backdrop:bg-black/50"
+        onclick="event.target === this && this.close()"
+      >
+        <div class="flex items-center justify-between mb-4">
+          <h2 class="text-lg font-semibold">
+            {t({
+              message: "Select Media",
+              comment: "@context: Media picker dialog title",
+            })}
+          </h2>
+          <button
+            type="button"
+            class="btn-outline text-sm"
+            onclick="this.closest('dialog').close()"
+          >
+            {t({
+              message: "Done",
+              comment: "@context: Close media picker button",
+            })}
+          </button>
+        </div>
+        <div
+          id="media-picker-grid"
+          class="grid grid-cols-4 gap-2 max-h-96 overflow-y-auto"
+        >
+          <p class="text-muted-foreground text-sm col-span-4">
+            {t({
+              message: "Loading...",
+              comment: "@context: Loading state for media picker",
+            })}
+          </p>
+        </div>
+      </dialog>
     </form>
   );
 };

package/src/theme/components/index.ts

@@ -3,6 +3,7 @@ export { CrudPageHeader, type CrudPageHeaderProps } from "./CrudPageHeader.js";
 export { DangerZone, type DangerZoneProps } from "./DangerZone.js";
 export { EmptyState, type EmptyStateProps } from "./EmptyState.js";
 export { ListItemRow, type ListItemRowProps } from "./ListItemRow.js";
+export { MediaGallery, type MediaGalleryProps } from "./MediaGallery.js";
 export { PageForm, type PageFormProps } from "./PageForm.js";
 export {
   Pagination,

package/src/types.ts

@@ -16,6 +16,22 @@ export const POST_TYPES = [
 ] as const;
 export type PostType = (typeof POST_TYPES)[number];
 
+export const MAX_MEDIA_ATTACHMENTS = 20;
+
+/**
+ * Media attachment rules per post type.
+ * Each entry is [min, max] or null (no media allowed).
+ */
+export const POST_TYPE_MEDIA_RULES: Record<PostType, [number, number] | null> =
+  {
+    note: [0, 20],
+    article: [0, 20],
+    image: [1, 20],
+    link: [0, 1],
+    quote: [0, 20],
+    page: null,
+  };
+
 export const VISIBILITY_LEVELS = [
   "featured",
   "quiet",
@@ -135,9 +151,27 @@ export interface Media {
   width: number | null;
   height: number | null;
   alt: string | null;
+  position: number;
+  blurhash: string | null;
   createdAt: number;
 }
 
+export interface MediaAttachment {
+  id: string;
+  url: string;
+  previewUrl: string;
+  alt: string | null;
+  blurhash: string | null;
+  width: number | null;
+  height: number | null;
+  position: number;
+  mimeType: string;
+}
+
+export interface PostWithMedia extends Post {
+  mediaAttachments: MediaAttachment[];
+}
+
 export interface Collection {
   id: number;
   title: string;
@@ -181,6 +215,7 @@ export interface CreatePost {
   sourceName?: string;
   replyToId?: number;
   publishedAt?: number;
+  mediaIds?: string[];
 }
 
 export interface UpdatePost {
@@ -192,6 +227,7 @@ export interface UpdatePost {
   sourceUrl?: string | null;
   sourceName?: string | null;
   publishedAt?: number;
+  mediaIds?: string[];
 }
 
 // =============================================================================