Open active file in external app instead of repo directory

Author: charlesvien

apps/code/src/renderer/features/task-detail/components/ExternalAppsOpener.tsx

@@ -4,7 +4,7 @@ import { ChevronDownIcon } from "@radix-ui/react-icons";
 import { Button, DropdownMenu, Flex, Text } from "@radix-ui/themes";
 import { SHORTCUTS } from "@renderer/constants/keyboard-shortcuts";
 import { handleExternalAppAction } from "@utils/handleExternalAppAction";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 
 const THUMBNAIL_ICON_SIZE = 20;
@@ -74,14 +74,26 @@ export function ExternalAppsOpener({
     [handleCopyPath],
   );
 
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
   if (!targetPath) {
     return null;
   }
 
   const isReady = !isLoading && detectedApps.length > 0;
 
   return (
-    <DropdownMenu.Root>
+    <DropdownMenu.Root open={dropdownOpen} onOpenChange={setDropdownOpen}>
+      {dropdownOpen && (
+        <div
+          className="no-drag"
+          style={{
+            position: "fixed",
+            inset: 0,
+            zIndex: 1,
+          }}
+        />
+      )}
       <Flex className="no-drag">
         <Button
           size="1"

apps/code/src/renderer/features/task-detail/components/TaskDetail.tsx

@@ -1,5 +1,10 @@
 import { FilePicker } from "@features/command/components/FilePicker";
 import { PanelLayout } from "@features/panels";
+import { usePanelLayoutStore } from "@features/panels/store/panelLayoutStore";
+import {
+  getLeafPanel,
+  parseTabId,
+} from "@features/panels/store/panelStoreHelpers";
 import { useCwd } from "@features/sidebar/hooks/useCwd";
 import { useTaskData } from "@features/task-detail/hooks/useTaskData";
 import { useTaskStore } from "@features/tasks/stores/taskStore";
@@ -30,6 +35,28 @@ export function TaskDetail({ task: initialTask }: TaskDetailProps) {
 
   const effectiveRepoPath = useCwd(taskId);
 
+  const activeRelativePath = usePanelLayoutStore((state) => {
+    const layout = state.getLayout(taskId);
+    if (!layout) return null;
+
+    const panelId = layout.focusedPanelId;
+    if (!panelId) return null;
+
+    const panel = getLeafPanel(layout.panelTree, panelId);
+    if (!panel) return null;
+
+    const parsed = parseTabId(panel.content.activeTabId);
+    if (parsed.type === "file" || parsed.type === "diff") {
+      return parsed.value;
+    }
+    return null;
+  });
+
+  const openTargetPath =
+    activeRelativePath && effectiveRepoPath
+      ? `${effectiveRepoPath}/${activeRelativePath}`
+      : effectiveRepoPath;
+
   const [filePickerOpen, setFilePickerOpen] = useState(false);
 
   const { enableScope, disableScope } = useHotkeysContext();
@@ -60,12 +87,10 @@ export function TaskDetail({ task: initialTask }: TaskDetailProps) {
             {task.title}
           </Text>
         </Flex>
-        {effectiveRepoPath && (
-          <ExternalAppsOpener targetPath={effectiveRepoPath} />
-        )}
+        {openTargetPath && <ExternalAppsOpener targetPath={openTargetPath} />}
       </Flex>
     ),
-    [task.title, effectiveRepoPath],
+    [task.title, openTargetPath],
   );
 
   useSetHeaderContent(headerContent);