feat: disable isFocued state for folders & snppets

src/renderer/components/sidebar/SidebarListItem.vue

@@ -41,6 +41,7 @@ import { useTagStore } from '@/store/tags'
 import type { FolderTree } from '@shared/types/main/db'
 import { useSnippetStore } from '@/store/snippets'
 import { emitter } from '@/composable'
+import { onScrollToFolder } from './composable'
 
 interface Props {
   id?: string
@@ -162,6 +163,8 @@ onClickOutside(itemRef, () => {
   isFocused.value = false
 })
 
+onScrollToFolder(isFocused)
+
 watch(
   () => props.isSelected,
   v => {

src/renderer/components/sidebar/TheSidebar.vue

@@ -52,6 +52,7 @@
         v-model="folderStore.foldersTree"
         :selected-id="folderStore.selectedId"
         :context-menu-handler="contextMenuHandler"
+        :focus-handler="focusHandler"
         @update:model-value="onUpdate"
         @click:node="onClickFolder"
       >
@@ -81,6 +82,7 @@
 </template>
 
 <script setup lang="ts">
+import type { Ref } from 'vue'
 import { onMounted, ref, watch } from 'vue'
 import type {
   SidebarSystemFolder,
@@ -101,6 +103,7 @@ import { emitter, onAddNewFolder } from '@/composable'
 import interact from 'interactjs'
 import { useAppStore } from '@/store/app'
 import type { Snippet } from '@shared/types/main/db'
+import { onScrollToFolder } from './composable'
 
 const folderStore = useFolderStore()
 const snippetStore = useSnippetStore()
@@ -184,6 +187,10 @@ const onDragEnter = (id: string) => {
   folderStore.hoveredId = id
 }
 
+const focusHandler = (isFocused: Ref) => {
+  onScrollToFolder(isFocused)
+}
+
 onMounted(() => {
   interact(sidebarRef.value).resizable({
     allowFrom: gutterRef.value,

src/renderer/components/sidebar/composable.ts

@@ -0,0 +1,17 @@
+import { emitter } from '@/composable'
+import { onUnmounted } from 'vue'
+import type { Ref } from 'vue'
+
+export const onScrollToFolder = (isFocused: Ref) => {
+  if (!isFocused) return
+
+  const handler = () => {
+    isFocused.value = false
+  }
+
+  emitter.on('scroll-to:folder', handler)
+
+  onUnmounted(() => {
+    emitter.off('scroll-to:folder', handler)
+  })
+}

src/renderer/components/snippets/SnippetListItem.vue

@@ -40,10 +40,11 @@ import type {
   ContextMenuResponse
 } from '@shared/types/main'
 import { onClickOutside, useClipboard } from '@vueuse/core'
-import { computed, ref } from 'vue'
+import { computed, onUnmounted, ref } from 'vue'
 import type { SystemFolderAlias } from '@shared/types/renderer/sidebar'
 import { useTagStore } from '@/store/tags'
 import { isToday, format } from 'date-fns'
+import { emitter } from '@/composable'
 
 interface Props {
   id: string
@@ -280,6 +281,18 @@ const onDragStart = (e: DragEvent) => {
 const onDragEnd = () => {
   folderStore.hoveredId = ''
 }
+
+const onScrollToSnippet = () => {
+  if (snippetStore.selectedId !== props.id) {
+    isFocused.value = false
+  }
+}
+
+emitter.on('scroll-to:snippet', onScrollToSnippet)
+
+onUnmounted(() => {
+  emitter.off('scroll-to:snippet', onScrollToSnippet)
+})
 </script>
 
 <style lang="scss" scoped>

src/renderer/components/ui/AppTree/AppTree.vue

@@ -26,6 +26,7 @@
 </template>
 
 <script setup lang="ts">
+import type { Ref } from 'vue'
 import { provide, ref, watch } from 'vue'
 import { store } from './composable'
 import type { Node } from './types'
@@ -37,6 +38,7 @@ interface Props {
   createGhostEl?: Function
   // Колбек должен вернуть состояние для props.isHighlighted AppTreeNode
   contextMenuHandler: () => Promise<boolean>
+  focusHandler?: (isFocused: Ref) => void
 }
 
 interface Emits {
@@ -68,6 +70,7 @@ provide('updateValue', updateValue)
 provide('clickNode', clickNode)
 provide('contextMenuHandler', props.contextMenuHandler)
 provide('isHoveredByIdDisabled', isHoveredByIdDisabled)
+provide('focusHandler', props.focusHandler)
 
 defineExpose({
   setHoveredNodeId

src/renderer/components/ui/AppTree/AppTreeNode.vue

@@ -126,6 +126,7 @@ const updateValue = inject('updateValue') as Function
 const clickNode = inject('clickNode') as Function
 const contextMenuHandler = inject('contextMenuHandler') as Function
 const isHoveredByIdDisabled = inject('isHoveredByIdDisabled') as Ref
+const focusHandler = inject('focusHandler') as Function
 
 const hoveredId = ref()
 const overPosition = ref<Position>()
@@ -276,6 +277,8 @@ onClickOutside(rowRef, () => {
   isFocused.value = false
   isHighlighted.value = false
 })
+
+if (focusHandler) focusHandler(isFocused)
 </script>
 
 <style lang="scss" scoped>