## 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:
committed by
GitHub
parent
b88436052c
commit
0c6892216f
@@ -44,6 +44,27 @@ import {
|
|||||||
TaskExecutionStateContext,
|
TaskExecutionStateContext,
|
||||||
TaskSelectedAttemptContext,
|
TaskSelectedAttemptContext,
|
||||||
} from '@/components/context/taskDetailsContext.ts';
|
} 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 = {
|
type Props = {
|
||||||
setError: Dispatch<SetStateAction<string | null>>;
|
setError: Dispatch<SetStateAction<string | null>>;
|
||||||
@@ -71,6 +92,7 @@ function CurrentAttempt({
|
|||||||
}: Props) {
|
}: Props) {
|
||||||
const { task, projectId, handleOpenInEditor, projectHasDevScript } =
|
const { task, projectId, handleOpenInEditor, projectHasDevScript } =
|
||||||
useContext(TaskDetailsContext);
|
useContext(TaskDetailsContext);
|
||||||
|
const { config } = useConfig();
|
||||||
const { setSelectedAttempt } = useContext(TaskSelectedAttemptContext);
|
const { setSelectedAttempt } = useContext(TaskSelectedAttemptContext);
|
||||||
const { isStopping, setIsStopping } = useContext(TaskAttemptStoppingContext);
|
const { isStopping, setIsStopping } = useContext(TaskAttemptStoppingContext);
|
||||||
const { attemptData, fetchAttemptData, isAttemptRunning } = useContext(
|
const { attemptData, fetchAttemptData, isAttemptRunning } = useContext(
|
||||||
@@ -353,6 +375,12 @@ function CurrentAttempt({
|
|||||||
return selectedBranch;
|
return selectedBranch;
|
||||||
}, [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 (
|
return (
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<div className="grid grid-cols-4 gap-3 items-start">
|
<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">
|
<div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
||||||
Worktree Path
|
Worktree Path
|
||||||
</div>
|
</div>
|
||||||
<TooltipProvider>
|
<Button
|
||||||
<Tooltip>
|
variant="ghost"
|
||||||
<TooltipTrigger asChild>
|
size="sm"
|
||||||
<Button
|
onClick={() => handleOpenInEditor()}
|
||||||
variant="ghost"
|
className="h-6 px-2 text-xs hover:bg-muted gap-1"
|
||||||
size="sm"
|
>
|
||||||
onClick={() => handleOpenInEditor()}
|
<ExternalLink className="h-3 w-3" />
|
||||||
className="h-4 w-4 p-0 hover:bg-muted"
|
Open in {editorDisplayName}
|
||||||
>
|
</Button>
|
||||||
<ExternalLink className="h-3 w-3" />
|
|
||||||
</Button>
|
|
||||||
</TooltipTrigger>
|
|
||||||
<TooltipContent>
|
|
||||||
<p>Open in editor</p>
|
|
||||||
</TooltipContent>
|
|
||||||
</Tooltip>
|
|
||||||
</TooltipProvider>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="text-xs font-mono text-muted-foreground bg-muted px-2 py-1 rounded break-all">
|
<div className="text-xs font-mono text-muted-foreground bg-muted px-2 py-1 rounded break-all">
|
||||||
{selectedAttempt.worktree_path}
|
{selectedAttempt.worktree_path}
|
||||||
|
|||||||
Reference in New Issue
Block a user