lightnet 3.10.4 → 3.10.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # lightnet
 
+## 3.10.5
+
+### Patch Changes
+
+- [#331](https://github.com/LightNetDev/LightNet/pull/331) [`cdacfdf`](https://github.com/LightNetDev/LightNet/commit/cdacfdfca311469248cb7d1ac0b46f92d9fd5521) Thanks [@smn-cds](https://github.com/smn-cds)! - Experimenatl Admin UI: support editing categories and collections
+
 ## 3.10.4
 
 ### Patch Changes

package/__e2e__/admin.spec.ts

@@ -143,6 +143,14 @@ test.describe("Media item edit page", () => {
     return () => writeFileRequestPromise
   }
 
+  const getPublishButton = (page: Page) =>
+    page.getByRole("button", { name: "Publish Changes" }).first()
+
+  const expectPublishedMessage = (page: Page) =>
+    expect(
+      page.getByRole("button", { name: "Published" }).first(),
+    ).toBeVisible()
+
   test("should edit title", async ({ page, startLightnet }) => {
     const ln = await startLightnet()
 
@@ -155,7 +163,7 @@ test.describe("Media item edit page", () => {
     await expect(titleInput).toHaveValue("Faithful Freestyle")
     await titleInput.fill(updatedTitle)
 
-    const saveButton = page.getByRole("button", { name: "Save" })
+    const saveButton = getPublishButton(page)
     await expect(saveButton).toBeEnabled()
     await saveButton.click()
 
@@ -171,7 +179,7 @@ test.describe("Media item edit page", () => {
       ...expectedMediaItem,
       title: updatedTitle,
     })
-    await expect(page.getByRole("button", { name: "Saved" })).toBeVisible()
+    await expectPublishedMessage(page)
   })
 
   test("Should update media type", async ({ page, startLightnet }) => {
@@ -184,7 +192,7 @@ test.describe("Media item edit page", () => {
     await expect(typeSelect).toHaveValue("book")
     await typeSelect.selectOption("video")
 
-    const saveButton = page.getByRole("button", { name: "Save" })
+    const saveButton = getPublishButton(page)
     await expect(saveButton).toBeEnabled()
     await saveButton.click()
 
@@ -196,7 +204,7 @@ test.describe("Media item edit page", () => {
       ...expectedMediaItem,
       type: "video",
     })
-    await expect(page.getByRole("button", { name: "Saved" })).toBeVisible()
+    await expectPublishedMessage(page)
   })
 
   test("Should update author name", async ({ page, startLightnet }) => {
@@ -211,7 +219,7 @@ test.describe("Media item edit page", () => {
     await expect(firstAuthorInput).toHaveValue("Sk8 Ministries")
     await firstAuthorInput.fill(updatedAuthor)
 
-    const saveButton = page.getByRole("button", { name: "Save" })
+    const saveButton = getPublishButton(page)
     await expect(saveButton).toBeEnabled()
     await saveButton.click()
 
@@ -223,7 +231,7 @@ test.describe("Media item edit page", () => {
       ...expectedMediaItem,
       authors: [updatedAuthor],
     })
-    await expect(page.getByRole("button", { name: "Saved" })).toBeVisible()
+    await expectPublishedMessage(page)
   })
 
   test("Should add author", async ({ page, startLightnet }) => {
@@ -239,7 +247,7 @@ test.describe("Media item edit page", () => {
     const additionalAuthor = "Tony Hawk"
     await newAuthorInput.fill(additionalAuthor)
 
-    const saveButton = page.getByRole("button", { name: "Save" })
+    const saveButton = getPublishButton(page)
     await expect(saveButton).toBeEnabled()
     await saveButton.click()
 
@@ -251,7 +259,7 @@ test.describe("Media item edit page", () => {
       ...expectedMediaItem,
       authors: ["Sk8 Ministries", additionalAuthor],
     })
-    await expect(page.getByRole("button", { name: "Saved" })).toBeVisible()
+    await expectPublishedMessage(page)
   })
 
   test("Should remove author", async ({ page, startLightnet }) => {
@@ -272,7 +280,7 @@ test.describe("Media item edit page", () => {
     })
     await removeButtons.first().click()
 
-    const saveButton = page.getByRole("button", { name: "Save" })
+    const saveButton = getPublishButton(page)
     await expect(saveButton).toBeEnabled()
     await saveButton.click()
 
@@ -284,7 +292,7 @@ test.describe("Media item edit page", () => {
       ...expectedMediaItem,
       authors: [replacementAuthor],
     })
-    await expect(page.getByRole("button", { name: "Saved" })).toBeVisible()
+    await expectPublishedMessage(page)
   })
 
   test("should show error message if common id is set empty", async ({
@@ -303,8 +311,59 @@ test.describe("Media item edit page", () => {
     await expect(
       page
         .getByRole("alert")
-        .filter({ hasText: "String must contain at least 1 character(s)" }),
+        .filter({ hasText: "Please enter at least one character." }),
     ).toBeVisible()
-    await expect(page.getByRole("button", { name: "Save" })).toBeDisabled()
+  })
+
+  test("should focus invalid field when submitting invalid form data", async ({
+    page,
+    startLightnet,
+  }) => {
+    const ln = await startLightnet()
+    await page.goto(ln.resolveURL("/en/admin/media/faithful-freestyle--en"))
+
+    const categoriesFieldset = page.getByRole("group", { name: "Categories" })
+    await page.getByRole("button", { name: "Add Category" }).click()
+    const newCategorySelect = categoriesFieldset.getByRole("combobox").last()
+    await expect(newCategorySelect).toHaveValue("")
+
+    // move focus away so the submission handler needs to return focus
+    await page.getByLabel("Title").click()
+
+    const saveButton = getPublishButton(page)
+    await saveButton.click()
+
+    await expect(
+      page.getByRole("alert").filter({ hasText: "This field is required." }),
+    ).toBeVisible()
+    await expect(newCategorySelect).toBeFocused()
+  })
+
+  test("should not allow assigning duplicate categories", async ({
+    page,
+    startLightnet,
+  }) => {
+    const ln = await startLightnet()
+    await page.goto(ln.resolveURL("/en/admin/media/faithful-freestyle--en"))
+
+    const categoriesFieldset = page.getByRole("group", { name: "Categories" })
+    await page.getByRole("button", { name: "Add Category" }).click()
+
+    const categorySelects = categoriesFieldset.getByRole("combobox")
+    const firstCategoryValue = await categorySelects.first().inputValue()
+    const duplicateCategorySelect = categorySelects.last()
+    await duplicateCategorySelect.selectOption(firstCategoryValue)
+
+    const publishButton = getPublishButton(page)
+    await publishButton.click()
+
+    const duplicateCategoryError = categoriesFieldset
+      .getByRole("alert")
+      .filter({ hasText: "Please choose a different value for each entry." })
+    await expect(duplicateCategoryError).toBeVisible()
+    await expect(duplicateCategorySelect).toHaveAttribute(
+      "aria-invalid",
+      "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.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"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.5_@types+node@24.10.1_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.5_@types+node@24.10.1_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.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"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.5_@types+node@24.10.1_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.5_@types+node@24.10.1_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

@@ -7,8 +7,8 @@
     "@astrojs/react": "^4.4.2",
     "@astrojs/tailwind": "^6.0.2",
     "@lightnet/decap-admin": "^3.1.4",
-    "astro": "^5.15.4",
-    "lightnet": "^3.10.3",
+    "astro": "^5.15.5",
+    "lightnet": "^3.10.4",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "sharp": "^0.34.5",

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.4",
+  "version": "3.10.5",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -47,7 +47,6 @@
   "dependencies": {
     "@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",
@@ -57,15 +56,15 @@
     "embla-carousel": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.1.0",
     "fuse.js": "^7.1.0",
-    "i18next": "^25.6.1",
+    "i18next": "^25.6.2",
     "marked": "^16.4.2",
     "react-hook-form": "^7.66.0",
     "yaml": "^2.8.1"
   },
   "devDependencies": {
     "@playwright/test": "^1.56.1",
-    "@types/node": "^22.19.0",
-    "@types/react": "^19.2.2",
+    "@types/node": "^22.19.1",
+    "@types/react": "^19.2.4",
     "typescript": "^5.9.3",
     "vitest": "^4.0.8"
   },

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

@@ -0,0 +1,74 @@
+import type { ReactNode } from "react"
+import {
+  type ArrayPath,
+  type Control,
+  type FieldValues,
+  useFieldArray,
+  type UseFieldArrayAppend,
+} from "react-hook-form"
+
+import Icon from "../../../components/Icon"
+import { useI18n } from "../../../i18n/react/useI18n"
+import ErrorMessage from "./atoms/ErrorMessage"
+import Hint from "./atoms/Hint"
+import Legend from "./atoms/Legend"
+import { useFieldError } from "./hooks/use-field-error"
+
+export default function DynamicArray<TFieldValues extends FieldValues>({
+  control,
+  name,
+  label,
+  hint,
+  renderElement,
+  addButton,
+}: {
+  name: ArrayPath<TFieldValues>
+  label: string
+  hint?: string
+  control: Control<TFieldValues>
+  renderElement: (index: number) => ReactNode
+  addButton: {
+    label: string
+    onClick: (
+      append: UseFieldArrayAppend<TFieldValues, ArrayPath<TFieldValues>>,
+      elementIndex: number,
+    ) => void
+  }
+}) {
+  const { fields, append, remove } = useFieldArray({
+    name,
+    control,
+  })
+  const { t } = useI18n()
+  const errorMessage = useFieldError({ control, name })
+  return (
+    <fieldset key={name}>
+      <Legend label={label} />
+      <div className="flex w-full flex-col divide-y divide-gray-300 overflow-hidden rounded-lg border border-gray-300 bg-gray-100 shadow-sm">
+        {fields.map((field, index) => (
+          <div className="flex w-full items-center gap-2 p-2" key={field.id}>
+            <div className="flex grow flex-col">{renderElement(index)}</div>
+            <button
+              className="flex items-center p-2 text-gray-600 transition-colors ease-in-out hover:text-rose-800"
+              type="button"
+              onClick={() => remove(index)}
+            >
+              <Icon className="mdi--remove" ariaLabel={t("ln.admin.remove")} />
+            </button>
+          </div>
+        ))}
+        <button
+          type="button"
+          className="p-4 text-sm font-bold text-gray-500 transition-colors ease-in-out hover:bg-gray-200"
+          onClick={() => {
+            addButton.onClick(append, fields.length)
+          }}
+        >
+          {t(addButton.label)}
+        </button>
+      </div>
+      <ErrorMessage message={errorMessage} />
+      <Hint label={hint} />
+    </fieldset>
+  )
+}

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

@@ -18,19 +18,19 @@ export default function Input<TFieldValues extends FieldValues>({
   control: Control<TFieldValues>
   type?: "text" | "date"
 }) {
-  const hasError = !!useFieldError({ control, name })
+  const errorMessage = 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" : ""}`}
+        className={`dy-input dy-input-bordered shadow-inner ${errorMessage ? "dy-input-error" : ""}`}
         type={type}
         id={name}
-        aria-invalid={hasError}
+        aria-invalid={!!errorMessage}
         {...control.register(name)}
       />
-      <ErrorMessage name={name} control={control} />
-      <Hint hint={hint} />
+      <ErrorMessage message={errorMessage} />
+      <Hint label={hint} />
     </div>
   )
 }

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

@@ -1,6 +1,5 @@
 import type { Control, FieldValues, Path } from "react-hook-form"
 
-import { useI18n } from "../../../i18n/react/useI18n"
 import ErrorMessage from "./atoms/ErrorMessage"
 import Hint from "./atoms/Hint"
 import Label from "./atoms/Label"
@@ -17,27 +16,26 @@ export default function Select<TFieldValues extends FieldValues>({
   label: string
   hint?: string
   control: Control<TFieldValues>
-  options: { id: string; label?: string }[]
+  options: { id: string; labelText?: string }[]
 }) {
-  const { t } = useI18n()
-  const hasError = !!useFieldError({ control, name })
+  const errorMessage = useFieldError({ control, name })
   return (
     <div key={name} className="flex w-full flex-col">
       <Label for={name} label={label} />
       <select
         {...control.register(name)}
         id={name}
-        aria-invalid={hasError}
-        className={`dy-select dy-select-bordered ${hasError ? "dy-select-error" : ""}"`}
+        aria-invalid={!!errorMessage}
+        className={`dy-select dy-select-bordered text-base shadow-sm ${errorMessage ? "dy-select-error" : ""}`}
       >
-        {options.map(({ id, label }) => (
+        {options.map(({ id, labelText }) => (
           <option key={id} value={id}>
-            {label ? t(label) : id}
+            {labelText ?? id}
           </option>
         ))}
       </select>
-      <ErrorMessage name={name} control={control} />
-      <Hint hint={hint} />
+      <ErrorMessage message={errorMessage} />
+      <Hint label={hint} />
     </div>
   )
 }

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

@@ -8,7 +8,7 @@ import type { MediaItem } from "../../types/media-item"
 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"
+  "flex min-w-52 items-center justify-center gap-2 rounded-2xl px-4 py-3 font-bold uppercase shadow-sm transition-colors easy-in-out 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",
@@ -19,8 +19,10 @@ const buttonStateClasses = {
 } as const
 
 const buttonLabels = {
-  idle: "ln.admin.save",
-  success: "ln.admin.saved",
+  idle: import.meta.env.DEV
+    ? "ln.admin.save-changes"
+    : "ln.admin.publish-changes",
+  success: import.meta.env.DEV ? "ln.admin.saved" : "ln.admin.published",
   error: "ln.admin.failed",
 } as const
 
@@ -38,10 +40,9 @@ export default function SubmitButton({
   className?: string
 }) {
   const { t } = useI18n()
-  const { isValid, isSubmitting, isSubmitSuccessful, submitCount } =
-    useFormState({
-      control,
-    })
+  const { isSubmitting, isSubmitSuccessful, submitCount } = useFormState({
+    control,
+  })
 
   const buttonState = useButtonState(isSubmitSuccessful, submitCount)
   const buttonClass = `${baseButtonClass} ${buttonStateClasses[buttonState]} ${className}`
@@ -49,11 +50,7 @@ export default function SubmitButton({
   const icon = icons[buttonState]
 
   return (
-    <button
-      className={buttonClass}
-      type="submit"
-      disabled={!isValid || isSubmitting}
-    >
+    <button className={buttonClass} type="submit" disabled={isSubmitting}>
       {icon && <Icon className={icon} ariaLabel="" />}
       {t(label)}
     </button>

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

@@ -1,34 +1,13 @@
-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>
-}) {
+export default function ErrorMessage({ message }: { message?: string }) {
   const { t } = useI18n()
-  const { errors } = useFormState({ control, name, exact: true })
+  if (!message) {
+    return null
+  }
   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>
-        )
-      }}
-    />
+    <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

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

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

@@ -3,15 +3,19 @@ import { useI18n } from "../../../../i18n/react/useI18n"
 export default function Label({
   label,
   for: htmlFor,
+  size = "sm",
+  className,
 }: {
   label: string
   for: string
+  className?: string
+  size?: "sm" | "xs"
 }) {
   const { t } = useI18n()
   return (
     <label
       htmlFor={htmlFor}
-      className="pb-2 text-sm font-bold uppercase text-gray-600"
+      className={`font-bold uppercase text-gray-500 ${size === "sm" ? "pb-2 text-sm" : "pb-1 text-xs"} ${className}`}
     >
       {t(label)}
     </label>

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

@@ -1,9 +1,19 @@
 import { useI18n } from "../../../../i18n/react/useI18n"
 
-export default function Label({ label }: { label: string }) {
+export default function Legend({
+  label,
+  size = "sm",
+  className,
+}: {
+  label: string
+  className?: string
+  size?: "sm" | "xs"
+}) {
   const { t } = useI18n()
   return (
-    <legend className="pb-2 text-sm font-bold uppercase text-gray-600">
+    <legend
+      className={`pb-2 font-bold uppercase text-gray-500 ${size === "sm" ? "text-sm" : "text-xs"} ${className}`}
+    >
       {t(label)}
     </legend>
   )

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

@@ -1,21 +1,13 @@
-import { type Control, type FieldError, useFormState } from "react-hook-form"
+import { type Control, get, 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
+  const error = get(errors, name) as { message: string } | undefined
+  return error?.message
 }

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

@@ -1,17 +1,27 @@
 ln.admin.edit: Edit
-ln.admin.save: Save
+ln.admin.publish-changes: Publish Changes
+ln.admin.published: Published
+ln.admin.save-changes: Save Changes
 ln.admin.saved: Saved
 ln.admin.failed: Failed
 ln.admin.remove: Remove
+ln.admin.name: Name
 ln.admin.add-author: Add Author
+ln.admin.add-category: Add Category
+ln.admin.collections: Collections
+ln.admin.add-collection: Add Collection
 ln.admin.edit-media-item: Edit media item
+ln.admin.position-in-collection: Position in Collection
 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.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
+ln.admin.common-id-hint: The English title, all lowercase, words separated with hyphens.
+ln.admin.errors.non-empty-string: Please enter at least one character.
+ln.admin.errors.invalid-date: That date doesn't look right.
+ln.admin.errors.required: This field is required.
+ln.admin.errors.gte-0: Use a number zero or greater.
+ln.admin.errors.unique-elements: Please choose a different value for each entry.
+ln.admin.errors.integer: Please enter a whole number.

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

@@ -11,24 +11,33 @@ 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 Categories from "./fields/Categories"
+import Collections from "./fields/Collections"
 import { updateMediaItem } from "./media-item-store"
 
+type SelectOption = { id: string; labelText: string }
+
 export default function EditForm({
   mediaId,
   mediaItem,
   i18nConfig,
   mediaTypes,
   languages,
+  categories,
+  collections,
 }: {
   mediaId: string
   mediaItem: MediaItem
   i18nConfig: I18nConfig
-  mediaTypes: { id: string; label: string }[]
-  languages: { id: string; label: string }[]
+  mediaTypes: SelectOption[]
+  languages: SelectOption[]
+  categories: SelectOption[]
+  collections: SelectOption[]
 }) {
   const { handleSubmit, control } = useForm({
     defaultValues: mediaItem,
     mode: "onTouched",
+    shouldFocusError: true,
     resolver: zodResolver(mediaItemSchema),
   })
   const onSubmit = handleSubmit(
@@ -37,7 +46,12 @@ export default function EditForm({
   const i18n = createI18n(i18nConfig)
   return (
     <I18nContext.Provider value={i18n}>
-      <form onSubmit={onSubmit}>
+      <form className="flex flex-col" onSubmit={onSubmit}>
+        <div className="mb-8 flex items-end justify-between">
+          <h1 className="text-3xl">{i18n.t("ln.admin.edit-media-item")}</h1>
+          <SubmitButton control={control} />
+        </div>
+
         <Input name="title" label="ln.admin.title" control={control} />
         <Input
           name="commonId"
@@ -65,8 +79,10 @@ export default function EditForm({
           type="date"
           control={control}
         />
+        <Categories categories={categories} control={control} />
+        <Collections collections={collections} control={control} />
 
-        <SubmitButton className="mt-8" control={control} />
+        <SubmitButton className="self-end" control={control} />
       </form>
     </I18nContext.Provider>
   )