feat: add popup info for folder, tag and file

src/components/File/index.tsx

@@ -7,18 +7,16 @@ import { FFS_DRAG_FILE } from "src/assets/constants";
 import { useExplorer } from "src/hooks/useExplorer";
 
 import FileContent, { FileProps } from "./Content";
+import { ITEM_INFO_COPY } from "src/locales";
+import dayjs from "dayjs";
 
 type Props = FileProps & {
 	onOpenFoldersPane: () => void;
 	disableDrag?: boolean;
 };
-const File = ({
-	file,
-	deleteFile,
-	disableDrag,
-	onOpenFoldersPane,
-}: Props) => {
-	const { useExplorerStore } = useExplorer();
+const File = ({ file, deleteFile, disableDrag, onOpenFoldersPane }: Props) => {
+	const { useExplorerStore, plugin } = useExplorer();
+	const { language } = plugin;
 
 	const { selectFile } = useExplorerStore(
 		useShallow((store: ExplorerStore) => ({
@@ -39,6 +37,19 @@ const File = ({
 		};
 	}, [onOpenFoldersPane]);
 
+	const getAriaLabel = () => {
+		const { fileModifiedTime, fileCreatedTime } = ITEM_INFO_COPY;
+		const { ctime, mtime } = file.stat;
+		const format = "YYYY-MM-DD HH:mm";
+
+		const modifiedInfo =
+			fileModifiedTime[language] + dayjs(mtime).format(format);
+		const createdInfo =
+			fileCreatedTime[language] + dayjs(ctime).format(format);
+
+		return `${file.basename}\n${modifiedInfo}\n${createdInfo}`;
+	};
+
 	return (
 		<div
 			className="ffs__file-tree-item tree-item nav-file"
@@ -47,6 +58,8 @@ const File = ({
 			onClick={() => selectFile(file)}
 			{...attributes}
 			{...listeners}
+			data-tooltip-position="right"
+			aria-label={getAriaLabel()}
 		>
 			<FileContent file={file} deleteFile={deleteFile} />
 		</div>

src/components/Folder/index.tsx

@@ -8,6 +8,7 @@ import FolderContent, { FolderProps } from "./Content";
 import { useExplorer } from "src/hooks/useExplorer";
 import FolderExpandIcon from "./ExpandIcon";
 import classNames from "classnames";
+import { ITEM_INFO_COPY, PUNCTUATION_COPY } from "src/locales";
 
 type Props = FolderProps & {
 	onOpenFilesPane: () => void;
@@ -22,7 +23,7 @@ const Folder = ({
 	disableDrag = false,
 	disableHoverIndent = false,
 }: Props) => {
-	const { useExplorerStore } = useExplorer();
+	const { useExplorerStore, plugin } = useExplorer();
 
 	const {
 		setFocusedFolder,
@@ -31,6 +32,8 @@ const Folder = ({
 		expandedFolderPaths,
 		focusedFolder,
 		hasFolderChildren,
+		getFilesinFolder,
+		getFoldersByParent,
 	} = useExplorerStore(
 		useShallow((store: ExplorerStore) => ({
 			setFocusedFolder: store.setFocusedFolder,
@@ -39,11 +42,14 @@ const Folder = ({
 			expandFolder: store.expandFolder,
 			collapseFolder: store.collapseFolder,
 			focusedFolder: store.focusedFolder,
+			getFilesinFolder: store.getFilesInFolder,
+			getFoldersByParent: store.getFoldersByParent,
 		}))
 	);
 
-	const isFocused = folder.path == focusedFolder?.path;
+	const { language } = plugin;
 
+	const isFocused = folder.path == focusedFolder?.path;
 	const isRoot = folder.isRoot();
 
 	const {
@@ -97,6 +103,25 @@ const Folder = ({
 		return <FolderExpandIcon folder={folder} />;
 	};
 
+	const getAriaLabel = () => {
+		const filesCount = getFilesinFolder(folder).length;
+		const foldersCount = getFoldersByParent(folder).length;
+		const { filesCountInFolder, foldersCountInFolder } = ITEM_INFO_COPY;
+
+		const filesCountInfo =
+			filesCount +
+			" " +
+			filesCountInFolder[language] +
+			(filesCount > 1 ? "s" : "");
+		const foldersCountInfo =
+			foldersCount +
+			" " +
+			foldersCountInFolder[language] +
+			(foldersCount > 1 ? "s" : "");
+
+		return `${folder.name}\n${filesCountInfo}${PUNCTUATION_COPY.comma[language]}${foldersCountInfo}`;
+	};
+
 	const folderLevel = isRoot ? 0 : folder.path.split("/").length - 1;
 	return (
 		<div
@@ -116,8 +141,10 @@ const Folder = ({
 					: {
 							marginInlineStart: -17 * folderLevel,
 							paddingInlineStart: 24 + 17 * folderLevel,
-						}
+					  }
 			}
+			data-tooltip-position="right"
+			aria-label={getAriaLabel()}
 		>
 			{maybeRenderExpandIcon()}
 			<div

src/components/Tag/index.tsx

@@ -6,6 +6,7 @@ import { useExplorer } from "src/hooks/useExplorer";
 import { ExplorerStore } from "src/store";
 import TagExpandIcon from "./ExpandIcon";
 import TagContent from "./Content";
+import { ITEM_INFO_COPY, PUNCTUATION_COPY } from "src/locales";
 
 type Props = {
 	tag: TagNode;
@@ -17,17 +18,45 @@ const Tag = ({
 	disableHoverIndent = false,
 	hideExpandIcon = false,
 }: Props) => {
-	const { useExplorerStore } = useExplorer();
+	const { useExplorerStore, plugin } = useExplorer();
+	const { language } = plugin;
 
-	const { hasTagChildren, setFocusedTag, focusedTag } = useExplorerStore(
+	const {
+		hasTagChildren,
+		setFocusedTag,
+		focusedTag,
+		getFilesInTag,
+		getTagsByParent,
+	} = useExplorerStore(
 		useShallow((store: ExplorerStore) => ({
 			hasTagChildren: store.hasTagChildren,
 			setFocusedTag: store.setFocusedTag,
 			focusedTag: store.focusedTag,
+			getTagsByParent: store.getTagsByParent,
+			getFilesInTag: store.getFilesInTag,
 		}))
 	);
 	const isFocused = tag.fullPath == focusedTag?.fullPath;
 
+	const getAriaLabel = () => {
+		const filesCount = getFilesInTag(tag).length;
+		const tagsCount = getTagsByParent(tag.fullPath).length;
+		const { filesCountInTag, tagsCountInTag } = ITEM_INFO_COPY;
+
+		const filesCountInfo =
+			filesCount +
+			" " +
+			filesCountInTag[language] +
+			(filesCount > 1 ? "s" : "");
+		const tagsCountInfo =
+			tagsCount +
+			" " +
+			tagsCountInTag[language] +
+			(tagsCount > 1 ? "s" : "");
+
+		return `${tag.name}\n${filesCountInfo}${PUNCTUATION_COPY.comma[language]}${tagsCountInfo}`;
+	};
+
 	const tagLevel = tag.fullPath.split("/").length - 1;
 	return (
 		<div
@@ -44,9 +73,11 @@ const Tag = ({
 					: {
 							marginInlineStart: -17 * tagLevel,
 							paddingInlineStart: 24 + 17 * tagLevel,
-						}
+					  }
 			}
 			onClick={() => setFocusedTag(tag)}
+			data-tooltip-position="right"
+			aria-label={getAriaLabel()}
 		>
 			{!hideExpandIcon && <TagExpandIcon tag={tag} />}
 			<TagContent tag={tag} />

src/locales/index.ts

@@ -147,3 +147,37 @@ export const FILE_SORT_RULES_COPY: Copy = {
 		zh: "手动排序",
 	},
 };
+
+export const PUNCTUATION_COPY: Copy = {
+	comma: {
+		en: ", ",
+		zh: "，",
+	},
+};
+
+export const ITEM_INFO_COPY: Copy = {
+	filesCountInFolder: {
+		en: "file",
+		zh: "条笔记",
+	},
+	foldersCountInFolder: {
+		en: "folder",
+		zh: "个文件夹",
+	},
+	filesCountInTag: {
+		en: "file",
+		zh: "条笔记",
+	},
+	tagsCountInTag: {
+		en: "tag",
+		zh: "个标签",
+	},
+	fileModifiedTime: {
+		en: "Last modified at ",
+		zh: "最后修改于 ",
+	},
+	fileCreatedTime: {
+		en: "Created at ",
+		zh: "创建于 ",
+	},
+};