@jant/core 0.3.24 → 0.3.26

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

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

@@ -0,0 +1,203 @@
+/**
+ * Unified pages list - navigation items + other pages
+ */
+
+import { useLingui } from "@lingui/react/macro";
+import type { Page, NavItem } from "../../../types.js";
+import { ListItemRow, ActionButtons, CrudPageHeader } from "../index.js";
+
+export function UnifiedPagesContent({
+  navItems,
+  otherPages,
+}: {
+  navItems: NavItem[];
+  otherPages: Page[];
+}) {
+  const { t } = useLingui();
+
+  return (
+    <>
+      <CrudPageHeader
+        title={t({
+          message: "Pages",
+          comment: "@context: Pages main heading",
+        })}
+      >
+        <div class="flex gap-2">
+          <a href="/dash/pages/links/new" class="btn-outline">
+            {t({
+              message: "Add Link",
+              comment: "@context: Button to add a navigation link",
+            })}
+          </a>
+          <a href="/dash/pages/new" class="btn">
+            {t({
+              message: "New Page",
+              comment: "@context: Button to create new page",
+            })}
+          </a>
+        </div>
+      </CrudPageHeader>
+
+      {/* Navigation section */}
+      <section class="mb-8">
+        <h2 class="text-lg font-medium mb-3">
+          {t({
+            message: "Your site navigation",
+            comment: "@context: Section heading for navigation items",
+          })}
+        </h2>
+        {navItems.length === 0 ? (
+          <p class="text-sm text-muted-foreground py-4">
+            {t({
+              message:
+                "No navigation links yet. Add pages to navigation or create links.",
+              comment: "@context: Empty state for navigation section",
+            })}
+          </p>
+        ) : (
+          <div id="nav-links-list" class="flex flex-col divide-y">
+            {navItems.map((item) => (
+              <ListItemRow
+                key={item.id}
+                actions={
+                  item.type === "page" ? (
+                    <>
+                      <ActionButtons
+                        editHref={
+                          item.pageId
+                            ? `/dash/pages/${item.pageId}/edit`
+                            : undefined
+                        }
+                        editLabel={t({
+                          message: "Edit",
+                          comment: "@context: Button to edit page",
+                        })}
+                      />
+                      <button
+                        type="button"
+                        class="btn-sm-ghost"
+                        data-on:click__prevent={`@post('/dash/pages/${item.pageId}/remove-from-nav')`}
+                      >
+                        {t({
+                          message: "Un-nav",
+                          comment:
+                            "@context: Button to remove page from navigation",
+                        })}
+                      </button>
+                    </>
+                  ) : (
+                    <>
+                      <ActionButtons
+                        editHref={`/dash/pages/links/${item.id}/edit`}
+                        editLabel={t({
+                          message: "Edit",
+                          comment: "@context: Button to edit link",
+                        })}
+                        deleteAction={`/dash/pages/links/${item.id}/delete`}
+                        deleteLabel={t({
+                          message: "Delete",
+                          comment: "@context: Button to delete link",
+                        })}
+                      />
+                    </>
+                  )
+                }
+              >
+                <div
+                  class="flex items-center gap-3 cursor-grab"
+                  data-id={item.id}
+                >
+                  <span class="text-muted-foreground select-none">⠿</span>
+                  <div class="flex items-center gap-2">
+                    <span class="font-medium">{item.label}</span>
+                    <code class="text-sm text-muted-foreground bg-muted px-1 rounded">
+                      {item.url}
+                    </code>
+                    <span class="badge-secondary">
+                      {item.type === "page"
+                        ? t({
+                            message: "page",
+                            comment: "@context: Nav item type badge",
+                          })
+                        : t({
+                            message: "link",
+                            comment: "@context: Nav item type badge",
+                          })}
+                    </span>
+                  </div>
+                </div>
+              </ListItemRow>
+            ))}
+          </div>
+        )}
+      </section>
+
+      {/* Other pages section */}
+      <section>
+        <h2 class="text-lg font-medium mb-3">
+          {t({
+            message: "Other pages",
+            comment: "@context: Section heading for pages not in navigation",
+          })}
+        </h2>
+        {otherPages.length === 0 ? (
+          <p class="text-sm text-muted-foreground py-4">
+            {t({
+              message: "All pages are in your navigation.",
+              comment: "@context: Empty state when all pages are in nav",
+            })}
+          </p>
+        ) : (
+          <div class="flex flex-col divide-y">
+            {otherPages.map((page) => (
+              <ListItemRow
+                key={page.id}
+                actions={
+                  <>
+                    <button
+                      type="button"
+                      class="btn-sm-outline"
+                      data-on:click__prevent={`@post('/dash/pages/${page.id}/add-to-nav')`}
+                    >
+                      {t({
+                        message: "Add to nav",
+                        comment: "@context: Button to add page to navigation",
+                      })}
+                    </button>
+                    <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>
+        )}
+      </section>
+    </>
+  );
+}