New Folder design

9 files changed, 67 insertions, 54 deletions

diff --git a/extension/src/Body.tsx b/extension/src/Body.tsx
index 0ac2e4c..786ee27 100644
--- a/extension/src/Body.tsx
+++ b/extension/src/Body.tsx
@@ -1,8 +1,8 @@
 import React, {useEffect, useState} from "react";
 import SettingsEditor from "./SettingsEditor.tsx";
-import Folder from "./Folder.tsx";
 import imageUrl from "./assets/settings.svg"
 import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
+import FolderBody from "./FolderBody.tsx";
 
 // @ts-ignore
 if (typeof browser === "undefined") {
@@ -21,7 +21,7 @@ export const BookmarkTree = React.createContext({
 
 function Body() {
     const [settingsOpen, setSettingsOpen] = useState(false);
-    const [rootFolder, setRootFolder] = useState('1');
+    const [rootFolder, setRootFolder] = useState("root________");
     const [bookmarkTree, setBookmarkTree] = useState<BookmarkTreeNode[]>([])
     const [ogBookmarkTree, setOgBookmarkTree] = useState<BookmarkTreeNode[] | null>([])
     const [backgroundURL, setBackgroundURL] = useState("")
@@ -44,7 +44,7 @@ function Body() {
                 <img alt="open settings" src={imageUrl}/>
             </button>
             {settingsOpen && (<SettingsEditor tree={ogBookmarkTree!} closer={setSettingsOpen} setBackgroundURL={setBackgroundURL}/>)}
-            {bookmarkTree[0] && (<Folder data={bookmarkTree[0]}/>)}
+            {bookmarkTree[0] && (<FolderBody data={bookmarkTree[0]}/>)}
         </RootFolder.Provider>
         </BookmarkTree.Provider>
     )
diff --git a/extension/src/Bookmark.tsx b/extension/src/Bookmark.tsx
index 8078b3a..0d675af 100644
--- a/extension/src/Bookmark.tsx
+++ b/extension/src/Bookmark.tsx
@@ -21,6 +21,4 @@ function faviconURL(u: string | undefined) {
 
 }
 
-
-
 export default Bookmark;
\ No newline at end of file
diff --git a/extension/src/Folder.tsx b/extension/src/Folder.tsx
deleted file mode 100644
index 06e8b30..0000000
--- a/extension/src/Folder.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
-import Bookmark from "./Bookmark.tsx";
-
-function Folder (props: {data: BookmarkTreeNode}) {
-    return (
-        <details open className="folder">
-            <summary>{props.data.title}</summary>
-            <div>
-                {
-                    props.data.children &&
-                    props.data.children.map(child =>
-                        child.children
-                            ? <Folder data={child} />
-                            : <Bookmark data={child} />
-                    )
-                }
-            </div>
-        </details>
-    )
-}
-
-// if (props.data.children) {
-//     let l = [];
-//     for (let child of props.data.children) {
-//         if (child.children) {
-//             l.push(<Folder data={child} />)
-//         } else {
-//             l.push(<Bookmark data={child} />)
-//         }
-//     }
-//     return l
-// }
-
-export default Folder;
\ No newline at end of file
diff --git a/extension/src/FolderBody.tsx b/extension/src/FolderBody.tsx
new file mode 100644
index 0000000..b013d97
--- /dev/null
+++ b/extension/src/FolderBody.tsx
@@ -0,0 +1,20 @@
+import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
+import Bookmark from "./Bookmark.tsx";
+import FolderButton from "./FolderButton.tsx";
+
+function FolderBody (props: {data: BookmarkTreeNode}) {
+    return (
+            <div className={"folderBody"}>
+                {
+                    props.data.children &&
+                    props.data.children.map(child =>
+                        child.children
+                            ? <FolderButton data={child} />
+                            : <Bookmark data={child} />
+                    )
+                }
+            </div>
+    )
+}
+
+export default FolderBody;
\ No newline at end of file
diff --git a/extension/src/FolderButton.tsx b/extension/src/FolderButton.tsx
new file mode 100644
index 0000000..b0115de
--- /dev/null
+++ b/extension/src/FolderButton.tsx
@@ -0,0 +1,25 @@
+import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
+import FolderBody from "./FolderBody.tsx";
+import folderIcon from "./assets/folder.svg"
+import folderIconOpen from "./assets/folder_open.svg"
+import {useState} from "react";
+
+function FolderButton(props: {data: BookmarkTreeNode}) {
+
+    const [folderOpen, setFolderOpen] = useState(false);
+
+    return(
+        <>
+            <a className={"bookmark draggable"} onClick={() => setFolderOpen(!folderOpen)}>
+                <img alt="Folder icon" src={folderOpen ? folderIconOpen : folderIcon}/>
+                <span>{props.data.title}</span>
+            </a>
+            { folderOpen
+                && props.data.children
+                && props.data.children.length > 1
+                && (<FolderBody data={props.data}/>)}
+        </>
+);
+}
+
+export default FolderButton
\ No newline at end of file
diff --git a/extension/src/assets/folder.svg b/extension/src/assets/folder.svg
new file mode 100644
index 0000000..45d526a
--- /dev/null
+++ b/extension/src/assets/folder.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="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Z"/></svg>
\ No newline at end of file
diff --git a/extension/src/assets/folder_open.svg b/extension/src/assets/folder_open.svg
new file mode 100644
index 0000000..75ecf42
--- /dev/null
+++ b/extension/src/assets/folder_open.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="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640H160v400l96-320h684L837-217q-8 26-29.5 41.5T760-160H160Z"/></svg>
\ No newline at end of file
diff --git a/extension/src/index.css b/extension/src/index.css
index ebaa37b..54e8ea1 100644
--- a/extension/src/index.css
+++ b/extension/src/index.css
@@ -31,6 +31,7 @@ body {
   display: flex;
   flex-direction: column;
   place-items: flex-start;
+  z-index: 4;
 }
 
 .radio-group {
@@ -44,33 +45,32 @@ body {
 }
 
 /* Folder */
-.folder {
+.folderBody {
   width: 100%;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   border-style: solid;
-  border-width: 1px;
+  border-width: 2px;
+  border-radius: 5px;
   border-color: #393939;
   margin: 5px;
   padding: 10px;
-}
-
-.folder > div {
-  display: flex;
-  flex-direction: row;
   flex-wrap: wrap;
+  /*position: fixed;*/
+  /*bottom: 0;*/
+  animation: slideDown 0.2s ease;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
-.folder > summary {
-  font-weight: bold;
-  font-size: 20px;
-  margin: 5px;
-  user-select: none
+@keyframes slideDown {
+  from { transform: translateY(-50%); opacity: 0 }
 }
 
-body > .folder {
+body > .folderBody {
   margin: 0;
   border-style: none;
+  position: relative;
 }
 
 /* Bookmark */
@@ -80,6 +80,7 @@ body > .folder {
   width: 125px;
   padding: 10px;
   margin: 5px;
+  user-select: none;
 }
 
 .bookmark > img {
@@ -112,6 +113,7 @@ a {
   position: absolute;
   top: 0;
   right: 0;
+  z-index: 2;
 }
 
 #settings-close:hover, #settings-button:hover {
diff --git a/extension/tsconfig.app.tsbuildinfo b/extension/tsconfig.app.tsbuildinfo
index cf2a415..f6071d1 100644
--- a/extension/tsconfig.app.tsbuildinfo
+++ b/extension/tsconfig.app.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/Body.tsx","./src/Bookmark.tsx","./src/Folder.tsx","./src/RadioButtonGroup.tsx","./src/Settings.tsx","./src/SettingsEditor.tsx","./src/main.tsx","./src/vite-env.d.ts"],"version":"5.6.2"}
\ No newline at end of file
+{"root":["./src/Body.tsx","./src/Bookmark.tsx","./src/FolderBody.tsx","./src/FolderButton.tsx","./src/RadioButtonGroup.tsx","./src/Settings.tsx","./src/SettingsEditor.tsx","./src/main.tsx","./src/vite-env.d.ts"],"version":"5.6.2"}
\ No newline at end of file