@jant/core 0.3.7 → 0.3.8

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/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

@@ -21,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";

package/src/theme/components/timeline/ArticleCard.tsx

@@ -0,0 +1,57 @@
+/**
+ * Article Card Component
+ *
+ * Prominent title + excerpt for type="article" posts.
+ */
+
+import type { FC } from "hono/jsx";
+import type { TimelineCardProps } from "../../../types.js";
+import * as sqid from "../../../lib/sqid.js";
+import * as time from "../../../lib/time.js";
+
+export const ArticleCard: FC<TimelineCardProps> = ({ post, compact }) => {
+  const permalink = `/p/${sqid.encode(post.id)}`;
+  const excerpt = post.content
+    ? post.content.length > 160
+      ? post.content.slice(0, 160) + "..."
+      : post.content
+    : null;
+
+  return (
+    <article
+      class={`h-entry timeline-card${compact ? " timeline-card-compact" : ""}`}
+    >
+      {post.title && (
+        <h2
+          class={`p-name font-semibold ${compact ? "text-sm" : "text-lg"} mb-1`}
+        >
+          <a href={permalink} class="u-url hover:underline">
+            {post.title}
+          </a>
+        </h2>
+      )}
+      {!compact && excerpt && (
+        <p class="e-content text-sm text-muted-foreground line-clamp-3">
+          {excerpt}
+        </p>
+      )}
+      <footer class="mt-2 text-xs text-muted-foreground">
+        <a href={permalink} class="u-url hover:underline">
+          <time
+            class="dt-published"
+            datetime={time.toISOString(post.publishedAt)}
+          >
+            {time.formatDate(post.publishedAt)}
+          </time>
+        </a>
+        {!compact && (
+          <span class="ml-2">
+            <a href={permalink} class="hover:underline">
+              Read more &rarr;
+            </a>
+          </span>
+        )}
+      </footer>
+    </article>
+  );
+};

package/src/theme/components/timeline/ImageCard.tsx

@@ -0,0 +1,80 @@
+/**
+ * Image Card Component
+ *
+ * Image-first layout for type="image" posts.
+ */
+
+import type { FC } from "hono/jsx";
+import type { TimelineCardProps } from "../../../types.js";
+import { MediaGallery } from "../MediaGallery.js";
+import * as sqid from "../../../lib/sqid.js";
+import * as time from "../../../lib/time.js";
+
+export const ImageCard: FC<TimelineCardProps> = ({ post, compact }) => {
+  const permalink = `/p/${sqid.encode(post.id)}`;
+
+  if (compact) {
+    return (
+      <article class="h-entry timeline-card timeline-card-compact">
+        {post.title && (
+          <h2 class="p-name text-sm font-medium mb-1">
+            <a href={permalink} class="u-url hover:underline">
+              {post.title}
+            </a>
+          </h2>
+        )}
+        {post.contentHtml && (
+          <div
+            class="e-content prose prose-sm text-muted-foreground"
+            dangerouslySetInnerHTML={{ __html: post.contentHtml }}
+          />
+        )}
+        <footer class="mt-1 text-xs text-muted-foreground">
+          <a href={permalink} class="u-url hover:underline">
+            <time
+              class="dt-published"
+              datetime={time.toISOString(post.publishedAt)}
+            >
+              {time.formatDate(post.publishedAt)}
+            </time>
+          </a>
+        </footer>
+      </article>
+    );
+  }
+
+  return (
+    <article class="h-entry timeline-card timeline-card-image">
+      {post.mediaAttachments.length > 0 && (
+        <div class="timeline-card-image-gallery">
+          <MediaGallery attachments={post.mediaAttachments} />
+        </div>
+      )}
+      <div class="p-4">
+        {post.title && (
+          <h2 class="p-name font-medium mb-1">
+            <a href={permalink} class="u-url hover:underline">
+              {post.title}
+            </a>
+          </h2>
+        )}
+        {post.contentHtml && (
+          <div
+            class="e-content prose prose-sm"
+            dangerouslySetInnerHTML={{ __html: post.contentHtml }}
+          />
+        )}
+        <footer class="mt-2 text-xs text-muted-foreground">
+          <a href={permalink} class="u-url hover:underline">
+            <time
+              class="dt-published"
+              datetime={time.toISOString(post.publishedAt)}
+            >
+              {time.formatDate(post.publishedAt)}
+            </time>
+          </a>
+        </footer>
+      </div>
+    </article>
+  );
+};

package/src/theme/components/timeline/LinkCard.tsx

@@ -0,0 +1,66 @@
+/**
+ * Link Card Component
+ *
+ * External link emphasis for type="link" posts.
+ */
+
+import type { FC } from "hono/jsx";
+import type { TimelineCardProps } from "../../../types.js";
+import * as sqid from "../../../lib/sqid.js";
+import * as time from "../../../lib/time.js";
+
+export const LinkCard: FC<TimelineCardProps> = ({ post, compact }) => {
+  const permalink = `/p/${sqid.encode(post.id)}`;
+
+  return (
+    <article
+      class={`h-entry timeline-card timeline-card-link${compact ? " timeline-card-compact" : ""}`}
+    >
+      {post.sourceDomain && (
+        <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>{post.sourceDomain}</span>
+        </div>
+      )}
+      {post.title && (
+        <h2
+          class={`p-name font-semibold ${compact ? "text-sm" : "text-base"} mb-1`}
+        >
+          <a
+            href={post.sourceUrl || permalink}
+            class="u-url hover:underline"
+            target={post.sourceUrl ? "_blank" : undefined}
+            rel={post.sourceUrl ? "noopener noreferrer" : undefined}
+          >
+            {post.title}
+          </a>
+        </h2>
+      )}
+      {!compact && post.contentHtml && (
+        <div
+          class="e-content prose prose-sm text-muted-foreground"
+          dangerouslySetInnerHTML={{ __html: post.contentHtml }}
+        />
+      )}
+      <footer class="mt-2 text-xs text-muted-foreground">
+        <a href={permalink} class="hover:underline">
+          <time
+            class="dt-published"
+            datetime={time.toISOString(post.publishedAt)}
+          >
+            {time.formatDate(post.publishedAt)}
+          </time>
+        </a>
+      </footer>
+    </article>
+  );
+};

package/src/theme/components/timeline/NoteCard.tsx

@@ -0,0 +1,41 @@
+/**
+ * Note Card Component
+ *
+ * Text-first, minimal card for type="note" posts.
+ */
+
+import type { FC } from "hono/jsx";
+import type { TimelineCardProps } from "../../../types.js";
+import { MediaGallery } from "../MediaGallery.js";
+import * as sqid from "../../../lib/sqid.js";
+import * as time from "../../../lib/time.js";
+
+export const NoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
+  const permalink = `/p/${sqid.encode(post.id)}`;
+
+  return (
+    <article
+      class={`h-entry timeline-card${compact ? " timeline-card-compact" : ""}`}
+    >
+      {post.contentHtml && (
+        <div
+          class={`e-content prose ${compact ? "prose-sm" : "prose-sm"}`}
+          dangerouslySetInnerHTML={{ __html: post.contentHtml }}
+        />
+      )}
+      {!compact && post.mediaAttachments.length > 0 && (
+        <MediaGallery attachments={post.mediaAttachments} />
+      )}
+      <footer class="mt-2 text-xs text-muted-foreground">
+        <a href={permalink} class="u-url hover:underline">
+          <time
+            class="dt-published"
+            datetime={time.toISOString(post.publishedAt)}
+          >
+            {time.formatDate(post.publishedAt)}
+          </time>
+        </a>
+      </footer>
+    </article>
+  );
+};

package/src/theme/components/timeline/QuoteCard.tsx

@@ -0,0 +1,55 @@
+/**
+ * Quote Card Component
+ *
+ * Blockquote + attribution for type="quote" posts.
+ */
+
+import type { FC } from "hono/jsx";
+import type { TimelineCardProps } from "../../../types.js";
+import * as sqid from "../../../lib/sqid.js";
+import * as time from "../../../lib/time.js";
+
+export const QuoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
+  const permalink = `/p/${sqid.encode(post.id)}`;
+
+  return (
+    <article
+      class={`h-entry timeline-card timeline-card-quote${compact ? " timeline-card-compact" : ""}`}
+    >
+      {post.contentHtml && (
+        <blockquote
+          class={`e-content italic ${compact ? "text-sm" : "text-base"} leading-relaxed`}
+        >
+          <div dangerouslySetInnerHTML={{ __html: post.contentHtml }} />
+        </blockquote>
+      )}
+      {!compact && (post.sourceName || post.sourceUrl) && (
+        <div class="mt-2 text-sm text-muted-foreground">
+          &mdash;{" "}
+          {post.sourceUrl ? (
+            <a
+              href={post.sourceUrl}
+              class="hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {post.sourceName || post.sourceDomain || "Source"}
+            </a>
+          ) : (
+            <span>{post.sourceName}</span>
+          )}
+        </div>
+      )}
+      <footer class="mt-2 text-xs text-muted-foreground">
+        <a href={permalink} class="u-url hover:underline">
+          <time
+            class="dt-published"
+            datetime={time.toISOString(post.publishedAt)}
+          >
+            {time.formatDate(post.publishedAt)}
+          </time>
+        </a>
+      </footer>
+    </article>
+  );
+};

package/src/theme/components/timeline/ThreadPreview.tsx

@@ -0,0 +1,49 @@
+/**
+ * Thread Preview Component
+ *
+ * Inline thread preview: root card + compact replies + "show more" link.
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type { ThreadPreviewProps } from "../../../types.js";
+import { TimelineItem } from "./TimelineItem.js";
+import * as sqid from "../../../lib/sqid.js";
+
+export const ThreadPreview: FC<ThreadPreviewProps> = ({
+  rootPost,
+  previewReplies,
+  totalReplyCount,
+}) => {
+  const { t } = useLingui();
+  const permalink = `/p/${sqid.encode(rootPost.id)}`;
+  const remainingCount = totalReplyCount - previewReplies.length;
+
+  return (
+    <div class="timeline-thread">
+      <TimelineItem item={{ post: rootPost }} />
+      {previewReplies.length > 0 && (
+        <div class="timeline-thread-replies">
+          {previewReplies.map((reply) => (
+            <div key={reply.id} class="timeline-thread-reply">
+              <TimelineItem item={{ post: reply }} compact />
+            </div>
+          ))}
+          {remainingCount > 0 && (
+            <div class="timeline-thread-reply">
+              <a
+                href={permalink}
+                class="text-sm text-muted-foreground hover:text-foreground hover:underline"
+              >
+                {t({
+                  message: `Show ${remainingCount} more ${remainingCount === 1 ? "reply" : "replies"}`,
+                  comment: "@context: Link to show remaining thread replies",
+                })}
+              </a>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/theme/components/timeline/TimelineFeed.tsx

@@ -0,0 +1,52 @@
+/**
+ * Timeline Feed Component
+ *
+ * Main feed wrapper with load-more button.
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type { TimelineFeedProps } from "../../../types.js";
+import { TimelineItem } from "./TimelineItem.js";
+import { ThreadPreview } from "./ThreadPreview.js";
+
+export const TimelineFeed: FC<TimelineFeedProps> = ({
+  items,
+  hasMore,
+  nextCursor,
+}) => {
+  const { t } = useLingui();
+
+  return (
+    <div>
+      <div id="timeline-feed" class="flex flex-col gap-4">
+        {items.map((item) => {
+          if (item.threadPreview) {
+            return (
+              <ThreadPreview
+                key={item.post.id}
+                rootPost={item.post}
+                previewReplies={item.threadPreview.replies}
+                totalReplyCount={item.threadPreview.totalReplyCount}
+              />
+            );
+          }
+          return <TimelineItem key={item.post.id} item={item} />;
+        })}
+      </div>
+      {hasMore && nextCursor && (
+        <div id="load-more-container" class="mt-6 text-center">
+          <button
+            class="btn btn-outline"
+            data-on:click={`@get('/api/timeline?cursor=${nextCursor}')`}
+          >
+            {t({
+              message: "Load more",
+              comment: "@context: Button to load more posts in timeline",
+            })}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/theme/components/timeline/TimelineItem.tsx

@@ -0,0 +1,39 @@
+/**
+ * Timeline Item Component
+ *
+ * Dispatches to the correct card component based on post type.
+ */
+
+import type { FC } from "hono/jsx";
+import type { TimelineItemData, TimelineCardProps } from "../../../types.js";
+import { NoteCard } from "./NoteCard.js";
+import { ArticleCard } from "./ArticleCard.js";
+import { LinkCard } from "./LinkCard.js";
+import { QuoteCard } from "./QuoteCard.js";
+import { ImageCard } from "./ImageCard.js";
+import type { PostType } from "../../../types.js";
+
+const CARD_MAP: Record<PostType, FC<TimelineCardProps>> = {
+  note: NoteCard,
+  article: ArticleCard,
+  link: LinkCard,
+  quote: QuoteCard,
+  image: ImageCard,
+  page: NoteCard,
+};
+
+interface TimelineItemProps {
+  item: TimelineItemData;
+  compact?: boolean;
+  /** Override card component (for theme overrides) */
+  cardOverride?: FC<TimelineCardProps>;
+}
+
+export const TimelineItem: FC<TimelineItemProps> = ({
+  item,
+  compact,
+  cardOverride,
+}) => {
+  const Card = cardOverride ?? CARD_MAP[item.post.type];
+  return <Card post={item.post} compact={compact} />;
+};

package/src/theme/components/timeline/index.ts

@@ -0,0 +1,8 @@
+export { NoteCard } from "./NoteCard.js";
+export { ArticleCard } from "./ArticleCard.js";
+export { LinkCard } from "./LinkCard.js";
+export { QuoteCard } from "./QuoteCard.js";
+export { ImageCard } from "./ImageCard.js";
+export { ThreadPreview } from "./ThreadPreview.js";
+export { TimelineItem } from "./TimelineItem.js";
+export { TimelineFeed } from "./TimelineFeed.js";

package/src/theme/layouts/DashLayout.tsx

@@ -126,6 +126,16 @@ function DashLayoutContent({
                 comment: "@context: Dashboard navigation - URL redirects",
               })}
             </a>
+            <a
+              href="/dash/navigation"
+              class={navClass("/dash/navigation", /^\/dash\/navigation/)}
+            >
+              {t({
+                message: "Navigation",
+                comment:
+                  "@context: Dashboard navigation - navigation links management",
+              })}
+            </a>
             <a
               href="/dash/settings"
               class={navClass("/dash/settings", /^\/dash\/settings/)}