feat: add auto hide action bar option in settings

src/SettingTab.tsx

@@ -110,6 +110,21 @@ export class SettingTab extends PluginSettingTab {
 				});
 			});
 
+		new Setting(containerEl)
+			.setName(settingsCopy.autoHideActionBar.name)
+			.setDesc(settingsCopy.autoHideActionBar.desc)
+			.addToggle((cb) => {
+				cb.setValue(this.plugin.settings.autoHideActionBar);
+				cb.onChange(async (val) => {
+					this.plugin.settings.autoHideActionBar= val;
+					await this.plugin.saveSettings();
+					this.plugin.triggerSettingsChangeEvent(
+						"autoHideActionBar",
+						val
+					);
+				});
+			});
+
 		new Setting(containerEl)
 			.setName(settingsCopy.showFolderIcon.name)
 			.setDesc(settingsCopy.showFolderIcon.desc)

src/components/layout/HorizontalSplitLayout.tsx

@@ -7,7 +7,10 @@ import { FileActionSection, FolderActionSection } from "./Actions";
 import FolderTree from "../FolderTree";
 import FileTree from "../FileTree";
 import useChangeActiveLeaf from "src/hooks/useChangeActiveLeaf";
-import { useHighlightActionBar } from "src/hooks/useSettingsHandler";
+import {
+	useAutoHideActionBar,
+	useHighlightActionBar,
+} from "src/hooks/useSettingsHandler";
 import { useExplorer } from "src/hooks/useExplorer";
 
 const HorizontalSplitLayout = () => {
@@ -20,8 +23,12 @@ const HorizontalSplitLayout = () => {
 	const pluginRef = useRef<HTMLDivElement>(null);
 	useChangeActiveLeaf();
 
+	const { settings } = plugin;
 	const { highlightActionBar } = useHighlightActionBar(
-		plugin.settings.highlightActionBar
+		settings.highlightActionBar
+	);
+	const { autoHideActionBar } = useAutoHideActionBar(
+		settings.autoHideActionBar
 	);
 
 	const restoreLayout = () => {
@@ -60,6 +67,7 @@ const HorizontalSplitLayout = () => {
 	const getActionsContainerClassName = () =>
 		classNames("ffs__actions-container nav-header", {
 			"ffs__actions-container--highlight": highlightActionBar,
+			"ffs__actions-container--auto-hide": autoHideActionBar,
 		});
 
 	return (

src/components/layout/VerticalSplitLayout.tsx

@@ -9,7 +9,10 @@ import FileTree from "../FileTree";
 import FolderTree from "../FolderTree";
 import useChangeActiveLeaf from "src/hooks/useChangeActiveLeaf";
 import { useExplorer } from "src/hooks/useExplorer";
-import { useHighlightActionBar } from "src/hooks/useSettingsHandler";
+import {
+	useAutoHideActionBar,
+	useHighlightActionBar,
+} from "src/hooks/useSettingsHandler";
 
 const VerticalSplitLayout = () => {
 	const { plugin } = useExplorer();
@@ -24,8 +27,12 @@ const VerticalSplitLayout = () => {
 	const pluginRef = useRef<HTMLDivElement>(null);
 	useChangeActiveLeaf();
 
+	const { settings } = plugin;
 	const { highlightActionBar } = useHighlightActionBar(
-		plugin.settings.highlightActionBar
+		settings.highlightActionBar
+	);
+	const { autoHideActionBar } = useAutoHideActionBar(
+		settings.autoHideActionBar
 	);
 
 	const restoreLayout = () => {
@@ -82,6 +89,7 @@ const VerticalSplitLayout = () => {
 	const getActionsContainerClassName = () =>
 		classNames("ffs__actions-container nav-header", {
 			"ffs__actions-container--highlight": highlightActionBar,
+			"ffs__actions-container--auto-hide": autoHideActionBar,
 		});
 
 	const renderFoldersPane = () => {

src/hooks/useSettingsHandler/index.tsx

@@ -10,6 +10,7 @@ import { useHideRootFolder } from "./useHideRootFolder";
 import { useFileItemSpacing } from "./useFileItemSpacing";
 import { useShowFileItemDivider } from "./useShowFileItemDivider";
 import { useHighlightActionBar } from "./useHighlightActionBar";
+import { useAutoHideActionBar } from "./useAutoHideActionBar";
 
 export {
 	useShowFolderIcon,
@@ -23,5 +24,6 @@ export {
 	useHideRootFolder,
 	useFileItemSpacing,
 	useShowFileItemDivider,
-	useHighlightActionBar
+	useHighlightActionBar,
+	useAutoHideActionBar
 };

src/hooks/useSettingsHandler/useAutoHideActionBar.tsx

@@ -0,0 +1,20 @@
+import { useState } from "react";
+
+import { useWatchSettingsChange } from "./useWatchSettingsChange";
+
+export const useAutoHideActionBar = (
+	defaultHide: boolean
+): { autoHideActionBar: boolean } => {
+	const [hide, setHide] = useState(defaultHide);
+
+	const onChangeHide = (event: CustomEvent) => {
+		const { changeKey, changeValue } = event.detail;
+		if (changeKey == "autoHideActionBar") {
+			setHide(changeValue);
+		}
+	};
+
+	useWatchSettingsChange(onChangeHide);
+
+	return { autoHideActionBar: hide };
+};

src/locales/settings.ts

@@ -61,6 +61,10 @@ export const EN_SETTINGS: SettingsLocaleResource = {
 		name: "Highlight action bar",
 		desc: "When enabled, the top action buttons will have a background and margin to distinguish them from surrounding elements.",
 	},
+	autoHideActionBar: {
+		name: "Auto-hide action bar",
+		desc: "When enabled, the top action bar will be hidden by default and only appear when hovering over it.",
+	},
 	expandFolderOnClick: {
 		name: "Expand folder on click",
 		desc: "Choose whether to expand a folder by clicking on the toggle icon (▶/▼) or the folder name.",
@@ -128,6 +132,10 @@ export const ZH_SETTINGS: SettingsLocaleResource = {
 		name: "高亮操作栏",
 		desc: "启用后，顶部操作按钮区域将添加背景色和边距，以增强与周围内容的区分。",
 	},
+	autoHideActionBar: {
+		name: "自动隐藏操作栏",
+		desc: "启用后，顶部操作栏默认隐藏，鼠标悬停时才会显示。",
+	},
 	expandFolderOnClick: {
 		name: "点击展开文件夹",
 		desc: "选择通过点击切换图标（▶/▼）或文件夹名称来展开文件夹。",

src/settings.ts

@@ -24,6 +24,7 @@ export interface FolderFileSplitterPluginSettings {
 	showFileItemDivider: boolean;
 	fileItemSpacing: FileItemSpacing;
 	highlightActionBar: boolean;
+	autoHideActionBar: boolean;
 	openPluginViewOnStartup: boolean;
 	layoutMode: LayoutMode;
 	showFilesFromSubfolders: boolean;
@@ -40,6 +41,7 @@ export const DEFAULT_SETTINGS: FolderFileSplitterPluginSettings = {
 	fileItemSpacing: ComfortableSpacing,
 	showFileItemDivider: true,
 	highlightActionBar: false,
+	autoHideActionBar: false,
 	openPluginViewOnStartup: true,
 	layoutMode: HorizontalSplitLayoutMode,
 	showFilesFromSubfolders: false,

styles.css

@@ -52,10 +52,6 @@ div.workspace-leaf-content[data-plugin="FolderFile Splitter"] div.view-content {
 }
 
 /* layout divider */
-.ffs__layout-divider {
-	padding: 2px 0;
-}
-
 .ffs__layout-divider:hover {
 	border-top-color: var(--background-modifier-border);
 	transition: all 50ms ease-in-out;
@@ -64,12 +60,15 @@ div.workspace-leaf-content[data-plugin="FolderFile Splitter"] div.view-content {
 .ffs__layout-divider--horizontal {
 	border-left: 1px solid var(--divider-color);
 	cursor: ew-resize;
+	padding: 0 2px;
+	margin-left: 4px;
 }
 
 .ffs__layout-divider--vertical {
 	border-top: 1px solid var(--divider-color);
 	cursor: ns-resize;
 	margin-top: 16px;
+	padding: 2px 0;
 }
 
 /* Common Components */
@@ -124,6 +123,32 @@ div.workspace-leaf-content[data-plugin="FolderFile Splitter"] div.view-content {
 	margin: 8px 12px 4px;
 }
 
+.ffs__actions-container svg.svg-icon {
+	transition: var(--anim-duration-fast) var(--anim-duration-fast) !important;
+}
+
+.ffs__actions-container--auto-hide:not(:hover)
+	.ffs__actions-section
+	svg.svg-icon {
+	--icon-size: 0px;
+	width: 0px;
+	height: 0px;
+}
+
+.ffs__layout
+	.ffs__actions-container--auto-hide:not(:hover)
+	.ffs__actions-section {
+	background-color: transparent !important;
+}
+
+.ffs__actions-container--auto-hide:not(:hover) .ffs__action-button-wrapper {
+	flex-grow: 0;
+	background-color: var(--background-modifier-border);
+	padding: 2px;
+	width: unset;
+	height: unset;
+}
+
 .ffs__layout--vertical .ffs__actions-container {
 	display: flex;
 	justify-content: space-between;
@@ -139,13 +164,9 @@ div.workspace-leaf-content[data-plugin="FolderFile Splitter"] div.view-content {
 .ffs__actions-section {
 	display: flex;
 	align-items: center;
-}
-
-.ffs__actions-section {
 	font-weight: 500;
 	color: var(--icon-color);
 	font-size: 13px;
-	/* border: 1px solid red; */
 }
 
 .ffs__collapsed-folders,