@jant/core 0.3.35 → 0.3.36

package/src/ui/dash/appearance/AppearanceNav.tsx

@@ -1,60 +0,0 @@
-/**
- * Appearance sub-navigation tabs
- */
-
-import { useLingui } from "@lingui/react/macro";
-
-export type AppearanceTab = "navigation" | "color" | "fonts" | "advanced";
-
-export function AppearanceNav({ currentTab }: { currentTab: AppearanceTab }) {
-  const { t } = useLingui();
-
-  const tabs: { id: AppearanceTab; label: string; href: string }[] = [
-    {
-      id: "navigation",
-      label: t({
-        message: "Navigation",
-        comment: "@context: Appearance sub-navigation tab",
-      }),
-      href: "/dash/appearance",
-    },
-    {
-      id: "color",
-      label: t({
-        message: "Color Theme",
-        comment: "@context: Appearance sub-navigation tab",
-      }),
-      href: "/dash/appearance/color",
-    },
-    {
-      id: "fonts",
-      label: t({
-        message: "Font Theme",
-        comment: "@context: Appearance sub-navigation tab",
-      }),
-      href: "/dash/appearance/fonts",
-    },
-    {
-      id: "advanced",
-      label: t({
-        message: "Advanced",
-        comment: "@context: Appearance sub-navigation tab",
-      }),
-      href: "/dash/appearance/advanced",
-    },
-  ];
-
-  return (
-    <nav class="dash-subnav">
-      {tabs.map((tab) => (
-        <a
-          key={tab.id}
-          href={tab.href}
-          class={tab.id === currentTab ? "active" : ""}
-        >
-          {tab.label}
-        </a>
-      ))}
-    </nav>
-  );
-}

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

@@ -1,166 +0,0 @@
-/**
- * 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";
-
-interface CollectionFormProps {
-  collection?: Collection;
-  isEdit?: boolean;
-}
-
-export const CollectionForm: FC<CollectionFormProps> = ({
-  collection,
-  isEdit,
-}) => {
-  const { t } = useLingui();
-
-  const heading = isEdit
-    ? t({ message: "Edit Collection", comment: "@context: Page heading" })
-    : t({ message: "New Collection", comment: "@context: Page heading" });
-
-  const submitLabel = isEdit
-    ? t({
-        message: "Update Collection",
-        comment: "@context: Button to save collection changes",
-      })
-    : t({
-        message: "Create Collection",
-        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";
-
-  return (
-    <>
-      <h1 class="text-2xl font-semibold mb-6">{heading}</h1>
-
-      <jant-collection-form
-        labels={labels}
-        initial={initial}
-        action={action}
-        cancel-href={cancelHref}
-        is-edit={isEdit ? "true" : undefined}
-      >
-        <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>
-      </jant-collection-form>
-    </>
-  );
-};

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

@@ -1,146 +0,0 @@
-/**
- * Collections list view with drag-and-drop reordering
- */
-
-import { useLingui } from "@lingui/react/macro";
-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
-        title={t({
-          message: "Collections",
-          comment: "@context: Dashboard heading",
-        })}
-      >
-        <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>
-
-      {!hasItems ? (
-        <EmptyState
-          message={t({
-            message: "No collections yet.",
-            comment: "@context: Empty state message",
-          })}
-          ctaText={t({
-            message: "New Collection",
-            comment: "@context: Button to create new collection",
-          })}
-          ctaHref="/dash/collections/new"
-        />
-      ) : (
-        <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",
-                  })}
-                />
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </>
-  );
-}

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

@@ -1,50 +0,0 @@
-/**
- * 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

@@ -1,103 +0,0 @@
-/**
- * Single collection detail view
- */
-
-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,
-  posts,
-}: {
-  collection: Collection;
-  posts: PostView[];
-}) {
-  const { t } = useLingui();
-  const count = String(posts.length);
-  const postsHeader = t({
-    message: `Posts in Collection (${count})`,
-    comment: "@context: Collection posts section heading",
-  });
-
-  return (
-    <>
-      <div class="flex items-center justify-between mb-6">
-        <div>
-          <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
-          editHref={`/dash/collections/${collection.id}/edit`}
-          editLabel={t({
-            message: "Edit",
-            comment: "@context: Button to edit collection",
-          })}
-          viewHref={`/c/${collection.slug}`}
-          viewLabel={t({
-            message: "View",
-            comment: "@context: Button to view collection",
-          })}
-        />
-      </div>
-
-      {collection.description && (
-        <p class="text-muted-foreground mb-6">{collection.description}</p>
-      )}
-
-      <div class="card">
-        <header>
-          <h2>{postsHeader}</h2>
-        </header>
-        <section>
-          {posts.length === 0 ? (
-            <p class="text-muted-foreground">
-              {t({
-                message: "No posts in this collection.",
-                comment: "@context: Empty state message",
-              })}
-            </p>
-          ) : (
-            <div class="flex flex-col divide-y">
-              {posts.map((post) => (
-                <div key={post.id} class="py-3 flex items-center gap-4">
-                  <div class="flex-1 min-w-0">
-                    <a
-                      href={`/dash/posts/${encode(post.id)}`}
-                      class="font-medium hover:underline"
-                    >
-                      {post.title ||
-                        post.excerpt?.slice(0, 50) ||
-                        `Post #${post.id}`}
-                    </a>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </section>
-      </div>
-
-      <div class="mt-6">
-        <a href="/dash/collections" class="text-sm hover:underline">
-          {t({
-            message: "\u2190 Back to Collections",
-            comment: "@context: Navigation link",
-          })}
-        </a>
-      </div>
-    </>
-  );
-}

package/src/ui/dash/settings/SettingsNav.tsx

@@ -1,52 +0,0 @@
-/**
- * Settings sub-navigation tabs
- */
-
-import { useLingui } from "@lingui/react/macro";
-
-export type SettingsTab = "general" | "redirects" | "account";
-
-export function SettingsNav({ currentTab }: { currentTab: SettingsTab }) {
-  const { t } = useLingui();
-
-  const tabs: { id: SettingsTab; label: string; href: string }[] = [
-    {
-      id: "general",
-      label: t({
-        message: "General",
-        comment: "@context: Settings sub-navigation tab",
-      }),
-      href: "/dash/settings",
-    },
-    {
-      id: "redirects",
-      label: t({
-        message: "Redirects",
-        comment: "@context: Settings sub-navigation tab",
-      }),
-      href: "/dash/settings/redirects",
-    },
-    {
-      id: "account",
-      label: t({
-        message: "Account",
-        comment: "@context: Settings sub-navigation tab",
-      }),
-      href: "/dash/settings/account",
-    },
-  ];
-
-  return (
-    <nav class="dash-subnav">
-      {tabs.map((tab) => (
-        <a
-          key={tab.id}
-          href={tab.href}
-          class={tab.id === currentTab ? "active" : ""}
-        >
-          {tab.label}
-        </a>
-      ))}
-    </nav>
-  );
-}