@jant/core 0.3.35 → 0.3.37

package/src/ui/dash/posts/PostForm.tsx

@@ -1,248 +0,0 @@
-/**
- * Post Form
- *
- * Server-rendered wrapper that feeds data/labels to `<jant-post-form>`.
- * Provides SSR fallback skeleton while Lit hydrates.
- */
-
-import { useLingui } from "@lingui/react/macro";
-import type { FC } from "hono/jsx";
-import type { Post, Media, Collection } from "../../../types.js";
-import {
-  getMediaUrl,
-  getImageUrl,
-  getPublicUrlForProvider,
-} from "../../../lib/image.js";
-import { renderCollectionIcon } from "../../../lib/icons.js";
-
-export interface PostFormProps {
-  post?: Post;
-  action: string;
-  mediaAttachments?: Media[];
-  r2PublicUrl?: string;
-  imageTransformUrl?: string;
-  s3PublicUrl?: string;
-  collections?: Collection[];
-  postCollectionIds?: number[];
-  cancelHref?: string;
-}
-
-export const PostForm: FC<PostFormProps> = ({
-  post,
-  action,
-  mediaAttachments = [],
-  r2PublicUrl,
-  imageTransformUrl,
-  s3PublicUrl,
-  collections = [],
-  postCollectionIds = [],
-  cancelHref,
-}) => {
-  const { t } = useLingui();
-  const isEdit = Boolean(post);
-
-  const labels = JSON.stringify({
-    formatLabel: t({
-      message: "Format",
-      comment: "@context: Post form field - post format",
-    }),
-    noteOption: t({
-      message: "Note",
-      comment: "@context: Post format option",
-    }),
-    linkOption: t({
-      message: "Link",
-      comment: "@context: Post format option",
-    }),
-    quoteOption: t({
-      message: "Quote",
-      comment: "@context: Post format option",
-    }),
-    titleLabel: t({
-      message: "Title (optional)",
-      comment: "@context: Post form field",
-    }),
-    titlePlaceholder: t({
-      message: "Post title...",
-      comment: "@context: Post title placeholder",
-    }),
-    bodyLabel: t({
-      message: "Content",
-      comment: "@context: Post form field",
-    }),
-    bodyPlaceholder: t({
-      message: "What's on your mind?",
-      comment: "@context: Post content placeholder",
-    }),
-    urlLabel: t({
-      message: "URL (optional)",
-      comment: "@context: Post form field - source URL",
-    }),
-    urlPlaceholder: "https://...",
-    quoteTextLabel: t({
-      message: "Quote Text",
-      comment: "@context: Post form field - quoted text",
-    }),
-    quoteTextPlaceholder: t({
-      message: "The text being quoted...",
-      comment: "@context: Quote text placeholder",
-    }),
-    mediaLabel: t({
-      message: "Media",
-      comment: "@context: Post form field - media attachments",
-    }),
-    mediaAddButton: t({
-      message: "Add Media",
-      comment: "@context: Button to open media picker",
-    }),
-    mediaRemoveButton: t({
-      message: "Remove",
-      comment: "@context: Remove media attachment button",
-    }),
-    mediaEmptyLabel: t({
-      message: "No media selected yet.",
-      comment: "@context: Post form media empty state",
-    }),
-    statusLabel: t({
-      message: "Status",
-      comment: "@context: Post form field",
-    }),
-    statusPublished: t({
-      message: "Published",
-      comment: "@context: Post status option",
-    }),
-    statusDraft: t({
-      message: "Draft",
-      comment: "@context: Post status option",
-    }),
-    featuredLabel: t({
-      message: "Featured",
-      comment: "@context: Post form checkbox - mark as featured",
-    }),
-    pinnedLabel: t({
-      message: "Pinned",
-      comment: "@context: Post form checkbox - pin to top",
-    }),
-    collectionsLabel: t({
-      message: "Collections (optional)",
-      comment: "@context: Post form field - assign to collections",
-    }),
-    submitLabel: isEdit
-      ? t({
-          message: "Update",
-          comment: "@context: Button to update existing post",
-        })
-      : t({
-          message: "Publish",
-          comment: "@context: Button to publish new post",
-        }),
-    cancelLabel: t({
-      message: "Cancel",
-      comment: "@context: Button to cancel form",
-    }),
-    mediaDialogTitle: t({
-      message: "Select Media",
-      comment: "@context: Media picker dialog title",
-    }),
-    mediaDialogDone: t({
-      message: "Done",
-      comment: "@context: Close media picker button",
-    }),
-    mediaDialogLoading: t({
-      message: "Loading...",
-      comment: "@context: Loading state for media picker",
-    }),
-    submitSuccessMessage: isEdit
-      ? t({
-          message: "Post updated successfully.",
-          comment: "@context: Toast after editing post",
-        })
-      : t({
-          message: "Post published successfully.",
-          comment: "@context: Toast after creating post",
-        }),
-    submitErrorMessage: t({
-      message: "Failed to save post. Please try again.",
-      comment: "@context: Toast when post save fails",
-    }),
-  }).replace(/</g, "\\u003c");
-
-  const initial = JSON.stringify({
-    format: post?.format ?? "note",
-    title: post?.title ?? "",
-    body: post?.body ?? "",
-    url: post?.url ?? "",
-    quoteText: post?.quoteText ?? "",
-    status: post?.status ?? "published",
-    featured: post?.featured === 1,
-    pinned: post?.pinned === 1,
-    rating: post?.rating ?? 0,
-    collectionIds: postCollectionIds,
-    mediaIds: mediaAttachments.map((m) => m.id),
-  }).replace(/</g, "\\u003c");
-
-  const media = JSON.stringify(
-    mediaAttachments.map((m) => {
-      const pUrl = getPublicUrlForProvider(
-        m.provider,
-        r2PublicUrl,
-        s3PublicUrl,
-      );
-      const mediaUrl = getMediaUrl(m.storageKey, pUrl);
-      const thumbUrl = getImageUrl(mediaUrl, imageTransformUrl, {
-        width: 150,
-        quality: 80,
-        format: "auto",
-        fit: "cover",
-      });
-      return {
-        id: m.id,
-        thumbUrl,
-        alt: m.alt || m.originalName,
-      };
-    }),
-  ).replace(/</g, "\\u003c");
-
-  const collectionOptions = JSON.stringify(
-    collections.map((col) => ({
-      id: col.id,
-      title: col.title,
-      icon: col.icon,
-      iconHtml: renderCollectionIcon(col.icon, { size: 18 }),
-    })),
-  ).replace(/</g, "\\u003c");
-
-  const cancel = cancelHref ?? "/dash/posts";
-
-  return (
-    <jant-post-form
-      labels={labels}
-      initial={initial}
-      action={action}
-      cancel-href={cancel}
-      media={media}
-      collections={collectionOptions}
-      media-picker-url="/dash/media/picker"
-      is-edit={isEdit ? "true" : undefined}
-    >
-      <div class="flex flex-col gap-4 max-w-2xl">
-        <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-24"></div>
-          <div class="btn-outline skel-input min-w-20"></div>
-        </div>
-      </div>
-    </jant-post-form>
-  );
-};

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

package/src/ui/layouts/DashLayout.tsx

@@ -1,165 +0,0 @@
-/**
- * Dashboard Layout
- *
- * Layout for admin dashboard pages
- */
-
-import type { FC, PropsWithChildren } from "hono/jsx";
-import type { Context } from "hono";
-import { useLingui } from "@lingui/react/macro";
-import { BaseLayout, type ToastProps } from "./BaseLayout.js";
-
-export interface DashLayoutProps {
-  c: Context;
-  title: string;
-  siteName: string;
-  currentPath?: string;
-  toast?: ToastProps;
-}
-
-function DashLayoutContent({
-  siteName,
-  currentPath,
-  children,
-}: PropsWithChildren<Omit<DashLayoutProps, "c" | "title">>) {
-  const { t } = useLingui();
-
-  const navClass = (match: RegExp) =>
-    `dash-header-link ${currentPath && match.test(currentPath) ? "dash-header-link-active" : ""}`;
-
-  return (
-    <div class="min-h-screen">
-      {/* Header */}
-      <header class="dash-header">
-        <div class="container dash-header-inner">
-          <div class="dash-header-left">
-            <a id="site-name" href="/dash" class="dash-header-logo">
-              {siteName}
-            </a>
-            <a
-              href="/"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="dash-header-site-link"
-              aria-label={t({
-                message: "View Site",
-                comment:
-                  "@context: Dashboard header link to view the public site",
-              })}
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="14"
-                height="14"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path d="M15 3h6v6" />
-                <path d="M10 14 21 3" />
-                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
-              </svg>
-            </a>
-          </div>
-
-          <nav class="dash-header-nav">
-            <a href="/dash/pages" class={navClass(/^\/dash\/pages/)}>
-              {t({
-                message: "Pages",
-                comment: "@context: Dashboard navigation - pages management",
-              })}
-            </a>
-            <a href="/dash/appearance" class={navClass(/^\/dash\/appearance/)}>
-              {t({
-                message: "Appearance",
-                comment: "@context: Dashboard navigation - appearance settings",
-              })}
-            </a>
-            <a href="/dash/settings" class={navClass(/^\/dash\/settings/)}>
-              {t({
-                message: "Settings",
-                comment: "@context: Dashboard navigation - site settings",
-              })}
-            </a>
-          </nav>
-
-          <div class="dropdown-menu">
-            <button
-              type="button"
-              id="dash-menu-trigger"
-              class="dash-header-menu-btn"
-              aria-haspopup="menu"
-              aria-controls="dash-menu"
-              aria-expanded="false"
-              aria-label={t({
-                message: "Menu",
-                comment: "@context: Dashboard header menu button",
-              })}
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-              >
-                <circle cx="5" cy="12" r="2" />
-                <circle cx="12" cy="12" r="2" />
-                <circle cx="19" cy="12" r="2" />
-              </svg>
-            </button>
-            <div
-              id="dash-menu-popover"
-              data-popover
-              data-align="end"
-              aria-hidden="true"
-            >
-              <div
-                role="menu"
-                id="dash-menu"
-                aria-labelledby="dash-menu-trigger"
-              >
-                <a href="/signout" role="menuitem">
-                  {t({
-                    message: "Sign Out",
-                    comment: "@context: Dashboard menu item to sign out",
-                  })}
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </header>
-
-      {/* Main */}
-      <div class="container py-8">
-        <main>{children}</main>
-      </div>
-    </div>
-  );
-}
-
-export const DashLayout: FC<PropsWithChildren<DashLayoutProps>> = ({
-  c,
-  title,
-  siteName,
-  currentPath,
-  toast,
-  children,
-}) => {
-  return (
-    <BaseLayout
-      title={`${title} - ${siteName}`}
-      c={c}
-      toast={toast}
-      isAuthenticated={true}
-    >
-      <DashLayoutContent siteName={siteName} currentPath={currentPath}>
-        {children}
-      </DashLayoutContent>
-    </BaseLayout>
-  );
-};

package/src/ui/pages/SinglePage.tsx

@@ -1,23 +0,0 @@
-/**
- * Single Page (Custom Page)
- *
- * Custom page view — clean centered content.
- */
-
-import type { FC } from "hono/jsx";
-import type { SinglePageProps } from "../../types.js";
-
-export const SinglePage: FC<SinglePageProps> = ({ page }) => {
-  return (
-    <article class="h-entry py-6" data-page="single-page">
-      {page.title && (
-        <h1 class="p-name text-2xl font-semibold mb-6">{page.title}</h1>
-      )}
-
-      <div
-        class="e-content prose"
-        dangerouslySetInnerHTML={{ __html: page.bodyHtml || "" }}
-      />
-    </article>
-  );
-};

package/src/ui/shared/ThreadView.tsx

@@ -1,136 +0,0 @@
-/**
- * Thread View Component
- *
- * Displays a thread of posts with reply chain visualization
- */
-
-import type { FC } from "hono/jsx";
-import { useLingui } from "@lingui/react/macro";
-import type { Post } from "../../types.js";
-import * as sqid from "../../lib/sqid.js";
-import * as time from "../../lib/time.js";
-
-export interface ThreadViewProps {
-  /** All posts in the thread, ordered by createdAt */
-  posts: Post[];
-  /** ID of the currently viewed post (to highlight) */
-  currentPostId: number;
-}
-
-const ThreadPost: FC<{
-  post: Post;
-  isCurrent: boolean;
-  isRoot: boolean;
-}> = ({ post, isCurrent, isRoot }) => {
-  const { t } = useLingui();
-  return (
-    <article
-      id={`post-${post.id}`}
-      class={`h-entry p-4 rounded-lg border ${
-        isCurrent
-          ? "border-primary bg-primary/5 ring-2 ring-primary/20"
-          : "border-border hover:border-muted-foreground/30"
-      }`}
-    >
-      {post.title && (
-        <h2 class="p-name text-lg font-medium mb-2">
-          <a
-            href={`${post.path ? `/${post.path}` : `/p/${sqid.encode(post.id)}`}`}
-            class="u-url hover:underline"
-          >
-            {post.title}
-          </a>
-        </h2>
-      )}
-
-      <div
-        class="e-content prose prose-sm"
-        dangerouslySetInnerHTML={{ __html: post.bodyHtml || "" }}
-      />
-
-      <footer class="mt-3 flex items-center gap-3 text-sm text-muted-foreground">
-        <time
-          class="dt-published"
-          datetime={time.toISOString(post.publishedAt)}
-        >
-          {time.formatDate(post.publishedAt)}
-        </time>
-        {isRoot && (
-          <span class="text-xs">
-            {t({
-              message: "Thread start",
-              comment: "@context: Thread view indicator - first post in thread",
-            })}
-          </span>
-        )}
-        {!isCurrent && (
-          <a
-            href={`${post.path ? `/${post.path}` : `/p/${sqid.encode(post.id)}`}`}
-            class="text-xs hover:underline"
-          >
-            {t({
-              message: "Permalink",
-              comment: "@context: Link to individual post in thread",
-            })}
-          </a>
-        )}
-      </footer>
-    </article>
-  );
-};
-
-export const ThreadView: FC<ThreadViewProps> = ({ posts, currentPostId }) => {
-  const { t } = useLingui();
-  if (posts.length === 0) {
-    return null;
-  }
-
-  const rootPost = posts[0];
-  const isThread = posts.length > 1;
-
-  // Single post, no thread
-  if (!isThread) {
-    return (
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- Early return for empty array at line 73 guarantees posts[0] exists
-      <ThreadPost post={rootPost!} isCurrent={true} isRoot={false} />
-    );
-  }
-
-  const threadLabel =
-    posts.length === 1
-      ? t({
-          message: "Thread with 1 post",
-          comment: "@context: Thread view header - single post",
-        })
-      : t({
-          message: "Thread with {count} posts",
-          comment: "@context: Thread view header - multiple posts",
-          values: { count: String(posts.length) },
-        });
-
-  return (
-    <div class="thread-view">
-      <div class="mb-4 text-sm text-muted-foreground">{threadLabel}</div>
-
-      <div class="flex flex-col gap-3">
-        {posts.map((post, index) => (
-          <div key={post.id} class="relative">
-            {/* Connection line */}
-            {index > 0 && (
-              <div class="absolute left-6 -top-3 w-0.5 h-3 bg-border" />
-            )}
-            {index < posts.length - 1 && (
-              <div class="absolute left-6 -bottom-3 w-0.5 h-3 bg-border" />
-            )}
-
-            <ThreadPost
-              post={post}
-              isCurrent={post.id === currentPostId}
-              isRoot={index === 0}
-            />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};