@jant/core 0.3.35 → 0.3.36

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/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/SearchPage.tsx

@@ -62,7 +62,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

package/src/ui/shared/CollectionsSidebar.tsx

@@ -2,25 +2,74 @@
  * Collections Sidebar
  *
  * Shared sidebar navigation for public collection pages.
- * Shows all collections with icons and active state.
+ * - Anonymous users: static nav with collections and dividers
+ * - 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 } from "../../types.js";
+import type { Collection, CollectionDivider } from "../../types.js";
 import { renderCollectionIcon } from "../../lib/icons.js";
 
+const escapeJson = (data: unknown) =>
+  JSON.stringify(data).replace(/</g, "\\u003c");
+
 export interface CollectionsSidebarProps {
   collections: Collection[];
+  dividers: CollectionDivider[];
   activeSlug?: string;
+  isAuthenticated?: boolean;
+  postCounts?: Map<number, number>;
 }
 
 export const CollectionsSidebar: FC<CollectionsSidebarProps> = ({
   collections,
+  dividers,
   activeSlug,
+  isAuthenticated,
+  postCounts,
 }) => {
+  if (isAuthenticated) {
+    return (
+      <AuthenticatedSidebar
+        collections={collections}
+        dividers={dividers}
+        activeSlug={activeSlug}
+        postCounts={postCounts}
+      />
+    );
+  }
+
+  return (
+    <AnonymousSidebar
+      collections={collections}
+      dividers={dividers}
+      activeSlug={activeSlug}
+    />
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Anonymous: static HTML nav
+// ---------------------------------------------------------------------------
+
+const AnonymousSidebar: FC<{
+  collections: Collection[];
+  dividers: CollectionDivider[];
+  activeSlug?: string;
+}> = ({ collections, dividers, 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);
+
   return (
     <nav class="flex flex-col gap-1 pt-6">
       <h2 class="px-3 pb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
@@ -29,7 +78,15 @@ export const CollectionsSidebar: FC<CollectionsSidebarProps> = ({
           comment: "@context: Sidebar heading for collections nav",
         })}
       </h2>
-      {collections.map((col) => {
+      {items.map((item) => {
+        if (item.kind === "divider") {
+          return (
+            <div key={`d-${item.data.id}`} class="px-3 py-1">
+              <hr class="border-border" />
+            </div>
+          );
+        }
+        const col = item.data;
         const isActive = col.slug === activeSlug;
         return (
           <a
@@ -57,3 +114,171 @@ export const CollectionsSidebar: FC<CollectionsSidebarProps> = ({
     </nav>
   );
 };
+
+// ---------------------------------------------------------------------------
+// Authenticated: Lit component shell
+// ---------------------------------------------------------------------------
+
+const AuthenticatedSidebar: FC<{
+  collections: Collection[];
+  dividers: CollectionDivider[];
+  activeSlug?: string;
+  postCounts?: Map<number, number>;
+}> = ({ collections, dividers, 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,
+  }));
+
+  const labels = {
+    collections: t({
+      message: "Collections",
+      comment: "@context: Sidebar heading for collections nav",
+    }),
+    reorder: t({
+      message: "Reorder",
+      comment: "@context: Menu action to reorder collections",
+    }),
+    done: t({
+      message: "Done",
+      comment: "@context: Button to exit reorder mode",
+    }),
+    addDivider: t({
+      message: "Add Divider",
+      comment: "@context: Menu action to add a divider",
+    }),
+    newCollection: t({
+      message: "New Collection",
+      comment: "@context: Tooltip/aria for add collection button",
+    }),
+    edit: t({
+      message: "Edit",
+      comment: "@context: Per-collection edit action",
+    }),
+    deleteDivider: t({
+      message: "Remove Divider",
+      comment: "@context: Tooltip for divider delete button",
+    }),
+    moreActions: t({
+      message: "More actions",
+      comment: "@context: Aria-label for more button",
+    }),
+    deleteCollection: t({
+      message: "Delete",
+      comment: "@context: Delete collection action",
+    }),
+    confirmDelete: t({
+      message:
+        "Delete this collection permanently? Posts inside won't be removed.",
+      comment: "@context: Confirm dialog for deleting a collection",
+    }),
+    orderSaved: t({
+      message: "Order saved",
+      comment: "@context: Toast after reordering collections",
+    }),
+    saved: t({
+      message: "Saved",
+      comment: "@context: Toast after saving a collection",
+    }),
+    saveFailed: t({
+      message: "Couldn't save. Try again in a moment.",
+      comment: "@context: Toast when save fails",
+    }),
+    deleted: t({
+      message: "Deleted",
+      comment: "@context: Toast after deleting a collection",
+    }),
+    formLabels: {
+      titleLabel: t({
+        message: "Title",
+        comment: "@context: Collection form field",
+      }),
+      titlePlaceholder: t({
+        message: "My Collection",
+        comment: "@context: Collection title placeholder",
+      }),
+      slugLabel: t({
+        message: "Slug",
+        comment: "@context: Collection form field",
+      }),
+      slugHelp: t({
+        message:
+          "URL-safe identifier (lowercase, numbers, hyphens). For CJK titles, slug will be auto-generated on the server.",
+        comment: "@context: Collection path help text",
+      }),
+      descriptionLabel: t({
+        message: "Description (optional)",
+        comment: "@context: Collection form field",
+      }),
+      descriptionPlaceholder: t({
+        message: "What's this collection about?",
+        comment: "@context: Collection description placeholder",
+      }),
+      removeIcon: t({
+        message: "Remove",
+        comment: "@context: Button to remove icon",
+      }),
+      iconsTab: t({
+        message: "Icons",
+        comment: "@context: Icon picker tab label",
+      }),
+      emojisTab: t({
+        message: "Emojis",
+        comment: "@context: Emoji picker tab label",
+      }),
+      searchIconsPlaceholder: t({
+        message: "Search icons...",
+        comment: "@context: Icon picker search placeholder",
+      }),
+      searchEmojisPlaceholder: t({
+        message: "Search emojis...",
+        comment: "@context: Emoji picker search placeholder",
+      }),
+      sortOrderLabel: t({
+        message: "Sort Order",
+        comment: "@context: Collection form field",
+      }),
+      sortNewest: t({
+        message: "Newest first",
+        comment: "@context: Collection sort order option",
+      }),
+      sortOldest: t({
+        message: "Oldest first",
+        comment: "@context: Collection sort order option",
+      }),
+      sortRatingDesc: t({
+        message: "Highest rated",
+        comment: "@context: Collection sort order option",
+      }),
+      sortRatingAsc: t({
+        message: "Lowest rated",
+        comment: "@context: Collection sort order option",
+      }),
+      submitLabel: t({
+        message: "Save",
+        comment: "@context: Button to save collection",
+      }),
+      cancelLabel: t({
+        message: "Cancel",
+        comment: "@context: Button to cancel form",
+      }),
+    },
+  };
+
+  return (
+    <jant-collection-sidebar
+      collections={escapeJson(sidebarCollections)}
+      dividers={escapeJson(dividers)}
+      labels={escapeJson(labels)}
+      active-slug={activeSlug ?? ""}
+    />
+  );
+};

package/src/ui/shared/MediaGallery.tsx

@@ -1,59 +1,197 @@
 /**
  * Media Gallery Component
  *
- * Renders media attachments in a horizontal scrollable row,
- * similar to an image carousel.
+ * Renders media attachments: images in a horizontal scrollable row
+ * (with lightbox support), videos inline with play overlay, audio
+ * as compact player cards, and PDFs as file cards linking to the file.
  */
 
 import type { FC } from "hono/jsx";
 import type { MediaView } from "../../types.js";
+import { getMediaCategory } from "../../lib/upload.js";
 
 export interface MediaGalleryProps {
   attachments: MediaView[];
 }
 
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
 export const MediaGallery: FC<MediaGalleryProps> = ({ attachments }) => {
-  const images = attachments.filter((a) => a.mimeType.startsWith("image/"));
-  if (images.length === 0) return null;
+  if (attachments.length === 0) return null;
 
-  const single = images.length === 1;
+  const images = attachments.filter(
+    (a) => getMediaCategory(a.mimeType) === "image",
+  );
+  const videos = attachments.filter(
+    (a) => getMediaCategory(a.mimeType) === "video",
+  );
+  const audios = attachments.filter(
+    (a) => getMediaCategory(a.mimeType) === "audio",
+  );
+  const documents = attachments.filter(
+    (a) => getMediaCategory(a.mimeType) === "document",
+  );
+
+  // Build lightbox group from images + videos
+  const lightboxItems = [
+    ...images.map((img) => ({
+      url: img.url,
+      alt: img.altText || "",
+      width: img.width,
+      height: img.height,
+    })),
+    ...videos.map((v) => ({
+      url: v.url,
+      alt: v.altText || "",
+      width: v.width,
+      height: v.height,
+      mimeType: v.mimeType,
+    })),
+  ];
+
+  const hasVisualMedia = images.length > 0 || videos.length > 0;
+  const singleVisual = images.length + videos.length === 1;
 
   return (
-    <div
-      class={`mt-3 flex gap-2 ${single ? "" : "overflow-x-auto scroll-smooth snap-x snap-mandatory"}`}
-      style={
-        single ? undefined : "scrollbar-width: none; -ms-overflow-style: none;"
-      }
-    >
-      {images.map((img) => {
-        const aspectRatio =
-          img.width && img.height ? img.width / img.height : 4 / 3;
-        const itemWidth = single
-          ? undefined
-          : `${Math.round(320 * Math.min(Math.max(aspectRatio, 0.6), 1.6))}px`;
-
-        return (
-          <a
-            key={img.id}
-            href={img.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            class={`${single ? "" : "shrink-0 snap-start"} block rounded-lg overflow-hidden`}
-            style={single ? undefined : { width: itemWidth, maxWidth: "85%" }}
-          >
-            <img
-              src={img.thumbnailUrl}
-              alt={img.altText || ""}
-              class={
-                single
-                  ? "rounded-lg max-w-full max-h-96 h-auto object-contain"
-                  : "h-80 w-full object-cover"
-              }
-              loading="lazy"
-            />
-          </a>
-        );
-      })}
-    </div>
+    <>
+      {/* Images + Videos gallery */}
+      {hasVisualMedia && (
+        <div
+          data-post-media
+          data-lightbox-group={JSON.stringify(lightboxItems)}
+          class={`mt-3 flex gap-2 ${singleVisual ? "" : "overflow-x-auto scroll-smooth snap-x snap-mandatory"}`}
+          style={
+            singleVisual
+              ? undefined
+              : "scrollbar-width: none; -ms-overflow-style: none;"
+          }
+        >
+          {images.map((img, index) => {
+            const aspectRatio =
+              img.width && img.height ? img.width / img.height : 4 / 3;
+            const itemWidth = singleVisual
+              ? undefined
+              : `${Math.round(320 * Math.min(Math.max(aspectRatio, 0.6), 1.6))}px`;
+
+            return (
+              <a
+                key={img.id}
+                href={img.url}
+                data-lightbox-index={index}
+                class={`${singleVisual ? "" : "shrink-0 snap-start"} block rounded-lg overflow-hidden`}
+                style={
+                  singleVisual
+                    ? undefined
+                    : { width: itemWidth, maxWidth: "85%" }
+                }
+              >
+                <img
+                  src={img.thumbnailUrl}
+                  alt={img.altText || ""}
+                  class={
+                    singleVisual
+                      ? "rounded-lg max-w-full max-h-96 h-auto object-contain"
+                      : "h-80 w-full object-cover"
+                  }
+                  loading="lazy"
+                />
+              </a>
+            );
+          })}
+          {videos.map((v, vIdx) => {
+            const lightboxIndex = images.length + vIdx;
+            return (
+              <a
+                key={v.id}
+                href={v.url}
+                data-lightbox-index={lightboxIndex}
+                class={`${singleVisual ? "" : "shrink-0 snap-start"} media-video-wrap`}
+                style={
+                  singleVisual ? undefined : { width: "320px", maxWidth: "85%" }
+                }
+              >
+                <video
+                  src={v.url}
+                  preload="metadata"
+                  muted
+                  playsinline
+                  class={singleVisual ? "max-h-96" : "h-80 w-full object-cover"}
+                />
+                <div class="media-video-play-overlay">
+                  <svg viewBox="0 0 24 24" fill="white">
+                    <path d="M8 5v14l11-7z" />
+                  </svg>
+                </div>
+              </a>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Audio cards */}
+      {audios.map((a) => (
+        <div key={a.id} class="media-audio-card">
+          <div class="media-audio-icon">
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M9 18V5l12-2v13" />
+              <circle cx="6" cy="18" r="3" />
+              <circle cx="18" cy="16" r="3" />
+            </svg>
+          </div>
+          {a.altText && <span class="media-audio-name">{a.altText}</span>}
+          <div class="media-audio-player">
+            <audio controls preload="metadata">
+              <source src={a.url} type={a.mimeType} />
+            </audio>
+          </div>
+        </div>
+      ))}
+
+      {/* PDF cards */}
+      {documents.map((d) => (
+        <a
+          key={d.id}
+          href={d.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="media-pdf-card"
+        >
+          <div class="media-pdf-icon">
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+              <polyline points="14 2 14 8 20 8" />
+              <line x1="16" y1="13" x2="8" y2="13" />
+              <line x1="16" y1="17" x2="8" y2="17" />
+            </svg>
+          </div>
+          <span class="media-pdf-name">{d.altText || "PDF"}</span>
+          {d.size != null && (
+            <span class="media-pdf-size">{formatSize(d.size)}</span>
+          )}
+        </a>
+      ))}
+    </>
   );
 };

package/src/lib/collections-reorder.ts

@@ -1,28 +0,0 @@
-/**
- * Collection Reorder
- *
- * Initializes SortableJS on the collections list in the dashboard.
- * Auto-detects the list element and only activates when present.
- * Sends prefixed string IDs (e.g. "c-1", "d-2") to support mixed
- * collections and dividers in a unified sort order.
- */
-
-import Sortable from "sortablejs";
-
-const list = document.getElementById("collections-list");
-if (list) {
-  Sortable.create(list, {
-    animation: 150,
-    handle: "[data-id]",
-    onEnd() {
-      const items = [...list.querySelectorAll<HTMLElement>("[data-id]")]
-        .map((el) => el.dataset.id)
-        .filter((id): id is string => id !== undefined);
-      fetch("/dash/collections/reorder", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ items }),
-      });
-    },
-  });
-}