feature: Add i18n support. Fixes #57 (#635)

* feature(web): Add basic scaffolding for i18n

* refactor: Switch most of the app's strings to use i18n strings

* fix: Remove unused i18next-resources-for-ts command

* Add user setting

* More translations

* Drop the german translation for now

1 files changed, 25 insertions, 13 deletions

diff --git a/apps/web/components/dashboard/admin/ServerStats.tsx b/apps/web/components/dashboard/admin/ServerStats.tsx
index f45d86c5..da69390b 100644
--- a/apps/web/components/dashboard/admin/ServerStats.tsx
+++ b/apps/web/components/dashboard/admin/ServerStats.tsx
@@ -10,6 +10,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { useClientConfig } from "@/lib/clientConfig";
+import { useTranslation } from "@/lib/i18n/client";
 import { api } from "@/lib/trpc";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 
@@ -61,6 +62,7 @@ function ReleaseInfo() {
 }
 
 export default function ServerStats() {
+  const { t } = useTranslation();
   const { data: serverStats } = api.admin.stats.useQuery(undefined, {
     refetchInterval: 1000,
     placeholderData: keepPreviousData,
@@ -72,15 +74,19 @@ export default function ServerStats() {
 
   return (
     <>
-      <div className="mb-2 text-xl font-medium">Server Stats</div>
+      <div className="mb-2 text-xl font-medium">
+        {t("admin.server_stats.server_stats")}
+      </div>
       <div className="flex flex-col gap-4 sm:flex-row">
         <div className="rounded-md border bg-background p-4 sm:w-1/4">
-          <div className="text-sm font-medium text-gray-400">Total Users</div>
+          <div className="text-sm font-medium text-gray-400">
+            {t("admin.server_stats.total_users")}
+          </div>
           <div className="text-3xl font-semibold">{serverStats.numUsers}</div>
         </div>
         <div className="rounded-md border bg-background p-4 sm:w-1/4">
           <div className="text-sm font-medium text-gray-400">
-            Total Bookmarks
+            {t("admin.server_stats.total_bookmarks")}
           </div>
           <div className="text-3xl font-semibold">
             {serverStats.numBookmarks}
@@ -88,42 +94,48 @@ export default function ServerStats() {
         </div>
         <div className="rounded-md border bg-background p-4 sm:w-1/4">
           <div className="text-sm font-medium text-gray-400">
-            Server Version
+            {t("admin.server_stats.server_version")}
           </div>
           <ReleaseInfo />
         </div>
       </div>
 
       <div className="sm:w-1/2">
-        <div className="mb-2 mt-8 text-xl font-medium">Background Jobs</div>
+        <div className="mb-2 mt-8 text-xl font-medium">
+          {t("admin.background_jobs.background_jobs")}
+        </div>
         <Table className="rounded-md border">
           <TableHeader className="bg-gray-200">
-            <TableHead>Job</TableHead>
-            <TableHead>Queued</TableHead>
-            <TableHead>Pending</TableHead>
-            <TableHead>Failed</TableHead>
+            <TableHead>{t("admin.background_jobs.job")}</TableHead>
+            <TableHead>{t("admin.background_jobs.queued")}</TableHead>
+            <TableHead>{t("admin.background_jobs.pending")}</TableHead>
+            <TableHead>{t("admin.background_jobs.failed")}</TableHead>
           </TableHeader>
           <TableBody>
             <TableRow>
-              <TableCell className="lg:w-2/3">Crawling Jobs</TableCell>
+              <TableCell className="lg:w-2/3">
+                {t("admin.background_jobs.crawler_jobs")}
+              </TableCell>
               <TableCell>{serverStats.crawlStats.queued}</TableCell>
               <TableCell>{serverStats.crawlStats.pending}</TableCell>
               <TableCell>{serverStats.crawlStats.failed}</TableCell>
             </TableRow>
             <TableRow>
-              <TableCell>Indexing Jobs</TableCell>
+              <TableCell>{t("admin.background_jobs.indexing_jobs")}</TableCell>
               <TableCell>{serverStats.indexingStats.queued}</TableCell>
               <TableCell>-</TableCell>
               <TableCell>-</TableCell>
             </TableRow>
             <TableRow>
-              <TableCell>Inference Jobs</TableCell>
+              <TableCell>{t("admin.background_jobs.inference_jobs")}</TableCell>
               <TableCell>{serverStats.inferenceStats.queued}</TableCell>
               <TableCell>{serverStats.inferenceStats.pending}</TableCell>
               <TableCell>{serverStats.inferenceStats.failed}</TableCell>
             </TableRow>
             <TableRow>
-              <TableCell>Tidy Assets Jobs</TableCell>
+              <TableCell>
+                {t("admin.background_jobs.tidy_assets_jobs")}
+              </TableCell>
               <TableCell>{serverStats.tidyAssetsStats.queued}</TableCell>
               <TableCell>-</TableCell>
               <TableCell>-</TableCell>