Finish implementing setting system

9 files changed, 108 insertions, 88 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>
     )
 }
 
diff --git a/extension/src/Bookmark.tsx b/extension/src/Bookmark.tsx
index 0d675af..64c2811 100644
--- a/extension/src/Bookmark.tsx
+++ b/extension/src/Bookmark.tsx
@@ -15,7 +15,7 @@ function faviconURL(u: string | undefined) {
     u = new URL(u).hostname.toString();
     const url = new URL('https://www.google.com/s2/favicons');
     url.searchParams.set("sz", "256");
-    u = u.split(".")[u.split(".").length-2] +"."+ u.split(".")[u.split(".").length-1]
+    // u = u.split(".")[u.split(".").length-2] +"."+ u.split(".")[u.split(".").length-1]
     url.searchParams.set("domain_url", u);
     return url.toString();
 
diff --git a/extension/src/FolderButton.tsx b/extension/src/FolderButton.tsx
index b0115de..e74cdbf 100644
--- a/extension/src/FolderButton.tsx
+++ b/extension/src/FolderButton.tsx
@@ -16,7 +16,7 @@ function FolderButton(props: {data: BookmarkTreeNode}) {
             </a>
             { folderOpen
                 && props.data.children
-                && props.data.children.length > 1
+                && props.data.children.length > 0
                 && (<FolderBody data={props.data}/>)}
         </>
 );
diff --git a/extension/src/RadioButtonGroup.tsx b/extension/src/RadioButtonGroup.tsx
index 1e86e7e..12276dd 100644
--- a/extension/src/RadioButtonGroup.tsx
+++ b/extension/src/RadioButtonGroup.tsx
@@ -1,4 +1,4 @@
-import React, {ReactElement, ReactNode, useId, useState} from "react";
+import React, {ReactElement, useEffect, useId, useState} from "react";
 
 interface RadioProps {
     children: ReactElement<HTMLOptionElement>[],
@@ -8,7 +8,9 @@ interface RadioProps {
 
 function RadioButtonGroup(props: RadioProps) {
     const [selected, setSelected] = useState(props.defaultValue);
-    props.onChange && props.onChange(selected);
+    useEffect(() => {
+        props.onChange && props.onChange(selected);
+    }, [selected])
 
     return (
         <div className="radio-group">
@@ -28,18 +30,4 @@ function RadioButtonGroup(props: RadioProps) {
     )
 }
 
-export default RadioButtonGroup
-
-//     <h3>Sort</h3>
-//     <label>
-//         <input type="radio" name="sort"/>
-//         From bookmarks
-//     </label>
-//     <label>
-//         <input type="radio" name="sort"/>
-//         Alphabetical
-//     </label>
-//     <label>
-//         <input type="radio" name="sort"/>
-//         Frequency
-//     </label>
\ No newline at end of file
+export default RadioButtonGroup
\ No newline at end of file
diff --git a/extension/src/Settings.ts b/extension/src/Settings.ts
new file mode 100644
index 0000000..a38680a
--- /dev/null
+++ b/extension/src/Settings.ts
@@ -0,0 +1,31 @@
+import {getBrowser} from "./main.tsx";
+
+export interface ISettings {
+    sort: "from-bookmarks" | "alphabetical" | "frequency" | "recent"
+    foldersFirst: boolean
+    backgroundMode: "theme" | "color" | "image"
+    backgroundColor: string
+    backgroundImage: string
+    editMode: boolean
+    rootFolder: string | null
+}
+
+export let defaultSettings: ISettings = {
+    sort: "from-bookmarks",
+    foldersFirst: true,
+    backgroundMode: "theme",
+    backgroundColor: "#000000",
+    backgroundImage: "",
+    editMode: false,
+    rootFolder: '0',
+}
+
+export function loadSettings(): Promise<ISettings> {
+    // @ts-ignore
+    return getBrowser().storage.local.get(defaultSettings)
+}
+
+export function writeSettings(settings: ISettings) {
+    getBrowser().storage.local.set(settings);
+}
+
diff --git a/extension/src/Settings.tsx b/extension/src/Settings.tsx
deleted file mode 100644
index 7e44c34..0000000
--- a/extension/src/Settings.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-let settings: { [p: string]: any } = {
-    sort: "from-bookmarks",
-    backgroundMode: "from-theme",
-    backgroundColor: "#000000",
-    rootFolderID: 0,
-}
-
-function loadSettings() {
-    browser.storage.local.set(settings);
-}
-
-function writeSettings() {
-    browser.storage.local.get(settings).then(r => {
-        settings = r;
-    })
-}
-
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) {
diff --git a/extension/src/main.tsx b/extension/src/main.tsx
index 5e6503a..4776db3 100644
--- a/extension/src/main.tsx
+++ b/extension/src/main.tsx
@@ -2,9 +2,12 @@ import { createRoot } from 'react-dom/client'
 import './index.css'
 import Body from "./Body.tsx";
 
-// @ts-ignore
-if (typeof browser === "undefined") {
-    var browser = chrome;
+export function getBrowser() {
+    if (typeof browser === "undefined") {
+        return chrome;
+    } else {
+        return browser;
+    }
 }
 
 createRoot(document.body).render(<Body/>)
diff --git a/extension/tsconfig.app.tsbuildinfo b/extension/tsconfig.app.tsbuildinfo
index f6071d1..2c29adc 100644
--- a/extension/tsconfig.app.tsbuildinfo
+++ b/extension/tsconfig.app.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/Body.tsx","./src/Bookmark.tsx","./src/FolderBody.tsx","./src/FolderButton.tsx","./src/RadioButtonGroup.tsx","./src/Settings.tsx","./src/SettingsEditor.tsx","./src/main.tsx","./src/vite-env.d.ts"],"version":"5.6.2"}
\ No newline at end of file
+{"root":["./src/Body.tsx","./src/Bookmark.tsx","./src/FolderBody.tsx","./src/FolderButton.tsx","./src/RadioButtonGroup.tsx","./src/Settings.ts","./src/SettingsEditor.tsx","./src/main.tsx","./src/vite-env.d.ts"],"version":"5.6.2"}
\ No newline at end of file