lightnet 3.10.7 → 3.10.8

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # lightnet
 
+## 3.10.8
+
+### Patch Changes
+
+- [#340](https://github.com/LightNetDev/LightNet/pull/340) [`6162179`](https://github.com/LightNetDev/LightNet/commit/6162179b90e987359934bd08ac9d4500eb560e25) Thanks [@smn-cds](https://github.com/smn-cds)! - Tighten locale detection to avoid partial matches
+
+  When the URL path starts with a locale-like prefix, only full segment matches should be treated as a locale. Previously `/enx` was parsed as locale `en`; now only `/en/...` (or just `/en`) will match.
+
+- [#346](https://github.com/LightNetDev/LightNet/pull/346) [`2bc1560`](https://github.com/LightNetDev/LightNet/commit/2bc15600b0a9bcfc3410f155191b7ea1c9c5306a) Thanks [@smn-cds](https://github.com/smn-cds)! - Fixes an issue where top menus would not close when tapping outside the menu on iOS Safari.
+  This update also improves overall menu accessibility.
+
+- [#345](https://github.com/LightNetDev/LightNet/pull/345) [`1e6cddb`](https://github.com/LightNetDev/LightNet/commit/1e6cddba0e783f9d59da7d36dd154dbcd784ed6b) Thanks [@smn-cds](https://github.com/smn-cds)! - Fix menu not working on ios safari
+
+- [#340](https://github.com/LightNetDev/LightNet/pull/340) [`6162179`](https://github.com/LightNetDev/LightNet/commit/6162179b90e987359934bd08ac9d4500eb560e25) Thanks [@smn-cds](https://github.com/smn-cds)! - Update dependencies
+
 ## 3.10.7
 
 ### Patch Changes

package/__e2e__/admin.spec.ts

@@ -25,13 +25,13 @@ test.describe("Edit button on details page", () => {
     await expect(editButton).toBeHidden()
   })
 
-  test("Should show `Edit` button on book details page after visiting `/en/admin/` path.", async ({
+  test("Should show `Edit` button on book details page after visiting `/admin/` path.", async ({
     page,
     lightnet,
   }) => {
     const ln = await lightnet()
 
-    await page.goto(ln.resolveURL("/en/admin/"))
+    await page.goto(ln.resolveURL("/admin/"))
     await expect(
       page.getByText("Admin features are enabled now.", { exact: true }),
     ).toBeVisible()
@@ -45,15 +45,15 @@ test.describe("Edit button on details page", () => {
     await expect(editButton).toBeVisible()
     await expect(editButton).toHaveAttribute(
       "href",
-      "/en/admin/media/faithful-freestyle--en",
+      "/admin/media/faithful-freestyle--en",
     )
   })
 
-  test("Should show `Edit` button on video details page after visiting `/en/admin/` path.", async ({
+  test("Should show `Edit` button on video details page after visiting `/admin/` path.", async ({
     page,
     lightnet,
   }) => {
-    const ln = await lightnet("/en/admin/")
+    const ln = await lightnet("/admin/")
 
     await expect(
       page.getByText("Admin features are enabled now.", { exact: true }),
@@ -68,15 +68,15 @@ test.describe("Edit button on details page", () => {
     await expect(editButton).toBeVisible()
     await expect(editButton).toHaveAttribute(
       "href",
-      "/en/admin/media/how-to-kickflip--de",
+      "/admin/media/how-to-kickflip--de",
     )
   })
 
-  test("Should show `Edit` button on audio details page after visiting `/en/admin/` path.", async ({
+  test("Should show `Edit` button on audio details page after visiting `/admin/` path.", async ({
     page,
     lightnet,
   }) => {
-    const ln = await lightnet("/en/admin/")
+    const ln = await lightnet("/admin/")
 
     await expect(
       page.getByText("Admin features are enabled now.", { exact: true }),
@@ -91,7 +91,7 @@ test.describe("Edit button on details page", () => {
     await expect(editButton).toBeVisible()
     await expect(editButton).toHaveAttribute(
       "href",
-      "/en/admin/media/skate-sounds--en",
+      "/admin/media/skate-sounds--en",
     )
   })
 
@@ -99,7 +99,7 @@ test.describe("Edit button on details page", () => {
     page,
     lightnet,
   }) => {
-    const ln = await lightnet("/en/admin/")
+    const ln = await lightnet("/admin/")
     await ln.goto("/en/media/faithful-freestyle--en")
 
     const editButton = page.locator("#edit-btn")
@@ -107,7 +107,7 @@ test.describe("Edit button on details page", () => {
 
     await editButton.click()
     await expect(page).toHaveURL(
-      ln.resolveURL("/en/admin/media/faithful-freestyle--en"),
+      ln.resolveURL("/admin/media/faithful-freestyle--en"),
     )
     await expect(
       page.getByText("Edit media item", { exact: false }),
@@ -147,7 +147,7 @@ test.describe("Media item edit page", () => {
     ).toBeVisible()
 
   test("should edit title", async ({ page, lightnet }) => {
-    await lightnet("/en/admin/media/faithful-freestyle--en")
+    await lightnet("/admin/media/faithful-freestyle--en")
     const writeFileRequest = await recordWriteFile(page)
 
     const updatedTitle = "Faithful Freestyle (Edited)"
@@ -175,7 +175,7 @@ test.describe("Media item edit page", () => {
   })
 
   test("Should update media type", async ({ page, lightnet }) => {
-    await lightnet("/en/admin/media/faithful-freestyle--en")
+    await lightnet("/admin/media/faithful-freestyle--en")
     const writeFileRequest = await recordWriteFile(page)
 
     const typeSelect = page.getByLabel("Type").first()
@@ -198,7 +198,7 @@ test.describe("Media item edit page", () => {
   })
 
   test("Should update author name", async ({ page, lightnet }) => {
-    await lightnet("/en/admin/media/faithful-freestyle--en")
+    await lightnet("/admin/media/faithful-freestyle--en")
     const writeFileRequest = await recordWriteFile(page)
 
     const authorsFieldset = page.getByRole("group", { name: "Authors" })
@@ -223,7 +223,7 @@ test.describe("Media item edit page", () => {
   })
 
   test("Should add author", async ({ page, lightnet }) => {
-    await lightnet("/en/admin/media/faithful-freestyle--en")
+    await lightnet("/admin/media/faithful-freestyle--en")
     const writeFileRequest = await recordWriteFile(page)
 
     const authorsFieldset = page.getByRole("group", { name: "Authors" })
@@ -249,7 +249,7 @@ test.describe("Media item edit page", () => {
   })
 
   test("Should remove author", async ({ page, lightnet }) => {
-    await lightnet("/en/admin/media/faithful-freestyle--en")
+    await lightnet("/admin/media/faithful-freestyle--en")
     const writeFileRequest = await recordWriteFile(page)
 
     const authorsFieldset = page.getByRole("group", { name: "Authors" })
@@ -283,7 +283,7 @@ test.describe("Media item edit page", () => {
     page,
     lightnet,
   }) => {
-    await lightnet("/en/admin/media/faithful-freestyle--en")
+    await lightnet("/admin/media/faithful-freestyle--en")
 
     const commonIdInput = page.getByLabel("Common ID")
     await expect(commonIdInput).toHaveValue("faithful-freestyle")
@@ -302,7 +302,7 @@ test.describe("Media item edit page", () => {
     page,
     lightnet,
   }) => {
-    await lightnet("/en/admin/media/faithful-freestyle--en")
+    await lightnet("/admin/media/faithful-freestyle--en")
 
     const categoriesFieldset = page.getByRole("group", { name: "Categories" })
     await page.getByRole("button", { name: "Add Category" }).click()
@@ -325,7 +325,7 @@ test.describe("Media item edit page", () => {
     page,
     lightnet,
   }) => {
-    await lightnet("/en/admin/media/faithful-freestyle--en")
+    await lightnet("/admin/media/faithful-freestyle--en")
 
     const categoriesFieldset = page.getByRole("group", { name: "Categories" })
     await page.getByRole("button", { name: "Add Category" }).click()

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.9_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.3_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.9_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.3_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.16.1_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.3_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.16.1_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.3_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.9_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.3_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.9_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.3_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.16.1_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.3_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.16.1_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.3_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.9",
-    "lightnet": "^3.10.6",
+    "astro": "^5.16.1",
+    "lightnet": "^3.10.7",
     "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.7",
+  "version": "3.10.8",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -50,7 +50,7 @@
     "@hookform/resolvers": "^5.2.2",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify/tailwind": "^1.2.0",
-    "@mdxeditor/editor": "^3.49.3",
+    "@mdxeditor/editor": "^3.50.0",
     "@tailwindcss/typography": "^0.5.19",
     "@tanstack/react-virtual": "^3.13.12",
     "daisyui": "^4.12.24",
@@ -63,11 +63,11 @@
     "yaml": "^2.8.1"
   },
   "devDependencies": {
-    "@playwright/test": "^1.56.1",
+    "@playwright/test": "^1.57.0",
     "@types/node": "^22.19.1",
-    "@types/react": "^19.2.6",
+    "@types/react": "^19.2.7",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.10"
+    "vitest": "^4.0.14"
   },
   "engines": {
     "node": ">=22"

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

@@ -8,7 +8,7 @@ import {
 } from "react-hook-form"
 
 import Icon from "../../../components/Icon"
-import { useI18n } from "../../../i18n/react/useI18n"
+import { useI18n } from "../../../i18n/react/use-i18n"
 import ErrorMessage from "./atoms/ErrorMessage"
 import Hint from "./atoms/Hint"
 import Label from "./atoms/Label"
@@ -52,7 +52,7 @@ export default function DynamicArray<TFieldValues extends FieldValues>({
           <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 rounded-md p-2 text-gray-600 transition-colors ease-in-out hover:text-rose-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-700"
+              className="flex items-center rounded-md p-2 text-gray-600 transition-colors ease-in-out hover:text-rose-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-700"
               type="button"
               onClick={() => remove(index)}
             >
@@ -62,7 +62,7 @@ export default function DynamicArray<TFieldValues extends FieldValues>({
         ))}
         <button
           type="button"
-          className="rounded-b-lg p-4 text-sm font-bold text-gray-500 transition-colors ease-in-out hover:bg-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-700"
+          className="rounded-b-lg p-4 text-sm font-bold text-gray-500 transition-colors ease-in-out hover:bg-sky-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-700"
           onClick={() => {
             addButton.onClick(append, fields.length)
           }}

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

@@ -41,7 +41,7 @@ export default function Input<TFieldValues extends FieldValues>({
       )}
 
       <input
-        className={`dy-input dy-input-bordered border-gray-300 shadow-inner focus:border-blue-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-700 ${isDirty && !errorMessage ? "border-gray-700" : ""} ${errorMessage ? "border-rose-800" : ""} ${label ? "rounded-ss-none" : ""}`}
+        className={`dy-input dy-input-bordered border-gray-300 shadow-inner focus:border-sky-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-sky-700 ${isDirty && !errorMessage ? "border-gray-700" : ""} ${errorMessage ? "border-rose-800" : ""} ${label ? "rounded-ss-none" : ""}`}
         id={name}
         aria-invalid={!!errorMessage}
         {...control.register(name)}

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

@@ -32,7 +32,7 @@ export default function MarkdownEditor<TFieldValues extends FieldValues>({
       </legend>
 
       <div
-        className={`overflow-hidden rounded-lg rounded-ss-none border border-gray-300 shadow-sm group-focus-within:border-blue-700 group-focus-within:ring-1 group-focus-within:ring-blue-700 ${isDirty && !errorMessage ? "border-gray-700" : ""} ${errorMessage ? "border-rose-800" : ""}`}
+        className={`overflow-hidden rounded-lg rounded-ss-none border border-gray-300 shadow-sm group-focus-within:border-sky-700 group-focus-within:ring-1 group-focus-within:ring-sky-700 ${isDirty && !errorMessage ? "border-gray-700" : ""} ${errorMessage ? "border-rose-800" : ""}`}
       >
         <Suspense
           fallback={

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

@@ -44,7 +44,7 @@ export default function Select<TFieldValues extends FieldValues>({
         id={name}
         aria-invalid={!!errorMessage}
         defaultValue={defaultValue}
-        className={`dy-select dy-select-bordered text-base shadow-sm focus:border-blue-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-700 ${isDirty && !errorMessage ? "border-gray-700" : ""} ${errorMessage ? "border-rose-800" : ""} ${label ? "rounded-ss-none" : ""}`}
+        className={`dy-select dy-select-bordered text-base shadow-sm focus:border-sky-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-sky-700 ${isDirty && !errorMessage ? "border-gray-700" : ""} ${errorMessage ? "border-rose-800" : ""} ${label ? "rounded-ss-none" : ""}`}
       >
         {options.map(({ id, labelText }) => (
           <option key={id} value={id}>

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

@@ -2,13 +2,13 @@ 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 { useI18n } from "../../../i18n/react/use-i18n"
 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-4 py-3 font-bold shadow-sm transition-colors easy-in-out focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-blue-700 focus-visible:ring-offset-1 disabled:cursor-not-allowed"
+  "flex min-w-52 items-center justify-center gap-2 rounded-2xl px-4 py-3 font-bold shadow-sm transition-colors easy-in-out focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-sky-700 focus-visible:ring-offset-1 disabled:cursor-not-allowed"
 
 const buttonStateClasses = {
   idle: "bg-gray-800 text-gray-50 hover:bg-gray-950 hover:text-gray-300 disabled:bg-gray-500 disabled:text-gray-300",

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

@@ -1,4 +1,4 @@
-import { useI18n } from "../../../../i18n/react/useI18n"
+import { useI18n } from "../../../../i18n/react/use-i18n"
 
 export default function ErrorMessage({ message }: { message?: string }) {
   const { t } = useI18n()

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

@@ -0,0 +1,115 @@
+import { type ChangeEvent, type DragEvent, useRef, useState } from "react"
+import {
+  type Control,
+  type FieldValues,
+  type Path,
+  useController,
+} from "react-hook-form"
+import config from "virtual:lightnet/config"
+
+import { useI18n } from "../../../../i18n/react/use-i18n"
+
+type FileType = "image/png" | "image/jpeg" | "image/webp"
+
+export default function FileUpload<TFieldValues extends FieldValues>({
+  name,
+  control,
+  destinationPath,
+  onFileChange,
+  fileName,
+  acceptedFileTypes,
+}: {
+  onFileChange: (file: File) => void
+  control: Control<TFieldValues>
+  name: Path<TFieldValues>
+  destinationPath: string
+  fileName?: string
+  acceptedFileTypes: Readonly<FileType[]>
+}) {
+  const { field } = useController({
+    name,
+    control,
+  })
+  const fileInputRef = useRef<HTMLInputElement | null>(null)
+  const { t } = useI18n()
+
+  const [isDragging, setIsDragging] = useState(false)
+
+  const onFileSelected = (file?: File) => {
+    if (!file) {
+      return
+    }
+    if (!acceptedFileTypes.includes(file.type as any)) {
+      return
+    }
+    const nameParts = file.name.split(".")
+    const extension = nameParts.pop()
+    const name = nameParts.join(".")
+    field.onChange({
+      ...field.value,
+      path: `${destinationPath}/${fileName ?? name}.${extension}`,
+      file,
+    })
+    onFileChange(file)
+    field.onBlur()
+  }
+
+  const onDragEnter = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault()
+    setIsDragging(true)
+  }
+
+  const onDrop = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault()
+    setIsDragging(false)
+    onFileSelected(event.dataTransfer.files?.[0])
+  }
+
+  const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onFileSelected(event.target.files?.[0])
+    // allow selecting the same file twice in a row
+    event.target.value = ""
+  }
+
+  return (
+    <>
+      <div
+        className={`flex w-full flex-col items-center justify-center gap-1 rounded-md border-2 border-dashed border-gray-300 bg-gray-200 p-4 transition-colors ease-in-out ${isDragging ? "border-sky-700 bg-sky-50" : ""} focus-within:border-sky-700 hover:bg-sky-50`}
+        role="button"
+        tabIndex={0}
+        onClick={() => fileInputRef.current?.click()}
+        onBlur={field.onBlur}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault()
+            fileInputRef.current?.click()
+          }
+        }}
+        onDragOver={onDragEnter}
+        onDragLeave={() => setIsDragging(false)}
+        onDrop={onDrop}
+      >
+        <span className="text-sm text-gray-800">
+          {t("ln.admin.file-upload-hint")}
+        </span>
+        <span className="text-xs text-gray-600">
+          {t("ln.admin.file-upload-size-limit", {
+            limit: config.experimental?.admin?.maxFileSize,
+          })}
+        </span>
+      </div>
+      <input
+        id={field.name}
+        name={field.name}
+        ref={(ref) => {
+          fileInputRef.current = ref
+          field.ref(ref)
+        }}
+        type="file"
+        accept={acceptedFileTypes.join(",")}
+        className="sr-only"
+        onChange={onInputChange}
+      />
+    </>
+  )
+}

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

@@ -1,4 +1,4 @@
-import { useI18n } from "../../../../i18n/react/useI18n"
+import { useI18n } from "../../../../i18n/react/use-i18n"
 
 export default function Hint({
   label,

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

@@ -1,4 +1,4 @@
-import { useI18n } from "../../../../i18n/react/useI18n"
+import { useI18n } from "../../../../i18n/react/use-i18n"
 
 export default function Label({
   label,
@@ -17,7 +17,7 @@ export default function Label({
   return (
     <div className="flex">
       <span
-        className={`rounded-t-md bg-gray-300 px-4 font-bold text-gray-700 shadow-sm transition-colors duration-150 group-focus-within:bg-blue-700 group-focus-within:text-gray-50 group-focus-within:ring-1 group-focus-within:ring-blue-700 ${size === "medium" ? "py-2 text-sm" : "py-1 text-xs"} ${isDirty ? "bg-gray-700 !text-white" : ""} ${isInvalid ? "bg-rose-800 !text-gray-50" : ""} ${className}`}
+        className={`rounded-t-md bg-gray-300 px-4 font-bold text-gray-700 shadow-sm transition-colors duration-150 group-focus-within:bg-sky-700 group-focus-within:text-gray-50 group-focus-within:ring-1 group-focus-within:ring-sky-700 ${size === "medium" ? "py-2 text-sm" : "py-1 text-xs"} ${isDirty ? "bg-gray-700 !text-white" : ""} ${isInvalid ? "bg-rose-800 !text-gray-50" : ""} ${className}`}
       >
         {t(label)}
       </span>

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

@@ -3,11 +3,32 @@ import { type Control, get, useFormState } from "react-hook-form"
 export function useFieldError({
   control,
   name,
+  exact = true,
 }: {
   control: Control<any>
   name: string
+  exact?: boolean
 }) {
-  const { errors } = useFormState({ control, name, exact: true })
+  const { errors } = useFormState({ control, name, exact })
   const error = get(errors, name) as { message: string } | undefined
-  return error?.message
+  if (exact) {
+    return error?.message
+  } else {
+    return findErrorMessage(get(errors, name))
+  }
+}
+
+function findErrorMessage(errors?: unknown) {
+  if (!errors) {
+    return undefined
+  }
+  for (const [key, value] of Object.entries(errors)) {
+    if (key === "message" && typeof value === "string") {
+      return value
+    }
+    if (value && typeof value === "object" && !Array.isArray(value)) {
+      return findErrorMessage(value)
+    }
+  }
+  return undefined
 }

package/src/admin/i18n/admin-i18n.ts

@@ -0,0 +1,21 @@
+import config from "virtual:lightnet/config"
+
+import { resolveDefaultLocale } from "../../i18n/resolve-default-locale"
+import { resolveLanguage } from "../../i18n/resolve-language"
+import { resolveLocales } from "../../i18n/resolve-locales"
+import { translationKeys, useTranslate } from "../../i18n/translate"
+
+const currentLocale = config.experimental?.admin?.languageCode ?? "en"
+const t = useTranslate(currentLocale)
+const { direction } = resolveLanguage(currentLocale)
+const defaultLocale = resolveDefaultLocale(config)
+const locales = resolveLocales(config)
+
+export const adminI18n = {
+  currentLocale,
+  t,
+  direction,
+  translationKeys,
+  defaultLocale,
+  locales,
+}

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

@@ -15,13 +15,19 @@ 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.image: Image
+ln.admin.file-upload-hint: Drag a file here or click to browse files.
+ln.admin.file-upload-size-limit: "Files up to {{limit}} MB accepted."
+ln.admin.image-hint: Cover image with format PNG, JPG or WebP.
+ln.admin.select-file: Select file
 ln.admin.authors: Authors
 ln.admin.description: Description
 ln.admin.date-created: Date Created
-ln.admin.date-created-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.date-created-hint: The date this item was added to this media library.
+ln.admin.common-id-hint: Use a shared Common ID to link translated versions of a media item.
 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.error.file-size-exceeded: This file is too big.
 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.

package/src/admin/pages/AdminRoute.astro

@@ -1,7 +1,5 @@
 ---
 import Page from "../../layouts/Page.astro"
-
-export { getLocalePaths as getStaticPaths } from "../../i18n/get-locale-paths"
 ---
 
 <Page>

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

@@ -14,6 +14,7 @@ import { type MediaItem, mediaItemSchema } from "../../types/media-item"
 import Authors from "./fields/Authors"
 import Categories from "./fields/Categories"
 import Collections from "./fields/Collections"
+import Image from "./fields/Image"
 import { updateMediaItem } from "./media-item-store"
 
 type SelectOption = { id: string; labelText: string }
@@ -59,13 +60,6 @@ export default function EditForm({
           control={control}
           defaultValue={mediaItem.title}
         />
-        <Input
-          name="commonId"
-          label="ln.admin.common-id"
-          hint="ln.admin.common-id-hint"
-          control={control}
-          defaultValue={mediaItem.commonId}
-        />
         <Select
           name="type"
           label="ln.type"
@@ -73,6 +67,11 @@ export default function EditForm({
           control={control}
           defaultValue={mediaItem.type}
         />
+        <Image
+          control={control}
+          defaultValue={mediaItem.image}
+          mediaId={mediaId}
+        />
         <Select
           name="language"
           label="ln.language"
@@ -104,8 +103,15 @@ export default function EditForm({
           name="description"
           label="ln.admin.description"
         />
+        <Input
+          name="commonId"
+          label="ln.admin.common-id"
+          hint="ln.admin.common-id-hint"
+          control={control}
+          defaultValue={mediaItem.commonId}
+        />
 
-        <SubmitButton className="self-end" control={control} />
+        <SubmitButton className="mt-8 self-end" control={control} />
       </form>
     </I18nContext.Provider>
   )

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

@@ -1,28 +1,40 @@
 ---
 import type { GetStaticPaths } from "astro"
+import { getImage } from "astro:assets"
 import { getCollection } from "astro:content"
 import config from "virtual:lightnet/config"
 
 import { getCategories } from "../../../content/get-categories"
-import { getRawMediaItem } from "../../../content/get-media-items"
+import { getMediaItem, getRawMediaItem } from "../../../content/get-media-items"
 import { getMediaTypes } from "../../../content/get-media-types"
 import { prepareI18nConfig } from "../../../i18n/react/prepare-i18n-config"
-import { resolveLocales } from "../../../i18n/resolve-locales"
 import Page from "../../../layouts/Page.astro"
+import { adminI18n } from "../../i18n/admin-i18n"
 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 } })),
-  )
+  return mediaItems.map(({ id: mediaId }) => ({ params: { mediaId } }))
 }) satisfies GetStaticPaths
 
 const { mediaId } = Astro.params
 const { data: mediaItem } = await getRawMediaItem(mediaId)
+const {
+  data: { image },
+} = await getMediaItem(mediaId)
+
+const previewImage = await getImage({
+  src: image,
+  width: 256,
+  format: "webp",
+})
 
 const formData = {
   ...mediaItem,
+  image: {
+    path: mediaItem.image,
+    previewSrc: previewImage.src,
+  },
   authors: mediaItem.authors?.map((value) => ({ value })) ?? [],
   categories:
     mediaItem.categories?.map((value) => ({
@@ -31,34 +43,38 @@ const formData = {
   collections: mediaItem.collections ?? [],
 }
 
-const i18nConfig = prepareI18nConfig(Astro.locals.i18n, [
+const i18nConfig = prepareI18nConfig(adminI18n, [
   "ln.admin.*",
   "ln.type",
   "ln.language",
   "ln.categories",
 ])
-const { t, currentLocale } = Astro.locals.i18n
+const { t, currentLocale } = adminI18n
 
-const mediaTypes = (await getMediaTypes()).map(({ id, data: { label } }) => ({
+const mediaTypes = (await getMediaTypes()).map(({ id }) => ({
   id,
-  labelText: t(label),
+  labelText: id,
 }))
 
-const categories = (await getCategories(currentLocale, t)).map(
-  ({ id, labelText }) => ({ id, labelText }),
-)
+const categories = (await getCategories(currentLocale, t)).map(({ id }) => ({
+  id,
+  labelText: id,
+}))
 
 const collections = (await getCollection("media-collections")).map(
-  ({ id, data: { label } }) => ({ id, labelText: t(label) }),
+  ({ id }) => ({ id, labelText: id }),
 )
 
 const languages = config.languages.map(({ code, label }) => ({
   id: code,
-  labelText: t(label),
+  labelText: `${code} - ${t(label)}`,
 }))
 ---
 
-<Page mainClass="bg-gray-700">
+<Page
+  mainClass="bg-gradient-to-t from-sky-950 to-slate-800"
+  locale={currentLocale}
+>
   <div class="mx-auto block max-w-screen-md px-4 md:px-8">
     <a
       class="block pb-4 pt-8 text-gray-200 underline"

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

@@ -0,0 +1,86 @@
+import { useEffect, useRef, useState } from "react"
+import { type Control } from "react-hook-form"
+
+import ErrorMessage from "../../../components/form/atoms/ErrorMessage"
+import FileUpload from "../../../components/form/atoms/FileUpload"
+import Hint from "../../../components/form/atoms/Hint"
+import Label from "../../../components/form/atoms/Label"
+import { useFieldDirty } from "../../../components/form/hooks/use-field-dirty"
+import { useFieldError } from "../../../components/form/hooks/use-field-error"
+import type { MediaItem } from "../../../types/media-item"
+
+const acceptedFileTypes = ["image/jpeg", "image/png", "image/webp"] as const
+
+export default function Image({
+  control,
+  defaultValue,
+  mediaId,
+}: {
+  control: Control<MediaItem>
+  defaultValue: MediaItem["image"]
+  mediaId: string
+}) {
+  const objectUrlRef = useRef<string | null>(null)
+  const [previewSrc, setPreviewSrc] = useState<string | undefined>(
+    defaultValue.previewSrc,
+  )
+  const isDirty = useFieldDirty({ control, name: "image" })
+  const errorMessage = useFieldError({ control, name: "image", exact: false })
+
+  useEffect(() => {
+    // cleanup on component unmount
+    return () => {
+      if (objectUrlRef.current) {
+        URL.revokeObjectURL(objectUrlRef.current)
+      }
+    }
+  }, [])
+
+  const updateImage = (file?: File) => {
+    if (!file) {
+      return
+    }
+    if (!acceptedFileTypes.includes(file.type as any)) {
+      return
+    }
+    if (objectUrlRef.current) {
+      URL.revokeObjectURL(objectUrlRef.current)
+    }
+    const objectUrl = URL.createObjectURL(file)
+    objectUrlRef.current = objectUrl
+    setPreviewSrc(objectUrl)
+  }
+
+  return (
+    <div className="group flex w-full flex-col">
+      <label htmlFor="image">
+        <Label
+          label="ln.admin.image"
+          isDirty={isDirty}
+          isInvalid={!!errorMessage}
+        />
+      </label>
+      <div
+        className={`flex w-full items-stretch gap-4 rounded-lg rounded-ss-none border bg-gray-50 px-4 py-3 shadow-inner outline-none transition-colors ${isDirty && !errorMessage ? "border-gray-700" : "border-gray-300"} ${errorMessage ? "border-rose-800" : ""} `}
+      >
+        <div className="flex h-32 w-32 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-gray-200 p-1">
+          <img
+            src={previewSrc}
+            alt=""
+            className="h-full w-full object-contain"
+          />
+        </div>
+        <FileUpload
+          name="image"
+          control={control}
+          onFileChange={updateImage}
+          destinationPath="./images"
+          acceptedFileTypes={acceptedFileTypes}
+          fileName={mediaId}
+        />
+      </div>
+      <ErrorMessage message={errorMessage} />
+      <Hint preserveSpace={true} label="ln.admin.image-hint" />
+    </div>
+  )
+}

package/src/admin/pages/media/file-system.ts

@@ -1,9 +1,13 @@
-export const writeFile = (path: string, body: string) => {
+export const writeFile = (
+  path: string,
+  body: BodyInit,
+  contentType?: string,
+) => {
   return fetch(
     `/api/internal/fs/write-file?path=${encodeURIComponent(path.replace(/^\//, ""))}`,
     {
       method: "POST",
-      headers: { "Content-Type": resolveContentType(path) },
+      headers: { "Content-Type": contentType ?? resolveContentType(path) },
       body,
     },
   )

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

@@ -1,13 +1,42 @@
 import { type MediaItem } from "../../types/media-item"
-import { writeJson } from "./file-system"
+import { writeFile, writeJson } from "./file-system"
 
 export const updateMediaItem = async (id: string, item: MediaItem) => {
-  return writeJson(`/src/content/media/${id}.json`, mapToContentSchema(item))
+  const imagePath = await saveImage(item.image)
+  return writeJson(
+    `/src/content/media/${id}.json`,
+    mapToContentSchema(item, imagePath),
+  )
 }
 
-const mapToContentSchema = (item: MediaItem) => {
+const ensureRelativeImagePath = (path: string) => {
+  const trimmed = path.trim()
+  if (!trimmed) {
+    return ""
+  }
+  if (trimmed.startsWith("./")) {
+    return trimmed
+  }
+  return `./${trimmed}`
+}
+
+const saveImage = async (image: MediaItem["image"]) => {
+  const relativePath = ensureRelativeImagePath(image?.path ?? "")
+  if (!relativePath || !image?.file) {
+    return relativePath
+  }
+  await writeFile(
+    `/src/content/media/${relativePath.replace(/^\.\//, "")}`,
+    await image.file.arrayBuffer(),
+    image.file.type || "application/octet-stream",
+  )
+  return relativePath
+}
+
+const mapToContentSchema = (item: MediaItem, imagePath: string) => {
   return {
     ...item,
+    image: imagePath,
     authors: flatten(item.authors),
     categories: flatten(item.categories),
   }

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

@@ -1,4 +1,5 @@
 import { type RefinementCtx, z } from "astro/zod"
+import config from "virtual:lightnet/config"
 
 const NON_EMPTY_STRING = "ln.admin.errors.non-empty-string"
 const INVALID_DATE = "ln.admin.errors.invalid-date"
@@ -6,6 +7,7 @@ const REQUIRED = "ln.admin.errors.required"
 const GTE_0 = "ln.admin.errors.gte-0"
 const INTEGER = "ln.admin.errors.integer"
 const UNIQUE_ELEMENTS = "ln.admin.errors.unique-elements"
+const FILE_SIZE_EXCEEDED = "ln.admin.error.file-size-exceeded"
 
 const unique = <TArrayItem>(path: Extract<keyof TArrayItem, string>) => {
   return (values: TArrayItem[], ctx: RefinementCtx) => {
@@ -23,6 +25,19 @@ const unique = <TArrayItem>(path: Extract<keyof TArrayItem, string>) => {
   }
 }
 
+const fileShape = z
+  .instanceof(File)
+  .optional()
+  .refine(
+    (file) =>
+      !file ||
+      !!(
+        file.size <
+        (config.experimental?.admin?.maxFileSize ?? 0) * 1024 * 1024
+      ),
+    { message: FILE_SIZE_EXCEEDED },
+  )
+
 export const mediaItemSchema = z.object({
   commonId: z.string().nonempty(NON_EMPTY_STRING),
   title: z.string().nonempty(NON_EMPTY_STRING),
@@ -47,6 +62,11 @@ export const mediaItemSchema = z.object({
     .superRefine(unique("collection")),
   dateCreated: z.string().date(INVALID_DATE),
   description: z.string().optional(),
+  image: z.object({
+    path: z.string().nonempty(NON_EMPTY_STRING),
+    previewSrc: z.string(),
+    file: fileShape,
+  }),
 })
 
 export type MediaItem = z.input<typeof mediaItemSchema>

package/src/astro-integration/config.ts

@@ -228,6 +228,16 @@ export const configSchema = z.object({
       admin: z
         .object({
           enabled: z.boolean().default(false),
+          /**
+           * Currently we only support english as Admin UI language.
+           */
+          languageCode: z.literal("en").default("en"),
+          /**
+           * Max file size to upload in mega bytes.
+           *
+           * Default is 25 (this aligns with Cloudflare's max file size).
+           */
+          maxFileSize: z.number().default(25),
         })
         .optional(),
     })

package/src/astro-integration/integration.ts

@@ -72,12 +72,12 @@ export function lightnet(lightnetConfig: LightnetConfig): AstroIntegration {
           })
 
           injectRoute({
-            pattern: "/[locale]/admin",
+            pattern: "/admin",
             entrypoint: "lightnet/admin/pages/AdminRoute.astro",
             prerender: true,
           })
           injectRoute({
-            pattern: "/[locale]/admin/media/[mediaId]",
+            pattern: "/admin/media/[mediaId]",
             entrypoint: "lightnet/admin/pages/media/EditRoute.astro",
             prerender: true,
           })
@@ -114,7 +114,11 @@ export function lightnet(lightnetConfig: LightnetConfig): AstroIntegration {
             locales: resolveLocales(config),
             routing: {
               redirectToDefaultLocale: false,
-              prefixDefaultLocale: true,
+              // We need to set this to false to allow for
+              // admin paths without locale. But actually
+              // the default locale will be prefixed for regular
+              // LightNet pages.
+              prefixDefaultLocale: false,
               fallbackType: "rewrite",
             },
           },

package/src/content/get-media-items.ts

@@ -59,7 +59,8 @@ async function revertMediaItemEntry({ id, data: mediaItem }: MediaItemEntry) {
     ...collection,
     collection: collection.collection.id,
   }))
-  const image = (await getEntry("internal-media-image-path", id))?.data.image
+  const image =
+    (await getEntry("internal-media-image-path", id))?.data.image ?? ""
   return {
     id,
     data: {

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

@@ -1,7 +1,7 @@
 import { createContext, useMemo } from "react"
 
 export type I18n = {
-  t: (key: string) => string
+  t: (key: string, params?: Record<string, unknown>) => string
   currentLocale: string
   direction: "rtl" | "ltr"
 }
@@ -12,6 +12,17 @@ export type I18nConfig = Omit<I18n, "t"> & {
 
 export const I18nContext = createContext<I18n | undefined>(undefined)
 
+const interpolate = (value: string, params?: Record<string, unknown>) => {
+  if (!params) {
+    return value
+  }
+  return Object.entries(params ?? {}).reduce(
+    (prev, [paramName, paramValue]) =>
+      prev.replaceAll(`{{${paramName}}}`, `${paramValue}`),
+    value,
+  )
+}
+
 /**
  * Creates the runtime i18n helpers given a prepared configuration.
  * Wraps the raw translation dictionary with a lookup that throws on missing keys.
@@ -22,16 +33,16 @@ export const createI18n = ({
   direction,
 }: I18nConfig) => {
   return useMemo(() => {
-    const t = (key: string) => {
+    const t = (key: string, params?: Record<string, unknown>) => {
       const value = translations[key]
       if (value) {
-        return value
+        return interpolate(value, params)
       }
-      if (key.match(/^(?:ln|x)\../i)) {
+      if (!key || key.match(/^(?:ln|x)\../i)) {
         console.error(`Missing translation for key ${key}`)
         return ""
       }
-      return key
+      return interpolate(key, params)
     }
     return { t, currentLocale, direction }
   }, [])

package/src/layouts/Page.astro

@@ -14,17 +14,18 @@ interface Props {
   title?: string
   description?: string
   mainClass?: string
+  locale?: string
 }
 
-const { title, description, mainClass } = Astro.props
+const { title, description, mainClass, locale } = Astro.props
 const configTitle = Astro.locals.i18n.t(config.title)
 
-const { currentLocale } = Astro.locals.i18n
-const language = resolveLanguage(currentLocale)
+const currentLocale = locale ?? Astro.locals.i18n.currentLocale
+const { direction } = resolveLanguage(currentLocale)
 ---
 
 <!doctype html>
-<html lang={currentLocale} dir={language.direction}>
+<html lang={currentLocale} dir={direction}>
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

package/src/layouts/components/LanguagePicker.astro

@@ -6,6 +6,11 @@ import MenuItem from "./MenuItem.astro"
 
 const { t, locales } = Astro.locals.i18n
 
+const hasLocale =
+  Astro.currentLocale &&
+  (Astro.url.pathname.startsWith(`/${Astro.currentLocale}/`) ||
+    Astro.url.pathname === `/${Astro.currentLocale}`)
+
 const translations = locales
   .map((locale) => ({
     locale,
@@ -17,17 +22,18 @@ const translations = locales
 
 function currentPathWithLocale(locale: string) {
   const currentPath = Astro.url.pathname
-  const currentPathWithoutLocale =
-    Astro.currentLocale && currentPath.startsWith(`/${Astro.currentLocale}`)
-      ? currentPath.slice(Astro.currentLocale.length + 1)
-      : currentPath
+  const currentPathWithoutLocale = hasLocale
+    ? currentPath.slice(Astro.currentLocale.length + 1)
+    : currentPath
   return localizePath(locale, currentPathWithoutLocale)
 }
+
+const disabled = !hasLocale && Astro.url.pathname !== "/"
 ---
 
 {
   translations.length > 1 && (
-    <Menu icon="mdi--web" label="ln.header.select-language">
+    <Menu disabled={disabled} icon="mdi--web" label="ln.header.select-language">
       {translations.map(({ label, locale, active, href }) => (
         <MenuItem href={href} hreflang={locale} active={active}>
           {label}

package/src/layouts/components/Menu.astro

@@ -4,25 +4,91 @@ import Icon from "../../components/Icon"
 interface Props {
   icon: string
   label: string
+  disabled?: boolean
 }
 
-const { icon, label } = Astro.props
+const { icon, label, disabled } = Astro.props
 ---
 
-<div class="dy-dropdown dy-dropdown-end">
-  <div
-    role="button"
-    tabindex="0"
+<ln-menu class="relative flex h-full items-center">
+  <button
+    disabled={disabled}
+    aria-disabled={disabled}
     aria-label={Astro.locals.i18n.t(label)}
-    class="flex cursor-pointer rounded-md p-3 text-gray-600 hover:text-primary"
+    class="flex rounded-md p-3 text-gray-600 hover:text-primary disabled:text-gray-300"
   >
     <Icon className={icon} ariaLabel="" />
-  </div>
+  </button>
 
   <ul
-    tabindex="0"
-    class="dy-dropdown-content top-px me-3 mt-[3.25rem] w-48 overflow-hidden rounded-b-md bg-white py-3 shadow-lg sm:mt-16"
+    data-menu-panel
+    aria-hidden="true"
+    inert
+    class="pointer-events-none absolute right-3 top-full mt-px flex w-48 origin-top scale-y-90 flex-col overflow-hidden rounded-b-md bg-white py-3 opacity-0 shadow-lg transition-all duration-100 ease-out"
   >
     <slot />
   </ul>
-</div>
+</ln-menu>
+<script>
+  class Menu extends HTMLElement {
+    menuPanel = this.querySelector<HTMLElement>("[data-menu-panel]")!
+    isMenuOpened = false
+    handleOutsideClick = (event: MouseEvent) => {
+      if (!this.isMenuOpened) {
+        return
+      }
+      const target = event.target as Node | null
+      if (target && this.contains(target)) {
+        return
+      }
+      this.closeMenu()
+    }
+
+    toggleMenu() {
+      if (this.isMenuOpened) {
+        this.closeMenu()
+      } else {
+        this.openMenu()
+      }
+    }
+
+    openMenu() {
+      if (this.isMenuOpened) {
+        return
+      }
+      this.menuPanel.style.opacity = "1"
+      this.menuPanel.style.pointerEvents = "auto"
+      this.menuPanel.style.transform = "scaleY(1)"
+
+      this.menuPanel.setAttribute("aria-hidden", "false")
+      this.menuPanel.removeAttribute("inert")
+      document.addEventListener("click", this.handleOutsideClick)
+      this.isMenuOpened = true
+    }
+
+    closeMenu() {
+      if (!this.isMenuOpened) {
+        return
+      }
+      this.menuPanel.style.opacity = "0"
+      this.menuPanel.style.pointerEvents = "none"
+      this.menuPanel.style.transform = "scaleY(0.9)"
+
+      this.menuPanel.setAttribute("aria-hidden", "true")
+      this.menuPanel.setAttribute("inert", "")
+      document.removeEventListener("click", this.handleOutsideClick)
+      this.isMenuOpened = false
+    }
+
+    connectedCallback() {
+      this.querySelector("button")?.addEventListener("click", () =>
+        this.toggleMenu(),
+      )
+
+      window.addEventListener("beforeunload", () => {
+        this.closeMenu()
+      })
+    }
+  }
+  customElements.define("ln-menu", Menu)
+</script>

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

@@ -14,7 +14,7 @@ const { mediaId } = Astro.props
   class="hidden cursor-pointer items-center gap-2 font-bold text-gray-700 underline"
   id="edit-btn"
   data-admin-enabled={config.experimental?.admin?.enabled}
-  href={`/${Astro.currentLocale}/admin/media/${mediaId}`}
+  href={`/admin/media/${mediaId}`}
   ><Icon className="mdi--square-edit-outline" ariaLabel="" />
   {Astro.locals.i18n.t("ln.admin.edit")}</a
 >

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

@@ -1,5 +1,5 @@
 import Icon from "../../../components/Icon"
-import { useI18n } from "../../../i18n/react/useI18n"
+import { useI18n } from "../../../i18n/react/use-i18n"
 
 export default function LoadingSkeleton() {
   const { direction } = useI18n()

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

@@ -1,6 +1,6 @@
 import CoverImageDecorator from "../../../components/CoverImageDecorator"
 import Icon from "../../../components/Icon"
-import { useI18n } from "../../../i18n/react/useI18n"
+import { useI18n } from "../../../i18n/react/use-i18n"
 import { detailsPagePath } from "../../../utils/paths"
 import type { SearchItem } from "../api/search-response"