From 37f9cb4a0dbb83aad1aaae0d88fd488edc5e56ac Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Tue, 3 Dec 2024 13:46:21 -0500
Subject: DRAG AND DROP WORKS

---
 extension/src/assets/move.svg         |  1 +
 extension/src/components/Body.tsx     | 10 +++---
 extension/src/components/Bookmark.tsx | 57 +++++++++++++++++++++++++++--------
 extension/src/index.css               | 13 ++++++--
 4 files changed, 60 insertions(+), 21 deletions(-)
 create mode 100644 extension/src/assets/move.svg

diff --git a/extension/src/assets/move.svg b/extension/src/assets/move.svg
new file mode 100644
index 0000000..80dd312
--- /dev/null
+++ b/extension/src/assets/move.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M480-80 310-250l57-57 73 73v-206H235l73 72-58 58L80-480l169-169 57 57-72 72h206v-206l-73 73-57-57 170-170 170 170-57 57-73-73v206h205l-73-72 58-58 170 170-170 170-57-57 73-73H520v205l72-73 58 58L480-80Z"/></svg>
\ No newline at end of file
diff --git a/extension/src/components/Body.tsx b/extension/src/components/Body.tsx
index 07b0259..70f8fce 100644
--- a/extension/src/components/Body.tsx
+++ b/extension/src/components/Body.tsx
@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from "react";
 import SettingsEditor from "./SettingsEditor.tsx";
 import SettingsIcon from "../assets/settings.svg?react";
-import EditIcon from "../assets/edit.svg?react";
+import EditIcon from "../assets/move.svg?react";
 import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
 import FolderBody from "./FolderBody.tsx";
 import {defaultSettings, ISettings, loadSettings, writeSettings} from "../Settings.ts";
@@ -14,8 +14,8 @@ export const Settings =
     ]);
 
 export const ActiveDrag =
-    React.createContext<[boolean, (arg0: boolean) => void]>([
-        false,
+    React.createContext<[BookmarkTreeNode | null, (arg0: BookmarkTreeNode | null) => void]>([
+        null,
         () => {}
     ])
 
@@ -28,7 +28,7 @@ function Body() {
     const [settings, setSettings] = useState<ISettings>(defaultSettings);
     const [selectedBookmarkTree, setSelectedBookmarkTree] = useState<BookmarkTreeNode[]>([])
     const [fullBookmarkTree, setFullBookmarkTree] = useState<BookmarkTreeNode[] | null>([])
-    const [activeDrag, setActiveDrag] = useState(false);
+    const [activeDrag, setActiveDrag] = useState<BookmarkTreeNode | null>(null);
 
     useEffect(() => {
         loadSettings().then(r => {
@@ -63,7 +63,7 @@ function Body() {
             <div id={"action-area"}>
                 {settings.editMode && <span>Move mode: Drag bookmarks to change order</span>}
                 <button onClick={_ => setSettings({...settings, editMode: !settings.editMode})}>
-                    <EditIcon fill={settings.editMode? "lime" : "currentColor"}/>
+                    <EditIcon className={settings.editMode? "enabled" : ""}/>
                 </button>
                 <button onClick={_ => setSettingsOpen(!settingsOpen)}>
                     <SettingsIcon/>
diff --git a/extension/src/components/Bookmark.tsx b/extension/src/components/Bookmark.tsx
index fc73387..5a406eb 100644
--- a/extension/src/components/Bookmark.tsx
+++ b/extension/src/components/Bookmark.tsx
@@ -16,10 +16,12 @@ function Bookmark(props: {data: BookmarkTreeNode}) {
     let [iconMode, setIconMode] = React.useState<"large" | "small" | "letter">("letter");
     let [settings, setSettings] = React.useContext(Settings);
     let [bgColor, setBgColor] = React.useState<[number, number, number] | null>(null)
+    let [bgColorPriority, setBgColorPriority] = React.useState(0);
     let [activeDrag, setActiveDrag] = React.useContext(ActiveDrag);
     let [dropRight, setDropRight] = React.useState(false);
     let [dropLeft, setDropLeft] = React.useState(false);
     let [dropCenter, setDropCenter] = React.useState(false);
+    let [thisDragged, setThisDragged] = React.useState(false);
 
     useEffect(() => {
         faviconURL(props.data).then(r => {
@@ -30,29 +32,49 @@ function Bookmark(props: {data: BookmarkTreeNode}) {
         })
     }, []);
 
+    useEffect(() => {
+        setDropLeft(false);
+        setDropRight(false);
+        setDropCenter(false);
+    }, [activeDrag]);
+
     function handleImageLoad(e: SyntheticEvent<HTMLImageElement, Event>) {
         if (e.currentTarget.naturalWidth >= 75 || favicon!.startsWith("data:image/svg+xml")) {
             setIconMode("large")
-        } else if(!bgColor) {
+        } else if(bgColorPriority < 2) {
             setBgColor(new ColorThief().getColor(e.currentTarget))
+            setBgColorPriority(2);
         }
     }
 
+    function handleDragStart(e: React.DragEvent<HTMLAnchorElement>) {
+        // e.dataTransfer.setData("text/bm-id", props.data.id);
+        // setActiveDrag(true);
+        console.log("data", e.dataTransfer.getData("text/bm-id").toString())
+    }
+
     function handleDrag(e: React.DragEvent<HTMLAnchorElement>) {
-        e.dataTransfer.dropEffect = "move";
-        e.dataTransfer.setData("bm-id", props.data.id);
-        setActiveDrag(true);
+        // e.dataTransfer.setData("text/bm-id", props.data.id);
+        setActiveDrag(props.data);
+        setThisDragged(true);
+        // e.dataTransfer.dropEffect = "move";
+    }
+
+    function handleDragEnd() {
+        setActiveDrag(null);
+        setThisDragged(false);
     }
 
     return(
         <div className={"bookmark"}>
-            <a draggable={settings.editMode} href={props.data.url} onDrag={handleDrag} onDragEnd={_ => setActiveDrag(false)}>
+            <a draggable={settings.editMode} href={props.data.url} onDragStart={handleDragStart} onDrag={handleDrag} onDragEnd={handleDragEnd}>
                 <div className={"icon-box " + (iconMode)} style={bgColor ? {"--icon-bg": `rgba(${bgColor[0]}, ${bgColor[1]}, ${bgColor[2]}, 0.2)`} as React.CSSProperties : undefined}>
                     {(() => { switch (iconMode) {
                         case "letter": {
                             let url = new URL(props.data.url!);
-                            if (!bgColor) {
+                            if (bgColorPriority < 1) {
                                 setBgColor(hashStringToColor(url.hostname));
+                                setBgColorPriority(1);
                             }
                             return (<span className={"letter"}>{url.hostname.charAt(0)}</span>)
                         }
@@ -66,7 +88,7 @@ function Bookmark(props: {data: BookmarkTreeNode}) {
                 </div>
                 <span>{props.data.title}</span>
             </a>
-            {activeDrag && (
+            {activeDrag && !thisDragged && (
                 <div className={"drop-targets"}>
                     <div
                         className={"left"}
@@ -81,11 +103,11 @@ function Bookmark(props: {data: BookmarkTreeNode}) {
                             setDropLeft(false)
                         }}
                         onDrop={e => {
-                            getBrowser().bookmarks.move(e.dataTransfer.getData("bm-id"), {
+                            getBrowser().bookmarks.move(activeDrag.id, {
                                 parentId: props.data.parentId,
                                 index: props.data.index
                             })
-                            console.log("dropped")
+                            location.reload()
                         }}
                         style={dropLeft ? undefined : {opacity: 0}}
                         // hidden={!dropLeft}
@@ -105,12 +127,12 @@ function Bookmark(props: {data: BookmarkTreeNode}) {
                             setDropRight(false)
                         }}
                         onDrop={e => {
-                            getBrowser().bookmarks.move(e.dataTransfer.getData("bm-id"), {
+                            getBrowser().bookmarks.move(activeDrag.id, {
                                 parentId: props.data.parentId,
                                 index: (props.data.index! + 1)
                             })
+                            location.reload()
                             e.preventDefault()
-                            console.log("dropped right", e.dataTransfer.getData("bm-id"))
                         }}
                         style={dropRight ? undefined : {opacity: 0}}
                         // hidden={!dropRight}
@@ -134,7 +156,16 @@ function Bookmark(props: {data: BookmarkTreeNode}) {
                         }}
                         onDrop={e => {
                             e.preventDefault();
-                            console.log("dropped")
+                            chrome.bookmarks.create({
+                                // type: "folder",
+                                parentId: props.data.parentId,
+                                index: props.data.index,
+                                title: "New Folder"
+                            }).then(r => {
+                                getBrowser().bookmarks.move(props.data.id, {parentId: r.id});
+                                getBrowser().bookmarks.move(activeDrag?.id, {parentId: r.id});
+                                location.reload()
+                            })
                         }}
                         style={dropCenter ? undefined : {opacity: 0}}
                         // hidden={!dropCenter}
@@ -156,7 +187,7 @@ function Bookmark(props: {data: BookmarkTreeNode}) {
 async function faviconURL(data: BookmarkTreeNode) {
     let i = (await getBrowser().storage.local.get("icon-cache-"+data.id))["icon-cache-"+data.id];
     if (i) return i
-    if (i == null) return i;
+    // if (i == null) return i;
 
     const url = new URL('https://www.google.com/s2/favicons');
     url.searchParams.set("sz", "256");
diff --git a/extension/src/index.css b/extension/src/index.css
index a14e0d6..f240f82 100644
--- a/extension/src/index.css
+++ b/extension/src/index.css
@@ -120,6 +120,7 @@ body > .folderBody {
 .icon-box > img {
   width: 100%;
   border-radius: 10px;
+  pointer-events: none;
 }
 
 .icon-box > svg {
@@ -257,13 +258,19 @@ a {
   }
 
   > svg {
-    background-color: #000000ba;
-    width: 65px;
-    height: 65px;
+    background-color: #FFF;
+    width: 50px;
+    height: 50px;
     border-radius: 10px;
     padding: 10px;
     margin-bottom: 14px;
+    fill: black;
   }
 }
 
+.enabled {
+  background-color: white;
+  fill: black;
+}
+
 
-- 
cgit v1.2.3