org picker fix

HolodexNet · Oct 16, 2023 · efeaa20 · efeaa20
1 parent 771daee
commit efeaa20
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 33 deletions.
diff --git a/packages/react/src/components/org/OrgPicker.tsx b/packages/react/src/components/org/OrgPicker.tsx
@@ -11,14 +11,18 @@ import {
   CommandGroup,
   CommandInput,
   CommandItem,
+  CommandList,
 } from "@/shadcn/ui/command";
 import { Popover, PopoverTrigger, PopoverContent } from "@/shadcn/ui/popover";
 import { useTranslation } from "react-i18next";
+import { currentOrgAtom } from "@/store/org";
+import { useAtom } from "jotai/react";
 
 export function OrgSelectorCombobox() {
   const { t } = useTranslation();
   const [open, setOpen] = React.useState(false);
   const [value, setValue] = React.useState("");
+  const [currentOrg, setCurrentOrg] = useAtom(currentOrgAtom);
   // const [currentOrg, setOrg] = useAtom(orgAtom)
 
   // Use the useOrgs API service to fetch organizations
@@ -39,38 +43,41 @@ export function OrgSelectorCombobox() {
         <Button
           variant="outline"
           role="combobox"
+          size="lg"
           aria-expanded={open}
-          className="w-[200px] justify-between"
+          className="px-4 justify-between w-full"
         >
-          {value
-            ? orgs.find((org) => org.name === value)?.name
-            : t("Select organization...")}
+          {orgs.find((org) => org.name === currentOrg.name)?.name
+            || t("Select organization...")}
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0">
+      <PopoverContent className="max-w-[80vw] p-0">
         <Command>
           <CommandInput placeholder={t("Search organization...")} />
-          <CommandEmpty>{t("No organization found.")}</CommandEmpty>
-          <CommandGroup>
-            {orgs.map((org) => (
-              <CommandItem
-                key={org.name}
-                onSelect={(currentValue) => {
-                  setValue(currentValue === value ? "" : currentValue);
-                  setOpen(false);
-                }}
-              >
-                <Check
-                  className={cn(
-                    "mr-2 h-4 w-4",
-                    value === org.name ? "opacity-100" : "opacity-0",
-                  )}
-                />
-                {org.name}
-              </CommandItem>
-            ))}
-          </CommandGroup>
+          <CommandList>
+            <CommandEmpty>{t("No organization found.")}</CommandEmpty>
+            <CommandGroup>
+              {orgs.map((org) => (
+                <CommandItem
+                  key={org.name}
+                  onSelect={(currentValue) => {
+                    setValue(currentValue === value ? "" : currentValue);
+                    setCurrentOrg(org);
+                    setOpen(false);
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      value === org.name ? "opacity-100" : "opacity-0",
+                    )}
+                  />
+                  {org.name}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
         </Command>
       </PopoverContent>
     </Popover>

diff --git a/packages/react/src/components/sidebar/sidebar.tsx b/packages/react/src/components/sidebar/sidebar.tsx
@@ -31,8 +31,9 @@ export function Sidebar({ className, id, onClose }: SidebarProps) {
           />
         </div>
         <div className="px-3 py-2">
-          <OrgSelectorCombobox />
-          <h2 className="mb-2 px-4 font-semibold tracking-tight">Hololive</h2>
+          <div class="mb-2">
+            <OrgSelectorCombobox /></div>
+          {/* <h2 className="mb-2 px-4 font-semibold tracking-tight">Hololive</h2> */}
           <div className="space-y-1">
             <SidebarItem
               onClose={onClose}

diff --git a/packages/react/src/routes/router.tsx b/packages/react/src/routes/router.tsx
@@ -1,4 +1,3 @@
-import Kitchensink from "@/Kitchensink";
 import { Navigate, createBrowserRouter } from "react-router-dom";
 import { Home } from "@/routes/home";
 import { ChannelsOrg } from "./channelsOrg";
@@ -17,6 +16,7 @@ const Login = React.lazy(() => import("./login"));
 const Settings = React.lazy(() => import("./settings"));
 const About = React.lazy(() => import("./about"));
 const Channel = React.lazy(() => import("./channel"));
+const Kitchensink = React.lazy(() => import("@/Kitchensink"));
 
 const store = getDefaultStore();
 

diff --git a/packages/react/src/shadcn/ui/command.tsx b/packages/react/src/shadcn/ui/command.tsx
@@ -21,7 +21,7 @@ const Command = React.forwardRef<
 ))
 Command.displayName = CommandPrimitive.displayName
 
-interface CommandDialogProps extends DialogProps {}
+interface CommandDialogProps extends DialogProps { }
 
 const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
@@ -39,7 +39,7 @@ const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+  <div className="flex items-center border-b border-base px-3" cmdk-input-wrapper="">
     <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
       ref={ref}

diff --git a/packages/react/src/store/org.ts b/packages/react/src/store/org.ts
@@ -9,8 +9,8 @@ export const defaultOrgs = [
   { name: "Independents", short: "Indie" },
 ];
 
-export const orgRankingAtom = atomWithStorage('orgRanking', defaultOrgs)
+export const orgRankingAtom = atomWithStorage<Org[]>('orgRanking', defaultOrgs)
 
-export const coreOrgAtom = atomWithStorage('org', { name: "Hololive", short: "Holo" });
+export const currentOrgAtom = atomWithStorage<Org>('org', { name: "Hololive", short: "Holo" });
 
-export const orgAtom = atom((get) => get(coreOrgAtom).name);
+export const orgAtom = atom((get) => get(currentOrgAtom).name);