@jant/core 0.3.25 → 0.3.27

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

@@ -0,0 +1,201 @@
+/**
+ * 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";
+
+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,
+}: {
+  mediaList: Media[];
+  r2PublicUrl?: string;
+  imageTransformUrl?: string;
+  s3PublicUrl?: string;
+}) {
+  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 failed. Please try again.",
+    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="image/*"
+            data-media-upload
+            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 to max 1920px, converted to WebP, and metadata stripped.",
+              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: "No media uploaded yet.",
+                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

@@ -0,0 +1,208 @@
+/**
+ * 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="Are you sure you want to delete this media?"
+            description={t({
+              message:
+                "Deleting this media will remove it permanently from storage.",
+              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/LinkFormContent.tsx

@@ -0,0 +1,119 @@
+/**
+ * Link creation/editing form
+ */
+
+import { useLingui } from "@lingui/react/macro";
+import type { NavItem } from "../../../types.js";
+
+export function LinkFormContent({
+  item,
+  isEdit,
+}: {
+  item?: NavItem;
+  isEdit?: boolean;
+}) {
+  const { t } = useLingui();
+  const title = isEdit
+    ? t({ message: "Edit Link", comment: "@context: Page heading" })
+    : t({ message: "New Link", comment: "@context: Page heading" });
+
+  const signals = JSON.stringify({
+    label: item?.label ?? "",
+    url: item?.url ?? "",
+  }).replace(/</g, "\\u003c");
+
+  const action = isEdit ? `/dash/pages/links/${item?.id}` : "/dash/pages/links";
+
+  return (
+    <>
+      <h1 class="text-2xl font-semibold mb-6">{title}</h1>
+
+      <form
+        data-signals={signals}
+        data-on:submit__prevent={`@post('${action}')`}
+        data-indicator="_loading"
+        class="flex flex-col gap-4 max-w-lg"
+      >
+        <div class="field">
+          <label class="label">
+            {t({
+              message: "Label",
+              comment: "@context: Navigation link form field",
+            })}
+          </label>
+          <input
+            type="text"
+            data-bind="label"
+            class="input"
+            placeholder="Home"
+            required
+          />
+          <p class="text-xs text-muted-foreground mt-1">
+            {t({
+              message: "Display text for the link",
+              comment: "@context: Navigation label help text",
+            })}
+          </p>
+        </div>
+
+        <div class="field">
+          <label class="label">
+            {t({
+              message: "URL",
+              comment: "@context: Navigation link form field",
+            })}
+          </label>
+          <input
+            type="text"
+            data-bind="url"
+            class="input"
+            placeholder="/archive or https://..."
+            required
+          />
+          <p class="text-xs text-muted-foreground mt-1">
+            {t({
+              message:
+                "Path (e.g. /archive) or full URL (e.g. https://example.com)",
+              comment: "@context: Navigation URL help text",
+            })}
+          </p>
+        </div>
+
+        <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: "Save Changes",
+                  comment: "@context: Button to save edited navigation link",
+                })
+              : t({
+                  message: "Create Link",
+                  comment: "@context: Button to save new navigation link",
+                })}
+          </button>
+          <a href="/dash/pages" class="btn-outline">
+            {t({
+              message: "Cancel",
+              comment: "@context: Button to cancel form",
+            })}
+          </a>
+        </div>
+      </form>
+    </>
+  );
+}