From 9d70c5b53a3bfaddaa161295335bb16290c6f8b3 Mon Sep 17 00:00:00 2001
From: oxdc <29519076+oxdc@users.noreply.github.com>
Date: Thu, 16 Jan 2025 18:43:08 +0800
Subject: [PATCH] close: #51

---
 src/SettingTab.ts                   | 28 +++++++++++++++++++++++++++-
 src/components/NavigationHeader.tsx |  3 ++-
 src/main.ts                         |  1 +
 src/models/PluginSettings.ts        |  2 ++
 src/styles/Tab.scss                 | 20 +++++++++++++++-----
 src/styles/TabSlot.scss             | 18 ++++++++++++++----
 6 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/src/SettingTab.ts b/src/SettingTab.ts
index 98fa090..201abb7 100644
--- a/src/SettingTab.ts
+++ b/src/SettingTab.ts
@@ -1,4 +1,4 @@
-import { App, PluginSettingTab, Setting } from "obsidian";
+import { App, Platform, PluginSettingTab, Setting } from "obsidian";
 import ObsidianVerticalTabs from "./main";
 import { useSettings } from "./models/PluginContext";
 import {
@@ -106,6 +106,32 @@ export class ObsidianVerticalTabsSettingTab extends PluginSettingTab {
 								.setSettings({ showMoreButtons: value });
 						});
 				});
+
+			if (Platform.isMobile) {
+				new Setting(containerEl)
+					.setName("Mobile action preference")
+					.setDesc(
+						this.plugin.settings.useTabEditing
+							? "Enable tab editing mode to show control buttons on mobile."
+							: "Show control buttons such as new-tab buttons and close icons on mobile."
+					)
+					.addDropdown((dropdown) =>
+						dropdown
+							.addOption("show-all", "Show all buttons")
+							.addOption("tab-editing", "Enable tab editing mode")
+							.setValue(
+								this.plugin.settings.useTabEditing
+									? "tab-editing"
+									: "show-all"
+							)
+							.onChange(async (value) => {
+								useSettings.getState().setSettings({
+									useTabEditing: value === "tab-editing",
+								});
+								this.display();
+							})
+					);
+			}
 		}
 
 		new Setting(containerEl)
diff --git a/src/components/NavigationHeader.tsx b/src/components/NavigationHeader.tsx
index 33929af..e33e52d 100644
--- a/src/components/NavigationHeader.tsx
+++ b/src/components/NavigationHeader.tsx
@@ -21,6 +21,7 @@ export const NavigationHeader = (props: NavigationHeaderProps) => {
 	const hideSidebars = useSettings.use.hideSidebars();
 	const zenMode = useSettings.use.zenMode();
 	const toggleZenMode = useSettings.use.toggleZenMode();
+	const useTabEditing = useSettings.use.useTabEditing();
 	const sortStrategy = useTabCache((state) => state.sortStrategy);
 	const { setSortStrategy } = useTabCache();
 	const { lockFocus, setAllCollapsed, setAllExpanded, scorllToActiveTab } =
@@ -154,7 +155,7 @@ export const NavigationHeader = (props: NavigationHeaderProps) => {
 					}
 					isNavAction={true}
 				/>
-				{Platform.isMobile && (
+				{Platform.isMobile && useTabEditing && (
 					<IconButton
 						icon="copy-check"
 						action="editing-tabs"
diff --git a/src/main.ts b/src/main.ts
index 4069937..b2f7f10 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -93,6 +93,7 @@ export default class ObsidianVerticalTabs extends Plugin {
 		this.toggle("vt-exclude-self", this.settings.sidebarExcludeSelf);
 		this.toggle("vt-trim-tab-names", this.settings.trimTabNames);
 		this.toggle("vt-show-more-buttons", this.settings.showMoreButtons);
+		this.toggle("vt-use-tab-editing", this.settings.useTabEditing);
 		this.toggle("vt-zen-mode", this.settings.zenMode);
 		this.toggle("vt-enable-tab-zoom", this.settings.enableTabZoom);
 		this.toggle("vt-ephemeral-tabs", this.settings.ephemeralTabs);
diff --git a/src/models/PluginSettings.ts b/src/models/PluginSettings.ts
index 2baf9c7..ea5f756 100644
--- a/src/models/PluginSettings.ts
+++ b/src/models/PluginSettings.ts
@@ -9,6 +9,7 @@ interface ObsidianVerticalTabsSettings {
 	sidebarExcludeSelf: boolean;
 	trimTabNames: boolean;
 	showMoreButtons: boolean;
+	useTabEditing: boolean;
 	zenMode: boolean;
 	enableTabZoom: boolean;
 	enhancedKeyboardTabSwitch: boolean;
@@ -31,6 +32,7 @@ export const DEFAULT_SETTINGS: ObsidianVerticalTabsSettings = {
 	sidebarExcludeSelf: true,
 	trimTabNames: false,
 	showMoreButtons: false,
+	useTabEditing: true,
 	zenMode: false,
 	enableTabZoom: false,
 	enhancedKeyboardTabSwitch: false,
diff --git a/src/styles/Tab.scss b/src/styles/Tab.scss
index 33bfd7d..cb67df6 100644
--- a/src/styles/Tab.scss
+++ b/src/styles/Tab.scss
@@ -26,19 +26,29 @@
 	}
 }
 
-body.is-mobile {
-	.vertical-tabs {
+body {
+	&.is-mobile {
 		.obsidian-vertical-tabs-container
 			.tree-item.is-tab
 			.action-button[data-action="close"] {
-			visibility: hidden !important;
+			visibility: visible !important
 		}
+	}
 
-		&.editing-tabs {
+	&.is-mobile.vt-use-tab-editing {
+		.vertical-tabs {
 			.obsidian-vertical-tabs-container
 				.tree-item.is-tab
 				.action-button[data-action="close"] {
-				visibility: visible !important;
+				visibility: hidden !important;
+			}
+
+			&.editing-tabs {
+				.obsidian-vertical-tabs-container
+					.tree-item.is-tab
+					.action-button[data-action="close"] {
+					visibility: visible !important;
+				}
 			}
 		}
 	}
diff --git a/src/styles/TabSlot.scss b/src/styles/TabSlot.scss
index 65459b0..0d06fa4 100644
--- a/src/styles/TabSlot.scss
+++ b/src/styles/TabSlot.scss
@@ -25,13 +25,23 @@ body {
 	}
 
 	&.is-mobile {
-		.vertical-tabs {
-			.obsidian-vertical-tabs-container
-				.tree-item.is-tab-slot
-				.drag-handle {
+		.obsidian-vertical-tabs-container .tree-item.is-tab-slot {
+			.drag-handle {
 				display: none !important;
 			}
 
+			.tree-item-self {
+				height: unset;
+
+				div {
+					display: initial;
+				}
+			}
+		}
+	}
+
+	&.is-mobile.vt-use-tab-editing {
+		.vertical-tabs {
 			&:not(.editing-tabs) {
 				.obsidian-vertical-tabs-container
 					.tree-item.is-tab-slot