fix: language selector in settings

apps/client/src/components/locale-combobox.tsx

@@ -1,11 +1,15 @@
 import { t } from "@lingui/macro";
-import { Check } from "@phosphor-icons/react";
+import { CaretDown, Check } from "@phosphor-icons/react";
 import {
+  Button,
   Command,
   CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
   ScrollArea,
 } from "@reactive-resume/ui";
 import { cn } from "@reactive-resume/utils";
@@ -69,3 +73,43 @@ export const LocaleCombobox = ({ value, onValueChange }: Props) => {
     </Command>
   );
 };
+
+export const LocaleComboboxPopover = ({ value, onValueChange }: Props) => {
+  const { languages } = useLanguages();
+  const [open, setOpen] = useState(false);
+
+  const selected = useMemo(() => {
+    return languages.find((lang) => lang.locale === value);
+  }, [value, languages]);
+
+  const onSelect = (selectedValue: string) => {
+    onValueChange(selectedValue);
+    setOpen(false);
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          role="combobox"
+          variant="outline"
+          aria-expanded={open}
+          className="w-full justify-between hover:bg-secondary/20 active:scale-100"
+        >
+          <span className="line-clamp-1 text-left font-normal">
+            {selected?.name} <span className="ml-1 text-xs opacity-50">({selected?.locale})</span>
+          </span>
+          <CaretDown
+            className={cn(
+              "ml-2 h-4 w-4 shrink-0 rotate-0 opacity-50 transition-transform",
+              open && "rotate-180",
+            )}
+          />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className="p-0">
+        <LocaleCombobox value={value} onValueChange={onSelect} />
+      </PopoverContent>
+    </Popover>
+  );
+};