Bookmarks Home

From 01b3c8be6a3cd143a044c826d7f79ed2128cdd3b Mon Sep 17 00:00:00 2001 From: sowgro Date: Sun, 3 Nov 2024 00:19:58 -0400 Subject: Start making settings work --- extension/index.html | 41 +-------------------- extension/public/manifest.json | 3 +- extension/src/Folder.tsx | 2 +- extension/src/RadioButtonGroup.tsx | 53 +++++++++++++++++++++++++++ extension/src/Settings.tsx | 17 +++++++++ extension/src/SettingsEditor.tsx | 73 ++++++++++++++++++++++++++++++++++++++ extension/src/index.css | 4 +++ extension/src/main.tsx | 13 +++++-- 8 files changed, 161 insertions(+), 45 deletions(-) create mode 100644 extension/src/RadioButtonGroup.tsx create mode 100644 extension/src/Settings.tsx create mode 100644 extension/src/SettingsEditor.tsx (limited to 'extension') diff --git a/extension/index.html b/extension/index.html index 11e132a..8baa841 100644 --- a/extension/index.html +++ b/extension/index.html @@ -6,46 +6,7 @@ Bookmarks Home - +

diff --git a/extension/public/manifest.json b/extension/public/manifest.json index 79615c5..9f5dc51 100644 --- a/extension/public/manifest.json +++ b/extension/public/manifest.json @@ -13,6 +13,7 @@ }, "author": "Owen Howell, Tyler Ferrari, Ariel Levy; students at RIT", "permissions": [ - "bookmarks" + "bookmarks", + "storage" ] } diff --git a/extension/src/Folder.tsx b/extension/src/Folder.tsx index 37f5cf6..06e8b30 100644 --- a/extension/src/Folder.tsx +++ b/extension/src/Folder.tsx @@ -6,7 +6,7 @@ function Folder (props: {data: BookmarkTreeNode}) {

{props.data.title}

- { + { props.data.children && props.data.children.map(child => child.children diff --git a/extension/src/RadioButtonGroup.tsx b/extension/src/RadioButtonGroup.tsx new file mode 100644 index 0000000..14f348d --- /dev/null +++ b/extension/src/RadioButtonGroup.tsx @@ -0,0 +1,53 @@ +import React, {useId, useState} from "react"; + +interface radioEntry { + label: string, + data: any, +} + +interface IProps { + groupLabel: string, + items: radioEntry[], + defaultData: any +} + +function RadioButtonGroup(props: IProps) { + const [selected, setSelected] = useState(props.defaultData); + + return ( + <> +

{props.groupLabel}

+ { props.items.map((item) => ( + + setSelected(e.target.value)} + /> + {item.label} + + )) } +

+ currently selected: {selected} + + ) +} + +export default RadioButtonGroup + +//

Sort

+// +// +// From bookmarks +// +// +// +// Alphabetical +// +// +// +// Frequency +// \ No newline at end of file diff --git a/extension/src/Settings.tsx b/extension/src/Settings.tsx new file mode 100644 index 0000000..7e44c34 --- /dev/null +++ b/extension/src/Settings.tsx @@ -0,0 +1,17 @@ +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 new file mode 100644 index 0000000..b10a705 --- /dev/null +++ b/extension/src/SettingsEditor.tsx @@ -0,0 +1,73 @@ +import RadioButtonGroup from "./RadioButtonGroup.tsx"; +import React, {useState} from "react"; + +function SettingsEditor() { + const [selected, setSelected] = useState('0'); + + return ( +

+ + + +

Root folder

+ + currently selected: {selected} + + ) +} + +export default SettingsEditor; + +//

+//

Settings

+// +//

Sort

+// +// +// From bookmarks +// +// +// +// Alphabetical +// +// +// +// Frequency +// +// +//

Background

+// +// +// From Theme +// +// +// +// Solid color +// +// +// +// Image +// +// +//

Root folder

+// +// +// +//

\ No newline at end of file diff --git a/extension/src/index.css b/extension/src/index.css index 20d7bf2..82a8182 100644 --- a/extension/src/index.css +++ b/extension/src/index.css @@ -25,7 +25,11 @@ body { flex-direction: column; right: 0; animation: slideIn 0.3s ease-in-out; +} +.radio-group { + display: flex; + flex-direction: column; } @keyframes slideIn { diff --git a/extension/src/main.tsx b/extension/src/main.tsx index d988d72..e545526 100644 --- a/extension/src/main.tsx +++ b/extension/src/main.tsx @@ -1,6 +1,7 @@ import { createRoot } from 'react-dom/client' import './index.css' import Folder from "./Folder.tsx"; +import SettingsEditor from "./SettingsEditor.tsx"; // @ts-ignore if (typeof browser === "undefined") { @@ -8,9 +9,15 @@ if (typeof browser === "undefined") { } browser.bookmarks.getTree().then(tree => { - createRoot(document.getElementById('root')!).render( - // @ts-ignore - + createRoot(document.body).render( + <> + + + ) }); -- cgit v1.2.3