From f75aeab8071050e1cd89d3b333807afa165c7ada Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 9 Dec 2025 13:22:27 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20feat:=20beautify=20remote=20dire?=
 =?UTF-8?q?ctory=20picker?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add folder icons (Folder, FolderUp) from lucide-react
- Increase tree height from h-64 to h-80
- Increase font size from text-xs to text-sm
- Add flex layout with proper spacing and truncation

_Generated with mux_
---
 src/browser/components/DirectoryPickerModal.tsx |  2 +-
 src/browser/components/DirectoryTree.tsx        | 17 ++++++++++-------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/browser/components/DirectoryPickerModal.tsx b/src/browser/components/DirectoryPickerModal.tsx
index 8530985e1d..3f4c5e00eb 100644
--- a/src/browser/components/DirectoryPickerModal.tsx
+++ b/src/browser/components/DirectoryPickerModal.tsx
@@ -111,7 +111,7 @@ export const DirectoryPickerModal: React.FC<DirectoryPickerModalProps> = ({
           </DialogDescription>
         </DialogHeader>
         {error && <div className="text-error mb-3 text-xs">{error}</div>}
-        <div className="bg-modal-bg border-border-medium mb-4 h-64 overflow-hidden rounded border">
+        <div className="bg-modal-bg border-border-medium mb-4 h-80 overflow-hidden rounded border">
           <DirectoryTree
             currentPath={root ? root.path : null}
             entries={entries}
diff --git a/src/browser/components/DirectoryTree.tsx b/src/browser/components/DirectoryTree.tsx
index a9658074aa..5f18cffa49 100644
--- a/src/browser/components/DirectoryTree.tsx
+++ b/src/browser/components/DirectoryTree.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { Folder, FolderUp } from "lucide-react";
 
 interface DirectoryTreeEntry {
   name: string;
@@ -26,36 +27,38 @@ export const DirectoryTree: React.FC<DirectoryTreeProps> = (props) => {
   }, [currentPath]);
 
   return (
-    <div ref={containerRef} className="h-full overflow-y-auto p-2 font-mono text-xs">
+    <div ref={containerRef} className="h-full overflow-y-auto p-2 text-sm">
       {isLoading && !currentPath ? (
         <div className="text-muted py-4 text-center">Loading directories...</div>
       ) : (
         <ul className="m-0 list-none p-0">
           {currentPath && (
             <li
-              className="text-muted cursor-pointer rounded px-2 py-1 text-xs hover:bg-white/5"
+              className="text-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-white/5"
               onClick={onNavigateParent}
             >
-              ...
+              <FolderUp size={16} className="text-muted shrink-0" />
+              <span>..</span>
             </li>
           )}
 
           {!isLoading && !hasEntries ? (
-            <li className="text-muted px-2 py-1 text-xs">No subdirectories found</li>
+            <li className="text-muted px-2 py-1.5">No subdirectories found</li>
           ) : null}
 
           {entries.map((entry) => (
             <li
               key={entry.path}
-              className="text-muted cursor-pointer rounded px-2 py-1 text-xs hover:bg-white/5"
+              className="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-white/5"
               onClick={() => onNavigateTo(entry.path)}
             >
-              {entry.name}
+              <Folder size={16} className="shrink-0 text-yellow-500/80" />
+              <span className="truncate">{entry.name}</span>
             </li>
           ))}
 
           {isLoading && currentPath && !hasEntries ? (
-            <li className="text-muted px-2 py-1 text-xs">Loading directories...</li>
+            <li className="text-muted px-2 py-1.5">Loading directories...</li>
           ) : null}
         </ul>
       )}