feat: implement internationalization across navigation and UI components

- Refactored SideNav, TopNav, OmniBar, StatusBar, and various pages to utilize the i18n hook for dynamic translations.
- Updated route definitions to support localized labels for navigation items.
- Enhanced user experience by replacing hardcoded strings with translation keys, ensuring consistency across the application.
- Added new translation keys in both English and Japanese for improved localization support.

Author: Ryosuke-Asano

src/components/nav/SideNav.tsx

@@ -1,14 +1,17 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
-import { routes } from "@/routes/registry";
+import { getRoutes } from "@/routes/registry";
 import { Box, HStack, Text, VStack } from "@chakra-ui/react";
 import { ColorModeButton } from "@/components/ui/color-mode";
+import { useI18n } from "@/hooks/useI18n";
 
 export interface SideNavProps {
   onNavigate?: () => void;
 }
 
 export function SideNav({ onNavigate }: SideNavProps = {}) {
+  const { t } = useI18n();
+  const routes = React.useMemo(() => getRoutes(t), [t]);
   return (
     <VStack align="stretch" p={2} gap={1} h="full">
       {routes.map((r) => (
@@ -30,7 +33,7 @@ export function SideNav({ onNavigate }: SideNavProps = {}) {
       >
         <HStack gap={2} align="center">
           <Text fontSize="sm" color="fg.muted">
-            Theme
+            {t("nav.theme")}
           </Text>
           <ColorModeButton />
         </HStack>

src/components/nav/TopNav.tsx

@@ -10,6 +10,7 @@
 import { ColorModeButton } from "@/components/ui/color-mode";
 import { useColorMode } from "@/components/ui/use-color-mode";
 import { LuMenu } from "react-icons/lu";
+import { useI18n } from "@/hooks/useI18n";
 
 export interface TopNavProps {
   onOpenOmni?: () => void;
@@ -20,6 +21,7 @@ export interface TopNavProps {
 export function TopNav(
   { onOpenOmni, onOpenMenu, showMenuButton = false }: TopNavProps,
 ) {
+  const { t } = useI18n();
   const lightLogoUrl = new URL(
     "../../assets/Floorp_Logo_OS_C_Light.png",
     import.meta.url,
@@ -54,7 +56,7 @@ export function TopNav(
       <HStack gap={{ base: 1, md: 1.5 }} flexShrink={0}>
         {showMenuButton && (
           <IconButton
-            aria-label="Open menu"
+            aria-label={t("nav.openMenu")}
             size="sm"
             variant="ghost"
             onClick={onOpenMenu}
@@ -86,7 +88,7 @@ export function TopNav(
         <Box
           role="button"
           tabIndex={0}
-          aria-label="Open Omni Bar"
+          aria-label={t("nav.openOmniBar")}
           onClick={() => onOpenOmni?.()}
           onKeyDown={(e) => {
             if (e.key === "Enter" || e.key === " ") onOpenOmni?.();
@@ -117,7 +119,7 @@ export function TopNav(
             h="full"
           >
             <Text fontSize="xs" whiteSpace="nowrap" lineHeight="1.5">
-              Search or run…
+              {t("nav.searchOrRun")}
             </Text>
             <HStack display={"flex"} align="center" gap={0.5}>
               <Kbd fontSize="xs">⌘</Kbd>

src/components/omni/OmniBar.tsx

@@ -11,6 +11,7 @@ import {
   VStack,
 } from "@chakra-ui/react";
 import { useNavigate } from "react-router-dom";
+import { useI18n } from "@/hooks/useI18n";
 
 interface OmniBarItem {
   label: string;
@@ -24,30 +25,32 @@ export interface OmniBarProps {
   onClose: () => void;
 }
 
-const DEFAULT_ITEMS: OmniBarItem[] = [
+const getDefaultItems = (t: (key: string) => string): OmniBarItem[] => [
   {
-    label: "Go to Generate",
+    label: t("omniBar.goToGenerate"),
     hint: "/generate",
     to: "/generate",
     kind: "navigate",
   },
-  { label: "Go to Fix", hint: "/fix", to: "/fix", kind: "navigate" },
-  { label: "Run Workflow", hint: "/run", to: "/run", kind: "navigate" },
-  { label: "Open Plugins", hint: "/plugins", to: "/plugins", kind: "navigate" },
+  { label: t("omniBar.goToFix"), hint: "/fix", to: "/fix", kind: "navigate" },
+  { label: t("omniBar.runWorkflow"), hint: "/run", to: "/run", kind: "navigate" },
+  { label: t("omniBar.openPlugins"), hint: "/plugins", to: "/plugins", kind: "navigate" },
 ];
 
 export function OmniBar({ isOpen, onClose }: OmniBarProps) {
+  const { t } = useI18n();
   const [query, setQuery] = React.useState("");
   const [active, setActive] = React.useState(0);
   const navigate = useNavigate();
 
   const items = React.useMemo(() => {
+    const defaultItems = getDefaultItems(t);
     const q = query.trim().toLowerCase();
-    if (!q) return DEFAULT_ITEMS;
-    return DEFAULT_ITEMS.filter((i) =>
+    if (!q) return defaultItems;
+    return defaultItems.filter((i) =>
       i.label.toLowerCase().includes(q) || i.hint?.toLowerCase().includes(q)
     );
-  }, [query]);
+  }, [query, t]);
 
   React.useEffect(() => {
     function onKey(e: KeyboardEvent) {
@@ -90,25 +93,25 @@ export function OmniBar({ isOpen, onClose }: OmniBarProps) {
           borderWidth="1px"
         >
           <HStack px={{ base: 2, md: 3 }} py={{ base: 1.5, md: 2 }} borderBottomWidth="1px" justify="space-between">
-            <Text fontWeight="medium" fontSize={{ base: "sm", md: "md" }}>Omni Bar</Text>
+            <Text fontWeight="medium" fontSize={{ base: "sm", md: "md" }}>{t("omniBar.title")}</Text>
             <HStack color="fg.muted" display={{ base: "none", sm: "flex" }} gap={1}>
               <Kbd fontSize="xs">Esc</Kbd>
-              <Text fontSize="xs">to close</Text>
+              <Text fontSize="xs">{t("omniBar.toClose")}</Text>
             </HStack>
           </HStack>
           <Box p={{ base: 2, md: 3 }}>
             <Input
               autoFocus
               size={{ base: "md", md: "lg" }}
-              placeholder="Search commands, navigate, or ask…"
+              placeholder={t("omniBar.searchPlaceholder")}
               onChange={(e) => {
                 setQuery(e.target.value);
                 setActive(0);
               }}
             />
             <VStack align="stretch" gap={1} mt={3} maxH={{ base: "50vh", md: "60vh" }} overflowY="auto">
               {items.length === 0
-                ? <Box px={2} py={3} color="fg.muted" fontSize={{ base: "xs", md: "sm" }}>No results</Box>
+                ? <Box px={2} py={3} color="fg.muted" fontSize={{ base: "xs", md: "sm" }}>{t("omniBar.noResults")}</Box>
                 : (
                   items.map((it, idx) => (
                     <Suggestion
@@ -137,12 +140,12 @@ export function OmniBar({ isOpen, onClose }: OmniBarProps) {
               </HStack>
               <HStack gap={1}>
                 <Kbd fontSize="xs">Enter</Kbd>
-                <Text>to run</Text>
+                <Text>{t("omniBar.toRun")}</Text>
               </HStack>
             </HStack>
             <HStack justify="flex-end" mt={2}>
               <Button size="sm" variant="outline" onClick={onClose} minH={{ base: "36px", md: "auto" }}>
-                Close
+                {t("omniBar.close")}
               </Button>
             </HStack>
           </Box>

src/components/status/StatusBar.tsx

@@ -1,8 +1,10 @@
 import React from "react";
 import { Badge, Box, HStack, Spacer, Text } from "@chakra-ui/react";
 import { useVersionPing } from "@/hooks";
+import { useI18n } from "@/hooks/useI18n";
 
 export function StatusBar() {
+  const { t } = useI18n();
   const [grpc, setGrpc] = React.useState<
     "connected" | "connecting" | "disconnected"
   >("connecting");
@@ -33,7 +35,7 @@ export function StatusBar() {
       }}
     >
       <HStack gap={2} flexShrink={0}>
-        <Text whiteSpace="nowrap">Automotor Status</Text>
+        <Text whiteSpace="nowrap">{t("statusBar.automotorStatus")}</Text>
         <Badge
           colorPalette={grpc === "connected"
             ? "green"
@@ -42,7 +44,7 @@ export function StatusBar() {
             : "red"}
           fontSize={{ base: "xs", md: "sm" }}
         >
-          {grpc}
+          {t(`statusBar.${grpc}`)}
         </Badge>
       </HStack>
 
@@ -61,7 +63,7 @@ export function StatusBar() {
         ? (
           <HStack gap={2} flexShrink={0}>
             <Text display={{ base: "none", sm: "block" }} whiteSpace="nowrap">
-              Version:
+              {t("statusBar.version")}
             </Text>
             <Badge colorPalette="gray" fontSize={{ base: "xs", md: "sm" }}>
               {version}