Merge pull request #4 from Dhravya/new-ui

New UI

17 files changed, 2122 insertions, 191 deletions

diff --git a/apps/web/src/components/ChatMessage.tsx b/apps/web/src/components/ChatMessage.tsx
new file mode 100644
index 00000000..d25c9c48
--- /dev/null
+++ b/apps/web/src/components/ChatMessage.tsx
@@ -0,0 +1,105 @@
+import React, { useEffect } from "react";
+import { motion } from "framer-motion";
+import { ArrowUpRight, Globe } from "lucide-react";
+import { convertRemToPixels } from "@/lib/utils";
+import { SpaceIcon } from "@/assets/Memories";
+import Markdown from "react-markdown";
+
+export function ChatAnswer({
+  children: message,
+  sources,
+  loading = false,
+}: {
+  children: string;
+  sources?: string[];
+  loading?: boolean;
+}) {
+  return (
+    <div className="flex h-max w-full flex-col items-start gap-5">
+      {loading ? (
+        <MessageSkeleton />
+      ) : (
+        <div className="chat-answer h-full w-full text-lg text-white/60">
+          <Markdown>{message}</Markdown>
+        </div>
+      )}
+      {!loading && sources && sources?.length > 0 && (
+        <>
+          <h1 className="animate-fade-in text-rgray-12 text-md flex items-center justify-center gap-2 opacity-0 [animation-duration:1s]">
+            <SpaceIcon className="h-6 w-6 -translate-y-[2px]" />
+            Related Memories
+          </h1>
+          <div className="animate-fade-in -mt-3 flex items-center justify-start opacity-0 [animation-duration:1s]">
+            {sources?.map((source) => (
+              <a
+                className="bg-rgray-3 flex items-center justify-center gap-2 rounded-full py-1 pl-2 pr-3 text-sm"
+                key={source}
+                href={source}
+              >
+                <Globe className="h-4 w-4" />
+                {source}
+              </a>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+export function ChatQuestion({ children }: { children: string }) {
+  return (
+    <div
+      className={`text-rgray-12 h-max w-full text-left ${children.length > 200 ? "text-xl" : "text-2xl"}`}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function ChatMessage({
+  children,
+  isLast = false,
+  index,
+}: {
+  children: React.ReactNode | React.ReactNode[];
+  isLast?: boolean;
+  index: number;
+}) {
+  const messageRef = React.useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isLast) return;
+    messageRef.current?.parentElement?.scrollTo({
+      top: messageRef.current?.offsetTop,
+      behavior: "smooth",
+    });
+  }, []);
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{
+        type: "tween",
+        duration: 0.5,
+      }}
+      ref={messageRef}
+      className={`${index === 0 ? "pt-16" : "pt-28"} flex h-max w-full resize-y flex-col items-start justify-start gap-5 transition-[height] ${isLast ? "min-h-screen pb-[40vh]" : "h-max"}`}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+function MessageSkeleton() {
+  return (
+    <div className="animate-fade-in flex w-full flex-col items-start gap-3 opacity-0 [animation-delay:0.5s] [animation-duration:1s]">
+      <div className="bg-rgray-5 h-6 w-full animate-pulse rounded-md text-lg"></div>
+      <div className="bg-rgray-5 h-6 w-full animate-pulse rounded-md text-lg"></div>
+      <div className="bg-rgray-5 h-6 w-full animate-pulse rounded-md text-lg"></div>
+      <div className="bg-rgray-5 h-6 w-full animate-pulse rounded-md text-lg"></div>
+      <div className="bg-rgray-5 h-6 w-[70%] animate-pulse rounded-md text-lg"></div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/Main.tsx b/apps/web/src/components/Main.tsx
new file mode 100644
index 00000000..c621c68f
--- /dev/null
+++ b/apps/web/src/components/Main.tsx
@@ -0,0 +1,444 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { FilterCombobox } from "./Sidebar/FilterCombobox";
+import { Textarea2 } from "./ui/textarea";
+import { ArrowRight, ArrowUp } from "lucide-react";
+import { MemoryDrawer } from "./MemoryDrawer";
+import useViewport from "@/hooks/useViewport";
+import { AnimatePresence, motion } from "framer-motion";
+import { cn, countLines } from "@/lib/utils";
+import { ChatHistory } from "../../types/memory";
+import { ChatAnswer, ChatMessage, ChatQuestion } from "./ChatMessage";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useMemory } from "@/contexts/MemoryContext";
+
+function supportsDVH() {
+  try {
+    return CSS.supports("height: 100dvh");
+  } catch {
+    return false;
+  }
+}
+
+const failResponse = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. In volutpat bibendum ligula, nec consectetur purus iaculis eu. Sed venenatis magna at lacus efficitur, vel faucibus sem lobortis. Sed sit amet imperdiet eros, nec vestibulum ante. Integer ut eros pulvinar, tempus augue a, blandit nisl. Nulla ut ligula molestie, tincidunt ligula vitae, rhoncus tellus. Vestibulum molestie, orci nec scelerisque finibus, mauris eros convallis urna, vitae vehicula metus nisi id urna. Phasellus non metus et lectus sollicitudin convallis a sit amet turpis. Donec id lacinia sapien.
+
+Donec eget eros diam. Ut enim nunc, placerat vitae augue vel, rutrum dapibus felis. Nulla et ultrices ex. In sed arcu eget lectus scelerisque semper. Nullam aliquam luctus ultrices. Morbi finibus nec dolor vitae mattis. Quisque ligula dui, ullamcorper sed blandit et, maximus vel quam. Nunc id eros id sapien tempor feugiat sit amet sed mi. Quisque feugiat hendrerit libero non cursus. Praesent convallis, diam eget ullamcorper bibendum, est tellus blandit velit, vel cursus diam turpis sed nisi.
+
+Cras dictum tortor ex, id ullamcorper nibh mollis quis. Fusce mollis, massa vel sodales consectetur, lorem mi vehicula erat, id tincidunt lorem libero at augue. Suspendisse vitae enim varius, molestie augue ut, lobortis ipsum. Nam lobortis leo eget velit auctor, ac consequat nisl malesuada. Donec sed dapibus nunc. Curabitur euismod erat a erat viverra vestibulum lacinia quis nisl. Aenean rhoncus suscipit maximus. Aliquam vitae lectus est.
+
+Sed rhoncus sem sapien, at posuere libero imperdiet eget. Maecenas in egestas quam. Duis non faucibus eros, nec sodales sem. Proin felis urna, dapibus eget ante vitae, porttitor bibendum nunc. Integer nec augue eget diam pulvinar vestibulum. Nulla lobortis libero tellus, eu commodo elit ullamcorper in. Sed semper ultricies turpis ac dignissim. Morbi at ligula non urna mollis interdum vitae sed nisi. Quisque mattis arcu eu nisl placerat ullamcorper. Cras aliquet risus sed hendrerit faucibus. Donec vitae ex quis magna cursus ultricies ut nec urna.
+
+Integer molestie nulla interdum enim suscipit malesuada. Nullam eget ipsum et elit sagittis imperdiet sed dignissim sem. Fusce vitae tellus ligula. Donec eget mi varius, consequat eros sed, consectetur urna. Suspendisse potenti. Praesent posuere ullamcorper tincidunt. Donec bibendum, magna nec mollis posuere, nisi risus dictum mauris, sed gravida metus sapien vel ipsum. Etiam ultrices nulla tincidunt erat lacinia, sit amet bibendum libero posuere. Vestibulum vehicula lectus dolor, sit amet vehicula arcu ultricies nec. Proin blandit risus diam, vel finibus erat efficitur in. Suspendisse lacinia eros luctus posuere fermentum. Etiam sed lacus aliquam, vulputate est sed, venenatis ex. Aenean at nulla rhoncus, sollicitudin elit quis, auctor tortor. Donec semper, augue lacinia pharetra imperdiet, metus purus bibendum ex, et venenatis enim purus vitae nulla. Duis eu felis porta ligula laoreet viverra.
+Answer
+It seems like you've used placeholder text commonly known as "Lorem Ipsum," which is often used in design and publishing to simulate the appearance of written text. If you have any specific questions or need assistance with something related to this text, feel free to ask!
+what is its purpose?
+Sources
+solopress.com favicon
+typingpal.com favicon
+View 2 more
+Answer
+The purpose of Lorem Ipsum, a commonly used placeholder text in design and publishing, is to create a natural-looking block of text that doesn't distract from the layout. It allows designers to visualize how text will appear in a design without the need for actual content to be written and approved. Lorem Ipsum helps in planning out where the content will sit on a page, focusing on the design rather than the specific content. This practice is particularly useful when the main emphasis is on the visual layout, allowing designers and clients to review templates without being distracted by the actual copy on the page
+4
+5
+.
+hello
+`;
+
+export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const [hide, setHide] = useState(false);
+  const [layout, setLayout] = useState<"chat" | "initial">("initial");
+  const [value, setValue] = useState("");
+  const { width } = useViewport();
+  const [isAiLoading, setIsAiLoading] = useState(false);
+
+  const { spaces } = useMemory();
+
+  // Variable to keep track of the chat history in this session
+  const [chatHistory, setChatHistory] = useState<ChatHistory[]>([]);
+
+  const [toBeParsed, setToBeParsed] = useState("");
+
+  const textArea = useRef<HTMLDivElement>(null);
+  const main = useRef<HTMLDivElement>(null);
+
+  const [selectedSpaces, setSelectedSpaces] = useState<number[]>([]);
+
+  useEffect(() => {
+    const search = searchParams.get("q");
+    if (search && search.trim().length > 0) {
+      setValue(search);
+      onSend();
+      router.push("/");
+    }
+  }, []);
+
+  useEffect(() => {
+    function onResize() {
+      if (!main.current || !window.visualViewport) return;
+      if (
+        window.visualViewport.height < window.innerHeight + 20 &&
+        window.visualViewport.height > window.innerHeight - 20
+      ) {
+        setHide(false);
+        window.scrollTo(0, 0);
+      } else {
+        setHide(true);
+        window.scrollTo(0, document.body.scrollHeight);
+      }
+    }
+
+    window.visualViewport?.addEventListener("resize", onResize);
+    return () => {
+      window.visualViewport?.removeEventListener("resize", onResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    // Define a function to try parsing the accumulated data
+    const tryParseAccumulatedData = () => {
+      // Attempt to parse the "toBeParsed" state as JSON
+      try {
+        // Split the accumulated data by the known delimiter "\n\n"
+        const parts = toBeParsed.split("\n\n");
+        let remainingData = "";
+
+        // Process each part to extract JSON objects
+        parts.forEach((part, index) => {
+          try {
+            const parsedPart = JSON.parse(part.replace("data: ", "")); // Try to parse the part as JSON
+
+            // If the part is the last one and couldn't be parsed, keep it to  accumulate more data
+            if (index === parts.length - 1 && !parsedPart) {
+              remainingData = part;
+            } else if (parsedPart && parsedPart.response) {
+              // Append to chat history in this way:
+              // If the last message was from the model, append to that message
+              // Otherwise, Start a new message from the model and append to that
+              if (chatHistory.length > 0) {
+                setChatHistory((prev: ChatHistory[]) => {
+                  const lastMessage = prev[prev.length - 1];
+                  const newParts = [
+                    ...lastMessage.answer.parts,
+                    { text: parsedPart.response },
+                  ];
+                  return [
+                    ...prev.slice(0, prev.length - 1),
+                    {
+                      ...lastMessage,
+                      answer: {
+                        parts: newParts,
+                        sources: lastMessage.answer.sources,
+                      },
+                    },
+                  ];
+                });
+              } else {
+              }
+            }
+          } catch (error) {
+            // If parsing fails and it's not the last part, it's a malformed JSON
+            if (index !== parts.length - 1) {
+              console.error("Malformed JSON part: ", part);
+            } else {
+              // If it's the last part, it may be incomplete, so keep it
+              remainingData = part;
+            }
+          }
+        });
+
+        // Update the toBeParsed state to only contain the unparsed remainder
+        if (remainingData !== toBeParsed) {
+          setToBeParsed(remainingData);
+        }
+      } catch (error) {
+        console.error("Error parsing accumulated data: ", error);
+      }
+    };
+
+    // Call the parsing function if there's data to be parsed
+    if (toBeParsed) {
+      tryParseAccumulatedData();
+    }
+  }, [toBeParsed]);
+
+  const modifyChatHistory = useCallback((old: ChatHistory[]) => {
+    const final: { role: "user" | "model"; parts: { text: string }[] }[] = [];
+    old.forEach((chat) => {
+      final.push({
+        role: "user",
+        parts: [{ text: chat.question }],
+      });
+      final.push({
+        role: "model",
+        parts: chat.answer.parts.map((part) => ({ text: part.text })),
+      });
+    });
+
+    return final;
+  }, []);
+
+  const getSearchResults = async () => {
+    setIsAiLoading(true);
+
+    const _value = value.trim();
+    setValue("");
+
+    setChatHistory((prev) => [
+      ...prev,
+      {
+        question: _value,
+        answer: {
+          parts: [],
+          sources: [],
+        },
+      },
+    ]);
+
+    const sourcesResponse = await fetch(
+      `/api/chat?sourcesOnly=true&q=${_value}`,
+      {
+        method: "POST",
+        body: JSON.stringify({
+          chatHistory: modifyChatHistory(chatHistory),
+        }),
+      },
+    );
+
+    const sourcesInJson = (await sourcesResponse.json()) as {
+      ids: string[];
+    };
+
+    setIsAiLoading(false);
+    setChatHistory((prev) => {
+      const lastMessage = prev[prev.length - 1];
+      return [
+        ...prev.slice(0, prev.length - 1),
+        {
+          ...lastMessage,
+          answer: {
+            parts: lastMessage.answer.parts,
+            sources: sourcesInJson.ids ?? [],
+          },
+        },
+      ];
+    });
+
+    const actualSelectedSpaces = selectedSpaces.map(
+      (space) => spaces.find((s) => s.id === space)?.title ?? "",
+    );
+
+    const response = await fetch(
+      `/api/chat?q=${_value}&spaces=${actualSelectedSpaces.join(",")}`,
+      {
+        method: "POST",
+        body: JSON.stringify({
+          chatHistory: modifyChatHistory(chatHistory),
+        }),
+      },
+    );
+
+    if (response.status !== 200) {
+      setIsAiLoading(false);
+      return;
+    }
+
+    if (response.body) {
+      let reader = response.body?.getReader();
+      let decoder = new TextDecoder("utf-8");
+      let result = "";
+
+      // @ts-ignore
+      reader.read().then(function processText({ done, value }) {
+        if (done) {
+          setIsAiLoading(false);
+          setToBeParsed("");
+          setValue("");
+
+          return;
+        }
+        setToBeParsed((prev) => prev + decoder.decode(value));
+
+        return reader?.read().then(processText);
+      });
+    }
+  };
+
+  const onSend = async () => {
+    setLayout("chat");
+    await getSearchResults();
+  };
+
+  return (
+    <>
+      <AnimatePresence mode="wait">
+        {layout === "chat" ? (
+          <Chat
+            key="chat"
+            isLoading={isAiLoading}
+            chatHistory={chatHistory}
+            sidebarOpen={sidebarOpen}
+            askQuestion={onSend}
+            setValue={setValue}
+            value={value}
+          />
+        ) : (
+          <main
+            data-sidebar-open={sidebarOpen}
+            ref={main}
+            className={cn(
+              "sidebar flex w-full flex-col items-end justify-center gap-5 px-5 pt-5 transition-[padding-left,padding-top,padding-right] delay-200 duration-200 md:items-center md:gap-10 md:px-72 [&[data-sidebar-open='true']]:pr-10 [&[data-sidebar-open='true']]:delay-0 md:[&[data-sidebar-open='true']]:pl-[calc(2.5rem+30vw)]",
+              hide ? "" : "main-hidden",
+            )}
+          >
+            <h1 className="text-rgray-11 mt-auto w-full text-center text-3xl md:mt-0">
+              Ask your Second brain
+            </h1>
+
+            <Textarea2
+              ref={textArea}
+              exit={{
+                opacity: 0,
+                y: 50,
+              }}
+              transition={{
+                type: "tween",
+                duration: 0.2,
+              }}
+              textAreaProps={{
+                placeholder: "Ask your SuperMemory...",
+                className:
+                  "h-auto overflow-auto md:h-full md:resize-none text-lg py-0 px-2 pt-2 md:py-0 md:p-5 resize-y text-rgray-11 w-full min-h-[1em]",
+                value,
+                autoFocus: true,
+                onChange: (e) => setValue(e.target.value),
+                onKeyDown: (e) => {
+                  console.log(e.key, e.ctrlKey, e.metaKey);
+                  if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+                    onSend();
+                  }
+                },
+              }}
+            >
+              <div className="text-rgray-11/70 flex h-full w-fit items-center justify-center pl-0 md:w-full md:p-2">
+                <FilterCombobox
+                  onClose={() => {
+                    textArea.current?.querySelector("textarea")?.focus();
+                  }}
+                  className="hidden md:flex"
+                  selectedSpaces={selectedSpaces}
+                  setSelectedSpaces={setSelectedSpaces}
+                />
+                <button
+                  onClick={onSend}
+                  disabled={value.trim().length < 1}
+                  className="text-rgray-11/70 bg-rgray-3 focus-visible:ring-rgray-8 hover:bg-rgray-4 mt-auto flex items-center justify-center rounded-full p-2 ring-2 ring-transparent focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:ml-auto md:mt-0"
+                >
+                  <ArrowRight className="h-5 w-5" />
+                </button>
+              </div>
+            </Textarea2>
+            {width <= 768 && <MemoryDrawer hide={hide} />}
+          </main>
+        )}
+      </AnimatePresence>
+    </>
+  );
+}
+
+export function Chat({
+  sidebarOpen,
+  chatHistory,
+  isLoading = false,
+  askQuestion,
+  setValue,
+  value,
+}: {
+  sidebarOpen: boolean;
+  isLoading?: boolean;
+  chatHistory: ChatHistory[];
+  askQuestion: () => void;
+  setValue: (value: string) => void;
+  value: string;
+}) {
+  const textArea = useRef<HTMLDivElement>(null);
+
+  function onValueChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
+    const value = e.target.value;
+    setValue(value);
+    const lines = countLines(e.target);
+    e.target.rows = Math.min(5, lines);
+  }
+
+  return (
+    <main
+      data-sidebar-open={sidebarOpen}
+      className={cn(
+        "sidebar relative flex w-full flex-col items-end gap-5 px-5 pt-5 transition-[padding-left,padding-top,padding-right] delay-200 duration-200 md:items-center md:gap-10 md:px-72 [&[data-sidebar-open='true']]:pr-10 [&[data-sidebar-open='true']]:delay-0 md:[&[data-sidebar-open='true']]:pl-[calc(2.5rem+30vw)]",
+      )}
+    >
+      <div className="scrollbar-none h-screen w-full overflow-y-auto px-5">
+        {chatHistory.map((msg, i) => (
+          <ChatMessage index={i} key={i} isLast={i === chatHistory.length - 1}>
+            <ChatQuestion>{msg.question}</ChatQuestion>
+            <ChatAnswer
+              loading={i === chatHistory.length - 1 ? isLoading : false}
+              sources={msg.answer.sources}
+            >
+              {msg.answer.parts.map((part) => part.text).join(" ")}
+            </ChatAnswer>
+          </ChatMessage>
+        ))}
+      </div>
+      <div className="from-rgray-2 via-rgray-2 to-rgray-2/0 absolute bottom-0 left-0 h-[30%] w-full bg-gradient-to-t" />
+      <div
+        data-sidebar-open={sidebarOpen}
+        className="absolute flex w-full items-center justify-center"
+      >
+        <div className="animate-from-top fixed bottom-10 mt-auto flex w-[50%] flex-col items-start justify-center gap-2">
+          <FilterCombobox
+            onClose={() => {
+              textArea.current?.querySelector("textarea")?.focus();
+            }}
+            side="top"
+            align="start"
+            className="bg-[#252525]"
+            // TODO: SPACES FILTER HERE
+            selectedSpaces={[]}
+            setSelectedSpaces={(spaces) => {}}
+          />
+          <Textarea2
+            ref={textArea}
+            className="bg-rgray-2 h-auto w-full flex-row items-start justify-center overflow-auto px-3 md:items-center md:justify-center"
+            textAreaProps={{
+              placeholder: "Ask your SuperMemory...",
+              className:
+                "overflow-auto h-auto p-3 md:resize-none text-lg w-auto resize-y text-rgray-11 w-full",
+              value,
+              rows: 1,
+              autoFocus: true,
+              onChange: onValueChange,
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+                  askQuestion();
+                }
+              },
+            }}
+          >
+            <div className="text-rgray-11/70 ml-auto mt-auto flex h-full w-min items-center justify-center pb-3 pr-2">
+              <button
+                onClick={askQuestion}
+                disabled={value.trim().length < 1}
+                className="text-rgray-11/70 bg-rgray-3 focus-visible:ring-rgray-8 hover:bg-rgray-4 mt-auto flex items-center justify-center rounded-full p-2 ring-2 ring-transparent transition-[filter] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                <ArrowUp className="h-5 w-5" />
+              </button>
+            </div>
+          </Textarea2>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/apps/web/src/components/MemoryDrawer.tsx b/apps/web/src/components/MemoryDrawer.tsx
new file mode 100644
index 00000000..f1ca5d47
--- /dev/null
+++ b/apps/web/src/components/MemoryDrawer.tsx
@@ -0,0 +1,49 @@
+import { useRef, useState } from "react";
+import { Drawer, DrawerContent, DrawerOverlay } from "./ui/drawer";
+import { MemoryIcon } from "@/assets/Memories";
+import { cn } from "@/lib/utils";
+import { MemoriesBar } from "./Sidebar/MemoriesBar";
+
+export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  hide?: boolean;
+}
+
+export function MemoryDrawer({ className, hide = false, ...props }: Props) {
+  const [activeSnapPoint, setActiveSnapPoint] = useState<
+    number | null | string
+  >(0.1);
+
+  return (
+    <Drawer
+      snapPoints={[0.1, 0.9]}
+      activeSnapPoint={activeSnapPoint}
+      shouldScaleBackground={false}
+      setActiveSnapPoint={setActiveSnapPoint}
+      open={true}
+      dismissible={false}
+      modal={false}
+    >
+      <DrawerContent
+        overlay={false}
+        data-expanded={activeSnapPoint === 0.9}
+        className={cn(
+          "border-rgray-6 DrawerContent data-[expanded=true]:bg-rgray-3 h-full w-screen border transition-[background] focus-visible:outline-none",
+          hide ? "hidden" : "",
+        )}
+        handle={false}
+      >
+        <button
+          onClick={() =>
+            setActiveSnapPoint((prev) => (prev === 0.9 ? 0.1 : 0.9))
+          }
+          className="bg-rgray-4 border-rgray-6 text-rgray-11 absolute left-1/2 top-0 flex w-fit -translate-x-1/2 -translate-y-1/2 items-center justify-center gap-2 rounded-md border px-3 py-2"
+        >
+          <MemoryIcon className="h-7 w-7" />
+          Memories
+        </button>
+        <MemoriesBar />
+      </DrawerContent>
+      <DrawerOverlay className="relative bg-transparent" />
+    </Drawer>
+  );
+}
diff --git a/apps/web/src/components/QueryAI.tsx b/apps/web/src/components/QueryAI.tsx
deleted file mode 100644
index 3cb14178..00000000
--- a/apps/web/src/components/QueryAI.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-'use client';
-
-import { Label } from './ui/label';
-import React, { useEffect, useState } from 'react';
-import { Input } from './ui/input';
-import { Button } from './ui/button';
-import SearchResults from './SearchResults';
-
-function QueryAI() {
-  const [searchResults, setSearchResults] = useState<string[]>([]);
-  const [isAiLoading, setIsAiLoading] = useState(false);
-
-  const [aiResponse, setAIResponse] = useState('');
-  const [input, setInput] = useState('');
-  const [toBeParsed, setToBeParsed] = useState('');
-
-  const handleStreamData = (newChunk: string) => {
-    // Append the new chunk to the existing data to be parsed
-    setToBeParsed((prev) => prev + newChunk);
-  };
-
-  useEffect(() => {
-    // Define a function to try parsing the accumulated data
-    const tryParseAccumulatedData = () => {
-      // Attempt to parse the "toBeParsed" state as JSON
-      try {
-        // Split the accumulated data by the known delimiter "\n\n"
-        const parts = toBeParsed.split('\n\n');
-        let remainingData = '';
-
-        // Process each part to extract JSON objects
-        parts.forEach((part, index) => {
-          try {
-            const parsedPart = JSON.parse(part.replace('data: ', '')); // Try to parse the part as JSON
-
-            // If the part is the last one and couldn't be parsed, keep it to  accumulate more data
-            if (index === parts.length - 1 && !parsedPart) {
-              remainingData = part;
-            } else if (parsedPart && parsedPart.response) {
-              // If the part is parsable and has the "response" field, update the AI response state
-              setAIResponse((prev) => prev + parsedPart.response);
-            }
-          } catch (error) {
-            // If parsing fails and it's not the last part, it's a malformed JSON
-            if (index !== parts.length - 1) {
-              console.error('Malformed JSON part: ', part);
-            } else {
-              // If it's the last part, it may be incomplete, so keep it
-              remainingData = part;
-            }
-          }
-        });
-
-        // Update the toBeParsed state to only contain the unparsed remainder
-        if (remainingData !== toBeParsed) {
-          setToBeParsed(remainingData);
-        }
-      } catch (error) {
-        console.error('Error parsing accumulated data: ', error);
-      }
-    };
-
-    // Call the parsing function if there's data to be parsed
-    if (toBeParsed) {
-      tryParseAccumulatedData();
-    }
-  }, [toBeParsed]);
-
-  const getSearchResults = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    setIsAiLoading(true);
-
-    const sourcesResponse = await fetch(
-      `/api/query?sourcesOnly=true&q=${input}`,
-    );
-
-    const sourcesInJson = (await sourcesResponse.json()) as {
-      ids: string[];
-    };
-
-    setSearchResults(sourcesInJson.ids);
-
-    const response = await fetch(`/api/query?q=${input}`);
-
-    if (response.status !== 200) {
-      setIsAiLoading(false);
-      return;
-    }
-
-    if (response.body) {
-      let reader = response.body.getReader();
-      let decoder = new TextDecoder('utf-8');
-      let result = '';
-
-      // @ts-ignore
-      reader.read().then(function processText({ done, value }) {
-        if (done) {
-          //   setSearchResults(JSON.parse(result.replace('data: ', '')));
-          //   setIsAiLoading(false);
-          return;
-        }
-
-        handleStreamData(decoder.decode(value));
-
-        return reader.read().then(processText);
-      });
-    }
-  };
-
-  return (
-    <div className="w-full max-w-2xl mx-auto">
-      <form onSubmit={async (e) => await getSearchResults(e)} className="mt-8">
-        <Label htmlFor="searchInput">Ask your SuperMemory</Label>
-        <div className="flex flex-col md:flex-row md:w-full md:items-center space-y-2 md:space-y-0 md:space-x-2">
-          <Input
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            placeholder="Search using AI... ✨"
-            id="searchInput"
-          />
-          <Button
-            disabled={isAiLoading}
-            className="max-w-min md:w-full"
-            type="submit"
-            variant="default"
-          >
-            Ask AI
-          </Button>
-        </div>
-      </form>
-
-      {searchResults && (
-        <SearchResults aiResponse={aiResponse} sources={searchResults} />
-      )}
-    </div>
-  );
-}
-
-export default QueryAI;
diff --git a/apps/web/src/components/SearchResults.tsx b/apps/web/src/components/SearchResults.tsx
deleted file mode 100644
index 0445d0b4..00000000
--- a/apps/web/src/components/SearchResults.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-'use client'
-
-import React from 'react';
-import { Card, CardContent } from './ui/card';
-import Markdown from 'react-markdown';
-import remarkGfm from 'remark-gfm'
-
-function SearchResults({
-  aiResponse,
-  sources,
-}: {
-  aiResponse: string;
-  sources: string[];
-}) {
-  return (
-    <div
-      style={{
-        backgroundImage: `linear-gradient(to right, #E5D9F2, #CDC1FF)`,
-      }}
-      className="w-full max-w-2xl mx-auto px-4 py-6 space-y-6 border mt-4 rounded-xl"
-    >
-      <div className="text-start">
-        <div className="text-xl text-black">
-          <Markdown remarkPlugins={[remarkGfm]}>{aiResponse.replace('</s>', '')}</Markdown>
-        </div>
-      </div>
-      <div className="grid gap-6">
-        {sources.map((value, index) => (
-          <Card key={index}>
-            <CardContent className="space-y-2">{value}</CardContent>
-          </Card>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export default SearchResults;
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 1af37025..66ca1652 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -26,8 +26,7 @@ export default function Sidebar() {
       description: '',
       image: 'https://code.visualstudio.com/favicon.ico',
       baseUrl: 'https://code.visualstudio.com',
-      savedAt: new Date(),
-      space: 'Development',
+      savedAt: new Date()
     },
     {
       id: 1,
@@ -37,8 +36,7 @@ export default function Sidebar() {
       description: '',
       image: 'https://github.com/favicon.ico',
       baseUrl: 'https://github.com',
-      savedAt: new Date(),
-      space: 'Development',
+      savedAt: new Date()
     },
   ];
 
diff --git a/apps/web/src/components/Sidebar/CategoryItem.tsx b/apps/web/src/components/Sidebar/CategoryItem.tsx
new file mode 100644
index 00000000..0cf8a70c
--- /dev/null
+++ b/apps/web/src/components/Sidebar/CategoryItem.tsx
@@ -0,0 +1,298 @@
+'use client';
+import { cleanUrl } from '@/lib/utils';
+import { StoredContent } from '@/server/db/schema';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from '../ui/dropdown-menu';
+import { Label } from '../ui/label';
+import {
+  ArrowUpRight,
+  MoreHorizontal,
+  Tags,
+  ChevronDown,
+  Edit3,
+  Trash2,
+  Save,
+  ChevronRight,
+  Plus,
+  Minus,
+} from 'lucide-react';
+import { useState } from 'react';
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerClose,
+} from '../ui/drawer';
+import { Input } from '../ui/input';
+import { Textarea } from '../ui/textarea';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
+import {
+  AnimatePresence,
+  motion,
+  Reorder,
+  useMotionValue,
+} from 'framer-motion';
+
+const pages: StoredContent[] = [
+  {
+    id: 1,
+    content: '',
+    title: 'Visual Studio Code',
+    url: 'https://code.visualstudio.com',
+    description: '',
+    image: 'https://code.visualstudio.com/favicon.ico',
+    baseUrl: 'https://code.visualstudio.com',
+    savedAt: new Date(),
+  },
+  {
+    id: 2,
+    content: '',
+    title: "yxshv/vscode: An unofficial remake of vscode's landing page",
+    url: 'https://github.com/yxshv/vscode',
+    description: '',
+    image: 'https://github.com/favicon.ico',
+    baseUrl: 'https://github.com',
+    savedAt: new Date(),
+  },
+  {
+    id: 3,
+    content: '',
+    title: "yxshv/vscode: An unofficial remake of vscode's landing page",
+    url: 'https://github.com/yxshv/vscode',
+    description: '',
+    image: 'https://github.com/favicon.ico',
+    baseUrl: 'https://github.com',
+    savedAt: new Date(),
+  },
+  {
+    id: 4,
+    content: '',
+    title: "yxshv/vscode: An unofficial remake of vscode's landing page",
+    url: 'https://github.com/yxshv/vscode',
+    description: '',
+    image: 'https://github.com/favicon.ico',
+    baseUrl: 'https://github.com',
+    savedAt: new Date(),
+  },
+  {
+    id: 5,
+    content: '',
+    title: "yxshv/vscode: An unofficial remake of vscode's landing page",
+    url: 'https://github.com/yxshv/vscode',
+    description: '',
+    image: 'https://github.com/favicon.ico',
+    baseUrl: 'https://github.com',
+    savedAt: new Date(),
+  },
+  {
+    id: 6,
+    content: '',
+    title: "yxshv/vscode: An unofficial remake of vscode's landing page",
+    url: 'https://github.com/yxshv/vscode',
+    description: '',
+    image: 'https://github.com/favicon.ico',
+    baseUrl: 'https://github.com',
+    savedAt: new Date(),
+  },
+  {
+    id: 7,
+    content: '',
+    title: "yxshv/vscode: An unofficial remake of vscode's landing page",
+    url: 'https://github.com/yxshv/vscode',
+    description: '',
+    image: 'https://github.com/favicon.ico',
+    baseUrl: 'https://github.com',
+    savedAt: new Date(),
+  },
+  {
+    id: 8,
+    content: '',
+    title: "yxshv/vscode: An unofficial remake of vscode's landing page",
+    url: 'https://github.com/yxshv/vscode',
+    description: '',
+    image: 'https://github.com/favicon.ico',
+    baseUrl: 'https://github.com',
+    savedAt: new Date(),
+  },
+  {
+    id: 9,
+    content: '',
+    title: "yxshv/vscode: An unofficial remake of vscode's landing page",
+    url: 'https://github.com/yxshv/vscode',
+    description: '',
+    image: 'https://github.com/favicon.ico',
+    baseUrl: 'https://github.com',
+    savedAt: new Date(),
+  },
+];
+export const CategoryItem: React.FC<{ item: StoredContent }> = ({ item }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isEditDrawerOpen, setIsEditDrawerOpen] = useState(false);
+
+  const [items, setItems] = useState<StoredContent[]>(pages);
+
+  return (
+    <>
+      <div className="hover:bg-rgray-5 has-[button:focus]:bg-rgray-5 flex w-full items-center rounded-full py-1 pl-3 pr-2 transition [&:hover>button>div>[data-down-icon]]:scale-125 [&:hover>button>div>[data-down-icon]]:opacity-100 [&:hover>button>div>[data-down-icon]]:delay-150 [&:hover>button>div>[data-tags-icon]]:scale-75 [&:hover>button>div>[data-tags-icon]]:opacity-0 [&:hover>button>div>[data-tags-icon]]:delay-0 [&:hover>button]:opacity-100">
+        <button
+          onClick={() => setIsExpanded((prev) => !prev)}
+          className="flex w-full items-center gap-2 focus-visible:outline-none"
+        >
+          <div className="relative h-5 min-w-5">
+            <Tags
+              data-tags-icon
+              className="z-1 h-5 w-5 transition-[transform,opacity] delay-150 duration-150"
+              strokeWidth={1.5}
+            />
+            <ChevronDown
+              data-down-icon
+              className={`absolute left-1/2 top-1/2 z-[2] h-4 w-4 min-w-4 -translate-x-1/2 -translate-y-1/2 scale-75 opacity-0 transition-[transform,opacity] duration-150 ${isExpanded ? 'rotate-180' : 'rotate-0'}`}
+              strokeWidth={1.5}
+            />
+          </div>
+
+          <span className="w-full truncate text-nowrap text-left">
+            {item.title ?? 'Untitled website'}
+          </span>
+        </button>
+        <Drawer
+          shouldScaleBackground
+          open={isEditDrawerOpen}
+          onOpenChange={setIsEditDrawerOpen}
+        >
+          <DrawerContent className="pb-10 lg:px-[25vw]">
+            <DrawerHeader className="relative mt-10 px-0">
+              <DrawerTitle className=" flex w-full justify-between">
+                Edit Page Details
+              </DrawerTitle>
+              <DrawerDescription>Change the page details</DrawerDescription>
+              <a
+                target="_blank"
+                href={item.url}
+                className="text-rgray-11/90 bg-rgray-3 text-md absolute right-0 top-0 flex w-min translate-y-1/2 items-center justify-center gap-1 rounded-full px-5 py-1"
+              >
+                <img src={item.image ?? '/brain.png'} className="h-4 w-4" />
+                {cleanUrl(item.url)}
+              </a>
+            </DrawerHeader>
+
+            <div className="mt-5">
+              <Label>Title</Label>
+              <Input
+                className=""
+                required
+                value={item.title ?? ''}
+                placeholder={item.title ?? 'Enter the title for the page'}
+              />
+            </div>
+            <div className="mt-5">
+              <Label>Additional Context</Label>
+              <Textarea
+                className=""
+                value={item.content ?? ''}
+                placeholder={'Enter additional context for this page'}
+              />
+            </div>
+            <DrawerFooter className="flex flex-row-reverse items-center justify-end px-0 pt-5">
+              <DrawerClose className="flex items-center justify-center rounded-md px-3 py-2 ring-2 ring-transparent transition hover:bg-blue-100 hover:text-blue-400 focus-visible:bg-blue-100 focus-visible:text-blue-400 focus-visible:outline-none focus-visible:ring-blue-200 dark:hover:bg-blue-100/10 dark:focus-visible:bg-blue-100/10 dark:focus-visible:ring-blue-200/30">
+                <Save className="mr-2 h-4 w-4 " strokeWidth={1.5} />
+                Save
+              </DrawerClose>
+              <DrawerClose className="hover:bg-rgray-3 focus-visible:bg-rgray-4 focus-visible:ring-rgray-7 flex items-center justify-center rounded-md px-3 py-2 ring-2 ring-transparent transition focus-visible:outline-none">
+                Cancel
+              </DrawerClose>
+              <DrawerClose className="mr-auto flex items-center justify-center rounded-md bg-red-100 px-3 py-2 text-red-400 ring-2 ring-transparent transition focus-visible:outline-none focus-visible:ring-red-200 dark:bg-red-100/10 dark:focus-visible:ring-red-200/30">
+                <Trash2 className="mr-2 h-4 w-4 " strokeWidth={1.5} />
+                Delete
+              </DrawerClose>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+      </div>
+      <AnimatePresence>
+        {isExpanded && (
+          <Reorder.Group
+            axis="y"
+            values={items}
+            onReorder={setItems}
+            as="div"
+            initial={{ height: 0 }}
+            animate={{ height: 'auto' }}
+            exit={{
+              height: 0,
+              transition: {},
+            }}
+            layoutScroll
+            className="flex max-h-32 w-full flex-col items-center overflow-y-auto pl-7"
+          >
+            <AnimatePresence>
+              {items.map((item, i) => (
+                <CategoryPage
+                  key={item.id}
+                  index={i}
+                  item={item}
+                  onRemove={() =>
+                    setItems((prev) => prev.filter((_, index) => i !== index))
+                  }
+                />
+              ))}
+            </AnimatePresence>
+          </Reorder.Group>
+        )}
+      </AnimatePresence>
+    </>
+  );
+};
+
+export const CategoryPage: React.FC<{
+  item: StoredContent;
+  index: number;
+  onRemove?: () => void;
+}> = ({ item, onRemove, index }) => {
+  return (
+    <Reorder.Item
+      value={item}
+      as="div"
+      key={index}
+      exit={{ opacity: 0, scale: 0.8 }}
+      dragListener={false}
+      className="hover:bg-rgray-5  has-[a:focus]:bg-rgray-5 flex w-full items-center rounded-full py-1 pl-3 pr-2 transition [&:hover>a>div>[data-icon]]:scale-125 [&:hover>a>div>[data-icon]]:opacity-100 [&:hover>a>div>[data-icon]]:delay-150 [&:hover>a>div>img]:scale-75 [&:hover>a>div>img]:opacity-0 [&:hover>a>div>img]:delay-0 [&:hover>button]:opacity-100"
+    >
+      <a
+        href={item.url}
+        target="_blank"
+        className="flex w-[90%] items-center gap-2 focus-visible:outline-none"
+      >
+        <div className="relative h-4 min-w-4">
+          <img
+            src={item.image ?? '/brain.png'}
+            alt={item.title ?? 'Untitiled website'}
+            className="z-1 h-4 w-4 transition-[transform,opacity] delay-150 duration-150"
+          />
+          <ArrowUpRight
+            data-icon
+            className="absolute left-1/2 top-1/2 z-[2] h-4 w-4 min-w-4 -translate-x-1/2 -translate-y-1/2 scale-75 opacity-0 transition-[transform,opacity] duration-150"
+            strokeWidth={1.5}
+          />
+        </div>
+
+        <span className="w-full truncate text-nowrap">
+          {item.title ?? 'Untitled website'}
+        </span>
+      </a>
+      <button
+        onClick={() => onRemove?.()}
+        className="ml-auto w-4 min-w-4 rounded-[0.15rem] opacity-0 focus-visible:opacity-100 focus-visible:outline-none"
+      >
+        <Minus className="h-4 w-4 min-w-4" />
+      </button>
+    </Reorder.Item>
+  );
+};
diff --git a/apps/web/src/components/Sidebar/FilterCombobox.tsx b/apps/web/src/components/Sidebar/FilterCombobox.tsx
new file mode 100644
index 00000000..76b66db9
--- /dev/null
+++ b/apps/web/src/components/Sidebar/FilterCombobox.tsx
@@ -0,0 +1,147 @@
+'use client';
+
+import * as React from 'react';
+import { Check, ChevronsUpDown } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { SpaceIcon } from '@/assets/Memories';
+import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
+import { useMemory } from '@/contexts/MemoryContext';
+
+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;
+}
+
+export function FilterCombobox({
+  className,
+  side = 'bottom',
+  align = 'center',
+  onClose,
+  selectedSpaces,
+  setSelectedSpaces,
+  ...props
+}: Props) {
+  const { spaces, addSpace } = 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
+              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" />
+              Filter
+              <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>
+  );
+}
diff --git a/apps/web/src/components/Sidebar/MemoriesBar.tsx b/apps/web/src/components/Sidebar/MemoriesBar.tsx
new file mode 100644
index 00000000..d7d8b5b5
--- /dev/null
+++ b/apps/web/src/components/Sidebar/MemoriesBar.tsx
@@ -0,0 +1,363 @@
+import { useAutoAnimate } from "@formkit/auto-animate/react";
+import {
+  MemoryWithImage,
+  MemoryWithImages3,
+  MemoryWithImages2,
+} from "@/assets/MemoryWithImages";
+import { type CollectedSpaces } from "../../../types/memory";
+import { Input, InputWithIcon } from "../ui/input";
+import {
+  ArrowUpRight,
+  Edit3,
+  MoreHorizontal,
+  Plus,
+  Search,
+  Sparkles,
+  Text,
+  Trash2,
+} from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { useState } from "react";
+import { Variant, useAnimate, motion } from "framer-motion";
+import { useMemory } from "@/contexts/MemoryContext";
+import { SpaceIcon } from "@/assets/Memories";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogDescription,
+  DialogHeader,
+  DialogFooter,
+  DialogClose,
+} from "../ui/dialog";
+import { Label } from "../ui/label";
+import useViewport from "@/hooks/useViewport";
+import useTouchHold from "@/hooks/useTouchHold";
+
+export function MemoriesBar() {
+  const [parent, enableAnimations] = useAutoAnimate();
+  const { spaces, deleteSpace } = useMemory();
+
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [addMemoryState, setAddMemoryState] = useState<
+    "page" | "note" | "space" | null
+  >(null);
+
+  return (
+    <div className="text-rgray-11 flex w-full flex-col items-start py-8 text-left">
+      <div className="w-full px-8">
+        <h1 className="w-full text-2xl">Your Memories</h1>
+        <InputWithIcon
+          placeholder="Search"
+          icon={<Search className="text-rgray-11 h-5 w-5 opacity-50" />}
+          className="bg-rgray-4 mt-2 w-full"
+        />
+      </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>
+      </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"
+      >
+        {spaces.map((space) => (
+          <SpaceItem
+            onDelete={() => deleteSpace(space.id)}
+            key={space.id}
+            {...space}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const SpaceExitVariant: Variant = {
+  opacity: 0,
+  scale: 0,
+  borderRadius: "50%",
+  background: "var(--gray-1)",
+  transition: {
+    duration: 0.2,
+  },
+};
+
+export function SpaceItem({
+  title,
+  content,
+  id,
+  onDelete,
+}: CollectedSpaces & { onDelete: () => void }) {
+  const [itemRef, animateItem] = useAnimate();
+  const { width } = useViewport();
+
+  const [moreDropdownOpen, setMoreDropdownOpen] = useState(false);
+
+  const touchEventProps = useTouchHold({
+    onHold() {
+      setMoreDropdownOpen(true);
+    },
+  });
+
+  return (
+    <motion.div
+      ref={itemRef}
+      {...touchEventProps}
+      className="hover:bg-rgray-2 has-[[data-state='true']]:bg-rgray-2 has-[[data-space-text]:focus-visible]:bg-rgray-2 has-[[data-space-text]:focus-visible]:ring-rgray-7 [&:has-[[data-space-text]:focus-visible]>[data-more-button]]:opacity-100 relative flex select-none flex-col-reverse items-center justify-center rounded-md p-2 pb-4 text-center font-normal ring-transparent transition has-[[data-space-text]:focus-visible]:outline-none has-[[data-space-text]:focus-visible]:ring-2 md:has-[[data-state='true']]:bg-transparent [&:hover>[data-more-button]]:opacity-100"
+    >
+      <button data-space-text className="focus-visible:outline-none">
+        {title}
+      </button>
+      <SpaceMoreButton
+        isOpen={moreDropdownOpen}
+        setIsOpen={setMoreDropdownOpen}
+        onDelete={() => {
+          if (!itemRef.current || width < 768) {
+            onDelete();
+            return;
+          }
+          const trash = document.querySelector("#trash")! as HTMLDivElement;
+          const trashBin = document.querySelector("#trash-button")!;
+          const trashRect = trashBin.getBoundingClientRect();
+          const scopeRect = itemRef.current.getBoundingClientRect();
+          const el = document.createElement("div");
+          el.style.position = "fixed";
+          el.style.top = "0";
+          el.style.left = "0";
+          el.style.width = "15px";
+          el.style.height = "15px";
+          el.style.backgroundColor = "var(--gray-7)";
+          el.style.zIndex = "60";
+          el.style.borderRadius = "50%";
+          el.style.transform = "scale(5)";
+          el.style.opacity = "0";
+          trash.dataset["open"] = "true";
+          const initial = {
+            x: scopeRect.left + scopeRect.width / 2,
+            y: scopeRect.top + scopeRect.height / 2,
+          };
+          const delta = {
+            x:
+              trashRect.left +
+              trashRect.width / 2 -
+              scopeRect.left +
+              scopeRect.width / 2,
+            y:
+              trashRect.top +
+              trashRect.height / 4 -
+              scopeRect.top +
+              scopeRect.height / 2,
+          };
+          const end = {
+            x: trashRect.left + trashRect.width / 2,
+            y: trashRect.top + trashRect.height / 4,
+          };
+          el.style.offsetPath = `path('M ${initial.x} ${initial.y} Q ${delta.x * 0.01} ${delta.y * 0.01} ${end.x} ${end.y}`;
+          animateItem(itemRef.current, SpaceExitVariant, {
+            duration: 0.2,
+          }).then(() => {
+            itemRef.current.style.scale = "0";
+            onDelete();
+          });
+          document.body.appendChild(el);
+          el.animate(
+            {
+              transform: ["scale(5)", "scale(1)"],
+              opacity: [0, 0.3, 1],
+            },
+            {
+              duration: 200,
+              easing: "cubic-bezier(0.64, 0.57, 0.67, 1.53)",
+              fill: "forwards",
+            },
+          );
+          el.animate(
+            {
+              offsetDistance: ["0%", "100%"],
+            },
+            {
+              duration: 2000,
+              easing: "cubic-bezier(0.64, 0.57, 0.67, 1.53)",
+              fill: "forwards",
+              delay: 200,
+            },
+          ).onfinish = () => {
+            el.animate(
+              { transform: "scale(0)", opacity: 0 },
+              { duration: 200, fill: "forwards" },
+            ).onfinish = () => {
+              el.remove();
+            };
+          };
+        }}
+      />
+      {content.length > 2 ? (
+        <MemoryWithImages3
+          className="h-24 w-24"
+          id={id.toString()}
+          images={content.map((c) => c.image).reverse() as string[]}
+        />
+      ) : content.length === 1 ? (
+        <MemoryWithImage
+          className="h-24 w-24"
+          id={id.toString()}
+          image={content[0].image!}
+        />
+      ) : (
+        <MemoryWithImages2
+          className="h-24 w-24"
+          id={id.toString()}
+          images={content.map((c) => c.image).reverse() as string[]}
+        />
+      )}
+    </motion.div>
+  );
+}
+
+export function SpaceMoreButton({
+  onDelete,
+  isOpen,
+  setIsOpen,
+}: {
+  onDelete?: () => void;
+  isOpen?: boolean;
+  setIsOpen?: (open: boolean) => void;
+}) {
+  return (
+    <>
+      <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+        <DropdownMenuTrigger asChild>
+          <button
+            data-more-button
+            className="hover:bg-rgray-3 focus-visible:bg-rgray-3 focus-visible:ring-rgray-7 absolute right-2 top-2 scale-0 rounded-md p-1 opacity-0 ring-transparent transition focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 md:block md:scale-100 md:bg-transparent"
+          >
+            <MoreHorizontal className="text-rgray-11 h-5 w-5" />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem>
+            <ArrowUpRight
+              className="mr-2 h-4 w-4 scale-125"
+              strokeWidth={1.5}
+            />
+            Open
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => {}}>
+            <Edit3 className="mr-2 h-4 w-4" strokeWidth={1.5} />
+            Edit
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={onDelete}
+            className="focus:bg-red-100 focus:text-red-400 dark:focus:bg-red-100/10"
+          >
+            <Trash2 className="mr-2 h-4 w-4" strokeWidth={1.5} />
+            Move to Trash
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  );
+}
+
+export function AddMemoryModal({
+  state,
+  onStateChange,
+}: {
+  state: "page" | "note" | "space" | null;
+  onStateChange: (state: "page" | "note" | "space" | null) => void;
+}) {
+  return (
+    <>
+      <Dialog
+        open={state === "page"}
+        onOpenChange={(open) => onStateChange(open ? "page" : null)}
+      >
+        <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>
+    </>
+  );
+}
diff --git a/apps/web/src/components/Sidebar/index.tsx b/apps/web/src/components/Sidebar/index.tsx
new file mode 100644
index 00000000..830b0f05
--- /dev/null
+++ b/apps/web/src/components/Sidebar/index.tsx
@@ -0,0 +1,178 @@
+'use client';
+import { MemoryIcon } from '../../assets/Memories';
+import { Trash2, User2 } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+import { MemoriesBar } from './MemoriesBar';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Bin } from '@/assets/Bin';
+import { Avatar, AvatarFallback, AvatarImage } from '@radix-ui/react-avatar';
+import { useSession } from 'next-auth/react';
+
+export type MenuItem = {
+  icon: React.ReactNode | React.ReactNode[];
+  label: string;
+  content?: React.ReactNode;
+};
+
+export default function Sidebar({
+  selectChange,
+}: {
+  selectChange?: (selectedItem: string | null) => void;
+}) {
+  const { data: session } = useSession();
+  const menuItemsTop: Array<MenuItem> = [
+    {
+      icon: <MemoryIcon className="h-10 w-10" />,
+      label: 'Memories',
+      content: <MemoriesBar />,
+    },
+  ];
+
+  const menuItemsBottom: Array<MenuItem> = [
+    {
+      icon: <Trash2 strokeWidth={1.3} className="h-6 w-6" />,
+      label: 'Trash',
+    },
+    {
+      icon: (
+        <div>
+          <Avatar>
+            {session?.user?.image ? (
+              <AvatarImage
+                className="h-6 w-6 rounded-full"
+                src={session?.user?.image}
+                alt="user pfp"
+              />
+            ) : (
+              <User2 strokeWidth={1.3} className="h-6 w-6" />
+            )}
+            <AvatarFallback>
+              {session?.user?.name?.split(' ').map((n) => n[0])}{' '}
+            </AvatarFallback>
+          </Avatar>
+        </div>
+      ),
+      label: 'Profile',
+    },
+  ];
+
+  const menuItems = [...menuItemsTop, ...menuItemsBottom];
+  const [selectedItem, setSelectedItem] = useState<string | null>(null);
+
+  const Subbar = menuItems.find((i) => i.label === selectedItem)?.content ?? (
+    <></>
+  );
+
+  useEffect(() => {
+    void selectChange?.(selectedItem);
+  }, [selectedItem]);
+
+  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 ">
+          <MenuItem
+            item={{
+              label: 'Memories',
+              icon: <MemoryIcon className="h-10 w-10" />,
+              content: <MemoriesBar />,
+            }}
+            selectedItem={selectedItem}
+            setSelectedItem={setSelectedItem}
+          />
+
+          <div className="mt-auto" />
+
+          <MenuItem
+            item={{
+              label: 'Trash',
+              icon: <Bin id="trash" className="z-[300] h-7 w-7" />,
+            }}
+            selectedItem={selectedItem}
+            id="trash-button"
+            setSelectedItem={setSelectedItem}
+          />
+          <MenuItem
+            item={{
+              label: 'Profile',
+              icon: (
+                <div className="mb-2">
+                  <Avatar>
+                    {session?.user?.image ? (
+                      <AvatarImage
+                        className="h-6 w-6 rounded-full"
+                        src={session?.user?.image}
+                        alt="@shadcn"
+                      />
+                    ) : (
+                      <User2 strokeWidth={1.3} className="h-6 w-6" />
+                    )}
+                    <AvatarFallback>
+                      {session?.user?.name?.split(' ').map((n) => n[0])}{' '}
+                    </AvatarFallback>
+                  </Avatar>
+                </div>
+              ),
+            }}
+            selectedItem={selectedItem}
+            setSelectedItem={setSelectedItem}
+          />
+        </div>
+        <AnimatePresence>
+          {selectedItem && <SubSidebar>{Subbar}</SubSidebar>}
+        </AnimatePresence>
+      </div>
+    </>
+  );
+}
+
+const MenuItem = ({
+  item: { icon, label },
+  selectedItem,
+  setSelectedItem,
+  ...props
+}: React.HTMLAttributes<HTMLButtonElement> & {
+  item: MenuItem;
+  selectedItem: string | null;
+  setSelectedItem: React.Dispatch<React.SetStateAction<string | null>>;
+}) => (
+  <button
+    data-state-on={selectedItem === label}
+    onClick={() => setSelectedItem((prev) => (prev === label ? null : label))}
+    className="on:opacity-100 on:bg-rgray-4 focus-visible:ring-rgray-7 relative z-[100] flex w-full flex-col items-center justify-center rounded-md px-3 py-3 opacity-80 ring-2 ring-transparent transition hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none"
+    {...props}
+  >
+    {icon}
+    <span className="">{label}</span>
+  </button>
+);
+
+export function SubSidebar({ children }: { children?: React.ReactNode }) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, x: '-100%' }}
+      animate={{ opacity: 1, x: 0 }}
+      exit={{
+        opacity: 0,
+        x: '-100%',
+        transition: { delay: 0.2 },
+      }}
+      transition={{
+        duration: 0.2,
+      }}
+      className="bg-rgray-3 border-r-rgray-6 absolute left-[100%] top-0 z-[10] hidden h-screen w-[30vw] items-start justify-center overflow-x-hidden border-r font-light md:flex"
+    >
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0, transition: { delay: 0 } }}
+        transition={{
+          delay: 0.2,
+        }}
+        className="z-[10] flex h-full w-full min-w-full flex-col items-center opacity-0"
+      >
+        {children}
+      </motion.div>
+    </motion.div>
+  );
+}
diff --git a/apps/web/src/components/ui/command.tsx b/apps/web/src/components/ui/command.tsx
new file mode 100644
index 00000000..74b7f2e8
--- /dev/null
+++ b/apps/web/src/components/ui/command.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "bg-rgray-3 text-rgray-11 flex h-full w-full flex-col overflow-hidden rounded-md focus-visible:outline-none [&>[cmdk-list-sizer]]:max-h-[250px] [&>[cmdk-list-sizer]]:overflow-y-scroll",
+      className,
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:text-rgray-11 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div
+    className="border-rgray-6 flex items-center border-b px-3"
+    cmdk-input-wrapper=""
+  >
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "placeholder:text-rgray-11/50 flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "text-rgray-12 [&_[cmdk-group-heading]]:text-rgray-11 overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("bg-rgray-3 -mx-1 h-px", className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "aria-selected:bg-rgray-5 aria-selected:text-rgray-12 relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm opacity-70 outline-none data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("text-gray-11 ml-auto text-xs tracking-widest", className)}
+      {...props}
+    />
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
new file mode 100644
index 00000000..bc36e749
--- /dev/null
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] border-rgray-6 bg-rgray-3 fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border p-6 shadow-lg duration-200 sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="ring-offset-rgray-2 focus:ring-rgray-7 data-[state=open]:bg-rgray-3 data-[state=open]:text-rgray-11 absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "mt-5 flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "mb-1 text-xl font-medium leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-rgray-11 text-sm", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
diff --git a/apps/web/src/components/ui/drawer.tsx b/apps/web/src/components/ui/drawer.tsx
new file mode 100644
index 00000000..28e8dbdf
--- /dev/null
+++ b/apps/web/src/components/ui/drawer.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+
+import { cn } from "@/lib/utils";
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+);
+Drawer.displayName = "Drawer";
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+const DrawerPortal = DrawerPrimitive.Portal;
+
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    data-drawer-overlay
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
+    overlay?: boolean;
+    handle?: boolean;
+  }
+>(({ className, children, overlay = true, handle = true, ...props }, ref) => (
+  <DrawerPortal>
+    {overlay && <DrawerOverlay />}
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "border-rgray-6 bg-rgray-2 fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border",
+        className,
+      )}
+      {...props}
+    >
+      {handle && (
+        <div className="bg-rgray-4 mx-auto mt-4 h-2 w-[100px] rounded-full " />
+      )}
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+));
+DrawerContent.displayName = "DrawerContent";
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+);
+DrawerHeader.displayName = "DrawerHeader";
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-rgray-12 text-xl font-medium leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-rgray-11 text-md", className)}
+    {...props}
+  />
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};
diff --git a/apps/web/src/components/ui/dropdown-menu.tsx b/apps/web/src/components/ui/dropdown-menu.tsx
index 375662bb..cbc5cb1e 100644
--- a/apps/web/src/components/ui/dropdown-menu.tsx
+++ b/apps/web/src/components/ui/dropdown-menu.tsx
@@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "data-[state=open]:animate-in bg-rgray-3 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-rgray-6 text-rgray-11 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md",
+        "data-[state=open]:animate-in bg-rgray-3 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-rgray-6 text-rgray-11 z-50 min-w-[9rem] overflow-hidden rounded-md border p-1 shadow-md",
         className,
       )}
       {...props}
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
index aae15c80..f697d540 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/apps/web/src/components/ui/input.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
@@ -11,15 +11,43 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-800 dark:bg-gray-950 dark:ring-offset-gray-950 dark:placeholder:text-gray-400 dark:focus-visible:ring-gray-300",
-          className
+          "border-rgray-6 text-rgray-11 placeholder:text-rgray-11 focus-visible:ring-rgray-7 flex h-10 w-full rounded-md border bg-transparent px-3 py-2 text-sm font-normal transition file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50 ",
+          className,
         )}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Input.displayName = "Input"
+    );
+  },
+);
 
-export { Input }
+export interface InputWithIconProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  icon: React.ReactNode;
+}
+
+const InputWithIcon = React.forwardRef<HTMLInputElement, InputWithIconProps>(
+  ({ className, type, icon, ...props }, ref) => {
+    return (
+      <div
+        className={cn(
+          "border-rgray-6 text-rgray-11 focus-within:ring-rgray-7 flex h-10 w-full items-center justify-center gap-2 rounded-md border bg-transparent px-3 py-2 text-sm font-normal transition focus-within:outline-none focus-within:ring-2 ",
+          className,
+        )}
+      >
+        {icon}
+        <input
+          type={type}
+          className={
+            "placeholder:text-rgray-11/50 w-full bg-transparent font-normal file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+          }
+          ref={ref}
+          {...props}
+        />
+      </div>
+    );
+  },
+);
+InputWithIcon.displayName = "Input";
+
+export { Input, InputWithIcon };
diff --git a/apps/web/src/components/ui/popover.tsx b/apps/web/src/components/ui/popover.tsx
new file mode 100644
index 00000000..cabe76a9
--- /dev/null
+++ b/apps/web/src/components/ui/popover.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@/lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
+    animate?: boolean;
+  }
+>(
+  (
+    { className, align = "center", animate = true, sideOffset = 4, ...props },
+    ref,
+  ) => (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        ref={ref}
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "border-rgray-6 bg-rgray-3 text-rgray-11 z-50 w-72 rounded-md border p-4 shadow-md outline-none",
+          animate &&
+            "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  ),
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };
diff --git a/apps/web/src/components/ui/textarea.tsx b/apps/web/src/components/ui/textarea.tsx
new file mode 100644
index 00000000..3b2c9ddd
--- /dev/null
+++ b/apps/web/src/components/ui/textarea.tsx
@@ -0,0 +1,57 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+import { HTMLMotionProps, motion } from "framer-motion";
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "border-rgray-6 text-rgray-11 placeholder:text-rgray-11/70 focus-within:ring-rgray-7 flex min-h-[80px] w-full rounded-md border bg-transparent px-3 py-2 text-sm font-normal transition focus-within:outline-none focus-within:ring-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Textarea.displayName = "Textarea";
+
+export interface Textarea2Props extends HTMLMotionProps<"div"> {
+  textAreaProps?: TextareaProps;
+  children: React.ReactNode | React.ReactNode[];
+}
+
+const Textarea2 = React.forwardRef<HTMLDivElement, Textarea2Props>(
+  ({ className, children, textAreaProps: _textAreaProps, ...props }, ref) => {
+    const { className: textAreaClassName, ...textAreaProps } =
+      _textAreaProps || {};
+    return (
+      <motion.div
+        ref={ref}
+        className={cn(
+          "border-rgray-6 text-rgray-11 has-[textarea:focus-visible]:ring-rgray-7 flex h-auto min-h-[80px] w-full flex-col items-start justify-center rounded-md border bg-transparent px-3 py-2 text-sm transition has-[textarea:focus-visible]:ring-2",
+          className,
+        )}
+        {...props}
+      >
+        <textarea
+          className={cn(
+            "text-rgray-11 h-full w-full resize-none bg-transparent placeholder:text-white/50 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+            textAreaClassName,
+          )}
+          {...textAreaProps}
+        />
+        {children}
+      </motion.div>
+    );
+  },
+);
+Textarea2.displayName = "Textarea2";
+
+export { Textarea, Textarea2 };