i18n (#184)

* chore: i18n init

* chore(i18n): app settings

* chore(i18n): sidebar

* chore(i18n): nav

* chore(i18n): table & doc

* chore(i18n): ai chat

* fix: nav layout

* Update to version 0.8.0

apps/desktop/index.tsx

@@ -2,6 +2,7 @@ import React from "react"
 import ReactDOM from "react-dom/client"
 import { RouterProvider, createBrowserRouter, redirect } from "react-router-dom"
 
+import "@/locales/i18n"
 import { DownloadPage } from "@/components/landing/download"
 import SettingsStoragePage from "@/apps/desktop/settings/storage/page"
 import NodePage from "@/apps/web-app/[database]/[node]/page"

apps/desktop/settings/storage/page.tsx

@@ -1,14 +1,17 @@
 import { Separator } from "@/components/ui/separator"
+import { useTranslation } from "react-i18next"
 
 import { StorageForm } from "./storage-form"
 
 export default function SettingsStoragePage() {
+  const { t } = useTranslation();
+
   return (
     <div className="space-y-6">
       <div>
-        <h3 className="text-lg font-medium">Storage</h3>
+        <h3 className="text-lg font-medium">{t("settings.storage")}</h3>
         <p className="text-sm text-muted-foreground">
-          Configure your storage settings.
+          {t("settings.storage.description")}
         </p>
       </div>
       <Separator />

apps/desktop/settings/storage/storage-form.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
 import * as z from "zod"
+import { useTranslation } from "react-i18next"
 
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -25,6 +26,7 @@ const storageFormSchema = z.object({
 type StorageFormValues = z.infer<typeof storageFormSchema>
 
 export function StorageForm() {
+  const { t } = useTranslation()
   const [dataFolder, setDataFolder] = useState<string | null>(null)
 
   const form = useForm<StorageFormValues>({
@@ -62,16 +64,16 @@ export function StorageForm() {
 
     if (!data.dataFolder) {
       toast({
-        title: "Data folder not selected",
-        description: "You need to select a data folder.",
+        title: t("settings.storage.dataFolderNotSelected"),
+        description: t("settings.storage.selectDataFolder"),
       })
       return
     }
 
     await window.eidos.config.set("dataFolder", data.dataFolder)
 
     toast({
-      title: "Settings updated",
+      title: t("settings.storage.settingsUpdated"),
     })
     await window.eidos.reloadApp()
   }
@@ -84,33 +86,33 @@ export function StorageForm() {
           name="dataFolder"
           render={({ field }) => (
             <FormItem className="flex flex-col">
-              <FormLabel>Data Folder</FormLabel>
+              <FormLabel>{t("settings.storage.dataFolder")}</FormLabel>
               <div className="flex gap-1">
                 <FormControl>
                   <Input
                     {...field}
-                    placeholder="Select a data folder"
+                    placeholder={t("settings.storage.selectDataFolderPlaceholder")}
                     readOnly
                   />
                 </FormControl>
                 <Button type="button" onClick={handleSelectDataFolder}>
-                  Select
+                  {t("common.select")}
                 </Button>
                 {dataFolder && (
                   <Button type="button" onClick={handleOpenDataFolder}>
-                    Open
+                    {t("common.open")}
                   </Button>
                 )}
               </div>
               <FormDescription>
-                The folder where your data will be stored.
+                {t("settings.storage.dataFolderDescription")}
               </FormDescription>
               <FormMessage />
             </FormItem>
           )}
         />
         <Button type="button" className="mt-4" onClick={() => onSubmit()}>
-          Update
+          {t("common.update")}
         </Button>
       </form>
     </Form>

apps/web-app/[database]/[node]/node-cover.tsx

@@ -1,5 +1,6 @@
 import { useRef, useState } from "react"
 import { useDrop } from "ahooks"
+import { useTranslation } from "react-i18next"
 
 import { ITreeNode } from "@/lib/store/ITreeNode"
 import { cn } from "@/lib/utils"
@@ -17,6 +18,7 @@ export const NodeCover = (props: { node: ITreeNode }) => {
   const { node } = props
   const [open, setOpen] = useState(false)
   const [isHovering, setIsHovering] = useState(false)
+  const { t } = useTranslation()
 
   const dropRef = useRef(null)
 
@@ -51,7 +53,7 @@ export const NodeCover = (props: { node: ITreeNode }) => {
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
           <div className="absolute right-[24%] opacity-0 group-hover:opacity-100">
-            <Button size="sm">Change cover</Button>
+            <Button size="sm">{t('doc.changeCover')}</Button>
           </div>
         </PopoverTrigger>
         <PopoverContent className="w-auto p-0">
@@ -75,6 +77,7 @@ export const NodeCover = (props: { node: ITreeNode }) => {
         <img
           className="trigger"
           src={node.cover}
+          alt={t('doc.coverImage')}
           style={{
             backgroundSize: "cover",
             backgroundPosition: "center",

apps/web-app/[database]/[node]/node-icon.tsx

@@ -11,6 +11,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover"
+import { useTranslation } from "react-i18next"
 
 init({ data })
 
@@ -46,6 +47,7 @@ export const NodeIconEditor = (props: {
   const { updateIcon } = useNode()
   const [open, setOpen] = useState(false)
 
+  const { t } = useTranslation()
   useEffect(() => {
     setIcon(props.icon)
   }, [props.icon])
@@ -94,7 +96,7 @@ export const NodeIconEditor = (props: {
             size="sm"
             onClick={handleRemoveIcon}
           >
-            Remove
+            {t("common.remove")}
           </Button>
         </div>
       </PopoverContent>

apps/web-app/[database]/[node]/node-restore.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react"
+import { useTranslation } from "react-i18next"
 
 import { ITreeNode } from "@/lib/store/ITreeNode"
 import { useGotoCurrentSpaceHome } from "@/hooks/use-goto"
@@ -19,6 +20,7 @@ import { Button } from "@/components/ui/button"
 export const NodeRestore = ({ node }: { node: ITreeNode | null }) => {
   const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false)
   const { restoreNode, permanentlyDeleteNode } = useSqlite()
+  const { t } = useTranslation()
 
   const gotoSpaceHome = useGotoCurrentSpaceHome()
   const confirmDelete = () => {
@@ -34,21 +36,21 @@ export const NodeRestore = ({ node }: { node: ITreeNode | null }) => {
       {Boolean(node && node.is_deleted) && (
         <>
           <div className="my-1 flex w-full items-center justify-center gap-8 bg-red-400 p-2">
-            This node is in the trash
+            {t("doc.nodeInTrash")}
             <div className="flex gap-2">
               <Button
                 size="sm"
                 variant="outline"
                 onClick={() => restoreNode(node)}
               >
-                Restore
+                {t("common.restore")}
               </Button>
               <Button
                 size="sm"
                 variant="outline"
                 onClick={() => setDeleteConfirmOpen(true)}
               >
-                Delete
+                {t("common.delete")}
               </Button>
             </div>
           </div>
@@ -59,19 +61,18 @@ export const NodeRestore = ({ node }: { node: ITreeNode | null }) => {
             <AlertDialogTrigger></AlertDialogTrigger>
             <AlertDialogContent>
               <AlertDialogHeader>
-                <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                <AlertDialogTitle>{t("common.areYouAbsolutelySure")}</AlertDialogTitle>
                 <AlertDialogDescription>
-                  This action cannot be undone. This will permanently delete the
-                  node
+                  {t("doc.permanentDeleteWarning")}
                 </AlertDialogDescription>
               </AlertDialogHeader>
               <AlertDialogFooter>
-                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
                 <AlertDialogAction
                   onClick={confirmDelete}
                   className="bg-red-500 hover:bg-red-600"
                 >
-                  Continue
+                  {t("common.continue")}
                 </AlertDialogAction>
               </AlertDialogFooter>
             </AlertDialogContent>

apps/web-app/[database]/[node]/page.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from "react"
 import { useParams } from "react-router-dom"
+import { useTranslation } from "react-i18next"
 
 import {
   DataUpdateSignalType,
@@ -32,6 +33,7 @@ export const NodeComponent = ({
   nodeId?: string
   isRootPage?: boolean
 }) => {
+  const { t } = useTranslation()
   const params = useCurrentPathInfo()
   const { updateNodeName } = useSqlite(params.database)
   const { tableName } = params
@@ -128,19 +130,19 @@ export const NodeComponent = ({
                 <>
                   {!node.icon && (
                     <Button size="xs" variant="ghost" onClick={handleAddIcon}>
-                      Add Icon
+                      {t('doc.addIcon')}
                     </Button>
                   )}
                   {!node.cover && (
                     <Button size="xs" variant="ghost" onClick={handleAddCover}>
-                      Add Cover
+                      {t('doc.addCover')}
                     </Button>
                   )}
                 </>
               )}
               {parentNode?.type === "table" && (
                 <Button size="xs" variant="ghost" onClick={toggleProperties}>
-                  {node.hide_properties ? "Show Properties" : "Hide Properties"}
+                  {node.hide_properties ? t('doc.showProperties') : t('doc.hideProperties')}
                 </Button>
               )}
             </div>

apps/web-app/index.tsx

@@ -1,6 +1,7 @@
 import React from "react"
 import ReactDOM from "react-dom/client"
 import { RouterProvider, createBrowserRouter, redirect } from "react-router-dom"
+import "@/locales/i18n"
 
 import { DownloadPage } from "@/components/landing/download"
 import NodePage from "@/apps/web-app/[database]/[node]/page"