import i18n only in App.tsx

src/components/App.tsx

@@ -13,6 +13,7 @@ import {
 import { ChatRoute } from "../routes/ChatRoute";
 import { IndexRoute } from "../routes/IndexRoute";
 import { Layout } from "./Layout";
+import '../i18n';
 
 const history = createHashHistory();
 const location = new ReactLocation({ history });
@@ -30,7 +31,6 @@ export function App() {
     setColorScheme(value || (colorScheme === "dark" ? "light" : "dark"));
 
   useHotkeys([["mod+J", () => toggleColorScheme()]]);
-
   return (
     <Router
       location={location}

src/components/Chats.tsx

@@ -8,7 +8,6 @@ import { useChatId } from "../hooks/useChatId";
 import { DeleteChatModal } from "./DeleteChatModal";
 import { EditChatModal } from "./EditChatModal";
 import { MainLink } from "./MainLink";
-import '../i18n'
 import {t} from "i18next";
 
 export function Chats({ search }: { search: string }) {

src/components/CreatePromptModal.tsx

@@ -13,7 +13,6 @@ import { IconPlaylistAdd, IconPlus } from "@tabler/icons-react";
 import { nanoid } from "nanoid";
 import { useEffect, useState } from "react";
 import { db } from "../db";
-import '../i18n'
 import {t} from "i18next";
 
 export function CreatePromptModal({ content }: { content?: string }) {

src/components/DatabaseModal.tsx

@@ -8,7 +8,6 @@ import { cloneElement, ReactElement } from "react";
 import { db } from "../db";
 import { DeleteAllDataModal } from "./DeleteAllDataModal";
 import { DeleteChatsModal } from "./DeleteChatsModal";
-import '../i18n'
 import {t} from "i18next";
 
 export function DatabaseModal({ children }: { children: ReactElement }) {

src/components/DeleteAllDataModal.tsx

@@ -2,7 +2,6 @@ import { Button, Modal, Stack, Text } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { IconTrash } from "@tabler/icons-react";
 import { db } from "../db";
-import '../i18n'
 import {t} from "i18next";
 
 export function DeleteAllDataModal({ onOpen }: { onOpen: () => void }) {

src/components/DeleteChatModal.tsx

@@ -6,7 +6,6 @@ import { cloneElement, ReactElement, useEffect, useState } from "react";
 import { Chat, db } from "../db";
 import { useApiKey } from "../hooks/useApiKey";
 import { useChatId } from "../hooks/useChatId";
-import '../i18n'
 import {t} from "i18next";
 
 export function DeleteChatModal({

src/components/DeleteChatsModal.tsx

@@ -2,7 +2,6 @@ import { Button, Modal, Stack, Text } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { IconTrash } from "@tabler/icons-react";
 import { db } from "../db";
-import '../i18n'
 import {t} from "i18next";
 
 export function DeleteChatsModal({ onOpen }: { onOpen: () => void }) {

src/components/DeletePromptModal.tsx

@@ -7,7 +7,6 @@ import { useEffect, useState } from "react";
 import { db, Prompt } from "../db";
 import { useApiKey } from "../hooks/useApiKey";
 import { useChatId } from "../hooks/useChatId";
-import '../i18n'
 import {t} from "i18next";
 import * as tty from "tty";
 

src/components/EditChatModal.tsx

@@ -3,7 +3,6 @@ import { useDisclosure } from "@mantine/hooks";
 import { notifications } from "@mantine/notifications";
 import { cloneElement, ReactElement, useEffect, useState } from "react";
 import { Chat, db } from "../db";
-import '../i18n'
 import {t} from "i18next";
 
 export function EditChatModal({

src/components/EditPromptModal.tsx

@@ -12,7 +12,6 @@ import { notifications } from "@mantine/notifications";
 import { IconPencil } from "@tabler/icons-react";
 import { useEffect, useState } from "react";
 import { db, Prompt } from "../db";
-import '../i18n'
 import {t} from "i18next";
 
 export function EditPromptModal({ prompt }: { prompt: Prompt }) {

src/components/Layout.tsx

@@ -41,7 +41,6 @@ import { LogoText } from "./Logo";
 import { Prompts } from "./Prompts";
 import { SettingsModal } from "./SettingsModal";
 import { config } from "../utils/config";
-import '../i18n'
 import {t} from "i18next";
 
 declare global {

src/components/MessageItem.tsx

@@ -20,7 +20,6 @@ import "../styles/markdown.scss";
 import { CreatePromptModal } from "./CreatePromptModal";
 import { LogoIcon } from "./Logo";
 import { ScrollIntoView } from "./ScrollIntoView";
-import '../i18n'
 import {t} from "i18next";
 
 export function MessageItem({ message }: { message: Message }) {

src/components/Prompts.tsx

@@ -8,7 +8,6 @@ import { db } from "../db";
 import { createChatCompletion } from "../utils/openai";
 import { DeletePromptModal } from "./DeletePromptModal";
 import { EditPromptModal } from "./EditPromptModal";
-import '../i18n'
 import {t} from "i18next";
 
 export function Prompts({

src/components/SettingsModal.tsx

@@ -18,7 +18,6 @@ import { cloneElement, ReactElement, useEffect, useState } from "react";
 import { db } from "../db";
 import { config } from "../utils/config";
 import { checkOpenAIKey } from "../utils/openai";
-import '../i18n'
 import {t} from "i18next";
 
 export function SettingsModal({ children }: { children: ReactElement }) {

src/routes/ChatRoute.tsx

@@ -24,7 +24,6 @@ import {
   createChatCompletion,
   createStreamChatCompletion,
 } from "../utils/openai";
-import '../i18n'
 import {t} from "i18next";
 
 export function ChatRoute() {

src/routes/IndexRoute.tsx

@@ -20,13 +20,30 @@ import { Logo } from "../components/Logo";
 import { SettingsModal } from "../components/SettingsModal";
 import { db } from "../db";
 import { config } from "../utils/config";
-import '../i18n'
 import {t} from "i18next";
 
 export function IndexRoute() {
   const settings = useLiveQuery(() => db.settings.get("general"));
   const { openAiApiKey } = settings ?? {};
 
+  const features = [
+    {
+      icon: IconCurrencyDollar,
+      title: t('freeAndOpenSource.title'),
+      description: t('freeAndOpenSource.description'),
+    },
+    {
+      icon: IconLock,
+      title: t('privacyFocused.title'),
+      description: t('privacyFocused.description'),
+    },
+    {
+      icon: IconNorthStar,
+      title: t('bestExperience.title'),
+      description: t('bestExperience.description'),
+    },
+  ];
+
   return (
     <>
       <Center py="xl" sx={{ height: "100%" }}>
@@ -44,8 +61,8 @@ export function IndexRoute() {
             spacing={30}
             breakpoints={[{ maxWidth: "md", cols: 1 }]}
           >
-            {features.map((feature) => (
-              <div key={feature.title}>
+            {features.map((feature, index) => (
+              <div key={index}>
                 <ThemeIcon variant="outline" size={50} radius={50}>
                   <feature.icon size={26} stroke={1.5} />
                 </ThemeIcon>
@@ -87,22 +104,4 @@ export function IndexRoute() {
       </Center>
     </>
   );
-}
-
-const features = [
-  {
-    icon: IconCurrencyDollar,
-    title: t('freeAndOpenSource.title'),
-    description: t('freeAndOpenSource.description'),
-  },
-  {
-    icon: IconLock,
-    title: t('privacyFocused.title'),
-    description: t('privacyFocused.description'),
-  },
-  {
-    icon: IconNorthStar,
-    title: t('bestExperience.title'),
-    description: t('bestExperience.description'),
-  },
-];
+}

yarn.lock

@@ -1273,10 +1273,10 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 
-"@types/react-dom@18.0.11":
-  version "18.0.11"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.11.tgz#321351c1459bc9ca3d216aefc8a167beec334e33"
-  integrity sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==
+"@types/react-dom@^18.0.11":
+  version "18.2.7"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.7.tgz#67222a08c0a6ae0a0da33c3532348277c70abb63"
+  integrity sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==
   dependencies:
     "@types/react" "*"
 
@@ -1289,10 +1289,10 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/react@18.0.28":
-  version "18.0.28"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.28.tgz#accaeb8b86f4908057ad629a26635fe641480065"
-  integrity sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew==
+"@types/react@^18.0.28":
+  version "18.2.15"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.15.tgz#14792b35df676c20ec3cf595b262f8c615a73066"
+  integrity sha512-oEjE7TQt1fFTFSbf8kkNuc798ahTUzn3Le67/PWjE8MAfYAD/qB7O8hSTcromLFqHCt9bcdOg5GXMokzTjJ5SA==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"