notess

3 files changed, 60 insertions, 24 deletions

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