Add media library (R2 / S3-compatible) + banner cover picker (#28)

New admin module for uploading, organizing, and embedding image assets
across the product. Storage is abstracted behind an `ObjectStorage`
interface so the same code runs against Cloudflare R2 today and an
S3-compatible endpoint (AWS S3, MinIO, Aliyun OSS) when the project
moves off Cloudflare — driver is selected via `STORAGE_DRIVER=r2|s3`.

Server

- `src/lib/storage/` — `ObjectStorage` interface, R2 binding impl, and
  SigV4 S3 impl with a hand-rolled signer (Workers-friendly, zero new
  deps). `sigv4.test.ts` covers signature shape + payload hashing.
- `src/modules/media-library/` — folder tree (adjacency list, per-org
  lazy-created `isDefault` root), asset CRUD, worker-mediated upload
  (10 MB / image MIME whitelist), and presigned-upload scaffolding for
  future direct-to-storage flows. Worker-proxy `/object/*` route for
  local dev when no CDN is configured.
- `src/schema/media-library.ts` + drizzle migration 0027 —
  `media_folders` (self-FK with ON DELETE RESTRICT, partial unique
  indexes) and `media_assets` (bigint size, unique object_key).
- `secureHeaders()` switched to `crossOriginResourcePolicy:
  "cross-origin"` so `<img>` loads from cross-origin admin work. This
  worker is already designed for cross-origin callers via the existing
  CORS config; the default CORP was actively fighting that intent.
- `AppDeps` gains `storage: ObjectStorage`, constructed lazily from env
  so drizzle-kit and other Node entrypoints don't need R2 bindings.

Admin

- `/media-library` route with folder tree + asset grid + multi-file
  upload. `MediaPickerDialog` component reused by `BannerForm` —
  imageUrl fields switched from plain text inputs to thumbnail +
  picker ("from library" or "upload new to default folder"). Banner
  schema and API unchanged.
- `api-client` extended with `upload(FormData)` and `resolveAssetUrl`
  to handle both CDN-absolute and worker-proxy-relative URLs.
- i18n: 35 new paraglide keys wired through every new component plus a
  `media_folder_default_name` override so the auto-created default
  folder reads "Default uploads" / "默认上传" based on the active
  locale (server still stores its canonical name in the DB).
- Sidebar entry `nav_media_library`.
- `.env.production` pins the production worker URL for the admin
  Vite build so the deployed bundle no longer falls back to
  `localhost:8787`.

Configuration

- `wrangler.jsonc` — R2 binding `MEDIA_R2 → apollokit-media`.
- `.dev.vars` documents `STORAGE_DRIVER`, `MEDIA_PUBLIC_URL_BASE`, and
  the optional S3 presign credentials.

Verified

- `pnpm vitest run src/lib/storage/sigv4.test.ts` passes.
- Server `pnpm check-types` adds no new errors over main.
- Admin `pnpm check-types` adds no new errors over main.
- End-to-end smoke in both local dev and production: upload → R2 write
  → public URL render → banner picker flow. Tested at both
  `en` and `zh` locales.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: dengzhaofun

apps/admin/.env.production

@@ -0,0 +1 @@
+VITE_AUTH_SERVER_URL=https://apollokit-server.limitless-ai.workers.dev

apps/admin/messages/en.json

@@ -941,5 +941,39 @@
   "task_assign_revoked": "Assignment revoked",
   "task_assign_revoke_failed": "Failed to revoke",
   "nav_activity": "Activities",
-  "nav_leaderboard": "Leaderboards"
+  "nav_leaderboard": "Leaderboards",
+  "nav_media_library": "Media Library",
+  "media_header_title": "Media Library",
+  "media_upload_button": "Upload",
+  "media_upload_choose_file": "Choose file",
+  "media_upload_in_progress": "Uploading…",
+  "media_upload_progress": "Uploading {done}/{total}…",
+  "media_upload_failed": "Upload failed",
+  "media_folders_loading": "Loading folders…",
+  "media_folders_failed": "Failed to load folders: {error}",
+  "media_folder_root": "Root",
+  "media_folder_new_root": "New root folder",
+  "media_folder_new_sub": "New subfolder",
+  "media_folder_cancel": "Cancel",
+  "media_folder_placeholder": "Folder name",
+  "media_folder_create": "Create",
+  "media_folder_create_failed": "Failed to create folder",
+  "media_folder_delete_confirm": "Delete empty folder \"{name}\"?",
+  "media_folder_delete_failed": "Failed to delete",
+  "media_folder_expand": "Expand",
+  "media_folder_collapse": "Collapse",
+  "media_folder_delete": "Delete",
+  "media_assets_loading": "Loading…",
+  "media_assets_failed": "Load failed: {error}",
+  "media_assets_empty": "Empty — upload your first asset",
+  "media_asset_delete_confirm": "Delete asset \"{name}\"? The object will be permanently removed from storage.",
+  "media_asset_copy_link": "Copy link",
+  "media_asset_delete": "Delete",
+  "media_picker_trigger": "Select image",
+  "media_picker_title": "Select asset",
+  "media_picker_description": "Pick an existing asset from the drive, or upload a new one into the default folder.",
+  "media_picker_tab_library": "From library",
+  "media_picker_tab_upload": "Upload new",
+  "media_picker_upload_hint": "New assets upload to the default folder — you can reorganize them later in the media library.",
+  "media_folder_default_name": "Default uploads"
 }

apps/admin/messages/zh.json

@@ -941,5 +941,39 @@
   "task_assign_revoked": "已撤销分配",
   "task_assign_revoke_failed": "撤销失败",
   "nav_activity": "活动",
-  "nav_leaderboard": "排行榜"
+  "nav_leaderboard": "排行榜",
+  "nav_media_library": "素材云盘",
+  "media_header_title": "素材云盘",
+  "media_upload_button": "上传素材",
+  "media_upload_choose_file": "选择文件上传",
+  "media_upload_in_progress": "上传中…",
+  "media_upload_progress": "上传中 {done}/{total}…",
+  "media_upload_failed": "上传失败",
+  "media_folders_loading": "加载目录中…",
+  "media_folders_failed": "目录加载失败：{error}",
+  "media_folder_root": "根目录",
+  "media_folder_new_root": "新建根目录",
+  "media_folder_new_sub": "新建子目录",
+  "media_folder_cancel": "取消",
+  "media_folder_placeholder": "目录名",
+  "media_folder_create": "新建",
+  "media_folder_create_failed": "新建失败",
+  "media_folder_delete_confirm": "删除空目录「{name}」？",
+  "media_folder_delete_failed": "删除失败",
+  "media_folder_expand": "展开",
+  "media_folder_collapse": "折叠",
+  "media_folder_delete": "删除",
+  "media_assets_loading": "加载中…",
+  "media_assets_failed": "加载失败：{error}",
+  "media_assets_empty": "空空如也 — 上传第一张素材吧",
+  "media_asset_delete_confirm": "删除素材「{name}」？对象会从存储中真删除。",
+  "media_asset_copy_link": "复制链接",
+  "media_asset_delete": "删除",
+  "media_picker_trigger": "选择图片",
+  "media_picker_title": "选择素材",
+  "media_picker_description": "从云盘选一张已上传的素材，或直接上传新素材到默认目录。",
+  "media_picker_tab_library": "从云盘选择",
+  "media_picker_tab_upload": "上传新素材",
+  "media_picker_upload_hint": "新素材会上传到云盘的默认目录，之后也可以在云盘里整理。",
+  "media_folder_default_name": "默认上传"
 }

apps/admin/src/components/AppSidebar.tsx

@@ -4,6 +4,7 @@ import {
   ArrowLeftRight,
   BookOpen,
   CalendarCheck,
+  FolderOpen,
   GalleryHorizontal,
   Gift,
   KeyRound,
@@ -52,6 +53,7 @@ function getNavItems() {
     { title: "存储箱", to: "/storage-box" as const, icon: PiggyBank },
     { title: m.nav_mail(), to: "/mail" as const, icon: Mail },
     { title: m.nav_banner(), to: "/banner" as const, icon: GalleryHorizontal },
+    { title: m.nav_media_library(), to: "/media-library" as const, icon: FolderOpen },
     { title: m.nav_dialogue(), to: "/dialogue" as const, icon: MessagesSquare },
     { title: m.nav_collection(), to: "/collection" as const, icon: BookOpen },
     { title: m.nav_level(), to: "/level" as const, icon: Map },

apps/admin/src/components/banner/BannerForm.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react"
 
 import { LinkActionEditor } from "#/components/common/LinkActionEditor"
+import { MediaPickerDialog } from "#/components/media-library/MediaPickerDialog"
 import { Button } from "#/components/ui/button"
 import { Input } from "#/components/ui/input"
 import { Label } from "#/components/ui/label"
@@ -135,27 +136,17 @@ export function BannerForm({
 
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
         <div className="space-y-1">
-          <Label htmlFor="image-mobile">
-            {m.banner_field_image_mobile()}
-          </Label>
-          <Input
-            id="image-mobile"
-            required
-            placeholder="https://..."
-            value={imageUrlMobile}
-            onChange={(e) => setImageUrlMobile(e.target.value)}
+          <Label>{m.banner_field_image_mobile()}</Label>
+          <MediaPickerDialog
+            value={imageUrlMobile || null}
+            onChange={setImageUrlMobile}
           />
         </div>
         <div className="space-y-1">
-          <Label htmlFor="image-desktop">
-            {m.banner_field_image_desktop()}
-          </Label>
-          <Input
-            id="image-desktop"
-            required
-            placeholder="https://..."
-            value={imageUrlDesktop}
-            onChange={(e) => setImageUrlDesktop(e.target.value)}
+          <Label>{m.banner_field_image_desktop()}</Label>
+          <MediaPickerDialog
+            value={imageUrlDesktop || null}
+            onChange={setImageUrlDesktop}
           />
         </div>
       </div>

apps/admin/src/components/media-library/AssetGrid.tsx

@@ -0,0 +1,127 @@
+import { Copy, Trash2 } from "lucide-react"
+
+import { Button } from "#/components/ui/button"
+import { useDeleteMediaAsset, useMediaAssets } from "#/hooks/use-media-library"
+import { resolveAssetUrl } from "#/lib/api-client"
+import type { MediaAsset } from "#/lib/types/media-library"
+import * as m from "#/paraglide/messages.js"
+
+interface AssetGridProps {
+  folderId: string | null
+  /** When set, clicking an asset calls this instead of deleting. */
+  onSelect?: (asset: MediaAsset) => void
+}
+
+function humanSize(n: number): string {
+  if (n < 1024) return `${n} B`
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`
+  return `${(n / (1024 * 1024)).toFixed(2)} MB`
+}
+
+export function AssetGrid({ folderId, onSelect }: AssetGridProps) {
+  const { data, isPending, error } = useMediaAssets(folderId)
+  const del = useDeleteMediaAsset()
+
+  if (isPending) {
+    return (
+      <div className="flex h-40 items-center justify-center text-muted-foreground">
+        {m.media_assets_loading()}
+      </div>
+    )
+  }
+  if (error) {
+    return (
+      <div className="flex h-40 items-center justify-center text-destructive">
+        {m.media_assets_failed({ error: error.message })}
+      </div>
+    )
+  }
+  if (!data || data.items.length === 0) {
+    return (
+      <div className="flex h-40 items-center justify-center text-muted-foreground">
+        {m.media_assets_empty()}
+      </div>
+    )
+  }
+
+  async function handleDelete(id: string, filename: string) {
+    if (!confirm(m.media_asset_delete_confirm({ name: filename }))) return
+    try {
+      await del.mutateAsync(id)
+    } catch (err) {
+      alert(err instanceof Error ? err.message : m.media_asset_delete())
+    }
+  }
+
+  async function copyUrl(url: string) {
+    try {
+      await navigator.clipboard.writeText(resolveAssetUrl(url))
+    } catch {
+      // noop — some contexts block clipboard; user can copy manually.
+    }
+  }
+
+  return (
+    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+      {data.items.map((asset) => {
+        const clickable = onSelect !== undefined
+        return (
+          <div
+            key={asset.id}
+            className={`group relative flex flex-col overflow-hidden rounded-lg border bg-card shadow-sm transition hover:shadow ${
+              clickable ? "cursor-pointer" : ""
+            }`}
+            onClick={clickable ? () => onSelect?.(asset) : undefined}
+          >
+            <div className="aspect-square w-full overflow-hidden bg-muted">
+              <img
+                src={resolveAssetUrl(asset.url)}
+                alt={asset.filename}
+                className="size-full object-cover"
+                loading="lazy"
+              />
+            </div>
+            <div className="p-2">
+              <div className="truncate text-xs font-medium" title={asset.filename}>
+                {asset.filename}
+              </div>
+              <div className="text-xs text-muted-foreground">
+                {humanSize(asset.size)}
+              </div>
+            </div>
+            {!clickable ? (
+              <div className="absolute right-1 top-1 flex gap-1 opacity-0 transition group-hover:opacity-100">
+                <Button
+                  type="button"
+                  size="icon"
+                  variant="secondary"
+                  className="size-7"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    copyUrl(asset.url)
+                  }}
+                  title={m.media_asset_copy_link()}
+                >
+                  <Copy className="size-3.5" />
+                </Button>
+                <Button
+                  type="button"
+                  size="icon"
+                  variant="destructive"
+                  className="size-7"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    handleDelete(asset.id, asset.filename)
+                  }}
+                  title={m.media_asset_delete()}
+                >
+                  <Trash2 className="size-3.5" />
+                </Button>
+              </div>
+            ) : null}
+          </div>
+        )
+      })}
+    </div>
+  )
+}