1 files changed, 30 insertions, 27 deletions

diff --git a/extension/src/Body.tsx b/extension/src/Body.tsx
index 786ee27..f878ef4 100644
--- a/extension/src/Body.tsx
+++ b/extension/src/Body.tsx
@@ -3,50 +3,53 @@ import SettingsEditor from "./SettingsEditor.tsx";
 import imageUrl from "./assets/settings.svg"
 import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
 import FolderBody from "./FolderBody.tsx";
+import {defaultSettings, ISettings, loadSettings, writeSettings} from "./Settings.ts";
+import {getBrowser} from "./main.tsx";
 
-// @ts-ignore
-if (typeof browser === "undefined") {
-    var browser = chrome;
-}
-
-export const RootFolder = React.createContext({
-    rootFolder: '0',
-    setRootFolder: (arg0: string) => {}
-});
-
-export const BookmarkTree = React.createContext({
-    bookmarkTree: [] as BookmarkTreeNode[],
-    setBookmarkTree: (arg0: BookmarkTreeNode[]) => {}
-})
+export const Settings =
+    React.createContext<[ISettings, (arg0: ISettings) => void]>([
+    defaultSettings,
+    () => {}
+]);
 
 function Body() {
     const [settingsOpen, setSettingsOpen] = useState(false);
-    const [rootFolder, setRootFolder] = useState("root________");
+    const [settings, setSettings] = useState<ISettings>(defaultSettings);
     const [bookmarkTree, setBookmarkTree] = useState<BookmarkTreeNode[]>([])
     const [ogBookmarkTree, setOgBookmarkTree] = useState<BookmarkTreeNode[] | null>([])
-    const [backgroundURL, setBackgroundURL] = useState("")
     useEffect(() => {
-        browser.bookmarks.getTree().then(t => {
+        loadSettings().then(r => {
+            setSettings(r);
+        })
+        getBrowser().bookmarks.getTree().then(t => {
             setOgBookmarkTree(t);
         })
     }, [])
     useEffect(() => {
-        browser.bookmarks.getSubTree(rootFolder).then(t => {
-            setBookmarkTree(t);
-        });
-    }, [rootFolder]);
+        writeSettings(settings);
+        if (settings?.rootFolder) {
+            getBrowser().bookmarks.getSubTree(settings.rootFolder).then(t => {
+                setBookmarkTree(t);
+            });
+        } else {
+            getBrowser().bookmarks.getTree().then(t => {
+                setBookmarkTree(t);
+            })
+        }
+    }, [settings]);
 
     return (
-        <BookmarkTree.Provider value={{bookmarkTree, setBookmarkTree}}>
-        <RootFolder.Provider value={{rootFolder, setRootFolder}}>
-            <style>{"body {background-image: url(\""+ backgroundURL +"\")}"}</style>
+        <Settings.Provider value={[settings!, setSettings]}>
+            {(() => {switch (settings.backgroundMode) {
+                case "color": return (<style>{"body {background-color: " + settings.backgroundColor + "; }"}</style>)
+                case "image": return (<style>{"body {background-image: url(\"" + settings.backgroundImage + "\"); }"}</style>)
+            }})()}
             <button id="settings-button" onClick={_ => setSettingsOpen(!settingsOpen)}>
                 <img alt="open settings" src={imageUrl}/>
             </button>
-            {settingsOpen && (<SettingsEditor tree={ogBookmarkTree!} closer={setSettingsOpen} setBackgroundURL={setBackgroundURL}/>)}
+            {settingsOpen && (<SettingsEditor tree={ogBookmarkTree!} closer={setSettingsOpen}/>)}
             {bookmarkTree[0] && (<FolderBody data={bookmarkTree[0]}/>)}
-        </RootFolder.Provider>
-        </BookmarkTree.Provider>
+        </Settings.Provider>
     )
 }