@jant/core 0.3.6 → 0.3.8

package/src/services/navigation.ts

@@ -0,0 +1,165 @@
+/**
+ * Navigation Link Service
+ *
+ * Manages navigation links displayed on public pages
+ */
+
+import { eq, asc, sql } from "drizzle-orm";
+import type { Database } from "../db/index.js";
+import { navigationLinks } from "../db/schema.js";
+import { now } from "../lib/time.js";
+import type {
+  NavigationLink,
+  CreateNavigationLink,
+  UpdateNavigationLink,
+} from "../types.js";
+
+export interface NavigationLinkService {
+  list(): Promise<NavigationLink[]>;
+  getById(id: number): Promise<NavigationLink | null>;
+  create(data: CreateNavigationLink): Promise<NavigationLink>;
+  update(
+    id: number,
+    data: UpdateNavigationLink,
+  ): Promise<NavigationLink | null>;
+  delete(id: number): Promise<boolean>;
+  reorder(ids: number[]): Promise<void>;
+  ensureDefaults(): Promise<NavigationLink[]>;
+}
+
+export function createNavigationLinkService(
+  db: Database,
+): NavigationLinkService {
+  function toNavigationLink(
+    row: typeof navigationLinks.$inferSelect,
+  ): NavigationLink {
+    return {
+      id: row.id,
+      label: row.label,
+      url: row.url,
+      position: row.position,
+      createdAt: row.createdAt,
+      updatedAt: row.updatedAt,
+    };
+  }
+
+  return {
+    async list() {
+      const rows = await db
+        .select()
+        .from(navigationLinks)
+        .orderBy(asc(navigationLinks.position));
+      return rows.map(toNavigationLink);
+    },
+
+    async getById(id) {
+      const result = await db
+        .select()
+        .from(navigationLinks)
+        .where(eq(navigationLinks.id, id))
+        .limit(1);
+      return result[0] ? toNavigationLink(result[0]) : null;
+    },
+
+    async create(data) {
+      const timestamp = now();
+
+      let position = data.position;
+      if (position === undefined) {
+        const maxResult = await db
+          .select({ maxPos: sql<number>`COALESCE(MAX(position), -1)` })
+          .from(navigationLinks);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- aggregate always returns one row
+        position = maxResult[0]!.maxPos + 1;
+      }
+
+      const result = await db
+        .insert(navigationLinks)
+        .values({
+          label: data.label,
+          url: data.url,
+          position,
+          createdAt: timestamp,
+          updatedAt: timestamp,
+        })
+        .returning();
+
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- DB insert with .returning() always returns inserted row
+      return toNavigationLink(result[0]!);
+    },
+
+    async update(id, data) {
+      const existing = await db
+        .select()
+        .from(navigationLinks)
+        .where(eq(navigationLinks.id, id))
+        .limit(1);
+      if (!existing[0]) return null;
+
+      const timestamp = now();
+      const result = await db
+        .update(navigationLinks)
+        .set({
+          ...(data.label !== undefined && { label: data.label }),
+          ...(data.url !== undefined && { url: data.url }),
+          ...(data.position !== undefined && { position: data.position }),
+          updatedAt: timestamp,
+        })
+        .where(eq(navigationLinks.id, id))
+        .returning();
+
+      return result[0] ? toNavigationLink(result[0]) : null;
+    },
+
+    async delete(id) {
+      const result = await db
+        .delete(navigationLinks)
+        .where(eq(navigationLinks.id, id))
+        .returning();
+      return result.length > 0;
+    },
+
+    async reorder(ids) {
+      const timestamp = now();
+      for (let i = 0; i < ids.length; i++) {
+        await db
+          .update(navigationLinks)
+          .set({ position: i, updatedAt: timestamp })
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- loop index guarantees element exists
+          .where(eq(navigationLinks.id, ids[i]!));
+      }
+    },
+
+    async ensureDefaults() {
+      const existing = await db.select().from(navigationLinks).limit(1);
+      if (existing.length > 0) {
+        const rows = await db
+          .select()
+          .from(navigationLinks)
+          .orderBy(asc(navigationLinks.position));
+        return rows.map(toNavigationLink);
+      }
+
+      const timestamp = now();
+      const defaults = [
+        { label: "Home", url: "/", position: 0 },
+        { label: "Archive", url: "/archive", position: 1 },
+        { label: "RSS", url: "/feed", position: 2 },
+      ];
+
+      for (const link of defaults) {
+        await db.insert(navigationLinks).values({
+          ...link,
+          createdAt: timestamp,
+          updatedAt: timestamp,
+        });
+      }
+
+      const rows = await db
+        .select()
+        .from(navigationLinks)
+        .orderBy(asc(navigationLinks.position));
+      return rows.map(toNavigationLink);
+    },
+  };
+}

package/src/services/post.ts

@@ -4,7 +4,16 @@
  * CRUD operations for posts with Thread support
  */
 
-import { eq, and, isNull, desc, or, inArray, sql } from "drizzle-orm";
+import {
+  eq,
+  and,
+  isNull,
+  desc,
+  or,
+  inArray,
+  notInArray,
+  sql,
+} from "drizzle-orm";
 import type { Database } from "../db/index.js";
 import { posts } from "../db/schema.js";
 import { now } from "../lib/time.js";
@@ -20,6 +29,8 @@ import type {
 
 export interface PostFilters {
   type?: PostType;
+  /** Exclude specific post types (e.g. ["page"]) */
+  excludeTypes?: PostType[];
   visibility?: Visibility | Visibility[];
   includeDeleted?: boolean;
   threadId?: number;
@@ -40,6 +51,11 @@ export interface PostService {
   updateThreadVisibility(rootId: number, visibility: Visibility): Promise<void>;
   /** Get reply counts for multiple posts */
   getReplyCounts(postIds: number[]): Promise<Map<number, number>>;
+  /** Get preview replies for multiple thread roots */
+  getThreadPreviews(
+    rootIds: number[],
+    previewCount?: number,
+  ): Promise<Map<number, Post[]>>;
 }
 
 export function createPostService(db: Database): PostService {
@@ -101,6 +117,11 @@ export function createPostService(db: Database): PostService {
         conditions.push(eq(posts.type, filters.type));
       }
 
+      // Exclude types filter
+      if (filters.excludeTypes && filters.excludeTypes.length > 0) {
+        conditions.push(notInArray(posts.type, filters.excludeTypes));
+      }
+
       // Thread filter
       if (filters.threadId) {
         conditions.push(eq(posts.threadId, filters.threadId));
@@ -302,5 +323,31 @@ export function createPostService(db: Database): PostService {
       }
       return counts;
     },
+
+    async getThreadPreviews(rootIds, previewCount = 3) {
+      if (rootIds.length === 0) return new Map();
+
+      const rows = await db
+        .select()
+        .from(posts)
+        .where(and(inArray(posts.threadId, rootIds), isNull(posts.deletedAt)))
+        .orderBy(posts.threadId, posts.createdAt);
+
+      // Partition by threadId, take first previewCount per thread
+      const result = new Map<number, Post[]>();
+      for (const row of rows) {
+        const post = toPost(row);
+        if (post.threadId === null) continue;
+        const list = result.get(post.threadId);
+        if (list) {
+          if (list.length < previewCount) {
+            list.push(post);
+          }
+        } else {
+          result.set(post.threadId, [post]);
+        }
+      }
+      return result;
+    },
   };
 }

package/src/styles/components.css

@@ -10,6 +10,11 @@
   .container {
     @apply mx-auto max-w-2xl px-4;
   }
+
+  .container-timeline {
+    @apply mx-auto px-4;
+    max-width: 600px;
+  }
 }
 
 /* Alert variants */
@@ -119,6 +124,60 @@
   }
 }
 
+/* Timeline cards */
+@layer components {
+  .timeline-card {
+    @apply rounded-lg border p-4;
+    border-color: var(--color-border);
+  }
+
+  .timeline-card-link {
+    border-left-width: 4px;
+    border-left-color: var(--color-primary);
+  }
+
+  .timeline-card-quote {
+    border-left-width: 4px;
+    border-left-color: var(--color-muted-foreground);
+    background-color: var(--color-muted);
+  }
+
+  .timeline-card-image {
+    @apply p-0 overflow-hidden;
+  }
+
+  .timeline-card-image-gallery {
+    /* Remove default margin from MediaGallery inside image cards */
+    > div {
+      @apply mt-0;
+    }
+  }
+
+  .timeline-card-compact {
+    @apply p-3 text-sm;
+  }
+
+  .timeline-thread-replies {
+    @apply relative ml-5;
+  }
+
+  .timeline-thread-reply {
+    @apply relative pl-5 mt-3;
+
+    &::after {
+      content: "";
+      @apply absolute left-0 top-0 bottom-0 w-px;
+      background-color: var(--color-border);
+    }
+
+    &::before {
+      content: "";
+      @apply absolute left-0 top-4 h-px w-4;
+      background-color: var(--color-border);
+    }
+  }
+}
+
 @keyframes toast-in {
   from {
     opacity: 0;

package/src/theme/components/MediaGallery.tsx

@@ -0,0 +1,128 @@
+/**
+ * Media Gallery Component
+ *
+ * Renders media attachments on public post pages.
+ * Layout adapts based on the number of images.
+ */
+
+import type { FC } from "hono/jsx";
+import type { MediaAttachment } from "../../types.js";
+
+export interface MediaGalleryProps {
+  attachments: MediaAttachment[];
+}
+
+export const MediaGallery: FC<MediaGalleryProps> = ({ attachments }) => {
+  const images = attachments.filter((a) => a.mimeType.startsWith("image/"));
+  if (images.length === 0) return null;
+
+  if (images.length === 1) {
+    const [img] = images;
+    if (!img) return null;
+    return (
+      <div class="mt-3">
+        <a href={img.url} target="_blank" rel="noopener noreferrer">
+          <img
+            src={img.previewUrl}
+            alt={img.alt || ""}
+            width={img.width ?? undefined}
+            height={img.height ?? undefined}
+            class="rounded-lg max-w-full h-auto"
+            loading="lazy"
+          />
+        </a>
+      </div>
+    );
+  }
+
+  if (images.length === 2) {
+    return (
+      <div class="mt-3 grid grid-cols-2 gap-1 rounded-lg overflow-hidden">
+        {images.map((img) => (
+          <a
+            key={img.id}
+            href={img.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="aspect-square"
+          >
+            <img
+              src={img.previewUrl}
+              alt={img.alt || ""}
+              class="w-full h-full object-cover"
+              loading="lazy"
+            />
+          </a>
+        ))}
+      </div>
+    );
+  }
+
+  if (images.length === 3) {
+    const [first, ...rest] = images;
+    if (!first) return null;
+    return (
+      <div class="mt-3 grid grid-cols-2 gap-1 rounded-lg overflow-hidden">
+        <a
+          href={first.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="row-span-2"
+        >
+          <img
+            src={first.previewUrl}
+            alt={first.alt || ""}
+            class="w-full h-full object-cover"
+            loading="lazy"
+          />
+        </a>
+        {rest.map((img) => (
+          <a
+            key={img.id}
+            href={img.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="aspect-square"
+          >
+            <img
+              src={img.previewUrl}
+              alt={img.alt || ""}
+              class="w-full h-full object-cover"
+              loading="lazy"
+            />
+          </a>
+        ))}
+      </div>
+    );
+  }
+
+  // 4+ images: 2-column grid, show first 4 with remaining count
+  const shown = images.slice(0, 4);
+  const remaining = images.length - 4;
+
+  return (
+    <div class="mt-3 grid grid-cols-2 gap-1 rounded-lg overflow-hidden">
+      {shown.map((img, i) => (
+        <a
+          key={img.id}
+          href={img.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="relative aspect-square"
+        >
+          <img
+            src={img.previewUrl}
+            alt={img.alt || ""}
+            class="w-full h-full object-cover"
+            loading="lazy"
+          />
+          {i === 3 && remaining > 0 && (
+            <div class="absolute inset-0 bg-black/50 flex items-center justify-center text-white text-xl font-semibold">
+              +{remaining}
+            </div>
+          )}
+        </a>
+      ))}
+    </div>
+  );
+};

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/PostList.tsx

@@ -52,6 +52,13 @@ export const PostList: FC<PostListProps> = ({ posts }) => {
                 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",
+              })}
             />
           }
         >

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,
@@ -20,3 +21,15 @@ export {
   VisibilityBadge,
   type VisibilityBadgeProps,
 } from "./VisibilityBadge.js";
+
+// Timeline components
+export {
+  NoteCard,
+  ArticleCard,
+  LinkCard,
+  QuoteCard,
+  ImageCard,
+  ThreadPreview,
+  TimelineItem,
+  TimelineFeed,
+} from "./timeline/index.js";