lightnet 3.10.0 → 3.10.2

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # lightnet
 
+## 3.10.2
+
+### Patch Changes
+
+- [#325](https://github.com/LightNetDev/LightNet/pull/325) [`07b71f4`](https://github.com/LightNetDev/LightNet/commit/07b71f4d44f8e005aafb48bedc347f14c71e182a) Thanks [@smn-cds](https://github.com/smn-cds)! - Refactor internal react i18n logic.
+
+## 3.10.1
+
+### Patch Changes
+
+- [#321](https://github.com/LightNetDev/LightNet/pull/321) [`87e0faf`](https://github.com/LightNetDev/LightNet/commit/87e0faf4ba7a6615d60e755385479092c5d2aa84) Thanks [@smn-cds](https://github.com/smn-cds)! - Update dependencies
+
+- [#321](https://github.com/LightNetDev/LightNet/pull/321) [`87e0faf`](https://github.com/LightNetDev/LightNet/commit/87e0faf4ba7a6615d60e755385479092c5d2aa84) Thanks [@smn-cds](https://github.com/smn-cds)! - Start implementing integrated experimental Admin UI.
+
+- [#321](https://github.com/LightNetDev/LightNet/pull/321) [`87e0faf`](https://github.com/LightNetDev/LightNet/commit/87e0faf4ba7a6615d60e755385479092c5d2aa84) Thanks [@smn-cds](https://github.com/smn-cds)! - Astro 5.14.8 resolves relative image paths like `image/my-image.jpg` without a `./` prefix, so remove the manual prefixing in `packages/lightnet/src/content/astro-image.ts`. See [Astro's release notes for version 5.14.8](https://github.com/withastro/astro/releases/tag/astro%405.14.8).
+
+- [#323](https://github.com/LightNetDev/LightNet/pull/323) [`a2e6980`](https://github.com/LightNetDev/LightNet/commit/a2e6980b2866795b1517dc7a916698f5d92231b1) Thanks [@smn-cds](https://github.com/smn-cds)! - Remove the unsupported `maxWidth` option from `MediaGallerySection` and `CategoriesSection`.
+
+  The option never worked correctly, but our docs previously only mentioned that in a note. Tighten the typings and runtime guardrails so that consumers see explicit feedback instead of misconfiguring the component.
+
 ## 3.10.0
 
 ### Minor Changes

package/__e2e__/admin.spec.ts

@@ -0,0 +1,113 @@
+import { expect } from "@playwright/test"
+
+import { lightnetTest } from "./test-utils"
+
+const test = lightnetTest("./fixtures/basics/")
+
+test("Should not show `Edit` button on details page by default.", async ({
+  page,
+  startLightnet,
+}) => {
+  await startLightnet()
+
+  await page.getByRole("link", { name: "Faithful Freestyle" }).click()
+  await expect(
+    page.getByRole("heading", { name: "Faithful Freestyle" }),
+  ).toBeVisible()
+
+  const editButton = page.locator("#edit-btn")
+  await expect(editButton).toBeHidden()
+})
+
+test("Should show `Edit` button on book details page after visiting `/en/admin/` path.", async ({
+  page,
+  startLightnet,
+}) => {
+  const ln = await startLightnet()
+
+  await page.goto(ln.resolveURL("/en/admin/"))
+  await expect(
+    page.getByText("Admin features are enabled now.", { exact: true }),
+  ).toBeVisible()
+
+  await page.goto(ln.resolveURL("/en/media/faithful-freestyle--en"))
+  await expect(
+    page.getByRole("heading", { name: "Faithful Freestyle" }),
+  ).toBeVisible()
+
+  const editButton = page.locator("#edit-btn")
+  await expect(editButton).toBeVisible()
+  await expect(editButton).toHaveAttribute(
+    "href",
+    "/en/admin/media/faithful-freestyle--en",
+  )
+})
+
+test("Should show `Edit` button on video details page after visiting `/en/admin/` path.", async ({
+  page,
+  startLightnet,
+}) => {
+  const ln = await startLightnet()
+
+  await page.goto(ln.resolveURL("/en/admin/"))
+  await expect(
+    page.getByText("Admin features are enabled now.", { exact: true }),
+  ).toBeVisible()
+
+  await page.goto(ln.resolveURL("/en/media/how-to-kickflip--de"))
+  await expect(
+    page.getByRole("heading", { name: "Kickflip Anleitung" }),
+  ).toBeVisible()
+
+  const editButton = page.locator("#edit-btn")
+  await expect(editButton).toBeVisible()
+  await expect(editButton).toHaveAttribute(
+    "href",
+    "/en/admin/media/how-to-kickflip--de",
+  )
+})
+
+test("Should show `Edit` button on audio details page after visiting `/en/admin/` path.", async ({
+  page,
+  startLightnet,
+}) => {
+  const ln = await startLightnet()
+
+  await page.goto(ln.resolveURL("/en/admin/"))
+  await expect(
+    page.getByText("Admin features are enabled now.", { exact: true }),
+  ).toBeVisible()
+
+  await page.goto(ln.resolveURL("/en/media/skate-sounds--en"))
+  await expect(
+    page.getByRole("heading", { name: "Skate Sounds" }),
+  ).toBeVisible()
+
+  const editButton = page.locator("#edit-btn")
+  await expect(editButton).toBeVisible()
+  await expect(editButton).toHaveAttribute(
+    "href",
+    "/en/admin/media/skate-sounds--en",
+  )
+})
+
+test("Edit button on details page should navigate to media item edit page", async ({
+  page,
+  startLightnet,
+}) => {
+  const ln = await startLightnet()
+
+  await page.goto(ln.resolveURL("/en/admin/"))
+  await page.goto(ln.resolveURL("/en/media/faithful-freestyle--en"))
+
+  const editButton = page.locator("#edit-btn")
+  await expect(editButton).toBeVisible()
+
+  await editButton.click()
+  await expect(page).toHaveURL(
+    ln.resolveURL("/en/admin/media/faithful-freestyle--en"),
+  )
+  await expect(
+    page.getByText("Edit media item", { exact: false }),
+  ).toBeVisible()
+})

package/__e2e__/fixtures/basics/astro.config.mjs

@@ -9,6 +9,7 @@ export default defineConfig({
     lightnet({
       title: "Basic Test",
       logo: { src: "./src/assets/logo.png" },
+      credits: true,
       languages: [
         {
           code: "en",
@@ -29,6 +30,11 @@ export default defineConfig({
         },
         { href: "/media", label: "ln.search.title" },
       ],
+      experimental: {
+        admin: {
+          enabled: true,
+        },
+      },
     }),
   ],
 })

package/__e2e__/fixtures/basics/node_modules/.bin/astro

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.14.4_@types+node@24.3.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.52.4_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.14.4_@types+node@24.3.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.52.4_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.14.8_@types+node@24.3.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.52.5_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.14.8_@types+node@24.3.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.52.5_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.14.4_@types+node@24.3.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.52.4_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.14.4_@types+node@24.3.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.52.4_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.14.8_@types+node@24.3.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.52.5_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.14.8_@types+node@24.3.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.52.5_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../astro/astro.js" "$@"

package/__e2e__/fixtures/basics/package.json

@@ -6,8 +6,8 @@
   "dependencies": {
     "@astrojs/react": "^4.4.0",
     "@astrojs/tailwind": "^6.0.2",
-    "@lightnet/decap-admin": "^3.1.2",
-    "astro": "^5.14.4",
+    "@lightnet/decap-admin": "^3.1.3",
+    "astro": "^5.14.8",
     "lightnet": "^3.10.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",

package/__e2e__/fixtures/basics/src/content/media/skate-sounds--en.json

@@ -0,0 +1,15 @@
+{
+  "commonId": "skate-sounds",
+  "title": "Skate Sounds",
+  "type": "audio",
+  "dateCreated": "2024-04-21",
+  "authors": ["Sk8 Ministries"],
+  "content": [
+    { "url": "/files/example-audio.mp3" },
+    { "url": "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3" }
+  ],
+  "image": "./images/cover.jpg",
+  "language": "en",
+  "categories": ["christian-living"],
+  "description": "A vibrant collection of authentic skate park sounds to energize your projects and playlists.\n\n**Highlights:**\n- Real-world skating ambience\n- Perfect for creative mixes\n- Inspiring background audio for worship gatherings"
+}

package/__e2e__/fixtures/basics/src/content/media-types/audio.json

@@ -0,0 +1,7 @@
+{
+  "label": "type.audio",
+  "detailsPage": {
+    "layout": "audio"
+  },
+  "icon": "mdi--music-box-outline"
+}

package/__e2e__/fixtures/basics/src/translations/de.yml

@@ -4,5 +4,6 @@ category.teens: Teens
 category.theology: Theologie
 type.book: Buch
 type.video: Video
+type.audio: Audio
 details.action.read: Lesen
 details.action.watch: Anschauen

package/__e2e__/fixtures/basics/src/translations/en.yml

@@ -4,5 +4,6 @@ category.teens: Teens
 category.theology: Theology
 type.book: Book
 type.video: Video
+type.audio: Audio
 details.action.read: Read
 details.action.watch: Watch

package/__e2e__/homepage.spec.ts

@@ -102,3 +102,24 @@ test("Should verify DE Detail media page url and title", async ({
   await expect(page.getByText("Sprache")).toBeVisible()
   await expect(page.getByText("Kategorie")).toBeVisible()
 })
+
+test("Should show `Powered by LightNet` in footer", async ({
+  page,
+  startLightnet,
+}) => {
+  await startLightnet()
+
+  const footerLink = page
+    .getByRole("contentinfo")
+    .getByRole("link", { name: /LightNet/ })
+
+  await expect(footerLink).toHaveText("Powered by LightNet")
+  await expect(footerLink).toHaveAttribute("href", "https://lightnet.community")
+
+  await page.getByLabel("Select language").click()
+  await page.getByRole("link", { name: "Deutsch" }).click()
+
+  await expect(
+    page.getByRole("contentinfo").getByRole("link", { name: /LightNet/ }),
+  ).toHaveText("Ermöglicht durch LightNet")
+})

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "lightnet",
+  "description": "LightNet makes it easy to run your own digital media library.",
   "type": "module",
   "license": "MIT",
-  "version": "3.10.0",
+  "version": "3.10.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -30,8 +31,12 @@
     "./pages/RootRoute.astro": "./src/pages/RootRoute.astro",
     "./pages/SearchPageRoute.astro": "./src/pages/search-page/SearchPageRoute.astro",
     "./pages/DetailsPageRoute.astro": "./src/pages/details-page/DetailsPageRoute.astro",
-    "./pages/api/search.ts": "./src/pages/api/search.ts",
-    "./pages/api/versions.ts": "./src/pages/api/versions.ts"
+    "./api/internal/search.ts": "./src/pages/search-page/api/search.ts",
+    "./api/versions.ts": "./src/api/versions.ts",
+    "./api/media/[mediaId].ts": "./src/api/media/[mediaId].ts",
+    "./api/internal/fs/writeText.ts": "./src/admin/api/fs/writeText.ts",
+    "./admin/pages/AdminRoute.astro": "./src/admin/pages/AdminRoute.astro",
+    "./admin/pages/media/EditRoute.astro": "./src/admin/pages/media/EditRoute.astro"
   },
   "peerDependencies": {
     "astro": "^5.1.0",
@@ -45,18 +50,20 @@
     "@iconify-json/mdi": "^1.2.3",
     "@iconify/tailwind": "^1.2.0",
     "@tailwindcss/typography": "^0.5.19",
+    "@tanstack/react-form": "^1.23.7",
+    "@tanstack/react-query": "^5.90.5",
     "@tanstack/react-virtual": "^3.13.12",
     "daisyui": "^4.12.24",
     "embla-carousel": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.1.0",
     "fuse.js": "^7.1.0",
     "i18next": "^25.6.0",
-    "marked": "^16.4.0",
+    "marked": "^16.4.1",
     "yaml": "^2.8.1"
   },
   "devDependencies": {
-    "@playwright/test": "^1.56.0",
-    "@types/node": "^22.18.10",
+    "@playwright/test": "^1.56.1",
+    "@types/node": "^22.18.12",
     "@types/react": "^19.2.2",
     "typescript": "^5.9.3",
     "vitest": "^3.2.4"

package/src/admin/api/fs/writeText.ts

@@ -0,0 +1,50 @@
+import { mkdir, rename, rm, writeFile } from "node:fs/promises"
+import { dirname, isAbsolute, relative, resolve } from "node:path"
+import { fileURLToPath } from "node:url"
+
+import type { APIRoute } from "astro"
+import { root } from "astro:config/server"
+
+export const prerender = false
+
+export const POST: APIRoute = async ({ request }) => {
+  const rootDirPath = fileURLToPath(root)
+  const requestedPath = new URL(request.url).searchParams.get("path")
+  if (!requestedPath) {
+    throw new Error("'path' search param is undefined.")
+  }
+  if (isAbsolute(requestedPath)) {
+    throw new Error("Absolute paths are not allowed.")
+  }
+
+  const targetPath = resolve(rootDirPath, requestedPath)
+  const relativeToRoot = relative(rootDirPath, targetPath)
+  if (
+    relativeToRoot.startsWith("..") ||
+    relativeToRoot === "" ||
+    isAbsolute(relativeToRoot)
+  ) {
+    throw new Error("Path escapes project root.")
+  }
+
+  const targetDir = dirname(targetPath)
+  await mkdir(targetDir, { recursive: true })
+
+  const body = await request.text()
+  const timestamp = Date.now()
+  const tmpPath = `${targetPath}.tmp-${timestamp}`
+  try {
+    const tmpPath = `${targetPath}.tmp-${Date.now()}`
+    await writeFile(tmpPath, body, "utf-8")
+    await rename(tmpPath, targetPath)
+  } finally {
+    await rm(tmpPath, { force: true }).catch(() => {})
+  }
+
+  return new Response(JSON.stringify({ status: "ok" }), {
+    status: 200,
+    headers: {
+      "Content-Type": "application/json",
+    },
+  })
+}

package/src/admin/components/form/FieldErrors.tsx

@@ -0,0 +1,22 @@
+import type { AnyFieldMeta } from "@tanstack/react-form"
+
+import { useI18n } from "../../../i18n/react/useI18n"
+
+type FieldErrorsProps = {
+  meta: AnyFieldMeta
+}
+
+export const FieldErrors = ({ meta }: FieldErrorsProps) => {
+  const { t } = useI18n()
+  if (!meta.isTouched || meta.isValid) return null
+
+  return (
+    <ul className="my-2 flex flex-col gap-1" role="alert">
+      {meta.errors.map((error) => (
+        <li className="text-sm text-rose-800" key={error.code}>
+          {t(error.message)}
+        </li>
+      ))}
+    </ul>
+  )
+}

package/src/admin/components/form/SubmitButton.tsx

@@ -0,0 +1,79 @@
+import { useStore } from "@tanstack/react-form"
+import { useEffect, useRef, useState } from "react"
+
+import Icon from "../../../components/Icon"
+import { useI18n } from "../../../i18n/react/useI18n"
+import { useFormContext } from "./form-context"
+
+const SUCCESS_DURATION_MS = 2000
+
+const baseButtonClass =
+  "flex min-w-52 items-center justify-center gap-2 rounded-2xl px-6 py-3 font-bold uppercase shadow-sm transition-colors duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 disabled:cursor-not-allowed"
+
+const buttonStateClasses = {
+  idle: "bg-gray-800 text-gray-100 hover:bg-gray-950 hover:text-gray-300 disabled:bg-gray-600 disabled:text-gray-200",
+  error:
+    "bg-rose-700 text-white hover:bg-rose-800 hover:text-white disabled:bg-rose-600",
+  success:
+    "bg-emerald-600 text-white hover:bg-emerald-700 hover:text-white disabled:bg-emerald-500",
+} as const
+
+const buttonLabels = {
+  idle: "ln.admin.save",
+  success: "ln.admin.saved",
+  error: "ln.admin.failed",
+} as const
+
+const icons = {
+  idle: undefined,
+  success: "mdi--check",
+  error: "mdi--error-outline",
+} as const
+
+export default function SubmitButton() {
+  const form = useFormContext()
+  const { t } = useI18n()
+  const { submissionAttempts, isSubmitting, isSubmitSuccessful } = useStore(
+    form.store,
+    (state) => ({
+      canSubmit: state.canSubmit,
+      isSubmitting: state.isSubmitting,
+      isSubmitSuccessful: state.isSubmitSuccessful,
+      submissionAttempts: state.submissionAttempts,
+    }),
+  )
+  const buttonState = useButtonState(isSubmitSuccessful, submissionAttempts)
+  const buttonClass = `${baseButtonClass} ${buttonStateClasses[buttonState]}`
+  const label = buttonLabels[buttonState]
+  const icon = icons[buttonState]
+
+  return (
+    <button className={buttonClass} type="submit" disabled={isSubmitting}>
+      {icon && <Icon className={icon} ariaLabel="" />}
+      {t(label)}
+    </button>
+  )
+}
+
+function useButtonState(
+  isSubmitSuccessful: boolean,
+  submissionAttempts: number,
+) {
+  const [state, setState] = useState<"success" | "error" | "idle">("idle")
+  const timeoutRef = useRef<number | undefined>(undefined)
+  useEffect(() => {
+    if (submissionAttempts === 0) {
+      return
+    }
+    setState(isSubmitSuccessful ? "success" : "error")
+    if (timeoutRef.current !== undefined) {
+      window.clearTimeout(timeoutRef.current)
+    }
+    timeoutRef.current = window.setTimeout(() => {
+      setState("idle")
+      timeoutRef.current = undefined
+    }, SUCCESS_DURATION_MS)
+  }, [submissionAttempts, isSubmitSuccessful])
+
+  return state
+}

package/src/admin/components/form/TextField.tsx

@@ -0,0 +1,24 @@
+import { FieldErrors } from "./FieldErrors"
+import { useFieldContext } from "./form-context"
+
+export default function TextField({ label }: { label: string }) {
+  const field = useFieldContext<string>()
+  return (
+    <>
+      <label className="dy-form-control w-full max-w-sm">
+        <div className="dy-label">
+          <span className="dy-label-text">{label}</span>
+        </div>
+        <input
+          id={field.name}
+          name={field.name}
+          value={field.state.value}
+          onChange={(e) => field.handleChange(e.target.value)}
+          onBlur={field.handleBlur}
+          className={`dy-input dy-input-bordered dy-input-sm w-full max-w-sm ${field.state.meta.errors.length ? "dy-input-error" : ""}`}
+        />
+        <FieldErrors meta={field.state.meta} />
+      </label>
+    </>
+  )
+}

package/src/admin/components/form/form-context.ts

@@ -0,0 +1,4 @@
+import { createFormHookContexts } from "@tanstack/react-form"
+
+export const { fieldContext, useFieldContext, formContext, useFormContext } =
+  createFormHookContexts()

package/src/admin/components/form/index.ts

@@ -0,0 +1,16 @@
+import { createFormHook } from "@tanstack/react-form"
+
+import { fieldContext, formContext } from "./form-context"
+import SubmitButton from "./SubmitButton"
+import TextField from "./TextField"
+
+export const { useAppForm, withForm } = createFormHook({
+  fieldComponents: {
+    TextField,
+  },
+  formComponents: {
+    SubmitButton,
+  },
+  fieldContext,
+  formContext,
+})

package/src/admin/i18n/translations/en.yml

@@ -0,0 +1,11 @@
+ln.admin.edit: Edit
+ln.admin.save: Save
+ln.admin.saved: Saved
+ln.admin.failed: Failed
+ln.admin.edit-media-item: Edit media item
+ln.admin.back-to-details-page: Back to details page
+ln.admin.title: Title
+ln.admin.common-id: Common ID
+ln.admin.toast.invalid-data.title: Invalid form data
+ln.admin.toast.invalid-data.hint: Check the fields and try again.
+ln.admin.errors.non-empty-string: String must contain at least 1 character(s)

package/src/admin/i18n/translations.ts

@@ -0,0 +1,5 @@
+export const builtInAdminTranslations = {
+  en: () => import("./translations/en.yml?raw"),
+} as const
+
+export type AdminTranslationKey = "ln.admin.edit"

package/src/admin/pages/AdminRoute.astro

@@ -0,0 +1,16 @@
+---
+import Page from "../../layouts/Page.astro"
+
+export { getLocalePaths as getStaticPaths } from "../../i18n/get-locale-paths"
+---
+
+<Page>
+  <div
+    class="flex h-96 w-full items-center justify-center text-lg font-bold text-gray-500"
+  >
+    Admin features are enabled now.
+  </div>
+</Page>
+<script>
+  localStorage.setItem("ln-admin-enabled", "true")
+</script>

package/src/admin/pages/media/EditForm.tsx

@@ -0,0 +1,73 @@
+import { revalidateLogic } from "@tanstack/react-form"
+
+import { showToastById } from "../../../components/showToast"
+import Toast from "../../../components/Toast"
+import {
+  createI18n,
+  type I18nConfig,
+  I18nContext,
+} from "../../../i18n/react/i18n-context"
+import { useAppForm } from "../../components/form"
+import { type MediaItem, mediaItemSchema } from "../../types/media-item"
+import { updateMediaItem } from "./media-item-store"
+
+export default function EditForm({
+  mediaId,
+  mediaItem,
+  i18nConfig,
+}: {
+  mediaId: string
+  mediaItem: MediaItem
+  i18nConfig: I18nConfig
+}) {
+  const form = useAppForm({
+    defaultValues: mediaItem,
+    validators: {
+      onDynamic: mediaItemSchema,
+    },
+    validationLogic: revalidateLogic({
+      mode: "blur",
+      modeAfterSubmission: "change",
+    }),
+    onSubmit: async ({ value }) => {
+      await updateMediaItem(mediaId, { ...mediaItem, ...value })
+    },
+    onSubmitInvalid: () => {
+      showToastById("invalid-form-data-toast")
+    },
+  })
+  const i18n = createI18n(i18nConfig)
+  const { t } = i18n
+
+  return (
+    <I18nContext.Provider value={i18n}>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          form.handleSubmit()
+        }}
+        className="flex flex-col items-start gap-4"
+      >
+        <form.AppField
+          name="commonId"
+          children={(field) => (
+            <field.TextField label={t("ln.admin.common-id")} />
+          )}
+        />
+        <form.AppField
+          name="title"
+          children={(field) => <field.TextField label={t("ln.admin.title")} />}
+        />
+        <form.AppForm>
+          <form.SubmitButton />
+          <Toast id="invalid-form-data-toast" variant="error">
+            <div className="font-bold text-gray-700">
+              {t("ln.admin.toast.invalid-data.title")}
+            </div>
+            {t("ln.admin.toast.invalid-data.hint")}
+          </Toast>
+        </form.AppForm>
+      </form>
+    </I18nContext.Provider>
+  )
+}

package/src/admin/pages/media/EditRoute.astro

@@ -0,0 +1,42 @@
+---
+import type { GetStaticPaths } from "astro"
+import { getCollection } from "astro:content"
+import config from "virtual:lightnet/config"
+
+import { getRawMediaItem } from "../../../content/get-media-items"
+import { prepareI18nConfig } from "../../../i18n/react/prepare-i18n-config"
+import { resolveLocales } from "../../../i18n/resolve-locales"
+import Page from "../../../layouts/Page.astro"
+import EditForm from "./EditForm"
+
+export const getStaticPaths = (async () => {
+  const mediaItems = await getCollection("media")
+  return resolveLocales(config).flatMap((locale) =>
+    mediaItems.map(({ id: mediaId }) => ({ params: { mediaId, locale } })),
+  )
+}) satisfies GetStaticPaths
+
+const { mediaId } = Astro.params
+const mediaItemEntry = await getRawMediaItem(mediaId)
+
+const i18nConfig = prepareI18nConfig(Astro.locals.i18n, ["ln.admin.*"])
+const { t } = Astro.locals.i18n
+---
+
+<Page>
+  <div class="mx-auto max-w-screen-lg px-4 pt-12 md:px-8">
+    <a
+      class="underline"
+      href=`/${Astro.currentLocale}/media/faithful-freestyle--en`
+      >{t("ln.admin.back-to-details-page")}</a
+    >
+    <h1 class="mb-4 mt-8 text-lg">{t("ln.admin.edit-media-item")}</h1>
+
+    <EditForm
+      mediaId={mediaId}
+      mediaItem={mediaItemEntry.data}
+      i18nConfig={i18nConfig}
+      client:load
+    />
+  </div>
+</Page>