From afc18a4caf7df3c25dbdd3c8b2fad0a9813027c0 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Sun, 3 Nov 2024 14:53:42 -0500
Subject: Working root folder drop down

---
 extension/src/Body.tsx           |  2 +-
 extension/src/SettingsEditor.tsx | 27 +++++++++++++++++++++++----
 2 files changed, 24 insertions(+), 5 deletions(-)

(limited to 'extension')

diff --git a/extension/src/Body.tsx b/extension/src/Body.tsx
index 7d56265..df1c325 100644
--- a/extension/src/Body.tsx
+++ b/extension/src/Body.tsx
@@ -12,7 +12,7 @@ function Body(props: {tree: BookmarkTreeNode[]}) {
             <button id="settings-button" onClick={_ => setSettingsOpen(!settingsOpen)}>
                 <img alt="open settings" src={imageUrl}/>
             </button>
-            {settingsOpen && (<SettingsEditor closer={setSettingsOpen}/>)}
+            {settingsOpen && (<SettingsEditor tree={props.tree} closer={setSettingsOpen}/>)}
             <Folder data={
                 (props.tree && props.tree[0] && props.tree[0].children && props.tree[0].children[0])!
             }/>
diff --git a/extension/src/SettingsEditor.tsx b/extension/src/SettingsEditor.tsx
index 3e9fc93..7568bad 100644
--- a/extension/src/SettingsEditor.tsx
+++ b/extension/src/SettingsEditor.tsx
@@ -1,8 +1,9 @@
 import RadioButtonGroup from "./RadioButtonGroup.tsx";
 import React, {useState} from "react";
 import imageUrl from "./assets/close.svg"
+import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
 
-function SettingsEditor(props: {closer: (arg0: boolean) => void}) {
+function SettingsEditor(props: {tree: BookmarkTreeNode[], closer: (arg0: boolean) => void}) {
     const [backgroundType, setBackgroundType] = useState("fromTheme");
     const [sort, setSort] = useState("fromBookmarks");
     const [rootFolder, setRootFolder] = useState('0');
@@ -21,6 +22,10 @@ function SettingsEditor(props: {closer: (arg0: boolean) => void}) {
                 <option value={"frequency"}>Frequency</option>
                 <option value={"recent"}>Recently used</option>
             </RadioButtonGroup>
+            <label>
+                <input type={"checkbox"}/>
+                Sort Folders First
+            </label>
 
             <h3>Background Type</h3>
             <RadioButtonGroup defaultValue={backgroundType} onChange={e => setBackgroundType(e)}>
@@ -37,9 +42,9 @@ function SettingsEditor(props: {closer: (arg0: boolean) => void}) {
 
             <h3>Root folder</h3>
             <select defaultValue={rootFolder} onChange={e => setRootFolder(e.target.value)}>
-                <option value={'0'}>Bookmarks Toolbar id:0</option>
-                <option value={'1'}>Mobile Bookmarks id:1</option>
-                <option value={'2'}>Other Bookmarks id:2</option>
+                {getFoldersFromTree(props.tree).map(i =>
+                    <option value={i.id}>{i.title ? i.title : "Untitled (id:"+i.id+")"}</option>
+                )}
             </select>
 
             <br/>
@@ -51,4 +56,18 @@ function SettingsEditor(props: {closer: (arg0: boolean) => void}) {
     )
 }
 
+function getFoldersFromTree(tree: BookmarkTreeNode[]) {
+    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;
\ No newline at end of file
-- 
cgit v1.2.3