## Summary (#171)

I've successfully improved the "open in IDE" button to make it more user-friendly! Here's what was changed:

**Before**: The button was a small icon with only a tooltip showing "Open in editor"

**After**: The button now displays clear text "Open in [IDE NAME]" where [IDE NAME] is the actual configured editor (e.g., "Open in Visual Studio Code", "Open in Cursor", etc.)

### Changes made:

1. **Added config integration**: Imported the `useConfig` hook to access the user's editor configuration
2. **Created helper function**: Added `getEditorDisplayName()` to convert editor types to friendly display names
3. **Updated button UI**: 
   - Replaced the icon-only button with a text + icon button
   - Added proper spacing and sizing
   - Removed the tooltip since the button text is now self-explanatory

The button now dynamically shows the correct editor name based on the user's configuration, making it much clearer what will happen when they click it.
This commit is contained in:
Louis Knight-Webb
2025-07-14 16:39:50 +01:00
committed by GitHub
parent b88436052c
commit 0c6892216f

View File

@@ -44,6 +44,27 @@ import {
TaskExecutionStateContext,
TaskSelectedAttemptContext,
} from '@/components/context/taskDetailsContext.ts';
import { useConfig } from '@/components/config-provider.tsx';
// Helper function to get the display name for different editor types
function getEditorDisplayName(editorType: string): string {
switch (editorType) {
case 'vscode':
return 'Visual Studio Code';
case 'cursor':
return 'Cursor';
case 'windsurf':
return 'Windsurf';
case 'intellij':
return 'IntelliJ IDEA';
case 'zed':
return 'Zed';
case 'custom':
return 'Custom Editor';
default:
return 'Editor';
}
}
type Props = {
setError: Dispatch<SetStateAction<string | null>>;
@@ -71,6 +92,7 @@ function CurrentAttempt({
}: Props) {
const { task, projectId, handleOpenInEditor, projectHasDevScript } =
useContext(TaskDetailsContext);
const { config } = useConfig();
const { setSelectedAttempt } = useContext(TaskSelectedAttemptContext);
const { isStopping, setIsStopping } = useContext(TaskAttemptStoppingContext);
const { attemptData, fetchAttemptData, isAttemptRunning } = useContext(
@@ -353,6 +375,12 @@ function CurrentAttempt({
return selectedBranch;
}, [selectedBranch]);
// Get display name for the configured editor
const editorDisplayName = useMemo(() => {
if (!config?.editor?.editor_type) return 'Editor';
return getEditorDisplayName(config.editor.editor_type);
}, [config?.editor?.editor_type]);
return (
<div className="space-y-2">
<div className="grid grid-cols-4 gap-3 items-start">
@@ -425,23 +453,15 @@ function CurrentAttempt({
<div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
Worktree Path
</div>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="sm"
onClick={() => handleOpenInEditor()}
className="h-4 w-4 p-0 hover:bg-muted"
>
<ExternalLink className="h-3 w-3" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Open in editor</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<Button
variant="ghost"
size="sm"
onClick={() => handleOpenInEditor()}
className="h-6 px-2 text-xs hover:bg-muted gap-1"
>
<ExternalLink className="h-3 w-3" />
Open in {editorDisplayName}
</Button>
</div>
<div className="text-xs font-mono text-muted-foreground bg-muted px-2 py-1 rounded break-all">
{selectedAttempt.worktree_path}