feat: allow ping all elements

Author: codewec

app/composables/api/buildActionsApi.ts

@@ -10,6 +10,7 @@ export function buildActionsApi(options: BuildEditoroApiOptions) {
 
   return {
     openCreateModal: uiStore.openCreateModal,
+    openPath: options.actions.openPath,
     createEntry: entryActions.createEntry,
     openRenameModal: entryActions.openRenameModal,
     renameSelectedEntry: entryActions.renameSelectedEntry,

app/composables/editor/useEditoroEditorPins.ts

@@ -6,7 +6,7 @@ type EditoroEditorPinsOptions = {
 
 const PINNED_FILES_COOKIE_KEY = 'editoro.pinned-files'
 
-function parsePinnedFilePaths(raw: string | undefined) {
+function parsePinnedFilePaths(raw: unknown) {
   if (!raw) {
     return []
   }
@@ -37,6 +37,10 @@ function areSamePaths(left: string[], right: string[]) {
   return left.length === right.length && left.every((value, index) => value === right[index])
 }
 
+function hasHiddenSegment(path: string) {
+  return path.split('/').some(segment => segment.startsWith('.'))
+}
+
 /**
  * Handles pinned file tabs persistence and mutation.
  * Used by `app/stores/editoroEditor.ts`.
@@ -105,8 +109,15 @@ export function useEditoroEditorPins(options: EditoroEditorPinsOptions) {
     togglePinnedFile(options.activeFilePath.value)
   }
 
-  function reconcilePinnedFiles(existingFilePaths: Set<string>) {
-    const nextPaths = pinnedFilePaths.value.filter(path => existingFilePaths.has(path))
+  function reconcilePinnedFiles(existingFilePaths: Set<string>, preserveHiddenPaths = false) {
+    const nextPaths = pinnedFilePaths.value.filter((path) => {
+      if (existingFilePaths.has(path)) {
+        return true
+      }
+
+      return preserveHiddenPaths && hasHiddenSegment(path)
+    })
+
     if (nextPaths.length === pinnedFilePaths.value.length) {
       return
     }

app/composables/useEditoroContext.ts

@@ -42,6 +42,9 @@ export function useEditoroContext() {
   const fileSelection = useEditoroFileSelection({
     selectedNode: treeRefs.selectedNode,
     activeFilePath: editorRefs.activeFilePath,
+    pinnedFilePaths: editorRefs.pinnedFilePaths,
+    showHiddenEntries: refs.preferencesRefs.showHiddenEntries,
+    setShowHiddenEntries: preferencesStore.setShowHiddenEntries,
     treeInitialized: treeRefs.treeInitialized,
     editorStore,
     loadTree
@@ -72,7 +75,8 @@ export function useEditoroContext() {
     entryActions,
     actions: {
       refreshTree: treeActions.refreshTree,
-      toggleShowHiddenEntries: treeActions.toggleShowHiddenEntries
+      toggleShowHiddenEntries: treeActions.toggleShowHiddenEntries,
+      openPath: fileSelection.openPath
     }
   }
 }

app/composables/useEditoroFileSelection.ts

@@ -5,6 +5,7 @@
 import type { Ref } from 'vue'
 import type { TreeNode } from '~/types/editoro'
 import { isImagePath, isMarkdownPath } from '~/utils/editoro-file'
+import { hasHiddenPathSegment } from '~/utils/editoro-path'
 
 type EditorStoreLike = {
   clearEditor: () => void
@@ -14,6 +15,9 @@ type EditorStoreLike = {
 type FileSelectionOptions = {
   selectedNode: Ref<TreeNode | undefined>
   activeFilePath: Ref<string>
+  pinnedFilePaths: Ref<string[]>
+  showHiddenEntries: Ref<boolean>
+  setShowHiddenEntries: (nextValue: boolean) => void
   treeInitialized: Ref<boolean>
   editorStore: EditorStoreLike
   loadTree: (preferPath?: string) => Promise<void>
@@ -36,6 +40,27 @@ export function useEditoroFileSelection(options: FileSelectionOptions) {
     return ''
   }
 
+  function getPinnedFallbackPath() {
+    return options.pinnedFilePaths.value[0] || ''
+  }
+
+  function getInitialPreferredPath() {
+    return getFileQueryValue() || getPinnedFallbackPath()
+  }
+
+  async function openPath(path: string) {
+    if (!path) {
+      return false
+    }
+
+    if (hasHiddenPathSegment(path) && !options.showHiddenEntries.value) {
+      options.setShowHiddenEntries(true)
+    }
+
+    await options.loadTree(path)
+    return options.selectedNode.value?.path === path
+  }
+
   async function syncRouteWithFile(filePath?: string) {
     const current = getFileQueryValue()
     const next = filePath || ''
@@ -74,36 +99,36 @@ export function useEditoroFileSelection(options: FileSelectionOptions) {
 
   async function initializeFromRouteOnMounted() {
     const filePath = getFileQueryValue()
+    const preferredPath = getInitialPreferredPath()
 
-    async function ensureRouteFileSelected(path: string) {
+    async function ensurePathSelected(path: string) {
       const selected = options.selectedNode.value
-      if (selected?.type === 'file' && selected.path === path) {
+      if (selected?.path === path) {
         return true
       }
 
-      await options.loadTree(path)
-
-      const nextSelected = options.selectedNode.value
-      return nextSelected?.type === 'file' && nextSelected.path === path
+      return await openPath(path)
     }
 
     if (!options.treeInitialized.value) {
-      await options.loadTree(filePath || undefined)
+      await options.loadTree(preferredPath || undefined)
 
-      if (filePath && !(await ensureRouteFileSelected(filePath))) {
+      if (filePath && !(await ensurePathSelected(filePath))) {
         await syncRouteWithFile(undefined)
       }
 
       return
     }
 
     if (filePath) {
-      const isOpened = await ensureRouteFileSelected(filePath)
+      const isOpened = await ensurePathSelected(filePath)
       if (!isOpened) {
         await syncRouteWithFile(undefined)
         options.editorStore.clearEditor()
         return
       }
+    } else if (preferredPath) {
+      await ensurePathSelected(preferredPath)
     }
 
     // Hydration case: selected node can already be restored from SSR state,
@@ -126,6 +151,8 @@ export function useEditoroFileSelection(options: FileSelectionOptions) {
 
   return {
     getFileQueryValue,
+    getInitialPreferredPath,
+    openPath,
     syncRouteWithFile,
     handleSelectedNodeChange,
     initializeFromRouteOnMounted

app/composables/useEditoroLifecycle.ts

@@ -5,10 +5,11 @@
 import type { Ref } from 'vue'
 import type { TreeNode } from '~/types/editoro'
 import { fetchTree } from '~/services/files-api'
-import { collectFilePaths } from '~/utils/editoro-path'
+import { collectNodePaths } from '~/utils/editoro-path'
 
 type FileSelectionLike = {
   getFileQueryValue: () => string
+  getInitialPreferredPath: () => string
   handleSelectedNodeChange: (node?: TreeNode) => Promise<void>
   initializeFromRouteOnMounted: () => Promise<void>
 }
@@ -19,7 +20,7 @@ type TreeStoreLike = {
 
 type EditorStoreLike = {
   clearPendingSave: () => void
-  reconcilePinnedFiles: (existingFilePaths: Set<string>) => void
+  reconcilePinnedFiles: (existingFilePaths: Set<string>, preserveHiddenPaths?: boolean) => void
 }
 
 type UiStoreLike = {
@@ -38,13 +39,21 @@ type LifecycleOptions = {
 }
 
 export async function useEditoroLifecycle(options: LifecycleOptions) {
-  watch([options.treeItems, options.treeInitialized], ([items, initialized]) => {
+  const reconcilePinnedEntries = (items: TreeNode[], initialized: boolean) => {
     if (!initialized) {
       return
     }
 
-    options.editorStore.reconcilePinnedFiles(collectFilePaths(items))
-  }, { immediate: true })
+    options.editorStore.reconcilePinnedFiles(
+      collectNodePaths(items),
+      !options.showHiddenEntries.value
+    )
+  }
+
+  // Reconcile only on client/after setup to avoid hydration mismatch.
+  watch([options.treeItems, options.treeInitialized], ([items, initialized]) => {
+    reconcilePinnedEntries(items, initialized)
+  }, { flush: 'post' })
 
   watch(options.selectedNode, async (node) => {
     await options.fileSelection.handleSelectedNodeChange(node)
@@ -57,15 +66,16 @@ export async function useEditoroLifecycle(options: LifecycleOptions) {
 
   onMounted(async () => {
     await options.fileSelection.initializeFromRouteOnMounted()
+    reconcilePinnedEntries(options.treeItems.value, options.treeInitialized.value)
   })
 
-  const initialFilePath = options.fileSelection.getFileQueryValue()
+  const initialPreferredPath = options.fileSelection.getInitialPreferredPath()
   const { data: initialTreeData } = await useAsyncData(
     'editoro-tree-initial',
     () => fetchTree(options.showHiddenEntries.value)
   )
 
   if (initialTreeData.value?.items) {
-    options.treeStore.applyTreeData(initialTreeData.value.items, initialFilePath || undefined)
+    options.treeStore.applyTreeData(initialTreeData.value.items, initialPreferredPath || undefined)
   }
 }

app/composables/useEditoroViewModel.ts

@@ -62,7 +62,7 @@ export function useEditoroViewModel(options: ViewModelOptions) {
   const headerBadges = computed<EditorPinnedBadge[]>(() => {
     const badges: EditorPinnedBadge[] = []
     const currentNode = options.selectedNode.value
-    const currentPath = currentNode?.type === 'file' ? currentNode.path : ''
+    const currentPath = currentNode?.path || ''
 
     for (const path of options.pinnedFilePaths.value) {
       const node = findNodeByPath(options.treeItems.value, path)
@@ -76,25 +76,18 @@ export function useEditoroViewModel(options: ViewModelOptions) {
       })
     }
 
-    // Show non-pinned current file as the right-most badge.
-    if (currentNode?.type === 'file' && !options.pinnedFilePaths.value.includes(currentNode.path)) {
+    // Show non-pinned selected node as the right-most badge.
+    if (currentNode && !options.pinnedFilePaths.value.includes(currentNode.path)) {
       badges.push({
         key: `current:${currentNode.path}`,
         path: currentNode.path,
-        label: currentNode.label || getBaseName(currentNode.path) || currentNode.path,
+        label: currentNode.type === 'directory'
+          ? currentNode.path
+          : (currentNode.label || getBaseName(currentNode.path) || currentNode.path),
         isCurrent: true,
         isPinned: false,
         canPin: true
       })
-    } else if (currentNode?.type === 'directory') {
-      badges.push({
-        key: `selected:${currentNode.path}`,
-        path: currentNode.path,
-        label: currentNode.path,
-        isCurrent: true,
-        isPinned: false,
-        canPin: false
-      })
     } else if (!currentNode) {
       badges.push({
         key: 'root',

app/composables/workspace/useEditoroMainHeaderBindings.ts

@@ -27,7 +27,7 @@ export function useEditoroMainHeaderBindings(state: EditoroState) {
         return
       }
 
-      state.tree.selectNodeByPath(path)
+      void state.actions.openPath(path)
     },
     togglePin: (path: string) => {
       if (!path) {

app/stores/editoroPreferences.ts

@@ -49,6 +49,10 @@ export const useEditoroPreferencesStore = defineStore('editoro-preferences', ()
     showHiddenEntries.value = !showHiddenEntries.value
   }
 
+  function setShowHiddenEntries(nextValue: boolean) {
+    showHiddenEntries.value = !!nextValue
+  }
+
   function openSettingsModal() {
     settingsLocale.value = locale.value
     settingsColorMode.value = (colorMode.preference as ColorModePreference) || 'system'
@@ -99,6 +103,7 @@ export const useEditoroPreferencesStore = defineStore('editoro-preferences', ()
     settingsColorMode,
     initialize,
     toggleShowHiddenEntries,
+    setShowHiddenEntries,
     openSettingsModal,
     closeSettingsModal,
     setLocalePreference,

app/utils/editoro-path.ts

@@ -76,3 +76,24 @@ export function collectFilePaths(items: TreeNode[]) {
   walk(items)
   return files
 }
+
+export function collectNodePaths(items: TreeNode[]) {
+  const nodes = new Set<string>()
+
+  const walk = (entries: TreeNode[]) => {
+    for (const entry of entries) {
+      nodes.add(entry.path)
+
+      if (entry.type === 'directory' && entry.children.length) {
+        walk(entry.children)
+      }
+    }
+  }
+
+  walk(items)
+  return nodes
+}
+
+export function hasHiddenPathSegment(path: string) {
+  return path.split('/').some(segment => segment.startsWith('.'))
+}