From 8ad470aaf5434005db4c59106dcbcf4cbc8cf49b Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Tue, 3 Dec 2024 00:02:21 -0500
Subject: Push drag and drop code so far

---
 extension/src/components/Body.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

(limited to 'extension/src/components/Body.tsx')

diff --git a/extension/src/components/Body.tsx b/extension/src/components/Body.tsx
index e575d89..07b0259 100644
--- a/extension/src/components/Body.tsx
+++ b/extension/src/components/Body.tsx
@@ -9,9 +9,15 @@ import {getBrowser} from "../main.tsx";
 
 export const Settings =
     React.createContext<[ISettings, (arg0: ISettings) => void]>([
-    defaultSettings,
-    () => {}
-]);
+        defaultSettings,
+        () => {}
+    ]);
+
+export const ActiveDrag =
+    React.createContext<[boolean, (arg0: boolean) => void]>([
+        false,
+        () => {}
+    ])
 
 /**
  * A component for the full body of the application
@@ -22,6 +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);
 
     useEffect(() => {
         loadSettings().then(r => {
@@ -47,6 +54,7 @@ function Body() {
 
     return (
         <Settings.Provider value={[settings!, setSettings]}>
+        <ActiveDrag.Provider value={[activeDrag, setActiveDrag]}>
             {(() => {switch (settings.backgroundMode) {
                 case "color": return (<style>{"body {background-color: " + settings.backgroundColor + "; }"}</style>)
                 case "image": return (<style>{"body {background-image: url(\"" + settings.backgroundImage + "\"); }"}</style>)
@@ -63,6 +71,7 @@ function Body() {
             </div>
             <SettingsEditor tree={fullBookmarkTree!} isOpen={[settingsOpen, setSettingsOpen]}/>
             {selectedBookmarkTree[0] && (<FolderBody data={selectedBookmarkTree[0]}/>)}
+        </ActiveDrag.Provider>
         </Settings.Provider>
     )
 }
-- 
cgit v1.2.3


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/components/Body.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'extension/src/components/Body.tsx')

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/>
-- 
cgit v1.2.3