@jant/core 0.0.1

package/src/theme/components/DangerZone.tsx

@@ -0,0 +1,77 @@
+/**
+ * Danger Zone Component
+ *
+ * Displays a section for destructive actions (like delete) with
+ * consistent styling and confirmation prompts
+ */
+
+import type { FC, PropsWithChildren } from "hono/jsx";
+import { useLingui } from "../../i18n/index.js";
+
+export interface DangerZoneProps extends PropsWithChildren {
+  /**
+   * Title for the danger zone section
+   * @default "Danger Zone"
+   */
+  title?: string;
+
+  /**
+   * Optional description or warning text
+   */
+  description?: string;
+
+  /**
+   * Label for the destructive action button
+   */
+  actionLabel: string;
+
+  /**
+   * Form action URL for the destructive operation
+   */
+  formAction: string;
+
+  /**
+   * Confirmation message to show before executing action
+   */
+  confirmMessage?: string;
+
+  /**
+   * Whether the action button should be disabled
+   */
+  disabled?: boolean;
+}
+
+export const DangerZone: FC<DangerZoneProps> = ({
+  title,
+  description,
+  actionLabel,
+  formAction,
+  confirmMessage,
+  disabled = false,
+  children,
+}) => {
+  const { t } = useLingui();
+
+  const defaultTitle = t({
+    message: "Danger Zone",
+    comment: "@context: Section heading for dangerous/destructive actions",
+  });
+
+  return (
+    <div class="mt-8 pt-8 border-t">
+      <h2 class="text-lg font-medium text-destructive mb-4">{title || defaultTitle}</h2>
+      {description && <p class="text-sm text-muted-foreground mb-4">{description}</p>}
+      {children}
+      <form method="post" action={formAction}>
+        <button
+          type="submit"
+          class="btn-destructive"
+          disabled={disabled}
+          onclick={confirmMessage ? `return confirm('${confirmMessage}')` : undefined}
+        >
+          {actionLabel}
+        </button>
+      </form>
+    </div>
+  );
+};

package/src/theme/components/EmptyState.tsx

@@ -0,0 +1,56 @@
+/**
+ * Empty State Component
+ *
+ * Displays a message when a list or collection has no items,
+ * optionally with a call-to-action button
+ */
+
+import type { FC } from "hono/jsx";
+
+export interface EmptyStateProps {
+  /**
+   * Message to display when empty
+   */
+  message: string;
+
+  /**
+   * Optional call-to-action button text
+   */
+  ctaText?: string;
+
+  /**
+   * Optional call-to-action button href
+   */
+  ctaHref?: string;
+
+  /**
+   * Whether to center the content with padding (default: true)
+   */
+  centered?: boolean;
+}
+
+export const EmptyState: FC<EmptyStateProps> = ({
+  message,
+  ctaText,
+  ctaHref,
+  centered = true,
+}) => {
+  if (!centered) {
+    return (
+      <p class="text-muted-foreground">
+        {message}
+      </p>
+    );
+  }
+
+  return (
+    <div class="text-center py-12 text-muted-foreground">
+      <p>{message}</p>
+      {ctaText && ctaHref && (
+        <a href={ctaHref} class="btn mt-4">
+          {ctaText}
+        </a>
+      )}
+    </div>
+  );
+};

package/src/theme/components/ListItemRow.tsx

@@ -0,0 +1,24 @@
+/**
+ * List Item Row Component
+ *
+ * Provides consistent layout for list items in dashboard CRUD pages.
+ * Handles responsive spacing, overflow, and action button placement.
+ */
+
+import type { FC, PropsWithChildren } from "hono/jsx";
+
+export interface ListItemRowProps extends PropsWithChildren {
+  /**
+   * Action buttons to display on the right side
+   */
+  actions?: unknown;
+}
+
+export const ListItemRow: FC<ListItemRowProps> = ({ children, actions }) => {
+  return (
+    <div class="py-4 flex items-start gap-4">
+      <div class="flex-1 min-w-0">{children}</div>
+      {actions && <div class="flex items-center gap-2">{actions}</div>}
+    </div>
+  );
+};

package/src/theme/components/PageForm.tsx

@@ -0,0 +1,114 @@
+/**
+ * Page Creation/Edit Form
+ *
+ * For managing custom pages (posts with type="page")
+ */
+
+import type { FC } from "hono/jsx";
+import type { Post } from "../../types.js";
+import { useLingui } from "../../i18n/index.js";
+
+export interface PageFormProps {
+  page?: Post;
+  action: string;
+  cancelUrl?: string;
+}
+
+export const PageForm: FC<PageFormProps> = ({
+  page,
+  action,
+  cancelUrl = "/dash/pages",
+}) => {
+  const { t } = useLingui();
+  const isEdit = !!page;
+
+  return (
+    <form method="post" action={action} class="flex flex-col gap-4">
+      {/* Hidden type field */}
+      <input type="hidden" name="type" value="page" />
+
+      {/* Title */}
+      <div class="field">
+        <label class="label">
+          {t({ message: "Title", comment: "@context: Page form field label - title" })}
+        </label>
+        <input
+          type="text"
+          name="title"
+          class="input"
+          placeholder={t({ message: "Page title...", comment: "@context: Page title placeholder" })}
+          value={page?.title ?? ""}
+          required
+        />
+      </div>
+
+      {/* Path */}
+      <div class="field">
+        <label class="label">
+          {t({ message: "Path", comment: "@context: Page form field label - URL path" })}
+        </label>
+        <div class="flex items-center gap-2">
+          <span class="text-muted-foreground">/</span>
+          <input
+            type="text"
+            name="path"
+            class="input flex-1"
+            placeholder="about"
+            value={page?.path ?? ""}
+            pattern="[a-z0-9\-]+"
+            title={t({ message: "Lowercase letters, numbers, and hyphens only", comment: "@context: Page path validation message" })}
+            required
+          />
+        </div>
+        <p class="text-xs text-muted-foreground mt-1">
+          {t({ message: "The URL path for this page. Use lowercase letters, numbers, and hyphens.", comment: "@context: Page path helper text" })}
+        </p>
+      </div>
+
+      {/* Content */}
+      <div class="field">
+        <label class="label">
+          {t({ message: "Content", comment: "@context: Page form field label - content" })}
+        </label>
+        <textarea
+          name="content"
+          class="textarea min-h-48"
+          placeholder={t({ message: "Page content (Markdown supported)...", comment: "@context: Page content placeholder" })}
+          required
+        >
+          {page?.content ?? ""}
+        </textarea>
+      </div>
+
+      {/* Visibility */}
+      <div class="field">
+        <label class="label">
+          {t({ message: "Status", comment: "@context: Page form field label - publish status" })}
+        </label>
+        <select name="visibility" class="select">
+          <option value="unlisted" selected={page?.visibility === "unlisted" || !page}>
+            {t({ message: "Published", comment: "@context: Page status option - published" })}
+          </option>
+          <option value="draft" selected={page?.visibility === "draft"}>
+            {t({ message: "Draft", comment: "@context: Page status option - draft" })}
+          </option>
+        </select>
+        <p class="text-xs text-muted-foreground mt-1">
+          {t({ message: "Published pages are accessible via their path. Drafts are not visible.", comment: "@context: Page status helper text" })}
+        </p>
+      </div>
+
+      {/* Submit */}
+      <div class="flex gap-2">
+        <button type="submit" class="btn">
+          {isEdit
+            ? t({ message: "Update Page", comment: "@context: Button to update existing page" })
+            : t({ message: "Create Page", comment: "@context: Button to create new page" })}
+        </button>
+        <a href={cancelUrl} class="btn-outline">
+          {t({ message: "Cancel", comment: "@context: Button to cancel and go back" })}
+        </a>
+      </div>
+    </form>
+  );
+};

package/src/theme/components/Pagination.tsx

@@ -0,0 +1,196 @@
+/**
+ * Pagination Component
+ *
+ * Cursor-based pagination for post lists
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "../../i18n/index.js";
+
+export interface PaginationProps {
+  /** Base URL for pagination links (e.g., "/archive", "/search?q=test") */
+  baseUrl: string;
+  /** Whether there are more items after the current page */
+  hasMore: boolean;
+  /** Cursor for the next page (typically the last item's ID) */
+  nextCursor?: number | string;
+  /** Cursor for the previous page */
+  prevCursor?: number | string;
+  /** Parameter name for cursor (default: "cursor") */
+  cursorParam?: string;
+}
+
+export const Pagination: FC<PaginationProps> = ({
+  baseUrl,
+  hasMore,
+  nextCursor,
+  prevCursor,
+  cursorParam = "cursor",
+}) => {
+  const { t } = useLingui();
+  const hasPrev = prevCursor !== undefined;
+  const hasNext = hasMore && nextCursor !== undefined;
+
+  if (!hasPrev && !hasNext) {
+    return null;
+  }
+
+  // Build URL with cursor parameter
+  const buildUrl = (cursor: number | string) => {
+    const url = new URL(baseUrl, "http://localhost");
+    url.searchParams.set(cursorParam, String(cursor));
+    return `${url.pathname}${url.search}`;
+  };
+
+  const prevText = t({ message: "Previous", comment: "@context: Pagination button - previous page" });
+  const nextText = t({ message: "Next", comment: "@context: Pagination button - next page" });
+
+  return (
+    <nav class="flex items-center justify-between py-4" aria-label="Pagination">
+      <div>
+        {hasPrev ? (
+          <a
+            href={buildUrl(prevCursor)}
+            class="btn-outline text-sm"
+          >
+            ← {prevText}
+          </a>
+        ) : (
+          <span class="btn-outline text-sm opacity-50 cursor-not-allowed">
+            ← {prevText}
+          </span>
+        )}
+      </div>
+
+      <div>
+        {hasNext ? (
+          <a
+            href={buildUrl(nextCursor)}
+            class="btn-outline text-sm"
+          >
+            {nextText} →
+          </a>
+        ) : (
+          <span class="btn-outline text-sm opacity-50 cursor-not-allowed">
+            {nextText} →
+          </span>
+        )}
+      </div>
+    </nav>
+  );
+};
+
+/**
+ * Simple "Load More" style pagination
+ */
+export interface LoadMoreProps {
+  /** URL for loading more items */
+  href: string;
+  /** Whether there are more items to load */
+  hasMore: boolean;
+  /** Button text */
+  text?: string;
+}
+
+export const LoadMore: FC<LoadMoreProps> = ({
+  href,
+  hasMore,
+  text,
+}) => {
+  const { t } = useLingui();
+  if (!hasMore) {
+    return null;
+  }
+
+  const buttonText = text ?? t({ message: "Load more", comment: "@context: Pagination button - load more items" });
+
+  return (
+    <div class="text-center py-4">
+      <a href={href} class="btn-outline">
+        {buttonText}
+      </a>
+    </div>
+  );
+};
+
+/**
+ * Page-based pagination (for search results etc.)
+ */
+export interface PagePaginationProps {
+  /** Base URL (query params will be added) */
+  baseUrl: string;
+  /** Current page (1-indexed) */
+  currentPage: number;
+  /** Whether there are more pages */
+  hasMore: boolean;
+  /** Page parameter name (default: "page") */
+  pageParam?: string;
+}
+
+export const PagePagination: FC<PagePaginationProps> = ({
+  baseUrl,
+  currentPage,
+  hasMore,
+  pageParam = "page",
+}) => {
+  const { t } = useLingui();
+  const hasPrev = currentPage > 1;
+  const hasNext = hasMore;
+
+  if (!hasPrev && !hasNext) {
+    return null;
+  }
+
+  // Build URL with page parameter
+  const buildUrl = (page: number) => {
+    const url = new URL(baseUrl, "http://localhost");
+    if (page > 1) {
+      url.searchParams.set(pageParam, String(page));
+    } else {
+      url.searchParams.delete(pageParam);
+    }
+    return `${url.pathname}${url.search}`;
+  };
+
+  const prevText = t({ message: "Previous", comment: "@context: Pagination button - previous page" });
+  const nextText = t({ message: "Next", comment: "@context: Pagination button - next page" });
+  const pageText = t({ message: "Page {page}", comment: "@context: Pagination - current page indicator", values: { page: String(currentPage) } });
+
+  return (
+    <nav class="flex items-center justify-between py-4" aria-label="Pagination">
+      <div>
+        {hasPrev ? (
+          <a
+            href={buildUrl(currentPage - 1)}
+            class="btn-outline text-sm"
+          >
+            ← {prevText}
+          </a>
+        ) : (
+          <span class="btn-outline text-sm opacity-50 cursor-not-allowed">
+            ← {prevText}
+          </span>
+        )}
+      </div>
+
+      <span class="text-sm text-muted-foreground">
+        {pageText}
+      </span>
+
+      <div>
+        {hasNext ? (
+          <a
+            href={buildUrl(currentPage + 1)}
+            class="btn-outline text-sm"
+          >
+            {nextText} →
+          </a>
+        ) : (
+          <span class="btn-outline text-sm opacity-50 cursor-not-allowed">
+            {nextText} →
+          </span>
+        )}
+      </div>
+    </nav>
+  );
+};

package/src/theme/components/PostForm.tsx

@@ -0,0 +1,122 @@
+/**
+ * Post Creation/Edit Form
+ */
+
+import type { FC } from "hono/jsx";
+import type { Post } from "../../types.js";
+import { useLingui } from "../../i18n/index.js";
+
+export interface PostFormProps {
+  post?: Post;
+  action: string;
+  method?: "get" | "post";
+}
+
+export const PostForm: FC<PostFormProps> = ({ post, action, method = "post" }) => {
+  const { t } = useLingui();
+  const isEdit = !!post;
+
+  return (
+    <form method={method} action={action} class="flex flex-col gap-4">
+      {/* Type selector */}
+      <div class="field">
+        <label class="label">{t({ message: "Type", comment: "@context: Post form field - post type" })}</label>
+        <select name="type" class="select" required>
+          <option value="note" selected={post?.type === "note"}>
+            {t({ message: "Note", comment: "@context: Post type option" })}
+          </option>
+          <option value="article" selected={post?.type === "article"}>
+            {t({ message: "Article", comment: "@context: Post type 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>
+        </select>
+      </div>
+
+      {/* Title (optional) */}
+      <div class="field">
+        <label class="label">{t({ message: "Title (optional)", comment: "@context: Post form field" })}</label>
+        <input
+          type="text"
+          name="title"
+          class="input"
+          placeholder={t({ message: "Post title...", comment: "@context: Post title placeholder" })}
+          value={post?.title ?? ""}
+        />
+      </div>
+
+      {/* Content */}
+      <div class="field">
+        <label class="label">{t({ message: "Content", comment: "@context: Post form field" })}</label>
+        <textarea
+          name="content"
+          class="textarea min-h-32"
+          placeholder={t({ message: "What's on your mind?", comment: "@context: Post content placeholder" })}
+          required
+        >
+          {post?.content ?? ""}
+        </textarea>
+      </div>
+
+      {/* Source URL (for link/quote types) */}
+      <div class="field">
+        <label class="label">{t({ message: "Source URL (optional)", comment: "@context: Post form field" })}</label>
+        <input
+          type="url"
+          name="sourceUrl"
+          class="input"
+          placeholder="https://..."
+          value={post?.sourceUrl ?? ""}
+        />
+      </div>
+
+      {/* Visibility */}
+      <div class="field">
+        <label class="label">{t({ message: "Visibility", comment: "@context: Post form field" })}</label>
+        <select name="visibility" class="select">
+          <option value="quiet" selected={post?.visibility === "quiet" || !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" })}
+          </option>
+          <option value="unlisted" selected={post?.visibility === "unlisted"}>
+            {t({ message: "Unlisted", comment: "@context: Post visibility option" })}
+          </option>
+          <option value="draft" selected={post?.visibility === "draft"}>
+            {t({ message: "Draft", comment: "@context: Post visibility option" })}
+          </option>
+        </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"
+          name="path"
+          class="input"
+          placeholder="my-custom-url"
+          value={post?.path ?? ""}
+        />
+      </div>
+
+      {/* Submit */}
+      <div class="flex gap-2">
+        <button type="submit" class="btn">
+          {isEdit ? t({ message: "Update", comment: "@context: Button to update existing post" }) : t({ message: "Publish", comment: "@context: Button to publish new post" })}
+        </button>
+        <a href="/dash/posts" class="btn-outline">
+          {t({ message: "Cancel", comment: "@context: Button to cancel form" })}
+        </a>
+      </div>
+    </form>
+  );
+};

package/src/theme/components/PostList.tsx

@@ -0,0 +1,68 @@
+/**
+ * Post List Component
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "../../i18n/index.js";
+import type { Post } from "../../types.js";
+import * as sqid from "../../lib/sqid.js";
+import * as time from "../../lib/time.js";
+import { VisibilityBadge } from "./VisibilityBadge.js";
+import { TypeBadge } from "./TypeBadge.js";
+import { EmptyState } from "./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) => (
+        <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={`/p/${sqid.encode(post.id)}`}
+              viewLabel={t({ message: "View", comment: "@context: Button to view post on public site" })}
+            />
+          }
+        >
+          <div class="flex items-center gap-2 mb-1">
+            <TypeBadge type={post.type} />
+            <VisibilityBadge visibility={post.visibility} />
+            <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.content?.slice(0, 60) || t({ message: "Untitled", comment: "@context: Default title for untitled post" })}
+          </a>
+          {post.content && !post.title && (
+            <p class="text-sm text-muted-foreground mt-1 line-clamp-2">
+              {post.content.slice(0, 120)}
+            </p>
+          )}
+        </ListItemRow>
+      ))}
+    </div>
+  );
+};