style: format code with prettier

2026-07-12 21:07:34 +02:00
1 parent e85e4d74ea
commit 2e4ed76121
@@ -1,94 +1,88 @@
-'use client'
+"use client";

-import { Download, Gamepad2, Info, Lock, Save } from 'lucide-react'
-import { usePathname, useRouter, useSearchParams } from 'next/navigation'
-import { useEffect, useMemo, useState } from 'react'
-import { toast } from 'sonner'
-import { saveClientTranslations } from '@/actions/translations'
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-import { useServerAction } from '@/hooks/use-server-action'
-import type { ClientTranslationFile } from '@/lib/client-translation-files'
+import { Download, Gamepad2, Info, Lock, Save } from "lucide-react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { saveClientTranslations } from "@/actions/translations";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useServerAction } from "@/hooks/use-server-action";
+import type { ClientTranslationFile } from "@/lib/client-translation-files";

 interface Props {
-  files: ClientTranslationFile[]
-  activeFile: ClientTranslationFile
-  entries: Record<string, string>
-  parseError: string | null
+  files: ClientTranslationFile[];
+  activeFile: ClientTranslationFile;
+  entries: Record<string, string>;
+  parseError: string | null;
 }

 export function ClientTranslations({ files, activeFile, entries, parseError }: Props) {
-  const router = useRouter()
-  const pathname = usePathname()
-  const searchParams = useSearchParams()
-  const [data, setData] = useState<Record<string, string>>(entries)
-  const [search, setSearch] = useState('')
-  const [page, setPage] = useState(1)
-  const { run, isPending } = useServerAction()
-  const PER_PAGE = 50
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [data, setData] = useState<Record<string, string>>(entries);
+  const [search, setSearch] = useState("");
+  const [page, setPage] = useState(1);
+  const { run, isPending } = useServerAction();
+  const PER_PAGE = 50;

  // Re-sync local state when the user switches file (server re-renders with
  // fresh entries; useState only initializes once).
  // biome-ignore lint/correctness/useExhaustiveDependencies: explicitly chosen here, see surrounding code
  useEffect(() => {
-    setData(entries)
-    setSearch('')
-    setPage(1)
-  }, [entries, activeFile.id])
+    setData(entries);
+    setSearch("");
+    setPage(1);
+  }, [entries, activeFile.id]);

  const filteredKeys = useMemo(() => {
-    const keys = Object.keys(data)
-    if (!search) return keys
-    const q = search.toLowerCase()
-    return keys.filter((k) => k.toLowerCase().includes(q) || data[k].toLowerCase().includes(q))
-  }, [data, search])
+    const keys = Object.keys(data);
+    if (!search) return keys;
+    const q = search.toLowerCase();
+    return keys.filter((k) => k.toLowerCase().includes(q) || data[k].toLowerCase().includes(q));
+  }, [data, search]);

-  const totalPages = Math.max(1, Math.ceil(filteredKeys.length / PER_PAGE))
-  const pageKeys = filteredKeys.slice((page - 1) * PER_PAGE, page * PER_PAGE)
+  const totalPages = Math.max(1, Math.ceil(filteredKeys.length / PER_PAGE));
+  const pageKeys = filteredKeys.slice((page - 1) * PER_PAGE, page * PER_PAGE);

  function changeFile(id: string) {
-    const params = new URLSearchParams(searchParams?.toString())
-    params.set('file', id)
-    router.push(`${pathname}?${params.toString()}`)
+    const params = new URLSearchParams(searchParams?.toString());
+    params.set("file", id);
+    router.push(`${pathname}?${params.toString()}`);
  }

  function updateValue(key: string, value: string) {
-    setData((d) => ({ ...d, [key]: value }))
+    setData((d) => ({ ...d, [key]: value }));
  }

  function handleSave() {
-    if (activeFile.readOnly) return
+    if (activeFile.readOnly) return;
    run(() => saveClientTranslations({ fileId: activeFile.id, data }), {
-      successMessage: 'File salvato.',
+      successMessage: "File salvato.",
      onSuccess: (result) => {
        if (result?.commentsLost) {
          toast.warning(
-            'Alcune chiavi non corrispondevano al formato standard: file riserializzato e commenti rimossi.',
-          )
+            "Alcune chiavi non corrispondevano al formato standard: file riserializzato e commenti rimossi.",
+          );
        }
-        router.refresh()
+        router.refresh();
      },
-    })
+    });
  }

  function handleExport() {
    const blob = new Blob([JSON.stringify(data, null, 2)], {
-      type: 'application/json',
-    })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = activeFile.relPath.split('/').pop() ?? 'translations.json'
-    a.click()
-    URL.revokeObjectURL(url)
+      type: "application/json",
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = activeFile.relPath.split("/").pop() ?? "translations.json";
+    a.click();
+    URL.revokeObjectURL(url);
  }

  return (
@@ -102,12 +96,8 @@ export function ClientTranslations({ files, activeFile, entries, parseError }: P
          <Button variant="outline" size="sm" onClick={handleExport}>
            <Download className="w-4 h-4 mr-1" /> Export
          </Button>
-          <Button
-            size="sm"
-            onClick={handleSave}
-            disabled={isPending || activeFile.readOnly || !!parseError}
-          >
-            <Save className="w-4 h-4 mr-1" /> {isPending ? 'Salvataggio...' : 'Salva'}
+          <Button size="sm" onClick={handleSave} disabled={isPending || activeFile.readOnly || !!parseError}>
+            <Save className="w-4 h-4 mr-1" /> {isPending ? "Salvataggio..." : "Salva"}
          </Button>
        </div>
      </div>
@@ -121,10 +111,8 @@ export function ClientTranslations({ files, activeFile, entries, parseError }: P
            {files.map((f) => (
              <SelectItem key={f.id} value={f.id}>
                <div className="flex items-center gap-2">
-                  <span className="font-mono text-xs">{f.relPath.replace('public/', '')}</span>
-                  {f.readOnly && (
-                    <span className="text-[10px] uppercase text-muted-foreground">RO</span>
-                  )}
+                  <span className="font-mono text-xs">{f.relPath.replace("public/", "")}</span>
+                  {f.readOnly && <span className="text-[10px] uppercase text-muted-foreground">RO</span>}
                </div>
              </SelectItem>
            ))}
@@ -135,8 +123,8 @@ export function ClientTranslations({ files, activeFile, entries, parseError }: P
          placeholder="Cerca per chiave o valore..."
          value={search}
          onChange={(e) => {
-            setSearch(e.target.value)
-            setPage(1)
+            setSearch(e.target.value);
+            setPage(1);
          }}
          className="max-w-xs"
        />
@@ -149,7 +137,7 @@ export function ClientTranslations({ files, activeFile, entries, parseError }: P
          {activeFile.format.toUpperCase()}
        </Badge>
        <Badge variant="outline" className="text-[11px]">
-          {activeFile.language === 'shared' ? 'shared' : activeFile.language.toUpperCase()}
+          {activeFile.language === "shared" ? "shared" : activeFile.language.toUpperCase()}
        </Badge>
        {activeFile.readOnly && (
          <Badge variant="secondary" className="gap-1 text-[11px]">
@@ -173,8 +161,8 @@ export function ClientTranslations({ files, activeFile, entries, parseError }: P
        <div className="rounded-md border border-[var(--admin-warning-border)] bg-[var(--admin-warning-subtle)] px-3 py-2 text-xs text-[var(--admin-warning)] dark:text-[var(--admin-warning)] flex items-start gap-2">
          <Lock className="w-4 h-4 flex-shrink-0 mt-0.5" />
          <div>
-            Questo file è di sola lettura.{' '}
-            {activeFile.note ?? 'Modificarlo manualmente non è supportato dal CMS.'}
+            Questo file è di sola lettura.{" "}
+            {activeFile.note ?? "Modificarlo manualmente non è supportato dal CMS."}
          </div>
        </div>
      )}
@@ -183,9 +171,9 @@ export function ClientTranslations({ files, activeFile, entries, parseError }: P
        <div className="rounded-md border border-[var(--admin-info-border)] bg-[var(--admin-info-subtle)] px-3 py-2 text-xs text-[var(--admin-info)] dark:text-[var(--admin-info)] flex items-start gap-2">
          <Info className="w-4 h-4 flex-shrink-0 mt-0.5" />
          <div>
-            I commenti vengono preservati: il salvataggio modifica solo le righe dei valori
-            cambiati. Se una chiave usa un formato non standard ed è impossibile patchare in-place,
-            il file viene riserializzato (commenti persi) e ti avviseremo.
+            I commenti vengono preservati: il salvataggio modifica solo le righe dei valori cambiati. Se una
+            chiave usa un formato non standard ed è impossibile patchare in-place, il file viene
+            riserializzato (commenti persi) e ti avviseremo.
          </div>
        </div>
      )}
@@ -202,10 +190,7 @@ export function ClientTranslations({ files, activeFile, entries, parseError }: P
        )}
        {pageKeys.map((key) => (
          <div key={key} className="flex items-center gap-3 px-4 py-2">
-            <span
-              className="text-xs font-mono text-muted-foreground w-72 truncate flex-shrink-0"
-              title={key}
-            >
+            <span className="text-xs font-mono text-muted-foreground w-72 truncate flex-shrink-0" title={key}>
              {key}
            </span>
            <Input
@@ -224,12 +209,7 @@ export function ClientTranslations({ files, activeFile, entries, parseError }: P
            Pagina {page} di {totalPages}
          </span>
          <div className="flex gap-1">
-            <Button
-              variant="outline"
-              size="sm"
-              disabled={page <= 1}
-              onClick={() => setPage(page - 1)}
-            >
+            <Button variant="outline" size="sm" disabled={page <= 1} onClick={() => setPage(page - 1)}>
              Prev
            </Button>
            <Button
@@ -244,5 +224,5 @@ export function ClientTranslations({ files, activeFile, entries, parseError }: P
        </div>
      )}
    </div>
-  )
+  );
 }
@@ -1,43 +1,40 @@
-import fs from 'node:fs/promises'
-import path from 'node:path'
-import JSON5 from 'json5'
-import { CLIENT_TRANSLATION_FILES, getClientTranslationFile } from '@/lib/client-translation-files'
-import { ClientTranslations } from './client-translations'
+import fs from "node:fs/promises";
+import path from "node:path";
+import JSON5 from "json5";
+import { CLIENT_TRANSLATION_FILES, getClientTranslationFile } from "@/lib/client-translation-files";
+import { ClientTranslations } from "./client-translations";

 export default async function ClientTranslationsPage({
  searchParams,
 }: {
-  searchParams: Promise<Record<string, string | undefined>>
+  searchParams: Promise<Record<string, string | undefined>>;
 }) {
-  const sp = await searchParams
-  const requested = sp.file
+  const sp = await searchParams;
+  const requested = sp.file;
  const file =
    (requested && getClientTranslationFile(requested)) ||
    CLIENT_TRANSLATION_FILES.find((f) => !f.readOnly) ||
-    CLIENT_TRANSLATION_FILES[0]
+    CLIENT_TRANSLATION_FILES[0];

-  const entries: Record<string, string> = {}
-  let parseError: string | null = null
+  const entries: Record<string, string> = {};
+  let parseError: string | null = null;

  try {
    // file.relPath comes from CLIENT_TRANSLATION_FILES (closed enum) but
    // Turbopack's tracer can't prove that — hint avoids tracing the whole project.
-    const raw = await fs.readFile(
-      path.join(/*turbopackIgnore: true*/ process.cwd(), file.relPath),
-      'utf-8',
-    )
-    const parsed = file.format === 'json5' ? JSON5.parse(raw) : JSON.parse(raw)
-    if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+    const raw = await fs.readFile(path.join(/*turbopackIgnore: true*/ process.cwd(), file.relPath), "utf-8");
+    const parsed = file.format === "json5" ? JSON5.parse(raw) : JSON.parse(raw);
+    if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
      // Nitro localization files are flat: { "key.with.dots": "value" }.
      // Coerce values to strings so the editor can render them in <input>.
      for (const [k, v] of Object.entries(parsed)) {
-        entries[k] = v == null ? '' : String(v)
+        entries[k] = v == null ? "" : String(v);
      }
    } else {
-      parseError = 'File root is not an object.'
+      parseError = "File root is not an object.";
    }
  } catch (err) {
-    parseError = err instanceof Error ? err.message : 'Failed to read file.'
+    parseError = err instanceof Error ? err.message : "Failed to read file.";
  }

  return (
@@ -47,5 +44,5 @@ export default async function ClientTranslationsPage({
      entries={entries}
      parseError={parseError}
    />
-  )
+  );
 }
@@ -1,11 +1,11 @@
-import fs from 'node:fs/promises'
-import path from 'node:path'
-import { TranslationsClient } from '../translations-client'
+import fs from "node:fs/promises";
+import path from "node:path";
+import { TranslationsClient } from "../translations-client";

 export default async function CmsTranslationsPage() {
-  const messagesDir = path.join(process.cwd(), 'messages')
-  const enContent = await fs.readFile(path.join(messagesDir, 'en.json'), 'utf-8')
-  const itContent = await fs.readFile(path.join(messagesDir, 'it.json'), 'utf-8')
+  const messagesDir = path.join(process.cwd(), "messages");
+  const enContent = await fs.readFile(path.join(messagesDir, "en.json"), "utf-8");
+  const itContent = await fs.readFile(path.join(messagesDir, "it.json"), "utf-8");

-  return <TranslationsClient enJson={enContent} itJson={itContent} />
+  return <TranslationsClient enJson={enContent} itJson={itContent} />;
 }
@@ -1,55 +1,55 @@
-import { ExternalLink, Server } from 'lucide-react'
-import Link from 'next/link'
-import { EmulatorSettingsForm } from '@/components/admin/emulator-settings-form'
-import { Button } from '@/components/ui/button'
-import type { Prisma } from '@/generated/prisma/client'
-import { calcPagination } from '@/lib/admin-helpers'
-import { prisma } from '@/lib/prisma'
+import { ExternalLink, Server } from "lucide-react";
+import Link from "next/link";
+import { EmulatorSettingsForm } from "@/components/admin/emulator-settings-form";
+import { Button } from "@/components/ui/button";
+import type { Prisma } from "@/generated/prisma/client";
+import { calcPagination } from "@/lib/admin-helpers";
+import { prisma } from "@/lib/prisma";

 // SQL `LIKE` patterns that capture the user-facing strings inside
 // `emulator_settings`. Anything not matching is config (timeouts, ports, IDs)
 // and lives in /admin/settings/emulator instead.
 const TRANSLATION_KEY_PATTERNS = [
-  'commands.description.%',
-  'commands.keys.%',
-  'commands.cmd_%',
-  'wordfilter.%',
-  'pet.%message%',
-  'matchmaking.%message%',
-  'message.%',
-  'notification.%',
-] as const
+  "commands.description.%",
+  "commands.keys.%",
+  "commands.cmd_%",
+  "wordfilter.%",
+  "pet.%message%",
+  "matchmaking.%message%",
+  "message.%",
+  "notification.%",
+] as const;

 export default async function EmulatorTranslationsPage({
  searchParams,
 }: {
-  searchParams: Promise<Record<string, string | undefined>>
+  searchParams: Promise<Record<string, string | undefined>>;
 }) {
-  const sp = await searchParams
-  const search = sp.search || ''
-  const group = sp.group || ''
-  const perPage = Math.min(Math.max(parseInt(sp.perPage || '50', 10), 10), 200)
-  const page = Math.max(parseInt(sp.page || '1', 10), 1)
+  const sp = await searchParams;
+  const search = sp.search || "";
+  const group = sp.group || "";
+  const perPage = Math.min(Math.max(parseInt(sp.perPage || "50", 10), 10), 200);
+  const page = Math.max(parseInt(sp.page || "1", 10), 1);

  const patternFilters: Prisma.EmulatorSettingsWhereInput[] = TRANSLATION_KEY_PATTERNS.map((p) => ({
-    key: { contains: p.replace(/%/g, '') },
-  }))
+    key: { contains: p.replace(/%/g, "") },
+  }));

-  const baseFilter: Prisma.EmulatorSettingsWhereInput = { OR: patternFilters }
+  const baseFilter: Prisma.EmulatorSettingsWhereInput = { OR: patternFilters };

-  const conditions: Prisma.EmulatorSettingsWhereInput[] = [baseFilter]
-  if (group) conditions.push({ key: { startsWith: `${group}.` } })
+  const conditions: Prisma.EmulatorSettingsWhereInput[] = [baseFilter];
+  if (group) conditions.push({ key: { startsWith: `${group}.` } });
  if (search) {
    conditions.push({
      OR: [{ key: { contains: search } }, { value: { contains: search } }],
-    })
+    });
  }
-  const where: Prisma.EmulatorSettingsWhereInput = { AND: conditions }
+  const where: Prisma.EmulatorSettingsWhereInput = { AND: conditions };

  const [settings, total, allKeys] = await Promise.all([
    prisma.emulatorSettings.findMany({
      where,
-      orderBy: { key: 'asc' },
+      orderBy: { key: "asc" },
      skip: (page - 1) * perPage,
      take: perPage,
    }),
@@ -60,19 +60,19 @@ export default async function EmulatorTranslationsPage({
      where: baseFilter,
      select: { key: true },
    }),
-  ])
+  ]);

-  const groupCounts = new Map<string, number>()
+  const groupCounts = new Map<string, number>();
  for (const { key } of allKeys) {
-    const g = key.includes('.') ? key.split('.')[0] : 'general'
-    groupCounts.set(g, (groupCounts.get(g) ?? 0) + 1)
+    const g = key.includes(".") ? key.split(".")[0] : "general";
+    groupCounts.set(g, (groupCounts.get(g) ?? 0) + 1);
  }
  const allGroups = Array.from(groupCounts.entries())
    .map(([name, count]) => ({ name, count }))
-    .sort((a, b) => a.name.localeCompare(b.name))
+    .sort((a, b) => a.name.localeCompare(b.name));

-  const pagination = calcPagination(total, page, perPage)
-  const settingsMap = settings.map((s) => ({ key: s.key, value: s.value }))
+  const pagination = calcPagination(total, page, perPage);
+  const settingsMap = settings.map((s) => ({ key: s.key, value: s.value }));

  return (
    <div className="space-y-4">
@@ -83,8 +83,8 @@ export default async function EmulatorTranslationsPage({
            Emulator
          </h1>
          <p className="text-sm text-muted-foreground">
-            Sottoinsieme di <code className="text-xs">emulator_settings</code> con stringhe utente
-            (comandi, wordfilter, messaggi pet/matchmaking).
+            Sottoinsieme di <code className="text-xs">emulator_settings</code> con stringhe utente (comandi,
+            wordfilter, messaggi pet/matchmaking).
          </p>
        </div>
        <Button asChild variant="outline" size="sm">
@@ -96,9 +96,8 @@ export default async function EmulatorTranslationsPage({
      </div>

      <div className="rounded-md border bg-muted/40 px-3 py-2 text-xs text-muted-foreground">
-        Le impostazioni di configurazione (porte, timeout, ID) non compaiono qui — usa il link
-        «Impostazioni complete». Le modifiche salvate sono sincronizzate con l&apos;emulatore via
-        RCON.
+        Le impostazioni di configurazione (porte, timeout, ID) non compaiono qui — usa il link «Impostazioni
+        complete». Le modifiche salvate sono sincronizzate con l&apos;emulatore via RCON.
      </div>

      <EmulatorSettingsForm
@@ -109,5 +108,5 @@ export default async function EmulatorTranslationsPage({
        activeGroup={group}
      />
    </div>
-  )
+  );
 }
@@ -1,11 +1,11 @@
-import { redirect } from 'next/navigation'
-import { canAccess, getAdminContext, PERMS } from '@/lib/permissions'
-import { TranslationsTabs } from './translations-tabs'
+import { redirect } from "next/navigation";
+import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
+import { TranslationsTabs } from "./translations-tabs";

 export default async function TranslationsLayout({ children }: { children: React.ReactNode }) {
-  const { session, permissions } = await getAdminContext()
+  const { session, permissions } = await getAdminContext();
  if (!canAccess(permissions, PERMS.SETTINGS_VIEW, session.user.rank)) {
-    redirect('/admin')
+    redirect("/admin");
  }

  return (
@@ -13,5 +13,5 @@ export default async function TranslationsLayout({ children }: { children: React
      <TranslationsTabs />
      {children}
    </div>
-  )
+  );
 }
@@ -1,4 +1,4 @@
-import { Skeleton } from '@/components/ui/skeleton'
+import { Skeleton } from "@/components/ui/skeleton";

 export default function TranslationsLoading() {
  return (
@@ -24,5 +24,5 @@ export default function TranslationsLoading() {
        ))}
      </div>
    </div>
-  )
+  );
 }
@@ -1,7 +1,7 @@
-import { redirect } from 'next/navigation'
+import { redirect } from "next/navigation";

 // Default landing for /admin/translations → first tab.
 // The shared TranslationsTabs (in layout.tsx) gives access to every section.
 export default function TranslationsHubPage() {
-  redirect('/admin/translations/cms')
+  redirect("/admin/translations/cms");
 }
@@ -1,74 +1,74 @@
-'use client'
+"use client";

-import { Download, Globe, Save } from 'lucide-react'
-import { useMemo, useState } from 'react'
-import { saveTranslations } from '@/actions/translations'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { useServerAction } from '@/hooks/use-server-action'
-import { flattenObject, unflattenObject } from '@/lib/translations-utils'
+import { Download, Globe, Save } from "lucide-react";
+import { useMemo, useState } from "react";
+import { saveTranslations } from "@/actions/translations";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useServerAction } from "@/hooks/use-server-action";
+import { flattenObject, unflattenObject } from "@/lib/translations-utils";

 interface Props {
-  enJson: string
-  itJson: string
+  enJson: string;
+  itJson: string;
 }

 export function TranslationsClient({ enJson, itJson }: Props) {
-  const [en, setEn] = useState(() => flattenObject(JSON.parse(enJson)))
-  const [it, setIt] = useState(() => flattenObject(JSON.parse(itJson)))
-  const [search, setSearch] = useState('')
-  const [group, setGroup] = useState('')
-  const [activeLang, setActiveLang] = useState<'en' | 'it'>('en')
-  const { run, isPending } = useServerAction()
-  const PER_PAGE = 30
-  const [page, setPage] = useState(1)
+  const [en, setEn] = useState(() => flattenObject(JSON.parse(enJson)));
+  const [it, setIt] = useState(() => flattenObject(JSON.parse(itJson)));
+  const [search, setSearch] = useState("");
+  const [group, setGroup] = useState("");
+  const [activeLang, setActiveLang] = useState<"en" | "it">("en");
+  const { run, isPending } = useServerAction();
+  const PER_PAGE = 30;
+  const [page, setPage] = useState(1);

-  const activeData = activeLang === 'en' ? en : it
-  const setActiveData = activeLang === 'en' ? setEn : setIt
+  const activeData = activeLang === "en" ? en : it;
+  const setActiveData = activeLang === "en" ? setEn : setIt;

  const groups = useMemo(() => {
-    const g = new Set<string>()
+    const g = new Set<string>();
    Object.keys(en).forEach((k) => {
-      const parts = k.split('.')
-      if (parts.length > 1) g.add(parts[0])
-    })
-    return Array.from(g).sort()
-  }, [en])
+      const parts = k.split(".");
+      if (parts.length > 1) g.add(parts[0]);
+    });
+    return Array.from(g).sort();
+  }, [en]);

  const filteredKeys = useMemo(() => {
    return Object.keys(activeData).filter((key) => {
      const matchSearch =
        !search ||
        key.toLowerCase().includes(search.toLowerCase()) ||
-        activeData[key].toLowerCase().includes(search.toLowerCase())
-      const matchGroup = !group || key.startsWith(`${group}.`)
-      return matchSearch && matchGroup
-    })
-  }, [activeData, search, group])
+        activeData[key].toLowerCase().includes(search.toLowerCase());
+      const matchGroup = !group || key.startsWith(`${group}.`);
+      return matchSearch && matchGroup;
+    });
+  }, [activeData, search, group]);

-  const totalPages = Math.ceil(filteredKeys.length / PER_PAGE)
-  const pageKeys = filteredKeys.slice((page - 1) * PER_PAGE, page * PER_PAGE)
+  const totalPages = Math.ceil(filteredKeys.length / PER_PAGE);
+  const pageKeys = filteredKeys.slice((page - 1) * PER_PAGE, page * PER_PAGE);

  function updateValue(key: string, value: string) {
-    setActiveData({ ...activeData, [key]: value })
+    setActiveData({ ...activeData, [key]: value });
  }

  function handleSave() {
    run(() => saveTranslations({ locale: activeLang, data: unflattenObject(activeData) }), {
-      successMessage: 'Translations saved!',
-    })
+      successMessage: "Translations saved!",
+    });
  }

  function handleExport() {
    const blob = new Blob([JSON.stringify(unflattenObject(activeData), null, 2)], {
-      type: 'application/json',
-    })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = `${activeLang}.json`
-    a.click()
-    URL.revokeObjectURL(url)
+      type: "application/json",
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${activeLang}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
  }

  return (
@@ -83,7 +83,7 @@ export function TranslationsClient({ enJson, itJson }: Props) {
            <Download className="w-4 h-4 mr-1" /> Export
          </Button>
          <Button size="sm" onClick={handleSave} disabled={isPending}>
-            <Save className="w-4 h-4 mr-1" /> {isPending ? 'Saving...' : 'Save'}
+            <Save className="w-4 h-4 mr-1" /> {isPending ? "Saving..." : "Save"}
          </Button>
        </div>
      </div>
@@ -91,16 +91,16 @@ export function TranslationsClient({ enJson, itJson }: Props) {
      <div className="flex gap-2 flex-wrap">
        <div className="flex gap-1">
          <Button
-            variant={activeLang === 'en' ? 'default' : 'outline'}
+            variant={activeLang === "en" ? "default" : "outline"}
            size="sm"
-            onClick={() => setActiveLang('en')}
+            onClick={() => setActiveLang("en")}
          >
            EN
          </Button>
          <Button
-            variant={activeLang === 'it' ? 'default' : 'outline'}
+            variant={activeLang === "it" ? "default" : "outline"}
            size="sm"
-            onClick={() => setActiveLang('it')}
+            onClick={() => setActiveLang("it")}
          >
            IT
          </Button>
@@ -109,8 +109,8 @@ export function TranslationsClient({ enJson, itJson }: Props) {
          placeholder="Filter by key or value..."
          value={search}
          onChange={(e) => {
-            setSearch(e.target.value)
-            setPage(1)
+            setSearch(e.target.value);
+            setPage(1);
          }}
          className="max-w-xs"
        />
@@ -118,8 +118,8 @@ export function TranslationsClient({ enJson, itJson }: Props) {
          className="rounded-md border bg-background px-3 py-1 text-sm"
          value={group}
          onChange={(e) => {
-            setGroup(e.target.value)
-            setPage(1)
+            setGroup(e.target.value);
+            setPage(1);
          }}
        >
          <option value="">All groups</option>
@@ -129,17 +129,13 @@ export function TranslationsClient({ enJson, itJson }: Props) {
            </option>
          ))}
        </select>
-        <span className="text-sm text-muted-foreground self-center">
-          {filteredKeys.length} keys
-        </span>
+        <span className="text-sm text-muted-foreground self-center">{filteredKeys.length} keys</span>
      </div>

      <div className="rounded-lg border bg-card divide-y">
        {pageKeys.map((key) => (
          <div key={key} className="flex items-center gap-3 px-4 py-2">
-            <span className="text-xs font-mono text-muted-foreground w-64 truncate flex-shrink-0">
-              {key}
-            </span>
+            <span className="text-xs font-mono text-muted-foreground w-64 truncate flex-shrink-0">{key}</span>
            <Input
              value={activeData[key]}
              onChange={(e) => updateValue(key, e.target.value)}
@@ -155,12 +151,7 @@ export function TranslationsClient({ enJson, itJson }: Props) {
            Page {page} of {totalPages}
          </span>
          <div className="flex gap-1">
-            <Button
-              variant="outline"
-              size="sm"
-              disabled={page <= 1}
-              onClick={() => setPage(page - 1)}
-            >
+            <Button variant="outline" size="sm" disabled={page <= 1} onClick={() => setPage(page - 1)}>
              Prev
            </Button>
            <Button
@@ -175,5 +166,5 @@ export function TranslationsClient({ enJson, itJson }: Props) {
        </div>
      )}
    </div>
-  )
+  );
 }
@@ -1,40 +1,40 @@
-'use client'
+"use client";

-import { Gamepad2, Globe, Server } from 'lucide-react'
-import Link from 'next/link'
-import { usePathname } from 'next/navigation'
-import { cn } from '@/lib/utils'
+import { Gamepad2, Globe, Server } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";

 const TABS = [
-  { href: '/admin/translations/cms', label: 'CMS', icon: Globe },
-  { href: '/admin/translations/client', label: 'Client (Nitro)', icon: Gamepad2 },
-  { href: '/admin/translations/emulator', label: 'Emulator', icon: Server },
-] as const
+  { href: "/admin/translations/cms", label: "CMS", icon: Globe },
+  { href: "/admin/translations/client", label: "Client (Nitro)", icon: Gamepad2 },
+  { href: "/admin/translations/emulator", label: "Emulator", icon: Server },
+] as const;

 export function TranslationsTabs() {
-  const pathname = usePathname()
+  const pathname = usePathname();

  return (
    <div className="flex gap-1 border-b">
      {TABS.map((t) => {
-        const active = pathname === t.href || pathname.startsWith(`${t.href}/`)
-        const Icon = t.icon
+        const active = pathname === t.href || pathname.startsWith(`${t.href}/`);
+        const Icon = t.icon;
        return (
          <Link
            key={t.href}
            href={t.href}
            className={cn(
-              '-mb-px flex items-center gap-2 border-b-2 px-4 py-2 text-sm font-medium transition-colors',
+              "-mb-px flex items-center gap-2 border-b-2 px-4 py-2 text-sm font-medium transition-colors",
              active
-                ? 'border-primary text-foreground'
-                : 'border-transparent text-muted-foreground hover:text-foreground',
+                ? "border-primary text-foreground"
+                : "border-transparent text-muted-foreground hover:text-foreground",
            )}
          >
            <Icon className="h-4 w-4" />
            {t.label}
          </Link>
-        )
+        );
      })}
    </div>
-  )
+  );
 }