refactor: move folder tree into sidebar, use app for highlighted state (#514)

Author: antonreshetov

src/renderer/components/sidebar/Sidebar.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import type { Node } from '@/components/ui/folder-tree/types'
 import type { FoldersTreeResponse } from '@/services/api/generated'
+import type { Node } from '~/renderer/components/sidebar/folders/types'
 import { useApp, useGutter, useSnippets } from '@/composables'
 import { store } from '@/electron'
 import { api } from '@/services/api'
 import { Archive, Inbox, Plus, Star, Trash } from 'lucide-vue-next'
 import { APP_DEFAULTS } from '~/main/store/constants'
+import Tree from './folders/Tree.vue'
 
 const sidebarRef = ref<HTMLElement>()
 const gutterRef = ref<{ $el: HTMLElement }>()
@@ -140,10 +141,10 @@ watch(width, () => {
   <div
     ref="sidebarRef"
     data-sidebar
-    class="relative pt-[var(--title-bar-height)] flex flex-col h-screen px-1"
+    class="relative flex h-screen flex-col px-1 pt-[var(--title-bar-height)]"
   >
     <div class="flex-shrink-0">
-      <div class="uppercase font-bold text-[10px] pb-1 pl-1">
+      <div class="pb-1 pl-1 text-[10px] font-bold uppercase">
         Library / Tags
       </div>
       <div class="ml-5.5">
@@ -154,7 +155,7 @@ watch(width, () => {
         >
           <component
             :is="i.icon"
-            class="w-4 h-4 mr-0.5"
+            class="mr-0.5 h-4 w-4"
           />
           <div class="ml-1 select-none">
             {{ i.name }}
@@ -163,18 +164,18 @@ watch(width, () => {
       </div>
     </div>
     <div class="flex items-center justify-between pt-2 pl-1">
-      <div class="uppercase font-bold text-[10px]">
+      <div class="text-[10px] font-bold uppercase">
         Folders
       </div>
       <UiButton
         variant="icon"
         size="sm"
       >
-        <Plus class="w-4 h-4 text-text-muted" />
+        <Plus class="text-text-muted h-4 w-4" />
       </UiButton>
     </div>
     <div class="flex-grow overflow-auto">
-      <UiFolderTree
+      <Tree
         v-if="folders"
         v-model="folders"
         @click-node="onFolderClick"

…components/ui/folder-tree/FolderTree.vue …erer/components/sidebar/folders/Tree.vuesrc/renderer/components/ui/folder-tree/FolderTree.vue renamed to src/renderer/components/sidebar/folders/Tree.vue src/renderer/components/ui/folder-tree/FolderTree.vue renamed to src/renderer/components/sidebar/folders/Tree.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import type { Node } from './types'
-import FolderTreeNode from './FolderTreeNode.vue'
-import { folderTreeKeys } from './keys'
+import { treeKeys } from './keys'
+import TreeNode from './TreeNode.vue'
 
 interface Props {
   modelValue: Node[]
@@ -37,7 +37,7 @@ function toggleNode(node: Node) {
   return emit('toggleNode', node)
 }
 
-provide(folderTreeKeys, {
+provide(treeKeys, {
   clickNode,
   dragNode,
   toggleNode,
@@ -51,7 +51,7 @@ provide(folderTreeKeys, {
     data-folder-tree
     class="pt-1"
   >
-    <FolderTreeNode
+    <TreeNode
       v-for="(node, index) in modelValue"
       :key="node.id"
       :node="node"
@@ -70,6 +70,6 @@ provide(folderTreeKeys, {
           {{ node.name }}
         </template>
       </template>
-    </FolderTreeNode>
+    </TreeNode>
   </div>
 </template>

…onents/ui/folder-tree/FolderTreeNode.vue …/components/sidebar/folders/TreeNode.vuesrc/renderer/components/ui/folder-tree/FolderTreeNode.vue renamed to src/renderer/components/sidebar/folders/TreeNode.vue src/renderer/components/ui/folder-tree/FolderTreeNode.vue renamed to src/renderer/components/sidebar/folders/TreeNode.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue'
 import type { Node, Position } from './types'
+import { useApp } from '@/composables'
 import { onClickOutside } from '@vueuse/core'
 import { ChevronRight, Folder } from 'lucide-vue-next'
-
 import { isAllowed, store } from './composables'
-
-import { folderTreeKeys } from './keys'
+import { treeKeys } from './keys'
 
 interface Props {
   index: number
@@ -24,7 +23,9 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const { clickNode, dragNode, toggleNode, isHoveredByIdDisabled, focusHandler }
-  = inject(folderTreeKeys)!
+  = inject(treeKeys)!
+
+const { highlightedFolderId, selectedFolderId } = useApp()
 
 const hoveredId = ref()
 const overPosition = ref<Position>()
@@ -43,8 +44,10 @@ const isHovered = computed(() => {
   return props.node.id === hoveredId.value && overPosition.value === 'center'
 })
 
-const isSelected = computed(() => store.selectedId === props.node.id)
-const isHighlighted = computed(() => store.highlightedId === props.node.id)
+const isSelected = computed(() => selectedFolderId.value === props.node.id)
+const isHighlighted = computed(
+  () => highlightedFolderId.value === props.node.id,
+)
 
 const isShowBetweenLine = computed(() => {
   if (!isAllowed.value)
@@ -82,14 +85,13 @@ function onClickArrow(node: Node) {
 }
 
 function onClickNode(id: string | number) {
-  store.selectedId = id
-  store.highlightedId = undefined
+  highlightedFolderId.value = undefined
   isFocused.value = true
   clickNode(id)
 }
 
 async function onClickContextMenu() {
-  store.highlightedId = props.node.id
+  highlightedFolderId.value = props.node.id
 }
 
 function onDragStart(e: DragEvent) {
@@ -162,7 +164,7 @@ function onDrop() {
 
 onClickOutside(rowRef, () => {
   isFocused.value = false
-  store.highlightedId = undefined
+  highlightedFolderId.value = undefined
 })
 
 if (focusHandler)
@@ -238,7 +240,7 @@ if (focusHandler)
       </span>
     </div>
     <template v-if="node.children">
-      <FolderTreeNode
+      <TreeNode
         v-for="(children, idx) in node.children"
         v-show="node.isOpen"
         :key="children.id"
@@ -256,7 +258,7 @@ if (focusHandler)
             :hovered-node-id="hoveredNodeId"
           />
         </template>
-      </FolderTreeNode>
+      </TreeNode>
     </template>
     <svg
       v-if="isShowBetweenLine"

…components/ui/folder-tree/composables.ts …nts/sidebar/folders/composables/index.tssrc/renderer/components/ui/folder-tree/composables.ts renamed to src/renderer/components/sidebar/folders/composables/index.ts src/renderer/components/ui/folder-tree/composables.ts renamed to src/renderer/components/sidebar/folders/composables/index.ts

@@ -1,4 +1,4 @@
-import type { Node, Store } from './types'
+import type { Node, Store } from '../types'
 import { computed, reactive } from 'vue'
 
 export const store = reactive<Store>({})
@@ -32,3 +32,11 @@ export const isAllowed = computed(() => {
 
   return !isSameNode && !isChildrenNode
 })
+
+export function useFolders() {
+  return {
+    dragNodeChildrenIds,
+    isAllowed,
+    store,
+  }
+}

…nderer/components/ui/folder-tree/keys.ts …derer/components/sidebar/folders/keys.tssrc/renderer/components/ui/folder-tree/keys.ts renamed to src/renderer/components/sidebar/folders/keys.ts src/renderer/components/ui/folder-tree/keys.ts renamed to src/renderer/components/sidebar/folders/keys.ts

@@ -1,13 +1,12 @@
 import type { InjectionKey, Ref } from 'vue'
 import type { Node } from './types'
 
-export interface FolderTreeInjection {
+export interface TreeInjection {
   clickNode: (id: string | number) => void
   dragNode: (node: Node, target: Node, position: string) => void
-  toggleNode: (node: Node) => void
-  isHoveredByIdDisabled: Ref<boolean>
   focusHandler?: (isFocused: Ref<boolean>) => void
+  isHoveredByIdDisabled: Ref<boolean>
+  toggleNode: (node: Node) => void
 }
 
-export const folderTreeKeys: InjectionKey<FolderTreeInjection>
-  = Symbol('folderTree')
+export const treeKeys: InjectionKey<TreeInjection> = Symbol('tree')

…components/ui/folder-tree/types/index.ts …omponents/sidebar/folders/types/index.tssrc/renderer/components/ui/folder-tree/types/index.ts renamed to src/renderer/components/sidebar/folders/types/index.ts src/renderer/components/ui/folder-tree/types/index.ts renamed to src/renderer/components/sidebar/folders/types/index.ts

@@ -9,6 +9,4 @@ export interface Node extends FoldersItem {
 export interface Store {
   dragNode?: Node
   dragEnterNode?: Node
-  selectedId?: string | number
-  highlightedId?: string | number
 }

src/renderer/components/snippet/Item.vue

@@ -3,35 +3,35 @@ import type { SnippetsResponse } from '@/services/api/generated'
 import { useApp } from '@/composables'
 import { onClickOutside } from '@vueuse/core'
 import { format } from 'date-fns'
-import { useSnippetsStore } from './composables'
 
 interface Props {
   snippet: SnippetsResponse[0]
 }
 
 const props = defineProps<Props>()
 
-const { selectedSnippetId } = useApp()
-const { highlightedId } = useSnippetsStore()
+const { selectedSnippetId, highlightedSnippetId } = useApp()
 
 const isFocused = ref(false)
 const snippetRef = ref<HTMLDivElement>()
 
 const isSelected = computed(() => selectedSnippetId.value === props.snippet.id)
-const isHighlighted = computed(() => highlightedId.value === props.snippet.id)
+const isHighlighted = computed(
+  () => highlightedSnippetId.value === props.snippet.id,
+)
 
 function onSnippetClick(id: number) {
   selectedSnippetId.value = id
   isFocused.value = true
 }
 
 function onClickContextMenu() {
-  highlightedId.value = props.snippet.id
+  highlightedSnippetId.value = props.snippet.id
 }
 
 onClickOutside(snippetRef, () => {
   isFocused.value = false
-  highlightedId.value = undefined
+  highlightedSnippetId.value = undefined
 })
 </script>
 

src/renderer/components/snippet/composables/index.ts

@@ -6,6 +6,8 @@ const { store } = window.electron
 const libraryFilterSelected = ref<LibraryFilter>()
 const selectedFolderId = ref<number>(store.app.get('selectedFolderId'))
 const selectedSnippetId = ref<number>(store.app.get('selectedSnippetId'))
+const highlightedFolderId = ref<number>()
+const highlightedSnippetId = ref<number>()
 
 const sidebarWidth = useCssVar('--sidebar-width')
 const snippetListWidth = useCssVar('--snippet-list-width')
@@ -18,6 +20,19 @@ function selectFolder(folderId: number) {
   store.app.set('selectedFolderId', folderId)
 }
 
+watch(
+  [highlightedFolderId, highlightedSnippetId],
+  ([newFolderId, newSnippetId], [oldFolderId, oldSnippetId]) => {
+    if (newFolderId !== oldFolderId && newFolderId !== undefined) {
+      highlightedSnippetId.value = undefined
+    }
+
+    if (newSnippetId !== oldSnippetId && newSnippetId !== undefined) {
+      highlightedFolderId.value = undefined
+    }
+  },
+)
+
 export function useApp() {
   return {
     libraryFilterSelected,
@@ -26,5 +41,7 @@ export function useApp() {
     sidebarWidth,
     snippetListWidth,
     selectFolder,
+    highlightedFolderId,
+    highlightedSnippetId,
   }
 }