feat: add direct path input bar to Files page and FileBrowserModal

web/src/pages/Files.tsx

@@ -44,6 +44,9 @@ export default function Files() {
   const [searchResults, setSearchResults] = useState<SearchHit[]>([]);
   const [searching, setSearching] = useState(false);
 
+  const [pathInput, setPathInput] = useState(currentPath);
+  const [editingPath, setEditingPath] = useState(false);
+
   const [showMkdir, setShowMkdir] = useState(false);
   const [mkdirName, setMkdirName] = useState("");
 
@@ -86,6 +89,10 @@ export default function Files() {
     setSearchQuery("");
   }, [currentPath]);
 
+  useEffect(() => {
+    if (!editingPath) setPathInput(currentPath);
+  }, [currentPath, editingPath]);
+
   async function loadDir(path: string, pageNum: number) {
     setLoading(true);
     setError(null);
@@ -118,6 +125,21 @@ export default function Files() {
     setCurrentPath(path);
   }
 
+  async function handleNavigateToPath(e: React.FormEvent) {
+    e.preventDefault();
+    const path = pathInput.trim() || "/";
+    try {
+      const info = await api.fileInfo(path);
+      if (!info.is_dir) {
+        setError("La ruta no es un directorio");
+        return;
+      }
+      navigateTo(path);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Ruta no accesible");
+    }
+  }
+
   function handleDoubleClick(entry: FileEntry) {
     if (entry.is_dir) {
       navigateTo(entry.path);
@@ -148,11 +170,6 @@ export default function Files() {
     return parent === "/" ? "/" : parent;
   }
 
-  const breadcrumbs = currentPath.split("/").filter(Boolean).map((part, i, arr) => {
-    const path = "/" + arr.slice(0, i + 1).join("/");
-    return { part, path };
-  });
-
   async function handleMkdir() {
     if (!mkdirName.trim()) return;
     try {
@@ -305,18 +322,28 @@ export default function Files() {
             Sin restricción — acceso a todo el FS
           </span>
         )}
-        <div className="flex items-center gap-1 text-sm text-slate-300 flex-1 min-w-0">
+        <div className="flex items-center gap-2 text-sm text-slate-300 flex-1 min-w-0">
           <button
             className="btn-ghost px-2 py-1 text-xs"
             onClick={() => parentDir() && navigateTo(parentDir()!)}
             disabled={!parentDir()}
           >←</button>
-          {breadcrumbs.map((b, i) => (
-            <span key={i} className="flex items-center">
-              <button className="hover:text-white truncate max-w-32" onClick={() => navigateTo(b.path)}>{b.part}</button>
-              {i < breadcrumbs.length - 1 && <span className="mx-1 text-slate-600">/</span>}
-            </span>
-          ))}
+          <form onSubmit={handleNavigateToPath} className="flex-1 min-w-0">
+            <input
+              className="input font-mono text-sm w-full"
+              value={pathInput}
+              placeholder="/ruta/absoluta"
+              onFocus={() => setEditingPath(true)}
+              onBlur={() => { setEditingPath(false); setPathInput(currentPath); }}
+              onChange={e => setPathInput(e.target.value)}
+              onKeyDown={e => {
+                if (e.key === "Escape") {
+                  setPathInput(currentPath);
+                  (e.target as HTMLInputElement).blur();
+                }
+              }}
+            />
+          </form>
         </div>
       </div>