1 files changed, 63 insertions, 30 deletions

diff --git a/extension/src/components/FolderButton.tsx b/extension/src/components/FolderButton.tsx
index eff035e..374982a 100644
--- a/extension/src/components/FolderButton.tsx
+++ b/extension/src/components/FolderButton.tsx
@@ -2,78 +2,111 @@ import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
 import FolderBody from "./FolderBody.tsx";
 import FolderIcon from "../assets/folder.svg?react"
 import FolderIconOpen from "../assets/folder_open.svg?react"
-import React, {useState} from "react";
+import React, {useEffect, useState} from "react";
 import DropTargets from "./DropTargets.tsx";
-import {ActiveDrag, Settings} from "./Body.tsx";
+import {ActiveDrag, ActiveEdit, Settings} from "./Body.tsx";
 import {getBrowser} from "../main.tsx";
+import ContextMenu from "./ContextMenu.tsx";
 
 /**
  * A component for the button used to open a bookmark folder.
  * This is themed the same as a bookmark
- *
- * @param props.data The BookmarkTreeNode containing the data of the folder
  */
-function FolderButton(props: {data: BookmarkTreeNode}) {
-    let [settings, _] = React.useContext(Settings);
+function FolderButton(props: {id: string}) {
+    let [settings, ] = React.useContext(Settings);
     let [activeDrag, setActiveDrag] = React.useContext(ActiveDrag);
+    let [, setActiveEdit] = React.useContext(ActiveEdit)
 
-    const [folderOpen, setFolderOpen] = useState(false);
+    const [folderOpen, setFolderOpen] = useState<undefined | boolean>(undefined);
+    const [bmData, setBmData] = useState<BookmarkTreeNode | undefined>()
+
+    useEffect(() => {
+        console.log(props.id+" state="+folderOpen)
+        getBrowser().storage.local.set({['keepopen-'+props.id]: folderOpen})
+    }, [folderOpen]);
+
+    useEffect(() => {
+        if (settings.keepFoldersOpen) {
+            getBrowser().storage.local.get('keepopen-' + props.id).then(r => {
+                setFolderOpen(r['keepopen-' + props.id] == true);
+            })
+        } else {
+            setFolderOpen(false);
+        }
+        getBrowser().bookmarks.get(props.id).then(r => {
+            setBmData(r[0])
+        })
+    }, []);
+
+    if (!bmData) return;
 
     // Dragging
-    function handleDragStart(e: React.DragEvent<HTMLAnchorElement>) {
+    const handleDragStart = (e: React.DragEvent<HTMLAnchorElement>) => {
         e.dataTransfer.setData("sowgro", "placeholder")
-    }
+    };
 
-    function handleDrag() {
-        setActiveDrag(props.data);
-    }
+    const handleDrag = () => {
+        setActiveDrag(bmData);
+    };
 
-    function handleDragEnd() {
+    const handleDragEnd = () => {
         console.log("drop end")
         setActiveDrag(null);
-    }
+    };
 
     // Dropping
-    function handleDropLeft() {
+    const handleDropLeft = () => {
         console.log("drop left folder")
         getBrowser().bookmarks.move(activeDrag!.id, {
-            parentId: props.data.parentId,
-            index: props.data.index
+            parentId: bmData.parentId,
+            index: bmData.index
         })
         location.reload()
-    }
+    };
 
-    function handleDropRight() {
+    const handleDropRight = () => {
         console.log("drop right folder")
         getBrowser().bookmarks.move(activeDrag!.id, {
-            parentId: props.data.parentId,
-            index: (props.data.index! + 1)
+            parentId: bmData.parentId,
+            index: (bmData.index! + 1)
         })
         location.reload();
-    }
+    };
 
-    function handleDropCenter() {
+    const handleDropCenter = () => {
         console.log("drop center folder")
         getBrowser().bookmarks.move(activeDrag!.id, {
-            parentId: props.data.id
+            parentId: bmData.id
         });
         location.reload()
-    }
+    };
+
+    const handleDelete = () => {
+        getBrowser().bookmarks.removeTree(bmData.id);
+        location.reload();
+    };
+
+    const handleEdit = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+        setActiveEdit(bmData);
+    };
 
     return(
         <>
             <div className={"bookmark"}>
-                <a onClick={() => setFolderOpen(!folderOpen)} draggable={settings.editMode} onDrag={handleDrag} onDragEnd={handleDragEnd}>
+                <a onClick={() => setFolderOpen(!folderOpen)} draggable={settings.editMode} onDrag={handleDrag}
+                   onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
                     <div className="icon-box">
                         {folderOpen ? <FolderIconOpen/> : <FolderIcon/>}
                     </div>
-                    <span>{props.data.title}</span>
+                    <span>{bmData.title}</span>
                 </a>
-                {activeDrag && activeDrag !== props.data &&
+                {settings.editMode && <ContextMenu onEdit={handleEdit} onDelete={handleDelete}/>}
+                {activeDrag && activeDrag !== bmData &&
                     <DropTargets onDropLeft={handleDropLeft} onDropRight={handleDropRight} onDropCenter={handleDropCenter}/>}
             </div>
-            {folderOpen && props.data.children && props.data.children.length > 0 &&
-                <FolderBody data={props.data}/>}
+            {folderOpen && /*bmData.children && bmData.children.length > 0 &&*/
+                <FolderBody id={bmData.id}/>}
         </>
     );
 }