Add Translations with i18next

.github/workflows/crowdin.yml

@@ -0,0 +1,38 @@
+name: Crowdin Action
+
+permissions:
+  contents: write
+  pull-requests: write
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  synchronize-with-crowdin:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Crowdin Action
+        uses: crowdin/github-action@v2
+        with:
+          upload_sources: true
+          upload_translations: false
+          download_translations: true
+          localization_branch_name: l10n_crowdin_translations
+          create_pull_request: true
+          pull_request_title: "New Crowdin Translations"
+          pull_request_body: "New Crowdin translations by [Crowdin GH Action](https://github.com/crowdin/github-action)"
+          pull_request_base_branch_name: "main"
+        env:
+          # A classic GitHub Personal Access Token with the 'repo' scope selected (the user should have write access to the repository).
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+          # A numeric ID, found at https://crowdin.com/project/<projectName>/tools/api
+          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
+
+          # Visit https://crowdin.com/settings#api-key to create this token
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}

crowdin.yml

@@ -0,0 +1,8 @@
+"project_id_env": "CROWDIN_PROJECT_ID"
+"api_token_env": "CROWDIN_PERSONAL_TOKEN"
+"base_path": "."
+
+"preserve_hierarchy": true
+
+"files":
+  [{ "source": "src/shared/locales/en-US/*.json", "translation": "src/shared/locales/%locale%/%original_file_name%" }]

package.json

@@ -37,9 +37,12 @@
     "electron-chrome-web-store": "npm:@iamevan/electron-chrome-web-store@0.11.2",
     "electron-context-menu": "^4.0.5",
     "electron-updater": "^6.6.2",
+    "i18next": "^25.1.2",
+    "i18next-resources-to-backend": "^1.2.1",
     "knex": "^3.1.0",
     "mime-types": "^3.0.1",
     "posthog-node": "^4.17.1",
+    "react-i18next": "^15.5.1",
     "sharp": "^0.34.1",
     "sharp-ico": "^0.1.5",
     "zod": "^3.24.4"

src/main/ipc/app/app.ts

@@ -5,7 +5,8 @@ import { ipcMain } from "electron";
 ipcMain.handle("app:get-info", async () => {
   return {
     version: app.getVersion(),
-    packaged: app.isPackaged
+    packaged: app.isPackaged,
+    locale: app.getLocale()
   };
 });
 

src/main/modules/posthog.ts

@@ -46,7 +46,8 @@ function getAppInfoForPosthog() {
   return {
     version: app.getVersion(),
     platform: process.platform,
-    environment: process.env.NODE_ENV
+    environment: process.env.NODE_ENV,
+    locale: app.getLocale()
   };
 }
 

src/preload/index.ts

@@ -404,6 +404,7 @@ const appAPI: FlowAppAPI = {
     const appInfo: {
       version: string;
       packaged: boolean;
+      locale: string;
     } = await ipcRenderer.invoke("app:get-info");
     const appVersion = appInfo.version;
     const updateChannel: "Stable" | "Beta" | "Alpha" | "Development" = appInfo.packaged ? "Stable" : "Development";
@@ -416,7 +417,8 @@ const appAPI: FlowAppAPI = {
       chrome_version: process.versions.chrome,
       electron_version: process.versions.electron,
       os: os,
-      update_channel: updateChannel
+      update_channel: updateChannel,
+      locale: appInfo.locale
     };
   },
   writeTextToClipboard: (text: string) => {

src/renderer/src/components/browser-ui/browser-action.tsx

@@ -10,6 +10,7 @@ import { cn } from "@/lib/utils";
 import { CogIcon, LayersIcon, PackageXIcon, PinIcon, PinOffIcon, PuzzleIcon } from "lucide-react";
 import { MouseEvent, useCallback, useMemo, useRef, useState } from "react";
 import { PortalPopover } from "@/components/portal/popover";
+import { useBrowserUITranslations } from "@/lib/i18n";
 
 interface BrowserActionListProps {
   partition?: string;
@@ -144,6 +145,7 @@ function BrowserAction({ action, alignment, partition, activeTabId }: BrowserAct
 }
 
 export function BrowserActionList({ alignmentX = "left", alignmentY = "bottom" }: BrowserActionListProps) {
+  const { t: tBrowserUI } = useBrowserUITranslations();
   const { isCurrentSpaceLight } = useSpaces();
   const { actions, activeTabId, partition } = useBrowserAction();
   const [open, setOpen] = useState(false);
@@ -184,19 +186,19 @@ export function BrowserActionList({ alignmentX = "left", alignmentY = "bottom" }
           {noActiveTab && (
             <SidebarMenuButton disabled>
               <LayersIcon />
-              No Active Tab
+              {tBrowserUI("No Active Tab")}
             </SidebarMenuButton>
           )}
           {!noActiveTab && noActions && (
             <SidebarMenuButton disabled>
               <PackageXIcon />
-              No Extensions Available
+              {tBrowserUI("No Extensions Available")}
             </SidebarMenuButton>
           )}
           <Separator />
           <SidebarMenuButton onClick={openExtensionsPage}>
             <CogIcon />
-            <span className="font-semibold truncate">Manage Extensions</span>
+            <span className="font-semibold truncate">{tBrowserUI("Manage Extensions")}</span>
           </SidebarMenuButton>
         </SidebarMenu>
       </PortalPopover.Content>

src/renderer/src/components/browser-ui/sidebar/content/new-tab-button.tsx

@@ -4,10 +4,12 @@ import { SidebarMenuButton } from "@/components/ui/resizable-sidebar";
 import { PlusIcon } from "lucide-react";
 import { SIDEBAR_HOVER_COLOR } from "@/components/browser-ui/browser-sidebar";
 import { cn } from "@/lib/utils";
+import { useBrowserUITranslations } from "@/lib/i18n";
 
 const MotionSidebarMenuButton = motion(SidebarMenuButton);
 
 export function NewTabButton() {
+  const { t: tBrowserUI } = useBrowserUITranslations();
   const [isPressed, setIsPressed] = useState(false);
 
   const handleMouseDown = () => {
@@ -32,7 +34,7 @@ export function NewTabButton() {
       className={cn(SIDEBAR_HOVER_COLOR, "text-black/50 dark:text-muted-foreground")}
     >
       <PlusIcon className="size-4" strokeWidth={3} />
-      <span className="font-medium">New Tab</span>
+      <span className="font-medium">{tBrowserUI("New Tab")}</span>
     </MotionSidebarMenuButton>
   );
 }

src/renderer/src/components/browser-ui/sidebar/content/space-sidebar.tsx

@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import { SidebarGroup, SidebarMenu, useSidebar } from "@/components/ui/resizable-sidebar";
 import { Space } from "~/flow/interfaces/sessions/spaces";
 import { cn, hex_is_light } from "@/lib/utils";
+import { useBrowserUITranslations } from "@/lib/i18n";
 import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useMemo, useRef } from "react";
 import { DropIndicator as BaseDropIndicator } from "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/list-item";
@@ -38,6 +39,7 @@ export function DropIndicator({ isSpaceLight }: { isSpaceLight: boolean }) {
 
 function SidebarSectionDivider({ hasTabs, handleCloseAllTabs }: { hasTabs: boolean; handleCloseAllTabs: () => void }) {
   const { open } = useSidebar();
+  const { t: tBrowserUI } = useBrowserUITranslations();
 
   if (!hasTabs) return null;
 
@@ -62,7 +64,7 @@ function SidebarSectionDivider({ hasTabs, handleCloseAllTabs }: { hasTabs: boole
           size="sm"
           onClick={handleCloseAllTabs}
         >
-          <span className="text-xs font-semibold">Clear</span>
+          <span className="text-xs font-semibold">{tBrowserUI("Clear")}</span>
         </Button>
       )}
     </motion.div>

src/renderer/src/components/browser-ui/sidebar/header/address-bar/address-bar.tsx

@@ -2,12 +2,14 @@ import { AddressBarCopyLinkButton } from "@/components/browser-ui/sidebar/header
 import { PinnedBrowserActions } from "@/components/browser-ui/sidebar/header/address-bar/pinned-browser-actions";
 import { useTabs } from "@/components/providers/tabs-provider";
 import { SidebarGroup, useSidebar } from "@/components/ui/resizable-sidebar";
+import { useBrowserUITranslations } from "@/lib/i18n";
 import { simplifyUrl } from "@/lib/url";
 import { cn } from "@/lib/utils";
 import { SearchIcon } from "lucide-react";
 import { useRef } from "react";
 
 function FakeAddressBar({ className }: { className?: string }) {
+  const { t: tBrowserUI } = useBrowserUITranslations();
   const inputRef = useRef<HTMLInputElement>(null);
   const { addressUrl, focusedTab } = useTabs();
 
@@ -34,7 +36,7 @@ function FakeAddressBar({ className }: { className?: string }) {
   const simplifiedUrl = simplifyUrl(addressUrl);
   const isPlaceholder = !simplifiedUrl;
 
-  const value = isPlaceholder ? "Search or type URL" : simplifiedUrl;
+  const value = isPlaceholder ? tBrowserUI("Search or type URL") : simplifiedUrl;
 
   return (
     <div

src/renderer/src/components/settings/sections/about/browser-info-card.tsx

@@ -1,3 +1,4 @@
+import { useSettingsTranslations } from "@/lib/i18n";
 import { useEffect, useState } from "react";
 import { Loader2 } from "lucide-react"; // For loading state
 
@@ -18,6 +19,7 @@ function InfoRow({ label, value }: InfoRowProps) {
 }
 
 export function BrowserInfoCard() {
+  const { t: tSettings } = useSettingsTranslations();
   const [appInfo, setAppInfo] = useState<Awaited<ReturnType<typeof getAppInfo>> | null>(null);
   const [isLoading, setIsLoading] = useState(true);
 
@@ -40,28 +42,28 @@ export function BrowserInfoCard() {
     // Replaced Card with styled div
     <div className="rounded-lg border bg-card text-card-foreground p-6">
       <div className="mb-4">
-        <h3 className="text-xl font-semibold tracking-tight">Browser Information</h3>
-        <p className="text-sm text-muted-foreground mt-1">Details about your Flow Browser installation.</p>
+        <h3 className="text-xl font-semibold tracking-tight">{tSettings("sections.about.info.title")}</h3>
+        <p className="text-sm text-muted-foreground mt-1">{tSettings("sections.about.info.description")}</p>
       </div>
 
       {isLoading ? (
         <div className="flex items-center justify-center h-32 text-muted-foreground">
           <Loader2 className="h-6 w-6 animate-spin mr-2" />
-          <span>Loading browser details...</span>
+          <span>{tSettings("sections.about.info.loading")}</span>
         </div>
       ) : appInfo ? (
         // Using a 3-column grid for label & value to better control alignment and wrapping
         <div className="grid grid-cols-1 md:grid-cols-3 gap-x-4 gap-y-1 border-t pt-4">
-          <InfoRow label="Browser Name" value="Flow Browser" />
-          <InfoRow label="Version" value={appInfo.app_version} />
-          <InfoRow label="Build Number" value={appInfo.build_number} />
-          <InfoRow label="Engine Version" value={`Chromium ${appInfo.chrome_version}`} />
-          <InfoRow label="Operating System" value={appInfo.os} />
-          <InfoRow label="Update Channel" value={appInfo.update_channel} />
+          <InfoRow label={tSettings("sections.about.info.browser-name")} value="Flow Browser" />
+          <InfoRow label={tSettings("sections.about.info.version")} value={appInfo.app_version} />
+          <InfoRow label={tSettings("sections.about.info.build")} value={appInfo.build_number} />
+          <InfoRow label={tSettings("sections.about.info.engine")} value={`Chromium ${appInfo.chrome_version}`} />
+          <InfoRow label={tSettings("sections.about.info.os")} value={appInfo.os} />
+          <InfoRow label={tSettings("sections.about.info.update-channel")} value={appInfo.update_channel} />
         </div>
       ) : (
         <div className="flex items-center justify-center h-32 text-destructive">
-          Could not load browser information.
+          {tSettings("sections.about.info.loading.failed")}
         </div>
       )}
     </div>

src/renderer/src/components/settings/sections/about/section.tsx

@@ -1,13 +1,16 @@
 import { BrowserInfoCard } from "./browser-info-card";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { useSettingsTranslations } from "@/lib/i18n";
 
 export function AboutSettings() {
+  const { t: tSettings } = useSettingsTranslations();
+
   return (
     <div className="space-y-6">
       <div>
-        <h2 className="text-2xl font-semibold text-gray-700 dark:text-gray-200">About</h2>
-        <p className="text-muted-foreground">Information about your browser</p>
+        <h2 className="text-2xl font-semibold text-gray-700 dark:text-gray-200">{tSettings("sections.about")}</h2>
+        <p className="text-muted-foreground">{tSettings("sections.about.description")}</p>
       </div>
 
       <BrowserInfoCard />