implemented background mode

oxdc · Dec 16, 2024 · d35a562 · d35a562
1 parent 9ffd0db
commit d35a562
Show file tree

Hide file tree

Showing 8 changed files with 146 additions and 48 deletions.
diff --git a/src/SettingTab.ts b/src/SettingTab.ts
@@ -18,44 +18,67 @@ export class ObsidianVerticalTabsSettingTab extends PluginSettingTab {
 		const { containerEl } = this;
 		containerEl.empty();
 
-		new Setting(containerEl)
-			.setName("Show active tabs only")
-			.setDesc("Hide inactive horizontal tabs to make workspace cleaner.")
-			.addToggle((toggle) => {
-				toggle
-					.setValue(this.plugin.settings.showActiveTabs)
-					.onChange(async (value) => {
-						useSettings
-							.getState()
-							.setSettings({ showActiveTabs: value });
-					});
+		if (this.plugin.settings.backgroundMode) {
+			const warning = containerEl.createDiv({
+				cls: "vt-background-mode-warning",
 			});
-
-		new Setting(containerEl)
-			.setName("Hide sidebar tabs")
-			.setDesc("Don't show sidebar tabs in Vertical Tabs.")
-			.addToggle((toggle) => {
-				toggle
-					.setValue(this.plugin.settings.hideSidebars)
-					.onChange(async (value) => {
-						useSettings
-							.getState()
-							.setSettings({ hideSidebars: value });
-					});
+			warning.appendText(`
+				* Warning: Background mode is enabled.
+				To see Vertical Tabs and access its core features,
+				you must first 
+			`);
+			const linkButton = warning.createEl("a", {
+				text: "disable",
 			});
+			linkButton.onclick = () => {
+				useSettings.getState().toggleBackgroundMode(false);
+				this.display();
+			};
+			warning.appendText(" it.");
+		}
 
-		new Setting(containerEl)
-			.setName("Trim tab names")
-			.setDesc("Use ellipsis to fit tab names on a single line.")
-			.addToggle((toggle) => {
-				toggle
-					.setValue(this.plugin.settings.trimTabNames)
-					.onChange(async (value) => {
-						useSettings
-							.getState()
-							.setSettings({ trimTabNames: value });
-					});
-			});
+		if (!this.plugin.settings.backgroundMode) {
+			new Setting(containerEl)
+				.setName("Show active tabs only")
+				.setDesc(
+					"Hide inactive horizontal tabs to make workspace cleaner."
+				)
+				.addToggle((toggle) => {
+					toggle
+						.setValue(this.plugin.settings.showActiveTabs)
+						.onChange(async (value) => {
+							useSettings
+								.getState()
+								.setSettings({ showActiveTabs: value });
+						});
+				});
+
+			new Setting(containerEl)
+				.setName("Hide sidebar tabs")
+				.setDesc("Don't show sidebar tabs in Vertical Tabs.")
+				.addToggle((toggle) => {
+					toggle
+						.setValue(this.plugin.settings.hideSidebars)
+						.onChange(async (value) => {
+							useSettings
+								.getState()
+								.setSettings({ hideSidebars: value });
+						});
+				});
+
+			new Setting(containerEl)
+				.setName("Trim tab names")
+				.setDesc("Use ellipsis to fit tab names on a single line.")
+				.addToggle((toggle) => {
+					toggle
+						.setValue(this.plugin.settings.trimTabNames)
+						.onChange(async (value) => {
+							useSettings
+								.getState()
+								.setSettings({ trimTabNames: value });
+						});
+				});
+		}
 
 		new Setting(containerEl)
 			.setName("Enable tab zoom")
@@ -92,7 +115,7 @@ export class ObsidianVerticalTabsSettingTab extends PluginSettingTab {
 		switch (this.plugin.settings.navigationStrategy) {
 			case TabNavigationStrategy.Obsidian:
 				containerEl.createDiv({
-					cls: "vt-setting-description",
+					cls: "vt-navigation-description",
 					text: `
 						Use the default navigation strategy of Obsidian.
 						When working with multiple tab groups, 
@@ -102,7 +125,7 @@ export class ObsidianVerticalTabsSettingTab extends PluginSettingTab {
 				break;
 			case TabNavigationStrategy.ObsidianPlus:
 				containerEl.createDiv({
-					cls: "vt-setting-description",
+					cls: "vt-navigation-description",
 					text: `
 						Use enhanced navigation strategy implemented by Vertical Tabs. 
 						New tabs will be opened in a consistent and intuitive manner.
@@ -111,7 +134,7 @@ export class ObsidianVerticalTabsSettingTab extends PluginSettingTab {
 				break;
 			case TabNavigationStrategy.IDE:
 				containerEl.createDiv({
-					cls: "vt-setting-description",
+					cls: "vt-navigation-description",
 					text: `
 						Use IDE-like navigation strategy. 
 						Recommended for users familiar with VSCode, Xcode, or other IDEs.
@@ -120,23 +143,23 @@ export class ObsidianVerticalTabsSettingTab extends PluginSettingTab {
 				break;
 			case TabNavigationStrategy.Explorer:
 				containerEl.createDiv({
-					cls: "vt-setting-description",
+					cls: "vt-navigation-description",
 					text: `
 						Explorer mode uses ephemeral tabs to avoid opening too many tabs.
 					`,
 				});
 				break;
 			case TabNavigationStrategy.Notebook:
 				containerEl.createDiv({
-					cls: "vt-setting-description",
+					cls: "vt-navigation-description",
 					text: `
 						Notebook mode ensures consistent navigation behavior while avoiding duplication.
 					`,
 				});
 				break;
 			case TabNavigationStrategy.PreferNewTab:
 				containerEl.createDiv({
-					cls: "vt-setting-description",
+					cls: "vt-navigation-description",
 					text: `
 						Always open the new note in a new tab.
 					`,
@@ -147,6 +170,23 @@ export class ObsidianVerticalTabsSettingTab extends PluginSettingTab {
 				break;
 		}
 
+		new Setting(containerEl).setName("Miscellaneous").setHeading();
+
+		new Setting(containerEl)
+			.setName("Background mode")
+			.setDesc(
+				`Enable to keep features like tab navigation without showing vertical tabs.
+				This will disable Zen Mode and reset your workspace to the default layout.`
+			)
+			.addToggle((toggle) => {
+				toggle
+					.setValue(this.plugin.settings.backgroundMode)
+					.onChange(async () => {
+						useSettings.getState().toggleBackgroundMode();
+						this.display();
+					});
+			});
+
 		containerEl.createDiv({ cls: "vt-support" }).innerHTML = `
 			<div class="title">Enjoying Vertical Tabs?</div>
 			<div class="buttons">

diff --git a/src/main.ts b/src/main.ts
@@ -5,6 +5,7 @@ import { around } from "monkey-around";
 import { ZOOM_FACTOR_TOLERANCE } from "./services/TabZoom";
 import { useViewState } from "./models/ViewState";
 import { ObsidianVerticalTabsSettingTab } from "./SettingTab";
+import { useSettings } from "./models/PluginContext";
 
 export default class ObsidianVerticalTabs extends Plugin {
 	settings: Settings = DEFAULT_SETTINGS;
@@ -27,7 +28,10 @@ export default class ObsidianVerticalTabs extends Plugin {
 		this.addCommand({
 			id: "open-vertical-tabs",
 			name: "Open vertical tabs",
-			callback: () => this.openVerticalTabs(),
+			callback: () => {
+				this.openVerticalTabs();
+				useSettings.getState().toggleBackgroundMode(false);
+			},
 		});
 	}
 
@@ -69,6 +73,7 @@ export default class ObsidianVerticalTabs extends Plugin {
 		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);
+		this.toggle("vt-background-mode", this.settings.backgroundMode);
 	}
 
 	async patchViews() {

diff --git a/src/models/PluginContext.ts b/src/models/PluginContext.ts
@@ -12,6 +12,14 @@ import { create } from "zustand";
 import { createSelectors } from "./Selectors";
 import { convertNameToStrategy, TabNavigationStrategy } from "./TabNavigation";
 
+function saveShowActiveTabs(showActiveTabs: boolean) {
+	localStorage.setItem("vt-show-active-tabs", showActiveTabs.toString());
+}
+
+function loadShowActiveTabs() {
+	return localStorage.getItem("vt-show-active-tabs") === "true";
+}
+
 export type SettingsContext = [Settings, (mutator: SettingsMutator) => void];
 
 export const PluginContext = createContext<ObsidianVerticalTabs | null>(null);
@@ -34,6 +42,7 @@ interface SettingsActions {
 	toggleZenMode: () => void;
 	updateEphemeralTabs: (app: App) => void;
 	setTabNavigationStrategy: (app: App, name: string) => void;
+	toggleBackgroundMode: (enable?: boolean) => void;
 }
 
 export const useSettingsBase = create<Settings & SettingsActions>(
@@ -71,14 +80,10 @@ export const useSettingsBase = create<Settings & SettingsActions>(
 		toggleZenMode() {
 			const { zenMode, showActiveTabs } = get();
 			if (zenMode) {
-				const showActiveTabs =
-					localStorage.getItem("vt-show-active-tabs") === "true";
+				const showActiveTabs = loadShowActiveTabs();
 				get().setSettings({ zenMode: false, showActiveTabs });
 			} else {
-				localStorage.setItem(
-					"vt-show-active-tabs",
-					showActiveTabs.toString()
-				);
+				saveShowActiveTabs(showActiveTabs);
 				get().setSettings({ zenMode: true, showActiveTabs: true });
 			}
 		},
@@ -185,6 +190,21 @@ export const useSettingsBase = create<Settings & SettingsActions>(
 				app.workspace.trigger("vertical-tabs:ephemeral-tabs-deinit");
 			}
 		},
+		toggleBackgroundMode(enable?: boolean) {
+			const { backgroundMode, showActiveTabs } = get();
+			const toEnable = enable ?? !backgroundMode;
+			if (toEnable) {
+				saveShowActiveTabs(showActiveTabs);
+				get().setSettings({
+					backgroundMode: true,
+					showActiveTabs: false, // ensure access to all horizontal tabs
+					zenMode: false, // ensure access to all splits
+				});
+			} else {
+				const showActiveTabs = loadShowActiveTabs();
+				get().setSettings({ backgroundMode: false, showActiveTabs });
+			}
+		},
 	})
 );
 

diff --git a/src/models/PluginSettings.ts b/src/models/PluginSettings.ts
@@ -15,6 +15,7 @@ interface ObsidianVerticalTabsSettings {
 	navigationStrategy: TabNavigationStrategy;
 	autoCloseEphemeralTabs: boolean;
 	deduplicateSidebarTabs: boolean;
+	backgroundMode: boolean;
 }
 
 export const DEFAULT_SETTINGS: ObsidianVerticalTabsSettings = {
@@ -32,6 +33,7 @@ export const DEFAULT_SETTINGS: ObsidianVerticalTabsSettings = {
 	navigationStrategy: TabNavigationStrategy.ObsidianPlus,
 	autoCloseEphemeralTabs: true,
 	deduplicateSidebarTabs: false,
+	backgroundMode: false,
 };
 
 export type Settings = ObsidianVerticalTabsSettings;

diff --git a/src/navigation.tsx b/src/navigation.tsx
@@ -16,6 +16,8 @@ export class NavigationView extends ItemView {
 		this.navigation = false;
 		this.plugin = plugin;
 		this.icon = "gallery-vertical";
+		this.leaf.containerEl?.addClass("obsidian-vertical-tabs-tab-content");
+		this.leaf.tabHeaderEl?.addClass("obsidian-vertical-tabs-tab-header");
 	}
 
 	getViewType() {

diff --git a/src/styles.scss b/src/styles.scss
@@ -10,6 +10,8 @@
 @import "styles/TabZoom.scss";
 @import "styles/EphemeralTabs.scss";
 @import "styles/TrimTabNames.scss";
+@import "styles/SettingTab.scss";
+@import "styles/BackgroundMode.scss";
 @import "styles/Support.scss";
 
 .vertical-tabs {

diff --git a/src/styles/BackgroundMode.scss b/src/styles/BackgroundMode.scss
@@ -0,0 +1,23 @@
+body.vt-background-mode {
+	.workspace-tab-header.obsidian-vertical-tabs-tab-header,
+	.workspace-leaf.obsidian-vertical-tabs-tab-content {
+		display: none !important;
+	}
+}
+
+.vt-background-mode-warning {
+	font-size: var(--font-ui-small);
+	color: var(--text-warning);
+	font-weight: bold;
+	padding-bottom: 0.4em;
+
+	& + .setting-item {
+		border-top: none !important;
+	}
+
+	a {
+		font-size: var(--font-ui-small);
+		color: var(--text-warning);
+		font-weight: bold;
+	}
+}
diff --git a/src/styles/SettingTab.scss b/src/styles/SettingTab.scss
@@ -0,0 +1,4 @@
+.vt-navigation-description {
+	font-size: var(--font-ui-smaller);
+	color: var(--text-muted);
+}