From ccc7c6c21d0a4ea24ab9286b8707f13ac47218dd Mon Sep 17 00:00:00 2001
From: Illia Filippov <filippov.illia.ukr@gmail.com>
Date: Wed, 24 Dec 2025 19:28:54 +0100
Subject: [PATCH] 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.
---
 .../dialogs/file-browser-dialog.tsx           |  4 +-
 apps/ui/src/components/ui/path-input.tsx      | 42 ++++++++++++-------
 2 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/apps/ui/src/components/dialogs/file-browser-dialog.tsx b/apps/ui/src/components/dialogs/file-browser-dialog.tsx
index ed3f8aaf..9dae11bb 100644
--- a/apps/ui/src/components/dialogs/file-browser-dialog.tsx
+++ b/apps/ui/src/components/dialogs/file-browser-dialog.tsx
@@ -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>
 
diff --git a/apps/ui/src/components/ui/path-input.tsx b/apps/ui/src/components/ui/path-input.tsx
index e20bed9e..77a2c821 100644
--- a/apps/ui/src/components/ui/path-input.tsx
+++ b/apps/ui/src/components/ui/path-input.tsx
@@ -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>