@jant/core 0.3.36 → 0.3.38

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/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">
@@ -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>
+  );
+};

package/src/ui/shared/CollectionsSidebar.tsx

@@ -2,13 +2,13 @@
  * Collections Sidebar
  *
  * Shared sidebar navigation for public collection pages.
- * - Anonymous users: static nav with collections and dividers
+ * - Anonymous users: static nav with collections and dividers from sidebar items
  * - Authenticated users: interactive Lit component with CRUD, reorder, divider management
  */
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
-import type { Collection, CollectionDivider } from "../../types.js";
+import type { Collection, SidebarItem } from "../../types.js";
 import { renderCollectionIcon } from "../../lib/icons.js";
 
 const escapeJson = (data: unknown) =>
@@ -16,15 +16,15 @@ const escapeJson = (data: unknown) =>
 
 export interface CollectionsSidebarProps {
   collections: Collection[];
-  dividers: CollectionDivider[];
+  sidebarItems: SidebarItem[];
   activeSlug?: string;
   isAuthenticated?: boolean;
-  postCounts?: Map<number, number>;
+  postCounts?: Map<string, number>;
 }
 
 export const CollectionsSidebar: FC<CollectionsSidebarProps> = ({
   collections,
-  dividers,
+  sidebarItems,
   activeSlug,
   isAuthenticated,
   postCounts,
@@ -33,7 +33,7 @@ export const CollectionsSidebar: FC<CollectionsSidebarProps> = ({
     return (
       <AuthenticatedSidebar
         collections={collections}
-        dividers={dividers}
+        sidebarItems={sidebarItems}
         activeSlug={activeSlug}
         postCounts={postCounts}
       />
@@ -43,7 +43,7 @@ export const CollectionsSidebar: FC<CollectionsSidebarProps> = ({
   return (
     <AnonymousSidebar
       collections={collections}
-      dividers={dividers}
+      sidebarItems={sidebarItems}
       activeSlug={activeSlug}
     />
   );
@@ -55,20 +55,13 @@ export const CollectionsSidebar: FC<CollectionsSidebarProps> = ({
 
 const AnonymousSidebar: FC<{
   collections: Collection[];
-  dividers: CollectionDivider[];
+  sidebarItems: SidebarItem[];
   activeSlug?: string;
-}> = ({ collections, dividers, activeSlug }) => {
+}> = ({ collections, sidebarItems, activeSlug }) => {
   const { t } = useLingui();
 
-  // Interleave collections and dividers by position
-  type Item =
-    | { kind: "collection"; data: Collection }
-    | { kind: "divider"; data: CollectionDivider };
-
-  const items: Item[] = [
-    ...collections.map((c) => ({ kind: "collection" as const, data: c })),
-    ...dividers.map((d) => ({ kind: "divider" as const, data: d })),
-  ].sort((a, b) => a.data.position - b.data.position);
+  // Build collection lookup
+  const collectionMap = new Map(collections.map((c) => [c.id, c]));
 
   return (
     <nav class="flex flex-col gap-1 pt-6">
@@ -78,19 +71,22 @@ const AnonymousSidebar: FC<{
           comment: "@context: Sidebar heading for collections nav",
         })}
       </h2>
-      {items.map((item) => {
-        if (item.kind === "divider") {
+      {sidebarItems.map((item) => {
+        if (item.type === "divider") {
           return (
-            <div key={`d-${item.data.id}`} class="px-3 py-1">
+            <div key={item.id} class="px-3 py-1">
               <hr class="border-border" />
             </div>
           );
         }
-        const col = item.data;
+        const col = item.collectionId
+          ? collectionMap.get(item.collectionId)
+          : undefined;
+        if (!col) return null;
         const isActive = col.slug === activeSlug;
         return (
           <a
-            key={col.id}
+            key={item.id}
             href={`/c/${col.slug}`}
             class={`flex items-center gap-2.5 px-3 py-2 text-sm rounded-md truncate ${
               isActive
@@ -121,21 +117,36 @@ const AnonymousSidebar: FC<{
 
 const AuthenticatedSidebar: FC<{
   collections: Collection[];
-  dividers: CollectionDivider[];
+  sidebarItems: SidebarItem[];
   activeSlug?: string;
-  postCounts?: Map<number, number>;
-}> = ({ collections, dividers, activeSlug, postCounts }) => {
+  postCounts?: Map<string, number>;
+}> = ({ collections, sidebarItems, activeSlug, postCounts }) => {
   const { t } = useLingui();
 
-  const sidebarCollections = collections.map((col) => ({
-    id: col.id,
-    slug: col.slug,
-    title: col.title,
-    description: col.description,
-    icon: col.icon,
-    sortOrder: col.sortOrder,
-    position: col.position,
-    postCount: postCounts?.get(col.id) ?? 0,
+  // Build collection lookup for enriching sidebar items
+  const collectionMap = new Map(
+    collections.map((col) => [
+      col.id,
+      {
+        id: col.id,
+        slug: col.slug,
+        title: col.title,
+        description: col.description,
+        icon: col.icon,
+        sortOrder: col.sortOrder,
+        postCount: postCounts?.get(col.id) ?? 0,
+      },
+    ]),
+  );
+
+  const clientSidebarItems = sidebarItems.map((item) => ({
+    id: item.id,
+    type: item.type,
+    collectionId: item.collectionId,
+    position: item.position,
+    collection: item.collectionId
+      ? collectionMap.get(item.collectionId)
+      : undefined,
   }));
 
   const labels = {
@@ -275,8 +286,7 @@ const AuthenticatedSidebar: FC<{
 
   return (
     <jant-collection-sidebar
-      collections={escapeJson(sidebarCollections)}
-      dividers={escapeJson(dividers)}
+      sidebar-items={escapeJson(clientSidebarItems)}
       labels={escapeJson(labels)}
       active-slug={activeSlug ?? ""}
     />