merge

4 files changed, 391 insertions, 209 deletions

diff --git a/apps/extension/src/SideBar.tsx b/apps/extension/src/SideBar.tsx
index 34992386..9704511b 100644
--- a/apps/extension/src/SideBar.tsx
+++ b/apps/extension/src/SideBar.tsx
@@ -7,19 +7,20 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "./components/ui/tooltip";
-// import { FilterSpaces } from "./components/FilterCombobox";
-// import {
-//   Dialog,
-//   DialogContent,
-//   DialogHeader,
-//   DialogTitle,
-//   DialogDescription,
-//   DialogTrigger,
-//   DialogFooter,
-//   DialogClose,
-// } from "./components/ui/dialog";
+import { FilterSpaces } from "./components/FilterCombobox";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogTrigger,
+  DialogFooter,
+  DialogClose,
+} from "./components/ui/dialog";
+import { Space } from "./types/memory";
 
-function sendUrlToAPI() {
+function sendUrlToAPI(spaces: number[]) {
   // get the current URL
   const url = window.location.href;
 
@@ -31,7 +32,7 @@ function sendUrlToAPI() {
   } else {
     // const content = Entire page content, but cleaned up for the LLM. No ads, no scripts, no styles, just the text. if article, just the importnat info abou tit.
     const content = document.documentElement.innerText;
-    chrome.runtime.sendMessage({ type: "urlChange", content, url });
+    chrome.runtime.sendMessage({ type: "urlChange", content, url, spaces });
   }
 }
 
@@ -50,7 +51,9 @@ function SideBar({ jwt }: { jwt: string }) {
 
   const [isSendingData, setIsSendingData] = useState(false);
 
-  // const [selectedSpaces, setSelectedSpaces] = useState<number[]>([0, 1]);
+  const [loading, setLoading] = useState(false);
+  const [spaces, setSpaces] = useState<Space[]>();
+  const [selectedSpaces, setSelectedSpaces] = useState<number[]>([]);
 
   const [isImportingTweets, setIsImportingTweets] = useState(false);
 
@@ -73,6 +76,15 @@ function SideBar({ jwt }: { jwt: string }) {
     });
   }
 
+  const fetchSpaces = async () => {
+    setLoading(true);
+    chrome.runtime.sendMessage({ type: "fetchSpaces" }, (resp) => {
+      console.log(resp);
+      setSpaces(resp);
+      setLoading(false);
+    });
+  };
+
   const fetchBookmarks = () => {
     const tweets: TweetData[] = []; // Initialize an empty array to hold all tweet elements
 
@@ -253,67 +265,58 @@ function SideBar({ jwt }: { jwt: string }) {
           ) : (
             <></>
           )}
-          {/* <Dialog> */}
-          <Tooltip delayDuration={300}>
-            <TooltipTrigger
-              className="anycontext-bg-transparent
+          <Dialog onOpenChange={(open) => open === true && fetchSpaces()}>
+            <Tooltip delayDuration={300}>
+              <TooltipTrigger
+                className="anycontext-bg-transparent
 									anycontext-border-none anycontext-m-0 anycontext-p-0
 								"
-            >
-              {/* <DialogTrigger asChild> */}
-              <button
-                onClick={() => {
-                  // return;
-                  sendUrlToAPI();
-                  setIsSendingData(true);
-                  setTimeout(() => {
-                    setIsSendingData(false);
-                    setSavedWebsites([...savedWebsites, window.location.href]);
-                  }, 1000);
-                }}
-                disabled={savedWebsites.includes(window.location.href)}
-                className="anycontext-open-button disabled:anycontext-opacity-30 anycontext-bg-transparent
-											anycontext-border-none anycontext-m-0 anycontext-p-0"
               >
-                {savedWebsites.includes(window.location.href) ? (
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    className="lucide lucide-file-check-2"
-                  >
-                    <path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4" />
-                    <path d="M14 2v4a2 2 0 0 0 2 2h4" />
-                    <path d="m3 15 2 2 4-4" />
-                  </svg>
-                ) : (
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                    className={`anycontext-w-5 anycontext-h-5 ${isSendingData ? "anycontext-animate-spin" : ""}`}
+                <DialogTrigger asChild>
+                  <button
+                    disabled={savedWebsites.includes(window.location.href)}
+                    className="anycontext-open-button disabled:anycontext-opacity-30 anycontext-bg-transparent
+											anycontext-border-none anycontext-m-0 anycontext-p-0"
                   >
-                    <path d="M15.98 1.804a1 1 0 0 0-1.96 0l-.24 1.192a1 1 0 0 1-.784.785l-1.192.238a1 1 0 0 0 0 1.962l1.192.238a1 1 0 0 1 .785.785l.238 1.192a1 1 0 0 0 1.962 0l.238-1.192a1 1 0 0 1 .785-.785l1.192-.238a1 1 0 0 0 0-1.962l-1.192-.238a1 1 0 0 1-.785-.785l-.238-1.192ZM6.949 5.684a1 1 0 0 0-1.898 0l-.683 2.051a1 1 0 0 1-.633.633l-2.051.683a1 1 0 0 0 0 1.898l2.051.684a1 1 0 0 1 .633.632l.683 2.051a1 1 0 0 0 1.898 0l.683-2.051a1 1 0 0 1 .633-.633l2.051-.683a1 1 0 0 0 0-1.898l-2.051-.683a1 1 0 0 1-.633-.633L6.95 5.684ZM13.949 13.684a1 1 0 0 0-1.898 0l-.184.551a1 1 0 0 1-.632.633l-.551.183a1 1 0 0 0 0 1.898l.551.183a1 1 0 0 1 .633.633l.183.551a1 1 0 0 0 1.898 0l.184-.551a1 1 0 0 1 .632-.633l.551-.183a1 1 0 0 0 0-1.898l-.551-.184a1 1 0 0 1-.633-.632l-.183-.551Z" />
-                  </svg>
-                )}
-              </button>
-              {/* </DialogTrigger> */}
-            </TooltipTrigger>
-            <TooltipContent className="anycontext-p-0" side="left">
-              <p className="anycontext-p-0 anycontext-m-0">
-                {savedWebsites.includes(window.location.href)
-                  ? "Added to memory"
-                  : "Add to memory"}
-              </p>
-            </TooltipContent>
-          </Tooltip>
-          {/* <DialogContent>
+                    {savedWebsites.includes(window.location.href) ? (
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        className="lucide lucide-file-check-2"
+                      >
+                        <path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4" />
+                        <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+                        <path d="m3 15 2 2 4-4" />
+                      </svg>
+                    ) : (
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                        className={`anycontext-w-5 anycontext-h-5 ${isSendingData ? "anycontext-animate-spin" : ""}`}
+                      >
+                        <path d="M15.98 1.804a1 1 0 0 0-1.96 0l-.24 1.192a1 1 0 0 1-.784.785l-1.192.238a1 1 0 0 0 0 1.962l1.192.238a1 1 0 0 1 .785.785l.238 1.192a1 1 0 0 0 1.962 0l.238-1.192a1 1 0 0 1 .785-.785l1.192-.238a1 1 0 0 0 0-1.962l-1.192-.238a1 1 0 0 1-.785-.785l-.238-1.192ZM6.949 5.684a1 1 0 0 0-1.898 0l-.683 2.051a1 1 0 0 1-.633.633l-2.051.683a1 1 0 0 0 0 1.898l2.051.684a1 1 0 0 1 .633.632l.683 2.051a1 1 0 0 0 1.898 0l.683-2.051a1 1 0 0 1 .633-.633l2.051-.683a1 1 0 0 0 0-1.898l-2.051-.683a1 1 0 0 1-.633-.633L6.95 5.684ZM13.949 13.684a1 1 0 0 0-1.898 0l-.184.551a1 1 0 0 1-.632.633l-.551.183a1 1 0 0 0 0 1.898l.551.183a1 1 0 0 1 .633.633l.183.551a1 1 0 0 0 1.898 0l.184-.551a1 1 0 0 1 .632-.633l.551-.183a1 1 0 0 0 0-1.898l-.551-.184a1 1 0 0 1-.633-.632l-.183-.551Z" />
+                      </svg>
+                    )}
+                  </button>
+                </DialogTrigger>
+              </TooltipTrigger>
+              <TooltipContent className="anycontext-p-0" side="left">
+                <p className="anycontext-p-0 anycontext-m-0">
+                  {savedWebsites.includes(window.location.href)
+                    ? "Added to memory"
+                    : "Add to memory"}
+                </p>
+              </TooltipContent>
+            </Tooltip>
+            <DialogContent>
               <DialogHeader>
                 <DialogTitle>Add to Memory</DialogTitle>
                 <DialogDescription>
@@ -322,27 +325,33 @@ function SideBar({ jwt }: { jwt: string }) {
               </DialogHeader>
 
               <FilterSpaces
+                loading={loading}
                 className="anycontext-mr-auto"
                 selectedSpaces={selectedSpaces}
                 setSelectedSpaces={setSelectedSpaces}
                 name={"Add to Spaces"}
-                spaces={[
-                  {
-                    name: "cool tech",
-                    id: 0,
-                  },
-                  {
-                    name: "cool libs",
-                    id: 1,
-                  },
-                ]}
+                spaces={spaces ?? []}
               />
               <DialogFooter className="anycontext-w-full anycontext-text-sm">
-                <DialogClose>Add</DialogClose>
+                <DialogClose
+                  onClick={() => {
+                    sendUrlToAPI(selectedSpaces);
+                    setIsSendingData(true);
+                    setTimeout(() => {
+                      setIsSendingData(false);
+                      setSavedWebsites([
+                        ...savedWebsites,
+                        window.location.href,
+                      ]);
+                    }, 1000);
+                  }}
+                >
+                  Add
+                </DialogClose>
                 <DialogClose>Cancel</DialogClose>
               </DialogFooter>
             </DialogContent>
-          </Dialog> */}
+          </Dialog>
         </div>
       </TooltipProvider>
     </>
diff --git a/apps/extension/src/background.ts b/apps/extension/src/background.ts
index 7e12bba4..2c67936b 100644
--- a/apps/extension/src/background.ts
+++ b/apps/extension/src/background.ts
@@ -1,4 +1,5 @@
 import { getEnv } from "./util";
+import { Space } from "./types/memory";
 
 const backendUrl =
   getEnv() === "development"
@@ -48,22 +49,51 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   } else if (request.type === "urlChange") {
     const content = request.content;
     const url = request.url;
-
-    (async () => {
-      chrome.storage.local.get(["jwt"], ({ jwt }) => {
+    const spaces = request.spaces(
+      // eslint-disable-next-line no-unexpected-multiline
+      async () => {
+        chrome.storage.local.get(["jwt"], ({ jwt }) => {
+          if (!jwt) {
+            console.error("No JWT found");
+            return;
+          }
+          fetch(`${backendUrl}/api/store`, {
+            method: "POST",
+            headers: {
+              Authorization: `Bearer ${jwt}`,
+            },
+            body: JSON.stringify({ pageContent: content, url, spaces }),
+          }).then((ers) => console.log(ers.status));
+        });
+      },
+    )();
+    return true;
+  } else if (request.type === "fetchSpaces") {
+    const run = () =>
+      chrome.storage.local.get(["jwt"], async ({ jwt }) => {
         if (!jwt) {
           console.error("No JWT found");
           return;
         }
-        fetch(`${backendUrl}/api/store`, {
-          method: "POST",
+        const resp = await fetch(`${backendUrl}/api/spaces`, {
           headers: {
             Authorization: `Bearer ${jwt}`,
           },
-          body: JSON.stringify({ pageContent: content, url }),
-        }).then((ers) => console.log(ers.status));
+        });
+
+        const data: {
+          message: "OK" | string;
+          data: Space[] | undefined;
+        } = await resp.json();
+
+        if (data.message === "OK" && data.data) {
+          sendResponse(data.data);
+        }
       });
-    })();
+
+    run();
+
+    return true;
   } else if (request.type === "queryApi") {
     const input = request.input;
     const jwt = request.jwt;
diff --git a/apps/extension/src/components/FilterCombobox.tsx b/apps/extension/src/components/FilterCombobox.tsx
index 5467655b..ae9c45ae 100644
--- a/apps/extension/src/components/FilterCombobox.tsx
+++ b/apps/extension/src/components/FilterCombobox.tsx
@@ -1,152 +1,91 @@
 import * as React from "react";
-import { Check, ChevronsUpDown, X } from "lucide-react";
-
-import { cn } from "../lib/utils";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "../components/ui/command";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "../components/ui/popover";
+import { PlusCircleIcon, X } from "lucide-react";
 import { Space } from "../types/memory";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "./ui/dropdown-menu";
+import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
 
 export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  side?: "top" | "bottom";
-  align?: "end" | "start" | "center";
-  onClose?: () => void;
   selectedSpaces: number[];
   setSelectedSpaces: (
     spaces: number[] | ((prev: number[]) => number[]),
   ) => void;
   name: string;
   spaces: Space[];
+  loading: boolean;
 }
 
 export function FilterSpaces({
-  className,
-  side = "bottom",
-  align = "center",
-  onClose,
+  loading,
   selectedSpaces,
   setSelectedSpaces,
-  name,
   spaces,
-  ...props
 }: Props) {
-  const [open, setOpen] = React.useState(false);
-
   console.log(selectedSpaces, spaces);
 
-  const sortedSpaces = spaces.sort(({ id: a }, { id: b }) =>
-    selectedSpaces.includes(a) && !selectedSpaces.includes(b)
-      ? -1
-      : selectedSpaces.includes(b) && !selectedSpaces.includes(a)
-        ? 1
-        : 0,
+  const filteredSpaces = spaces.filter((space) =>
+    selectedSpaces.includes(space.id),
+  );
+  const leftSpaces = spaces.filter(
+    (space) => !selectedSpaces.includes(space.id),
   );
 
-  React.useEffect(() => {
-    if (!open) {
-      onClose?.();
-    }
-  }, [open]);
+  if (loading) {
+    return "Loading...";
+  }
 
   return (
     <div className="anycontext-flex anycontext-flex-wrap anycontext-gap-1 anycontext-text-sm anycontext-">
-      {selectedSpaces.map((spaceid) => {
-        const space = spaces.find((s) => s.id === spaceid)!;
-        return <SpaceItem {...space} key={spaceid} />;
-      })}
+      {filteredSpaces.length < 1 && "Add to a space"}
+      {filteredSpaces.map((space) => (
+        <SpaceItem
+          {...space}
+          key={space.id}
+          // onRemove={() => setSelectedSpaces(prev => prev.filter(s => s !== space.id))}
+        />
+      ))}
+      {leftSpaces.length > 0 && (
+        <DropdownMenu>
+          <DropdownMenuTrigger className="anycontext-rounded-full">
+            <PlusCircleIcon
+              className="anycontext-w-5 anycontext-h-5 [--anycontext-icon-stroke:white] dark:[--anycontext-icon-stroke:black]"
+              stroke="var(--anycontext-icon-stroke)"
+              fill="currentColor"
+            />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            {leftSpaces.map((space) => (
+              <>
+                {loading && "Loading..."}
+                <DropdownMenuItem
+                  onClick={() =>
+                    setSelectedSpaces((prev) => [...prev, space.id])
+                  }
+                >
+                  {space.name}
+                </DropdownMenuItem>
+              </>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
     </div>
   );
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <button
-          type={undefined}
-          data-state-on={open}
-          className={cn(
-            "anycontext-combobox-button anycontext-w-fit",
-            className,
-          )}
-          {...props}
-        >
-          {name}
-          <ChevronsUpDown className="anycontext-h-4 anycontext-w-4" />
-          <div
-            data-state-on={selectedSpaces.length > 0}
-            className="on:anycontext-flex anycontext-text-rgray-11 anycontext-border-rgray-6 anycontext-bg-rgray-2 anycontext-absolute anycontext-left-0 anycontext-top-0 anycontext-hidden anycontext-aspect-[1] anycontext-h-4 anycontext-w-4 anycontext--translate-x-1/3 anycontext--translate-y-1/3 anycontext-items-center anycontext-justify-center anycontext-rounded-full anycontext-border anycontext-text-center anycontext-text-[9px]"
-          >
-            {selectedSpaces.length}
-          </div>
-        </button>
-      </PopoverTrigger>
-      <PopoverContent
-        onCloseAutoFocus={(e) => e.preventDefault()}
-        align={align}
-        side={side}
-        className="anycontext-w-[200px] anycontext-p-0"
-      >
-        <Command
-          filter={(val, search) =>
-            spaces
-              .find((s) => s.id.toString() === val)
-              ?.name.toLowerCase()
-              .includes(search.toLowerCase().trim())
-              ? 1
-              : 0
-          }
-        >
-          <CommandInput placeholder="Filter spaces..." />
-          <CommandList asChild>
-            <div>
-              <CommandEmpty>Nothing found</CommandEmpty>
-              <CommandGroup>
-                {sortedSpaces.map((space) => (
-                  <CommandItem
-                    key={space.id}
-                    value={space.id.toString()}
-                    onSelect={(val) => {
-                      setSelectedSpaces((prev: number[]) =>
-                        prev.includes(parseInt(val))
-                          ? prev.filter((v) => v !== parseInt(val))
-                          : [...prev, parseInt(val)],
-                      );
-                    }}
-                    asChild
-                  >
-                    <div className="anycontext-text-black/90 dark:anycontext-text-white/90">
-                      {space.name}
-                      <Check
-                        data-state-on={selectedSpaces.includes(space.id)}
-                        className={cn(
-                          "on:anycontext-opacity-100 anycontext-ml-auto anycontext-h-4 anycontext-w-4 anycontext-opacity-0",
-                        )}
-                      />
-                    </div>
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            </div>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
 }
 
 function SpaceItem({ name }: Space) {
   return (
     <div className="anycontext-flex anycontext-justify-center anycontext-items-center anycontext-gap-2 anycontext-p-1 anycontext-pl-2 anycontext-pr-3 anycontext-rounded-full anycontext-bg-black/5 dark:anycontext-bg-white/5 anycontext-border-white/20 dark:anycontext-border-black/20 border">
-      <button className="anycontext-flex hover:anycontext-bg-transparent anycontext-justify-center anycontext-scale-110 anycontext-items-center focus-visible:anycontext-outline-none anycontext-rounded-full anycontext-w-3 anycontext-bg-black/5 dark:anycontext-bg-white/5 anycontext-h-3 anycontext-text-transparent hover:anycontext-text-black dark:hover:anycontext-text-white">
+      <button
+        onClick={
+          // onRemove
+          (e) => e.stopPropagation()
+        }
+        className="anycontext-flex hover:anycontext-bg-transparent anycontext-justify-center anycontext-scale-110 anycontext-items-center focus-visible:anycontext-outline-none anycontext-rounded-full anycontext-w-3 anycontext-bg-black/5 dark:anycontext-bg-white/5 anycontext-h-3 anycontext-text-transparent hover:anycontext-text-black dark:hover:anycontext-text-white"
+      >
         <X className="anycontext-w-3 anycontext-h-3" />
       </button>
       {name}
diff --git a/apps/extension/src/components/ui/dropdown-menu.tsx b/apps/extension/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 00000000..fcc1edb2
--- /dev/null
+++ b/apps/extension/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,204 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "anycontext-flex anycontext-cursor-default anycontext-select-none anycontext-items-center anycontext-rounded-sm anycontext-px-2 anycontext-py-1.5 anycontext-text-sm anycontext-outline-none focus:anycontext-bg-stone-100 data-[state=open]:anycontext-bg-stone-100 dark:focus:anycontext-bg-stone-800 dark:data-[state=open]:anycontext-bg-stone-800",
+      inset && "anycontext-pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="anycontext-ml-auto anycontext-h-4 anycontext-w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "anycontext-z-50 anycontext-min-w-[8rem] anycontext-overflow-hidden anycontext-rounded-md anycontext-border anycontext-border-stone-200 anycontext-bg-white anycontext-p-1 anycontext-text-stone-950 anycontext-shadow-lg data-[state=open]:anycontext-animate-in data-[state=closed]:anycontext-animate-out data-[state=closed]:anycontext-fade-out-0 data-[state=open]:anycontext-fade-in-0 data-[state=closed]:anycontext-zoom-out-95 data-[state=open]:anycontext-zoom-in-95 data-[side=bottom]:anycontext-slide-in-from-top-2 data-[side=left]:anycontext-slide-in-from-right-2 data-[side=right]:anycontext-slide-in-from-left-2 data-[side=top]:anycontext-slide-in-from-bottom-2 dark:anycontext-border-stone-800 dark:anycontext-bg-stone-950 dark:anycontext-text-stone-50",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "anycontext-z-50 anycontext-min-w-[8rem] anycontext-overflow-hidden anycontext-rounded-md anycontext-border anycontext-border-stone-200 anycontext-bg-white anycontext-p-1 anycontext-text-stone-950 anycontext-shadow-md data-[state=open]:anycontext-animate-in data-[state=closed]:anycontext-animate-out data-[state=closed]:anycontext-fade-out-0 data-[state=open]:anycontext-fade-in-0 data-[state=closed]:anycontext-zoom-out-95 data-[state=open]:anycontext-zoom-in-95 data-[side=bottom]:anycontext-slide-in-from-top-2 data-[side=left]:anycontext-slide-in-from-right-2 data-[side=right]:anycontext-slide-in-from-left-2 data-[side=top]:anycontext-slide-in-from-bottom-2 dark:anycontext-border-stone-800 dark:anycontext-bg-stone-950 dark:anycontext-text-stone-50",
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "anycontext-relative anycontext-flex anycontext-cursor-default anycontext-select-none anycontext-items-center anycontext-rounded-sm anycontext-px-2 anycontext-py-1.5 anycontext-text-sm anycontext-outline-none anycontext-transition-colors focus:anycontext-bg-stone-100 focus:anycontext-text-stone-900 data-[disabled]:anycontext-pointer-events-none data-[disabled]:anycontext-opacity-50 dark:focus:anycontext-bg-stone-800 dark:focus:anycontext-text-stone-50",
+      inset && "anycontext-pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "anycontext-relative anycontext-flex anycontext-cursor-default anycontext-select-none anycontext-items-center anycontext-rounded-sm anycontext-py-1.5 anycontext-pl-8 anycontext-pr-2 anycontext-text-sm anycontext-outline-none anycontext-transition-colors focus:anycontext-bg-stone-100 focus:anycontext-text-stone-900 data-[disabled]:anycontext-pointer-events-none data-[disabled]:anycontext-opacity-50 dark:focus:anycontext-bg-stone-800 dark:focus:anycontext-text-stone-50",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="anycontext-absolute anycontext-left-2 anycontext-flex anycontext-h-3.5 anycontext-w-3.5 anycontext-items-center anycontext-justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="anycontext-h-4 anycontext-w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "anycontext-relative anycontext-flex anycontext-cursor-default anycontext-select-none anycontext-items-center anycontext-rounded-sm anycontext-py-1.5 anycontext-pl-8 anycontext-pr-2 anycontext-text-sm anycontext-outline-none anycontext-transition-colors focus:anycontext-bg-stone-100 focus:anycontext-text-stone-900 data-[disabled]:anycontext-pointer-events-none data-[disabled]:anycontext-opacity-50 dark:focus:anycontext-bg-stone-800 dark:focus:anycontext-text-stone-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="anycontext-absolute anycontext-left-2 anycontext-flex anycontext-h-3.5 anycontext-w-3.5 anycontext-items-center anycontext-justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="anycontext-h-2 anycontext-w-2 anycontext-fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "anycontext-px-2 anycontext-py-1.5 anycontext-text-sm anycontext-font-semibold",
+      inset && "anycontext-pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn(
+      "anycontext--mx-1 anycontext-my-1 anycontext-h-px anycontext-bg-stone-100 dark:anycontext-bg-stone-800",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "anycontext-ml-auto anycontext-text-xs anycontext-tracking-widest anycontext-opacity-60",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};