1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
import React, {useEffect, useState} from "react";
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";
export const Settings =
React.createContext<[ISettings, (arg0: ISettings) => void]>([
defaultSettings,
() => {}
]);
function Body() {
const [settingsOpen, setSettingsOpen] = useState(false);
const [settings, setSettings] = useState<ISettings>(defaultSettings);
const [bookmarkTree, setBookmarkTree] = useState<BookmarkTreeNode[]>([])
const [ogBookmarkTree, setOgBookmarkTree] = useState<BookmarkTreeNode[] | null>([])
useEffect(() => {
loadSettings().then(r => {
setSettings(r);
})
getBrowser().bookmarks.getTree().then(t => {
setOgBookmarkTree(t);
})
}, [])
useEffect(() => {
writeSettings(settings);
if (settings?.rootFolder) {
getBrowser().bookmarks.getSubTree(settings.rootFolder).then(t => {
setBookmarkTree(t);
});
} else {
getBrowser().bookmarks.getTree().then(t => {
setBookmarkTree(t);
})
}
}, [settings]);
return (
<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>
<SettingsEditor tree={ogBookmarkTree!} isOpen={[settingsOpen, setSettingsOpen]}/>
{bookmarkTree[0] && (<FolderBody data={bookmarkTree[0]}/>)}
</Settings.Provider>
)
}
export default Body
|
