feat: add search functionality to model selection dropdowns

- Add SearchableModelSelect component with real-time filtering
- Apply to "Others" section where users configure custom endpoints
- Also apply to "OpenRouter" section for consistency
- Show dynamic model count in search placeholder
- Handle empty search results gracefully
- Maintain accessibility with proper ARIA attributes
- Use existing UI components (Command, Popover, Button)

Resolves #1386 - Users can now search through ~100 models instead of scrolling manually

Author: SashankBhamidi

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

@@ -4,6 +4,8 @@ import { fetch as tauriFetch } from "@tauri-apps/plugin-http";
 import useDebouncedCallback from "beautiful-react-hooks/useDebouncedCallback";
 import { useEffect } from "react";
 
+import { Button } from "@hypr/ui/components/ui/button";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@hypr/ui/components/ui/command";
 import {
   Form,
   FormControl,
@@ -14,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";
 
@@ -46,6 +50,59 @@ 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}
+          className="w-full justify-between"
+        >
+          {value || placeholder}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[--radix-popover-trigger-width] p-0">
+        <Command>
+          <CommandInput placeholder={`Search ${models.length} models...`} />
+          <CommandEmpty>No model found.</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,
@@ -534,21 +591,12 @@ export function LLMCustomView({
                             <Trans>Model</Trans>
                           </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>
@@ -664,21 +712,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