better zero state for file list (All-Hands-AI#3213)

* better zero state for file list * Lint, cleanup, and update branch --------- Co-authored-by: amanape <[email protected]>
nicelife729 · Aug 1, 2024 · 8d11e0e · 8d11e0e
1 parent 286f100
commit 8d11e0e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 deletions.
diff --git a/frontend/src/components/file-explorer/ExplorerTree.tsx b/frontend/src/components/file-explorer/ExplorerTree.tsx
@@ -1,12 +1,22 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 import TreeNode from "./TreeNode";
+import { I18nKey } from "#/i18n/declaration";
 
 interface ExplorerTreeProps {
   files: string[];
   defaultOpen?: boolean;
 }
 
 function ExplorerTree({ files, defaultOpen = false }: ExplorerTreeProps) {
+  const { t } = useTranslation();
+  if (files.length === 0) {
+    return (
+      <div className="text-sm text-gray-400 pt-4">
+        {t(I18nKey.EXPLORER$EMPTY_WORKSPACE_MESSAGE)}
+      </div>
+    );
+  }
   return (
     <div className="w-full overflow-x-auto h-full pt-[4px]">
       {files.map((file) => (

diff --git a/frontend/src/components/file-explorer/FileExplorer.tsx b/frontend/src/components/file-explorer/FileExplorer.tsx
@@ -110,9 +110,6 @@ function FileExplorer() {
     try {
       const fileList = await listFiles("/");
       setFiles(fileList);
-      if (fileList.length === 0) {
-        toast.info(t(I18nKey.EXPLORER$EMPTY_WORKSPACE_MESSAGE));
-      }
     } catch (error) {
       toast.error("refresh-error", t(I18nKey.EXPLORER$REFRESH_ERROR_MESSAGE));
     }
@@ -188,10 +185,6 @@ function FileExplorer() {
     };
   }, []);
 
-  if (!files.length) {
-    return null;
-  }
-
   return (
     <div className="relative h-full">
       {isDragging && (
@@ -219,19 +212,17 @@ function FileExplorer() {
           isHidden ? "w-12" : "w-60",
         )}
       >
-        <div className="flex flex-col relative h-full p-2">
+        <div className="flex flex-col relative h-full px-3 py-2">
           <div className="sticky top-0 bg-neutral-800 z-10">
             <div
               className={twMerge(
-                "flex items-center mt-2 mb-1 p-2",
+                "flex items-center",
                 isHidden ? "justify-center" : "justify-between",
               )}
             >
               {!isHidden && (
-                <div className="ml-1 text-neutral-300 font-bold text-sm">
-                  <div className="ml-1 text-neutral-300 font-bold text-sm">
-                    {t(I18nKey.EXPLORER$LABEL_WORKSPACE)}
-                  </div>
+                <div className="text-neutral-300 font-bold text-sm">
+                  {t(I18nKey.EXPLORER$LABEL_WORKSPACE)}
                 </div>
               )}
               <ExplorerActions