@jant/core 0.3.24 → 0.3.25

package/src/types.ts

@@ -158,7 +158,7 @@ export interface Post {
   status: Status;
   featured: number; // 0 | 1
   pinned: number; // 0 | 1
-  slug: string | null;
+  path: string | null;
   title: string | null;
   url: string | null;
   body: string | null;
@@ -265,7 +265,7 @@ export interface CreatePost {
   status?: Status;
   featured?: boolean;
   pinned?: boolean;
-  slug?: string;
+  path?: string;
   title?: string;
   url?: string;
   body?: string;
@@ -282,7 +282,7 @@ export interface UpdatePost {
   status?: Status;
   featured?: boolean;
   pinned?: boolean;
-  slug?: string | null;
+  path?: string | null;
   title?: string | null;
   url?: string | null;
   body?: string | null;
@@ -354,10 +354,10 @@ export interface UpdateCollection {
 export interface PostView {
   // Identity
   id: number;
-  /** Pre-computed permalink: "/{slug}" if slug set, otherwise "/p/{sqid}" */
+  /** Pre-computed permalink: "/{path}" if path set, otherwise "/p/{sqid}" */
   permalink: string;
-  /** Custom URL slug, if set */
-  slug?: string;
+  /** Custom URL path, if set. Supports multi-level paths (e.g. "2024/my-post") */
+  path?: string;
 
   // Content
   title?: string;
@@ -487,45 +487,14 @@ export interface ArchiveGroup {
 }
 
 // =============================================================================
-// Timeline Load-More Types
+// Page-Based Pagination Types
 // =============================================================================
 
-/** A date-based group of timeline items (shared utility type) */
-export interface DateGroup {
-  dateKey: string;
-  label: string;
-  items: TimelineItemView[];
-}
-
-/** A single SSE DOM patch instruction returned by timelineMore */
-export interface TimelinePatch {
-  selector: string;
-  content: string;
-  mode?:
-    | "append"
-    | "prepend"
-    | "inner"
-    | "outer"
-    | "before"
-    | "after"
-    | "remove";
-}
-
-/** Props passed to the theme's timelineMore renderer */
-export interface TimelineMoreProps {
-  items: TimelineItemView[];
-  lastDate?: string;
-  hasMore: boolean;
-  nextCursor?: number;
-  theme?: ThemeComponents;
-}
-
 // =============================================================================
 // Configuration Types
 // =============================================================================
 
-import type { FC, PropsWithChildren } from "hono/jsx";
-import type { ColorTheme } from "./theme/color-themes.js";
+import type { ColorTheme } from "./ui/color-themes.js";
 
 /**
  * Search result from FTS5
@@ -544,8 +513,11 @@ export interface SearchResult {
 
 export interface SiteLayoutProps {
   siteName: string;
+  siteDescription?: string;
   links: NavItemView[];
   currentPath: string;
+  isAuthenticated?: boolean;
+  collections?: Collection[];
 }
 
 // =============================================================================
@@ -556,29 +528,23 @@ export interface SiteLayoutProps {
 export interface HomePageProps {
   items: TimelineItemView[];
   pinnedItems: PostView[];
-  hasMore: boolean;
-  nextCursor?: number;
-  theme?: ThemeComponents;
+  currentPage: number;
+  totalPages: number;
 }
 
 /** Props for the single post page component */
 export interface PostPageProps {
   post: PostView;
-  theme?: ThemeComponents;
 }
 
 /** Props for the custom page component */
 export interface SinglePageProps {
   page: PageView;
-  theme?: ThemeComponents;
 }
 
 /** Props for the featured page component */
 export interface FeaturedPageProps {
   items: TimelineItemView[];
-  hasMore: boolean;
-  nextCursor?: number;
-  theme?: ThemeComponents;
 }
 
 /** Props for the archive page component */
@@ -588,7 +554,6 @@ export interface ArchivePageProps {
   nextCursor?: number;
   format?: Format;
   featured?: boolean;
-  theme?: ThemeComponents;
 }
 
 /** Props for the search page component */
@@ -598,7 +563,6 @@ export interface SearchPageProps {
   error?: string;
   hasMore: boolean;
   page: number;
-  theme?: ThemeComponents;
 }
 
 /** Props for the single collection page component */
@@ -607,13 +571,11 @@ export interface CollectionPageProps {
   posts: PostView[];
   hasMore: boolean;
   nextCursor?: number;
-  theme?: ThemeComponents;
 }
 
 /** Props for the collections list page component */
 export interface CollectionsPageProps {
   collections: (Collection & { postCount: number })[];
-  theme?: ThemeComponents;
 }
 
 // =============================================================================
@@ -651,116 +613,13 @@ export interface ThreadPreviewProps {
   rootPost: PostView;
   previewReplies: PostView[];
   totalReplyCount: number;
-  theme?: ThemeComponents;
 }
 
 /** Props for the timeline feed wrapper */
 export interface TimelineFeedProps {
   items: TimelineItemView[];
-  hasMore: boolean;
-  nextCursor?: number;
-  theme?: ThemeComponents;
-}
-
-/** Props for the timeline load-more button */
-export interface TimelineLoadMoreProps {
-  nextCursor: number;
-  /** Last visible date key (YYYY-MM-DD) for merging groups across pages */
-  lastDate?: string;
-  theme?: ThemeComponents;
-}
-
-/**
- * Theme component overrides
- */
-export interface ThemeComponents {
-  // Layout
-  SiteLayout?: FC<PropsWithChildren<SiteLayoutProps>>;
-
-  // Pages
-  HomePage?: FC<HomePageProps>;
-  PostPage?: FC<PostPageProps>;
-  SinglePage?: FC<SinglePageProps>;
-  FeaturedPage?: FC<FeaturedPageProps>;
-  ArchivePage?: FC<ArchivePageProps>;
-  SearchPage?: FC<SearchPageProps>;
-  CollectionPage?: FC<CollectionPageProps>;
-  CollectionsPage?: FC<CollectionsPageProps>;
-
-  // Timeline sub-components (by format)
-  NoteCard?: FC<TimelineCardProps>;
-  LinkCard?: FC<TimelineCardProps>;
-  QuoteCard?: FC<TimelineCardProps>;
-  ThreadPreview?: FC<ThreadPreviewProps>;
-  TimelineFeed?: FC<TimelineFeedProps>;
-  TimelineLoadMore?: FC<TimelineLoadMoreProps>;
-
-  // Shared sub-components
-  Pagination?: FC<PaginationComponentProps>;
-  PagePagination?: FC<PagePaginationComponentProps>;
-  EmptyState?: FC<EmptyStateComponentProps>;
-  MediaGallery?: FC<MediaGalleryComponentProps>;
-}
-
-/**
- * Real component prop types (re-exported from component files via index.ts).
- * These are provided here as aliases to avoid circular imports in types.ts.
- * The canonical definitions live in the component files.
- */
-
-/** @see Pagination component in theme/components/Pagination.tsx */
-export interface PaginationComponentProps {
-  baseUrl: string;
-  hasMore: boolean;
-  nextCursor?: number | string;
-  prevCursor?: number | string;
-  cursorParam?: string;
-}
-
-/** @see PagePagination component in theme/components/Pagination.tsx */
-export interface PagePaginationComponentProps {
-  baseUrl: string;
-  currentPage: number;
-  hasMore: boolean;
-  pageParam?: string;
-}
-
-/** @see EmptyState component in theme/components/EmptyState.tsx */
-export interface EmptyStateComponentProps {
-  message: string;
-  ctaText?: string;
-  ctaHref?: string;
-  centered?: boolean;
-}
-
-/** @see MediaGallery component in theme/components/MediaGallery.tsx */
-export interface MediaGalleryComponentProps {
-  attachments: MediaView[];
-}
-
-/**
- * Theme configuration
- */
-export interface JantTheme {
-  /** Theme name */
-  name?: string;
-  /** Component overrides */
-  components?: ThemeComponents;
-  /** Feed renderer overrides (RSS, Atom, Sitemap) */
-  feed?: {
-    /** Custom RSS 2.0 renderer -- returns XML string */
-    rss?: (data: FeedData) => string;
-    /** Custom Atom renderer -- returns XML string */
-    atom?: (data: FeedData) => string;
-    /** Custom Sitemap renderer -- returns XML string */
-    sitemap?: (data: SitemapData) => string;
-  };
-  /** Renders SSE patches for timeline load-more responses */
-  timelineMore?: (props: TimelineMoreProps) => TimelinePatch[];
-  /** CSS variable overrides (highest priority, always applied) */
-  cssVariables?: Record<string, string>;
-  /** Replace built-in color themes with a custom list */
-  colorThemes?: ColorTheme[];
+  currentPage?: number;
+  totalPages?: number;
 }
 
 /**
@@ -768,12 +627,23 @@ export interface JantTheme {
  *
  * Configuration Philosophy:
  * - Use environment variables for runtime config (API keys, feature flags, site settings)
- * - Use code config (this object) for compile-time customization (theme components)
+ * - Use code config (this object) for CSS customization and feed overrides
  *
  * Site-level settings (name, description, language) are configured via
  * environment variables, not here. See lib/config.ts for details.
  */
 export interface JantConfig {
-  /** Theme configuration (components, CSS overrides) */
-  theme?: JantTheme;
+  /** CSS variable overrides (highest priority after custom CSS) */
+  cssVariables?: Record<string, string>;
+  /** Replace built-in color themes with custom list */
+  colorThemes?: ColorTheme[];
+  /** Custom feed renderers */
+  feed?: {
+    /** Custom RSS 2.0 renderer -- returns XML string */
+    rss?: (data: FeedData) => string;
+    /** Custom Atom renderer -- returns XML string */
+    atom?: (data: FeedData) => string;
+    /** Custom Sitemap renderer -- returns XML string */
+    sitemap?: (data: SitemapData) => string;
+  };
 }

package/src/ui/compose/ComposeDialog.tsx

@@ -0,0 +1,395 @@
+/**
+ * Compose Dialog
+ *
+ * Full-screen compose dialog for quick post creation.
+ * Rendered server-side as part of SiteLayout for authenticated users.
+ */
+
+import type { FC } from "hono/jsx";
+import type { Collection } from "../../types.js";
+import { useLingui } from "@lingui/react/macro";
+
+export interface ComposeDialogProps {
+  collections?: Collection[];
+}
+
+export const ComposeDialog: FC<ComposeDialogProps> = ({ collections }) => {
+  const { t } = useLingui();
+
+  const signals = JSON.stringify({
+    format: "note",
+    title: "",
+    body: "",
+    url: "",
+    quoteText: "",
+    status: "published",
+    featured: false,
+    pinned: false,
+    rating: 0,
+    collectionId: 0,
+    mediaIds: [],
+    _composeLoading: false,
+    _showRating: false,
+    _showCollection: false,
+  }).replace(/</g, "\\u003c");
+
+  return (
+    <dialog
+      id="compose-dialog"
+      class="compose-dialog backdrop:bg-black/50"
+      onclick="event.target === this && this.close()"
+    >
+      <div class="compose-dialog-inner">
+        {/* Header */}
+        <header class="compose-dialog-header">
+          <button
+            type="button"
+            class="compose-dialog-close"
+            onclick="this.closest('dialog').close()"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M18 6 6 18" />
+              <path d="M6 6l12 12" />
+            </svg>
+          </button>
+          <h2 class="compose-dialog-title">
+            {t({
+              message: "New Post",
+              comment: "@context: Compose dialog title",
+            })}
+          </h2>
+          <div class="w-5" />
+        </header>
+
+        {/* Form */}
+        <section class="compose-dialog-body">
+          <form
+            data-signals={signals}
+            data-on:submit__prevent="@post('/compose')"
+            data-indicator="_composeLoading"
+            class="flex flex-col gap-3"
+          >
+            {/* Format tabs */}
+            <div class="compose-format-tabs">
+              <button
+                type="button"
+                class="compose-format-tab"
+                data-class-compose-format-tab-active="$format === 'note'"
+                data-on:click="$format = 'note'"
+              >
+                {t({
+                  message: "Note",
+                  comment: "@context: Compose format tab",
+                })}
+              </button>
+              <button
+                type="button"
+                class="compose-format-tab"
+                data-class-compose-format-tab-active="$format === 'link'"
+                data-on:click="$format = 'link'"
+              >
+                {t({
+                  message: "Link",
+                  comment: "@context: Compose format tab",
+                })}
+              </button>
+              <button
+                type="button"
+                class="compose-format-tab"
+                data-class-compose-format-tab-active="$format === 'quote'"
+                data-on:click="$format = 'quote'"
+              >
+                {t({
+                  message: "Quote",
+                  comment: "@context: Compose format tab",
+                })}
+              </button>
+            </div>
+
+            {/* Title input */}
+            <input
+              type="text"
+              data-bind="title"
+              class="compose-title-input"
+              placeholder={t({
+                message: "Title (optional)",
+                comment: "@context: Compose title placeholder",
+              })}
+            />
+
+            {/* Body textarea */}
+            <textarea
+              data-bind="body"
+              class="compose-body-input"
+              placeholder={t({
+                message: "What's on your mind?",
+                comment: "@context: Compose body placeholder",
+              })}
+              rows={4}
+            />
+
+            {/* URL input (link/quote) */}
+            <div data-show="$format === 'link' || $format === 'quote'">
+              <input
+                type="url"
+                data-bind="url"
+                class="input text-sm"
+                placeholder="https://..."
+              />
+            </div>
+
+            {/* Quote text (quote format) */}
+            <div data-show="$format === 'quote'">
+              <textarea
+                data-bind="quoteText"
+                class="textarea text-sm"
+                placeholder={t({
+                  message: "The text being quoted...",
+                  comment: "@context: Compose quote text placeholder",
+                })}
+                rows={2}
+              />
+            </div>
+
+            {/* Rating picker (toggleable) */}
+            <div data-show="$_showRating" class="field">
+              <label class="label text-sm">
+                {t({
+                  message: "Rating",
+                  comment: "@context: Compose rating field",
+                })}
+              </label>
+              <select data-bind="rating" class="select text-sm">
+                <option value="0">
+                  {t({
+                    message: "None",
+                    comment: "@context: No rating selected",
+                  })}
+                </option>
+                <option value="1">1</option>
+                <option value="2">2</option>
+                <option value="3">3</option>
+                <option value="4">4</option>
+                <option value="5">5</option>
+              </select>
+            </div>
+
+            {/* Collection picker (toggleable) */}
+            {collections && collections.length > 0 && (
+              <div data-show="$_showCollection" class="field">
+                <label class="label text-sm">
+                  {t({
+                    message: "Collection",
+                    comment: "@context: Compose collection field",
+                  })}
+                </label>
+                <select data-bind="collectionId" class="select text-sm">
+                  <option value="0">
+                    {t({
+                      message: "None",
+                      comment: "@context: No collection selected",
+                    })}
+                  </option>
+                  {collections.map((col) => (
+                    <option key={col.id} value={col.id}>
+                      {col.title}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
+
+            {/* Toolbar */}
+            <div class="compose-toolbar">
+              <div class="flex gap-1">
+                {/* Media button */}
+                <button
+                  type="button"
+                  class="compose-toolbar-btn"
+                  title={t({
+                    message: "Add Media",
+                    comment: "@context: Compose toolbar - add media",
+                  })}
+                  data-on:click="document.getElementById('compose-media-picker').showModal(); fetch('/dash/media/picker').then(r => r.text()).then(html => document.getElementById('compose-media-grid').innerHTML = html)"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+                    <circle cx="9" cy="9" r="2" />
+                    <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+                  </svg>
+                </button>
+
+                {/* Rating toggle */}
+                <button
+                  type="button"
+                  class="compose-toolbar-btn"
+                  title={t({
+                    message: "Rating",
+                    comment: "@context: Compose toolbar - toggle rating",
+                  })}
+                  data-on:click="$_showRating = !$_showRating"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+                  </svg>
+                </button>
+
+                {/* Collection toggle */}
+                {collections && collections.length > 0 && (
+                  <button
+                    type="button"
+                    class="compose-toolbar-btn"
+                    title={t({
+                      message: "Collection",
+                      comment: "@context: Compose toolbar - toggle collection",
+                    })}
+                    data-on:click="$_showCollection = !$_showCollection"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="18"
+                      height="18"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    >
+                      <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+                    </svg>
+                  </button>
+                )}
+              </div>
+            </div>
+
+            {/* Footer: checkboxes + submit */}
+            <div class="compose-dialog-footer">
+              <div class="flex gap-3">
+                <label class="flex items-center gap-1.5 text-xs text-muted-foreground">
+                  <input
+                    type="checkbox"
+                    class="checkbox"
+                    data-bind="featured"
+                  />
+                  {t({
+                    message: "Featured",
+                    comment: "@context: Compose checkbox - mark as featured",
+                  })}
+                </label>
+                <label class="flex items-center gap-1.5 text-xs text-muted-foreground">
+                  <input type="checkbox" class="checkbox" data-bind="pinned" />
+                  {t({
+                    message: "Pinned",
+                    comment: "@context: Compose checkbox - pin to top",
+                  })}
+                </label>
+              </div>
+              <div class="flex gap-2">
+                <button
+                  type="button"
+                  class="btn-outline text-sm"
+                  data-attr-disabled="$_composeLoading"
+                  data-on:click="$status = 'draft'; document.querySelector('#compose-dialog form').requestSubmit()"
+                >
+                  <span data-show="!$_composeLoading">
+                    {t({
+                      message: "Draft",
+                      comment: "@context: Compose button - save as draft",
+                    })}
+                  </span>
+                  <span data-show="$_composeLoading">...</span>
+                </button>
+                <button
+                  type="submit"
+                  class="btn text-sm"
+                  data-attr-disabled="$_composeLoading"
+                >
+                  <span data-show="!$_composeLoading">
+                    {t({
+                      message: "Post",
+                      comment: "@context: Compose button - publish post",
+                    })}
+                  </span>
+                  <span data-show="$_composeLoading">
+                    {t({
+                      message: "Posting...",
+                      comment: "@context: Compose loading text while posting",
+                    })}
+                  </span>
+                </button>
+              </div>
+            </div>
+          </form>
+        </section>
+      </div>
+
+      {/* Nested media picker dialog */}
+      <dialog
+        id="compose-media-picker"
+        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="compose-media-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>
+    </dialog>
+  );
+};