feat: add mounted file previews

Author: akgohain

client/src/components/FilePickerModal.js

@@ -1,8 +1,25 @@
 import React, { useState, useEffect } from "react";
 import { Modal, List, Breadcrumb, Button, Spin, message } from "antd";
-import { FolderFilled, FileOutlined, ArrowUpOutlined } from "@ant-design/icons";
+import {
+  FolderFilled,
+  FileOutlined,
+  ArrowLeftOutlined,
+  UploadOutlined,
+} from "@ant-design/icons";
 import { apiClient } from "../api";
 
+const HIDDEN_SYSTEM_FILES = new Set(["workflow_preference.json"]);
+const IMAGE_EXTENSIONS = new Set([
+  ".png",
+  ".jpg",
+  ".jpeg",
+  ".gif",
+  ".bmp",
+  ".tif",
+  ".tiff",
+  ".webp",
+]);
+
 const FilePickerModal = ({
   visible,
   onCancel,
@@ -13,47 +30,16 @@ const FilePickerModal = ({
   const [currentPath, setCurrentPath] = useState("root");
   const [items, setItems] = useState([]);
   const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    if (visible) {
-      fetchFiles();
-    }
-  }, [visible, currentPath]);
-
-  const fetchFiles = async () => {
-    setLoading(true);
-    try {
-      const res = await apiClient.get("/files");
-      const allFiles = res.data;
-
-      // Filter items for current path
-      const currentItems = allFiles.filter((f) => {
-        if (currentPath === "root") {
-          return f.path === "root" || !f.path;
-        }
-        return f.path === currentPath;
-      });
-
-      // Sort: Folders first, then files
-      currentItems.sort((a, b) => {
-        if (a.is_folder === b.is_folder) return a.name.localeCompare(b.name);
-        return a.is_folder ? -1 : 1;
-      });
-
-      setItems(currentItems);
-    } catch (error) {
-      console.error("Failed to load files:", error);
-      message.error("Failed to load files");
-    } finally {
-      setLoading(false);
-    }
-  };
+  const [previewStatus, setPreviewStatus] = useState({});
+  const previewBaseUrl =
+    apiClient.defaults.baseURL || "http://localhost:4242";
 
   // Refactored fetch to get all files once
   const [allData, setAllData] = useState([]);
 
   useEffect(() => {
     if (visible) {
+      setCurrentPath("root");
       loadAllData();
     }
   }, [visible]);
@@ -73,6 +59,7 @@ const FilePickerModal = ({
   // Derive items for current view
   useEffect(() => {
     const filtered = allData.filter((f) => {
+      if (!f.is_folder && HIDDEN_SYSTEM_FILES.has(f.name)) return false;
       if (currentPath === "root") return f.path === "root" || !f.path;
       return String(f.path) === currentPath;
     });
@@ -108,7 +95,7 @@ const FilePickerModal = ({
         break;
       }
     }
-    parts.unshift({ id: "root", name: "Home" });
+    parts.unshift({ id: "root", name: "Projects" });
     return parts;
   };
 
@@ -147,6 +134,56 @@ const FilePickerModal = ({
     }
   };
 
+  const handleUploadFromLocal = () => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.multiple = true;
+    input.onchange = async (event) => {
+      const selectedFiles = Array.from(event.target.files || []);
+      if (!selectedFiles.length) return;
+      let uploaded = 0;
+      for (const file of selectedFiles) {
+        const form = new FormData();
+        form.append("file", file);
+        form.append("path", currentPath);
+        try {
+          await apiClient.post("/files/upload", form, {
+            headers: { "Content-Type": "multipart/form-data" },
+          });
+          uploaded += 1;
+        } catch (error) {
+          console.error("Failed to upload file from picker:", error);
+          message.error(`Failed to upload ${file.name}`);
+        }
+      }
+      if (uploaded > 0) {
+        message.success(
+          `Uploaded ${uploaded} file${uploaded > 1 ? "s" : ""} to this folder`,
+        );
+        await loadAllData();
+      }
+    };
+    input.click();
+  };
+
+  const isImageFile = (item) => {
+    if (!item || item.is_folder) return false;
+    if (item.type && item.type.startsWith("image/")) return true;
+    const ext = `.${String(item.name || "").split(".").pop()}`.toLowerCase();
+    return IMAGE_EXTENSIONS.has(ext);
+  };
+
+  const getPreviewUrl = (item) =>
+    `${previewBaseUrl}/files/preview/${item.id}`;
+
+  const markPreviewLoaded = (id) => {
+    setPreviewStatus((prev) => ({ ...prev, [id]: "loaded" }));
+  };
+
+  const markPreviewError = (id) => {
+    setPreviewStatus((prev) => ({ ...prev, [id]: "error" }));
+  };
+
   return (
     <Modal
       title={title}
@@ -182,7 +219,7 @@ const FilePickerModal = ({
         }}
       >
         <Button
-          icon={<ArrowUpOutlined />}
+          icon={<ArrowLeftOutlined />}
           onClick={goUp}
           disabled={currentPath === "root"}
           style={{ marginRight: "12px" }}
@@ -194,6 +231,13 @@ const FilePickerModal = ({
             </Breadcrumb.Item>
           ))}
         </Breadcrumb>
+        <Button
+          icon={<UploadOutlined />}
+          onClick={handleUploadFromLocal}
+          style={{ marginLeft: "auto" }}
+        >
+          Upload from Local
+        </Button>
       </div>
 
       <div style={{ height: "400px", overflow: "auto" }}>
@@ -263,6 +307,44 @@ const FilePickerModal = ({
                       <FolderFilled
                         style={{ color: "#1890ff", fontSize: "20px" }}
                       />
+                    ) : isImageFile(item) ? (
+                      <div
+                        style={{
+                          width: 32,
+                          height: 32,
+                          borderRadius: 4,
+                          border: "1px solid #f0f0f0",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          overflow: "hidden",
+                          position: "relative",
+                          background: "#fafafa",
+                        }}
+                      >
+                        {previewStatus[item.id] !== "loaded" && (
+                          <Spin size="small" />
+                        )}
+                        {previewStatus[item.id] !== "error" && (
+                          <img
+                            src={getPreviewUrl(item)}
+                            alt={item.name}
+                            loading="lazy"
+                            onLoad={() => markPreviewLoaded(item.id)}
+                            onError={() => markPreviewError(item.id)}
+                            style={{
+                              position: "absolute",
+                              inset: 0,
+                              width: "100%",
+                              height: "100%",
+                              objectFit: "cover",
+                              opacity:
+                                previewStatus[item.id] === "loaded" ? 1 : 0,
+                              transition: "opacity 0.2s ease",
+                            }}
+                          />
+                        )}
+                      </div>
                     ) : (
                       <FileOutlined style={{ fontSize: "20px" }} />
                     )

client/src/components/FileTreeSidebar.js

@@ -115,12 +115,55 @@ const FileTreeSidebar = ({
         onSelect={onSelectHandler}
         treeData={treeData}
         expandAction="click"
-        style={{ backgroundColor: "transparent" }}
+        style={{ backgroundColor: "transparent", fontSize: 13 }}
+        titleRender={(nodeData) => (
+          <span
+            style={{
+              display: "inline-block",
+              maxWidth: `calc(${width}px - 92px)`,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              verticalAlign: "middle",
+              lineHeight: "22px",
+            }}
+            title={String(nodeData.title)}
+          >
+            {nodeData.title}
+          </span>
+        )}
         draggable
         blockNode
         onDrop={handleDrop}
         onRightClick={handleRightClick}
       />
+      <style>
+        {`
+          .ant-tree .ant-tree-treenode {
+            min-height: 28px;
+            padding: 0;
+          }
+          .ant-tree .ant-tree-node-content-wrapper {
+            min-height: 28px;
+            padding: 2px 6px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+          }
+          .ant-tree .ant-tree-iconEle {
+            margin-right: 2px;
+          }
+          .ant-tree .ant-tree-switcher {
+            width: 16px;
+          }
+          .ant-tree .ant-tree-indent-unit {
+            width: 14px;
+          }
+          .ant-tree .ant-tree-list-holder-inner {
+            gap: 0;
+          }
+        `}
+      </style>
     </div>
   );
 };

client/src/components/UnifiedFileInput.js

@@ -1,18 +1,14 @@
 import React, { useState } from "react";
-import { Input, Modal, Button, message } from "antd";
-import {
-  FolderOpenOutlined,
-  LaptopOutlined,
-  CloudServerOutlined,
-} from "@ant-design/icons";
+import { Input, message } from "antd";
+import { FolderOpenOutlined } from "@ant-design/icons";
 import FilePickerModal from "./FilePickerModal";
 
 /**
  * Unified File Input Component
  * Supports:
  * - Text input (path)
  * - Drag and drop (external files)
- * - File picker (Local Machine or Server Storage)
+ * - File picker (mounted storage)
  *
  * @param {string} selectionType - 'file', 'directory', or 'fileOrDirectory' (default: 'file')
  * @param {object|string} value - The current value. Can be a string (path) or object { path, display }
@@ -26,40 +22,10 @@ const UnifiedFileInput = ({
   selectionType = "file",
 }) => {
   const [filePickerVisible, setFilePickerVisible] = useState(false);
-  const [sourceSelectionVisible, setSourceSelectionVisible] = useState(false);
   const [isDragOver, setIsDragOver] = useState(false);
 
   const handleBrowse = () => {
     if (disabled) return;
-    setSourceSelectionVisible(true);
-  };
-
-  const handleLocalSelection = async () => {
-    setSourceSelectionVisible(false);
-    try {
-      const { ipcRenderer } = window.require("electron");
-      const properties =
-        selectionType === "directory"
-          ? ["openDirectory"]
-          : selectionType === "fileOrDirectory"
-            ? ["openFile", "openDirectory"]
-            : ["openFile"];
-
-      const filePath = await ipcRenderer.invoke("open-local-file", {
-        properties,
-      });
-      if (filePath) {
-        // For local files, path and display are the same
-        onChange({ path: filePath, display: filePath });
-      }
-    } catch (error) {
-      console.error("Failed to open file:", error);
-      message.error("Failed to open file");
-    }
-  };
-
-  const handleServerSelection = () => {
-    setSourceSelectionVisible(false);
     setFilePickerVisible(true);
   };
 
@@ -186,49 +152,6 @@ const UnifiedFileInput = ({
         )}
       </div>
 
-      {/* Source Selection Modal */}
-      <Modal
-        title={
-          <span>
-            <FolderOpenOutlined style={{ marginRight: 8 }} />
-            Select Source
-          </span>
-        }
-        open={sourceSelectionVisible}
-        onCancel={() => setSourceSelectionVisible(false)}
-        footer={null}
-        width={400}
-      >
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            gap: "12px",
-            padding: "10px 0",
-          }}
-        >
-          <p style={{ marginBottom: "16px" }}>
-            Where would you like to select from?
-          </p>
-          <Button
-            size="large"
-            icon={<LaptopOutlined />}
-            onClick={handleLocalSelection}
-            block
-          >
-            Local Machine
-          </Button>
-          <Button
-            size="large"
-            icon={<CloudServerOutlined />}
-            onClick={handleServerSelection}
-            block
-          >
-            Server Storage
-          </Button>
-        </div>
-      </Modal>
-
       <FilePickerModal
         visible={filePickerVisible}
         onCancel={() => setFilePickerVisible(false)}