blob: 4ebdaa2c4a2b88869eaa03a84d8763f6eb24f3ba (
plain) (
blame)
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
|
import React, {useContext, useEffect, useState} from "react";
import CloseIcon from "../assets/close.svg?react"
import {ActiveEdit} from "./Body.tsx";
import {getBrowser} from "../main.tsx";
import RadioButtonGroup from "./RadioButtonGroup.tsx";
function BMEditor() {
const [activeEdit, setActiveEdit] = useContext(ActiveEdit);
const [iconOptions, setIconOptions] = useState<string[]>([]);
const [gIcon, setGIcon] = useState<string | undefined>(undefined);
useEffect(() => {
if (!activeEdit) return;
const gURL = new URL('https://www.google.com/s2/favicons');
gURL.searchParams.set("sz", "256");
gURL.searchParams.set("domain_url", activeEdit.url!);
setGIcon(gURL.toString());
getBrowser().storage.local.get("icon-aval-"+activeEdit.id).then( r => {
setIconOptions(r["icon-aval-" + activeEdit.id]);
});
}, [activeEdit]);
let isFolder = activeEdit && activeEdit.children && activeEdit.children.length > 0;
return (
<div id="settings-menu" className={activeEdit ? "open" : "closed"}>
<button id="settings-close" onClick={_ => setActiveEdit(null)}>
<CloseIcon/>
</button>
{activeEdit && (<>
<h1>Edit {isFolder ? "Folder" : "Bookmark"}</h1>
<h3>Name</h3>
<input type={"text"} defaultValue={activeEdit?.title} onChange={e => {
getBrowser().bookmarks.update(activeEdit!.id, {title: e.target.value})
}}/>
{!isFolder && (<>
<h3>URL</h3>
<input type={"url"} defaultValue={activeEdit?.url} onChange={e => {
getBrowser().bookmarks.update(activeEdit!.id, {url: e.target.value})
}}/>
</>)}
<h3>Icon</h3>
<h4>Found on the site</h4>
{/*{ iconOptions &&*/}
{/*<RadioButtonGroup value={undefined} children={*/}
{/* iconOptions.map(s => {*/}
{/* return { props: {*/}
{/* value: s,*/}
{/* children: ()*/}
{/* }}*/}
{/* }*/}
{/* )}*/}
{/*/>}*/}
<h4>From Google</h4>
<img src={gIcon}/>
<h4>Custom</h4>
<p>TODO</p>
</>)}
</div>
);
}
export default BMEditor;
|
