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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
import RadioButtonGroup from "./RadioButtonGroup.tsx";
import React, {useContext, useEffect, useState} from "react";
import CloseIcon from "../assets/close.svg?react"
import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
import {Settings} from "./Body.tsx";
import {getBrowser} from "../main.tsx";
/**
* A component for the settings sidebar
*
* @param props.tree The full bookmarks tree (for use in the root selector)
* @param props.isOpen State for weather the menu is open
*/
function SettingsEditor(props: {isOpen: [boolean, React.Dispatch<React.SetStateAction<boolean>>]}) {
const [settings, setSettings] = useContext(Settings)
const [open, setOpen] = props.isOpen;
const [folders, setFolders] = useState<BookmarkTreeNode[] | undefined>()
useEffect(() => {
getFoldersFromTree().then(r => setFolders(r));
}, []);
if (!folders) return;
return (
<div id="settings-menu" className={open ? "open" : "closed"}>
<button id="settings-close" onClick={_ => setOpen(false)}>
<CloseIcon/>
</button>
<h1>Settings</h1>
<h3>Sort</h3>
<RadioButtonGroup value={settings.sort}
onChange={e => {
setSettings({...settings, sort: e})
}}>
<option value={"from-bookmarks"}>From Bookmarks</option>
<option value={"alphabetical"}>Alphabetical</option>
<option value={"recent"}>Recently used</option>
</RadioButtonGroup>
<br/>
<label>
<input type={"checkbox"}
checked={settings.foldersFirst}
onChange={e => setSettings({...settings, foldersFirst: e.target.checked})}/>
Sort Folders First
</label>
<h3>Background Type</h3>
<RadioButtonGroup value={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>
{(() => {
switch (settings.backgroundMode) {
case "image":
return (<>
<h3>Background Image URL</h3>
<input type={"url"}
value={settings.backgroundImage}
onChange={e => setSettings({...settings, backgroundImage: e.target.value})}/>
</>)
case "color":
return (<>
<h3>Background Color</h3>
<input type={"color"}
value={settings.backgroundColor}
onChange={e => setSettings({...settings, backgroundColor: e.target.value})}/>
</>)
}
})()}
<h3>Foreground Color</h3>
<input type={"color"}
value={settings.foregroundColor}
onChange={e => setSettings({...settings, foregroundColor: e.target.value})}/>
<h3>Root folder</h3>
<select value={settings.rootFolder!}
onChange={e => setSettings({...settings, rootFolder: e.target.value})}>
{folders.map(i =>
<option value={i.id}>{i.title ? i.title : "Untitled (id:" + i.id + ")"}</option>
)}
</select>
<h3>Icon Cache</h3>
<button className={"default"} onClick={_ => getBrowser().storage.local.clear()}>Clear Icon Cache</button>
<h3>Editing</h3>
<label>
<input type={"checkbox"}
checked={!settings.editMode}
onChange={e => setSettings({...settings, editMode: !e.target.checked})}
/>
Prevent editing of bookmarks
</label>
<h3>Open Folders</h3>
<label>
<input type={"checkbox"}
checked={settings.keepFoldersOpen}
onChange={e => setSettings({...settings, keepFoldersOpen: e.target.checked})}
/>
Keep folders open
</label>
</div>
)
}
/**
* Walks the tree and creates a list of the folders
*
* @param tree The full tree to walk through
*/
async function getFoldersFromTree() {
let tree = await getBrowser().bookmarks.getTree();
let folderList: BookmarkTreeNode[] = [];
rec(tree);
function rec(tree: BookmarkTreeNode[]) {
tree.forEach(item => {
if (item.children) {
folderList.push(item);
rec(item.children);
}
})
}
return folderList;
}
export default SettingsEditor;
|
