@jant/core 0.3.36 → 0.3.37

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:
-            "Nothing published yet. Write your first post to get started.",
-          comment: "@context: Empty state message when no posts exist",
-        })}
-        ctaText={t({
-          message: "Write 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: "Delete this post permanently? This can't 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}
-              visibility={post.visibility}
-              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/media/MediaListContent.tsx

@@ -1,206 +0,0 @@
-/**
- * Media grid list with upload UI
- */
-
-import { useLingui } from "@lingui/react/macro";
-import type { Media } from "../../../types.js";
-import { EmptyState } from "../index.js";
-import {
-  getMediaUrl,
-  getImageUrl,
-  getPublicUrlForProvider,
-} from "../../../lib/image.js";
-import { UPLOAD_ACCEPT } from "../../../lib/upload.js";
-
-function formatSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-
-function MediaCard({
-  media,
-  r2PublicUrl,
-  imageTransformUrl,
-  s3PublicUrl,
-}: {
-  media: Media;
-  r2PublicUrl?: string;
-  imageTransformUrl?: string;
-  s3PublicUrl?: string;
-}) {
-  const publicUrl = getPublicUrlForProvider(
-    media.provider,
-    r2PublicUrl,
-    s3PublicUrl,
-  );
-  const fullUrl = getMediaUrl(media.storageKey, publicUrl);
-  const thumbnailUrl = getImageUrl(fullUrl, imageTransformUrl, {
-    width: 300,
-    quality: 80,
-    format: "auto",
-    fit: "cover",
-  });
-  const isImage = media.mimeType.startsWith("image/");
-
-  return (
-    <div class="group relative" data-media-id={media.id}>
-      {isImage ? (
-        <button
-          type="button"
-          class="block w-full aspect-square bg-muted rounded-lg overflow-hidden border hover:border-primary cursor-pointer"
-          onclick={`document.getElementById('lightbox-img').src = '${fullUrl}'; document.getElementById('lightbox').showModal()`}
-        >
-          <img
-            src={thumbnailUrl}
-            alt={media.alt || media.originalName}
-            class="w-full h-full object-cover"
-            loading="lazy"
-          />
-        </button>
-      ) : (
-        <a
-          href={`/dash/media/${media.id}`}
-          class="block aspect-square bg-muted rounded-lg overflow-hidden border hover:border-primary"
-        >
-          <div class="w-full h-full flex items-center justify-center text-muted-foreground">
-            <span class="text-xs">{media.mimeType}</span>
-          </div>
-        </a>
-      )}
-      <a
-        href={`/dash/media/${media.id}`}
-        class="block mt-2 text-xs truncate hover:underline"
-        title={media.originalName}
-      >
-        {media.originalName}
-      </a>
-      <div class="text-xs text-muted-foreground">{formatSize(media.size)}</div>
-    </div>
-  );
-}
-
-export function MediaListContent({
-  mediaList,
-  r2PublicUrl,
-  imageTransformUrl,
-  s3PublicUrl,
-  uploadMaxFileSize,
-}: {
-  mediaList: Media[];
-  r2PublicUrl?: string;
-  imageTransformUrl?: string;
-  s3PublicUrl?: string;
-  uploadMaxFileSize?: number;
-}) {
-  const { t } = useLingui();
-
-  const processingText = t({
-    message: "Processing...",
-    comment: "@context: Upload status - processing",
-  });
-  const uploadingText = t({
-    message: "Uploading...",
-    comment: "@context: Upload status - uploading",
-  });
-  const uploadText = t({
-    message: "Upload",
-    comment: "@context: Button to upload media file",
-  });
-  const errorText = t({
-    message: "Upload didn't go through. Try again in a moment.",
-    comment: "@context: Upload error message",
-  });
-
-  return (
-    <>
-      {/* Hidden form for Datastar-driven upload */}
-      <form
-        id="upload-form"
-        class="hidden"
-        enctype="multipart/form-data"
-        data-on:submit__prevent="@post('/api/upload', {contentType: 'form'})"
-      >
-        <input id="upload-file-input" type="file" name="file" />
-      </form>
-
-      {/* Header */}
-      <div class="flex items-center justify-between mb-6">
-        <h1 class="text-2xl font-semibold">
-          {t({ message: "Media", comment: "@context: Media main heading" })}
-        </h1>
-        <label class="btn cursor-pointer">
-          <span>{uploadText}</span>
-          <input
-            type="file"
-            class="hidden"
-            accept={UPLOAD_ACCEPT}
-            data-media-upload
-            data-max-file-size={uploadMaxFileSize ?? 500}
-            data-text-processing={processingText}
-            data-text-uploading={uploadingText}
-            data-text-error={errorText}
-          />
-        </label>
-      </div>
-
-      {/* Upload instructions */}
-      <div class="card mb-6">
-        <section class="text-sm text-muted-foreground">
-          <p>
-            {t({
-              message:
-                "Images are automatically optimized (resized, converted to WebP). Video, audio, and PDF files are uploaded as-is (max 200MB).",
-              comment:
-                "@context: Media upload instructions - auto optimization",
-            })}
-          </p>
-        </section>
-      </div>
-
-      {/* Media grid or empty state */}
-      <div id="media-content">
-        {mediaList.length === 0 ? (
-          <div id="empty-state">
-            <EmptyState
-              message={t({
-                message:
-                  "Your media library is empty. Upload your first file to get started.",
-                comment: "@context: Empty state message when no media exists",
-              })}
-            />
-          </div>
-        ) : (
-          <div
-            id="media-grid"
-            class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4"
-          >
-            {mediaList.map((m) => (
-              <MediaCard
-                key={m.id}
-                media={m}
-                r2PublicUrl={r2PublicUrl}
-                imageTransformUrl={imageTransformUrl}
-                s3PublicUrl={s3PublicUrl}
-              />
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* Lightbox */}
-      <dialog
-        id="lightbox"
-        class="p-0 m-auto bg-transparent backdrop:bg-black/80"
-        onclick="event.target === this && this.close()"
-      >
-        <img
-          id="lightbox-img"
-          src=""
-          alt=""
-          class="max-w-[90vw] max-h-[90vh] object-contain rounded-lg"
-        />
-      </dialog>
-    </>
-  );
-}

package/src/ui/dash/media/ViewMediaContent.tsx

@@ -1,208 +0,0 @@
-/**
- * Single media detail view
- */
-
-import { useLingui } from "@lingui/react/macro";
-import type { Media } from "../../../types.js";
-import { DangerZone } from "../index.js";
-import * as time from "../../../lib/time.js";
-import {
-  getMediaUrl,
-  getImageUrl,
-  getPublicUrlForProvider,
-} from "../../../lib/image.js";
-
-function formatSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-
-export function ViewMediaContent({
-  media,
-  r2PublicUrl,
-  imageTransformUrl,
-  s3PublicUrl,
-}: {
-  media: Media;
-  r2PublicUrl?: string;
-  imageTransformUrl?: string;
-  s3PublicUrl?: string;
-}) {
-  const { t } = useLingui();
-  const publicUrl = getPublicUrlForProvider(
-    media.provider,
-    r2PublicUrl,
-    s3PublicUrl,
-  );
-  const url = getMediaUrl(media.storageKey, publicUrl);
-  const thumbnailUrl = getImageUrl(url, imageTransformUrl, {
-    width: 600,
-    quality: 85,
-    format: "auto",
-  });
-  const isImage = media.mimeType.startsWith("image/");
-
-  return (
-    <>
-      <div class="flex items-center justify-between mb-6">
-        <div>
-          <h1 class="text-2xl font-semibold">{media.originalName}</h1>
-          <p class="text-muted-foreground mt-1">
-            {formatSize(media.size)} · {media.mimeType} ·{" "}
-            {time.formatDate(media.createdAt)}
-          </p>
-        </div>
-        <a href="/dash/media" class="btn-outline">
-          {t({
-            message: "Back",
-            comment: "@context: Button to go back to media list",
-          })}
-        </a>
-      </div>
-
-      <div class="grid gap-6 md:grid-cols-2">
-        {/* Preview */}
-        <div class="card">
-          <header>
-            <h2>
-              {t({
-                message: "Preview",
-                comment: "@context: Media detail section - preview",
-              })}
-            </h2>
-          </header>
-          <section>
-            {isImage ? (
-              <>
-                <button
-                  type="button"
-                  class="cursor-pointer"
-                  onclick={`document.getElementById('lightbox-img').src = '${url}'; document.getElementById('lightbox').showModal()`}
-                >
-                  <img
-                    src={thumbnailUrl}
-                    alt={media.alt || media.originalName}
-                    class="max-w-full rounded-lg hover:opacity-90 transition-opacity"
-                  />
-                </button>
-                <p class="text-xs text-muted-foreground mt-2">
-                  {t({
-                    message: "Click image to view full size",
-                    comment: "@context: Hint to click image for lightbox",
-                  })}
-                </p>
-              </>
-            ) : (
-              <div class="aspect-video bg-muted rounded-lg flex items-center justify-center text-muted-foreground">
-                <span>{media.mimeType}</span>
-              </div>
-            )}
-          </section>
-        </div>
-
-        {/* Details */}
-        <div class="space-y-6">
-          <div class="card">
-            <header>
-              <h2>
-                {t({
-                  message: "URL",
-                  comment: "@context: Media detail section - URL",
-                })}
-              </h2>
-            </header>
-            <section>
-              <div class="flex items-center gap-2">
-                <input
-                  type="text"
-                  class="input flex-1 font-mono text-sm"
-                  value={url}
-                  readonly
-                />
-                <button
-                  type="button"
-                  class="btn-outline"
-                  onclick={`navigator.clipboard.writeText('${url}')`}
-                >
-                  {t({
-                    message: "Copy",
-                    comment: "@context: Button to copy URL to clipboard",
-                  })}
-                </button>
-              </div>
-              <p class="text-xs text-muted-foreground mt-2">
-                {t({
-                  message: "Use this URL to embed the media in your posts.",
-                  comment: "@context: Media URL helper text",
-                })}
-              </p>
-            </section>
-          </div>
-
-          <div class="card">
-            <header>
-              <h2>
-                {t({
-                  message: "Markdown",
-                  comment: "@context: Media detail section - Markdown snippet",
-                })}
-              </h2>
-            </header>
-            <section>
-              <div class="flex items-center gap-2">
-                <input
-                  type="text"
-                  class="input flex-1 font-mono text-sm"
-                  value={`![${media.alt || media.originalName}](${url})`}
-                  readonly
-                />
-                <button
-                  type="button"
-                  class="btn-outline"
-                  onclick={`navigator.clipboard.writeText('![${media.alt || media.originalName}](${url})')`}
-                >
-                  {t({
-                    message: "Copy",
-                    comment: "@context: Button to copy Markdown to clipboard",
-                  })}
-                </button>
-              </div>
-            </section>
-          </div>
-
-          {/* Delete */}
-          <DangerZone
-            actionLabel={t({
-              message: "Delete Media",
-              comment: "@context: Button to delete media",
-            })}
-            formAction={`/dash/media/${media.id}/delete`}
-            confirmMessage="Delete this file permanently?"
-            description={t({
-              message:
-                "This file will be permanently removed from storage. Posts using it will show a broken link.",
-              comment: "@context: Warning message before deleting media",
-            })}
-          />
-        </div>
-      </div>
-
-      {/* Lightbox */}
-      {isImage && (
-        <dialog
-          id="lightbox"
-          class="p-0 m-auto bg-transparent backdrop:bg-black/80"
-          onclick="event.target === this && this.close()"
-        >
-          <img
-            id="lightbox-img"
-            src=""
-            alt=""
-            class="max-w-[90vw] max-h-[90vh] object-contain rounded-lg"
-          />
-        </dialog>
-      )}
-    </>
-  );
-}

package/src/ui/dash/pages/PagesContent.tsx

@@ -1,75 +0,0 @@
-/**
- * Pages list — page CRUD only
- */
-
-import { useLingui } from "@lingui/react/macro";
-import type { Page } from "../../../types.js";
-import { ListItemRow, ActionButtons, CrudPageHeader } from "../index.js";
-
-export function PagesContent({ pages }: { pages: Page[] }) {
-  const { t } = useLingui();
-
-  return (
-    <>
-      <CrudPageHeader
-        title={t({
-          message: "Pages",
-          comment: "@context: Pages main heading",
-        })}
-      >
-        <a href="/dash/pages/new" class="btn">
-          {t({
-            message: "New Page",
-            comment: "@context: Button to create new page",
-          })}
-        </a>
-      </CrudPageHeader>
-
-      {pages.length === 0 ? (
-        <p class="text-sm text-muted-foreground py-4">
-          {t({
-            message:
-              "No pages yet. Create one to add static content to your site.",
-            comment: "@context: Empty state for pages list",
-          })}
-        </p>
-      ) : (
-        <div class="flex flex-col divide-y">
-          {pages.map((page) => (
-            <ListItemRow
-              key={page.id}
-              actions={
-                <ActionButtons
-                  editHref={`/dash/pages/${page.id}/edit`}
-                  editLabel={t({
-                    message: "Edit",
-                    comment: "@context: Button to edit page",
-                  })}
-                  viewHref={
-                    page.status !== "draft" ? `/${page.slug}` : undefined
-                  }
-                  viewLabel={t({
-                    message: "View",
-                    comment: "@context: Button to view page on public site",
-                  })}
-                />
-              }
-            >
-              <a
-                href={`/dash/pages/${page.id}`}
-                class="font-medium hover:underline"
-              >
-                {page.title ||
-                  t({
-                    message: "Untitled",
-                    comment: "@context: Default title for untitled page",
-                  })}
-              </a>
-              <p class="text-sm text-muted-foreground mt-1">/{page.slug}</p>
-            </ListItemRow>
-          ))}
-        </div>
-      )}
-    </>
-  );
-}