@jant/core 0.3.24 → 0.3.26

package/dist/routes/dash/media.js

@@ -1,395 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "hono/jsx/jsx-runtime";
-import { getSiteName } from "../../lib/config.js";
+import { jsx as _jsx, Fragment as _Fragment } from "hono/jsx/jsx-runtime";
 /**
  * Dashboard Media Routes
- *
- * Media management with Datastar-powered uploads.
- * Uses SSE for real-time UI updates without page reloads.
  */ import { Hono } from "hono";
-import { useLingui as $_useLingui } from "@jant/core/i18n";
-import { DashLayout } from "../../theme/layouts/index.js";
-import { EmptyState, DangerZone } from "../../theme/components/index.js";
-import * as time from "../../lib/time.js";
-import { getMediaUrl, getImageUrl, getPublicUrlForProvider } from "../../lib/image.js";
+import { DashLayout } from "../../ui/layouts/DashLayout.js";
 import { dsRedirect } from "../../lib/sse.js";
+import { getSiteName } from "../../lib/config.js";
+import { getMediaUrl, getImageUrl, getPublicUrlForProvider } from "../../lib/image.js";
+import { MediaListContent } from "../../ui/dash/media/MediaListContent.js";
+import { ViewMediaContent } from "../../ui/dash/media/ViewMediaContent.js";
 export const mediaRoutes = new Hono();
-/**
- * Format file size for display
- */ function formatSize(bytes) {
-    if (bytes < 1024) return `${bytes} B`;
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-/**
- * Media card component for the grid
- */ function MediaCard({ media, r2PublicUrl, imageTransformUrl, s3PublicUrl }) {
-    const publicUrl = getPublicUrlForProvider(media.provider, r2PublicUrl, s3PublicUrl);
-    const fullUrl = getMediaUrl(media.id, media.storageKey, publicUrl);
-    const thumbnailUrl = getImageUrl(fullUrl, imageTransformUrl, {
-        width: 300,
-        quality: 80,
-        format: "auto",
-        fit: "cover"
-    });
-    const isImage = media.mimeType.startsWith("image/");
-    return /*#__PURE__*/ _jsxs("div", {
-        class: "group relative",
-        "data-media-id": media.id,
-        children: [
-            isImage ? /*#__PURE__*/ _jsx("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()`,
-                children: /*#__PURE__*/ _jsx("img", {
-                    src: thumbnailUrl,
-                    alt: media.alt || media.originalName,
-                    class: "w-full h-full object-cover",
-                    loading: "lazy"
-                })
-            }) : /*#__PURE__*/ _jsx("a", {
-                href: `/dash/media/${media.id}`,
-                class: "block aspect-square bg-muted rounded-lg overflow-hidden border hover:border-primary",
-                children: /*#__PURE__*/ _jsx("div", {
-                    class: "w-full h-full flex items-center justify-center text-muted-foreground",
-                    children: /*#__PURE__*/ _jsx("span", {
-                        class: "text-xs",
-                        children: media.mimeType
-                    })
-                })
-            }),
-            /*#__PURE__*/ _jsx("a", {
-                href: `/dash/media/${media.id}`,
-                class: "block mt-2 text-xs truncate hover:underline",
-                title: media.originalName,
-                children: media.originalName
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                class: "text-xs text-muted-foreground",
-                children: formatSize(media.size)
-            })
-        ]
-    });
-}
-/**
- * Media list page content
- *
- * Upload is handled by media-upload.ts (client module) + Datastar @post for SSE.
- */ function MediaListContent({ mediaList, r2PublicUrl, imageTransformUrl, s3PublicUrl }) {
-    const { i18n: $__i18n, _: $__ } = $_useLingui();
-    const processingText = $__i18n._({
-        id: "k1ifdL",
-        message: "Processing..."
-    });
-    const uploadingText = $__i18n._({
-        id: "GxkJXS",
-        message: "Uploading..."
-    });
-    const uploadText = $__i18n._({
-        id: "ONWvwQ",
-        message: "Upload"
-    });
-    const errorText = $__i18n._({
-        id: "pZq3aX",
-        message: "Upload failed. Please try again."
-    });
-    return /*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            /*#__PURE__*/ _jsx("form", {
-                id: "upload-form",
-                class: "hidden",
-                enctype: "multipart/form-data",
-                "data-on:submit__prevent": "@post('/api/upload', {contentType: 'form'})",
-                children: /*#__PURE__*/ _jsx("input", {
-                    id: "upload-file-input",
-                    type: "file",
-                    name: "file"
-                })
-            }),
-            /*#__PURE__*/ _jsxs("div", {
-                class: "flex items-center justify-between mb-6",
-                children: [
-                    /*#__PURE__*/ _jsx("h1", {
-                        class: "text-2xl font-semibold",
-                        children: $__i18n._({
-                            id: "xYilR2",
-                            message: "Media"
-                        })
-                    }),
-                    /*#__PURE__*/ _jsxs("label", {
-                        class: "btn cursor-pointer",
-                        children: [
-                            /*#__PURE__*/ _jsx("span", {
-                                children: uploadText
-                            }),
-                            /*#__PURE__*/ _jsx("input", {
-                                type: "file",
-                                class: "hidden",
-                                accept: "image/*",
-                                "data-media-upload": true,
-                                "data-text-processing": processingText,
-                                "data-text-uploading": uploadingText,
-                                "data-text-error": errorText
-                            })
-                        ]
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                class: "card mb-6",
-                children: /*#__PURE__*/ _jsx("section", {
-                    class: "text-sm text-muted-foreground",
-                    children: /*#__PURE__*/ _jsx("p", {
-                        children: $__i18n._({
-                            id: "x+doid",
-                            message: "Images are automatically optimized: resized to max 1920px, converted to WebP, and metadata stripped."
-                        })
-                    })
-                })
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                id: "media-content",
-                children: mediaList.length === 0 ? /*#__PURE__*/ _jsx("div", {
-                    id: "empty-state",
-                    children: /*#__PURE__*/ _jsx(EmptyState, {
-                        message: $__i18n._({
-                            id: "ST+lN2",
-                            message: "No media uploaded yet."
-                        })
-                    })
-                }) : /*#__PURE__*/ _jsx("div", {
-                    id: "media-grid",
-                    class: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4",
-                    children: mediaList.map((m)=>/*#__PURE__*/ _jsx(MediaCard, {
-                            media: m,
-                            r2PublicUrl: r2PublicUrl,
-                            imageTransformUrl: imageTransformUrl,
-                            s3PublicUrl: s3PublicUrl
-                        }, m.id))
-                })
-            }),
-            /*#__PURE__*/ _jsx("dialog", {
-                id: "lightbox",
-                class: "p-0 m-auto bg-transparent backdrop:bg-black/80",
-                onclick: "event.target === this && this.close()",
-                children: /*#__PURE__*/ _jsx("img", {
-                    id: "lightbox-img",
-                    src: "",
-                    alt: "",
-                    class: "max-w-[90vw] max-h-[90vh] object-contain rounded-lg"
-                })
-            })
-        ]
-    });
-}
-/**
- * View single media content
- */ function ViewMediaContent({ media, r2PublicUrl, imageTransformUrl, s3PublicUrl }) {
-    const { i18n: $__i18n, _: $__ } = $_useLingui();
-    const publicUrl = getPublicUrlForProvider(media.provider, r2PublicUrl, s3PublicUrl);
-    const url = getMediaUrl(media.id, media.storageKey, publicUrl);
-    const thumbnailUrl = getImageUrl(url, imageTransformUrl, {
-        width: 600,
-        quality: 85,
-        format: "auto"
-    });
-    const isImage = media.mimeType.startsWith("image/");
-    return /*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            /*#__PURE__*/ _jsxs("div", {
-                class: "flex items-center justify-between mb-6",
-                children: [
-                    /*#__PURE__*/ _jsxs("div", {
-                        children: [
-                            /*#__PURE__*/ _jsx("h1", {
-                                class: "text-2xl font-semibold",
-                                children: media.originalName
-                            }),
-                            /*#__PURE__*/ _jsxs("p", {
-                                class: "text-muted-foreground mt-1",
-                                children: [
-                                    formatSize(media.size),
-                                    " · ",
-                                    media.mimeType,
-                                    " ·",
-                                    " ",
-                                    time.formatDate(media.createdAt)
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsx("a", {
-                        href: "/dash/media",
-                        class: "btn-outline",
-                        children: $__i18n._({
-                            id: "iH8pgl",
-                            message: "Back"
-                        })
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsxs("div", {
-                class: "grid gap-6 md:grid-cols-2",
-                children: [
-                    /*#__PURE__*/ _jsxs("div", {
-                        class: "card",
-                        children: [
-                            /*#__PURE__*/ _jsx("header", {
-                                children: /*#__PURE__*/ _jsx("h2", {
-                                    children: $__i18n._({
-                                        id: "rdUucN",
-                                        message: "Preview"
-                                    })
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx("section", {
-                                children: isImage ? /*#__PURE__*/ _jsxs(_Fragment, {
-                                    children: [
-                                        /*#__PURE__*/ _jsx("button", {
-                                            type: "button",
-                                            class: "cursor-pointer",
-                                            onclick: `document.getElementById('lightbox-img').src = '${url}'; document.getElementById('lightbox').showModal()`,
-                                            children: /*#__PURE__*/ _jsx("img", {
-                                                src: thumbnailUrl,
-                                                alt: media.alt || media.originalName,
-                                                class: "max-w-full rounded-lg hover:opacity-90 transition-opacity"
-                                            })
-                                        }),
-                                        /*#__PURE__*/ _jsx("p", {
-                                            class: "text-xs text-muted-foreground mt-2",
-                                            children: $__i18n._({
-                                                id: "M1RvTd",
-                                                message: "Click image to view full size"
-                                            })
-                                        })
-                                    ]
-                                }) : /*#__PURE__*/ _jsx("div", {
-                                    class: "aspect-video bg-muted rounded-lg flex items-center justify-center text-muted-foreground",
-                                    children: /*#__PURE__*/ _jsx("span", {
-                                        children: media.mimeType
-                                    })
-                                })
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsxs("div", {
-                        class: "space-y-6",
-                        children: [
-                            /*#__PURE__*/ _jsxs("div", {
-                                class: "card",
-                                children: [
-                                    /*#__PURE__*/ _jsx("header", {
-                                        children: /*#__PURE__*/ _jsx("h2", {
-                                            children: $__i18n._({
-                                                id: "IagCbF",
-                                                message: "URL"
-                                            })
-                                        })
-                                    }),
-                                    /*#__PURE__*/ _jsxs("section", {
-                                        children: [
-                                            /*#__PURE__*/ _jsxs("div", {
-                                                class: "flex items-center gap-2",
-                                                children: [
-                                                    /*#__PURE__*/ _jsx("input", {
-                                                        type: "text",
-                                                        class: "input flex-1 font-mono text-sm",
-                                                        value: url,
-                                                        readonly: true
-                                                    }),
-                                                    /*#__PURE__*/ _jsx("button", {
-                                                        type: "button",
-                                                        class: "btn-outline",
-                                                        onclick: `navigator.clipboard.writeText('${url}')`,
-                                                        children: $__i18n._({
-                                                            id: "he3ygx",
-                                                            message: "Copy"
-                                                        })
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ _jsx("p", {
-                                                class: "text-xs text-muted-foreground mt-2",
-                                                children: $__i18n._({
-                                                    id: "K9NcLu",
-                                                    message: "Use this URL to embed the media in your posts."
-                                                })
-                                            })
-                                        ]
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsxs("div", {
-                                class: "card",
-                                children: [
-                                    /*#__PURE__*/ _jsx("header", {
-                                        children: /*#__PURE__*/ _jsx("h2", {
-                                            children: $__i18n._({
-                                                id: "u6Hp4N",
-                                                message: "Markdown"
-                                            })
-                                        })
-                                    }),
-                                    /*#__PURE__*/ _jsx("section", {
-                                        children: /*#__PURE__*/ _jsxs("div", {
-                                            class: "flex items-center gap-2",
-                                            children: [
-                                                /*#__PURE__*/ _jsx("input", {
-                                                    type: "text",
-                                                    class: "input flex-1 font-mono text-sm",
-                                                    value: `![${media.alt || media.originalName}](${url})`,
-                                                    readonly: true
-                                                }),
-                                                /*#__PURE__*/ _jsx("button", {
-                                                    type: "button",
-                                                    class: "btn-outline",
-                                                    onclick: `navigator.clipboard.writeText('![${media.alt || media.originalName}](${url})')`,
-                                                    children: $__i18n._({
-                                                        id: "he3ygx",
-                                                        message: "Copy"
-                                                    })
-                                                })
-                                            ]
-                                        })
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsx(DangerZone, {
-                                actionLabel: $__i18n._({
-                                    id: "wM5UXj",
-                                    message: "Delete Media"
-                                }),
-                                formAction: `/dash/media/${media.id}/delete`,
-                                confirmMessage: "Are you sure you want to delete this media?",
-                                description: $__i18n._({
-                                    id: "E80cJw",
-                                    message: "Deleting this media will remove it permanently from storage."
-                                })
-                            })
-                        ]
-                    })
-                ]
-            }),
-            isImage && /*#__PURE__*/ _jsx("dialog", {
-                id: "lightbox",
-                class: "p-0 m-auto bg-transparent backdrop:bg-black/80",
-                onclick: "event.target === this && this.close()",
-                children: /*#__PURE__*/ _jsx("img", {
-                    id: "lightbox-img",
-                    src: "",
-                    alt: "",
-                    class: "max-w-[90vw] max-h-[90vh] object-contain rounded-lg"
-                })
-            })
-        ]
-    });
-}
 // List media
 mediaRoutes.get("/", async (c)=>{
     const mediaList = await c.var.services.media.list(100);
     const siteName = await getSiteName(c);
-    const r2PublicUrl = c.env.R2_PUBLIC_URL;
-    const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
-    const s3PublicUrl = c.env.S3_PUBLIC_URL;
     return c.html(/*#__PURE__*/ _jsx(DashLayout, {
         c: c,
         title: "Media",
@@ -397,9 +20,9 @@ mediaRoutes.get("/", async (c)=>{
         currentPath: "/dash/media",
         children: /*#__PURE__*/ _jsx(MediaListContent, {
             mediaList: mediaList,
-            r2PublicUrl: r2PublicUrl,
-            imageTransformUrl: imageTransformUrl,
-            s3PublicUrl: s3PublicUrl
+            r2PublicUrl: c.env.R2_PUBLIC_URL,
+            imageTransformUrl: c.env.IMAGE_TRANSFORM_URL,
+            s3PublicUrl: c.env.S3_PUBLIC_URL
         })
     }));
 });
@@ -419,7 +42,7 @@ mediaRoutes.get("/picker", async (c)=>{
     return c.html(/*#__PURE__*/ _jsx(_Fragment, {
         children: mediaList.filter((m)=>m.mimeType.startsWith("image/")).map((m)=>{
             const pUrl = getPublicUrlForProvider(m.provider, r2PublicUrl, s3PublicUrl);
-            const url = getMediaUrl(m.id, m.storageKey, pUrl);
+            const url = getMediaUrl(m.storageKey, pUrl);
             const thumbUrl = getImageUrl(url, imageTransformUrl, {
                 width: 150,
                 quality: 80,
@@ -449,9 +72,6 @@ mediaRoutes.get("/:id", async (c)=>{
     const media = await c.var.services.media.getById(id);
     if (!media) return c.notFound();
     const siteName = await getSiteName(c);
-    const r2PublicUrl = c.env.R2_PUBLIC_URL;
-    const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
-    const s3PublicUrl = c.env.S3_PUBLIC_URL;
     return c.html(/*#__PURE__*/ _jsx(DashLayout, {
         c: c,
         title: media.originalName,
@@ -459,9 +79,9 @@ mediaRoutes.get("/:id", async (c)=>{
         currentPath: "/dash/media",
         children: /*#__PURE__*/ _jsx(ViewMediaContent, {
             media: media,
-            r2PublicUrl: r2PublicUrl,
-            imageTransformUrl: imageTransformUrl,
-            s3PublicUrl: s3PublicUrl
+            r2PublicUrl: c.env.R2_PUBLIC_URL,
+            imageTransformUrl: c.env.IMAGE_TRANSFORM_URL,
+            s3PublicUrl: c.env.S3_PUBLIC_URL
         })
     }));
 });