lightnet 3.10.1 → 3.10.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # lightnet
 
+## 3.10.3
+
+### Patch Changes
+
+- [#327](https://github.com/LightNetDev/LightNet/pull/327) [`9f1e468`](https://github.com/LightNetDev/LightNet/commit/9f1e468cc296e62788586a3f3c6f245c8bc0cec9) Thanks [@smn-cds](https://github.com/smn-cds)! - Gracefully handle missing translations in React components to avoid runtime crashes.
+
+## 3.10.2
+
+### Patch Changes
+
+- [#325](https://github.com/LightNetDev/LightNet/pull/325) [`07b71f4`](https://github.com/LightNetDev/LightNet/commit/07b71f4d44f8e005aafb48bedc347f14c71e182a) Thanks [@smn-cds](https://github.com/smn-cds)! - Refactor internal react i18n logic.
+
 ## 3.10.1
 
 ### Patch Changes

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.1",
+  "version": "3.10.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -34,7 +34,7 @@
     "./api/internal/search.ts": "./src/pages/search-page/api/search.ts",
     "./api/versions.ts": "./src/api/versions.ts",
     "./api/media/[mediaId].ts": "./src/api/media/[mediaId].ts",
-    "./api/internal/fs/writeText.ts": "./src/admin/api/fs/writeText.ts",
+    "./api/internal/fs/write-file.ts": "./src/admin/api/fs/write-file.ts",
     "./admin/pages/AdminRoute.astro": "./src/admin/pages/AdminRoute.astro",
     "./admin/pages/media/EditRoute.astro": "./src/admin/pages/media/EditRoute.astro"
   },

package/src/admin/api/fs/{writeText.ts → write-file.ts}

@@ -1,5 +1,7 @@
-import { mkdir, rename, rm, writeFile } from "node:fs/promises"
+import { createWriteStream } from "node:fs"
+import { mkdir, rename, rm } from "node:fs/promises"
 import { dirname, isAbsolute, relative, resolve } from "node:path"
+import { Writable } from "node:stream"
 import { fileURLToPath } from "node:url"
 
 import type { APIRoute } from "astro"
@@ -26,16 +28,17 @@ export const POST: APIRoute = async ({ request }) => {
   ) {
     throw new Error("Path escapes project root.")
   }
+  const { body } = request
+  if (!body) {
+    throw new Error("Request body missing.")
+  }
 
   const targetDir = dirname(targetPath)
   await mkdir(targetDir, { recursive: true })
 
-  const body = await request.text()
-  const timestamp = Date.now()
-  const tmpPath = `${targetPath}.tmp-${timestamp}`
+  const tmpPath = `${targetPath}.tmp-${Date.now()}`
   try {
-    const tmpPath = `${targetPath}.tmp-${Date.now()}`
-    await writeFile(tmpPath, body, "utf-8")
+    await body.pipeTo(Writable.toWeb(createWriteStream(tmpPath)))
     await rename(tmpPath, targetPath)
   } finally {
     await rm(tmpPath, { force: true }).catch(() => {})

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

@@ -0,0 +1,39 @@
+import { useI18n } from "../../../i18n/react/useI18n"
+import { FieldErrors } from "./atoms/FieldErrors"
+import Hint from "./atoms/Hint"
+import Label from "./atoms/Label"
+import { useFieldContext } from "./form-context"
+
+export default function Select({
+  label,
+  hint,
+  options,
+}: {
+  label: string
+  hint?: string
+  options: { id: string; label?: string }[]
+}) {
+  const field = useFieldContext<string>()
+  const { t } = useI18n()
+  return (
+    <label className="dy-form-control w-full">
+      <Label label={label} />
+      <select
+        id={field.name}
+        name={field.name}
+        value={field.state.value}
+        onChange={(e) => field.handleChange(e.target.value)}
+        onBlur={field.handleBlur}
+        className={`dy-select dy-select-bordered ${field.state.meta.errors.length ? "dy-select-error" : ""}"`}
+      >
+        {options.map(({ id, label }) => (
+          <option key={id} value={id}>
+            {label ? t(label) : id}
+          </option>
+        ))}
+      </select>
+      <FieldErrors meta={field.state.meta} />
+      <Hint hint={hint} />
+    </label>
+  )
+}

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

@@ -2,6 +2,7 @@ import { useStore } from "@tanstack/react-form"
 import { useEffect, useRef, useState } from "react"
 
 import Icon from "../../../components/Icon"
+import { useI18n } from "../../../i18n/react/useI18n"
 import { useFormContext } from "./form-context"
 
 const SUCCESS_DURATION_MS = 2000
@@ -18,9 +19,9 @@ const buttonStateClasses = {
 } as const
 
 const buttonLabels = {
-  idle: "Save",
-  success: "Saved",
-  error: "Failed",
+  idle: "ln.admin.save",
+  success: "ln.admin.saved",
+  error: "ln.admin.failed",
 } as const
 
 const icons = {
@@ -31,6 +32,7 @@ const icons = {
 
 export default function SubmitButton() {
   const form = useFormContext()
+  const { t } = useI18n()
   const { submissionAttempts, isSubmitting, isSubmitSuccessful } = useStore(
     form.store,
     (state) => ({
@@ -48,7 +50,7 @@ export default function SubmitButton() {
   return (
     <button className={buttonClass} type="submit" disabled={isSubmitting}>
       {icon && <Icon className={icon} ariaLabel="" />}
-      {label}
+      {t(label)}
     </button>
   )
 }

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

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

package/src/admin/components/form/{FieldErrors.tsx → atoms/FieldErrors.tsx}

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

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

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

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

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

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

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

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

@@ -1 +1,16 @@
 ln.admin.edit: Edit
+ln.admin.save: Save
+ln.admin.saved: Saved
+ln.admin.failed: Failed
+ln.admin.edit-media-item: Edit media item
+ln.admin.back-to-details-page: Back to details page
+ln.admin.title: Title
+ln.admin.common-id: Common ID
+ln.admin.created-on: Created on
+ln.admin.created-on-hint: When has this item been created on this library?
+ln.admin.common-id-hint: The english title, all lowercase, words separated with hyphens.
+ln.admin.toast.invalid-data.title: Invalid form data
+ln.admin.toast.invalid-data.hint: Check the fields and try again.
+ln.admin.errors.non-empty-string: String must contain at least 1 character(s)
+ln.admin.errors.invalid-date: Invalid date
+ln.admin.errors.required: Required field

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

@@ -2,6 +2,11 @@ import { revalidateLogic } from "@tanstack/react-form"
 
 import { showToastById } from "../../../components/showToast"
 import Toast from "../../../components/Toast"
+import {
+  createI18n,
+  type I18nConfig,
+  I18nContext,
+} from "../../../i18n/react/i18n-context"
 import { useAppForm } from "../../components/form"
 import { type MediaItem, mediaItemSchema } from "../../types/media-item"
 import { updateMediaItem } from "./media-item-store"
@@ -9,12 +14,18 @@ import { updateMediaItem } from "./media-item-store"
 export default function EditForm({
   mediaId,
   mediaItem,
+  i18nConfig,
+  mediaTypes,
+  languages,
 }: {
   mediaId: string
   mediaItem: MediaItem
+  i18nConfig: I18nConfig
+  mediaTypes: { id: string; label: string }[]
+  languages: { id: string; label: string }[]
 }) {
   const form = useAppForm({
-    defaultValues: mediaItem,
+    defaultValues: { ...mediaItem },
     validators: {
       onDynamic: mediaItemSchema,
     },
@@ -29,30 +40,66 @@ export default function EditForm({
       showToastById("invalid-form-data-toast")
     },
   })
+  const i18n = createI18n(i18nConfig)
+  const { t } = i18n
 
   return (
-    <form
-      onSubmit={(e) => {
-        e.preventDefault()
-        form.handleSubmit()
-      }}
-      className="flex flex-col items-start gap-4"
-    >
-      <form.AppField
-        name="commonId"
-        children={(field) => <field.TextField label="Common ID" />}
-      />
-      <form.AppField
-        name="title"
-        children={(field) => <field.TextField label="Title" />}
-      />
-      <form.AppForm>
-        <form.SubmitButton />
-        <Toast id="invalid-form-data-toast" variant="error">
-          <div className="font-bold text-gray-700">Invalid form data</div>
-          Check the fields and try again.
-        </Toast>
-      </form.AppForm>
-    </form>
+    <I18nContext.Provider value={i18n}>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          form.handleSubmit()
+        }}
+        className="flex flex-col items-start"
+      >
+        <form.AppField
+          name="title"
+          children={(field) => <field.TextInput label="ln.admin.title" />}
+        />
+        <form.AppField
+          name="commonId"
+          children={(field) => (
+            <field.TextInput
+              label="ln.admin.common-id"
+              hint="ln.admin.common-id-hint"
+            />
+          )}
+        />
+        <form.AppField
+          name="type"
+          children={(field) => (
+            <field.Select label="ln.type" options={mediaTypes} />
+          )}
+        />
+        <form.AppField
+          name="language"
+          children={(field) => (
+            <field.Select label="ln.language" options={languages} />
+          )}
+        />
+        <form.AppField
+          name="dateCreated"
+          children={(field) => (
+            <field.TextInput
+              type="date"
+              label="ln.admin.created-on"
+              hint="ln.admin.created-on-hint"
+            />
+          )}
+        />
+
+        <div className="mt-8">
+          <form.AppForm>
+            <form.SubmitButton />
+            <Toast id="invalid-form-data-toast" variant="error">
+              <div className="font-bold text-gray-700">
+                {t("ln.admin.toast.invalid-data.title")}
+              </div>
+              {t("ln.admin.toast.invalid-data.hint")}
+            </Toast>
+          </form.AppForm>
+        </div>
+      </form>
+    </I18nContext.Provider>
   )
 }

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

@@ -4,6 +4,8 @@ import { getCollection } from "astro:content"
 import config from "virtual:lightnet/config"
 
 import { 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 EditForm from "./EditForm"
@@ -17,17 +19,42 @@ export const getStaticPaths = (async () => {
 
 const { mediaId } = Astro.params
 const mediaItemEntry = await getRawMediaItem(mediaId)
+
+const i18nConfig = prepareI18nConfig(Astro.locals.i18n, [
+  "ln.admin.*",
+  "ln.type",
+  "ln.language",
+])
+const { t } = Astro.locals.i18n
+
+const mediaTypes = (await getMediaTypes()).map(({ id, data: { label } }) => ({
+  id,
+  label: t(label),
+}))
+const languages = config.languages.map(({ code, label }) => ({
+  id: code,
+  label: t(label),
+}))
 ---
 
 <Page>
-  <div class="mx-auto max-w-screen-lg px-4 pt-12 md:px-8">
+  <div class="mx-auto max-w-screen-md px-4 pt-12 md:px-8">
     <a
       class="underline"
       href=`/${Astro.currentLocale}/media/faithful-freestyle--en`
-      >Back to details page</a
+      >{t("ln.admin.back-to-details-page")}</a
     >
-    <h1 class="mb-4 mt-8 text-lg">Edit media item</h1>
+    <h1 class="mb-10 mt-10 text-2xl">
+      {t("ln.admin.edit-media-item")}
+    </h1>
 
-    <EditForm mediaId={mediaId} mediaItem={mediaItemEntry.data} client:load />
+    <EditForm
+      mediaId={mediaId}
+      mediaItem={mediaItemEntry.data}
+      i18nConfig={i18nConfig}
+      mediaTypes={mediaTypes}
+      languages={languages}
+      client:load
+    />
   </div>
 </Page>

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

@@ -1,6 +1,6 @@
-export const writeText = (path: string, body: string) => {
+export const writeFile = (path: string, body: string) => {
   return fetch(
-    `/api/internal/fs/writeText?path=${encodeURIComponent(path.replace(/^\//, ""))}`,
+    `/api/internal/fs/write-file?path=${encodeURIComponent(path.replace(/^\//, ""))}`,
     {
       method: "POST",
       headers: { "Content-Type": resolveContentType(path) },
@@ -10,7 +10,7 @@ export const writeText = (path: string, body: string) => {
 }
 
 export const writeJson = async (path: string, object: unknown) => {
-  return writeText(path, JSON.stringify(sortObject(object), null, 2))
+  return writeFile(path, JSON.stringify(sortObject(object), null, 2))
 }
 
 const resolveContentType = (path: string) => {

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

@@ -1,8 +1,15 @@
 import { z } from "astro/zod"
 
+const NON_EMPTY_STRING = "ln.admin.errors.non-empty-string"
+const INVALID_DATE = "ln.admin.errors.invalid-date"
+const REQUIRED = "ln.admin.errors.required"
+
 export const mediaItemSchema = z.object({
-  commonId: z.string().nonempty(),
-  title: z.string().nonempty(),
+  commonId: z.string().nonempty(NON_EMPTY_STRING),
+  title: z.string().nonempty(NON_EMPTY_STRING),
+  type: z.string().nonempty(REQUIRED),
+  language: z.string().nonempty(REQUIRED),
+  dateCreated: z.string().date(INVALID_DATE),
 })
 
 export type MediaItem = z.infer<typeof mediaItemSchema>

package/src/astro-integration/integration.ts

@@ -87,8 +87,8 @@ export function lightnet(lightnetConfig: LightnetConfig): AstroIntegration {
         // this endpoints to write files.
         if (config.experimental?.admin?.enabled && command === "dev") {
           injectRoute({
-            pattern: "/api/internal/fs/writeText",
-            entrypoint: "lightnet/api/internal/fs/writeText.ts",
+            pattern: "/api/internal/fs/write-file",
+            entrypoint: "lightnet/api/internal/fs/write-file.ts",
             prerender: false,
           })
           // Add empty adapter to avoid warning

package/src/components/Toast.tsx

@@ -46,7 +46,7 @@ export default function Toast({
       }}
     >
       <div
-        className={`pointer-events-auto flex max-w-sm flex-col items-start gap-1 rounded-2xl border p-4 text-base shadow-md backdrop-blur-sm ${alertClasses}`}
+        className={`pointer-events-auto flex max-w-sm flex-col items-start gap-1 rounded-md border p-4 text-base shadow-md backdrop-blur-sm ${alertClasses}`}
       >
         {children}
       </div>

package/src/i18n/locals.d.ts

@@ -3,36 +3,43 @@ declare namespace App {
     /**
      * Provides internationalization helpers.
      */
-    i18n: {
-      /**
-       * Translate a key to the language of the current locale.
-       *
-       * @param TranslationKey to be translated.
-       */
-      t: import("./translate").TranslateFn
+    i18n: I18n
+  }
+}
 
-      /**
-       *  The current locale or the default locale if the current locale is not available.
-       *
-       *  In comparison to Astro.currentLocale this will always return a locale.
-       *  Use Astro.currentLocale if you want to know the locale that is included in the current path.
-       */
-      currentLocale: string
+type I18n = {
+  /**
+   * Translate a key to the language of the current locale.
+   *
+   * @param TranslationKey to be translated.
+   */
+  t: import("./translate").TranslateFn
 
-      /**
-       * The current text direction. Left-to-right or right-to-left.
-       */
-      direction: "ltr" | "rtl"
+  /**
+   *  The current locale or the default locale if the current locale is not available.
+   *
+   *  In comparison to Astro.currentLocale this will always return a locale.
+   *  Use Astro.currentLocale if you want to know the locale that is included in the current path.
+   */
+  currentLocale: string
 
-      /**
-       * The default locale as defined in the project configuration.
-       */
-      defaultLocale: string
+  /**
+   * The current text direction. Left-to-right or right-to-left.
+   */
+  direction: "ltr" | "rtl"
 
-      /**
-       * The available locales as defined in the project configuration.
-       */
-      locales: string[]
-    }
-  }
+  /**
+   * The default locale as defined in the project configuration.
+   */
+  defaultLocale: string
+
+  /**
+   * The available locales as defined in the project configuration.
+   */
+  locales: string[]
+
+  /**
+   * All available translation keys.
+   */
+  translationKeys: string[]
 }

package/src/i18n/locals.ts

@@ -4,7 +4,7 @@ import config from "virtual:lightnet/config"
 import { resolveDefaultLocale } from "./resolve-default-locale"
 import { resolveLanguage } from "./resolve-language"
 import { resolveLocales } from "./resolve-locales"
-import { useTranslate } from "./translate"
+import { translationKeys, useTranslate } from "./translate"
 
 export const onRequest: MiddlewareHandler = (
   { locals, currentLocale: astroCurrentLocale },
@@ -22,6 +22,7 @@ export const onRequest: MiddlewareHandler = (
       defaultLocale,
       direction,
       locales,
+      translationKeys,
     }
   }
   return next()

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

@@ -0,0 +1,36 @@
+import { createContext } from "react"
+
+export type I18n = {
+  t: (key: string) => string
+  currentLocale: string
+  direction: "rtl" | "ltr"
+}
+
+export type I18nConfig = Omit<I18n, "t"> & {
+  translations: Record<string, string>
+}
+
+export const I18nContext = createContext<I18n | undefined>(undefined)
+
+/**
+ * Creates the runtime i18n helpers given a prepared configuration.
+ * Wraps the raw translation dictionary with a lookup that throws on missing keys.
+ */
+export const createI18n = ({
+  translations,
+  currentLocale,
+  direction,
+}: I18nConfig) => {
+  const t = (key: string) => {
+    const value = translations[key]
+    if (value) {
+      return value
+    }
+    if (key.match(/^(?:ln|x)\../i)) {
+      console.error(`Missing translation for key ${key}`)
+      return ""
+    }
+    return key
+  }
+  return { t, currentLocale, direction }
+}

package/src/i18n/react/prepare-i18n-config.ts

@@ -0,0 +1,31 @@
+/**
+ * Prepares the configuration object passed from an Astro page to the React i18n context.
+ * Resolves every requested translation key (supporting wildcard suffixes like `ln.dashboard.*`)
+ * so the React island receives only the strings it needs.
+ *
+ * @param i18n i18n helpers sourced from `Astro.locals`.
+ * @param translationKeys Specific keys (or wildcard groups) required by the React component.
+ * @returns A configuration object containing the resolved config.
+ */
+export const prepareI18nConfig = (
+  { t, translationKeys: allKeys, currentLocale, direction }: I18n,
+  translationKeys: string[],
+) => {
+  const resolveTranslations = (key: string) => {
+    if (key.endsWith("*")) {
+      const keyPrefix = key.slice(0, -1)
+      return allKeys
+        .filter((k) => k.startsWith(keyPrefix))
+        .map((k) => [k, t(k)])
+    }
+    return [[key, t(key)]]
+  }
+
+  return {
+    translations: Object.fromEntries(
+      translationKeys.flatMap(resolveTranslations),
+    ) as Record<string, string>,
+    currentLocale,
+    direction,
+  }
+}

package/src/i18n/react/useI18n.ts

@@ -0,0 +1,15 @@
+import { useContext } from "react"
+
+import { I18nContext } from "./i18n-context"
+
+/**
+ * Retrieves the current i18n helpers from context.
+ * Must be called inside a React tree wrapped with `I18nContext.Provider`, otherwise throws.
+ */
+export const useI18n = () => {
+  const i18n = useContext(I18nContext)
+  if (!i18n) {
+    throw new Error("No i18n context has been provided")
+  }
+  return i18n
+}

package/src/i18n/translate.ts

@@ -22,18 +22,30 @@ const languageCodes = [
 ]
 const defaultLocale = resolveDefaultLocale(config)
 
-await i18next.init({
+const translations = await prepareI18nextTranslations()
+export const translationKeys = [
+  ...new Set(
+    Object.values(translations)
+      .map(({ translation }) => translation)
+      .flatMap((oneLanguageTranslations) =>
+        Object.keys(oneLanguageTranslations),
+      ),
+  ),
+]
+
+const i18n = i18next.createInstance()
+await i18n.init({
   lng: defaultLocale,
   // don't use name spacing
   nsSeparator: false,
   // only use flat keys
   keySeparator: false,
-  resources: await prepareI18nextTranslations(),
+  resources: translations,
 })
 
 export function useTranslate(bcp47: string | undefined): TranslateFn {
   const resolvedLocale = bcp47 ?? defaultLocale
-  const t = i18next.getFixedT<TranslationKey>(resolvedLocale)
+  const t = i18n.getFixedT<TranslationKey>(resolvedLocale)
   const fallbackLng = [
     ...resolveLanguage(resolvedLocale).fallbackLanguages,
     defaultLocale,

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

@@ -1,6 +1,8 @@
 import Icon from "../../../components/Icon"
+import { useI18n } from "../../../i18n/react/useI18n"
 
-export default function LoadingSkeleton({ direction }: { direction: string }) {
+export default function LoadingSkeleton() {
+  const { direction } = useI18n()
   return (
     <div className="flex h-52 animate-pulse items-center overflow-hidden py-2 sm:h-64">
       <div className="h-36 w-36 shrink-0 rounded-md bg-gray-200"></div>

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

@@ -4,7 +4,7 @@ import config from "virtual:lightnet/config"
 import { getUsedCategories } from "../../../content/get-categories"
 import { contentLanguages } from "../../../content/get-languages"
 import { getMediaTypes } from "../../../content/get-media-types"
-import { provideTranslations } from "../utils/search-filter-translations"
+import { prepareI18nConfig } from "../../../i18n/react/prepare-i18n-config"
 import SearchFilterReact from "./SearchFilter.tsx"
 
 const { t, currentLocale } = Astro.locals.i18n
@@ -49,7 +49,16 @@ if (
 ) {
   initialLanguageFilter = currentLocale
 }
-const translations = provideTranslations(t)
+const i18nConfig = prepareI18nConfig(Astro.locals.i18n, [
+  "ln.search.title",
+  "ln.language",
+  "ln.search.placeholder",
+  "ln.search.all-languages",
+  "ln.type",
+  "ln.search.all-types",
+  "ln.category",
+  "ln.search.all-categories",
+])
 ---
 
 <SearchFilterReact
@@ -57,7 +66,7 @@ const translations = provideTranslations(t)
   languages={languages}
   mediaTypes={mediaTypes}
   categories={categories}
-  translations={translations}
+  i18nConfig={i18nConfig}
   languageFilterEnabled={languageFilterEnabled}
   typesFilterEnabled={typesFilterEnabled}
   categoriesFilterEnabled={categoriesFilterEnabled}

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

@@ -1,12 +1,9 @@
 import { useRef } from "react"
 
 import Icon from "../../../components/Icon"
+import { createI18n, type I18nConfig } from "../../../i18n/react/i18n-context"
 import { useDebounce } from "../hooks/use-debounce"
 import { useSearchQueryParam } from "../hooks/use-search-query-param"
-import type {
-  TranslationKey,
-  Translations,
-} from "../utils/search-filter-translations"
 import { CATEGORY, LANGUAGE, SEARCH, TYPE } from "../utils/search-query"
 import Select from "./Select"
 
@@ -16,7 +13,7 @@ interface Props {
   languages: FilterValue[]
   categories: FilterValue[]
   mediaTypes: FilterValue[]
-  translations: Translations
+  i18nConfig: I18nConfig
   languageFilterEnabled: boolean
   typesFilterEnabled: boolean
   categoriesFilterEnabled: boolean
@@ -26,7 +23,7 @@ interface Props {
 export default function SearchFilter({
   categories,
   mediaTypes,
-  translations,
+  i18nConfig,
   languages,
   languageFilterEnabled,
   typesFilterEnabled,
@@ -40,7 +37,7 @@ export default function SearchFilter({
 
   const searchInput = useRef<HTMLInputElement | null>(null)
 
-  const t = (key: TranslationKey) => translations[key]
+  const { t } = createI18n(i18nConfig)
 
   const debouncedSetSearch = useDebounce((value: string) => {
     setSearch(value)

package/src/pages/search-page/components/SearchList.astro

@@ -4,10 +4,10 @@ import { getCollection } from "astro:content"
 import { getUsedCategories } from "../../../content/get-categories"
 import { contentLanguages } from "../../../content/get-languages"
 import { getMediaTypes } from "../../../content/get-media-types"
-import { provideTranslations } from "../utils/search-translations"
+import { prepareI18nConfig } from "../../../i18n/react/prepare-i18n-config"
 import SearchListReact from "./SearchList.tsx"
 
-const { t, currentLocale, direction } = Astro.locals.i18n
+const { t, currentLocale } = Astro.locals.i18n
 
 const categories: Record<string, string> = {}
 for (const { id, name } of await getUsedCategories(currentLocale, t)) {
@@ -34,15 +34,16 @@ const languages = Object.fromEntries(
 
 const mediaItemsTotal = (await getCollection("media")).length
 
-const translations = provideTranslations(t)
 const showLanguage = contentLanguages.length > 1
+
+const i18nConfig = prepareI18nConfig(Astro.locals.i18n, [
+  "ln.search.no-results",
+])
 ---
 
 <SearchListReact
   client:load
-  currentLocale={currentLocale}
-  direction={direction}
-  translations={translations}
+  i18nConfig={i18nConfig}
   categories={categories}
   mediaTypes={mediaTypes}
   languages={languages}

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

@@ -1,8 +1,12 @@
 import { useWindowVirtualizer } from "@tanstack/react-virtual"
 import { useEffect, useRef, useState } from "react"
 
+import {
+  createI18n,
+  type I18nConfig,
+  I18nContext,
+} from "../../../i18n/react/i18n-context"
 import { useSearch } from "../hooks/use-search"
-import type { TranslationKey, Translations } from "../utils/search-translations"
 import LoadingSkeleton from "./LoadingSkeleton"
 import SearchListItem, {
   type MediaType,
@@ -10,9 +14,7 @@ import SearchListItem, {
 } from "./SearchListItem"
 
 interface Props {
-  currentLocale: string | undefined
-  translations: Translations
-  direction: "rtl" | "ltr"
+  i18nConfig: I18nConfig
   categories: Record<string, string>
   languages: Record<string, TranslatedLanguage>
   showLanguage: boolean
@@ -21,11 +23,9 @@ interface Props {
 }
 
 export default function SearchList({
-  currentLocale,
   categories,
-  translations,
+  i18nConfig,
   languages,
-  direction,
   showLanguage,
   mediaTypes,
   mediaItemsTotal,
@@ -63,11 +63,10 @@ export default function SearchList({
       observer.disconnect()
     }
   }, [])
-
-  const t = (key: TranslationKey) => translations[key]
+  const i18n = createI18n(i18nConfig)
 
   return (
-    <>
+    <I18nContext.Provider value={i18n}>
       <div ref={listRef} className="px-4 md:px-8">
         <ol
           className="relative w-full divide-y divide-gray-200"
@@ -89,13 +88,11 @@ export default function SearchList({
                 }}
               >
                 {isLoading ? (
-                  <LoadingSkeleton direction={direction} />
+                  <LoadingSkeleton />
                 ) : (
                   <SearchListItem
                     item={item}
-                    direction={direction}
                     showLanguage={showLanguage}
-                    currentLocale={currentLocale}
                     categories={categories}
                     languages={languages}
                     mediaTypes={mediaTypes}
@@ -108,9 +105,9 @@ export default function SearchList({
       </div>
       {!results.length && !isLoading && (
         <div className="mt-24 text-center font-bold text-gray-500">
-          {t("ln.search.no-results")}
+          {i18n.t("ln.search.no-results")}
         </div>
       )}
-    </>
+    </I18nContext.Provider>
   )
 }

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

@@ -1,5 +1,6 @@
 import CoverImageDecorator from "../../../components/CoverImageDecorator"
 import Icon from "../../../components/Icon"
+import { useI18n } from "../../../i18n/react/useI18n"
 import { detailsPagePath } from "../../../utils/paths"
 import type { SearchItem } from "../api/search-response"
 
@@ -16,8 +17,6 @@ export type TranslatedLanguage = {
 
 interface Props {
   item: SearchItem
-  currentLocale: string | undefined
-  direction: "rtl" | "ltr"
   categories: Record<string, string>
   languages: Record<string, TranslatedLanguage>
   showLanguage: boolean
@@ -26,13 +25,12 @@ interface Props {
 
 export default function SearchListItem({
   item,
-  currentLocale,
   categories,
   languages,
-  direction,
   showLanguage,
   mediaTypes,
 }: Props) {
+  const { currentLocale, direction } = useI18n()
   const coverImageStyle = mediaTypes[item.type].coverImageStyle
   return (
     <a

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

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

package/src/pages/search-page/utils/search-filter-translations.ts

@@ -1,20 +0,0 @@
-const translationKeys = [
-  "ln.search.title",
-  "ln.language",
-  "ln.search.placeholder",
-  "ln.search.all-languages",
-  "ln.type",
-  "ln.search.all-types",
-  "ln.category",
-  "ln.search.all-categories",
-] as const
-
-export type TranslationKey = (typeof translationKeys)[number]
-
-export type Translations = Record<TranslationKey, string>
-
-export const provideTranslations = (translate: (key: string) => string) => {
-  return Object.fromEntries(
-    translationKeys.map((key) => [key, translate(key)]),
-  ) as Translations
-}

package/src/pages/search-page/utils/search-translations.ts

@@ -1,11 +0,0 @@
-const translationKeys = ["ln.search.no-results"] as const
-
-export type TranslationKey = (typeof translationKeys)[number]
-
-export type Translations = Record<TranslationKey, string>
-
-export const provideTranslations = (translate: (key: string) => string) => {
-  return Object.fromEntries(
-    translationKeys.map((key) => [key, translate(key)]),
-  ) as Translations
-}