feat: close listbox on click outside

gui/src/components/AssistantAndOrgListbox/AssistantOption.tsx

@@ -7,21 +7,15 @@ import { useAppDispatch } from "../../redux/hooks";
 import { setSelectedProfile } from "../../redux/slices/profilesSlice";
 import { CONFIG_ROUTES } from "../../util/navigation";
 import { ToolTip } from "../gui/Tooltip";
-import { Button, ListboxOption, useFontSize } from "../ui";
+import { Button, ListboxOption } from "../ui";
 import { AssistantIcon } from "./AssistantIcon";
 
 interface AssistantOptionProps {
   profile: ProfileDescription;
   selected: boolean;
-  onClick: () => void;
 }
 
-export function AssistantOption({
-  profile,
-  selected,
-  onClick,
-}: AssistantOptionProps) {
-  const tinyFont = useFontSize(-4);
+export function AssistantOption({ profile, selected }: AssistantOptionProps) {
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
   const ideMessenger = useContext(IdeMessengerContext);
@@ -38,8 +32,6 @@ export function AssistantOption({
     ideMessenger.post("didChangeSelectedProfile", {
       id: profile.id,
     });
-
-    onClick();
   }
 
   return (

gui/src/components/AssistantAndOrgListbox/AssistantOptions.tsx

@@ -3,13 +3,9 @@ import { AssistantOption } from "./AssistantOption";
 
 interface AssistantOptionsProps {
   selectedProfileId: string | undefined;
-  onClose: () => void;
 }
 
-export function AssistantOptions({
-  selectedProfileId,
-  onClose,
-}: AssistantOptionsProps) {
+export function AssistantOptions({ selectedProfileId }: AssistantOptionsProps) {
   const { profiles } = useAuth();
 
   return (
@@ -23,7 +19,6 @@ export function AssistantOptions({
           <AssistantOption
             key={idx}
             profile={profile}
-            onClick={onClose}
             selected={profile.id === selectedProfileId}
           />
         ))

gui/src/components/AssistantAndOrgListbox/OrganizationOption.tsx

@@ -12,7 +12,6 @@ import { ListboxOption } from "../ui";
 
 interface OrganizationOptionProps {
   organization: { id: string; name: string; iconUrl?: string | null };
-  onClose: () => void;
 }
 
 function getOrgIcon(
@@ -40,10 +39,7 @@ function getOrgIcon(
   return <IconComponent className={`${sizeClasses} flex-shrink-0`} />;
 }
 
-export function OrganizationOption({
-  organization,
-  onClose,
-}: OrganizationOptionProps) {
+export function OrganizationOption({ organization }: OrganizationOptionProps) {
   const dispatch = useAppDispatch();
   const ideMessenger = useContext(IdeMessengerContext);
   const selectedOrgId = useAppSelector(
@@ -56,7 +52,6 @@ export function OrganizationOption({
     ideMessenger.post("didChangeSelectedOrg", {
       id: organization.id,
     });
-    onClose();
   }
 
   return (

gui/src/components/AssistantAndOrgListbox/OrganizationOptions.tsx

@@ -1,17 +1,13 @@
 import { useAuth } from "../../context/Auth";
 import { OrganizationOption } from "./OrganizationOption";
 
-interface OrganizationOptionsProps {
-  onClose: () => void;
-}
-
-export function OrganizationOptions({ onClose }: OrganizationOptionsProps) {
+export function OrganizationOptions() {
   const { organizations } = useAuth();
 
   return (
     <div className="thin-scrollbar flex max-h-24 flex-col overflow-y-auto">
       {organizations.map((org) => (
-        <OrganizationOption key={org.id} organization={org} onClose={onClose} />
+        <OrganizationOption key={org.id} organization={org} />
       ))}
     </div>
   );

gui/src/components/AssistantAndOrgListbox/SelectedAssistantButton.tsx

@@ -10,11 +10,13 @@ import { AssistantIcon } from "./AssistantIcon";
 interface SelectedAssistantButtonProps {
   selectedProfile: ProfileDescription | null;
   variant?: "lump" | "sidebar";
+  setOptionsOpen: (open: boolean) => void;
 }
 
 export function SelectedAssistantButton({
   selectedProfile,
   variant,
+  setOptionsOpen,
 }: SelectedAssistantButtonProps) {
   const configLoading = useAppSelector((store) => store.config.loading);
 
@@ -28,6 +30,7 @@ export function SelectedAssistantButton({
       data-testid="assistant-select-button"
       className={`text-description overflow-hidden border-none bg-transparent hover:brightness-110 ${isSidebar ? "w-full justify-start" : "gap-1.5"} ${buttonPadding}`}
       style={buttonStyle}
+      onClick={() => setOptionsOpen(true)}
     >
       <div
         className={`flex flex-row items-center ${isSidebar ? "w-full justify-between" : "gap-1.5"}`}