working similar files toggle

reorproject · Dec 15, 2023 · 0ffe03e · 0ffe03e
1 parent 4124d02
commit 0ffe03e
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 9 deletions.
diff --git a/src/components/File/MarkdownEditor.tsx b/src/components/File/MarkdownEditor.tsx
@@ -83,7 +83,7 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
             });
         })
 
-        // .use(nord)
+        .use(nord)
         .use(commonmark)
         // .use(gfm)
         .use(history)

diff --git a/src/components/FileEditorContainer.tsx b/src/components/FileEditorContainer.tsx
@@ -13,6 +13,7 @@ const FileEditorContainer: React.FC<FileEditorContainerProps> = ({}) => {
   const [selectedFilePath, setSelectedFilePath] = useState<string | null>(null);
   const lastSavedContentRef = useRef<string>("");
   const [showChatbot, setShowChatbot] = useState<boolean>(false);
+  const [showSimilarFiles, setShowSimilarFiles] = useState<boolean>(false);
 
   const onFileSelect = async (path: string) => {
     // so here we can save the actual content too\\
@@ -25,13 +26,17 @@ const FileEditorContainer: React.FC<FileEditorContainerProps> = ({}) => {
   const toggleChatbot = () => {
     setShowChatbot(!showChatbot);
   };
+  const toggleSimilarFiles = () => {
+    setShowSimilarFiles(!showSimilarFiles);
+  };
 
   return (
     <div>
       <TitleBar
         onFileSelect={onFileSelect}
         chatbotOpen={showChatbot}
         toggleChatbot={toggleChatbot}
+        toggleSimilarFiles={toggleSimilarFiles}
       />
 
       <div className="flex" style={{ height: "calc(100vh - 30px)" }}>
@@ -50,20 +55,25 @@ const FileEditorContainer: React.FC<FileEditorContainerProps> = ({}) => {
             style={{ marginRight: showChatbot ? "250px" : "0" }}
           >
             <div className="w-full flex h-full ">
-              <div className="w-[75%] h-full overflow-auto">
+              <div
+                className="h-full overflow-auto"
+                style={{ width: showSimilarFiles ? "75%" : "100%" }}
+              >
                 <MarkdownEditor
                   filePath={selectedFilePath}
                   setContentInParent={setEditorContent}
                   lastSavedContentRef={lastSavedContentRef}
                 />
                 {/* <MilkdownEditor /> */}
               </div>
-              <div className="w-[25%]">
-                <SimilarEntriesComponent
-                  filePath={selectedFilePath}
-                  onFileSelect={onFileSelect}
-                />
-              </div>
+              {showSimilarFiles && (
+                <div className="w-[25%]">
+                  <SimilarEntriesComponent
+                    filePath={selectedFilePath}
+                    onFileSelect={onFileSelect}
+                  />
+                </div>
+              )}
             </div>
           </div>
         )}

diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx
@@ -8,17 +8,20 @@ import { MdChatBubble } from "react-icons/md";
 import { useState } from "react";
 import { FaPenSquare } from "react-icons/fa";
 import { FaRegPenToSquare } from "react-icons/fa6";
+import { TbEqualDouble } from "react-icons/tb";
 
 interface TitleBarProps {
   onFileSelect: (path: string) => void;
   chatbotOpen: boolean;
   toggleChatbot: () => void;
+  toggleSimilarFiles: () => void;
 }
 
 const TitleBar: React.FC<TitleBarProps> = ({
   onFileSelect,
   chatbotOpen,
   toggleChatbot,
+  toggleSimilarFiles,
 }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -47,7 +50,18 @@ const TitleBar: React.FC<TitleBarProps> = ({
           onFileSelect={onFileSelect}
         />
       </div>
-      <div className="ml-auto">
+      <div className="ml-auto flex">
+        <button
+          className="bg-transparent border-none cursor-pointer"
+          onClick={toggleSimilarFiles}
+        >
+          <TbEqualDouble className="text-gray-600" size={24} />
+          {/* {chatbotOpen ? (
+            <MdChatBubble className="text-gray-600" size={24} />
+          ) : (
+            <MdChatBubbleOutline className="text-gray-600" size={24} />
+          )} */}
+        </button>
         <button
           className="bg-transparent border-none cursor-pointer"
           onClick={toggleChatbot}