better zero state for file list (#3213)

* better zero state for file list

* Lint, cleanup, and update branch

---------

Co-authored-by: amanape <83104063+amanape@users.noreply.github.com>
This commit is contained in:
Robert Brennan
2024-08-01 16:04:47 -04:00
committed by GitHub
parent 286f10053e
commit 8d11e0eac9
2 changed files with 14 additions and 13 deletions

View File

@@ -1,5 +1,7 @@
import React from "react";
import { useTranslation } from "react-i18next";
import TreeNode from "./TreeNode";
import { I18nKey } from "#/i18n/declaration";
interface ExplorerTreeProps {
files: string[];
@@ -7,6 +9,14 @@ interface ExplorerTreeProps {
}
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) => (

View File

@@ -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