@jant/core 0.3.35 → 0.3.37

package/src/ui/dash/PageForm.tsx

@@ -1,185 +0,0 @@
-/**
- * Page Creation/Edit Form
- *
- * For managing standalone pages (about, now, etc.)
- */
-
-import type { FC } from "hono/jsx";
-import type { Page } from "../../types.js";
-import { useLingui } from "@lingui/react/macro";
-
-export interface PageFormProps {
-  page?: Page;
-  action: string;
-  cancelUrl?: string;
-}
-
-export const PageForm: FC<PageFormProps> = ({
-  page,
-  action,
-  cancelUrl = "/dash/pages",
-}) => {
-  const { t } = useLingui();
-  const isEdit = !!page;
-
-  const signals = JSON.stringify({
-    title: page?.title ?? "",
-    slug: page?.slug ?? "",
-    body: page?.body ?? "",
-    status: page?.status ?? "published",
-  }).replace(/</g, "\\u003c");
-
-  return (
-    <form
-      data-signals={signals}
-      data-on:submit__prevent={`@post('${action}')`}
-      data-indicator="_loading"
-      class="flex flex-col gap-4"
-    >
-      <div id="page-form-message"></div>
-
-      {/* Title */}
-      <div class="field">
-        <label class="label">
-          {t({
-            message: "Title",
-            comment: "@context: Page form field label - title",
-          })}
-        </label>
-        <input
-          type="text"
-          data-bind="title"
-          class="input"
-          placeholder={t({
-            message: "Page title...",
-            comment: "@context: Page title placeholder",
-          })}
-          required
-        />
-      </div>
-
-      {/* Slug */}
-      <div class="field">
-        <label class="label">
-          {t({
-            message: "Slug",
-            comment: "@context: Page form field label - URL slug",
-          })}
-        </label>
-        <div class="flex items-center gap-2">
-          <span class="text-muted-foreground">/</span>
-          <input
-            type="text"
-            data-bind="slug"
-            class="input flex-1"
-            placeholder="about"
-            pattern="[a-z0-9\-]+"
-            title={t({
-              message: "Lowercase letters, numbers, and hyphens only",
-              comment: "@context: Page slug validation message",
-            })}
-            required
-          />
-        </div>
-        <p class="text-xs text-muted-foreground mt-1">
-          {t({
-            message:
-              "The URL path for this page. Use lowercase letters, numbers, and hyphens.",
-            comment: "@context: Page slug helper text",
-          })}
-        </p>
-      </div>
-
-      {/* Body */}
-      <div class="field">
-        <label class="label">
-          {t({
-            message: "Content",
-            comment: "@context: Page form field label - content",
-          })}
-        </label>
-        <textarea
-          data-bind="body"
-          class="textarea min-h-48"
-          placeholder={t({
-            message: "Page content (Markdown supported)...",
-            comment: "@context: Page content placeholder",
-          })}
-          required
-        >
-          {page?.body ?? ""}
-        </textarea>
-      </div>
-
-      {/* Status */}
-      <div class="field">
-        <label class="label">
-          {t({
-            message: "Status",
-            comment: "@context: Page form field label - publish status",
-          })}
-        </label>
-        <select data-bind="status" class="select">
-          <option
-            value="published"
-            selected={page?.status === "published" || !page}
-          >
-            {t({
-              message: "Published",
-              comment: "@context: Page status option - published",
-            })}
-          </option>
-          <option value="draft" selected={page?.status === "draft"}>
-            {t({
-              message: "Draft",
-              comment: "@context: Page status option - draft",
-            })}
-          </option>
-        </select>
-        <p class="text-xs text-muted-foreground mt-1">
-          {t({
-            message:
-              "Published pages are accessible via their slug. Drafts are not visible.",
-            comment: "@context: Page status helper text",
-          })}
-        </p>
-      </div>
-
-      {/* Submit */}
-      <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>
-          {isEdit
-            ? t({
-                message: "Update Page",
-                comment: "@context: Button to update existing page",
-              })
-            : t({
-                message: "Create Page",
-                comment: "@context: Button to create new page",
-              })}
-        </button>
-        <a href={cancelUrl} class="btn-outline">
-          {t({
-            message: "Cancel",
-            comment: "@context: Button to cancel and go back",
-          })}
-        </a>
-      </div>
-    </form>
-  );
-};

package/src/ui/dash/PostList.tsx

@@ -1,95 +0,0 @@
-/**
- * Post List Component
- */
-
-import type { FC } from "hono/jsx";
-import { useLingui } from "@lingui/react/macro";
-import type { PostView } from "../../types.js";
-import * as sqid from "../../lib/sqid.js";
-import { StatusBadge } from "./StatusBadge.js";
-import { FormatBadge } from "./FormatBadge.js";
-import { EmptyState } from "../shared/EmptyState.js";
-import { ListItemRow } from "./ListItemRow.js";
-import { ActionButtons } from "./ActionButtons.js";
-
-export interface PostListProps {
-  posts: PostView[];
-}
-
-export const PostList: FC<PostListProps> = ({ posts }) => {
-  const { t } = useLingui();
-  if (posts.length === 0) {
-    return (
-      <EmptyState
-        message={t({
-          message: "No posts yet.",
-          comment: "@context: Empty state message when no posts exist",
-        })}
-        ctaText={t({
-          message: "Create your first post",
-          comment: "@context: Button in empty state to create first post",
-        })}
-        ctaHref="/dash/posts/new"
-      />
-    );
-  }
-
-  return (
-    <div class="flex flex-col divide-y">
-      {posts.map((post) => (
-        <ListItemRow
-          key={post.id}
-          actions={
-            <ActionButtons
-              editHref={`/dash/posts/${sqid.encode(post.id)}/edit`}
-              editLabel={t({
-                message: "Edit",
-                comment: "@context: Button to edit post",
-              })}
-              viewHref={post.permalink}
-              viewLabel={t({
-                message: "View",
-                comment: "@context: Button to view post on public site",
-              })}
-              deleteAction={`/dash/posts/${sqid.encode(post.id)}/delete`}
-              deleteConfirm={t({
-                message:
-                  "Are you sure you want to delete this post? This cannot be undone.",
-                comment:
-                  "@context: Confirmation dialog when deleting a post from the list",
-              })}
-            />
-          }
-        >
-          <div class="flex items-center gap-2 mb-1">
-            <FormatBadge type={post.format} />
-            <StatusBadge
-              status={post.status}
-              featured={post.featured}
-              pinned={post.pinned}
-            />
-            <span class="text-xs text-muted-foreground">
-              {post.publishedAtFormatted}
-            </span>
-          </div>
-          <a
-            href={`/dash/posts/${sqid.encode(post.id)}`}
-            class="font-medium hover:underline"
-          >
-            {post.title ||
-              post.body?.slice(0, 60) ||
-              t({
-                message: "Untitled",
-                comment: "@context: Default title for untitled post",
-              })}
-          </a>
-          {post.body && !post.title && (
-            <p class="text-sm text-muted-foreground mt-1 line-clamp-2">
-              {post.body.slice(0, 120)}
-            </p>
-          )}
-        </ListItemRow>
-      ))}
-    </div>
-  );
-};

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