auto disable tab editing

src/components/NavigationContainer.tsx

@@ -29,6 +29,8 @@ import {
 } from "src/services/EphemeralTabs";
 import { deduplicateExistingTabs } from "src/services/DeduplicateTab";
 import { iterateRootOrFloatingLeaves } from "src/services/GetTabs";
+import { SwipeDirection, useTouchSensor } from "src/services/TouchSeneor";
+import { getDrawer } from "src/services/MobileDrawer";
 
 export const NavigationContainer = () => {
 	const plugin = usePlugin();
@@ -47,6 +49,7 @@ export const NavigationContainer = () => {
 		modifyViewCueCallback,
 		resetViewCueCallback,
 		scorllToViewCueFirstTab,
+		setIsEditingTabs,
 	} = useViewState();
 	const { loadSettings, toggleZenMode, updateEphemeralTabs } = useSettings();
 
@@ -231,11 +234,37 @@ export const NavigationContainer = () => {
 		if (event.button === 1) event.preventDefault();
 	};
 
+	const disableEditingMode = () => {
+		setIsEditingTabs(app, false);
+		ref.current?.toggleClass("editing-tabs", false);
+	};
+
+	const { listeners } = useTouchSensor({
+		minDistance: 20,
+		callback: (moved, direction) => {
+			if (Platform.isMobile && moved) {
+				const drawer = getDrawer(app);
+				const { leftSplit, rightSplit } = app.workspace;
+				if (leftSplit === drawer && direction === SwipeDirection.Left) {
+					disableEditingMode();
+					setTimeout(() => leftSplit.collapse(), REFRESH_TIMEOUT);
+				} else if (
+					rightSplit === drawer &&
+					direction === SwipeDirection.Right
+				) {
+					disableEditingMode();
+					setTimeout(() => rightSplit.collapse(), REFRESH_TIMEOUT);
+				}
+			}
+		},
+	});
+
 	return (
 		<div
 			className="vertical-tabs"
 			onMouseDown={disableMiddleClickScrolling}
 			ref={ref}
+			{...listeners}
 		>
 			<NavigationHeader container={ref.current} />
 			<NavigationContent />

src/services/MobileDrawer.ts

@@ -1,7 +1,7 @@
 import { App, Platform, WorkspaceMobileDrawer } from "obsidian";
 import { VIEW_TYPE } from "src/navigation";
 
-function getDrawer(app: App): WorkspaceMobileDrawer | null {
+export function getDrawer(app: App): WorkspaceMobileDrawer | null {
 	if (!Platform.isMobile) return null;
 	const workspace = app.workspace;
 	const self = workspace.getLeavesOfType(VIEW_TYPE).first();

src/services/TouchSeneor.ts

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-enum SweepDirection {
+export enum SwipeDirection {
 	Up = "up",
 	Down = "down",
 	Left = "left",
@@ -10,7 +10,7 @@ enum SweepDirection {
 
 interface TouchSensorOptions {
 	minDistance: number;
-	callback: (moved: boolean, sweepDirection: SweepDirection) => void;
+	callback: (moved: boolean, direction: SwipeDirection) => void;
 }
 
 export const useTouchSensor = (options: TouchSensorOptions) => {
@@ -19,7 +19,7 @@ export const useTouchSensor = (options: TouchSensorOptions) => {
 	const [startX, setStartX] = useState(0);
 	const [startY, setStartY] = useState(0);
 	const [moved, setMoved] = useState(false);
-	const [sweepDirection, setDirection] = useState(SweepDirection.None);
+	const [direction, setDirection] = useState(SwipeDirection.None);
 
 	const onTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {
 		setStartX(event.touches[0].clientX);
@@ -34,16 +34,16 @@ export const useTouchSensor = (options: TouchSensorOptions) => {
 			setMoved(true);
 		}
 		if (Math.abs(dx) < minDistance && Math.abs(dy) > minDistance) {
-			setDirection(dy > 0 ? SweepDirection.Down : SweepDirection.Up);
+			setDirection(dy > 0 ? SwipeDirection.Down : SwipeDirection.Up);
 		} else if (Math.abs(dy) < minDistance && Math.abs(dx) > minDistance) {
-			setDirection(dx > 0 ? SweepDirection.Right : SweepDirection.Left);
+			setDirection(dx > 0 ? SwipeDirection.Right : SwipeDirection.Left);
 		} else {
-			setDirection(SweepDirection.None);
+			setDirection(SwipeDirection.None);
 		}
 	};
 
 	const onTouchEnd = () => {
-		callback(moved, sweepDirection);
+		callback(moved, direction);
 	};
 
 	const listeners = {