Fix language settings and add model search functionality

apps/desktop/src/components/settings/components/ai/llm-custom-view.tsx

@@ -3,6 +3,9 @@ import { fetch as tauriFetch } from "@tauri-apps/plugin-http";
 import useDebouncedCallback from "beautiful-react-hooks/useDebouncedCallback";
 import { useEffect } from "react";
 
+import { Trans } from "@lingui/react/macro";
+import { Button } from "@hypr/ui/components/ui/button";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@hypr/ui/components/ui/command";
 import {
   Form,
   FormControl,
@@ -13,8 +16,10 @@ import {
   FormMessage,
 } from "@hypr/ui/components/ui/form";
 import { Input } from "@hypr/ui/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@hypr/ui/components/ui/popover";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@hypr/ui/components/ui/select";
 import { cn } from "@hypr/ui/lib/utils";
+import { Check, ChevronsUpDown } from "lucide-react";
 import { useState } from "react";
 import { SharedCustomEndpointProps } from "./shared";
 
@@ -45,6 +50,60 @@ const openrouterModels = [
   "mistralai/mistral-small-3.2-24b-instruct",
 ];
 
+interface SearchableModelSelectProps {
+  models: string[];
+  value?: string;
+  placeholder: string;
+  onValueChange: (value: string) => void;
+}
+
+function SearchableModelSelect({ models, value, placeholder, onValueChange }: SearchableModelSelectProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          aria-label={value ? `Selected model: ${value}` : placeholder}
+          className="w-full justify-between"
+        >
+          {value || placeholder}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[var(--radix-popper-anchor-width)] p-0">
+        <Command>
+          <CommandInput placeholder={`Search ${models.length} models...`} />
+          <CommandEmpty><Trans>No model found.</Trans></CommandEmpty>
+          <CommandGroup className="max-h-64 overflow-auto">
+            {models.map((model) => (
+              <CommandItem
+                key={model}
+                value={model}
+                onSelect={() => {
+                  onValueChange(model);
+                  setOpen(false);
+                }}
+              >
+                <Check
+                  className={cn(
+                    "mr-2 h-4 w-4",
+                    value === model ? "opacity-100" : "opacity-0",
+                  )}
+                />
+                {model}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 export function LLMCustomView({
   customLLMEnabled,
   selectedLLMModel,
@@ -533,21 +592,12 @@ export function LLMCustomView({
                             Model
                           </FormLabel>
                           <FormControl>
-                            <Select
+                            <SearchableModelSelect
+                              models={openrouterModels}
                               value={field.value}
+                              placeholder="Select OpenRouter model"
                               onValueChange={field.onChange}
-                            >
-                              <SelectTrigger>
-                                <SelectValue placeholder="Select OpenRouter model" />
-                              </SelectTrigger>
-                              <SelectContent>
-                                {openrouterModels.map((model) => (
-                                  <SelectItem key={model} value={model}>
-                                    {model}
-                                  </SelectItem>
-                                ))}
-                              </SelectContent>
-                            </Select>
+                            />
                           </FormControl>
                           <FormMessage />
                         </FormItem>
@@ -661,21 +711,12 @@ export function LLMCustomView({
                               )
                               : othersModels.data && othersModels.data.length > 0
                               ? (
-                                <Select
+                                <SearchableModelSelect
+                                  models={othersModels.data}
                                   value={field.value}
+                                  placeholder="Select model"
                                   onValueChange={field.onChange}
-                                >
-                                  <SelectTrigger>
-                                    <SelectValue placeholder="Select model" />
-                                  </SelectTrigger>
-                                  <SelectContent>
-                                    {othersModels.data.map((model) => (
-                                      <SelectItem key={model} value={model}>
-                                        {model}
-                                      </SelectItem>
-                                    ))}
-                                  </SelectContent>
-                                </Select>
+                                />
                               )
                               : (
                                 <Input

apps/desktop/src/main.tsx

@@ -1,9 +1,11 @@
 import "@hypr/ui/globals.css";
 import "./styles/globals.css";
 
-import { QueryClient, QueryClientProvider, useQueries, useQueryClient } from "@tanstack/react-query";
+import { i18n } from "@lingui/core";
+import { I18nProvider } from "@lingui/react";
+import { QueryClient, QueryClientProvider, useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
 import { CatchBoundary, createRouter, ErrorComponent, RouterProvider } from "@tanstack/react-router";
-import { useEffect } from "react";
+import { type ReactNode, useEffect } from "react";
 import ReactDOM from "react-dom/client";
 
 import { recordingStartFailedToast } from "@/components/toast/shared";
@@ -22,6 +24,44 @@ import { routeTree } from "./routeTree.gen";
 import * as Sentry from "@sentry/react";
 import { defaultOptions } from "tauri-plugin-sentry-api";
 
+import { messages as enMessages } from "@/locales/en/messages";
+import { messages as koMessages } from "@/locales/ko/messages";
+
+i18n.load({
+  en: enMessages,
+  ko: koMessages,
+});
+
+// Language initialization component
+function LanguageInitializer({ children }: { children: ReactNode }) {
+  const config = useQuery({
+    queryKey: ["config", "general"],
+    queryFn: async () => {
+      const result = await dbCommands.getConfig();
+      return result;
+    },
+    retry: 1,
+  });
+
+  useEffect(() => {
+    const displayLanguage = config.data?.general.display_language;
+    if (displayLanguage && (displayLanguage === "en" || displayLanguage === "ko")) {
+      i18n.activate(displayLanguage);
+    } else {
+      // Fallback to English for new users, invalid languages, or if config fails to load
+      i18n.activate("en");
+    }
+  }, [config.data, config.error]);
+
+  // Don't render children until language is initialized
+  if (config.isLoading) {
+    return null;
+  }
+
+  return <>{children}</>;
+}
+
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -128,14 +168,18 @@ if (!rootElement.innerHTML) {
       <TooltipProvider delayDuration={700} skipDelayDuration={300}>
         <ThemeProvider defaultTheme="light">
           <QueryClientProvider client={queryClient}>
-            <App />
-            <Toaster
-              position="bottom-left"
-              expand={true}
-              offset={16}
-              duration={Infinity}
-              swipeDirections={[]}
-            />
+            <LanguageInitializer>
+              <I18nProvider i18n={i18n}>
+                <App />
+                <Toaster
+                  position="bottom-left"
+                  expand={true}
+                  offset={16}
+                  duration={Infinity}
+                  swipeDirections={[]}
+                />
+              </I18nProvider>
+            </LanguageInitializer>
           </QueryClientProvider>
         </ThemeProvider>
       </TooltipProvider>