add modal

apps/web/src/components/Main.tsx

@@ -308,6 +308,7 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) {
             >
               <div className="text-rgray-11/70 flex h-full w-fit items-center justify-center pl-0 md:w-full md:p-2">
                 <FilterCombobox
+                  name={"Filter"}
                   onClose={() => {
                     textArea.current?.querySelector("textarea")?.focus();
                   }}
@@ -383,6 +384,7 @@ export function Chat({
       >
         <div className="animate-from-top fixed bottom-10 mt-auto flex w-[50%] flex-col items-start justify-center gap-2">
           <FilterCombobox
+            name={"Filter"}
             onClose={() => {
               textArea.current?.querySelector("textarea")?.focus();
             }}

apps/web/src/components/Sidebar/AddMemoryDialog.tsx

@@ -10,37 +10,51 @@ import { Input } from "../ui/input";
 import { Label } from "../ui/label";
 import { Markdown } from "tiptap-markdown";
 import { useEffect, useRef, useState } from "react";
+import { FilterCombobox } from "./FilterCombobox";
 
 export function AddMemoryPage() {
+  const [selectedSpacesId, setSelectedSpacesId] = useState<number[]>([]);
+
   return (
-    <>
+    <div className="md:w-[40vw]">
       <DialogHeader>
         <DialogTitle>Add a web page to memory</DialogTitle>
         <DialogDescription>
           This will take you the web page you are trying to add to memory, where
           the extension will save the page to memory
         </DialogDescription>
       </DialogHeader>
-      <Label className="mt-5">URL</Label>
+      <Label className="mt-5 block">URL</Label>
       <Input
         placeholder="Enter the URL of the page"
         type="url"
         data-modal-autofocus
         className="bg-rgray-4 mt-2 w-full"
       />
       <DialogFooter>
-        <DialogClose className="bg-rgray-4 hover:bg-rgray-5 focus-visible:bg-rgray-5 focus-visible:ring-rgray-7 rounded-md px-4 py-2 ring-transparent transition focus-visible:outline-none focus-visible:ring-2">
+        <FilterCombobox
+          selectedSpaces={selectedSpacesId}
+          setSelectedSpaces={setSelectedSpacesId}
+          className="hover:bg-rgray-5 mr-auto bg-white/5"
+          name={"Spaces"}
+        />
+        <DialogClose
+          type={undefined}
+          className="bg-rgray-4 hover:bg-rgray-5 focus-visible:bg-rgray-5 focus-visible:ring-rgray-7 rounded-md px-4 py-2 ring-transparent transition focus-visible:outline-none focus-visible:ring-2"
+        >
           Add
         </DialogClose>
         <DialogClose className="hover:bg-rgray-4 focus-visible:bg-rgray-4 focus-visible:ring-rgray-7 rounded-md px-3 py-2 ring-transparent transition focus-visible:outline-none focus-visible:ring-2">
           Cancel
         </DialogClose>
       </DialogFooter>
-    </>
+    </div>
   );
 }
 
 export function NoteAddPage({ closeDialog }: { closeDialog: () => void }) {
+  const [selectedSpacesId, setSelectedSpacesId] = useState<number[]>([]);
+
   const inputRef = useRef<HTMLInputElement>(null);
   const [name, setName] = useState("");
   const [content, setContent] = useState("");
@@ -69,7 +83,7 @@ export function NoteAddPage({ closeDialog }: { closeDialog: () => void }) {
   }
 
   return (
-    <>
+    <div>
       <Input
         ref={inputRef}
         data-error="false"
@@ -90,6 +104,12 @@ export function NoteAddPage({ closeDialog }: { closeDialog: () => void }) {
         className="novel-editor bg-rgray-4 border-rgray-7 dark mt-5 max-h-[60vh] min-h-[40vh] w-[50vw] overflow-y-auto rounded-lg border [&>div>div]:p-5"
       />
       <DialogFooter>
+        <FilterCombobox
+          selectedSpaces={selectedSpacesId}
+          setSelectedSpaces={setSelectedSpacesId}
+          className="hover:bg-rgray-5 mr-auto bg-white/5"
+          name={"Spaces"}
+        />
         <button
           onClick={() => {
             check();
@@ -105,6 +125,6 @@ export function NoteAddPage({ closeDialog }: { closeDialog: () => void }) {
           Cancel
         </DialogClose>
       </DialogFooter>
-    </>
+    </div>
   );
 }

apps/web/src/components/Sidebar/FilterCombobox.tsx

@@ -30,6 +30,7 @@ export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   setSelectedSpaces: (
     spaces: number[] | ((prev: number[]) => number[]),
   ) => void;
+  name: string;
 }
 
 export function FilterCombobox({
@@ -39,10 +40,10 @@ export function FilterCombobox({
   onClose,
   selectedSpaces,
   setSelectedSpaces,
+  name,
   ...props
 }: Props) {
-  const { spaces, addSpace } = useMemory();
-
+  const { spaces } = useMemory();
   const [open, setOpen] = React.useState(false);
 
   const sortedSpaces = spaces.sort(({ id: a }, { id: b }) =>
@@ -65,6 +66,7 @@ export function FilterCombobox({
         <Popover open={open} onOpenChange={setOpen}>
           <PopoverTrigger asChild>
             <button
+              type={undefined}
               data-state-on={open}
               className={cn(
                 "text-rgray-11/70 on:bg-rgray-3 focus-visible:ring-rgray-8 hover:bg-rgray-3 relative flex items-center justify-center gap-1 rounded-md px-3 py-1.5 ring-2 ring-transparent focus-visible:outline-none",
@@ -73,7 +75,7 @@ export function FilterCombobox({
               {...props}
             >
               <SpaceIcon className="mr-1 h-5 w-5" />
-              Filter
+              {name}
               <ChevronsUpDown className="h-4 w-4" />
               <div
                 data-state-on={selectedSpaces.length > 0}

apps/web/src/components/Sidebar/MemoriesBar.tsx

@@ -339,9 +339,12 @@ export function AddMemoryModal({
         }}
         className="w-max max-w-[auto]"
       >
-        {type === "page" && <AddMemoryPage />}
-        {type === "note" && (
+        {type === "page" ? (
+          <AddMemoryPage />
+        ) : type === "note" ? (
           <NoteAddPage closeDialog={() => setIsDialogOpen(false)} />
+        ) : (
+          <></>
         )}
       </DialogContent>
     </Dialog>