From ed9eb79222392be72459f2ebd4e71cfbd9376654 Mon Sep 17 00:00:00 2001
From: Oscar Beaumont <oscar@otbeaumont.me>
Date: Fri, 29 Sep 2023 15:57:39 +1000
Subject: [PATCH] [ENG-1117] Remove Tauri drag regions on non-macOS platforms
 (#1402)

That'll do it
---
 .../Layout/Sidebar/WindowControls.tsx         |  2 +-
 .../$libraryId/TopBar/NavigationButtons.tsx   |  5 ++--
 .../app/$libraryId/TopBar/TopBarOptions.tsx   | 11 +++++----
 interface/app/$libraryId/TopBar/index.tsx     |  7 ++++--
 interface/app/$libraryId/settings/Sidebar.tsx |  5 +++-
 interface/components/DragRegion.tsx           | 23 +++++++++++--------
 6 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/interface/app/$libraryId/Layout/Sidebar/WindowControls.tsx b/interface/app/$libraryId/Layout/Sidebar/WindowControls.tsx
index 4538588be..ab4f3f2a1 100644
--- a/interface/app/$libraryId/Layout/Sidebar/WindowControls.tsx
+++ b/interface/app/$libraryId/Layout/Sidebar/WindowControls.tsx
@@ -11,7 +11,7 @@ export default () => {
 
 	const showControls = window.location.search.includes('showControls');
 
-	if (platform === 'tauri' || showControls) {
+	if ((platform === 'tauri' && os == 'macOS') || showControls) {
 		return (
 			<div data-tauri-drag-region className={clsx('shrink-0', macOnly(os, 'h-7'))}>
 				{/* We do not provide the onClick handlers for 'MacTrafficLights' because this is only used in demo mode */}
diff --git a/interface/app/$libraryId/TopBar/NavigationButtons.tsx b/interface/app/$libraryId/TopBar/NavigationButtons.tsx
index 087465b07..18eadae3d 100644
--- a/interface/app/$libraryId/TopBar/NavigationButtons.tsx
+++ b/interface/app/$libraryId/TopBar/NavigationButtons.tsx
@@ -2,13 +2,14 @@ import { ArrowLeft, ArrowRight } from '@phosphor-icons/react';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router';
 import { Tooltip } from '@sd/ui';
-import { useKeyMatcher, useSearchStore } from '~/hooks';
+import { useKeyMatcher, useOperatingSystem, useSearchStore } from '~/hooks';
 
 import TopBarButton from './TopBarButton';
 
 export const NavigationButtons = () => {
 	const navigate = useNavigate();
 	const { isFocused } = useSearchStore();
+	const os = useOperatingSystem();
 	const idx = history.state.idx as number;
 	const controlIcon = useKeyMatcher('Meta').icon;
 
@@ -28,7 +29,7 @@ export const NavigationButtons = () => {
 	}, [navigate, idx, isFocused]);
 
 	return (
-		<div data-tauri-drag-region className="flex">
+		<div data-tauri-drag-region={os === 'macOS'} className="flex">
 			<Tooltip keybinds={[controlIcon, '←']} label="Navigate back">
 				<TopBarButton
 					rounding="left"
diff --git a/interface/app/$libraryId/TopBar/TopBarOptions.tsx b/interface/app/$libraryId/TopBar/TopBarOptions.tsx
index 1ffeef84f..e6a712c4d 100644
--- a/interface/app/$libraryId/TopBar/TopBarOptions.tsx
+++ b/interface/app/$libraryId/TopBar/TopBarOptions.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { useLayoutEffect, useState } from 'react';
 import { ModifierKeys, Popover, Tooltip } from '@sd/ui';
 import { ExplorerLayout } from '~/../packages/client/src';
-import { useKeybind, useKeyMatcher } from '~/hooks';
+import { useKeybind, useKeyMatcher, useOperatingSystem } from '~/hooks';
 
 import { useExplorerContext } from '../Explorer/Context';
 import TopBarButton from './TopBarButton';
@@ -30,6 +30,7 @@ export const TOP_BAR_ICON_STYLE = 'm-0.5 w-[18px] h-[18px] text-ink-dull';
 export default ({ options }: TopBarChildrenProps) => {
 	const [windowSize, setWindowSize] = useState(0);
 	const explorer = useExplorerContext();
+	const os = useOperatingSystem();
 	const toolsNotSmFlex = options
 		?.flatMap((group) => group)
 		.filter((t) => t.showAtResolution !== 'sm:flex');
@@ -57,8 +58,8 @@ export default ({ options }: TopBarChildrenProps) => {
 	}, []);
 
 	return (
-		<div data-tauri-drag-region className="flex flex-1 justify-end">
-			<div data-tauri-drag-region className={`flex gap-0`}>
+		<div data-tauri-drag-region={os === 'macOS'} className="flex flex-1 justify-end">
+			<div data-tauri-drag-region={os === 'macOS'} className={`flex gap-0`}>
 				{options?.map((group, groupIndex) => {
 					return group.map(
 						(
@@ -85,7 +86,7 @@ export default ({ options }: TopBarChildrenProps) => {
 								: 'none';
 							return (
 								<div
-									data-tauri-drag-region
+									data-tauri-drag-region={os === 'macOS'}
 									key={toolTipLabel}
 									className={clsx(
 										[showAtResolution],
@@ -136,7 +137,7 @@ export default ({ options }: TopBarChildrenProps) => {
 									{index + 1 === group.length &&
 										groupIndex + 1 !== groupCount && (
 											<div
-												data-tauri-drag-region
+												data-tauri-drag-region={os === 'macOS'}
 												className="mx-4 h-[15px] w-0 border-l border-zinc-600"
 											/>
 										)}
diff --git a/interface/app/$libraryId/TopBar/index.tsx b/interface/app/$libraryId/TopBar/index.tsx
index d01b1890e..b78bf93e2 100644
--- a/interface/app/$libraryId/TopBar/index.tsx
+++ b/interface/app/$libraryId/TopBar/index.tsx
@@ -1,5 +1,7 @@
+import { platform } from 'os';
 import clsx from 'clsx';
 import type { Ref } from 'react';
+import { useOperatingSystem } from '~/hooks';
 
 import { useExplorerStore } from '../Explorer/store';
 import { NavigationButtons } from './NavigationButtons';
@@ -15,10 +17,11 @@ interface Props {
 
 const TopBar = (props: Props) => {
 	const { isDragging } = useExplorerStore();
+	const os = useOperatingSystem();
 
 	return (
 		<div
-			data-tauri-drag-region
+			data-tauri-drag-region={os === 'macOS'}
 			style={{ height: TOP_BAR_HEIGHT }}
 			className={clsx(
 				'top-bar-blur absolute inset-x-0 z-50 flex items-center gap-3.5 overflow-hidden border-b !border-sidebar-divider bg-app/90 px-3.5',
@@ -27,7 +30,7 @@ const TopBar = (props: Props) => {
 			)}
 		>
 			<div
-				data-tauri-drag-region
+				data-tauri-drag-region={os === 'macOS'}
 				className="flex flex-1 items-center gap-3.5 overflow-hidden"
 			>
 				<NavigationButtons />
diff --git a/interface/app/$libraryId/settings/Sidebar.tsx b/interface/app/$libraryId/settings/Sidebar.tsx
index 9e2f26024..920abd6eb 100644
--- a/interface/app/$libraryId/settings/Sidebar.tsx
+++ b/interface/app/$libraryId/settings/Sidebar.tsx
@@ -32,7 +32,10 @@ export default () => {
 	return (
 		<div className="custom-scroll no-scrollbar h-full w-60 max-w-[180px] shrink-0 border-r border-app-line/50 pb-5">
 			{os !== 'browser' ? (
-				<div data-tauri-drag-region className="mb-3 h-3 w-full p-3 pl-[14px] pt-[10px]">
+				<div
+					data-tauri-drag-region={os === 'macOS'}
+					className="mb-3 h-3 w-full p-3 pl-[14px] pt-[10px]"
+				>
 					<NavigationButtons />
 				</div>
 			) : (
diff --git a/interface/components/DragRegion.tsx b/interface/components/DragRegion.tsx
index 6cfde608b..708653c18 100644
--- a/interface/components/DragRegion.tsx
+++ b/interface/components/DragRegion.tsx
@@ -1,14 +1,19 @@
 import { forwardRef, PropsWithChildren } from 'react';
 import { cx } from '@sd/ui';
+import { useOperatingSystem } from '~/hooks';
 
 export default forwardRef<HTMLDivElement, PropsWithChildren & { className?: string }>(
-	(props, ref) => (
-		<div
-			data-tauri-drag-region
-			className={cx('flex h-5 w-full flex-shrink-0', props.className)}
-			ref={ref}
-		>
-			{props.children}
-		</div>
-	)
+	(props, ref) => {
+		const os = useOperatingSystem();
+
+		return (
+			<div
+				data-tauri-drag-region={os === 'macOS'}
+				className={cx('flex h-5 w-full flex-shrink-0', props.className)}
+				ref={ref}
+			>
+				{props.children}
+			</div>
+		);
+	}
 );