lightnet 3.10.3 → 3.10.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # lightnet
 
+## 3.10.4
+
+### Patch Changes
+
+- [#329](https://github.com/LightNetDev/LightNet/pull/329) [`1730ef6`](https://github.com/LightNetDev/LightNet/commit/1730ef6f769d4c0d8fb22acdb86eaf19c3a32b2c) Thanks [@smn-cds](https://github.com/smn-cds)! - Improve performance of react i18n context.
+
 ## 3.10.3
 
 ### Patch Changes

package/__e2e__/admin.spec.ts

@@ -1,113 +1,310 @@
-import { expect } from "@playwright/test"
+import { readFile } from "node:fs/promises"
+
+import { expect, type Page } from "@playwright/test"
 
 import { lightnetTest } from "./test-utils"
 
 const test = lightnetTest("./fixtures/basics/")
+const faithfulFreestyleMediaUrl = new URL(
+  "./fixtures/basics/src/content/media/faithful-freestyle--en.json",
+  import.meta.url,
+)
 
-test("Should not show `Edit` button on details page by default.", async ({
-  page,
-  startLightnet,
-}) => {
-  await startLightnet()
+test.describe("Edit button on details page", () => {
+  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()
+    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()
-})
+    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 book details page after visiting `/en/admin/` path.", async ({
+    page,
+    startLightnet,
+  }) => {
+    const ln = await startLightnet()
 
-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",
-  )
-})
+    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()
 
-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",
-  )
+    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()
+  })
 })
 
-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()
+test.describe("Media item edit page", () => {
+  const recordWriteFile = async (page: Page) => {
+    type WriteFileRequest = { url: string; body: unknown }
+    let resolveWriteFileRequest: ((value: WriteFileRequest) => void) | null =
+      null
+    const writeFileRequestPromise = new Promise<WriteFileRequest>((resolve) => {
+      resolveWriteFileRequest = resolve
+    })
+    await page.route("**/api/internal/fs/write-file?*", async (route) => {
+      const request = route.request()
+      resolveWriteFileRequest?.({
+        url: request.url(),
+        body: JSON.parse(request.postData() ?? ""),
+      })
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({ status: "ok" }),
+      })
+    })
+    return () => writeFileRequestPromise
+  }
+
+  test("should edit title", async ({ page, startLightnet }) => {
+    const ln = await startLightnet()
+
+    const writeFileRequest = await recordWriteFile(page)
+
+    await page.goto(ln.resolveURL("/en/admin/media/faithful-freestyle--en"))
+
+    const updatedTitle = "Faithful Freestyle (Edited)"
+    const titleInput = page.getByLabel("Title")
+    await expect(titleInput).toHaveValue("Faithful Freestyle")
+    await titleInput.fill(updatedTitle)
+
+    const saveButton = page.getByRole("button", { name: "Save" })
+    await expect(saveButton).toBeEnabled()
+    await saveButton.click()
+
+    const { url, body } = await writeFileRequest()
+    expect(url).toContain(
+      "/api/internal/fs/write-file?path=src%2Fcontent%2Fmedia%2Ffaithful-freestyle--en.json",
+    )
+
+    const expectedMediaItem = JSON.parse(
+      await readFile(faithfulFreestyleMediaUrl, "utf-8"),
+    )
+    expect(body).toEqual({
+      ...expectedMediaItem,
+      title: updatedTitle,
+    })
+    await expect(page.getByRole("button", { name: "Saved" })).toBeVisible()
+  })
+
+  test("Should update media type", async ({ page, startLightnet }) => {
+    const ln = await startLightnet()
+    const writeFileRequest = await recordWriteFile(page)
+
+    await page.goto(ln.resolveURL("/en/admin/media/faithful-freestyle--en"))
+
+    const typeSelect = page.getByLabel("Type")
+    await expect(typeSelect).toHaveValue("book")
+    await typeSelect.selectOption("video")
+
+    const saveButton = page.getByRole("button", { name: "Save" })
+    await expect(saveButton).toBeEnabled()
+    await saveButton.click()
+
+    const { body } = await writeFileRequest()
+    const expectedMediaItem = JSON.parse(
+      await readFile(faithfulFreestyleMediaUrl, "utf-8"),
+    )
+    expect(body).toEqual({
+      ...expectedMediaItem,
+      type: "video",
+    })
+    await expect(page.getByRole("button", { name: "Saved" })).toBeVisible()
+  })
+
+  test("Should update author name", async ({ page, startLightnet }) => {
+    const ln = await startLightnet()
+    const writeFileRequest = await recordWriteFile(page)
+
+    await page.goto(ln.resolveURL("/en/admin/media/faithful-freestyle--en"))
+
+    const authorsFieldset = page.getByRole("group", { name: "Authors" })
+    const firstAuthorInput = authorsFieldset.getByRole("textbox").first()
+    const updatedAuthor = "Sk8 Ministries International"
+    await expect(firstAuthorInput).toHaveValue("Sk8 Ministries")
+    await firstAuthorInput.fill(updatedAuthor)
+
+    const saveButton = page.getByRole("button", { name: "Save" })
+    await expect(saveButton).toBeEnabled()
+    await saveButton.click()
+
+    const { body } = await writeFileRequest()
+    const expectedMediaItem = JSON.parse(
+      await readFile(faithfulFreestyleMediaUrl, "utf-8"),
+    )
+    expect(body).toEqual({
+      ...expectedMediaItem,
+      authors: [updatedAuthor],
+    })
+    await expect(page.getByRole("button", { name: "Saved" })).toBeVisible()
+  })
+
+  test("Should add author", async ({ page, startLightnet }) => {
+    const ln = await startLightnet()
+    const writeFileRequest = await recordWriteFile(page)
+
+    await page.goto(ln.resolveURL("/en/admin/media/faithful-freestyle--en"))
+
+    const authorsFieldset = page.getByRole("group", { name: "Authors" })
+    const addAuthorButton = page.getByRole("button", { name: "Add Author" })
+    await addAuthorButton.click()
+    const newAuthorInput = authorsFieldset.getByRole("textbox").last()
+    const additionalAuthor = "Tony Hawk"
+    await newAuthorInput.fill(additionalAuthor)
+
+    const saveButton = page.getByRole("button", { name: "Save" })
+    await expect(saveButton).toBeEnabled()
+    await saveButton.click()
+
+    const { body } = await writeFileRequest()
+    const expectedMediaItem = JSON.parse(
+      await readFile(faithfulFreestyleMediaUrl, "utf-8"),
+    )
+    expect(body).toEqual({
+      ...expectedMediaItem,
+      authors: ["Sk8 Ministries", additionalAuthor],
+    })
+    await expect(page.getByRole("button", { name: "Saved" })).toBeVisible()
+  })
+
+  test("Should remove author", async ({ page, startLightnet }) => {
+    const ln = await startLightnet()
+    const writeFileRequest = await recordWriteFile(page)
+
+    await page.goto(ln.resolveURL("/en/admin/media/faithful-freestyle--en"))
+
+    const authorsFieldset = page.getByRole("group", { name: "Authors" })
+    const addAuthorButton = page.getByRole("button", { name: "Add Author" })
+    const replacementAuthor = "Skate Evangelists"
+    await addAuthorButton.click()
+    const addedAuthorInput = authorsFieldset.getByRole("textbox").last()
+    await addedAuthorInput.fill(replacementAuthor)
+
+    const removeButtons = authorsFieldset.getByRole("button", {
+      name: "Remove",
+    })
+    await removeButtons.first().click()
+
+    const saveButton = page.getByRole("button", { name: "Save" })
+    await expect(saveButton).toBeEnabled()
+    await saveButton.click()
+
+    const { body } = await writeFileRequest()
+    const expectedMediaItem = JSON.parse(
+      await readFile(faithfulFreestyleMediaUrl, "utf-8"),
+    )
+    expect(body).toEqual({
+      ...expectedMediaItem,
+      authors: [replacementAuthor],
+    })
+    await expect(page.getByRole("button", { name: "Saved" })).toBeVisible()
+  })
+
+  test("should show error message if common id is set empty", async ({
+    page,
+    startLightnet,
+  }) => {
+    const ln = await startLightnet()
+    await page.goto(ln.resolveURL("/en/admin/media/faithful-freestyle--en"))
+
+    const commonIdInput = page.getByLabel("Common ID")
+    await expect(commonIdInput).toHaveValue("faithful-freestyle")
+
+    await commonIdInput.fill("")
+    await commonIdInput.blur()
+
+    await expect(
+      page
+        .getByRole("alert")
+        .filter({ hasText: "String must contain at least 1 character(s)" }),
+    ).toBeVisible()
+    await expect(page.getByRole("button", { name: "Save" })).toBeDisabled()
+  })
 })

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.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"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.4_@types+node@24.10.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.2_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.15.4_@types+node@24.10.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.2_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.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"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.4_@types+node@24.10.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.2_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.15.4_@types+node@24.10.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.2_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

@@ -4,14 +4,14 @@
   "version": "0.0.1",
   "private": "true",
   "dependencies": {
-    "@astrojs/react": "^4.4.0",
+    "@astrojs/react": "^4.4.2",
     "@astrojs/tailwind": "^6.0.2",
-    "@lightnet/decap-admin": "^3.1.3",
-    "astro": "^5.14.8",
-    "lightnet": "^3.10.0",
+    "@lightnet/decap-admin": "^3.1.4",
+    "astro": "^5.15.4",
+    "lightnet": "^3.10.3",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "sharp": "^0.34.4",
+    "sharp": "^0.34.5",
     "tailwindcss": "^3.4.18",
     "typescript": "^5.9.3"
   },

package/package.json

@@ -3,7 +3,7 @@
   "description": "LightNet makes it easy to run your own digital media library.",
   "type": "module",
   "license": "MIT",
-  "version": "3.10.3",
+  "version": "3.10.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -45,28 +45,29 @@
     "tailwindcss": ">=3.4.0 <4.0.0"
   },
   "dependencies": {
-    "@astrojs/react": "^4.4.0",
+    "@astrojs/react": "^4.4.2",
     "@astrojs/tailwind": "^6.0.2",
+    "@hookform/error-message": "^2.0.1",
+    "@hookform/resolvers": "^5.2.2",
     "@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.1",
+    "i18next": "^25.6.1",
+    "marked": "^16.4.2",
+    "react-hook-form": "^7.66.0",
     "yaml": "^2.8.1"
   },
   "devDependencies": {
     "@playwright/test": "^1.56.1",
-    "@types/node": "^22.18.12",
+    "@types/node": "^22.19.0",
     "@types/react": "^19.2.2",
     "typescript": "^5.9.3",
-    "vitest": "^3.2.4"
+    "vitest": "^4.0.8"
   },
   "engines": {
     "node": ">=22"

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

@@ -0,0 +1,36 @@
+import { type Control, type FieldValues, type Path } from "react-hook-form"
+
+import ErrorMessage from "./atoms/ErrorMessage"
+import Hint from "./atoms/Hint"
+import Label from "./atoms/Label"
+import { useFieldError } from "./hooks/use-field-error"
+
+export default function Input<TFieldValues extends FieldValues>({
+  name,
+  label,
+  hint,
+  control,
+  type = "text",
+}: {
+  name: Path<TFieldValues>
+  label: string
+  hint?: string
+  control: Control<TFieldValues>
+  type?: "text" | "date"
+}) {
+  const hasError = !!useFieldError({ control, name })
+  return (
+    <div key={name} className="flex w-full flex-col">
+      <Label for={name} label={label} />
+      <input
+        className={`dy-input dy-input-bordered ${hasError ? "dy-input-error" : ""}`}
+        type={type}
+        id={name}
+        aria-invalid={hasError}
+        {...control.register(name)}
+      />
+      <ErrorMessage name={name} control={control} />
+      <Hint hint={hint} />
+    </div>
+  )
+}

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

@@ -1,30 +1,34 @@
+import type { Control, FieldValues, Path } from "react-hook-form"
+
 import { useI18n } from "../../../i18n/react/useI18n"
-import { FieldErrors } from "./atoms/FieldErrors"
+import ErrorMessage from "./atoms/ErrorMessage"
 import Hint from "./atoms/Hint"
 import Label from "./atoms/Label"
-import { useFieldContext } from "./form-context"
+import { useFieldError } from "./hooks/use-field-error"
 
-export default function Select({
+export default function Select<TFieldValues extends FieldValues>({
+  name,
   label,
+  control,
   hint,
   options,
 }: {
+  name: Path<TFieldValues>
   label: string
   hint?: string
+  control: Control<TFieldValues>
   options: { id: string; label?: string }[]
 }) {
-  const field = useFieldContext<string>()
   const { t } = useI18n()
+  const hasError = !!useFieldError({ control, name })
   return (
-    <label className="dy-form-control w-full">
-      <Label label={label} />
+    <div key={name} className="flex w-full flex-col">
+      <Label for={name} label={label} />
       <select
-        id={field.name}
-        name={field.name}
-        value={field.state.value}
-        onChange={(e) => field.handleChange(e.target.value)}
-        onBlur={field.handleBlur}
-        className={`dy-select dy-select-bordered ${field.state.meta.errors.length ? "dy-select-error" : ""}"`}
+        {...control.register(name)}
+        id={name}
+        aria-invalid={hasError}
+        className={`dy-select dy-select-bordered ${hasError ? "dy-select-error" : ""}"`}
       >
         {options.map(({ id, label }) => (
           <option key={id} value={id}>
@@ -32,8 +36,8 @@ export default function Select({
           </option>
         ))}
       </select>
-      <FieldErrors meta={field.state.meta} />
+      <ErrorMessage name={name} control={control} />
       <Hint hint={hint} />
-    </label>
+    </div>
   )
 }

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

@@ -1,9 +1,9 @@
-import { useStore } from "@tanstack/react-form"
 import { useEffect, useRef, useState } from "react"
+import { type Control, useFormState } from "react-hook-form"
 
 import Icon from "../../../components/Icon"
 import { useI18n } from "../../../i18n/react/useI18n"
-import { useFormContext } from "./form-context"
+import type { MediaItem } from "../../types/media-item"
 
 const SUCCESS_DURATION_MS = 2000
 
@@ -30,25 +30,30 @@ const icons = {
   error: "mdi--error-outline",
 } as const
 
-export default function SubmitButton() {
-  const form = useFormContext()
+export default function SubmitButton({
+  control,
+  className,
+}: {
+  control: Control<MediaItem>
+  className?: string
+}) {
   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 { isValid, isSubmitting, isSubmitSuccessful, submitCount } =
+    useFormState({
+      control,
+    })
+
+  const buttonState = useButtonState(isSubmitSuccessful, submitCount)
+  const buttonClass = `${baseButtonClass} ${buttonStateClasses[buttonState]} ${className}`
   const label = buttonLabels[buttonState]
   const icon = icons[buttonState]
 
   return (
-    <button className={buttonClass} type="submit" disabled={isSubmitting}>
+    <button
+      className={buttonClass}
+      type="submit"
+      disabled={!isValid || isSubmitting}
+    >
       {icon && <Icon className={icon} ariaLabel="" />}
       {t(label)}
     </button>

package/src/admin/components/form/atoms/ErrorMessage.tsx

@@ -0,0 +1,34 @@
+import { ErrorMessage as RhfErrorMessage } from "@hookform/error-message"
+import { type Control, useFormState } from "react-hook-form"
+
+import { useI18n } from "../../../../i18n/react/useI18n"
+
+export default function ErrorMessage({
+  name,
+  control,
+}: {
+  name: string
+  control: Control<any>
+}) {
+  const { t } = useI18n()
+  const { errors } = useFormState({ control, name, exact: true })
+  return (
+    <RhfErrorMessage
+      errors={errors}
+      name={name}
+      render={({ message }) => {
+        if (!message) {
+          return null
+        }
+        return (
+          <p
+            className="my-2 flex flex-col gap-1 text-sm text-rose-800"
+            role="alert"
+          >
+            {t(message)}
+          </p>
+        )
+      }}
+    />
+  )
+}

package/src/admin/components/form/atoms/Hint.tsx

@@ -3,7 +3,7 @@ import { useI18n } from "../../../../i18n/react/useI18n"
 export default function Hint({ hint }: { hint?: string }) {
   const { t } = useI18n()
   return (
-    <div className="flex h-8 w-full items-center justify-end">
+    <div className="flex h-12 w-full items-start justify-end p-2">
       {hint && <span className="dy-label-text-alt">{t(hint)}</span>}
     </div>
   )

package/src/admin/components/form/atoms/Label.tsx

@@ -1,12 +1,19 @@
 import { useI18n } from "../../../../i18n/react/useI18n"
 
-export default function Label({ label }: { label: string }) {
+export default function Label({
+  label,
+  for: htmlFor,
+}: {
+  label: string
+  for: string
+}) {
   const { t } = useI18n()
   return (
-    <div className="dy-label">
-      <span className="text-sm font-bold uppercase text-gray-600">
-        {t(label)}
-      </span>
-    </div>
+    <label
+      htmlFor={htmlFor}
+      className="pb-2 text-sm font-bold uppercase text-gray-600"
+    >
+      {t(label)}
+    </label>
   )
 }

package/src/admin/components/form/atoms/Legend.tsx

@@ -0,0 +1,10 @@
+import { useI18n } from "../../../../i18n/react/useI18n"
+
+export default function Label({ label }: { label: string }) {
+  const { t } = useI18n()
+  return (
+    <legend className="pb-2 text-sm font-bold uppercase text-gray-600">
+      {t(label)}
+    </legend>
+  )
+}

package/src/admin/components/form/hooks/use-field-error.tsx

@@ -0,0 +1,21 @@
+import { type Control, type FieldError, useFormState } from "react-hook-form"
+
+export function useFieldError({
+  control,
+  name,
+  index,
+}: {
+  control: Control<any>
+  name: string
+  index?: number
+}) {
+  const { errors } = useFormState({ control, name, exact: true })
+  const error = errors[name]
+  if (!error) {
+    return undefined
+  }
+  if (Array.isArray(error)) {
+    return index !== undefined ? (error[index] as FieldError) : undefined
+  }
+  return error as FieldError
+}

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

@@ -2,15 +2,16 @@ ln.admin.edit: Edit
 ln.admin.save: Save
 ln.admin.saved: Saved
 ln.admin.failed: Failed
+ln.admin.remove: Remove
+ln.admin.add-author: Add Author
 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.authors: Authors
 ln.admin.created-on: Created on
 ln.admin.created-on-hint: When has this item been created on this library?
 ln.admin.common-id-hint: The english title, all lowercase, words separated with hyphens.
-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)
 ln.admin.errors.invalid-date: Invalid date
 ln.admin.errors.required: Required field

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

@@ -1,14 +1,16 @@
-import { revalidateLogic } from "@tanstack/react-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-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 Input from "../../components/form/Input"
+import Select from "../../components/form/Select"
+import SubmitButton from "../../components/form/SubmitButton"
 import { type MediaItem, mediaItemSchema } from "../../types/media-item"
+import Authors from "./fields/Authors"
 import { updateMediaItem } from "./media-item-store"
 
 export default function EditForm({
@@ -24,81 +26,47 @@ export default function EditForm({
   mediaTypes: { id: string; label: string }[]
   languages: { id: string; label: string }[]
 }) {
-  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 { handleSubmit, control } = useForm({
+    defaultValues: mediaItem,
+    mode: "onTouched",
+    resolver: zodResolver(mediaItemSchema),
   })
+  const onSubmit = handleSubmit(
+    async (data) => await updateMediaItem(mediaId, { ...mediaItem, ...data }),
+  )
   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"
-      >
-        <form.AppField
-          name="title"
-          children={(field) => <field.TextInput label="ln.admin.title" />}
-        />
-        <form.AppField
+      <form onSubmit={onSubmit}>
+        <Input name="title" label="ln.admin.title" control={control} />
+        <Input
           name="commonId"
-          children={(field) => (
-            <field.TextInput
-              label="ln.admin.common-id"
-              hint="ln.admin.common-id-hint"
-            />
-          )}
+          label="ln.admin.common-id"
+          hint="ln.admin.common-id-hint"
+          control={control}
         />
-        <form.AppField
+        <Select
           name="type"
-          children={(field) => (
-            <field.Select label="ln.type" options={mediaTypes} />
-          )}
+          label="ln.type"
+          options={mediaTypes}
+          control={control}
         />
-        <form.AppField
+        <Select
           name="language"
-          children={(field) => (
-            <field.Select label="ln.language" options={languages} />
-          )}
+          label="ln.language"
+          options={languages}
+          control={control}
         />
-        <form.AppField
+        <Authors control={control} />
+        <Input
           name="dateCreated"
-          children={(field) => (
-            <field.TextInput
-              type="date"
-              label="ln.admin.created-on"
-              hint="ln.admin.created-on-hint"
-            />
-          )}
+          label="ln.admin.created-on"
+          hint="ln.admin.created-on-hint"
+          type="date"
+          control={control}
         />
 
-        <div className="mt-8">
-          <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>
-        </div>
+        <SubmitButton className="mt-8" control={control} />
       </form>
     </I18nContext.Provider>
   )

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

@@ -18,7 +18,12 @@ export const getStaticPaths = (async () => {
 }) satisfies GetStaticPaths
 
 const { mediaId } = Astro.params
-const mediaItemEntry = await getRawMediaItem(mediaId)
+const { data: mediaItem } = await getRawMediaItem(mediaId)
+
+const formData = {
+  ...mediaItem,
+  authors: mediaItem.authors?.map((value) => ({ value })) ?? [],
+}
 
 const i18nConfig = prepareI18nConfig(Astro.locals.i18n, [
   "ln.admin.*",
@@ -50,7 +55,7 @@ const languages = config.languages.map(({ code, label }) => ({
 
     <EditForm
       mediaId={mediaId}
-      mediaItem={mediaItemEntry.data}
+      mediaItem={formData}
       i18nConfig={i18nConfig}
       mediaTypes={mediaTypes}
       languages={languages}

package/src/admin/pages/media/fields/Authors.tsx

@@ -0,0 +1,58 @@
+import { type Control, useFieldArray } from "react-hook-form"
+
+import Icon from "../../../../components/Icon"
+import { useI18n } from "../../../../i18n/react/useI18n"
+import ErrorMessage from "../../../components/form/atoms/ErrorMessage"
+import Hint from "../../../components/form/atoms/Hint"
+import Legend from "../../../components/form/atoms/Legend"
+import type { MediaItem } from "../../../types/media-item"
+
+export default function Authors({ control }: { control: Control<MediaItem> }) {
+  const { fields, append, remove } = useFieldArray({
+    name: "authors",
+    control,
+  })
+  const { t } = useI18n()
+  return (
+    <fieldset key="authors">
+      <Legend label="ln.admin.authors" />
+      <div className="flex w-full flex-col divide-y divide-gray-300 rounded-lg border border-gray-300">
+        {fields.map((author, index) => (
+          <div className="p-2" key={author.id}>
+            <div className="flex w-full items-center gap-2">
+              <input
+                className="dy-input dy-input-sm grow"
+                {...control.register(`authors.${index}.value`)}
+              />
+              <button
+                className="flex items-center p-2 text-gray-600 hover:text-gray-900"
+                type="button"
+                onClick={() => remove(index)}
+              >
+                <Icon
+                  className="mdi--remove"
+                  ariaLabel={t("ln.admin.remove")}
+                />
+              </button>
+            </div>
+            <ErrorMessage name={`authors.${index}.value`} control={control} />
+          </div>
+        ))}
+        <button
+          type="button"
+          className="p-4 text-sm font-bold text-gray-600 hover:bg-gray-200"
+          onClick={() => {
+            append(
+              { value: "" },
+              { focusName: `authors.${fields.length}.value` },
+            )
+          }}
+        >
+          {t("ln.admin.add-author")}
+        </button>
+      </div>
+      <ErrorMessage name="authors" control={control} />
+      <Hint />
+    </fieldset>
+  )
+}

package/src/admin/pages/media/media-item-store.ts

@@ -1,11 +1,13 @@
-import { type MediaItem, mediaItemSchema } from "../../types/media-item"
+import { type MediaItem } from "../../types/media-item"
 import { writeJson } from "./file-system"
 
-export const loadMediaItem = (id: string) =>
-  fetch(`/api/media/${id}.json`)
-    .then((response) => response.json())
-    .then((json) => mediaItemSchema.parse(json.content))
-
 export const updateMediaItem = async (id: string, item: MediaItem) => {
-  return writeJson(`/src/content/media/${id}.json`, item)
+  return writeJson(`/src/content/media/${id}.json`, mapToContentSchema(item))
+}
+
+const mapToContentSchema = (item: MediaItem) => {
+  return {
+    ...item,
+    authors: item.authors.map(({ value }) => value),
+  }
 }

package/src/admin/types/media-item.ts

@@ -9,7 +9,11 @@ export const mediaItemSchema = z.object({
   title: z.string().nonempty(NON_EMPTY_STRING),
   type: z.string().nonempty(REQUIRED),
   language: z.string().nonempty(REQUIRED),
+  authors: z
+    .object({ value: z.string().nonempty(NON_EMPTY_STRING) })
+    .array()
+    .min(1),
   dateCreated: z.string().date(INVALID_DATE),
 })
 
-export type MediaItem = z.infer<typeof mediaItemSchema>
+export type MediaItem = z.input<typeof mediaItemSchema>

package/src/components/HeroSection.astro

@@ -52,7 +52,7 @@ const subtitleSizes = {
       alt=""
     />
     <div
-      class="bg-gradient-radial absolute top-0 flex h-full w-full flex-col items-center justify-center from-black/30 to-black/40 p-4 text-center text-gray-50"
+      class="absolute top-0 flex h-full w-full flex-col items-center justify-center bg-gradient-radial from-black/30 to-black/40 p-4 text-center text-gray-50"
       class:list={[className]}
     >
       {

package/src/components/HighlightSection.astro

@@ -53,7 +53,7 @@ const { image, id, title, text, link, className, titleClass, textClass } =
       {
         link && (
           <a
-            class="bg-primary hover:bg-primary/85 inline-flex items-center justify-center gap-2 rounded-2xl px-6 py-3 text-sm font-bold uppercase text-gray-50 shadow-sm hover:text-gray-100"
+            class="inline-flex items-center justify-center gap-2 rounded-2xl bg-primary px-6 py-3 text-sm font-bold uppercase text-gray-50 shadow-sm hover:bg-primary/85 hover:text-gray-100"
             href={link.href}
           >
             {link.text}

package/src/components/SearchInput.astro

@@ -12,7 +12,7 @@ const { t } = Astro.locals.i18n
   action={`/${Astro.currentLocale}/media`}
   method="get"
   role="search"
-  class="dy-join group w-full rounded-2xl shadow-sm outline-2 outline-offset-2 outline-gray-400 group-focus-within:outline"
+  class="group dy-join w-full rounded-2xl shadow-sm outline-2 outline-offset-2 outline-gray-400 group-focus-within:outline"
   class:list={[Astro.props.className]}
 >
   <input

package/src/i18n/react/i18n-context.ts

@@ -1,4 +1,4 @@
-import { createContext } from "react"
+import { createContext, useMemo } from "react"
 
 export type I18n = {
   t: (key: string) => string
@@ -21,16 +21,18 @@ export const createI18n = ({
   currentLocale,
   direction,
 }: I18nConfig) => {
-  const t = (key: string) => {
-    const value = translations[key]
-    if (value) {
-      return value
+  return useMemo(() => {
+    const t = (key: string) => {
+      const value = translations[key]
+      if (value) {
+        return value
+      }
+      if (key.match(/^(?:ln|x)\../i)) {
+        console.error(`Missing translation for key ${key}`)
+        return ""
+      }
+      return key
     }
-    if (key.match(/^(?:ln|x)\../i)) {
-      console.error(`Missing translation for key ${key}`)
-      return ""
-    }
-    return key
-  }
-  return { t, currentLocale, direction }
+    return { t, currentLocale, direction }
+  }, [])
 }

package/src/layouts/MarkdownPage.astro

@@ -9,7 +9,7 @@ type Props = {
 
 <Page>
   <article
-    class="prose prose-img:rounded-md mx-auto mt-8 max-w-screen-md px-4 sm:mt-16 md:px-8"
+    class="prose mx-auto mt-8 max-w-screen-md px-4 prose-img:rounded-md sm:mt-16 md:px-8"
     class:list={[Astro.props.className]}
   >
     <slot />

package/src/layouts/components/Menu.astro

@@ -14,7 +14,7 @@ const { icon, label } = Astro.props
     role="button"
     tabindex="0"
     aria-label={Astro.locals.i18n.t(label)}
-    class="hover:text-primary flex cursor-pointer rounded-md p-3 text-gray-600"
+    class="flex cursor-pointer rounded-md p-3 text-gray-600 hover:text-primary"
   >
     <Icon className={icon} ariaLabel="" />
   </div>

package/src/layouts/components/PageNavigation.astro

@@ -35,7 +35,7 @@ const t = Astro.locals.i18n.t
   {
     !config.searchPage?.hideHeaderSearchIcon && (
       <a
-        class="hover:text-primary flex p-3 text-gray-600"
+        class="flex p-3 text-gray-600 hover:text-primary"
         aria-label={t("ln.search.title")}
         data-astro-prefetch="viewport"
         href={searchPagePath(Astro.currentLocale)}

package/src/pages/details-page/components/main-details/OpenButton.astro

@@ -24,7 +24,7 @@ const content = createContentMetadata(item.data.content[0])
     content.isExternal && (
       <Icon
         ariaLabel={Astro.locals.i18n.t("ln.external-link")}
-        className={`mdi--external-link shrink-0`}
+        className={`shrink-0 mdi--external-link`}
       />
     )
   }

package/src/pages/search-page/components/LoadingSkeleton.tsx

@@ -12,7 +12,7 @@ export default function LoadingSkeleton() {
         <div className="h-4 w-5/6 rounded-md bg-gray-200 md:h-6"></div>
       </div>
       <Icon
-        className="mdi--chevron-right my-auto me-4 ms-2 hidden shrink-0 text-2xl text-gray-300 sm:block"
+        className="my-auto me-4 ms-2 hidden shrink-0 text-2xl text-gray-300 mdi--chevron-right sm:block"
         flipIcon={direction === "rtl"}
         ariaLabel=""
       />

package/src/pages/search-page/components/SearchFilter.tsx

@@ -57,7 +57,7 @@ export default function SearchFilter({
           onInput={(e) => debouncedSetSearch(e.currentTarget.value)}
           onKeyDown={(e) => e.key === "Enter" && searchInput.current?.blur()}
         />
-        <Icon className="mdi--magnify text-xl" ariaLabel="" />
+        <Icon className="text-xl mdi--magnify" ariaLabel="" />
       </label>
       <div className="mb-8 grid grid-cols-1 gap-2 sm:grid-cols-3 sm:gap-6 md:mb-10">
         {languageFilterEnabled && (

package/src/pages/search-page/components/SearchListItem.tsx

@@ -99,7 +99,7 @@ export default function SearchListItem({
         </div>
       </div>
       <Icon
-        className="mdi--chevron-right md:group-hover:text-primary my-auto me-4 ms-2 hidden shrink-0 text-2xl text-gray-300 sm:block"
+        className="my-auto me-4 ms-2 hidden shrink-0 text-2xl text-gray-300 mdi--chevron-right sm:block md:group-hover:text-primary"
         flipIcon={direction === "rtl"}
         ariaLabel=""
       />

package/src/pages/search-page/components/Select.tsx

@@ -17,7 +17,7 @@ export default function Select({
         {label}
       </span>
       <select
-        className="dy-select dy-select-bordered sm:dy-select-sm w-full rounded-xl"
+        className="dy-select dy-select-bordered w-full rounded-xl sm:dy-select-sm"
         value={initialValue}
         onChange={(e) => valueChange(e.currentTarget.value)}
       >

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

@@ -1,34 +0,0 @@
-import { FieldErrors } from "./atoms/FieldErrors"
-import Hint from "./atoms/Hint"
-import Label from "./atoms/Label"
-import { useFieldContext } from "./form-context"
-
-export default function TextInput({
-  label,
-  hint,
-  type = "text",
-}: {
-  label: string
-  hint?: string
-  type?: "text" | "date"
-}) {
-  const field = useFieldContext<string>()
-  return (
-    <>
-      <label className="dy-form-control w-full">
-        <Label label={label} />
-        <input
-          id={field.name}
-          name={field.name}
-          type={type}
-          value={field.state.value}
-          onChange={(e) => field.handleChange(e.target.value)}
-          onBlur={field.handleBlur}
-          className={`dy-input dy-input-bordered ${field.state.meta.errors.length ? "dy-input-error" : ""}`}
-        />
-        <FieldErrors meta={field.state.meta} />
-        <Hint hint={hint} />
-      </label>
-    </>
-  )
-}

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

@@ -1,22 +0,0 @@
-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/form-context.ts

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

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

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