Improve BMEditor

3 files changed, 25 insertions, 44 deletions

diff --git a/extension/src/components/BMEditor.tsx b/extension/src/components/BMEditor.tsx
index 1ac72c6..2579bdb 100644
--- a/extension/src/components/BMEditor.tsx
+++ b/extension/src/components/BMEditor.tsx
@@ -2,7 +2,6 @@ import React, {useContext, useEffect, useState} from "react";
 import CloseIcon from "../assets/close.svg?react"
 import {ActiveEdit} from "./Body.tsx";
 import {getBrowser} from "../main.tsx";
-import RadioButtonGroup from "./RadioButtonGroup.tsx";
 
 
 function BMEditor() {
@@ -17,8 +16,6 @@ function BMEditor() {
         });
     }, [activeEdit]);
 
-    if (!activeEdit) return;
-
     let isFolder = activeEdit && activeEdit.children && activeEdit.children.length > 0;
     return (
         <div id="settings-menu" className={activeEdit ? "open" : "closed"}>
@@ -26,28 +23,30 @@ function BMEditor() {
                 <CloseIcon/>
             </button>
 
-            <h1>Edit {isFolder ? "Folder" : "Bookmark"}</h1>
-
-            <h3>Name</h3>
-            <input type={"text"} defaultValue={activeEdit?.title} onChange={e => {
-                getBrowser().bookmarks.update(activeEdit!.id, {title: e.target.value})
-            }}/>
+            {activeEdit && (<>
+                <h1>Edit {isFolder ? "Folder" : "Bookmark"}</h1>
 
-            {!isFolder && (<>
-                <h3>URL</h3>
-                <input type={"url"} defaultValue={activeEdit?.url} onChange={e => {
-                    getBrowser().bookmarks.update(activeEdit!.id, {url: e.target.value})
+                <h3>Name</h3>
+                <input type={"text"} defaultValue={activeEdit?.title} onChange={e => {
+                    getBrowser().bookmarks.update(activeEdit!.id, {title: e.target.value})
                 }}/>
-            </>)}
 
-            <h3>Icon</h3>
-            {/*<RadioButtonGroup value={undefined}>*/}
-                {iconOptions && iconOptions.map(s =>
-                    // <option value={s}>
-                        <img src={s}/>
-                    // </option>
-                )}
-            {/*</RadioButtonGroup>*/}
+                {!isFolder && (<>
+                    <h3>URL</h3>
+                    <input type={"url"} defaultValue={activeEdit?.url} onChange={e => {
+                        getBrowser().bookmarks.update(activeEdit!.id, {url: e.target.value})
+                    }}/>
+                </>)}
+
+                <h3>Icon</h3>
+                {/*<RadioButtonGroup value={undefined}>*/}
+                    {iconOptions && iconOptions.map(s =>
+                        // <option value={s}>
+                            <img src={s}/>
+                        // </option>
+                    )}
+                {/*</RadioButtonGroup>*/}
+            </>)}
         </div>
     );
 }
diff --git a/extension/src/components/Bookmark.tsx b/extension/src/components/Bookmark.tsx
index e378b0f..2f1bbd9 100644
--- a/extension/src/components/Bookmark.tsx
+++ b/extension/src/components/Bookmark.tsx
@@ -19,7 +19,6 @@ function Bookmark(props: {id: string}) {
     let [bgColor, setBgColor] = React.useState<[number, number, number] | null>(null)
     let [bgColorPriority, setBgColorPriority] = React.useState(0);
     const [bmData, setBmData] = useState<BookmarkTreeNode | undefined>()
-    const [renameMode, setRenameMode] = useState(false);
 
     useEffect(() => {
         getBrowser().bookmarks.get(props.id).then(r => {
@@ -44,19 +43,6 @@ function Bookmark(props: {id: string}) {
         })
     }, [bmData]);
 
-    useEffect(() => {
-        let evl = () => {
-            console.log("clicked")
-            renameMode && setRenameMode(false);
-            console.log("evl unregistered")
-            document.body.removeEventListener('click', evl);
-        }
-        if (renameMode) {
-            console.log("evl registered")
-            document.body.addEventListener('click', evl);
-        }
-    }, [renameMode]);
-
     if (!bmData) return;
 
     function handleImageLoad(e: SyntheticEvent<HTMLImageElement, Event>) {
@@ -117,7 +103,8 @@ function Bookmark(props: {id: string}) {
 
     const handleEdit = (e: React.MouseEvent<HTMLButtonElement>) => {
         e.preventDefault()
-        setRenameMode(true)
+        setActiveEdit(null);
+        setActiveEdit(bmData);
         // setActiveEdit(bmData);
     };
 
@@ -145,13 +132,7 @@ function Bookmark(props: {id: string}) {
                         }
                     })()}
                 </div>
-                {renameMode
-                    ? <input type={'text'}
-                              defaultValue={bmData.title}
-                              onChange={e => {
-                                  getBrowser().bookmarks.update(props.id, {title: e.target.value})
-                              }}/>
-                    : <span>{bmData.title}</span>}
+                <span>{bmData.title}</span>
             </a>
             {settings.editMode && <ContextMenu onEdit={handleEdit} onDelete={handleDelete}/>}
             {activeDrag && activeDrag !== bmData &&
diff --git a/extension/src/components/FolderButton.tsx b/extension/src/components/FolderButton.tsx
index 374982a..7bd55c1 100644
--- a/extension/src/components/FolderButton.tsx
+++ b/extension/src/components/FolderButton.tsx
@@ -88,6 +88,7 @@ function FolderButton(props: {id: string}) {
 
     const handleEdit = (e: React.MouseEvent<HTMLButtonElement>) => {
         e.preventDefault();
+        setActiveEdit(null);
         setActiveEdit(bmData);
     };