make new note component a modal

reorproject · Nov 29, 2023 · cf13f8d · cf13f8d
1 parent 89fb07d
commit cf13f8d
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 20 deletions.
diff --git a/src/components/File/NewNote.tsx b/src/components/File/NewNote.tsx
@@ -1,19 +1,15 @@
 import React, { useState } from "react";
 
-export interface RagnoteDBEntry {
-  notepath: string;
-  vector?: Float32Array;
-  content: string;
-  subnoteindex: number;
-  timeadded: Date;
-}
-
 interface NewNoteComponentProps {
   onFileSelect: (path: string) => void;
+  isOpen: boolean;
+  onClose: () => void;
 }
 
 const NewNoteComponent: React.FC<NewNoteComponentProps> = ({
   onFileSelect,
+  isOpen,
+  onClose,
 }) => {
   const [fileName, setFileName] = useState<string>("");
 
@@ -25,6 +21,7 @@ const NewNoteComponent: React.FC<NewNoteComponentProps> = ({
     console.log("NEW NOTE PATH: ", notePath);
     window.files.createFile(notePath, "");
     onFileSelect(notePath);
+    onClose(); // Close modal after file creation
   };
 
   const handleKeyPress = (e: React.KeyboardEvent) => {
@@ -33,17 +30,31 @@ const NewNoteComponent: React.FC<NewNoteComponentProps> = ({
     }
   };
 
+  if (!isOpen) {
+    return null;
+  }
+
   return (
-    <div className="flex relative p-0.5">
-      <input
-        type="text"
-        className="border border-gray-300 rounded-md p-2 w-full h-[7px]"
-        value={fileName}
-        onChange={(e) => setFileName(e.target.value)}
-        onKeyPress={handleKeyPress}
-        placeholder="Name"
-      />
-      <div onClick={sendNewNoteMsg}>Create</div>
+    <div className="fixed inset-0 z-50 overflow-auto bg-smoke-light flex">
+      <div className="relative p-8 bg-white w-full max-w-md m-auto flex-col flex rounded-lg">
+        <span className="absolute top-0 right-0 p-4" onClick={onClose}>
+          [Close]
+        </span>
+        <input
+          type="text"
+          className="border border-gray-300 rounded-md p-2 w-full"
+          value={fileName}
+          onChange={(e) => setFileName(e.target.value)}
+          onKeyPress={handleKeyPress}
+          placeholder="Name"
+        />
+        <button
+          onClick={sendNewNoteMsg}
+          className="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+        >
+          Create
+        </button>
+      </div>
     </div>
   );
 };

diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx
@@ -5,6 +5,7 @@ import { HiOutlineSearch } from "react-icons/hi"; // Solid search icon
 import SearchComponent from "./Search/Search";
 import NewNoteComponent from "./File/NewNote";
 import { MdChatBubble } from "react-icons/md";
+import { useState } from "react";
 
 interface TitleBarProps {
   onFileSelect: (path: string) => void;
@@ -17,6 +18,11 @@ const TitleBar: React.FC<TitleBarProps> = ({
   chatbotOpen,
   toggleChatbot,
 }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const toggleModal = () => {
+    setIsModalOpen(!isModalOpen);
+  };
   return (
     <div
       id="customTitleBar"
@@ -29,10 +35,18 @@ const TitleBar: React.FC<TitleBarProps> = ({
         <div className="w-[120px] mr-2">
           <SearchComponent onFileSelect={onFileSelect} />
         </div>
-        <button className="bg-transparent border-none cursor-pointer">
+        <button
+          className="bg-transparent border-none cursor-pointer"
+          onClick={toggleModal}
+        >
           <HiOutlinePlusCircle className="text-gray-600" size={24} />
         </button>
-        <NewNoteComponent onFileSelect={onFileSelect} />
+
+        <NewNoteComponent
+          isOpen={isModalOpen}
+          onClose={toggleModal}
+          onFileSelect={onFileSelect}
+        />
       </div>
       <div className="ml-auto">
         <button