@jant/core 0.3.27 → 0.3.28

package/src/ui/dash/collections/CollectionForm.tsx

@@ -1,28 +1,24 @@
 /**
- * Shared collection form (new + edit)
+ * Collection Form
+ *
+ * Server-rendered shell that provides data/labels to the Lit component
+ * `<jant-collection-form>`. Includes heading and SSR fallback skeleton.
  */
 
 import { useLingui } from "@lingui/react/macro";
+import type { FC } from "hono/jsx";
 import type { Collection } from "../../../types.js";
 
-export function CollectionForm({
-  collection,
-  isEdit,
-}: {
+interface CollectionFormProps {
   collection?: Collection;
   isEdit?: boolean;
-}) {
-  const { t } = useLingui();
-
-  const signals = JSON.stringify({
-    title: collection?.title ?? "",
-    slug: collection?.slug ?? "",
-    description: collection?.description ?? "",
-  }).replace(/</g, "\\u003c");
+}
 
-  const action = isEdit
-    ? `/dash/collections/${collection?.id}`
-    : "/dash/collections";
+export const CollectionForm: FC<CollectionFormProps> = ({
+  collection,
+  isEdit,
+}) => {
+  const { t } = useLingui();
 
   const heading = isEdit
     ? t({ message: "Edit Collection", comment: "@context: Page heading" })
@@ -38,6 +34,95 @@ export function CollectionForm({
         comment: "@context: Button to save new collection",
       });
 
+  const labels = JSON.stringify({
+    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",
+    }),
+    iconLabel: t({
+      message: "Icon (optional)",
+      comment: "@context: Collection form field",
+    }),
+    chooseIcon: t({
+      message: "Choose Icon",
+      comment: "@context: Button to open icon picker",
+    }),
+    removeIcon: t({
+      message: "Remove",
+      comment: "@context: Button to remove icon",
+    }),
+    dialogTitle: t({
+      message: "Choose Icon",
+      comment: "@context: Icon picker dialog title",
+    }),
+    dialogClose: t({
+      message: "Close",
+      comment: "@context: Button to close icon picker",
+    }),
+    searchIconsPlaceholder: t({
+      message: "Search icons...",
+      comment: "@context: Icon 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,
+    cancelLabel: t({
+      message: "Cancel",
+      comment: "@context: Button to cancel form",
+    }),
+  }).replace(/</g, "\\u003c");
+
+  const initial = JSON.stringify({
+    title: collection?.title ?? "",
+    slug: collection?.slug ?? "",
+    description: collection?.description ?? "",
+    sortOrder: collection?.sortOrder ?? "newest",
+    icon: collection?.icon ?? "",
+  }).replace(/</g, "\\u003c");
+
+  const action = isEdit
+    ? `/dash/collections/${collection?.id}`
+    : "/dash/collections";
+
   const cancelHref = isEdit
     ? `/dash/collections/${collection?.id}`
     : "/dash/collections";
@@ -46,108 +131,36 @@ export function CollectionForm({
     <>
       <h1 class="text-2xl font-semibold mb-6">{heading}</h1>
 
-      <form
-        data-signals={signals}
-        data-on:submit__prevent={`@post('${action}')`}
-        data-indicator="_loading"
-        class="flex flex-col gap-4 max-w-lg"
+      <jant-collection-form
+        labels={labels}
+        initial={initial}
+        action={action}
+        cancel-href={cancelHref}
+        is-edit={isEdit ? "true" : undefined}
       >
-        <div class="field">
-          <label class="label">
-            {t({
-              message: "Title",
-              comment: "@context: Collection form field",
-            })}
-          </label>
-          <input
-            type="text"
-            data-bind="title"
-            class="input"
-            required
-            placeholder={
-              isEdit
-                ? undefined
-                : t({
-                    message: "My Collection",
-                    comment: "@context: Collection title placeholder",
-                  })
-            }
-          />
-        </div>
-
-        <div class="field">
-          <label class="label">
-            {t({ message: "Slug", comment: "@context: Collection form field" })}
-          </label>
-          <input
-            type="text"
-            data-bind="slug"
-            class="input"
-            required
-            pattern="[a-z0-9-]+"
-            placeholder={isEdit ? undefined : "my-collection"}
-          />
-          {!isEdit && (
-            <p class="text-xs text-muted-foreground mt-1">
-              {t({
-                message: "URL-safe identifier (lowercase, numbers, hyphens)",
-                comment: "@context: Collection path help text",
-              })}
-            </p>
-          )}
-        </div>
-
-        <div class="field">
-          <label class="label">
-            {t({
-              message: "Description (optional)",
-              comment: "@context: Collection form field",
-            })}
-          </label>
-          <textarea
-            data-bind="description"
-            class="textarea"
-            rows={3}
-            placeholder={
-              isEdit
-                ? undefined
-                : t({
-                    message: "What's this collection about?",
-                    comment: "@context: Collection description placeholder",
-                  })
-            }
-          >
-            {collection?.description ?? ""}
-          </textarea>
-        </div>
-
-        <div class="flex gap-2">
-          <button type="submit" class="btn" data-attr:disabled="$_loading">
-            <svg
-              data-show="$_loading"
-              style="display:none"
-              class="animate-spin size-4"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              role="status"
-            >
-              <path d="M21 12a9 9 0 1 1-6.219-8.56" />
-            </svg>
-            {submitLabel}
-          </button>
-          <a href={cancelHref} class="btn-outline">
-            {t({
-              message: "Cancel",
-              comment: "@context: Button to cancel form",
-            })}
-          </a>
+        <div class="flex flex-col gap-4 max-w-lg">
+          <div class="field">
+            <div class="label skel-label"></div>
+            <div class="input skel-input"></div>
+          </div>
+          <div class="field">
+            <div class="label skel-label"></div>
+            <div class="input skel-input"></div>
+          </div>
+          <div class="field">
+            <div class="label skel-label"></div>
+            <div class="textarea skel-textarea"></div>
+          </div>
+          <div class="field">
+            <div class="label skel-label"></div>
+            <div class="input skel-input"></div>
+          </div>
+          <div class="flex gap-2">
+            <div class="btn skel-input min-w-28"></div>
+            <div class="btn-outline skel-input min-w-20"></div>
+          </div>
         </div>
-      </form>
+      </jant-collection-form>
     </>
   );
-}
+};

package/src/ui/dash/collections/CollectionsListContent.tsx

@@ -1,23 +1,34 @@
 /**
- * Collections list view
+ * Collections list view with drag-and-drop reordering
  */
 
 import { useLingui } from "@lingui/react/macro";
-import type { Collection } from "../../../types.js";
-import {
-  EmptyState,
-  ListItemRow,
-  ActionButtons,
-  CrudPageHeader,
-} from "../index.js";
+import type { Collection, CollectionDivider } from "../../../types.js";
+import { EmptyState, ActionButtons, CrudPageHeader } from "../index.js";
+import { renderCollectionIcon } from "../../../lib/icons.js";
+
+type ListItem =
+  | { type: "collection"; data: Collection }
+  | { type: "divider"; data: CollectionDivider };
 
 export function CollectionsListContent({
   collections,
+  dividers,
+  postCounts,
 }: {
   collections: Collection[];
+  dividers: CollectionDivider[];
+  postCounts: Map<number, number>;
 }) {
   const { t } = useLingui();
 
+  const items: ListItem[] = [
+    ...collections.map((c) => ({ type: "collection", data: c }) as ListItem),
+    ...dividers.map((d) => ({ type: "divider", data: d }) as ListItem),
+  ].sort((a, b) => a.data.position - b.data.position);
+
+  const hasItems = collections.length > 0 || dividers.length > 0;
+
   return (
     <>
       <CrudPageHeader
@@ -25,14 +36,26 @@ export function CollectionsListContent({
           message: "Collections",
           comment: "@context: Dashboard heading",
         })}
-        ctaLabel={t({
-          message: "New Collection",
-          comment: "@context: Button to create new collection",
-        })}
-        ctaHref="/dash/collections/new"
-      />
+      >
+        <div class="flex items-center gap-2">
+          <form method="post" action="/dash/collections/dividers">
+            <button type="submit" class="btn-sm-outline">
+              {t({
+                message: "New Divider",
+                comment: "@context: Button to add divider between collections",
+              })}
+            </button>
+          </form>
+          <a href="/dash/collections/new" class="btn-sm">
+            {t({
+              message: "New Collection",
+              comment: "@context: Button to create new collection",
+            })}
+          </a>
+        </div>
+      </CrudPageHeader>
 
-      {collections.length === 0 ? (
+      {!hasItems ? (
         <EmptyState
           message={t({
             message: "No collections yet.",
@@ -45,39 +68,77 @@ export function CollectionsListContent({
           ctaHref="/dash/collections/new"
         />
       ) : (
-        <div class="flex flex-col divide-y">
-          {collections.map((col) => (
-            <ListItemRow
-              key={col.id}
-              actions={
+        <div id="collections-list" class="flex flex-col">
+          {items.map((item) => {
+            if (item.type === "divider") {
+              return (
+                <div
+                  key={`d-${item.data.id}`}
+                  class="py-2 flex items-center gap-4"
+                >
+                  <div
+                    class="flex-1 min-w-0 flex items-center gap-3 cursor-grab"
+                    data-id={`d-${item.data.id}`}
+                  >
+                    <span class="text-muted-foreground select-none">⠿</span>
+                    <hr class="flex-1 border-border" />
+                  </div>
+                  <form
+                    method="post"
+                    action={`/dash/collections/dividers/${item.data.id}/delete`}
+                  >
+                    <button
+                      type="submit"
+                      class="btn-sm-ghost text-muted-foreground hover:text-destructive"
+                      title={t({
+                        message: "Remove divider",
+                        comment: "@context: Button to delete a divider",
+                      })}
+                    >
+                      ✕
+                    </button>
+                  </form>
+                </div>
+              );
+            }
+
+            const col = item.data;
+            const count = postCounts.get(col.id) ?? 0;
+            return (
+              <div key={`c-${col.id}`} class="py-2 flex items-center gap-4">
+                <div
+                  class="flex-1 min-w-0 flex items-center gap-3 cursor-grab"
+                  data-id={`c-${col.id}`}
+                >
+                  <span class="text-muted-foreground select-none">⠿</span>
+                  {col.icon && (
+                    <span
+                      class="flex items-center justify-center w-5 h-5 shrink-0"
+                      dangerouslySetInnerHTML={{
+                        __html: renderCollectionIcon(col.icon, {
+                          size: 18,
+                        }),
+                      }}
+                    />
+                  )}
+                  <a
+                    href={`/dash/collections/${col.id}`}
+                    class="font-medium hover:underline"
+                  >
+                    {col.title}
+                  </a>
+                  <span class="badge-secondary">{count}</span>
+                </div>
                 <ActionButtons
                   editHref={`/dash/collections/${col.id}/edit`}
                   editLabel={t({
                     message: "Edit",
                     comment: "@context: Button to edit collection",
                   })}
-                  viewHref={`/c/${col.slug}`}
-                  viewLabel={t({
-                    message: "View",
-                    comment: "@context: Button to view collection",
-                  })}
                 />
-              }
-            >
-              <a
-                href={`/dash/collections/${col.id}`}
-                class="font-medium hover:underline"
-              >
-                {col.title}
-              </a>
-              <p class="text-sm text-muted-foreground">/{col.slug}</p>
-              {col.description && (
-                <p class="text-sm text-muted-foreground mt-1">
-                  {col.description}
-                </p>
-              )}
-            </ListItemRow>
-          ))}
+              </div>
+            );
+          })}
         </div>
       )}
     </>

package/src/ui/dash/collections/IconPickerGrid.tsx

@@ -0,0 +1,50 @@
+/**
+ * Icon Picker Grid
+ *
+ * HTML fragment returned by GET /dash/collections/icons.
+ * Renders a grid of icon buttons organized by category.
+ */
+
+import type { FC } from "hono/jsx";
+import { ICON_CATALOG } from "../../../lib/icon-catalog.js";
+import { getIconSvg } from "../../../lib/icons.js";
+
+export const IconPickerGrid: FC = () => {
+  return (
+    <div class="flex flex-col gap-4">
+      {Object.entries(ICON_CATALOG).map(([category, names]) => (
+        <div key={category} data-category={category}>
+          <h3 class="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2">
+            {category}
+          </h3>
+          <div class="grid grid-cols-8 gap-1">
+            {names.map((name) => {
+              const svg = getIconSvg(name);
+              if (!svg) return null;
+              return (
+                <button
+                  key={name}
+                  type="button"
+                  class="flex items-center justify-center w-9 h-9 rounded-md hover:bg-accent transition-colors"
+                  data-icon-name={name}
+                  data-icon-svg={svg}
+                  title={name}
+                  data-on:click={`$iconName = el.dataset.iconName; $iconSvg = el.dataset.iconSvg; $icon = JSON.stringify({ name: $iconName, svg: $iconSvg, color: $iconColor }); const p = document.getElementById('icon-preview'); if (p) p.innerHTML = el.dataset.iconSvg; document.getElementById('icon-picker-dialog')?.close()`}
+                >
+                  <span
+                    class="w-5 h-5 flex items-center justify-center"
+                    dangerouslySetInnerHTML={{
+                      __html: svg
+                        .replace(/width="24"/, 'width="20"')
+                        .replace(/height="24"/, 'height="20"'),
+                    }}
+                  />
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/ui/dash/collections/ViewCollectionContent.tsx

@@ -6,6 +6,7 @@ import { useLingui } from "@lingui/react/macro";
 import type { Collection, PostView } from "../../../types.js";
 import { ActionButtons } from "../index.js";
 import { encode } from "../../../lib/sqid.js";
+import { renderCollectionIcon } from "../../../lib/icons.js";
 
 export function ViewCollectionContent({
   collection,
@@ -15,17 +16,27 @@ export function ViewCollectionContent({
   posts: PostView[];
 }) {
   const { t } = useLingui();
+  const count = String(posts.length);
   const postsHeader = t({
-    message: "Posts in Collection ({count})",
+    message: `Posts in Collection (${count})`,
     comment: "@context: Collection posts section heading",
-    values: { count: String(posts.length) },
   });
 
   return (
     <>
       <div class="flex items-center justify-between mb-6">
         <div>
-          <h1 class="text-2xl font-semibold">{collection.title}</h1>
+          <h1 class="text-2xl font-semibold flex items-center gap-2">
+            {collection.icon && (
+              <span
+                class="shrink-0"
+                dangerouslySetInnerHTML={{
+                  __html: renderCollectionIcon(collection.icon, { size: 24 }),
+                }}
+              />
+            )}
+            {collection.title}
+          </h1>
           <p class="text-sm text-muted-foreground">/{collection.slug}</p>
         </div>
         <ActionButtons

package/src/ui/dash/index.ts

@@ -5,6 +5,6 @@ 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 { PostForm, type PostFormProps } from "./posts/PostForm.js";
 export { PostList, type PostListProps } from "./PostList.js";
 export { StatusBadge, type StatusBadgeProps } from "./StatusBadge.js";