feat: add file item spacing option to control whether add padding on file item

src/SettingTab.tsx

@@ -1,7 +1,10 @@
 import { App, PluginSettingTab, Setting } from "obsidian";
 import FolderFileSplitterPlugin from "./main";
 import {
+	ComfortableSpacing,
+	CompactSpacing,
 	ExpandFolderByClickingOnElement,
+	FileItemSpacing,
 	HorizontalSplitLayoutMode,
 	LayoutMode,
 	VerticalSplitLayoutMode,
@@ -122,6 +125,24 @@ export class SettingTab extends PluginSettingTab {
 				});
 			});
 
+		new Setting(containerEl)
+			.setName(settingsCopy.fileItemSpacing.name)
+			.setDesc(settingsCopy.fileItemSpacing.desc)
+			.addDropdown((cb) => {
+				const { options } = settingsCopy.fileItemSpacing;
+				cb.addOption(ComfortableSpacing, options?.comfortable ?? "");
+				cb.addOption(CompactSpacing, options?.compact ?? "");
+				cb.setValue(this.plugin.settings.fileItemSpacing);
+				cb.onChange(async (val: FileItemSpacing) => {
+					this.plugin.settings.fileItemSpacing = val;
+					await this.plugin.saveSettings();
+					this.plugin.triggerSettingsChangeEvent(
+						"fileItemSpacing",
+						val
+					);
+				});
+			});
+
 		this.createHeader(containerEl, headersCopy.folderAndFileBehavior);
 		new Setting(containerEl)
 			.setName(settingsCopy.hideRootFolder.name)

src/components/File/Content.tsx

@@ -4,7 +4,10 @@ import { useEffect, useRef, useState } from "react";
 
 import { ExplorerStore } from "src/store";
 import { FolderListModal } from "../FolderListModal";
-import { useShowFileDetail } from "src/hooks/useSettingsHandler";
+import {
+	useFileItemSpacing,
+	useShowFileDetail,
+} from "src/hooks/useSettingsHandler";
 import FileDetail from "./Detail";
 import useRenderEditableName from "src/hooks/useRenderEditableName";
 import { FILE_OPERATION_COPY } from "src/locales";
@@ -46,6 +49,9 @@ const FileContent = ({ file, deleteFile }: FileProps) => {
 	const { showFileDetail } = useShowFileDetail(
 		plugin.settings.showFileDetail
 	);
+	const { fileItemSpacing } = useFileItemSpacing(
+		plugin.settings.fileItemSpacing
+	);
 
 	const isFocused = focusedFile?.path === file.path;
 	const onSaveName = (name: string) => renameFile(file, name);
@@ -205,7 +211,15 @@ const FileContent = ({ file, deleteFile }: FileProps) => {
 				}
 			}}
 		>
-			<div className="ffs__file-content-header tree-item-inner nav-file-title-content">
+			<div
+				className={classNames(
+					"ffs__file-content-header tree-item-inner nav-file-title-content",
+					{
+						"ffs__file-content-header--comfortable":
+							fileItemSpacing === "Comfortable",
+					}
+				)}
+			>
 				<div className="ffs__file-content-title">
 					{renderFileName()}
 					<div className="nav-file-tag">

src/components/FileTree/index.tsx

@@ -28,7 +28,7 @@ const FileTree = ({ onOpenFoldersPane = () => {} }: Props) => {
 
 	const renderFile = (file: TFile, disableDrag?: boolean) => (
 		<File
-			key={file.name}
+			key={file.path}
 			file={file}
 			deleteFile={() => onDeleteFileFromList(file)}
 			disableDrag={disableDrag}

src/hooks/useSettingsHandler/index.tsx

@@ -7,6 +7,7 @@ import { useLayoutMode } from "./useLayoutMode";
 import { useShowFilesFromSubfolders } from "./useShowFilesFromSubfolders";
 import { useOpenDestinationFolder } from "./useOpenDestinationFolder";
 import { useHideRootFolder } from "./useHideRootFolder";
+import { useFileItemSpacing } from "./useFileItemSpacing";
 
 export {
 	useShowFolderIcon,
@@ -18,4 +19,5 @@ export {
 	useShowFilesFromSubfolders,
 	useOpenDestinationFolder,
 	useHideRootFolder,
+	useFileItemSpacing,
 };

src/hooks/useSettingsHandler/useFileItemSpacing.tsx

@@ -0,0 +1,21 @@
+import { useState } from "react";
+
+import { useWatchSettingsChange } from "./useWatchSettingsChange";
+import { FileItemSpacing } from "src/settings";
+
+export const useFileItemSpacing = (
+	defaultSpacing: FileItemSpacing
+): { fileItemSpacing: FileItemSpacing } => {
+	const [spacing, setSpacing] = useState<FileItemSpacing>(defaultSpacing);
+
+	const onChangeSpacing = (event: CustomEvent) => {
+		const { changeKey, changeValue } = event.detail;
+		if (changeKey == "fileItemSpacing") {
+			setSpacing(changeValue);
+		}
+	};
+
+	useWatchSettingsChange(onChangeSpacing);
+
+	return { fileItemSpacing: spacing };
+};

src/locales/settings.ts

@@ -45,6 +45,14 @@ export const EN_SETTINGS: SettingsLocaleResource = {
 		name: "Show folder icon",
 		desc: "Enable this option to display icon next to folder, enhancing visual distinction between folders and files.	",
 	},
+	fileItemSpacing: {
+		name: "File item spacing",
+		desc: "Control the vertical spacing between file items in the list. Choose a compact or comfortable layout.",
+		options: {
+			compact: "Compact",
+			comfortable: "Comfortable",
+		},
+	},
 	expandFolderOnClick: {
 		name: "Expand folder on click",
 		desc: "Choose whether to expand a folder by clicking on the toggle icon (▶/▼) or the folder name.",
@@ -96,6 +104,14 @@ export const ZH_SETTINGS: SettingsLocaleResource = {
 		name: "显示文件夹图标",
 		desc: "启用后，文件夹旁会显示图标，便于区分文件夹和文件。",
 	},
+	fileItemSpacing: {
+		name: "文件项间距",
+		desc: "控制文件列表中各个文件项之间的垂直间距。可选择紧凑或宽松的布局风格。",
+		options: {
+			compact: "紧凑",
+			comfortable: "宽松",
+		},
+	},
 	expandFolderOnClick: {
 		name: "点击展开文件夹",
 		desc: "选择通过点击切换图标（▶/▼）或文件夹名称来展开文件夹。",

src/settings.ts

@@ -11,12 +11,17 @@ export type LayoutMode =
 	| typeof HorizontalSplitLayoutMode
 	| typeof VerticalSplitLayoutMode;
 
+export const CompactSpacing = "Compact";
+export const ComfortableSpacing = "Comfortable";
+export type FileItemSpacing = typeof CompactSpacing | typeof ComfortableSpacing;
+
 export interface FolderFileSplitterPluginSettings {
 	expandFolderByClickingOn: ExpandFolderByClickingOnElement;
 	includeSubfolderFilesCount: boolean;
 	showFolderHierarchyLines: boolean;
 	showFolderIcon: boolean;
 	showFileDetail: boolean;
+	fileItemSpacing: FileItemSpacing;
 	openPluginViewOnStartup: boolean;
 	layoutMode: LayoutMode;
 	showFilesFromSubfolders: boolean;
@@ -30,6 +35,7 @@ export const DEFAULT_SETTINGS: FolderFileSplitterPluginSettings = {
 	showFolderHierarchyLines: false,
 	showFolderIcon: true,
 	showFileDetail: true,
+	fileItemSpacing: ComfortableSpacing,
 	openPluginViewOnStartup: true,
 	layoutMode: HorizontalSplitLayoutMode,
 	showFilesFromSubfolders: false,

styles.css

@@ -257,6 +257,9 @@ div.ffs__file-content {
 	display: grid;
 	grid-template-rows: auto auto;
 	gap: 4px;
+}
+
+.ffs__file-content-header--comfortable {
 	padding: 8px 0px;
 }