Add ability to open/close folders in New Note dialog

assets/icons/caret-down-white.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><rect fill="none" height="256" width="256"/><polyline fill="none" points="208 96 128 176 48 96" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>

assets/icons/caret-down.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><rect fill="none" height="256" width="256"/><polyline fill="none" points="208 96 128 176 48 96" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>

assets/icons/caret-right-white.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><rect fill="none" height="256" width="256"/><polyline fill="none" points="96 48 176 128 96 208" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>

assets/icons/caret-right.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><rect fill="none" height="256" width="256"/><polyline fill="none" points="96 48 176 128 96 208" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>

src/components/NewNote.vue

@@ -33,6 +33,7 @@
                 name: "Heynote Root",
                 path: "",
                 children: [],
+                open: true,
             }
             const getNodeFromList = (list, part) => list.find(node => node.name === part)
                 
@@ -46,10 +47,12 @@
                     if (node) {
                         currentLevel = node
                     } else {
+                        const currentPath = currentParts.join("/")
                         node = {
                             name: part,
                             children: [],
-                            path: currentParts.join("/"),
+                            path: currentPath,
+                            open: this.currentNotePath.startsWith(currentPath),
                         }
                         currentLevel.children.push(node)
                         currentLevel = node

src/components/folder-selector/FolderItem.vue

@@ -5,6 +5,7 @@
             level: Number,
             selected: Boolean,
             newFolder: Boolean,
+            open: Boolean,
         },
 
         watch: {
@@ -33,6 +34,7 @@
                     folder: true,
                     selected: this.selected,
                     new: this.newFolder,
+                    open: this.open,
                 }
             },
             
@@ -59,17 +61,27 @@
     .folder
         padding: 3px 6px
         font-size: 13px
-        padding-left: calc(6px + var(--indent-level) * 16px)
+        padding-left: calc(18px + var(--indent-level) * 16px)
         display: flex
         scroll-margin-top: 5px
         scroll-margin-bottom: 5px
+        background-image: url('@/assets/icons/caret-right.svg')
+        background-size: 13px
+        background-repeat: no-repeat
+        background-position-y: 5px
+        background-position-x: calc(2px + var(--indent-level) * 16px)
         &:hover
-            background: #f1f1f1
+            background-color: #f1f1f1
+        &.open
+            background-image: url('@/assets/icons/caret-down.svg')
         &.selected
-            background: #48b57e
+            background-color: #48b57e
             color: #fff
+            background-image: url('@/assets/icons/caret-right-white.svg')
+            &.open
+                background-image: url('@/assets/icons/caret-down-white.svg')
             &:hover
-                background: #40a773
+                background-color: #40a773
             .new-folder
                 display: block
                 color: rgba(255,255,255, 0.9)

src/components/folder-selector/FolderSelector.vue

@@ -48,6 +48,7 @@
                         type: "folder",
                         createNewFolder: node.createNewFolder,
                         newFolder: node.newFolder,
+                        open: node.open,
                     })
                     if (node.createNewFolder) {
                         items.push({
@@ -56,7 +57,7 @@
                             path: node.path,
                         })
                     }
-                    if (node.children) {
+                    if (node.open && node.children) {
                         for (const child of node.children) {
                             getListItems(child, level + 1)
                         }
@@ -79,6 +80,14 @@
                 } else if (event.key === "ArrowUp") {
                     event.preventDefault()
                     this.selected = Math.max(this.selected - 1, 0)
+                } else if (event.key === "ArrowRight") {
+                    event.preventDefault()
+                    const node = this.getNode(this.listItems[this.selected].path)
+                    node.open = true
+                } else if (event.key === "ArrowLeft") {
+                    event.preventDefault()
+                    const node = this.getNode(this.listItems[this.selected].path)
+                    node.open = false
                 } else if (event.key === "+") {
                     event.preventDefault()
                     this.newFolderDialog(this.listItems[this.selected].path)
@@ -126,6 +135,7 @@
                 //console.log("Create new folder in", parentPath)
                 const node = this.getNode(parentPath)
                 node.createNewFolder = true
+                node.open = true
             },
 
             createNewFolder(parentPath, name) {
@@ -178,6 +188,12 @@
             pageCount() {
                 return Math.max(1, Math.floor(this.$refs.container.clientHeight / 24) - 1)
             },
+
+            folderClick(idx) {
+                const node = this.getNode(this.listItems[idx].path)
+                node.open = !node.open
+                this.selected = idx
+            },
         },
     }
 </script>
@@ -201,7 +217,8 @@
                 :level="item.level"
                 :selected="idx === selected && !item.createNewFolder"
                 :newFolder="item.newFolder"
-                @click="selected = idx"
+                :open="item.open"
+                @click="folderClick(idx)"
                 @new-folder="newFolderDialog(item.path)"
             />
             <NewFolderItem