Finish implementing setting system

1 files changed, 33 insertions, 21 deletions

diff --git a/extension/src/SettingsEditor.tsx b/extension/src/SettingsEditor.tsx
index a5b9224..9bbf153 100644
--- a/extension/src/SettingsEditor.tsx
+++ b/extension/src/SettingsEditor.tsx
@@ -1,13 +1,11 @@
 import RadioButtonGroup from "./RadioButtonGroup.tsx";
-import React, {useContext, useState} from "react";
+import React, {useContext} from "react";
 import imageUrl from "./assets/close.svg"
 import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
-import {RootFolder} from "./Body.tsx";
+import {Settings} from "./Body.tsx";
 
-function SettingsEditor(props: {tree: BookmarkTreeNode[], closer: (arg0: boolean) => void, setBackgroundURL: (arg0: string) => void}) {
-    const [backgroundType, setBackgroundType] = useState("fromTheme");
-    const [sort, setSort] = useState("fromBookmarks");
-    const {rootFolder, setRootFolder} = useContext(RootFolder)
+function SettingsEditor(props: {tree: BookmarkTreeNode[], closer: (arg0: boolean) => void}) {
+    const [settings, setSettings] = useContext(Settings)
 
     return (
         <div id="settings-menu">
@@ -17,26 +15,43 @@ function SettingsEditor(props: {tree: BookmarkTreeNode[], closer: (arg0: boolean
             <h1>Settings</h1>
 
             <h3>Sort</h3>
-            <RadioButtonGroup defaultValue={sort} onChange={e => setSort(e)}>
-                <option value={"fromBookmarks"}>From Bookmarks</option>
+            <RadioButtonGroup defaultValue={settings.sort}
+                              onChange={e => {setSettings({...settings, sort: e})}}>
+                <option value={"from-bookmarks"}>From Bookmarks</option>
                 <option value={"alphabetical"}>Alphabetical</option>
                 <option value={"frequency"}>Frequency</option>
                 <option value={"recent"}>Recently used</option>
             </RadioButtonGroup>
+            <br/>
             <label>
-                <input type={"checkbox"}/>
+                <input type={"checkbox"}
+                       checked={settings.foldersFirst}
+                       onChange={e => setSettings({...settings, foldersFirst: e.target.checked})}/>
                 Sort Folders First
             </label>
 
             <h3>Background Type</h3>
-            <RadioButtonGroup defaultValue={backgroundType} onChange={e => setBackgroundType(e)}>
-                <option value={"fromTheme"}>From Theme</option>
-                <option value={"solidColor"}>Solid Color</option>
+            <RadioButtonGroup defaultValue={settings.backgroundMode}
+                              onChange={e => setSettings({...settings, backgroundMode: e})}>
+                <option value={"theme"}>Default</option>
+                <option value={"color"}>Solid Color</option>
                 <option value={"image"}>Image</option>
             </RadioButtonGroup>
 
-            <h3>Background URL</h3>
-            <input type={"url"} onChange={e => props.setBackgroundURL(e.target.value)}/>
+            {(() => { switch (settings.backgroundMode) {
+                case "image": return (<>
+                    <h3>Background Color</h3>
+                    <input type={"url"}
+                           defaultValue={settings.backgroundImage}
+                           onChange={e => setSettings({...settings, backgroundImage: e.target.value})}/>
+                </>)
+                case "color": return (<>
+                    <h3>Background URL</h3>
+                    <input type={"color"}
+                           defaultValue={settings.backgroundColor}
+                           onChange={e => setSettings({...settings, backgroundColor: e.target.value})}/>
+                </>)
+            }})()}
 
             <h3>Edit mode</h3>
             <label>
@@ -45,17 +60,13 @@ function SettingsEditor(props: {tree: BookmarkTreeNode[], closer: (arg0: boolean
             </label>
 
             <h3>Root folder</h3>
-            <select defaultValue={rootFolder} onChange={e => setRootFolder(e.target.value)}>
+            <select defaultValue={settings.rootFolder!}
+                    onChange={e => setSettings({...settings, rootFolder: e.target.value})}>
                 {getFoldersFromTree(props.tree).map(i =>
-                    <option value={i.id}>{i.title ? i.title : "Untitled (id:"+i.id+")"}</option>
+                    <option value={i.id}>{i.title ? i.title : "Untitled (id:" + i.id + ")"}</option>
                 )}
             </select>
 
-            <br/>
-            <span>value of bg type: {backgroundType}</span>
-            <span>value of sort: {sort}</span>
-            <span>value of root folder: {rootFolder}</span>
-            <button>Save</button>
         </div>
     )
 }
@@ -63,6 +74,7 @@ function SettingsEditor(props: {tree: BookmarkTreeNode[], closer: (arg0: boolean
 function getFoldersFromTree(tree: BookmarkTreeNode[]) {
     let folderList: BookmarkTreeNode[] = [];
     rec(tree);
+
     function rec(tree: BookmarkTreeNode[]) {
         tree.forEach(item => {
             if (item.children) {