Translate admin panel to all 6 languages

src/app/admin/emulator/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import { updateEmulatorSetting, updateEmulatorText } from "@/actions/admin-emulator";
 import { StatusCard } from "@/components/admin/dashboard";
 import { prisma } from "@/lib/prisma";
@@ -7,6 +8,8 @@ export const dynamic = "force-dynamic";
 const TEXTS_LIMIT = 300;
 
 export default async function AdminEmulator() {
+  const t = await getTranslations("pages.admin.emulator");
+
   let settings: { key: string; value: string }[] = [];
   try {
     settings = await prisma.emulatorSettings.findMany({ orderBy: { key: "asc" } });
@@ -34,39 +37,39 @@ export default async function AdminEmulator() {
 
   return (
     <main>
-      <h1>Emulator Config</h1>
+      <h1>{t("title")}</h1>
       <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
-        Live key/value config read by the Arcturus emulator from
-        <code> emulator_settings</code> and <code> emulator_texts</code>. Changes take effect
-        on the next emulator read (some keys require an emulator reload).
+        {t.rich("subtitle", {
+          code: (chunks) => <code>{chunks}</code>,
+        })}
       </p>
 
       <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
-        <StatusCard label="Settings keys" value={settings.length} icon="⚙️" />
-        <StatusCard label="Text keys" value={textsCount} icon="🗒️" />
+        <StatusCard label={t("settingsKeys")} value={settings.length} icon="⚙️" />
+        <StatusCard label={t("textKeys")} value={textsCount} icon="🗒️" />
       </div>
 
       <section className="mt-6">
-        <h2 className="admin-section-title">Settings</h2>
+        <h2 className="admin-section-title">{t("settings")}</h2>
         <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
-          {settings.length} keys.
+          {t("keysCount", { count: settings.length })}
         </p>
 
       <form
         action={updateEmulatorSetting}
         className="admin-card mb-6"
       >
-        <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">Add / overwrite setting</h3>
+        <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">{t("addOverwriteSetting")}</h3>
         <div className="flex gap-2 flex-wrap">
-          <input name="key" placeholder="key" maxLength={100} required />
+          <input name="key" placeholder={t("key")} maxLength={100} required />
           <input
             name="value"
-            placeholder="value"
+            placeholder={t("value")}
             maxLength={512}
             className="flex-1 min-w-[200px]"
           />
           <button type="submit" className="btn btn-primary">
-            Save
+            {t("save")}
           </button>
         </div>
       </form>
@@ -74,8 +77,8 @@ export default async function AdminEmulator() {
       <table>
         <thead>
           <tr>
-            <th className="w-[320px]">Key</th>
-            <th>Value</th>
+            <th className="w-[320px]">{t("colKey")}</th>
+            <th>{t("colValue")}</th>
           </tr>
         </thead>
         <tbody>
@@ -97,7 +100,7 @@ export default async function AdminEmulator() {
                     className="flex-1"
                   />
                   <button type="submit" className="btn btn-outline">
-                    Save
+                    {t("save")}
                   </button>
                 </form>
               </td>
@@ -106,31 +109,32 @@ export default async function AdminEmulator() {
         </tbody>
       </table>
       {settings.length === 0 ? (
-        <p className="text-xs text-gray-500 dark:text-gray-400">No emulator settings found.</p>
+        <p className="text-xs text-gray-500 dark:text-gray-400">{t("noSettings")}</p>
       ) : null}
       </section>
 
       <section className="mt-6">
-        <h2 className="admin-section-title">Texts</h2>
+        <h2 className="admin-section-title">{t("texts")}</h2>
         <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
-          {textsCount} keys{textsTruncated ? ` (showing first ${texts.length})` : ""}.
+          {t("keysCount", { count: textsCount })}
+          {textsTruncated ? ` (${t("showingFirst", { count: texts.length })})` : ""}.
         </p>
 
       <form
         action={updateEmulatorText}
         className="admin-card mb-6"
       >
-        <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">Add / overwrite text</h3>
+        <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">{t("addOverwriteText")}</h3>
         <div className="flex gap-2 flex-wrap">
-          <input name="key" placeholder="key" maxLength={100} required />
+          <input name="key" placeholder={t("key")} maxLength={100} required />
           <input
             name="value"
-            placeholder="value"
+            placeholder={t("value")}
             maxLength={4096}
             className="flex-1 min-w-[200px]"
           />
           <button type="submit" className="btn btn-primary">
-            Save
+            {t("save")}
           </button>
         </div>
       </form>
@@ -138,30 +142,30 @@ export default async function AdminEmulator() {
       <table>
         <thead>
           <tr>
-            <th className="w-[320px]">Key</th>
-            <th>Value</th>
+            <th className="w-[320px]">{t("colKey")}</th>
+            <th>{t("colValue")}</th>
           </tr>
         </thead>
         <tbody>
-          {texts.map((t) => (
-            <tr key={t.key}>
+          {texts.map((txt) => (
+            <tr key={txt.key}>
               <td>
-                <strong>{t.key}</strong>
+                <strong>{txt.key}</strong>
               </td>
               <td>
                 <form
                   action={updateEmulatorText}
                   className="flex gap-2"
                 >
-                  <input type="hidden" name="key" value={t.key} />
+                  <input type="hidden" name="key" value={txt.key} />
                   <input
                     name="value"
-                    defaultValue={t.value}
+                    defaultValue={txt.value}
                     maxLength={4096}
                     className="flex-1"
                   />
                   <button type="submit" className="btn btn-outline">
-                    Save
+                    {t("save")}
                   </button>
                 </form>
               </td>
@@ -170,12 +174,11 @@ export default async function AdminEmulator() {
         </tbody>
       </table>
       {texts.length === 0 ? (
-        <div className="admin-empty">No emulator texts found.</div>
+        <div className="admin-empty">{t("noTexts")}</div>
       ) : null}
       {textsTruncated ? (
         <p className="muted">
-          Only the first {texts.length} of {textsCount} text keys are shown. Use the
-          add/overwrite form above to edit a key beyond this list.
+          {t("truncatedHint", { shown: texts.length, total: textsCount })}
         </p>
       ) : null}
       </section>