fix: recognize directory symlinks

Author: CyanSalt

addons/explorer/src/main/index.ts

@@ -9,21 +9,31 @@ declare module '@commas/electron-ipc' {
   export interface Commands {
     'read-directory': (directory: string) => FileEntity[],
     'access-directory': (directory: string) => string | undefined,
-    'read-symlink': (file: string) => string,
   }
 }
 
 export default () => {
 
   commas.ipcMain.handle('read-directory', async (event, directory) => {
     const readingDir = directory || os.homedir()
-    const entities = await fs.promises.readdir(readingDir, { withFileTypes: true })
-    return sortBy(entities.map<FileEntity>(entity => ({
-      name: entity.name,
-      path: path.join(entity.parentPath, entity.name),
-      isDirectory: entity.isDirectory(),
-      isSymlink: entity.isSymbolicLink(),
-    })), [
+    const dirents = await fs.promises.readdir(readingDir, { withFileTypes: true })
+    const entities: FileEntity[] = await Promise.all(dirents.map(async dirent => {
+      const fullPath = path.join(dirent.parentPath, dirent.name)
+      const isSymlink = dirent.isSymbolicLink()
+      const symlink = isSymlink
+        ? path.join(dirent.parentPath, await fs.promises.readlink(fullPath))
+        : undefined
+      const stats = symlink
+        ? await fs.promises.stat(symlink)
+        : dirent
+      return {
+        name: dirent.name,
+        path: fullPath,
+        isDirectory: stats.isDirectory(),
+        symlink,
+      }
+    }))
+    return sortBy(entities, [
       entity => (entity.isDirectory ? 0 : 1),
       entity => entity.name,
     ])
@@ -38,11 +48,6 @@ export default () => {
     }
   })
 
-  commas.ipcMain.handle('read-symlink', async (event, file) => {
-    const target = await fs.promises.readlink(file)
-    return path.join(path.dirname(file), target)
-  })
-
   commas.i18n.addTranslationDirectory('locales')
 
   commas.keybinding.addKeyBindingsFile('keybindings.json')

addons/explorer/src/renderer/FileExplorer.vue

@@ -60,6 +60,11 @@ function selectFile(file: FileEntity) {
   }
 }
 
+function showSymlink(file: FileEntity) {
+  if (!file.symlink) return
+  modelValue = path.dirname(file.symlink)
+}
+
 let previousValue = $ref<string>()
 
 watch($$(modelValue), (value, oldValue) => {
@@ -80,11 +85,6 @@ function goBack() {
   }
 }
 
-async function showFile(file: FileEntity) {
-  const originalPath = await ipcRenderer.invoke('read-symlink', file.path)
-  modelValue = path.dirname(originalPath)
-}
-
 function openExternal(file: FileEntity) {
   if (file.isDirectory) {
     ipcRenderer.invoke('open-path', file.path)
@@ -199,17 +199,17 @@ function autoselect(event: FocusEvent) {
         @dragstart.prevent="startDragging($event, file)"
       >
         <VisualIcon
-          :name="file.isSymlink
+          :name="file.symlink
             ? (file.isDirectory ? 'lucide-folder-symlink' : 'lucide-file-symlink')
             : (file.isDirectory ? 'lucide-folder' : 'lucide-file')"
           class="file-icon"
         />
         <span class="file-name">{{ file.name }}{{ file.isDirectory ? path.sep : '' }}</span>
         <span class="action-list">
           <span
-            v-if="file.isSymlink"
+            v-if="file.symlink"
             class="link form-action"
-            @click.stop="showFile(file)"
+            @click.stop="showSymlink(file)"
           >
             <VisualIcon name="lucide-iteration-ccw" />
           </span>
@@ -267,7 +267,7 @@ function autoselect(event: FocusEvent) {
 .file-list {
   display: flex;
   flex-direction: column;
-  margin-top: 8px;
+  margin-top: 4px;
 }
 .file {
   display: flex;
@@ -301,5 +301,10 @@ function autoselect(event: FocusEvent) {
   .file:not(:hover) & {
     visibility: hidden;
   }
+  .form-action {
+    width: 20px;
+    height: 20px;
+    font-size: 14px;
+  }
 }
 </style>

addons/explorer/src/types/file.ts

@@ -2,5 +2,5 @@ export interface FileEntity {
   name: string,
   path: string,
   isDirectory: boolean,
-  isSymlink: boolean,
+  symlink?: string,
 }