mirror of
https://github.com/AutoMaker-Org/automaker.git
synced 2026-02-04 09:13:08 +00:00
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:
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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,20 +253,32 @@ function PathInput({
|
|||||||
</Button>
|
</Button>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<Input
|
<>
|
||||||
ref={inputRef}
|
<Input
|
||||||
type="text"
|
ref={inputRef}
|
||||||
placeholder={placeholder}
|
type="text"
|
||||||
value={pathInput}
|
placeholder={placeholder}
|
||||||
onChange={(e) => setPathInput(e.target.value)}
|
value={pathInput}
|
||||||
onKeyDown={handleKeyDown}
|
onChange={(e) => setPathInput(e.target.value)}
|
||||||
onBlur={handleInputBlur}
|
onKeyDown={handleKeyDown}
|
||||||
className="flex-1 font-mono text-xs h-7 px-0 border-0 shadow-none focus-visible:ring-0 bg-transparent"
|
onBlur={handleInputBlur}
|
||||||
data-testid="path-input"
|
className="flex-1 font-mono text-xs h-7 px-0 border-0 shadow-none focus-visible:ring-0 bg-transparent"
|
||||||
disabled={loading}
|
data-testid="path-input"
|
||||||
aria-label="Path input"
|
disabled={loading}
|
||||||
aria-invalid={error}
|
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>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user