@jant/core 0.3.36 → 0.3.38

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

@@ -1,260 +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 attached.",
-      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",
-    }),
-    visibilityLabel: t({
-      message: "Visibility",
-      comment: "@context: Post form field - post visibility",
-    }),
-    visibilityListed: t({
-      message: "Listed",
-      comment: "@context: Visibility option - appears everywhere",
-    }),
-    visibilityFeatured: t({
-      message: "Featured",
-      comment: "@context: Visibility option - highlighted on featured page",
-    }),
-    visibilityUnlisted: t({
-      message: "Unlisted",
-      comment: "@context: Visibility option - hidden from feeds",
-    }),
-    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.",
-          comment: "@context: Toast after editing post",
-        })
-      : t({
-          message: "Post published.",
-          comment: "@context: Toast after creating post",
-        }),
-    submitErrorMessage: t({
-      message: "Couldn't save your post. Try again in a moment.",
-      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",
-    visibility: post?.visibility ?? "listed",
-    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/layouts/DashLayout.tsx

@@ -1,247 +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 DashBreadcrumb {
-  parent: string;
-  parentHref: string;
-  current: string;
-}
-
-export interface DashLayoutProps {
-  c: Context;
-  title: string;
-  siteName: string;
-  siteAvatarUrl?: string;
-  currentPath?: string;
-  breadcrumb?: DashBreadcrumb;
-  toast?: ToastProps;
-}
-
-const AVATAR_COLORS = [
-  "#737fab", // slate blue
-  "#8d7dab", // muted violet
-  "#ab7d8d", // dusty rose
-  "#ab917d", // warm taupe
-  "#7dab8d", // sage green
-  "#7d9bab", // steel blue
-  "#9a8d7d", // earth brown
-  "#7dabab", // teal grey
-];
-
-function hashString(str: string): number {
-  let hash = 5381;
-  for (let i = 0; i < str.length; i++) {
-    hash = (hash * 33) ^ str.charCodeAt(i);
-  }
-  return Math.abs(hash);
-}
-
-function DashLayoutContent({
-  siteName,
-  siteAvatarUrl,
-  currentPath,
-  breadcrumb,
-  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">
-          <a href="/dash" class="dash-header-avatar-link">
-            {siteAvatarUrl ? (
-              <img src={siteAvatarUrl} alt="" class="dash-header-avatar" />
-            ) : (
-              <span
-                class="dash-header-avatar dash-header-avatar-fallback"
-                style={`background-color: ${AVATAR_COLORS[hashString(siteName) % AVATAR_COLORS.length]}`}
-              >
-                {siteName.charAt(0).toUpperCase()}
-              </span>
-            )}
-          </a>
-          <nav class="dash-header-nav">
-            <a href="/dash" class={navClass(/^\/dash$/)}>
-              {t({
-                message: "Dashboard",
-                comment: "@context: Dashboard navigation - dashboard home",
-              })}
-            </a>
-            <span class="dash-header-nav-sep" aria-hidden="true">
-              &middot;
-            </span>
-            <a href="/dash/pages" class={navClass(/^\/dash\/pages/)}>
-              {t({
-                message: "Pages",
-                comment: "@context: Dashboard navigation - pages management",
-              })}
-            </a>
-            <span class="dash-header-nav-sep" aria-hidden="true">
-              &middot;
-            </span>
-            <a href="/dash/settings" class={navClass(/^\/dash\/settings/)}>
-              {t({
-                message: "Settings",
-                comment: "@context: Dashboard navigation - site settings",
-              })}
-            </a>
-          </nav>
-
-          <div class="dash-header-right">
-            <a
-              href="/"
-              class="dash-header-visit"
-              target="_blank"
-              aria-label={t({
-                message: "Visit Blog",
-                comment:
-                  "@context: Dashboard header link to visit the public blog",
-              })}
-            >
-              <span
-                class="dash-header-visit-icon"
-                data-tooltip={t({
-                  message: "Visit Blog",
-                  comment:
-                    "@context: Dashboard header tooltip for visit blog icon on mobile",
-                })}
-                data-side="bottom"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
-                  <path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6" />
-                  <path d="m21 3-9 9" />
-                  <path d="M15 3h6v6" />
-                </svg>
-              </span>
-              <span class="dash-header-visit-text">
-                {t({
-                  message: "Visit Blog",
-                  comment:
-                    "@context: Dashboard header link text to visit the public blog",
-                })}
-                <span class="ml-1" aria-hidden="true">
-                  {"\u2197"}
-                </span>
-              </span>
-            </a>
-
-            <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>
-        </div>
-      </header>
-
-      {breadcrumb && (
-        <div class="container">
-          <nav class="dash-breadcrumb">
-            <a href={breadcrumb.parentHref} class="dash-breadcrumb-parent">
-              {breadcrumb.parent}
-            </a>
-            <span class="dash-breadcrumb-sep">/</span>
-            <span class="dash-breadcrumb-current">{breadcrumb.current}</span>
-          </nav>
-        </div>
-      )}
-
-      {/* Main */}
-      <div class="container py-8">
-        <main>{children}</main>
-      </div>
-    </div>
-  );
-}
-
-export const DashLayout: FC<PropsWithChildren<DashLayoutProps>> = ({
-  c,
-  title,
-  siteName,
-  siteAvatarUrl,
-  currentPath,
-  breadcrumb,
-  toast,
-  children,
-}) => {
-  return (
-    <BaseLayout
-      title={`${title} - ${siteName}`}
-      c={c}
-      toast={toast}
-      isAuthenticated={true}
-    >
-      <DashLayoutContent
-        siteName={siteName}
-        siteAvatarUrl={siteAvatarUrl}
-        currentPath={currentPath}
-        breadcrumb={breadcrumb}
-      >
-        {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>
-  );
-};