lightnet 3.10.3 → 3.10.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # 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
+
+- [#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,369 @@
-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()
+
+    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"))
 
-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 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
+  }
+
+  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()
+
+    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 = getPublishButton(page)
+    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 expectPublishedMessage(page)
+  })
+
+  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 = getPublishButton(page)
+    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 expectPublishedMessage(page)
+  })
+
+  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 = getPublishButton(page)
+    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 expectPublishedMessage(page)
+  })
+
+  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 = getPublishButton(page)
+    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 expectPublishedMessage(page)
+  })
+
+  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 = getPublishButton(page)
+    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 expectPublishedMessage(page)
+  })
+
+  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: "Please enter at least one character." }),
+    ).toBeVisible()
+  })
+
+  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.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.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.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.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

@@ -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.5",
+    "lightnet": "^3.10.4",
     "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.5",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -45,28 +45,28 @@
     "tailwindcss": ">=3.4.0 <4.0.0"
   },
   "dependencies": {
-    "@astrojs/react": "^4.4.0",
+    "@astrojs/react": "^4.4.2",
     "@astrojs/tailwind": "^6.0.2",
+    "@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.2",
+    "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/react": "^19.2.2",
+    "@types/node": "^22.19.1",
+    "@types/react": "^19.2.4",
     "typescript": "^5.9.3",
-    "vitest": "^3.2.4"
+    "vitest": "^4.0.8"
   },
   "engines": {
     "node": ">=22"

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>
+  )
+}