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>
<div className="text-[10px] text-muted-foreground"> <div className="text-[10px] text-muted-foreground">
Paste a full path above, or click on folders to navigate. Press Enter or click Go to Paste a full path above, or click on folders to navigate. Press Enter or click to jump
jump to a path. to a path.
</div> </div>
</div> </div>

View File

@@ -1,6 +1,6 @@
import { useEffect, Fragment, FocusEvent, KeyboardEvent, MouseEvent } from 'react'; import { useEffect, Fragment, FocusEvent, KeyboardEvent, MouseEvent } from 'react';
import { useState, useRef, useCallback } 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 { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { import {
@@ -253,6 +253,7 @@ function PathInput({
</Button> </Button>
</> </>
) : ( ) : (
<>
<Input <Input
ref={inputRef} ref={inputRef}
type="text" type="text"
@@ -267,6 +268,17 @@ function PathInput({
aria-label="Path input" aria-label="Path input"
aria-invalid={error} 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>
</div> </div>