🤖 feat: beautify remote directory picker (#1029)

- 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`_

Author: ibetitsmike

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}

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>
       )}