Settings sidebar works now

6 files changed, 69 insertions, 26 deletions

diff --git a/extension/src/Body.tsx b/extension/src/Body.tsx
new file mode 100644
index 0000000..7d56265
--- /dev/null
+++ b/extension/src/Body.tsx
@@ -0,0 +1,23 @@
+import React, {useState} from "react";
+import SettingsEditor from "./SettingsEditor.tsx";
+import Folder from "./Folder.tsx";
+import imageUrl from "./assets/settings.svg"
+import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
+
+function Body(props: {tree: BookmarkTreeNode[]}) {
+    const [settingsOpen, setSettingsOpen] = useState(false);
+
+    return (
+        <>
+            <button id="settings-button" onClick={_ => setSettingsOpen(!settingsOpen)}>
+                <img alt="open settings" src={imageUrl}/>
+            </button>
+            {settingsOpen && (<SettingsEditor closer={setSettingsOpen}/>)}
+            <Folder data={
+                (props.tree && props.tree[0] && props.tree[0].children && props.tree[0].children[0])!
+            }/>
+        </>
+    )
+}
+
+export default Body
\ No newline at end of file
diff --git a/extension/src/SettingsEditor.tsx b/extension/src/SettingsEditor.tsx
index 7335a18..3e9fc93 100644
--- a/extension/src/SettingsEditor.tsx
+++ b/extension/src/SettingsEditor.tsx
@@ -1,19 +1,18 @@
 import RadioButtonGroup from "./RadioButtonGroup.tsx";
 import React, {useState} from "react";
+import imageUrl from "./assets/close.svg"
 
-function SettingsEditor() {
+function SettingsEditor(props: {closer: (arg0: boolean) => void}) {
     const [backgroundType, setBackgroundType] = useState("fromTheme");
     const [sort, setSort] = useState("fromBookmarks");
     const [rootFolder, setRootFolder] = useState('0');
 
     return (
-        <form>
-            <h3>Background Type</h3>
-            <RadioButtonGroup defaultValue={backgroundType} onChange={e => setBackgroundType(e)}>
-                <option value={"fromTheme"}>From Theme</option>
-                <option value={"solidColor"}>Solid Color</option>
-                <option value={"image"}>Image</option>
-            </RadioButtonGroup>
+        <div id="settings-menu">
+            <button id="settings-close" onClick={_ => props.closer(false)}>
+                <img alt="close settings" src={imageUrl}/>
+            </button>
+            <h1>Settings</h1>
 
             <h3>Sort</h3>
             <RadioButtonGroup defaultValue={sort} onChange={e => setSort(e)}>
@@ -23,6 +22,19 @@ function SettingsEditor() {
                 <option value={"recent"}>Recently used</option>
             </RadioButtonGroup>
 
+            <h3>Background Type</h3>
+            <RadioButtonGroup defaultValue={backgroundType} onChange={e => setBackgroundType(e)}>
+                <option value={"fromTheme"}>From Theme</option>
+                <option value={"solidColor"}>Solid Color</option>
+                <option value={"image"}>Image</option>
+            </RadioButtonGroup>
+
+            <h3>Edit mode</h3>
+            <label>
+                <input type={"checkbox"}/>
+                Enable Edit mode
+            </label>
+
             <h3>Root folder</h3>
             <select defaultValue={rootFolder} onChange={e => setRootFolder(e.target.value)}>
                 <option value={'0'}>Bookmarks Toolbar id:0</option>
@@ -34,8 +46,8 @@ function SettingsEditor() {
             <span>value of bg type: {backgroundType}</span>
             <span>value of sort: {sort}</span>
             <span>value of root folder: {rootFolder}</span>
-            <input type="submit"/>
-        </form>
+            <button>Save</button>
+        </div>
     )
 }
 
diff --git a/extension/src/assets/close.svg b/extension/src/assets/close.svg
new file mode 100644
index 0000000..8c71124
--- /dev/null
+++ b/extension/src/assets/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>
\ No newline at end of file
diff --git a/extension/src/assets/settings.svg b/extension/src/assets/settings.svg
new file mode 100644
index 0000000..551161c
--- /dev/null
+++ b/extension/src/assets/settings.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm112-260q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Z"/></svg>
\ No newline at end of file
diff --git a/extension/src/index.css b/extension/src/index.css
index 79b8adb..a0d71b1 100644
--- a/extension/src/index.css
+++ b/extension/src/index.css
@@ -23,9 +23,6 @@ body {
   padding: 10px;
   right: 0;
   animation: slideIn 0.3s ease-in-out;
-}
-
-#settings-menu form {
   display: flex;
   flex-direction: column;
   place-items: flex-start;
@@ -49,7 +46,6 @@ body {
   border-style: solid;
   border-width: 1px;
   border-color: #393939;
-  padding: 2px;
   margin: 5px;
   padding: 10px;
 }
@@ -67,6 +63,11 @@ body {
   user-select: none
 }
 
+body > .folder {
+  margin: 0;
+  border-style: none;
+}
+
 /* Bookmark */
 .bookmark {
   display: flex;
@@ -97,4 +98,19 @@ a {
   text-decoration: none;
 }
 
+#settings-close, #settings-button {
+  border-style: none;
+  background: none;
+  color: white;
+  padding: 5px;
+  margin: 5px;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+#settings-close:hover, #settings-button:hover {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
 
diff --git a/extension/src/main.tsx b/extension/src/main.tsx
index e545526..0b6d9de 100644
--- a/extension/src/main.tsx
+++ b/extension/src/main.tsx
@@ -1,7 +1,6 @@
 import { createRoot } from 'react-dom/client'
 import './index.css'
-import Folder from "./Folder.tsx";
-import SettingsEditor from "./SettingsEditor.tsx";
+import Body from "./Body.tsx";
 
 // @ts-ignore
 if (typeof browser === "undefined") {
@@ -9,16 +8,7 @@ if (typeof browser === "undefined") {
 }
 
 browser.bookmarks.getTree().then(tree => {
-    createRoot(document.body).render(
-        <>
-            <div id="settings-menu">
-                <SettingsEditor/>
-            </div>
-            <Folder data={     // @ts-ignore
-                tree[0].children[0]
-            }/>
-        </>
-    )
+    createRoot(document.body).render(<Body tree={tree}/>)
 });
 
 // chrome.bookmarks.create(