@jant/core 0.3.24 → 0.3.25

package/src/ui/compose/ComposePrompt.tsx

@@ -0,0 +1,55 @@
+/**
+ * Compose Prompt
+ *
+ * "What's new?" prompt bar at the top of the content area.
+ * Clicking it opens the compose dialog.
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+
+export const ComposePrompt: FC = () => {
+  const { t } = useLingui();
+
+  return (
+    <div class="compose-prompt">
+      <button
+        type="button"
+        class="compose-prompt-trigger"
+        onclick="document.getElementById('compose-dialog').showModal()"
+      >
+        <span class="compose-prompt-avatar">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 1 1 3.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+          </svg>
+        </span>
+        <span class="compose-prompt-text">
+          {t({
+            message: "What's new?",
+            comment: "@context: Compose prompt placeholder text",
+          })}
+        </span>
+      </button>
+      <button
+        type="button"
+        class="compose-prompt-post-btn"
+        onclick="document.getElementById('compose-dialog').showModal()"
+      >
+        {t({
+          message: "Post",
+          comment: "@context: Compose prompt post button",
+        })}
+      </button>
+    </div>
+  );
+};

package/src/{theme/components/TypeBadge.tsx → ui/dash/FormatBadge.tsx}

@@ -2,18 +2,17 @@
  * Format Badge Component
  *
  * Displays a badge indicating the format of a post (note, link, quote).
- * Named TypeBadge for backward compatibility with theme overrides.
  */
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
 import type { Format } from "../../types.js";
 
-export interface TypeBadgeProps {
+export interface FormatBadgeProps {
   type: Format;
 }
 
-export const TypeBadge: FC<TypeBadgeProps> = ({ type }) => {
+export const FormatBadge: FC<FormatBadgeProps> = ({ type }) => {
   const { t } = useLingui();
 
   const labels: Record<Format, string> = {

package/src/{theme/components → ui/dash}/PostForm.tsx

@@ -41,7 +41,6 @@ export const PostForm: FC<PostFormProps> = ({
     body: post?.body ?? "",
     url: post?.url ?? "",
     quoteText: post?.quoteText ?? "",
-    slug: post?.slug ?? "",
     status: post?.status ?? "published",
     featured: post?.featured === 1,
     pinned: post?.pinned === 1,
@@ -287,30 +286,6 @@ export const PostForm: FC<PostFormProps> = ({
         </div>
       )}
 
-      {/* Custom slug (optional) */}
-      <div class="field">
-        <label class="label">
-          {t({
-            message: "Custom Slug (optional)",
-            comment: "@context: Post form field",
-          })}
-        </label>
-        <input
-          type="text"
-          data-bind="slug"
-          class="input"
-          placeholder="my-custom-url"
-          pattern="[a-z0-9-]*"
-        />
-        <p class="text-xs text-muted-foreground mt-1">
-          {t({
-            message:
-              "Custom URL path. Leave empty to use default /p/ID format.",
-            comment: "@context: Slug help text",
-          })}
-        </p>
-      </div>
-
       {/* Submit */}
       <div class="flex gap-2">
         <button type="submit" class="btn" data-attr-disabled="$_loading">

package/src/{theme/components → ui/dash}/PostList.tsx

@@ -7,9 +7,9 @@ import { useLingui } from "@lingui/react/macro";
 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 { StatusBadge } from "./StatusBadge.js";
+import { FormatBadge } from "./FormatBadge.js";
+import { EmptyState } from "../shared/EmptyState.js";
 import { ListItemRow } from "./ListItemRow.js";
 import { ActionButtons } from "./ActionButtons.js";
 
@@ -38,8 +38,8 @@ export const PostList: FC<PostListProps> = ({ posts }) => {
   return (
     <div class="flex flex-col divide-y">
       {posts.map((post) => {
-        const permalink = post.slug
-          ? `/${post.slug}`
+        const permalink = post.path
+          ? `/${post.path}`
           : `/p/${sqid.encode(post.id)}`;
         return (
           <ListItemRow
@@ -67,8 +67,8 @@ export const PostList: FC<PostListProps> = ({ posts }) => {
             }
           >
             <div class="flex items-center gap-2 mb-1">
-              <TypeBadge type={post.format} />
-              <VisibilityBadge
+              <FormatBadge type={post.format} />
+              <StatusBadge
                 status={post.status}
                 featured={post.featured === 1}
                 pinned={post.pinned === 1}

package/src/{theme/components/VisibilityBadge.tsx → ui/dash/StatusBadge.tsx}

@@ -2,20 +2,19 @@
  * Status Badge Component
  *
  * Displays badges for post status, featured, and pinned state.
- * Named VisibilityBadge for backward compatibility with theme overrides.
  */
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
 import type { Status } from "../../types.js";
 
-export interface VisibilityBadgeProps {
+export interface StatusBadgeProps {
   status: Status;
   featured?: boolean;
   pinned?: boolean;
 }
 
-export const VisibilityBadge: FC<VisibilityBadgeProps> = ({
+export const StatusBadge: FC<StatusBadgeProps> = ({
   status,
   featured,
   pinned,

package/src/ui/dash/index.ts

@@ -0,0 +1,10 @@
+export { ActionButtons, type ActionButtonsProps } from "./ActionButtons.js";
+export { CrudPageHeader, type CrudPageHeaderProps } from "./CrudPageHeader.js";
+export { DangerZone, type DangerZoneProps } from "./DangerZone.js";
+export { EmptyState, type EmptyStateProps } from "../shared/EmptyState.js";
+export { FormatBadge, type FormatBadgeProps } from "./FormatBadge.js";
+export { ListItemRow, type ListItemRowProps } from "./ListItemRow.js";
+export { PageForm, type PageFormProps } from "./PageForm.js";
+export { PostForm, type PostFormProps } from "./PostForm.js";
+export { PostList, type PostListProps } from "./PostList.js";
+export { StatusBadge, type StatusBadgeProps } from "./StatusBadge.js";

package/src/{themes/threads/timeline → ui/feed}/LinkCard.tsx

@@ -1,11 +1,11 @@
 /**
- * Threads Theme - Link Card
+ * Link Card
  *
  * Compact link preview box — date is shown at the feed level as a group header.
  */
 
 import type { FC } from "hono/jsx";
-import type { TimelineCardProps } from "../../../types.js";
+import type { TimelineCardProps } from "../../types.js";
 
 export const LinkCard: FC<TimelineCardProps> = ({ post, compact }) => {
   // Extract domain from URL for display
@@ -19,7 +19,11 @@ export const LinkCard: FC<TimelineCardProps> = ({ post, compact }) => {
   }
 
   return (
-    <article class={`h-entry${compact ? " threads-compact" : ""}`}>
+    <article
+      class={`h-entry${compact ? " feed-compact" : ""}`}
+      data-post
+      data-format="link"
+    >
       {domain && (
         <div class="text-xs text-muted-foreground mb-1 flex items-center gap-1">
           <svg
@@ -52,10 +56,11 @@ export const LinkCard: FC<TimelineCardProps> = ({ post, compact }) => {
       {!compact && post.bodyHtml && (
         <div
           class="e-content prose text-muted-foreground"
+          data-post-body
           dangerouslySetInnerHTML={{ __html: post.bodyHtml }}
         />
       )}
-      <footer class="mt-2 text-xs text-muted-foreground">
+      <footer class="mt-2 text-xs text-muted-foreground" data-post-meta>
         <a href={post.permalink} class="hover:underline">
           <time class="dt-published" datetime={post.publishedAt}>
             {post.publishedAtFormatted}

package/src/{themes/threads/timeline → ui/feed}/NoteCard.tsx

@@ -1,20 +1,24 @@
 /**
- * Threads Theme - Note Card
+ * Note Card
  *
- * Without title: plain text note — date is shown at the feed level as a group header.
+ * Without title: plain text note with full date in footer.
  * With title: article-style rendering with summary excerpt and "Read more" link.
  */
 
 import type { FC } from "hono/jsx";
-import type { TimelineCardProps } from "../../../types.js";
-import { MediaGallery } from "../../../theme/index.js";
+import type { TimelineCardProps } from "../../types.js";
+import { MediaGallery } from "../shared/MediaGallery.js";
 
 export const NoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
   const isArticle = !!post.title;
   const displayHtml = isArticle ? post.summaryHtml : post.bodyHtml;
 
   return (
-    <article class={`h-entry${compact ? " threads-compact" : ""}`}>
+    <article
+      class={`h-entry${compact ? " feed-compact" : ""}`}
+      data-post
+      data-format="note"
+    >
       {isArticle && (
         <h2
           class={`p-name font-semibold ${compact ? "text-sm" : "text-base"} mb-1`}
@@ -27,11 +31,12 @@ export const NoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
       {displayHtml && (
         <div
           class={`e-content prose ${compact ? "prose-sm" : isArticle ? "text-muted-foreground" : ""}`}
+          data-post-body
           dangerouslySetInnerHTML={{ __html: displayHtml }}
         />
       )}
       {!compact && post.media.length > 0 && (
-        <div class="threads-media mt-3">
+        <div class="mt-3" data-post-media>
           <MediaGallery attachments={post.media} />
         </div>
       )}
@@ -43,13 +48,13 @@ export const NoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
           Read more →
         </a>
       )}
-      <footer class="mt-2">
+      <footer class="mt-2" data-post-meta>
         <a
           href={post.permalink}
           class="u-url text-xs text-muted-foreground hover:underline"
         >
           <time class="dt-published" datetime={post.publishedAt}>
-            {post.publishedAtRelative}
+            {post.publishedAtFormatted}
           </time>
         </a>
       </footer>

package/src/{themes/threads/timeline → ui/feed}/QuoteCard.tsx

@@ -1,9 +1,9 @@
 /**
- * Threads Theme - Quote Card
+ * Quote Card
  *
- * Left-border accent blockquote — date is shown at the feed level as a group header.
+ * Left-border accent blockquote with full date in footer.
  *
- * v2 fields:
+ * Fields:
  * - quoteText: the quoted text
  * - title: attribution (who said it)
  * - url: source link
@@ -11,13 +11,17 @@
  */
 
 import type { FC } from "hono/jsx";
-import type { TimelineCardProps } from "../../../types.js";
+import type { TimelineCardProps } from "../../types.js";
 
 export const QuoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
   return (
-    <article class={`h-entry${compact ? " threads-compact" : ""}`}>
+    <article
+      class={`h-entry${compact ? " feed-compact" : ""}`}
+      data-post
+      data-format="quote"
+    >
       {post.quoteText && (
-        <blockquote class="threads-quote">
+        <blockquote class="feed-quote">
           <div
             class={`e-content ${compact ? "text-sm" : "text-base"} leading-relaxed`}
           >
@@ -45,16 +49,17 @@ export const QuoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
       {!compact && post.bodyHtml && (
         <div
           class="mt-3 prose text-muted-foreground"
+          data-post-body
           dangerouslySetInnerHTML={{ __html: post.bodyHtml }}
         />
       )}
-      <footer class="mt-2">
+      <footer class="mt-2" data-post-meta>
         <a
           href={post.permalink}
           class="u-url text-xs text-muted-foreground hover:underline"
         >
           <time class="dt-published" datetime={post.publishedAt}>
-            {post.publishedAtRelative}
+            {post.publishedAtFormatted}
           </time>
         </a>
       </footer>

package/src/{themes/threads/timeline → ui/feed}/ThreadPreview.tsx

@@ -1,12 +1,12 @@
 /**
- * Threads Theme - Thread Preview
+ * Thread Preview
  *
  * Root post + vertical line connector + compact replies underneath.
  */
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
-import type { ThreadPreviewProps } from "../../../types.js";
+import type { ThreadPreviewProps } from "../../types.js";
 import { TimelineItem } from "./TimelineItem.js";
 import { TimelineItemFromPost } from "./TimelineItem.js";
 
@@ -14,23 +14,22 @@ export const ThreadPreview: FC<ThreadPreviewProps> = ({
   rootPost,
   previewReplies,
   totalReplyCount,
-  theme,
 }) => {
   const { t } = useLingui();
   const remainingCount = totalReplyCount - previewReplies.length;
 
   return (
     <div>
-      <TimelineItem item={{ post: rootPost }} theme={theme} />
+      <TimelineItem item={{ post: rootPost }} />
       {previewReplies.length > 0 && (
-        <div class="threads-replies">
+        <div class="feed-replies">
           {previewReplies.map((reply) => (
-            <div key={reply.id} class="threads-reply">
-              <TimelineItemFromPost post={reply} compact theme={theme} />
+            <div key={reply.id} class="feed-reply">
+              <TimelineItemFromPost post={reply} compact />
             </div>
           ))}
           {remainingCount > 0 && (
-            <div class="threads-reply">
+            <div class="feed-reply">
               <a
                 href={rootPost.permalink}
                 class="text-sm text-muted-foreground hover:text-foreground hover:underline"

package/src/ui/feed/TimelineFeed.tsx

@@ -0,0 +1,49 @@
+/**
+ * Timeline Feed
+ *
+ * Flat list of posts separated by simple dividers.
+ */
+
+import type { FC } from "hono/jsx";
+import type { TimelineFeedProps } from "../../types.js";
+import { TimelineItem } from "./TimelineItem.js";
+import { ThreadPreview } from "./ThreadPreview.js";
+import { PagePagination } from "../shared/Pagination.js";
+
+export const TimelineFeed: FC<TimelineFeedProps> = ({
+  items,
+  currentPage,
+  totalPages,
+}) => {
+  return (
+    <div data-feed>
+      <div id="timeline-feed">
+        <div id="timeline-items" class="flex flex-col">
+          {items.map((item, i) => (
+            <div key={item.post.id}>
+              {i > 0 && <hr class="feed-divider" />}
+              {item.threadPreview ? (
+                <ThreadPreview
+                  rootPost={item.post}
+                  previewReplies={item.threadPreview.replies}
+                  totalReplyCount={item.threadPreview.totalReplyCount}
+                />
+              ) : (
+                <TimelineItem item={item} />
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+      {currentPage !== undefined &&
+        totalPages !== undefined &&
+        totalPages > 1 && (
+          <PagePagination
+            baseUrl="/"
+            currentPage={currentPage}
+            totalPages={totalPages}
+          />
+        )}
+    </div>
+  );
+};

package/src/ui/feed/TimelineItem.tsx

@@ -0,0 +1,45 @@
+/**
+ * Timeline Item
+ *
+ * Dispatches to the correct card component based on post format.
+ */
+
+import type { FC } from "hono/jsx";
+import type {
+  TimelineItemView,
+  TimelineCardProps,
+  PostView,
+  Format,
+} from "../../types.js";
+import { NoteCard } from "./NoteCard.js";
+import { LinkCard } from "./LinkCard.js";
+import { QuoteCard } from "./QuoteCard.js";
+
+const CARD_MAP: Record<Format, FC<TimelineCardProps>> = {
+  note: NoteCard,
+  link: LinkCard,
+  quote: QuoteCard,
+};
+
+interface TimelineItemProps {
+  item: TimelineItemView;
+  compact?: boolean;
+}
+
+interface TimelineItemFromPostProps {
+  post: PostView;
+  compact?: boolean;
+}
+
+export const TimelineItem: FC<TimelineItemProps> = ({ item, compact }) => {
+  const Card = CARD_MAP[item.post.format];
+  return <Card post={item.post} compact={compact} />;
+};
+
+export const TimelineItemFromPost: FC<TimelineItemFromPostProps> = ({
+  post,
+  compact,
+}) => {
+  const Card = CARD_MAP[post.format];
+  return <Card post={post} compact={compact} />;
+};

package/src/{theme → ui}/layouts/BaseLayout.tsx

@@ -42,6 +42,12 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
   // Read theme style from Hono context if available
   const themeStyle = c ? c.get("themeStyle") : undefined;
 
+  // Read custom CSS from Hono context if available
+  const customCSS = c ? c.get("customCSS") : undefined;
+
+  // Check authentication status for data attribute
+  const isAuthenticated = c ? c.get("isAuthenticated") : false;
+
   return (
     <html lang={resolvedLang}>
       <head>
@@ -52,9 +58,13 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
         <ViteClient />
         <Link href="/src/style.css" rel="stylesheet" />
         {themeStyle && <style>{themeStyle}</style>}
+        {customCSS && <style>{customCSS}</style>}
         <Script src="/src/client.ts" />
       </head>
-      <body class="bg-background text-foreground antialiased">
+      <body
+        class="bg-background text-foreground antialiased"
+        {...(isAuthenticated ? { "data-authenticated": true } : {})}
+      >
         {content}
         <div id="toast-container" class="toast-container">
           {toast && (

package/src/{theme → ui}/layouts/DashLayout.tsx

@@ -126,16 +126,6 @@ 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/)}

package/src/ui/layouts/SiteLayout.tsx

@@ -0,0 +1,150 @@
+/**
+ * Site Layout
+ *
+ * Vertical header: site name on top, custom nav links below, description under nav.
+ * Content area with browse filter tabs and compose prompt/dialog for authenticated users.
+ */
+
+import type { FC, PropsWithChildren } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type { NavItemView, SiteLayoutProps } from "../../types.js";
+import { ComposeDialog } from "../compose/ComposeDialog.js";
+import { ComposePrompt } from "../compose/ComposePrompt.js";
+
+function HeaderLink({ link }: { link: NavItemView }) {
+  return (
+    <a
+      href={link.url}
+      class={`site-header-link ${link.isActive ? "site-header-link-active" : ""}`}
+      {...(link.isExternal
+        ? { target: "_blank", rel: "noopener noreferrer" }
+        : {})}
+    >
+      {link.label}
+    </a>
+  );
+}
+
+export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
+  siteName,
+  siteDescription,
+  links,
+  currentPath,
+  isAuthenticated,
+  collections,
+  children,
+}) => {
+  const { t } = useLingui();
+
+  const browseLinks = [
+    {
+      href: "/",
+      label: t({
+        message: "Latest",
+        comment: "@context: Browse filter for latest posts",
+      }),
+    },
+    {
+      href: "/featured",
+      label: t({
+        message: "Featured",
+        comment: "@context: Browse filter for featured posts",
+      }),
+    },
+    // {
+    //   href: "/collections",
+    //   label: t({
+    //     message: "Collections",
+    //     comment: "@context: Browse filter for collections",
+    //   }),
+    // },
+    // {
+    //   href: "/archive",
+    //   label: t({
+    //     message: "Archive",
+    //     comment: "@context: Browse filter for archive",
+    //   }),
+    // },
+  ];
+
+  const searchLabel = t({
+    message: "Search",
+    comment: "@context: Search icon link in browse nav",
+  });
+
+  const isHomePage = currentPath === "/" || currentPath === "/featured";
+
+  return (
+    <div class="site-page">
+      <header class="site-header">
+        <div class="site-header-inner">
+          <div class="site-header-top site-header-top-bordered">
+            <a href="/" class="site-logo">
+              {siteName}
+            </a>
+            <div class="site-header-right">
+              {links.length > 0 && (
+                <nav class="site-header-nav">
+                  {links.map((link) => (
+                    <HeaderLink key={link.id} link={link} />
+                  ))}
+                </nav>
+              )}
+              <a
+                href="/search"
+                class={`site-header-search ${currentPath === "/search" ? "site-header-search-active" : ""}`}
+                aria-label={searchLabel}
+                title={searchLabel}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <circle cx="11" cy="11" r="8" />
+                  <path d="m21 21-4.35-4.35" />
+                </svg>
+              </a>
+            </div>
+          </div>
+          {isHomePage && siteDescription && (
+            <p class="site-description">{siteDescription}</p>
+          )}
+        </div>
+      </header>
+
+      <main class="site-main">
+        <div class="site-container">
+          <div class="site-content">
+            {isHomePage && (
+              <nav class="site-browse-nav">
+                {browseLinks.map((link, i) => (
+                  <>
+                    {i > 0 && <span class="site-browse-sep">/</span>}
+                    <a
+                      key={link.href}
+                      href={link.href}
+                      class={`site-browse-link ${currentPath === link.href ? "site-browse-link-active" : ""}`}
+                    >
+                      {link.label}
+                    </a>
+                  </>
+                ))}
+              </nav>
+            )}
+            {isHomePage && isAuthenticated && <ComposePrompt />}
+            {children}
+          </div>
+        </div>
+      </main>
+
+      {isAuthenticated && <ComposeDialog collections={collections} />}
+    </div>
+  );
+};