feat(app): add open in editor toolbar action (#209)

* feat(app): add open in editor toolbar action * fix(app): normalize editor icon asset permissions * chore(website): drop unrelated generated route tree change
2026-04-07 10:25:25 +08:00
parent fd9dfb0cc8
commit 5cb424b2e6
17 changed files with 870 additions and 0 deletions
@@ -0,0 +1,32 @@
+import { Image, type ImageSourcePropType } from "react-native";
+import type { EditorTargetId } from "@server/shared/messages";
+
+interface EditorAppIconProps {
+  editorId: EditorTargetId;
+  size?: number;
+  color?: string;
+}
+
+/* eslint-disable @typescript-eslint/no-require-imports */
+const EDITOR_APP_IMAGES: Record<EditorTargetId, ImageSourcePropType> = {
+  cursor: require("../../../assets/images/editor-apps/cursor.png"),
+  vscode: require("../../../assets/images/editor-apps/vscode.png"),
+  zed: require("../../../assets/images/editor-apps/zed.png"),
+  finder: require("../../../assets/images/editor-apps/finder.png"),
+  explorer: require("../../../assets/images/editor-apps/file-explorer.png"),
+  "file-manager": require("../../../assets/images/editor-apps/file-explorer.png"),
+};
+/* eslint-enable @typescript-eslint/no-require-imports */
+
+export function EditorAppIcon({
+  editorId,
+  size = 16,
+}: EditorAppIconProps) {
+  return (
+    <Image
+      source={EDITOR_APP_IMAGES[editorId]}
+      style={{ width: size, height: size }}
+      resizeMode="contain"
+    />
+  );
+}
@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+import { resolvePreferredEditorId } from "./use-preferred-editor";
+
+describe("resolvePreferredEditorId", () => {
+  it("keeps the stored editor when it is still available", () => {
+    expect(resolvePreferredEditorId(["cursor", "vscode"], "vscode")).toBe("vscode");
+  });
+
+  it("falls back to the first available editor when the stored one is missing", () => {
+    expect(resolvePreferredEditorId(["zed", "finder"], "cursor")).toBe("zed");
+  });
+
+  it("falls back when a platform-specific file manager target is unavailable", () => {
+    expect(resolvePreferredEditorId(["explorer", "vscode"], "finder")).toBe("explorer");
+  });
+
+  it("returns null when no editors are available", () => {
+    expect(resolvePreferredEditorId([], "cursor")).toBeNull();
+  });
+});
@@ -0,0 +1,57 @@
+import { useCallback } from "react";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { EditorTargetIdSchema, type EditorTargetId } from "@server/shared/messages";
+
+const PREFERRED_EDITOR_STORAGE_KEY = "@paseo:preferred-editor";
+const PREFERRED_EDITOR_QUERY_KEY = ["preferred-editor"];
+
+async function loadPreferredEditor(): Promise<EditorTargetId | null> {
+  const stored = await AsyncStorage.getItem(PREFERRED_EDITOR_STORAGE_KEY);
+  if (!stored) {
+    return null;
+  }
+  const parsed = EditorTargetIdSchema.safeParse(stored);
+  return parsed.success ? parsed.data : null;
+}
+
+export function resolvePreferredEditorId(
+  availableEditorIds: readonly EditorTargetId[],
+  storedEditorId: EditorTargetId | null | undefined,
+): EditorTargetId | null {
+  if (
+    storedEditorId &&
+    availableEditorIds.some((availableEditorId) => availableEditorId === storedEditorId)
+  ) {
+    return storedEditorId;
+  }
+  return availableEditorIds[0] ?? null;
+}
+
+export function usePreferredEditor() {
+  const queryClient = useQueryClient();
+  const { data, isPending } = useQuery({
+    queryKey: PREFERRED_EDITOR_QUERY_KEY,
+    queryFn: loadPreferredEditor,
+    staleTime: Infinity,
+    gcTime: Infinity,
+  });
+
+  const updatePreferredEditor = useCallback(
+    async (editorId: EditorTargetId | null) => {
+      queryClient.setQueryData(PREFERRED_EDITOR_QUERY_KEY, editorId);
+      if (editorId) {
+        await AsyncStorage.setItem(PREFERRED_EDITOR_STORAGE_KEY, editorId);
+        return;
+      }
+      await AsyncStorage.removeItem(PREFERRED_EDITOR_STORAGE_KEY);
+    },
+    [queryClient],
+  );
+
+  return {
+    preferredEditorId: data ?? null,
+    isLoading: isPending,
+    updatePreferredEditor,
+  };
+}
@@ -0,0 +1,246 @@
+import { useCallback, useEffect, useMemo } from "react";
+import { ActivityIndicator, Platform, Pressable, Text, View } from "react-native";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { Check, ChevronDown } from "lucide-react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import type {
+  EditorTargetDescriptorPayload,
+  EditorTargetId,
+} from "@server/shared/messages";
+import { EditorAppIcon } from "@/components/icons/editor-app-icons";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useToast } from "@/contexts/toast-context";
+import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
+import {
+  resolvePreferredEditorId,
+  usePreferredEditor,
+} from "@/hooks/use-preferred-editor";
+import { isAbsolutePath } from "@/utils/path";
+
+interface WorkspaceOpenInEditorButtonProps {
+  serverId: string;
+  cwd: string;
+}
+
+export function WorkspaceOpenInEditorButton({
+  serverId,
+  cwd,
+}: WorkspaceOpenInEditorButtonProps) {
+  const { theme } = useUnistyles();
+  const toast = useToast();
+  const client = useHostRuntimeClient(serverId);
+  const isConnected = useHostRuntimeIsConnected(serverId);
+  const { preferredEditorId, updatePreferredEditor } = usePreferredEditor();
+
+  const shouldLoadEditors =
+    Platform.OS === "web" &&
+    Boolean(client && isConnected) &&
+    cwd.trim().length > 0 &&
+    isAbsolutePath(cwd);
+
+  const availableEditorsQuery = useQuery<EditorTargetDescriptorPayload[]>({
+    queryKey: ["available-editors", serverId],
+    enabled: shouldLoadEditors,
+    staleTime: 60_000,
+    retry: false,
+    queryFn: async () => {
+      if (!client) {
+        return [];
+      }
+      try {
+        const payload = await client.listAvailableEditors();
+        return payload.error ? [] : payload.editors;
+      } catch {
+        return [];
+      }
+    },
+  });
+
+  const availableEditors = availableEditorsQuery.data ?? [];
+  const availableEditorIds = useMemo(
+    () => availableEditors.map((editor: EditorTargetDescriptorPayload) => editor.id),
+    [availableEditors],
+  );
+  const effectivePreferredEditorId = useMemo(
+    () => resolvePreferredEditorId(availableEditorIds, preferredEditorId),
+    [availableEditorIds, preferredEditorId],
+  );
+  const primaryOption =
+    availableEditors.find(
+      (editor: EditorTargetDescriptorPayload) => editor.id === effectivePreferredEditorId,
+    ) ?? null;
+
+  useEffect(() => {
+    if (!effectivePreferredEditorId || effectivePreferredEditorId === preferredEditorId) {
+      return;
+    }
+    void updatePreferredEditor(effectivePreferredEditorId).catch(() => undefined);
+  }, [effectivePreferredEditorId, preferredEditorId, updatePreferredEditor]);
+
+  const openMutation = useMutation({
+    mutationFn: async (editorId: EditorTargetId) => {
+      if (!client) {
+        throw new Error("Host is not connected");
+      }
+      const payload = await client.openInEditor(cwd, editorId);
+      if (payload.error) {
+        throw new Error(payload.error);
+      }
+      return editorId;
+    },
+    onError: (error: unknown) => {
+      toast.error(error instanceof Error ? error.message : "Failed to open in editor");
+    },
+  });
+
+  const handleOpenEditor = useCallback(
+    (editorId: EditorTargetId) => {
+      void updatePreferredEditor(editorId).catch(() => undefined);
+      openMutation.mutate(editorId);
+    },
+    [openMutation, updatePreferredEditor],
+  );
+
+  if (!shouldLoadEditors || !primaryOption || availableEditors.length === 0) {
+    return null;
+  }
+
+  return (
+    <View style={styles.row}>
+      <View style={styles.splitButton}>
+        <Pressable
+          testID="workspace-open-in-editor-primary"
+          style={({ hovered, pressed }) => [
+            styles.splitButtonPrimary,
+            (hovered || pressed) && styles.splitButtonPrimaryHovered,
+            openMutation.isPending && styles.splitButtonPrimaryDisabled,
+          ]}
+          onPress={() => handleOpenEditor(primaryOption.id)}
+          disabled={openMutation.isPending}
+          accessibilityRole="button"
+          accessibilityLabel={`Open workspace in ${primaryOption.label}`}
+        >
+          {openMutation.isPending ? (
+            <ActivityIndicator
+              size="small"
+              color={theme.colors.foreground}
+              style={styles.splitButtonSpinnerOnly}
+            />
+          ) : (
+            <View style={styles.splitButtonContent}>
+              <EditorAppIcon
+                editorId={primaryOption.id}
+                size={16}
+                color={theme.colors.foregroundMuted}
+              />
+              <Text style={styles.splitButtonText}>Open</Text>
+            </View>
+          )}
+        </Pressable>
+        {availableEditors.length > 1 ? (
+          <DropdownMenu>
+            <DropdownMenuTrigger
+              testID="workspace-open-in-editor-caret"
+              style={({ hovered, pressed, open }) => [
+                styles.splitButtonCaret,
+                (hovered || pressed || open) && styles.splitButtonCaretHovered,
+              ]}
+              accessibilityRole="button"
+              accessibilityLabel="Choose editor"
+            >
+              <ChevronDown size={16} color={theme.colors.foregroundMuted} />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align="end"
+              minWidth={148}
+              maxWidth={176}
+              testID="workspace-open-in-editor-menu"
+            >
+              {availableEditors.map((editor: EditorTargetDescriptorPayload) => (
+                <DropdownMenuItem
+                  key={editor.id}
+                  testID={`workspace-open-in-editor-item-${editor.id}`}
+                  leading={
+                    <EditorAppIcon
+                      editorId={editor.id}
+                      size={16}
+                      color={theme.colors.foregroundMuted}
+                    />
+                  }
+                  trailing={
+                    editor.id === effectivePreferredEditorId
+                      ? <Check size={16} color={theme.colors.foregroundMuted} />
+                      : undefined
+                  }
+                  onSelect={() => handleOpenEditor(editor.id)}
+                >
+                  {editor.label}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[1],
+    flexShrink: 0,
+  },
+  splitButton: {
+    flexDirection: "row",
+    alignItems: "stretch",
+    borderRadius: theme.borderRadius.md,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.borderAccent,
+    overflow: "hidden",
+  },
+  splitButtonPrimary: {
+    paddingLeft: theme.spacing[3],
+    paddingRight: 10,
+    paddingVertical: theme.spacing[1],
+    justifyContent: "center",
+    position: "relative",
+  },
+  splitButtonPrimaryHovered: {
+    backgroundColor: theme.colors.surface2,
+  },
+  splitButtonPrimaryDisabled: {
+    opacity: 0.6,
+  },
+  splitButtonText: {
+    fontSize: theme.fontSize.sm,
+    lineHeight: theme.fontSize.sm * 1.5,
+    color: theme.colors.foreground,
+    fontWeight: theme.fontWeight.normal,
+  },
+  splitButtonContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.spacing[2],
+  },
+  splitButtonSpinnerOnly: {
+    transform: [{ scale: 0.8 }],
+  },
+  splitButtonCaret: {
+    width: 28,
+    alignItems: "center",
+    justifyContent: "center",
+    borderLeftWidth: theme.borderWidth[1],
+    borderLeftColor: theme.colors.borderAccent,
+  },
+  splitButtonCaretHovered: {
+    backgroundColor: theme.colors.surface2,
+  },
+}));
@@ -48,6 +48,7 @@ import { ExplorerSidebar } from "@/components/explorer-sidebar";
 import { SplitContainer } from "@/components/split-container";
 import { SourceControlPanelIcon } from "@/components/icons/source-control-panel-icon";
 import { WorkspaceGitActions } from "@/screens/workspace/workspace-git-actions";
+import { WorkspaceOpenInEditorButton } from "@/screens/workspace/workspace-open-in-editor-button";
 import { ExplorerSidebarAnimationProvider } from "@/contexts/explorer-sidebar-animation-context";
 import { useToast } from "@/contexts/toast-context";
 import { useExplorerOpenGesture } from "@/hooks/use-explorer-open-gesture";
@@ -2045,6 +2046,12 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
            }
            right={
              <View style={styles.headerRight}>
+                {!isMobile ? (
+                  <WorkspaceOpenInEditorButton
+                    serverId={normalizedServerId}
+                    cwd={normalizedWorkspaceId}
+                  />
+                ) : null}
                {!isMobile && isGitCheckout ? (
                  <>
                    <WorkspaceGitActions