feat(explorer): interactive connection

addons/explorer/src/renderer/FileExplorer.vue

@@ -168,7 +168,6 @@ function openContextMenu(event: MouseEvent, file?: FileEntity) {
 <template>
   <div class="file-explorer" @contextmenu="openContextMenu">
     <nav data-commas class="action-line">
-      <slot></slot>
       <button ref="back" type="button" data-commas :disabled="!hasPreviousValue" @click="goBack">
         <VisualIcon name="lucide-undo-2" />
       </button>

addons/explorer/src/renderer/FileExplorerPane.vue

@@ -1,14 +1,15 @@
 <script lang="ts" setup>
 import type { TerminalTab } from '@commas/types/terminal'
 import * as commas from 'commas:api/renderer'
+import { watch } from 'vue'
 import FileExplorer from './FileExplorer.vue'
 import { getDirectoryProcess } from './compositions'
 
 const { tab } = defineProps<{
   tab: TerminalTab,
 }>()
 
-const { TerminalBlock, VisualIcon } = commas.ui.vueAssets
+const { TerminalBlock } = commas.ui.vueAssets
 
 let directory = $computed({
   get: () => tab.cwd,
@@ -29,31 +30,19 @@ const target = $computed(() => {
   if (teletypes.length === 1) return teletypes[0]
 })
 
-const isConnected = $computed(() => {
-  if (!target) return false
-  return !target.pane && target.idle
-})
-
-function send() {
-  if (!target) return
+watch($$(directory), () => {
+  if (!target || target.pane || !target.idle) return
   const command = commas.workspace.getTerminalExecutorCommand({
     directory,
     shell: target.shell,
   })
   commas.workspace.executeTerminalTab(target, command)
-  setTimeout(() => {
-    commas.workspace.activateTerminalTab(target)
-  })
-}
+})
 </script>
 
 <template>
   <TerminalBlock :tab="tab" class="file-editor-pane">
-    <FileExplorer v-model="directory">
-      <button v-if="isConnected" type="button" data-commas @click="send">
-        <VisualIcon name="lucide-arrow-right" />
-      </button>
-    </FileExplorer>
+    <FileExplorer v-model="directory" />
   </TerminalBlock>
 </template>