@jant/core 0.3.35 → 0.3.37

package/src/ui/pages/CollectionPage.tsx

@@ -1,17 +1,18 @@
 /**
  * Collection Page
  *
- * Collection header with icon and divider-separated post list.
+ * Collection header with icon and timeline feed of posts.
  */
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
 import type { CollectionPageProps } from "../../types.js";
 import { renderCollectionIcon } from "../../lib/icons.js";
+import { TimelineFeed } from "../feed/TimelineFeed.js";
 
 export const CollectionPage: FC<CollectionPageProps> = ({
   collection,
-  posts,
+  items,
 }) => {
   const { t } = useLingui();
   const iconHtml = renderCollectionIcon(collection.icon, { size: 28 });
@@ -34,45 +35,15 @@ export const CollectionPage: FC<CollectionPageProps> = ({
       </header>
 
       <main>
-        {posts.length === 0 ? (
+        {items.length === 0 ? (
           <p class="text-muted-foreground">
             {t({
-              message: "No posts in this collection.",
+              message: "This collection is empty. Add posts from the editor.",
               comment: "@context: Empty state message",
             })}
           </p>
         ) : (
-          <div class="divide-y divide-border">
-            {posts.map((post) => (
-              <article
-                key={post.id}
-                class="h-entry py-4"
-                data-post
-                data-format={post.format}
-              >
-                {post.title && (
-                  <h2 class="p-name text-lg font-medium mb-2">
-                    <a href={post.permalink} class="u-url hover:underline">
-                      {post.title}
-                    </a>
-                  </h2>
-                )}
-                <div
-                  class="e-content prose prose-sm"
-                  data-post-body
-                  dangerouslySetInnerHTML={{ __html: post.bodyHtml || "" }}
-                />
-                <footer
-                  class="mt-2 text-sm text-muted-foreground"
-                  data-post-meta
-                >
-                  <time class="dt-published" datetime={post.publishedAt}>
-                    {post.publishedAtFormatted}
-                  </time>
-                </footer>
-              </article>
-            ))}
-          </div>
+          <TimelineFeed items={items} />
         )}
       </main>
     </div>

package/src/ui/pages/CollectionsPage.tsx

@@ -27,7 +27,8 @@ export const CollectionsPage: FC<CollectionsPageProps> = ({ collections }) => {
         {collections.length === 0 ? (
           <p class="text-muted-foreground">
             {t({
-              message: "No collections yet.",
+              message:
+                "No collections yet. Start one to organize posts by topic.",
               comment: "@context: Empty state message on collections page",
             })}
           </p>

package/src/ui/pages/ComposePage.tsx

@@ -0,0 +1,54 @@
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type { Collection } from "../../types.js";
+import { ComposeForm } from "../compose/ComposeDialog.js";
+
+export interface ComposePageProps {
+  collections?: Collection[];
+  uploadMaxFileSize?: number;
+  closeHref?: string;
+}
+
+export const ComposePage: FC<ComposePageProps> = ({
+  collections,
+  uploadMaxFileSize,
+  closeHref = "/",
+}) => {
+  const { t } = useLingui();
+  const backLabel = t({
+    message: "Back",
+    comment: "@context: Link back from the new post page",
+  });
+
+  return (
+    <section class="compose-page" data-page="compose">
+      <div class="compose-page-shell">
+        <div class="compose-page-intro">
+          <div class="compose-page-intro-row">
+            <h1 class="compose-page-title">
+              {t({
+                message: "New post",
+                comment: "@context: Page title for the new post page",
+              })}
+            </h1>
+            <button
+              type="button"
+              class="compose-page-back-link"
+              aria-label={backLabel}
+              data-on:click="el.closest('.compose-page-shell')?.querySelector('jant-compose-dialog')?.requestCloseAndLeave()"
+            >
+              <span>{`← ${backLabel}`}</span>
+            </button>
+          </div>
+        </div>
+        <ComposeForm
+          collections={collections}
+          uploadMaxFileSize={uploadMaxFileSize}
+          pageMode
+          closeHref={closeHref}
+          autoRestoreDraft
+        />
+      </div>
+    </section>
+  );
+};

package/src/ui/pages/FeaturedPage.tsx

@@ -18,7 +18,8 @@ export const FeaturedPage: FC<FeaturedPageProps> = ({ items }) => {
         {items.length === 0 ? (
           <p class="text-muted-foreground">
             {t({
-              message: "No featured posts yet.",
+              message:
+                "No featured posts. Mark a post as featured to highlight it here.",
               comment: "@context: Empty state message on featured page",
             })}
           </p>

package/src/ui/pages/HomePage.tsx

@@ -27,7 +27,7 @@ export const HomePage: FC<HomePageProps> = ({
                 class="py-12 text-center text-muted-foreground"
               >
                 {t({
-                  message: "No posts yet.",
+                  message: "Nothing here yet.",
                   comment: "@context: Empty state message on home page",
                 })}
               </p>

package/src/ui/pages/PostPage.tsx

@@ -2,55 +2,40 @@
  * Single Post Page
  *
  * Single post view — clean, no card border, with divider footer.
+ * When `threadPosts` is provided, renders the full thread with the current
+ * post highlighted and scroll-targeted.
  */
 
 import type { FC } from "hono/jsx";
-import { useLingui } from "@lingui/react/macro";
-import type { PostPageProps } from "../../types.js";
-import { MediaGallery } from "../shared/MediaGallery.js";
-
-export const PostPage: FC<PostPageProps> = ({ post }) => {
-  const { t } = useLingui();
+import type { PostPageProps, PostView } from "../../types.js";
+import { TimelineItemFromPost } from "../feed/TimelineItem.js";
 
+const ThreadDetail: FC<{ post: PostView; threadPosts: PostView[] }> = ({
+  post,
+  threadPosts,
+}) => {
   return (
-    <article
-      class="h-entry py-6"
-      data-page="post"
-      data-post
-      data-format={post.format}
-    >
-      {post.title && (
-        <h1 class="p-name text-2xl font-semibold mb-4">{post.title}</h1>
-      )}
-
-      {post.bodyHtml && (
-        <div
-          class="e-content prose"
-          data-post-body
-          dangerouslySetInnerHTML={{ __html: post.bodyHtml }}
-        />
-      )}
-
-      {post.media.length > 0 && (
-        <div class="mt-4" data-post-media>
-          <MediaGallery attachments={post.media} />
-        </div>
-      )}
-
-      <footer
-        class="mt-6 pt-4 border-t text-sm text-muted-foreground"
-        data-post-meta
-      >
-        <time class="dt-published" datetime={post.publishedAt}>
-          {post.publishedAtFormatted}
-        </time>
-        <a href={post.permalink} class="u-url ml-4">
-          {t({
-            message: "Permalink",
-            comment: "@context: Link to permanent URL of post",
-          })}
-        </a>
-      </footer>
-    </article>
+    <div class="thread-group thread-group-detail" data-page="post">
+      {threadPosts.map((tp) => {
+        const isCurrent = tp.id === post.id;
+        return (
+          <div
+            key={tp.id}
+            id={`post-${tp.id}`}
+            class={`thread-item thread-detail-item${isCurrent ? " thread-item-current" : ""}`}
+            {...(isCurrent ? { "data-post-current": "" } : {})}
+          >
+            <TimelineItemFromPost post={tp} />
+          </div>
+        );
+      })}
+    </div>
   );
 };
+
+export const PostPage: FC<PostPageProps> = ({ post, threadPosts }) => {
+  if (threadPosts && threadPosts.length > 1) {
+    return <ThreadDetail post={post} threadPosts={threadPosts} />;
+  }
+  return <TimelineItemFromPost post={post} mode="detail" />;
+};

package/src/ui/pages/SearchPage.tsx

@@ -1,14 +1,184 @@
 /**
  * Search Page
  *
- * Search form and results — divider-separated instead of bordered cards.
+ * Dedicated search result UI — compact per-type cards, not full timeline cards.
+ * Each card shows only what's relevant: title/domain/quote + FTS snippet.
  */
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
-import type { SearchPageProps } from "../../types.js";
+import type { SearchPageProps, SearchResultView } from "../../types.js";
 import { PagePagination } from "../shared/Pagination.js";
 
+// External link icon (shared by LinkCard)
+const ExternalLinkIcon = () => (
+  <svg
+    class="size-3 shrink-0"
+    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>
+);
+
+const SearchResultCard: FC<{ result: SearchResultView }> = ({ result }) => {
+  const { post, snippet, titleHighlighted, quoteHighlighted } = result;
+
+  // Extract domain for link posts
+  let domain: string | undefined;
+  if (post.format === "link" && post.url) {
+    try {
+      domain = new URL(post.url).hostname.replace(/^www\./, "");
+    } catch {
+      // Invalid URL, skip
+    }
+  }
+
+  const footer = (
+    <footer class="flex items-center gap-2 mt-2 text-xs text-muted-foreground">
+      <span class="badge-outline">{post.format}</span>
+      <a href={post.permalink} class="hover:underline">
+        <time datetime={post.publishedAt}>{post.publishedAtFormatted}</time>
+      </a>
+    </footer>
+  );
+
+  // ── Link ──────────────────────────────────────────────────────────────────
+  if (post.format === "link") {
+    return (
+      <article data-post data-format="link">
+        {domain && (
+          <div class="flex items-center gap-1 text-xs text-muted-foreground mb-1">
+            <ExternalLinkIcon />
+            <span>{domain}</span>
+          </div>
+        )}
+        {(titleHighlighted ?? post.title) && (
+          <h3 class="font-semibold text-base mb-1">
+            {titleHighlighted ? (
+              <a
+                href={post.url || post.permalink}
+                target={post.url ? "_blank" : undefined}
+                rel={post.url ? "noopener noreferrer" : undefined}
+                class="hover:underline"
+                dangerouslySetInnerHTML={{ __html: titleHighlighted }}
+              />
+            ) : (
+              <a
+                href={post.url || post.permalink}
+                target={post.url ? "_blank" : undefined}
+                rel={post.url ? "noopener noreferrer" : undefined}
+                class="hover:underline"
+              >
+                {post.title}
+              </a>
+            )}
+          </h3>
+        )}
+        {snippet && (
+          <p
+            class="search-snippet"
+            dangerouslySetInnerHTML={{ __html: snippet }}
+          />
+        )}
+        {footer}
+      </article>
+    );
+  }
+
+  // ── Quote ─────────────────────────────────────────────────────────────────
+  if (post.format === "quote") {
+    return (
+      <article data-post data-format="quote">
+        {quoteHighlighted && (
+          <blockquote class="feed-quote mb-1">
+            <p
+              class="text-sm"
+              dangerouslySetInnerHTML={{ __html: quoteHighlighted }}
+            />
+            {post.title && (
+              <footer class="text-xs text-muted-foreground mt-1">
+                {post.url ? (
+                  <a
+                    href={post.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="hover:underline"
+                  >
+                    — {post.title}
+                  </a>
+                ) : (
+                  <span>— {post.title}</span>
+                )}
+              </footer>
+            )}
+          </blockquote>
+        )}
+        {snippet && (
+          <p
+            class="search-snippet"
+            dangerouslySetInnerHTML={{ __html: snippet }}
+          />
+        )}
+        {footer}
+      </article>
+    );
+  }
+
+  // ── Note with title (article) ─────────────────────────────────────────────
+  if (post.title) {
+    return (
+      <article data-post data-format="note">
+        <h3 class="font-semibold text-base mb-1">
+          {titleHighlighted ? (
+            <a
+              href={post.permalink}
+              class="hover:underline"
+              dangerouslySetInnerHTML={{ __html: titleHighlighted }}
+            />
+          ) : (
+            <a href={post.permalink} class="hover:underline">
+              {post.title}
+            </a>
+          )}
+        </h3>
+        {snippet && (
+          <p
+            class="search-snippet"
+            dangerouslySetInnerHTML={{ __html: snippet }}
+          />
+        )}
+        {footer}
+      </article>
+    );
+  }
+
+  // ── Untitled note ─────────────────────────────────────────────────────────
+  return (
+    <article data-post data-format="note">
+      {snippet ? (
+        <a href={post.permalink} class="block hover:opacity-80">
+          <p
+            class="search-snippet"
+            dangerouslySetInnerHTML={{ __html: snippet }}
+          />
+        </a>
+      ) : (
+        <a
+          href={post.permalink}
+          class="block text-sm text-muted-foreground hover:underline"
+        >
+          {post.publishedAtFormatted}
+        </a>
+      )}
+      {footer}
+    </article>
+  );
+};
+
 export const SearchPage: FC<SearchPageProps> = ({
   query,
   results,
@@ -17,14 +187,12 @@ export const SearchPage: FC<SearchPageProps> = ({
   page,
 }) => {
   const { t } = useLingui();
-  const searchTitle = t({
-    message: "Search",
-    comment: "@context: Search page title",
-  });
 
   return (
     <div class="py-6" data-page="search">
-      <h1 class="text-2xl font-semibold mb-6">{searchTitle}</h1>
+      <h1 class="text-2xl font-semibold mb-6">
+        {t({ message: "Search", comment: "@context: Search page title" })}
+      </h1>
 
       {/* Search form */}
       <form method="get" action="/search" class="mb-8">
@@ -62,7 +230,7 @@ export const SearchPage: FC<SearchPageProps> = ({
           <p class="text-sm text-muted-foreground mb-4">
             {results.length === 0
               ? t({
-                  message: "No results found.",
+                  message: "No results. Try different keywords.",
                   comment: "@context: Search empty results",
                 })
               : results.length === 1
@@ -78,36 +246,12 @@ export const SearchPage: FC<SearchPageProps> = ({
 
           {results.length > 0 && (
             <>
-              <div class="divide-y divide-border">
-                {results.map((result) => (
-                  <article
-                    key={result.post.id}
-                    class="py-4"
-                    data-post
-                    data-format={result.post.format}
-                  >
-                    <a href={result.post.permalink} class="block">
-                      <h2 class="font-medium hover:underline">
-                        {result.post.title ||
-                          result.post.excerpt?.slice(0, 60) ||
-                          "Post #" + result.post.id}
-                      </h2>
-
-                      {result.snippet && (
-                        <p
-                          class="text-sm text-muted-foreground mt-2 line-clamp-2"
-                          dangerouslySetInnerHTML={{ __html: result.snippet }}
-                        />
-                      )}
-
-                      <footer class="flex items-center gap-2 mt-2 text-xs text-muted-foreground">
-                        <span class="badge-outline">{result.post.format}</span>
-                        <time datetime={result.post.publishedAt}>
-                          {result.post.publishedAtFormatted}
-                        </time>
-                      </footer>
-                    </a>
-                  </article>
+              <div class="flex flex-col">
+                {results.map((result, i) => (
+                  <div key={result.post.id}>
+                    {i > 0 && <hr class="feed-divider" />}
+                    <SearchResultCard result={result} />
+                  </div>
                 ))}
               </div>
 

package/src/ui/shared/AdminBreadcrumb.tsx

@@ -0,0 +1,29 @@
+/**
+ * Admin Breadcrumb Component
+ *
+ * Reuses the existing dash-breadcrumb CSS classes.
+ */
+
+import type { FC } from "hono/jsx";
+
+export interface AdminBreadcrumbProps {
+  parent: string;
+  parentHref: string;
+  current: string;
+}
+
+export const AdminBreadcrumb: FC<AdminBreadcrumbProps> = ({
+  parent,
+  parentHref,
+  current,
+}) => {
+  return (
+    <nav class="dash-breadcrumb mb-6">
+      <a href={parentHref} class="dash-breadcrumb-parent">
+        {parent}
+      </a>
+      <span class="dash-breadcrumb-sep">/</span>
+      <span class="dash-breadcrumb-current">{current}</span>
+    </nav>
+  );
+};