auto locking focus on the latest tab in Zen Mode

oxdc · Sep 1, 2024 · ab91d91 · ab91d91
1 parent d2701d0
commit ab91d91
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 8 deletions.
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
 	"id": "vertical-tabs",
 	"name": "Vertical Tabs",
-	"version": "0.6.6",
+	"version": "0.6.7",
 	"minAppVersion": "1.6.2",
 	"description": "Offer an alternative view that displays open tabs vertically, allowing users to group and organize tabs for a better navigation experience.",
 	"author": "oxdc",

diff --git a/src/components/NavigationContainer.tsx b/src/components/NavigationContainer.tsx
@@ -8,12 +8,13 @@ import { useViewState } from "src/models/ViewState";
 export const NavigationContainer = () => {
 	const plugin = usePlugin();
 	const { refresh, sort } = useTabCache();
-	const { setActiveLeaf, insertToggleButtons, lockFocus } = useViewState();
+	const { setLatestActiveLeaf, insertToggleButtons, lockFocus } =
+		useViewState();
 	const loadSettings = useSettings.use.loadSettings();
 	const toggleZenMode = useSettings.use.toggleZenMode();
 
 	const autoRefresh = () => {
-		setActiveLeaf(plugin);
+		setLatestActiveLeaf(plugin);
 		insertToggleButtons(plugin.app);
 		setTimeout(() => {
 			refresh(plugin.app);

diff --git a/src/components/Tab.tsx b/src/components/Tab.tsx
@@ -22,6 +22,7 @@ export const Tab = ({ leaf }: TabProps) => {
 	const { bindPinningEvent } = useViewState();
 	const [isPinned, setIsPinned] = useState(leaf.getViewState().pinned);
 	const { sort } = useTabCache();
+	const { lockFocusOnLeaf } = useViewState();
 	const lastActiveLeaf = useViewState((state) => state.latestActiveLeaf);
 
 	useEffect(() => {
@@ -44,17 +45,22 @@ export const Tab = ({ leaf }: TabProps) => {
 		if (!leaf.getViewState().pinned) leaf.detach();
 	};
 
-	const midClickCloseTab = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+	const midClickCloseTab = (
+		event: React.MouseEvent<HTMLDivElement, MouseEvent>
+	) => {
 		if (event.button === 1) closeTab();
-	}
+	};
 
 	const openTab = () => {
 		const workspace = plugin.app.workspace as VT.Workspace;
 		workspace.setActiveLeaf(leaf, { focus: true });
 		workspace.onLayoutChange();
+		lockFocusOnLeaf(plugin.app, leaf);
 	};
 
-	const activeOrCloseTab = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+	const activeOrCloseTab = (
+		event: React.MouseEvent<HTMLDivElement, MouseEvent>
+	) => {
 		if (event.altKey) {
 			closeTab();
 		} else {

diff --git a/src/models/ViewState.ts b/src/models/ViewState.ts
@@ -24,7 +24,10 @@ interface ViewState {
 	clear: () => void;
 	setGroupTitle: (id: VT.Identifier, name: string) => void;
 	toggleHiddenGroup: (id: VT.Identifier, isHidden: boolean) => void;
-	setActiveLeaf: (plugin: ObsidianVerticalTabs) => void;
+	setLatestActiveLeaf: (
+		plugin: ObsidianVerticalTabs,
+		leaf?: VT.WorkspaceLeaf | null
+	) => void;
 	lockFocus: (plugin: ObsidianVerticalTabs) => void;
 	lockFocusOnLeaf: (app: App, leaf: VT.WorkspaceLeaf) => void;
 	resetFocusFlags: () => void;
@@ -78,7 +81,7 @@ export const useViewState = create<ViewState>()((set, get) => ({
 			saveHiddenGroups(state.hiddenGroups);
 			return state;
 		}),
-	setActiveLeaf(plugin: ObsidianVerticalTabs) {
+	setLatestActiveLeaf(plugin: ObsidianVerticalTabs) {
 		const workspace = plugin.app.workspace as VT.Workspace;
 		const activeView = workspace.getActiveViewOfType(ItemView);
 		if (!activeView) {