From e6fc9c42278d979b155fd71b1f8f13e72c990208 Mon Sep 17 00:00:00 2001
From: Yash <yashverma30115@gmail.com>
Date: Thu, 11 Apr 2024 01:34:49 +0000
Subject: ok

---
 .../web/src/components/Sidebar/AddMemoryDialog.tsx |  39 +++++
 apps/web/src/components/Sidebar/MemoriesBar.tsx    | 174 ++++++++++-----------
 2 files changed, 120 insertions(+), 93 deletions(-)
 create mode 100644 apps/web/src/components/Sidebar/AddMemoryDialog.tsx

(limited to 'apps/web/src/components/Sidebar')

diff --git a/apps/web/src/components/Sidebar/AddMemoryDialog.tsx b/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
new file mode 100644
index 00000000..1bd4b688
--- /dev/null
+++ b/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
@@ -0,0 +1,39 @@
+import { useEffect, useRef } from "react";
+import {
+  DialogClose,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+import { Input } from "../ui/input";
+import { Label } from "../ui/label";
+
+export default function AddMemoryPage() {
+  return (
+    <>
+      <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>
+      <Input
+        placeholder="Enter the URL of the page"
+        type="url"
+        data-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">
+          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>
+    </>
+  );
+}
diff --git a/apps/web/src/components/Sidebar/MemoriesBar.tsx b/apps/web/src/components/Sidebar/MemoriesBar.tsx
index d7d8b5b5..779dea25 100644
--- a/apps/web/src/components/Sidebar/MemoriesBar.tsx
+++ b/apps/web/src/components/Sidebar/MemoriesBar.tsx
@@ -1,10 +1,13 @@
+import { Editor } from "novel";
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import {
   MemoryWithImage,
   MemoryWithImages3,
   MemoryWithImages2,
 } from "@/assets/MemoryWithImages";
-import { type CollectedSpaces } from "../../../types/memory";
+import { type CollectedSpaces }
+
+from "../../../types/memory";
 import { Input, InputWithIcon } from "../ui/input";
 import {
   ArrowUpRight,
@@ -22,7 +25,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Variant, useAnimate, motion } from "framer-motion";
 import { useMemory } from "@/contexts/MemoryContext";
 import { SpaceIcon } from "@/assets/Memories";
@@ -38,6 +41,8 @@ import {
 import { Label } from "../ui/label";
 import useViewport from "@/hooks/useViewport";
 import useTouchHold from "@/hooks/useTouchHold";
+import { DialogTrigger } from "@radix-ui/react-dialog";
+import AddMemoryPage from "./AddMemoryDialog";
 
 export function MemoriesBar() {
   const [parent, enableAnimations] = useAutoAnimate();
@@ -59,38 +64,43 @@ export function MemoriesBar() {
         />
       </div>
       <div className="mt-2 flex w-full px-8">
-        <DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
-          <DropdownMenuTrigger asChild>
-            <button className="focus-visible:bg-rgray-4 focus-visible:ring-rgray-7 hover:bg-rgray-4 ml-auto flex items-center justify-center rounded-md px-3 py-2 transition focus-visible:outline-none focus-visible:ring-2">
-              <Plus className="mr-2 h-5 w-5" />
-              Add
-            </button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <DropdownMenuItem
-              onClick={() => {
-                setIsDropdownOpen(false);
-                setAddMemoryState("page");
-              }}
-            >
-              <Sparkles className="mr-2 h-4 w-4" />
-              Page to Memory
-            </DropdownMenuItem>
-            <DropdownMenuItem>
-              <Text className="mr-2 h-4 w-4" />
-              Note
-            </DropdownMenuItem>
-            <DropdownMenuItem>
-              <SpaceIcon className="mr-2 h-4 w-4" />
-              Space
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+        <AddMemoryModal isOpen={isDropdownOpen} type={addMemoryState}>
+          <DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
+            <DropdownMenuTrigger asChild>
+              <button className="focus-visible:bg-rgray-4 focus-visible:ring-rgray-7 hover:bg-rgray-4 ml-auto flex items-center justify-center rounded-md px-3 py-2 transition focus-visible:outline-none focus-visible:ring-2">
+                <Plus className="mr-2 h-5 w-5" />
+                Add
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent onCloseAutoFocus={(e) => e.preventDefault()}>
+              <DialogTrigger className="block w-full">
+                <DropdownMenuItem
+                  onClick={() => {
+                    setAddMemoryState("page");
+                  }}
+                >
+                  <Sparkles className="mr-2 h-4 w-4" />
+                  Page to Memory
+                </DropdownMenuItem>
+              </DialogTrigger>
+              <DialogTrigger className="block w-full">
+                <DropdownMenuItem
+                  onClick={() => {
+                    setAddMemoryState("note");
+                  }}
+                >
+                  <Text className="mr-2 h-4 w-4" />
+                  Note
+                </DropdownMenuItem>
+              </DialogTrigger>
+              <DropdownMenuItem>
+                <SpaceIcon className="mr-2 h-4 w-4" />
+                Space
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </AddMemoryModal>
       </div>
-      <AddMemoryModal
-        state={addMemoryState}
-        onStateChange={setAddMemoryState}
-      />
       <div
         ref={parent}
         className="grid w-full grid-flow-row grid-cols-3 gap-1 px-2 py-5"
@@ -295,69 +305,47 @@ export function SpaceMoreButton({
 }
 
 export function AddMemoryModal({
-  state,
-  onStateChange,
+  type,
+  children,
+  isOpen,
 }: {
-  state: "page" | "note" | "space" | null;
-  onStateChange: (state: "page" | "note" | "space" | null) => void;
+  type: "page" | "note" | "space" | null;
+  children?: React.ReactNode | React.ReactNode[];
+  isOpen: boolean;
 }) {
   return (
-    <>
-      <Dialog
-        open={state === "page"}
-        onOpenChange={(open) => onStateChange(open ? "page" : null)}
+    <Dialog>
+      {children}
+      <DialogContent
+        onOpenAutoFocus={(e) => {
+          e.preventDefault();
+          (
+            document.querySelector("[data-autofocus]") as
+              | HTMLInputElement
+              | undefined
+          )?.focus();
+        }}
       >
-        <DialogContent>
-          <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>
-          <Input
-            autoFocus
-            placeholder="Enter the URL of the page"
-            type="url"
-            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">
-              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>
-        </DialogContent>
-      </Dialog>
-      <Dialog open={state === "note"}>
-        <DialogContent>
-          <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>
-          <Input
-            autoFocus
-            placeholder="Enter the URL of the page"
-            type="url"
-            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">
-              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>
-        </DialogContent>
-      </Dialog>
-    </>
+        {type === "page" && <AddMemoryPage />}
+        {type === "note" && (
+          <>
+            <Input
+              className="w-full border-none p-0 text-xl ring-0 placeholder:text-white/30 focus-visible:ring-0"
+              placeholder="Name of the note"
+              data-autofocus
+            />
+            <Editor />
+            <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">
+                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>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
   );
 }
-- 
cgit v1.2.3


From 9220d5f2431ed4361adc4f69e7d77a44d5794fff Mon Sep 17 00:00:00 2001
From: Dhravya <dhravyashah@gmail.com>
Date: Wed, 10 Apr 2024 18:57:45 -0700
Subject: some branding attempts

---
 apps/web/src/components/Sidebar/index.tsx | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

(limited to 'apps/web/src/components/Sidebar')

diff --git a/apps/web/src/components/Sidebar/index.tsx b/apps/web/src/components/Sidebar/index.tsx
index 965455e6..9e6bdcce 100644
--- a/apps/web/src/components/Sidebar/index.tsx
+++ b/apps/web/src/components/Sidebar/index.tsx
@@ -8,11 +8,14 @@ import { Bin } from "@/assets/Bin";
 import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
 import { useSession } from "next-auth/react";
 import MessagePoster from "@/app/MessagePoster";
+import Image from "next/image";
+import WordMark from "../WordMark";
 
 export type MenuItem = {
   icon: React.ReactNode | React.ReactNode[];
   label: string;
   content?: React.ReactNode;
+  labelDisplay?: React.ReactNode;
 };
 
 export default function Sidebar({
@@ -73,7 +76,25 @@ export default function Sidebar({
   return (
     <>
       <div className="relative hidden h-screen max-h-screen w-max flex-col items-center text-sm font-light md:flex">
-        <div className="bg-rgray-2 border-r-rgray-6 relative z-[50] flex h-full w-full flex-col items-center justify-center border-r px-2 py-5 ">
+        <div className="bg-rgray-3 border-r-rgray-6 relative z-[50] flex h-full w-full flex-col items-center justify-center border-r px-2 py-5 ">
+          <MenuItem
+            item={{
+              label: "Smort",
+              icon: (
+                <Image
+                  className="rounded-md"
+                  src="/icons/logo_without_bg.png"
+                  alt="Smort logo"
+                  width={50}
+                  height={50}
+                />
+              ),
+              labelDisplay: <WordMark />,
+            }}
+            selectedItem={selectedItem}
+            setSelectedItem={setSelectedItem}
+          />
+
           <MenuItem
             item={{
               label: "Memories",
@@ -131,7 +152,7 @@ export default function Sidebar({
 }
 
 const MenuItem = ({
-  item: { icon, label },
+  item: { icon, label, labelDisplay },
   selectedItem,
   setSelectedItem,
   ...props
@@ -147,7 +168,7 @@ const MenuItem = ({
     {...props}
   >
     {icon}
-    <span className="">{label}</span>
+    <span className="">{labelDisplay ?? label}</span>
   </button>
 );
 
-- 
cgit v1.2.3


From 4a90aaabf3fd41754b990f50ef4cbfa03723b0a8 Mon Sep 17 00:00:00 2001
From: Yash <yashverma30115@gmail.com>
Date: Thu, 11 Apr 2024 02:22:33 +0000
Subject: novel editor

---
 .../web/src/components/Sidebar/AddMemoryDialog.tsx | 31 ++++++++++++++--
 apps/web/src/components/Sidebar/MemoriesBar.tsx    | 42 ++++++++++------------
 2 files changed, 47 insertions(+), 26 deletions(-)

(limited to 'apps/web/src/components/Sidebar')

diff --git a/apps/web/src/components/Sidebar/AddMemoryDialog.tsx b/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
index 1bd4b688..5a1d92f0 100644
--- a/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
+++ b/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { Editor } from "novel";
 import {
   DialogClose,
   DialogDescription,
@@ -8,8 +8,9 @@ import {
 } from "../ui/dialog";
 import { Input } from "../ui/input";
 import { Label } from "../ui/label";
+import { useRef } from "react";
 
-export default function AddMemoryPage() {
+export function AddMemoryPage() {
   return (
     <>
       <DialogHeader>
@@ -23,7 +24,7 @@ export default function AddMemoryPage() {
       <Input
         placeholder="Enter the URL of the page"
         type="url"
-        data-autofocus
+        data-modal-autofocus
         className="bg-rgray-4 mt-2 w-full"
       />
       <DialogFooter>
@@ -37,3 +38,27 @@ export default function AddMemoryPage() {
     </>
   );
 }
+
+export function NoteAddPage() {
+  return (
+    <>
+      <Input
+        className="w-full border-none p-0 text-xl ring-0 placeholder:text-white/30 focus-visible:ring-0"
+        placeholder="Name of the note"
+        data-modal-autofocus
+      />
+      <Editor
+        disableLocalStorage
+        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>
+        <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">
+          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>
+    </>
+  );
+}
diff --git a/apps/web/src/components/Sidebar/MemoriesBar.tsx b/apps/web/src/components/Sidebar/MemoriesBar.tsx
index 779dea25..83984233 100644
--- a/apps/web/src/components/Sidebar/MemoriesBar.tsx
+++ b/apps/web/src/components/Sidebar/MemoriesBar.tsx
@@ -5,9 +5,7 @@ import {
   MemoryWithImages3,
   MemoryWithImages2,
 } from "@/assets/MemoryWithImages";
-import { type CollectedSpaces }
-
-from "../../../types/memory";
+import { type CollectedSpaces } from "../../../types/memory";
 import { Input, InputWithIcon } from "../ui/input";
 import {
   ArrowUpRight,
@@ -42,7 +40,7 @@ import { Label } from "../ui/label";
 import useViewport from "@/hooks/useViewport";
 import useTouchHold from "@/hooks/useTouchHold";
 import { DialogTrigger } from "@radix-ui/react-dialog";
-import AddMemoryPage from "./AddMemoryDialog";
+import { AddMemoryPage, NoteAddPage } from "./AddMemoryDialog";
 
 export function MemoriesBar() {
   const [parent, enableAnimations] = useAutoAnimate();
@@ -319,32 +317,30 @@ export function AddMemoryModal({
       <DialogContent
         onOpenAutoFocus={(e) => {
           e.preventDefault();
+          const novel = document.querySelector('[contenteditable="true"]') as
+            | HTMLDivElement
+            | undefined;
+          if (novel) {
+            novel.autofocus = false;
+            novel.onfocus = () => {
+              (
+                document.querySelector("[data-modal-autofocus]") as
+                  | HTMLInputElement
+                  | undefined
+              )?.focus();
+              novel.onfocus = null;
+            };
+          }
           (
-            document.querySelector("[data-autofocus]") as
+            document.querySelector("[data-modal-autofocus]") as
               | HTMLInputElement
               | undefined
           )?.focus();
         }}
+        className="w-max max-w-[auto]"
       >
         {type === "page" && <AddMemoryPage />}
-        {type === "note" && (
-          <>
-            <Input
-              className="w-full border-none p-0 text-xl ring-0 placeholder:text-white/30 focus-visible:ring-0"
-              placeholder="Name of the note"
-              data-autofocus
-            />
-            <Editor />
-            <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">
-                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>
-          </>
-        )}
+        {type === "note" && <NoteAddPage />}
       </DialogContent>
     </Dialog>
   );
-- 
cgit v1.2.3


From efe6c946cbf95d914cddbbbfa383a62455c3957a Mon Sep 17 00:00:00 2001
From: Dhravya <dhravyashah@gmail.com>
Date: Wed, 10 Apr 2024 21:40:21 -0700
Subject: save user ID with url to ensure that same website can be saved by
 users

---
 apps/web/src/components/Sidebar/index.tsx | 26 ++++++++------------------
 1 file changed, 8 insertions(+), 18 deletions(-)

(limited to 'apps/web/src/components/Sidebar')

diff --git a/apps/web/src/components/Sidebar/index.tsx b/apps/web/src/components/Sidebar/index.tsx
index 9e6bdcce..568aa3dd 100644
--- a/apps/web/src/components/Sidebar/index.tsx
+++ b/apps/web/src/components/Sidebar/index.tsx
@@ -77,24 +77,16 @@ export default function Sidebar({
     <>
       <div className="relative hidden h-screen max-h-screen w-max flex-col items-center text-sm font-light md:flex">
         <div className="bg-rgray-3 border-r-rgray-6 relative z-[50] flex h-full w-full flex-col items-center justify-center border-r px-2 py-5 ">
-          <MenuItem
-            item={{
-              label: "Smort",
-              icon: (
-                <Image
-                  className="rounded-md"
-                  src="/icons/logo_without_bg.png"
-                  alt="Smort logo"
-                  width={50}
-                  height={50}
-                />
-              ),
-              labelDisplay: <WordMark />,
-            }}
-            selectedItem={selectedItem}
-            setSelectedItem={setSelectedItem}
+          <Image
+            className="mb-4 rounded-md"
+            src="/icons/logo_bw_without_bg.png"
+            alt="Smort logo"
+            width={50}
+            height={50}
           />
 
+          <div className="bg-rgray-6 mb-8 h-[1px] w-full" />
+
           <MenuItem
             item={{
               label: "Memories",
@@ -104,9 +96,7 @@ export default function Sidebar({
             selectedItem={selectedItem}
             setSelectedItem={setSelectedItem}
           />
-
           <div className="mt-auto" />
-
           <MenuItem
             item={{
               label: "Trash",
-- 
cgit v1.2.3


From b425476cc495c561988a789eb9d94e3d947735be Mon Sep 17 00:00:00 2001
From: Yash <yashverma30115@gmail.com>
Date: Thu, 11 Apr 2024 05:57:42 +0000
Subject: notess

---
 .../web/src/components/Sidebar/AddMemoryDialog.tsx | 60 +++++++++++++++++++---
 apps/web/src/components/Sidebar/MemoriesBar.tsx    | 12 +++--
 apps/web/src/components/Sidebar/index.tsx          | 12 -----
 3 files changed, 60 insertions(+), 24 deletions(-)

(limited to 'apps/web/src/components/Sidebar')

diff --git a/apps/web/src/components/Sidebar/AddMemoryDialog.tsx b/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
index 5a1d92f0..784976b4 100644
--- a/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
+++ b/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
@@ -8,7 +8,8 @@ import {
 } from "../ui/dialog";
 import { Input } from "../ui/input";
 import { Label } from "../ui/label";
-import { useRef } from "react";
+import { Markdown } from "tiptap-markdown";
+import { useEffect, useRef, useState } from "react";
 
 export function AddMemoryPage() {
   return (
@@ -39,23 +40,68 @@ export function AddMemoryPage() {
   );
 }
 
-export function NoteAddPage() {
+export function NoteAddPage({ closeDialog }: { closeDialog: () => void }) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [name, setName] = useState("");
+  const [content, setContent] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  function check() {
+    const data = {
+      name: name.trim(),
+      content,
+    };
+    console.log(name);
+    if (!data.name || data.name.length < 1) {
+      if (!inputRef.current) {
+        alert("Please enter a name for the note");
+        return;
+      }
+      inputRef.current.value = "";
+      inputRef.current.placeholder = "Please enter a title for the note";
+      inputRef.current.dataset["error"] = "true";
+      setTimeout(() => {
+        inputRef.current!.placeholder = "Title of the note";
+        inputRef.current!.dataset["error"] = "false";
+      }, 500);
+      inputRef.current.focus();
+    }
+  }
+
   return (
     <>
       <Input
-        className="w-full border-none p-0 text-xl ring-0 placeholder:text-white/30 focus-visible:ring-0"
-        placeholder="Name of the note"
+        ref={inputRef}
+        data-error="false"
+        className="w-full border-none p-0 text-xl ring-0 placeholder:text-white/30 placeholder:transition placeholder:duration-200 focus-visible:ring-0 data-[error=true]:placeholder:text-red-400"
+        placeholder="Title of the note"
         data-modal-autofocus
+        value={name}
+        onChange={(e) => setName(e.target.value)}
       />
       <Editor
         disableLocalStorage
+        defaultValue={""}
+        onUpdate={(editor) => {
+          if (!editor) return;
+          setContent(editor.storage.markdown.getMarkdown());
+        }}
+        extensions={[Markdown]}
         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>
-        <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">
+        <button
+          onClick={() => {
+            check();
+          }}
+          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">
+        </button>
+        <DialogClose
+          type={undefined}
+          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>
diff --git a/apps/web/src/components/Sidebar/MemoriesBar.tsx b/apps/web/src/components/Sidebar/MemoriesBar.tsx
index 83984233..92b1e210 100644
--- a/apps/web/src/components/Sidebar/MemoriesBar.tsx
+++ b/apps/web/src/components/Sidebar/MemoriesBar.tsx
@@ -62,7 +62,7 @@ export function MemoriesBar() {
         />
       </div>
       <div className="mt-2 flex w-full px-8">
-        <AddMemoryModal isOpen={isDropdownOpen} type={addMemoryState}>
+        <AddMemoryModal type={addMemoryState}>
           <DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
             <DropdownMenuTrigger asChild>
               <button className="focus-visible:bg-rgray-4 focus-visible:ring-rgray-7 hover:bg-rgray-4 ml-auto flex items-center justify-center rounded-md px-3 py-2 transition focus-visible:outline-none focus-visible:ring-2">
@@ -305,14 +305,14 @@ export function SpaceMoreButton({
 export function AddMemoryModal({
   type,
   children,
-  isOpen,
 }: {
   type: "page" | "note" | "space" | null;
   children?: React.ReactNode | React.ReactNode[];
-  isOpen: boolean;
 }) {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
   return (
-    <Dialog>
+    <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
       {children}
       <DialogContent
         onOpenAutoFocus={(e) => {
@@ -340,7 +340,9 @@ export function AddMemoryModal({
         className="w-max max-w-[auto]"
       >
         {type === "page" && <AddMemoryPage />}
-        {type === "note" && <NoteAddPage />}
+        {type === "note" && (
+          <NoteAddPage closeDialog={() => setIsDialogOpen(false)} />
+        )}
       </DialogContent>
     </Dialog>
   );
diff --git a/apps/web/src/components/Sidebar/index.tsx b/apps/web/src/components/Sidebar/index.tsx
index 568aa3dd..1487e113 100644
--- a/apps/web/src/components/Sidebar/index.tsx
+++ b/apps/web/src/components/Sidebar/index.tsx
@@ -8,8 +8,6 @@ import { Bin } from "@/assets/Bin";
 import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
 import { useSession } from "next-auth/react";
 import MessagePoster from "@/app/MessagePoster";
-import Image from "next/image";
-import WordMark from "../WordMark";
 
 export type MenuItem = {
   icon: React.ReactNode | React.ReactNode[];
@@ -77,16 +75,6 @@ export default function Sidebar({
     <>
       <div className="relative hidden h-screen max-h-screen w-max flex-col items-center text-sm font-light md:flex">
         <div className="bg-rgray-3 border-r-rgray-6 relative z-[50] flex h-full w-full flex-col items-center justify-center border-r px-2 py-5 ">
-          <Image
-            className="mb-4 rounded-md"
-            src="/icons/logo_bw_without_bg.png"
-            alt="Smort logo"
-            width={50}
-            height={50}
-          />
-
-          <div className="bg-rgray-6 mb-8 h-[1px] w-full" />
-
           <MenuItem
             item={{
               label: "Memories",
-- 
cgit v1.2.3


From 53c60283153b98b3b713d3163d208c9e14262b94 Mon Sep 17 00:00:00 2001
From: Yash <yashverma30115@gmail.com>
Date: Thu, 11 Apr 2024 06:20:22 +0000
Subject: add modal

---
 .../web/src/components/Sidebar/AddMemoryDialog.tsx | 32 ++++++++++++++++++----
 apps/web/src/components/Sidebar/FilterCombobox.tsx |  8 ++++--
 apps/web/src/components/Sidebar/MemoriesBar.tsx    |  7 +++--
 3 files changed, 36 insertions(+), 11 deletions(-)

(limited to 'apps/web/src/components/Sidebar')

diff --git a/apps/web/src/components/Sidebar/AddMemoryDialog.tsx b/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
index 784976b4..ace930a6 100644
--- a/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
+++ b/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
@@ -10,10 +10,13 @@ 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>
@@ -21,7 +24,7 @@ export function AddMemoryPage() {
           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"
@@ -29,18 +32,29 @@ export function AddMemoryPage() {
         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>
   );
 }
diff --git a/apps/web/src/components/Sidebar/FilterCombobox.tsx b/apps/web/src/components/Sidebar/FilterCombobox.tsx
index a8e3a1e5..04ff0324 100644
--- a/apps/web/src/components/Sidebar/FilterCombobox.tsx
+++ b/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}
diff --git a/apps/web/src/components/Sidebar/MemoriesBar.tsx b/apps/web/src/components/Sidebar/MemoriesBar.tsx
index 92b1e210..3d7bd8b9 100644
--- a/apps/web/src/components/Sidebar/MemoriesBar.tsx
+++ b/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>
-- 
cgit v1.2.3


From 257e355ae3b47e9de37f9686b400fa598904c6cb Mon Sep 17 00:00:00 2001
From: Yash <yashverma30115@gmail.com>
Date: Thu, 11 Apr 2024 06:24:56 +0000
Subject: new schema

---
 .../web/src/components/Sidebar/AddMemoryDialog.tsx | 77 ++++++++++++++++++++++
 1 file changed, 77 insertions(+)

(limited to 'apps/web/src/components/Sidebar')

diff --git a/apps/web/src/components/Sidebar/AddMemoryDialog.tsx b/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
index ace930a6..aa86966f 100644
--- a/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
+++ b/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
@@ -128,3 +128,80 @@ export function NoteAddPage({ closeDialog }: { closeDialog: () => void }) {
     </div>
   );
 }
+
+export function SpaceAddPage({ closeDialog }: { closeDialog: () => void }) {
+  const [selectedSpacesId, setSelectedSpacesId] = useState<number[]>([]);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [name, setName] = useState("");
+  const [content, setContent] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  function check() {
+    const data = {
+      name: name.trim(),
+      content,
+    };
+    console.log(name);
+    if (!data.name || data.name.length < 1) {
+      if (!inputRef.current) {
+        alert("Please enter a name for the note");
+        return;
+      }
+      inputRef.current.value = "";
+      inputRef.current.placeholder = "Please enter a title for the note";
+      inputRef.current.dataset["error"] = "true";
+      setTimeout(() => {
+        inputRef.current!.placeholder = "Title of the note";
+        inputRef.current!.dataset["error"] = "false";
+      }, 500);
+      inputRef.current.focus();
+    }
+  }
+
+  return (
+    <div>
+      <Input
+        ref={inputRef}
+        data-error="false"
+        className="w-full border-none p-0 text-xl ring-0 placeholder:text-white/30 placeholder:transition placeholder:duration-200 focus-visible:ring-0 data-[error=true]:placeholder:text-red-400"
+        placeholder="Title of the note"
+        data-modal-autofocus
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+      />
+      <Editor
+        disableLocalStorage
+        defaultValue={""}
+        onUpdate={(editor) => {
+          if (!editor) return;
+          setContent(editor.storage.markdown.getMarkdown());
+        }}
+        extensions={[Markdown]}
+        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();
+          }}
+          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
+        </button>
+        <DialogClose
+          type={undefined}
+          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>
+  );
+}
-- 
cgit v1.2.3


From bf99ee97f7c4d7580829d074816ebe0d32316d92 Mon Sep 17 00:00:00 2001
From: Yash <yashverma30115@gmail.com>
Date: Thu, 11 Apr 2024 11:02:24 +0000
Subject: ok

---
 .../web/src/components/Sidebar/AddMemoryDialog.tsx | 100 +++++++++--------
 apps/web/src/components/Sidebar/FilterCombobox.tsx | 119 ++++++++++++++++++++-
 apps/web/src/components/Sidebar/MemoriesBar.tsx    |  18 +++-
 3 files changed, 184 insertions(+), 53 deletions(-)

(limited to 'apps/web/src/components/Sidebar')

diff --git a/apps/web/src/components/Sidebar/AddMemoryDialog.tsx b/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
index aa86966f..886507ff 100644
--- a/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
+++ b/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
@@ -10,13 +10,17 @@ 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";
+import { FilterSpaces } from "./FilterCombobox";
+import { useMemory } from "@/contexts/MemoryContext";
 
 export function AddMemoryPage() {
+  const { addMemory } = useMemory();
+
+  const [url, setUrl] = useState("");
   const [selectedSpacesId, setSelectedSpacesId] = useState<number[]>([]);
 
   return (
-    <div className="md:w-[40vw]">
+    <form className="md:w-[40vw]">
       <DialogHeader>
         <DialogTitle>Add a web page to memory</DialogTitle>
         <DialogDescription>
@@ -30,25 +34,41 @@ export function AddMemoryPage() {
         type="url"
         data-modal-autofocus
         className="bg-rgray-4 mt-2 w-full"
+        value={url}
+        onChange={(e) => setUrl(e.target.value)}
       />
       <DialogFooter>
-        <FilterCombobox
+        <FilterSpaces
           selectedSpaces={selectedSpacesId}
           setSelectedSpaces={setSelectedSpacesId}
           className="hover:bg-rgray-5 mr-auto bg-white/5"
           name={"Spaces"}
         />
-        <DialogClose
-          type={undefined}
+        <button
+          type={"submit"}
+          onClick={async () => {
+            // @Dhravya this is adding a memory with insufficient information fix pls
+            await addMemory(
+              {
+                title: url,
+                content: "",
+                type: "page",
+                url: url,
+                image: "/icons/logo_without_bg.png",
+                savedAt: new Date(),
+              },
+              selectedSpacesId,
+            );
+          }}
           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>
+        </button>
         <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>
+    </form>
   );
 }
 
@@ -60,16 +80,15 @@ export function NoteAddPage({ closeDialog }: { closeDialog: () => void }) {
   const [content, setContent] = useState("");
   const [loading, setLoading] = useState(false);
 
-  function check() {
+  function check(): boolean {
     const data = {
       name: name.trim(),
       content,
     };
-    console.log(name);
     if (!data.name || data.name.length < 1) {
       if (!inputRef.current) {
         alert("Please enter a name for the note");
-        return;
+        return false;
       }
       inputRef.current.value = "";
       inputRef.current.placeholder = "Please enter a title for the note";
@@ -79,7 +98,9 @@ export function NoteAddPage({ closeDialog }: { closeDialog: () => void }) {
         inputRef.current!.dataset["error"] = "false";
       }, 500);
       inputRef.current.focus();
+      return false;
     }
+    return true;
   }
 
   return (
@@ -87,7 +108,7 @@ export function NoteAddPage({ closeDialog }: { closeDialog: () => void }) {
       <Input
         ref={inputRef}
         data-error="false"
-        className="w-full border-none p-0 text-xl ring-0 placeholder:text-white/30 placeholder:transition placeholder:duration-200 focus-visible:ring-0 data-[error=true]:placeholder:text-red-400"
+        className="w-full border-none p-0 text-xl ring-0 placeholder:text-white/30 placeholder:transition placeholder:duration-500 focus-visible:ring-0 data-[error=true]:placeholder:text-red-400"
         placeholder="Title of the note"
         data-modal-autofocus
         value={name}
@@ -104,7 +125,7 @@ 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
+        <FilterSpaces
           selectedSpaces={selectedSpacesId}
           setSelectedSpaces={setSelectedSpacesId}
           className="hover:bg-rgray-5 mr-auto bg-white/5"
@@ -112,7 +133,9 @@ export function NoteAddPage({ closeDialog }: { closeDialog: () => void }) {
         />
         <button
           onClick={() => {
-            check();
+            if (check()) {
+              closeDialog();
+            }
           }}
           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"
         >
@@ -137,7 +160,7 @@ export function SpaceAddPage({ closeDialog }: { closeDialog: () => void }) {
   const [content, setContent] = useState("");
   const [loading, setLoading] = useState(false);
 
-  function check() {
+  function check(): boolean {
     const data = {
       name: name.trim(),
       content,
@@ -146,7 +169,7 @@ export function SpaceAddPage({ closeDialog }: { closeDialog: () => void }) {
     if (!data.name || data.name.length < 1) {
       if (!inputRef.current) {
         alert("Please enter a name for the note");
-        return;
+        return false;
       }
       inputRef.current.value = "";
       inputRef.current.placeholder = "Please enter a title for the note";
@@ -156,49 +179,32 @@ export function SpaceAddPage({ closeDialog }: { closeDialog: () => void }) {
         inputRef.current!.dataset["error"] = "false";
       }, 500);
       inputRef.current.focus();
+      return false;
     }
+    return true;
   }
 
   return (
-    <div>
+    <div className="md:w-[40vw]">
+      <DialogHeader>
+        <DialogTitle>Add a space</DialogTitle>
+      </DialogHeader>
+      <Label className="mt-5 block">Name</Label>
       <Input
-        ref={inputRef}
-        data-error="false"
-        className="w-full border-none p-0 text-xl ring-0 placeholder:text-white/30 placeholder:transition placeholder:duration-200 focus-visible:ring-0 data-[error=true]:placeholder:text-red-400"
-        placeholder="Title of the note"
+        placeholder="Enter the name of the space"
+        type="url"
         data-modal-autofocus
-        value={name}
-        onChange={(e) => setName(e.target.value)}
-      />
-      <Editor
-        disableLocalStorage
-        defaultValue={""}
-        onUpdate={(editor) => {
-          if (!editor) return;
-          setContent(editor.storage.markdown.getMarkdown());
-        }}
-        extensions={[Markdown]}
-        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"
+        className="bg-rgray-4 mt-2 w-full"
       />
+      <Label className="mt-5 block">Memories</Label>
       <DialogFooter>
-        <FilterCombobox
-          selectedSpaces={selectedSpacesId}
-          setSelectedSpaces={setSelectedSpacesId}
-          className="hover:bg-rgray-5 mr-auto bg-white/5"
-          name={"Spaces"}
-        />
-        <button
-          onClick={() => {
-            check();
-          }}
-          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
-        </button>
         <DialogClose
           type={undefined}
-          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"
+          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>
diff --git a/apps/web/src/components/Sidebar/FilterCombobox.tsx b/apps/web/src/components/Sidebar/FilterCombobox.tsx
index 04ff0324..0a93ee55 100644
--- a/apps/web/src/components/Sidebar/FilterCombobox.tsx
+++ b/apps/web/src/components/Sidebar/FilterCombobox.tsx
@@ -33,7 +33,124 @@ export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   name: string;
 }
 
-export function FilterCombobox({
+export function FilterSpaces({
+  className,
+  side = "bottom",
+  align = "center",
+  onClose,
+  selectedSpaces,
+  setSelectedSpaces,
+  name,
+  ...props
+}: Props) {
+  const { spaces } = useMemory();
+  const [open, setOpen] = React.useState(false);
+
+  const sortedSpaces = spaces.sort(({ id: a }, { id: b }) =>
+    selectedSpaces.includes(a) && !selectedSpaces.includes(b)
+      ? -1
+      : selectedSpaces.includes(b) && !selectedSpaces.includes(a)
+        ? 1
+        : 0,
+  );
+
+  React.useEffect(() => {
+    if (!open) {
+      onClose?.();
+    }
+  }, [open]);
+
+  return (
+    <AnimatePresence mode="popLayout">
+      <LayoutGroup>
+        <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",
+                className,
+              )}
+              {...props}
+            >
+              <SpaceIcon className="mr-1 h-5 w-5" />
+              {name}
+              <ChevronsUpDown className="h-4 w-4" />
+              <div
+                data-state-on={selectedSpaces.length > 0}
+                className="on:flex text-rgray-11 border-rgray-6 bg-rgray-2 absolute left-0 top-0 hidden aspect-[1] h-4 w-4 -translate-x-1/3 -translate-y-1/3 items-center justify-center rounded-full border text-center text-[9px]"
+              >
+                {selectedSpaces.length}
+              </div>
+            </button>
+          </PopoverTrigger>
+          <PopoverContent
+            onCloseAutoFocus={(e) => e.preventDefault()}
+            align={align}
+            side={side}
+            className="w-[200px] p-0"
+          >
+            <Command
+              filter={(val, search) =>
+                spaces
+                  .find((s) => s.id.toString() === val)
+                  ?.title.toLowerCase()
+                  .includes(search.toLowerCase().trim())
+                  ? 1
+                  : 0
+              }
+            >
+              <CommandInput placeholder="Filter spaces..." />
+              <CommandList asChild>
+                <motion.div layoutScroll>
+                  <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
+                      >
+                        <motion.div
+                          initial={{ opacity: 0 }}
+                          animate={{ opacity: 1, transition: { delay: 0.05 } }}
+                          transition={{ duration: 0.15 }}
+                          layout
+                          layoutId={`space-combobox-${space.id}`}
+                          className="text-rgray-11"
+                        >
+                          <SpaceIcon className="mr-2 h-4 w-4" />
+                          {space.title}
+                          {selectedSpaces.includes(space.id)}
+                          <Check
+                            data-state-on={selectedSpaces.includes(space.id)}
+                            className={cn(
+                              "on:opacity-100 ml-auto h-4 w-4 opacity-0",
+                            )}
+                          />
+                        </motion.div>
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </motion.div>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+      </LayoutGroup>
+    </AnimatePresence>
+  );
+}
+
+export function FilterMemories({
   className,
   side = "bottom",
   align = "center",
diff --git a/apps/web/src/components/Sidebar/MemoriesBar.tsx b/apps/web/src/components/Sidebar/MemoriesBar.tsx
index 3d7bd8b9..66c3138b 100644
--- a/apps/web/src/components/Sidebar/MemoriesBar.tsx
+++ b/apps/web/src/components/Sidebar/MemoriesBar.tsx
@@ -40,7 +40,7 @@ import { Label } from "../ui/label";
 import useViewport from "@/hooks/useViewport";
 import useTouchHold from "@/hooks/useTouchHold";
 import { DialogTrigger } from "@radix-ui/react-dialog";
-import { AddMemoryPage, NoteAddPage } from "./AddMemoryDialog";
+import { AddMemoryPage, NoteAddPage, SpaceAddPage } from "./AddMemoryDialog";
 
 export function MemoriesBar() {
   const [parent, enableAnimations] = useAutoAnimate();
@@ -91,10 +91,16 @@ export function MemoriesBar() {
                   Note
                 </DropdownMenuItem>
               </DialogTrigger>
-              <DropdownMenuItem>
-                <SpaceIcon className="mr-2 h-4 w-4" />
-                Space
-              </DropdownMenuItem>
+              <DialogTrigger className="block w-full">
+                <DropdownMenuItem
+                  onClick={() => {
+                    setAddMemoryState("space");
+                  }}
+                >
+                  <SpaceIcon className="mr-2 h-4 w-4" />
+                  Space
+                </DropdownMenuItem>
+              </DialogTrigger>
             </DropdownMenuContent>
           </DropdownMenu>
         </AddMemoryModal>
@@ -343,6 +349,8 @@ export function AddMemoryModal({
           <AddMemoryPage />
         ) : type === "note" ? (
           <NoteAddPage closeDialog={() => setIsDialogOpen(false)} />
+        ) : type === "space" ? (
+          <SpaceAddPage closeDialog={() => setIsDialogOpen(false)} />
         ) : (
           <></>
         )}
-- 
cgit v1.2.3