fix: update navigation instructions and enhance path input UI

- Changed the navigation instruction text in FileBrowserDialog to use an arrow symbol for clarity.
- Added an ArrowRight icon to the PathInput component's button for improved visual feedback when navigating to a path.
This commit is contained in:
Illia Filippov
2025-12-24 19:28:54 +01:00
parent 896e183e41
commit ccc7c6c21d
2 changed files with 29 additions and 17 deletions

View File

@@ -349,8 +349,8 @@ export function FileBrowserDialog({
</div>
<div className="text-[10px] text-muted-foreground">
Paste a full path above, or click on folders to navigate. Press Enter or click Go to
jump to a path.
Paste a full path above, or click on folders to navigate. Press Enter or click to jump
to a path.
</div>
</div>

View File

@@ -1,6 +1,6 @@
import { useEffect, Fragment, FocusEvent, KeyboardEvent, MouseEvent } from 'react';
import { useState, useRef, useCallback } from 'react';
import { Home, ArrowLeft, Pencil } from 'lucide-react';
import { Home, ArrowLeft, Pencil, ArrowRight } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
@@ -253,20 +253,32 @@ function PathInput({
</Button>
</>
) : (
<Input
ref={inputRef}
type="text"
placeholder={placeholder}
value={pathInput}
onChange={(e) => setPathInput(e.target.value)}
onKeyDown={handleKeyDown}
onBlur={handleInputBlur}
className="flex-1 font-mono text-xs h-7 px-0 border-0 shadow-none focus-visible:ring-0 bg-transparent"
data-testid="path-input"
disabled={loading}
aria-label="Path input"
aria-invalid={error}
/>
<>
<Input
ref={inputRef}
type="text"
placeholder={placeholder}
value={pathInput}
onChange={(e) => setPathInput(e.target.value)}
onKeyDown={handleKeyDown}
onBlur={handleInputBlur}
className="flex-1 font-mono text-xs h-7 px-0 border-0 shadow-none focus-visible:ring-0 bg-transparent"
data-testid="path-input"
disabled={loading}
aria-label="Path input"
aria-invalid={error}
/>
<Button
variant="ghost"
size="icon"
onClick={handleGoToPath}
disabled={!pathInput.trim() || loading}
className="h-6 w-6 shrink-0"
aria-label="Go to path"
>
<ArrowRight className="w-3.5 h-3.5" />
</Button>
</>
)}
</div>
</div>