oofdefault-darkmode

13 files changed, 914 insertions, 119 deletions

diff --git a/apps/web/app/(dash)/actions.ts b/apps/web/app/(dash)/actions.ts
deleted file mode 100644
index 70c2a567..00000000
--- a/apps/web/app/(dash)/actions.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-"use server";
-
-import { cookies, headers } from "next/headers";
-import { db } from "../helpers/server/db";
-import { sessions, users, space } from "../helpers/server/db/schema";
-import { eq } from "drizzle-orm";
-import { redirect } from "next/navigation";
-
-export async function ensureAuth() {
-  const token =
-    cookies().get("next-auth.session-token")?.value ??
-    cookies().get("__Secure-authjs.session-token")?.value ??
-    cookies().get("authjs.session-token")?.value ??
-    headers().get("Authorization")?.replace("Bearer ", "");
-
-  if (!token) {
-    return undefined;
-  }
-
-  const sessionData = await db
-    .select()
-    .from(sessions)
-    .innerJoin(users, eq(users.id, sessions.userId))
-    .where(eq(sessions.sessionToken, token));
-
-  if (!sessionData || sessionData.length < 0) {
-    return undefined;
-  }
-
-  return {
-    user: sessionData[0]!.user,
-    session: sessionData[0]!,
-  };
-}
-
-export async function getSpaces() {
-  const data = await ensureAuth();
-  if (!data) {
-    redirect("/signin");
-  }
-
-  const sp = await db
-    .select()
-    .from(space)
-    .where(eq(space.user, data.user.email));
-
-  return sp;
-}
diff --git a/apps/web/app/(dash)/chat/CodeBlock.tsx b/apps/web/app/(dash)/chat/CodeBlock.tsx
new file mode 100644
index 00000000..0bb6a19d
--- /dev/null
+++ b/apps/web/app/(dash)/chat/CodeBlock.tsx
@@ -0,0 +1,90 @@
+import React, { useRef, useState } from "react";
+
+const CodeBlock = ({
+  lang,
+  codeChildren,
+}: {
+  lang: string;
+  codeChildren: React.ReactNode & React.ReactNode[];
+}) => {
+  const codeRef = useRef<HTMLElement>(null);
+
+  return (
+    <div className="bg-black rounded-md">
+      <CodeBar lang={lang} codeRef={codeRef} />
+      <div className="p-4 overflow-y-auto">
+        <code ref={codeRef} className={`!whitespace-pre hljs language-${lang}`}>
+          {codeChildren}
+        </code>
+      </div>
+    </div>
+  );
+};
+
+const CodeBar = React.memo(
+  ({
+    lang,
+    codeRef,
+  }: {
+    lang: string;
+    codeRef: React.RefObject<HTMLElement>;
+  }) => {
+    const [isCopied, setIsCopied] = useState<boolean>(false);
+    return (
+      <div className="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans">
+        <span className="">{lang}</span>
+        <button
+          className="flex ml-auto gap-2"
+          aria-label="copy codeblock"
+          onClick={async () => {
+            const codeString = codeRef.current?.textContent;
+            if (codeString)
+              navigator.clipboard.writeText(codeString).then(() => {
+                setIsCopied(true);
+                setTimeout(() => setIsCopied(false), 3000);
+              });
+          }}
+        >
+          {isCopied ? (
+            <>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="size-4"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75"
+                />
+              </svg>
+              Copied!
+            </>
+          ) : (
+            <>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="size-4"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
+                />
+              </svg>
+              Copy code
+            </>
+          )}
+        </button>
+      </div>
+    );
+  },
+);
+export default CodeBlock;
diff --git a/apps/web/app/(dash)/chat/actions.ts b/apps/web/app/(dash)/chat/actions.ts
index 908fe79e..e69de29b 100644
--- a/apps/web/app/(dash)/chat/actions.ts
+++ b/apps/web/app/(dash)/chat/actions.ts
@@ -1 +0,0 @@
-"use server";
diff --git a/apps/web/app/(dash)/chat/chatWindow.tsx b/apps/web/app/(dash)/chat/chatWindow.tsx
index 43c337ee..77c1f32b 100644
--- a/apps/web/app/(dash)/chat/chatWindow.tsx
+++ b/apps/web/app/(dash)/chat/chatWindow.tsx
@@ -6,29 +6,147 @@ import QueryInput from "../home/queryinput";
 import { cn } from "@repo/ui/lib/utils";
 import { motion } from "framer-motion";
 import { useRouter } from "next/navigation";
+import { ChatHistory } from "@repo/shared-types";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@repo/ui/shadcn/accordion";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import rehypeKatex from "rehype-katex";
+import rehypeHighlight from "rehype-highlight";
+import { code, p } from "./markdownRenderHelpers";
+import { codeLanguageSubset } from "@/lib/constants";
+import { z } from "zod";
+import { toast } from "sonner";
+import Link from "next/link";
+import { sources } from "next/dist/compiled/webpack/webpack";
 
-function ChatWindow({ q }: { q: string }) {
+function ChatWindow({
+  q,
+  spaces,
+}: {
+  q: string;
+  spaces: { id: string; name: string }[];
+}) {
   const [layout, setLayout] = useState<"chat" | "initial">("initial");
+  const [chatHistory, setChatHistory] = useState<ChatHistory[]>([
+    {
+      question: q,
+      answer: {
+        parts: [
+          // {
+          //   text: `It seems like there might be a typo in your question. Could you please clarify or provide more context? If you meant "interesting," please let me know what specific information or topic you find interesting, and I can help you with that.`,
+          // },
+        ],
+        sources: [],
+      },
+    },
+  ]);
 
   const router = useRouter();
 
+  const getAnswer = async (query: string, spaces: string[]) => {
+    const sourcesFetch = await fetch(
+      `/api/chat?q=${query}&spaces=${spaces}&sourcesOnly=true`,
+      {
+        method: "POST",
+        body: JSON.stringify({ chatHistory }),
+      },
+    );
+
+    // TODO: handle this properly
+    const sources = await sourcesFetch.json();
+
+    const sourcesZod = z.object({
+      ids: z.array(z.string()),
+      metadata: z.array(z.any()),
+    });
+
+    const sourcesParsed = sourcesZod.safeParse(sources);
+
+    if (!sourcesParsed.success) {
+      console.log(sources);
+      console.error(sourcesParsed.error);
+      toast.error("Something went wrong while getting the sources");
+      return;
+    }
+
+    setChatHistory((prevChatHistory) => {
+      const newChatHistory = [...prevChatHistory];
+      const lastAnswer = newChatHistory[newChatHistory.length - 1];
+      if (!lastAnswer) return prevChatHistory;
+      const filteredSourceUrls = new Set(
+        sourcesParsed.data.metadata.map((source) => source.url),
+      );
+      const uniqueSources = sourcesParsed.data.metadata.filter((source) => {
+        if (filteredSourceUrls.has(source.url)) {
+          filteredSourceUrls.delete(source.url);
+          return true;
+        }
+        return false;
+      });
+      lastAnswer.answer.sources = uniqueSources.map((source) => ({
+        title: source.title ?? "Untitled",
+        type: source.type ?? "page",
+        source: source.url ?? "https://supermemory.ai",
+        content: source.content ?? "No content available",
+        numChunks: sourcesParsed.data.metadata.filter(
+          (f) => f.url === source.url,
+        ).length,
+      }));
+      return newChatHistory;
+    });
+
+    const resp = await fetch(`/api/chat?q=${query}&spaces=${spaces}`, {
+      method: "POST",
+      body: JSON.stringify({ chatHistory }),
+    });
+
+    const reader = resp.body?.getReader();
+    let done = false;
+    let result = "";
+    while (!done && reader) {
+      const { value, done: d } = await reader.read();
+      done = d;
+
+      setChatHistory((prevChatHistory) => {
+        const newChatHistory = [...prevChatHistory];
+        const lastAnswer = newChatHistory[newChatHistory.length - 1];
+        if (!lastAnswer) return prevChatHistory;
+        lastAnswer.answer.parts.push({ text: new TextDecoder().decode(value) });
+        return newChatHistory;
+      });
+    }
+
+    console.log(result);
+  };
+
   useEffect(() => {
-    if (q !== "") {
+    if (q.trim().length > 0) {
+      getAnswer(
+        q,
+        spaces.map((s) => s.id),
+      );
       setTimeout(() => {
         setLayout("chat");
       }, 300);
     } else {
       router.push("/home");
     }
-  }, [q]);
+  }, []);
+
   return (
-    <div>
+    <div className="h-full">
       <AnimatePresence mode="popLayout">
         {layout === "initial" ? (
           <motion.div
             exit={{ opacity: 0 }}
             key="initial"
-            className="max-w-3xl flex mx-auto w-full flex-col"
+            className="max-w-3xl h-full justify-center items-center flex mx-auto w-full flex-col"
           >
             <div className="w-full h-96">
               <QueryInput initialQuery={q} initialSpaces={[]} disabled />
@@ -36,16 +154,121 @@ function ChatWindow({ q }: { q: string }) {
           </motion.div>
         ) : (
           <div
-            className="max-w-3xl flex mx-auto w-full flex-col mt-8"
+            className="max-w-3xl flex mx-auto w-full flex-col mt-24"
             key="chat"
           >
-            <h2
-              className={cn(
-                "transition-all transform translate-y-0 opacity-100 duration-500 ease-in-out font-semibold text-2xl",
-              )}
-            >
-              {q}
-            </h2>
+            {chatHistory.map((chat, idx) => (
+              <div
+                key={idx}
+                className={`mt-8 ${idx != chatHistory.length - 1 ? "pb-2 border-b" : ""}`}
+              >
+                <h2
+                  className={cn(
+                    "text-white transition-all transform translate-y-0 opacity-100 duration-500 ease-in-out font-semibold text-2xl",
+                  )}
+                >
+                  {chat.question}
+                </h2>
+
+                <div className="flex flex-col gap-2 mt-2">
+                  <div
+                    className={`${chat.answer.sources.length > 0 || chat.answer.parts.length === 0 ? "flex" : "hidden"}`}
+                  >
+                    <Accordion
+                      defaultValue={
+                        idx === chatHistory.length - 1 ? "memories" : ""
+                      }
+                      type="single"
+                      collapsible
+                    >
+                      <AccordionItem value="memories">
+                        <AccordionTrigger className="text-foreground-menu">
+                          Related Memories
+                        </AccordionTrigger>
+                        {/* TODO: fade out content on the right side, the fade goes away when the user scrolls */}
+                        <AccordionContent
+                          className="relative flex gap-2 max-w-3xl overflow-auto no-scrollbar"
+                          defaultChecked
+                        >
+                          {/* Loading state */}
+                          {chat.answer.sources.length > 0 ||
+                            (chat.answer.parts.length === 0 && (
+                              <>
+                                {[1, 2, 3, 4].map((_, idx) => (
+                                  <div
+                                    key={`loadingState-${idx}`}
+                                    className="rounded-xl bg-secondary p-4 flex flex-col gap-2 min-w-72 animate-pulse"
+                                  >
+                                    <div className="bg-slate-700 h-2 rounded-full w-1/2"></div>
+                                    <div className="bg-slate-700 h-2 rounded-full w-full"></div>
+                                  </div>
+                                ))}
+                              </>
+                            ))}
+                          {chat.answer.sources.map((source, idx) => (
+                            <Link
+                              href={source.source}
+                              key={idx}
+                              className="rounded-xl bg-secondary p-4 flex flex-col gap-2 min-w-72"
+                            >
+                              <div className="flex justify-between text-foreground-menu text-sm">
+                                <span>{source.type}</span>
+
+                                {source.numChunks > 1 && (
+                                  <span>{source.numChunks} chunks</span>
+                                )}
+                              </div>
+                              <div className="text-base">{source.title}</div>
+                              <div className="text-xs">
+                                {source.content.length > 100
+                                  ? source.content.slice(0, 100) + "..."
+                                  : source.content}
+                              </div>
+                            </Link>
+                          ))}
+                        </AccordionContent>
+                      </AccordionItem>
+                    </Accordion>
+                  </div>
+
+                  {/* Summary */}
+                  <div>
+                    <div className="text-foreground-menu py-2">Summary</div>
+                    <div className="text-base">
+                      {chat.answer.parts.length === 0 && (
+                        <div className="animate-pulse flex space-x-4">
+                          <div className="flex-1 space-y-3 py-1">
+                            <div className="h-2 bg-slate-700 rounded"></div>
+                            <div className="h-2 bg-slate-700 rounded"></div>
+                          </div>
+                        </div>
+                      )}
+                      <Markdown
+                        remarkPlugins={[remarkGfm, [remarkMath]]}
+                        rehypePlugins={[
+                          rehypeKatex,
+                          [
+                            rehypeHighlight,
+                            {
+                              detect: true,
+                              ignoreMissing: true,
+                              subset: codeLanguageSubset,
+                            },
+                          ],
+                        ]}
+                        components={{
+                          code: code as any,
+                          p: p as any,
+                        }}
+                        className="flex flex-col gap-2"
+                      >
+                        {chat.answer.parts.map((part) => part.text).join("")}
+                      </Markdown>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
           </div>
         )}
       </AnimatePresence>
diff --git a/apps/web/app/(dash)/chat/markdownRenderHelpers.tsx b/apps/web/app/(dash)/chat/markdownRenderHelpers.tsx
new file mode 100644
index 00000000..747d4fca
--- /dev/null
+++ b/apps/web/app/(dash)/chat/markdownRenderHelpers.tsx
@@ -0,0 +1,25 @@
+import { DetailedHTMLProps, HTMLAttributes, memo } from "react";
+import { ExtraProps } from "react-markdown";
+import CodeBlock from "./CodeBlock";
+
+export const code = memo((props: JSX.IntrinsicElements["code"]) => {
+  const { className, children } = props;
+  const match = /language-(\w+)/.exec(className || "");
+  const lang = match && match[1];
+
+  return <CodeBlock lang={lang || "text"} codeChildren={children as any} />;
+});
+
+export const p = memo(
+  (
+    props?: Omit<
+      DetailedHTMLProps<
+        HTMLAttributes<HTMLParagraphElement>,
+        HTMLParagraphElement
+      >,
+      "ref"
+    >,
+  ) => {
+    return <p className="whitespace-pre-wrap">{props?.children}</p>;
+  },
+);
diff --git a/apps/web/app/(dash)/chat/page.tsx b/apps/web/app/(dash)/chat/page.tsx
index 9e28fda7..73519851 100644
--- a/apps/web/app/(dash)/chat/page.tsx
+++ b/apps/web/app/(dash)/chat/page.tsx
@@ -1,5 +1,7 @@
 import ChatWindow from "./chatWindow";
-import { chatSearchParamsCache } from "../../helpers/lib/searchParams";
+import { chatSearchParamsCache } from "../../../lib/searchParams";
+// @ts-expect-error
+await import("katex/dist/katex.min.css");
 
 function Page({
   searchParams,
@@ -10,7 +12,7 @@ function Page({
 
   console.log(spaces);
 
-  return <ChatWindow q={q} />;
+  return <ChatWindow q={q} spaces={[]} />;
 }
 
 export default Page;
diff --git a/apps/web/app/(dash)/dynamicisland.tsx b/apps/web/app/(dash)/dynamicisland.tsx
new file mode 100644
index 00000000..6fa56fae
--- /dev/null
+++ b/apps/web/app/(dash)/dynamicisland.tsx
@@ -0,0 +1,373 @@
+"use client";
+
+import { AddIcon } from "@repo/ui/icons";
+import Image from "next/image";
+
+import { AnimatePresence, useMotionValueEvent, useScroll } from "framer-motion";
+import { useActionState, useEffect, useRef, useState } from "react";
+import { motion } from "framer-motion";
+import { Label } from "@repo/ui/shadcn/label";
+import { Input } from "@repo/ui/shadcn/input";
+import { Textarea } from "@repo/ui/shadcn/textarea";
+import { createMemory, createSpace } from "../actions/doers";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@repo/ui/shadcn/select";
+import { Space } from "../actions/types";
+import { getSpaces } from "../actions/fetchers";
+import { toast } from "sonner";
+import { useFormStatus } from "react-dom";
+
+export function DynamicIsland() {
+  const { scrollYProgress } = useScroll();
+  const [visible, setVisible] = useState(true);
+
+  useMotionValueEvent(scrollYProgress, "change", (current) => {
+    if (typeof current === "number") {
+      let direction = current! - scrollYProgress.getPrevious()!;
+
+      if (direction < 0 || direction === 1) {
+        setVisible(true);
+      } else {
+        setVisible(false);
+      }
+    }
+  });
+
+  return (
+    <div className="fixed z-40 left-1/2 -translate-x-1/2 top-12">
+      <AnimatePresence mode="wait">
+        <motion.div
+          initial={{
+            opacity: 1,
+            y: -150,
+          }}
+          animate={{
+            y: visible ? 0 : -150,
+            opacity: visible ? 1 : 0,
+          }}
+          transition={{
+            duration: 0.2,
+          }}
+          className="flex flex-col items-center"
+        >
+          <DynamicIslandContent />
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  );
+}
+
+export default DynamicIsland;
+
+function DynamicIslandContent() {
+  const [show, setshow] = useState(true);
+  function cancelfn() {
+    setshow(true);
+  }
+
+  const lastBtn = useRef<string>();
+  useEffect(() => {
+    console.log(show);
+  }, [show]);
+
+  useEffect(() => {
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") {
+        setshow(true);
+      }
+      console.log(e.key, lastBtn.current);
+      if (e.key === "a" && lastBtn.current === "Alt") {
+        setshow(false);
+      }
+      lastBtn.current = e.key;
+    });
+  }, []);
+  return (
+    <>
+      {show ? (
+        <div
+          onClick={() => setshow(!show)}
+          className="bg-secondary px-3 w-[2.23rem] overflow-hidden hover:w-[9.2rem] whitespace-nowrap py-2 rounded-3xl  transition-[width] cursor-pointer"
+        >
+          <div className="flex gap-4 items-center">
+            <Image src={AddIcon} alt="Add icon" />
+            Add Content
+          </div>
+        </div>
+      ) : (
+        <div>
+          <ToolBar cancelfn={cancelfn} />
+        </div>
+      )}
+    </>
+  );
+}
+
+const fakeitems = ["spaces", "page", "note"];
+
+function ToolBar({ cancelfn }: { cancelfn: () => void }) {
+  const [spaces, setSpaces] = useState<Space[]>([]);
+
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    (async () => {
+      let spaces = await getSpaces();
+
+      if (!spaces.success || !spaces.data) {
+        toast.warning("Unable to get spaces", {
+          richColors: true,
+        });
+        setSpaces([]);
+        return;
+      }
+      setSpaces(spaces.data);
+    })();
+  }, []);
+
+  return (
+    <AnimatePresence mode="wait">
+      <motion.div
+        initial={{
+          opacity: 0,
+          y: 20,
+        }}
+        animate={{
+          y: 0,
+          opacity: 1,
+        }}
+        exit={{
+          opacity: 0,
+          y: 20,
+        }}
+        transition={{
+          duration: 0.2,
+        }}
+        className="flex flex-col items-center"
+      >
+        <div className="bg-secondary py-[.35rem] px-[.6rem] rounded-2xl">
+          <HoverEffect
+            items={fakeitems}
+            index={index}
+            indexFn={(i) => setIndex(i)}
+          />
+        </div>
+        {index === 0 ? (
+          <SpaceForm cancelfn={cancelfn} />
+        ) : index === 1 ? (
+          <PageForm cancelfn={cancelfn} spaces={spaces} />
+        ) : (
+          <NoteForm cancelfn={cancelfn} spaces={spaces} />
+        )}
+      </motion.div>
+    </AnimatePresence>
+  );
+}
+
+export const HoverEffect = ({
+  items,
+  index,
+  indexFn,
+}: {
+  items: string[];
+  index: number;
+  indexFn: (i: number) => void;
+}) => {
+  return (
+    <div className={"flex"}>
+      {items.map((item, idx) => (
+        <button
+          key={idx}
+          className="relative block h-full w-full px-2 py-1"
+          onClick={() => indexFn(idx)}
+        >
+          <AnimatePresence>
+            {index === idx && (
+              <motion.span
+                className="absolute inset-0 block h-full w-full rounded-xl bg-[#2B3237]"
+                layoutId="hoverBackground"
+                initial={{ opacity: 0 }}
+                animate={{
+                  opacity: 1,
+                  transition: { duration: 0.15 },
+                }}
+                exit={{
+                  opacity: 0,
+                  transition: { duration: 0.15, delay: 0.2 },
+                }}
+              />
+            )}
+          </AnimatePresence>
+          <h3 className="text-[#858B92] z-50 relative">{item}</h3>
+        </button>
+      ))}
+    </div>
+  );
+};
+
+function SpaceForm({ cancelfn }: { cancelfn: () => void }) {
+  return (
+    <form
+      action={createSpace}
+      className="bg-secondary border border-muted-foreground px-4 py-3 rounded-2xl mt-2 flex flex-col gap-3"
+    >
+      <div>
+        <Label className="text-[#858B92]" htmlFor="name">
+          Name
+        </Label>
+        <Input
+          className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0"
+          id="name"
+          name="name"
+        />
+      </div>
+      <div className="flex justify-between">
+        <a className="text-blue-500" href="">
+          pull from store
+        </a>
+        {/* <div
+          onClick={cancelfn}
+          className="bg-[#2B3237] px-2 py-1 rounded-xl cursor-pointer"
+        >
+          cancel
+        </div> */}
+        <button
+          type="submit"
+          className="bg-[#2B3237] px-2 py-1 rounded-xl cursor-pointer"
+        >
+          Submit
+        </button>
+      </div>
+    </form>
+  );
+}
+
+function PageForm({
+  cancelfn,
+  spaces,
+}: {
+  cancelfn: () => void;
+  spaces: Space[];
+}) {
+  const [loading, setLoading] = useState(false);
+
+  const { pending } = useFormStatus();
+  return (
+    <form
+      action={async (e: FormData) => {
+        const content = e.get("content")?.toString();
+        const space = e.get("space")?.toString();
+        if (!content) {
+          toast.error("Content is required");
+          return;
+        }
+        setLoading(true);
+        const cont = await createMemory({
+          content: content,
+          spaces: space ? [space] : undefined,
+        });
+
+        console.log(cont);
+        setLoading(false);
+        if (cont.success) {
+          toast.success("Memory created");
+        } else {
+          toast.error("Memory creation failed");
+        }
+      }}
+      className="bg-secondary border border-muted-foreground px-4 py-3 rounded-2xl mt-2 flex flex-col gap-3"
+    >
+      <div>
+        <Label className="text-[#858B92]" htmlFor="space">
+          Space
+        </Label>
+        <Select name="space">
+          <SelectTrigger>
+            <SelectValue placeholder="Space" />
+          </SelectTrigger>
+          <SelectContent className="bg-secondary text-white">
+            {spaces.map((space) => (
+              <SelectItem key={space.id} value={space.id.toString()}>
+                {space.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div key={`${loading}-${pending}`}>
+        {loading ? <div>Loading...</div> : "not loading"}
+      </div>
+      <div>
+        <Label className="text-[#858B92]" htmlFor="name">
+          Page Url
+        </Label>
+        <Input
+          className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0"
+          id="input"
+          name="content"
+        />
+      </div>
+      <div className="flex justify-end">
+        <button
+          type="submit"
+          className="bg-[#2B3237] px-2 py-1 rounded-xl cursor-pointer"
+        >
+          Submit
+        </button>
+      </div>
+    </form>
+  );
+}
+
+function NoteForm({
+  cancelfn,
+  spaces,
+}: {
+  cancelfn: () => void;
+  spaces: Space[];
+}) {
+  return (
+    <div className="bg-secondary border border-muted-foreground px-4 py-3 rounded-2xl mt-2 flex flex-col gap-3">
+      <div>
+        <Label className="text-[#858B92]" htmlFor="name">
+          Space
+        </Label>
+        <Select>
+          <SelectTrigger>
+            <SelectValue placeholder="Space" />
+          </SelectTrigger>
+          <SelectContent className="bg-secondary text-white">
+            {spaces.map((space) => (
+              <SelectItem key={space.id} value={space.id.toString()}>
+                {space.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div>
+        <Label className="text-[#858B92]" htmlFor="name">
+          Note
+        </Label>
+        <Textarea
+          cols={4}
+          className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0 resize-none"
+          id="name"
+        />
+      </div>
+      <div className="flex justify-end">
+        <div
+          onClick={cancelfn}
+          className="bg-[#2B3237] px-2 py-1 rounded-xl cursor-pointer"
+        >
+          cancel
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/app/(dash)/header.tsx b/apps/web/app/(dash)/header.tsx
index 104c63bc..026cb080 100644
--- a/apps/web/app/(dash)/header.tsx
+++ b/apps/web/app/(dash)/header.tsx
@@ -2,49 +2,25 @@ import React from "react";
 import Image from "next/image";
 import Link from "next/link";
 import Logo from "../../public/logo.svg";
-import { AddIcon, ChatIcon } from "@repo/ui/icons";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@repo/ui/shadcn/tabs";
+import { ChatIcon } from "@repo/ui/icons";
+
+import DynamicIsland from "./dynamicisland";
 
 function Header() {
   return (
     <div>
-      <div className="flex items-center justify-between relative z-10">
-        <Link href="/">
+      <div className="fixed left-0 w-full flex items-center justify-between z-10">
+        <Link className="px-5" href="/home">
           <Image
             src={Logo}
             alt="SuperMemory logo"
-            className="hover:brightness-125 duration-200"
+            className="hover:brightness-75 brightness-50 duration-200"
           />
         </Link>
 
-        <Tabs
-          className="absolute flex flex-col justify-center items-center w-full -z-10 group top-0 transition-transform duration-1000 ease-out"
-          defaultValue="account"
-        >
-          <div className="bg-secondary all-center h-11 rounded-full p-2 min-w-14">
-            <button className="p-2 group-hover:hidden transition duration-500 ease-in-out">
-              <Image src={AddIcon} alt="Add icon" />
-            </button>
-
-            <div className="hidden group-hover:flex inset-0 transition-opacity duration-500 ease-in-out">
-              <TabsList className="p-2">
-                <TabsTrigger value="account">Account</TabsTrigger>
-                <TabsTrigger value="password">Password</TabsTrigger>
-              </TabsList>
-            </div>
-          </div>
-
-          <div className="bg-secondary all-center rounded-full p-2 mt-4 min-w-14 hidden group-hover:block">
-            <TabsContent value="account">
-              Make changes to your account here.
-            </TabsContent>
-            <TabsContent value="password">
-              Change your password here.
-            </TabsContent>
-          </div>
-        </Tabs>
+        <DynamicIsland />
 
-        <button className="flex shrink-0 duration-200 items-center gap-2 px-2 py-1.5 rounded-xl hover:bg-secondary">
+        <button className="flex shrink-0 duration-200 items-center gap-2 px-5 py-1.5 rounded-xl hover:bg-secondary">
           <Image src={ChatIcon} alt="Chat icon" />
           Start new chat
         </button>
diff --git a/apps/web/app/(dash)/home/page.tsx b/apps/web/app/(dash)/home/page.tsx
index 7a6bb94f..55f2928e 100644
--- a/apps/web/app/(dash)/home/page.tsx
+++ b/apps/web/app/(dash)/home/page.tsx
@@ -2,8 +2,8 @@ import React from "react";
 import Menu from "../menu";
 import Header from "../header";
 import QueryInput from "./queryinput";
-import { homeSearchParamsCache } from "@/app/helpers/lib/searchParams";
-import { getSpaces } from "../actions";
+import { homeSearchParamsCache } from "@/lib/searchParams";
+import { getSpaces } from "@/app/actions/fetchers";
 
 async function Page({
   searchParams,
@@ -13,15 +13,20 @@ async function Page({
   // TODO: use this to show a welcome page/modal
   const { firstTime } = homeSearchParamsCache.parse(searchParams);
 
-  const spaces = await getSpaces();
+  let spaces = await getSpaces();
+
+  if (!spaces.success) {
+    // TODO: handle this error properly.
+    spaces.data = [];
+  }
 
   return (
-    <div className="max-w-3xl flex mx-auto w-full flex-col">
+    <div className="max-w-3xl h-full justify-center flex mx-auto w-full flex-col">
       {/* all content goes here */}
       {/* <div className="">hi {firstTime ? 'first time' : ''}</div> */}
 
       <div className="w-full h-96">
-        <QueryInput initialSpaces={spaces} />
+        <QueryInput initialSpaces={spaces.data} />
       </div>
     </div>
   );
diff --git a/apps/web/app/(dash)/home/queryinput.tsx b/apps/web/app/(dash)/home/queryinput.tsx
index d098fda8..d0c27b8d 100644
--- a/apps/web/app/(dash)/home/queryinput.tsx
+++ b/apps/web/app/(dash)/home/queryinput.tsx
@@ -2,10 +2,11 @@
 
 import { ArrowRightIcon } from "@repo/ui/icons";
 import Image from "next/image";
-import React, { useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import Divider from "@repo/ui/shadcn/divider";
 import { MultipleSelector, Option } from "@repo/ui/shadcn/combobox";
 import { useRouter } from "next/navigation";
+import { getSpaces } from "@/app/actions/fetchers";
 
 function QueryInput({
   initialQuery = "",
@@ -13,7 +14,10 @@ function QueryInput({
   disabled = false,
 }: {
   initialQuery?: string;
-  initialSpaces?: { user: string | null; id: number; name: string }[];
+  initialSpaces?: {
+    id: number;
+    name: string;
+  }[];
   disabled?: boolean;
 }) {
   const [q, setQ] = useState(initialQuery);
@@ -41,14 +45,18 @@ function QueryInput({
     return newQ;
   };
 
-  const options = initialSpaces.map((x) => ({
-    label: x.name,
-    value: x.id.toString(),
-  }));
+  const options = useMemo(
+    () =>
+      initialSpaces.map((x) => ({
+        label: x.name,
+        value: x.id.toString(),
+      })),
+    [initialSpaces],
+  );
 
   return (
     <div>
-      <div className="bg-secondary rounded-t-[24px] w-full mt-40">
+      <div className="bg-secondary rounded-t-[24px]">
         {/* input and action button */}
         <form action={async () => push(parseQ())} className="flex gap-4 p-3">
           <textarea
@@ -82,6 +90,7 @@ function QueryInput({
       {/* selected sources */}
       <div className="flex items-center gap-6 p-2 h-auto bg-secondary rounded-b-[24px]">
         <MultipleSelector
+          key={options.length}
           disabled={disabled}
           defaultOptions={options}
           onChange={(e) => setSelectedSpaces(e.map((x) => parseInt(x.value)))}
diff --git a/apps/web/app/(dash)/layout.tsx b/apps/web/app/(dash)/layout.tsx
index dffa27fa..3ec8926e 100644
--- a/apps/web/app/(dash)/layout.tsx
+++ b/apps/web/app/(dash)/layout.tsx
@@ -1,22 +1,25 @@
 import Header from "./header";
 import Menu from "./menu";
-import { ensureAuth } from "./actions";
 import { redirect } from "next/navigation";
+import { auth } from "../../server/auth";
+import { Toaster } from "@repo/ui/shadcn/sonner";
 
 async function Layout({ children }: { children: React.ReactNode }) {
-  const info = await ensureAuth();
+  const info = await auth();
 
   if (!info) {
     return redirect("/signin");
   }
 
   return (
-    <main className="h-screen flex flex-col p-4 relative">
+    <main className="h-screen flex flex-col p-4 relative ">
       <Header />
 
       <Menu />
 
       {children}
+
+      <Toaster />
     </main>
   );
 }
diff --git a/apps/web/app/(dash)/memories/page.tsx b/apps/web/app/(dash)/memories/page.tsx
new file mode 100644
index 00000000..ff746d1d
--- /dev/null
+++ b/apps/web/app/(dash)/memories/page.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import { getAllUserMemoriesAndSpaces } from "@/app/actions/fetchers";
+import { Space } from "@/app/actions/types";
+import { Content } from "@/server/db/schema";
+import { NextIcon, SearchIcon, UrlIcon } from "@repo/ui/icons";
+import Image from "next/image";
+import React, { useEffect, useState } from "react";
+
+function Page() {
+  const [filter, setFilter] = useState("All");
+  const setFilterfn = (i: string) => setFilter(i);
+
+  const [search, setSearch] = useState("");
+
+  const [memoriesAndSpaces, setMemoriesAndSpaces] = useState<{
+    memories: Content[];
+    spaces: Space[];
+  }>({ memories: [], spaces: [] });
+
+  useEffect(() => {
+    (async () => {
+      const { success, data } = await getAllUserMemoriesAndSpaces();
+      if (!success ?? !data) return;
+      setMemoriesAndSpaces({ memories: data.memories, spaces: data.spaces });
+    })();
+  }, []);
+
+  return (
+    <div className="max-w-3xl min-w-3xl py-36 h-full flex mx-auto w-full flex-col gap-12">
+      <h2 className="text-white w-full font-medium text-2xl text-left">
+        My Memories
+      </h2>
+
+      <div className="flex flex-col gap-4">
+        <div className="w-full relative">
+          <input
+            type="text"
+            className=" w-full py-3 rounded-md text-lg pl-8 bg-[#1F2428] outline-none"
+            placeholder="search here..."
+          />
+          <Image
+            className="absolute top-1/2 -translate-y-1/2 left-2"
+            src={SearchIcon}
+            alt="Search icon"
+          />
+        </div>
+
+        <Filters filter={filter} setFilter={setFilterfn} />
+      </div>
+      <div>
+        <div className="text-[#B3BCC5]">Spaces</div>
+        {memoriesAndSpaces.spaces.map((space) => (
+          <TabComponent title={space.name} description={space.id.toString()} />
+        ))}
+      </div>
+
+      <div>
+        <div className="text-[#B3BCC5]">Pages</div>
+        {memoriesAndSpaces.memories.map((memory) => (
+          <LinkComponent title={memory.title ?? "No title"} url={memory.url} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function TabComponent({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) {
+  return (
+    <div className="flex items-center my-6">
+      <div>
+        <div className="h-12 w-12 bg-[#1F2428] flex justify-center items-center rounded-md">
+          {title.slice(0, 2).toUpperCase()}
+        </div>
+      </div>
+      <div className="grow px-4">
+        <div className="text-lg text-[#fff]">{title}</div>
+        <div>{description}</div>
+      </div>
+      <div>
+        <Image src={NextIcon} alt="Search icon" />
+      </div>
+    </div>
+  );
+}
+
+function LinkComponent({ title, url }: { title: string; url: string }) {
+  return (
+    <div className="flex items-center my-6">
+      <div>
+        <div className="h-12 w-12 bg-[#1F2428] flex justify-center items-center rounded-md">
+          <Image src={UrlIcon} alt="Url icon" />
+        </div>
+      </div>
+      <div className="grow px-4">
+        <div className="text-lg text-[#fff]">{title}</div>
+        <div>{url}</div>
+      </div>
+    </div>
+  );
+}
+
+const FilterMethods = ["All", "Spaces", "Pages", "Notes"];
+function Filters({
+  setFilter,
+  filter,
+}: {
+  setFilter: (i: string) => void;
+  filter: string;
+}) {
+  return (
+    <div className="flex gap-4">
+      {FilterMethods.map((i) => {
+        return (
+          <div
+            onClick={() => setFilter(i)}
+            className={`transition px-6 py-2 rounded-xl  ${i === filter ? "bg-[#21303D] text-[#369DFD]" : "text-[#B3BCC5] bg-[#1F2428] hover:bg-[#1f262d] hover:text-[#76a3cc]"}`}
+          >
+            {i}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export default Page;
diff --git a/apps/web/app/(dash)/menu.tsx b/apps/web/app/(dash)/menu.tsx
index 1177bca6..5f26f545 100644
--- a/apps/web/app/(dash)/menu.tsx
+++ b/apps/web/app/(dash)/menu.tsx
@@ -1,13 +1,14 @@
 import React from "react";
 import Image from "next/image";
 import { MemoriesIcon, ExploreIcon, HistoryIcon } from "@repo/ui/icons";
+import Link from "next/link";
 
 function Menu() {
   const menuItems = [
     {
       icon: MemoriesIcon,
       text: "Memories",
-      url: "/",
+      url: "/memories",
     },
     {
       icon: ExploreIcon,
@@ -22,23 +23,27 @@ function Menu() {
   ];
 
   return (
-    <div className="absolute h-full p-4 flex items-center top-0 left-0">
+    <div className="fixed h-screen pb-[25vh] w-full p-4 flex items-end justify-end lg:justify-start lg:items-center top-0 left-0 pointer-events-none">
       <div className="">
-        <div className="hover:rounded-2x group inline-flex w-14 text-foreground-menu text-[15px] font-medium flex-col items-start gap-6 overflow-hidden rounded-[28px] bg-secondary px-3 py-4 duration-200 hover:w-40">
+        <div className="pointer-events-auto group flex w-14 text-foreground-menu text-[15px] font-medium flex-col items-start gap-6 overflow-hidden rounded-[28px] bg-secondary px-3 py-4 duration-200 hover:w-40">
           {menuItems.map((item) => (
-            <div
+            <Link
+              href={item.url}
               key={item.url}
-              className="flex w-full cursor-pointer items-center gap-3 px-1 duration-200 hover:scale-105 hover:brightness-150 active:scale-90"
+              className="flex w-full cursor-pointer items-center gap-3 px-1 duration-200 hover:scale-105 hover:brightness-150 active:scale-90 justify-end md:justify-start"
             >
+              <p className="md:hidden opacity-0 duration-200 group-hover:opacity-100">
+                {item.text}
+              </p>
               <Image
                 src={item.icon}
                 alt={`${item.text} icon`}
-                className="hover:brightness-125 duration-200"
+                className="hover:brightness-125 duration-200 "
               />
-              <p className="opacity-0 duration-200 group-hover:opacity-100">
+              <p className="hidden md:block opacity-0 duration-200 group-hover:opacity-100">
                 {item.text}
               </p>
-            </div>
+            </Link>
           ))}
         </div>
       </div>