From e8450821dfd41bd0255d894fea229bab6c2a4b16 Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Mon, 19 Feb 2024 18:23:20 +0300
Subject: [PATCH] [ENG-1612] Fix mouse nav forwards and backwards (#2105)

Fix mouse nav forwards and backwards
---
 .../$libraryId/Explorer/View/Grid/Item.tsx    | 23 +++++++++++++++++--
 .../$libraryId/TopBar/NavigationButtons.tsx   |  5 ++--
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/interface/app/$libraryId/Explorer/View/Grid/Item.tsx b/interface/app/$libraryId/Explorer/View/Grid/Item.tsx
index d66fdf4fb..aad04c1f7 100644
--- a/interface/app/$libraryId/Explorer/View/Grid/Item.tsx
+++ b/interface/app/$libraryId/Explorer/View/Grid/Item.tsx
@@ -1,5 +1,8 @@
 import { HTMLAttributes, ReactNode, useMemo } from 'react';
+import { useNavigate } from 'react-router';
 import { useSelector, type ExplorerItem } from '@sd/client';
+import { useOperatingSystem } from '~/hooks';
+import { useRoutingContext } from '~/RoutingContext';
 
 import { useExplorerContext } from '../../Context';
 import { explorerStore, isCut } from '../../store';
@@ -17,6 +20,9 @@ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
 export const GridItem = ({ children, item, index, ...props }: Props) => {
 	const explorer = useExplorerContext();
 	const explorerView = useExplorerViewContext();
+	const { currentIndex, maxIndex } = useRoutingContext();
+	const os = useOperatingSystem();
+	const navigate = useNavigate();
 
 	const dragSelect = useDragSelectContext();
 
@@ -31,16 +37,29 @@ export const GridItem = ({ children, item, index, ...props }: Props) => {
 		[explorer.selectedItems, item]
 	);
 
+	const canGoBack = currentIndex !== 0;
+	const canGoForward = currentIndex !== maxIndex;
+
 	const { attributes } = useDragSelectable({ index, id: uniqueId(item), selected });
 
 	return (
 		<div
 			{...props}
 			{...attributes}
-			className="h-full w-full"
+			className="w-full h-full"
 			// Prevent explorer view onMouseDown event from
 			// being executed and resetting the selection
-			onMouseDown={(e) => e.stopPropagation()}
+			onMouseDown={(e) => {
+				if (os === 'browser') return;
+				e.stopPropagation();
+				if (e.buttons === 8 || e.buttons === 3) {
+					if (!canGoBack) return;
+					navigate(-1);
+				} else if (e.buttons === 16 || e.buttons === 4) {
+					if (!canGoForward) return;
+					navigate(1);
+				}
+			}}
 			onContextMenu={(e) => {
 				if (!explorerView.selectable || explorer.selectedItems.has(item)) return;
 				explorer.resetSelectedItems([item]);
diff --git a/interface/app/$libraryId/TopBar/NavigationButtons.tsx b/interface/app/$libraryId/TopBar/NavigationButtons.tsx
index 5673ce617..5c4e7fccf 100644
--- a/interface/app/$libraryId/TopBar/NavigationButtons.tsx
+++ b/interface/app/$libraryId/TopBar/NavigationButtons.tsx
@@ -43,11 +43,12 @@ export const NavigationButtons = () => {
 
 	useEffect(() => {
 		const onMouseDown = (e: MouseEvent) => {
+			if (os === 'browser') return;
 			e.stopPropagation();
-			if (e.buttons === 8) {
+			if (e.buttons === 8 || e.buttons === 3) {
 				if (!canGoBack) return;
 				navigate(-1);
-			} else if (e.buttons === 16) {
+			} else if (e.buttons === 16 || e.buttons === 4) {
 				if (!canGoForward) return;
 				navigate(1);
 			}