From 809e8a32bd4610a5af1af003f870d9c3dfb625cb Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Thu, 23 May 2024 02:29:08 +0200
Subject: [PATCH] Remove "react-device-detect" dependency

---
 package.json                               |  1 -
 src/components/manga/MangaBadges.tsx       |  5 ++++-
 src/components/manga/MangaGridCard.tsx     | 13 ++++++-------
 src/components/manga/MangaListCard.tsx     | 13 ++++++-------
 src/components/manga/MangaOptionButton.tsx | 14 ++++++++++----
 src/components/menu/NestedMenuItem.tsx     |  8 +++++---
 yarn.lock                                  |  9 +--------
 7 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/package.json b/package.json
index 82a86a71..e2f21384 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,6 @@
     "p-limit": "5.0.0",
     "react": "18.3.1",
     "react-beautiful-dnd": "13.1.1",
-    "react-device-detect": "2.2.3",
     "react-dom": "18.3.1",
     "react-i18next": "14.1.1",
     "react-lazily": "0.9.2",
diff --git a/src/components/manga/MangaBadges.tsx b/src/components/manga/MangaBadges.tsx
index 92c0228b..e68b8c69 100644
--- a/src/components/manga/MangaBadges.tsx
+++ b/src/components/manga/MangaBadges.tsx
@@ -12,6 +12,7 @@ import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext.tsx';
 import { MangaCardMode } from '@/components/manga/MangaCard.types.tsx';
+import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
 
 const BadgeContainer = styled('div')({
     display: 'flex',
@@ -43,13 +44,15 @@ export const MangaBadges = ({
 }) => {
     const { t } = useTranslation();
 
+    const isTouchDevice = MediaQuery.useIsTouchDevice();
+
     const {
         options: { showUnreadBadge, showDownloadBadge },
     } = useLibraryOptionsContext();
 
     return (
         <BadgeContainer>
-            {inLibraryIndicator && mode === 'source' && (
+            {!isTouchDevice && inLibraryIndicator && mode === 'source' && (
                 <Button
                     className="source-manga-library-state-button"
                     component="div"
diff --git a/src/components/manga/MangaGridCard.tsx b/src/components/manga/MangaGridCard.tsx
index 4715902c..faebecca 100644
--- a/src/components/manga/MangaGridCard.tsx
+++ b/src/components/manga/MangaGridCard.tsx
@@ -14,7 +14,6 @@ import CardActionArea from '@mui/material/CardActionArea';
 import Stack from '@mui/material/Stack';
 import Tooltip from '@mui/material/Tooltip';
 import { styled } from '@mui/material/styles';
-import { isMobile } from 'react-device-detect';
 import { useRef } from 'react';
 import { SpinnerImage } from '@/components/util/SpinnerImage.tsx';
 import { MangaOptionButton } from '@/components/manga/MangaOptionButton.tsx';
@@ -85,12 +84,12 @@ export const MangaGridCard = ({
                             visibility: 'visible',
                             pointerEvents: 'all',
                         },
-                    },
-                    '&:hover .source-manga-library-state-button': {
-                        display: isMobile ? 'none' : 'inline-flex',
-                    },
-                    '&:hover .source-manga-library-state-indicator': {
-                        display: mode === 'source' ? 'none' : 'flex',
+                        '&:hover .source-manga-library-state-button': {
+                            display: 'inline-flex',
+                        },
+                        '&:hover .source-manga-library-state-indicator': {
+                            display: mode === 'source' ? 'none' : 'flex',
+                        },
                     },
                 }}
             >
diff --git a/src/components/manga/MangaListCard.tsx b/src/components/manga/MangaListCard.tsx
index 5e57305a..5c939d14 100644
--- a/src/components/manga/MangaListCard.tsx
+++ b/src/components/manga/MangaListCard.tsx
@@ -13,7 +13,6 @@ import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import Tooltip from '@mui/material/Tooltip';
-import { isMobile } from 'react-device-detect';
 import { Link as RouterLink } from 'react-router-dom';
 import { useRef } from 'react';
 import { SpinnerImage } from '@/components/util/SpinnerImage.tsx';
@@ -55,12 +54,12 @@ export const MangaListCard = ({
                             visibility: 'visible',
                             pointerEvents: 'all',
                         },
-                    },
-                    '&:hover .source-manga-library-state-button': {
-                        display: isMobile ? 'none' : 'inline-flex',
-                    },
-                    '&:hover .source-manga-library-state-indicator': {
-                        display: mode === 'source' ? 'none' : 'inline-flex',
+                        '&:hover .source-manga-library-state-button': {
+                            display: 'inline-flex',
+                        },
+                        '&:hover .source-manga-library-state-indicator': {
+                            display: mode === 'source' ? 'none' : 'inline-flex',
+                        },
                     },
                 }}
             >
diff --git a/src/components/manga/MangaOptionButton.tsx b/src/components/manga/MangaOptionButton.tsx
index 4dc20dfb..30ef7609 100644
--- a/src/components/manga/MangaOptionButton.tsx
+++ b/src/components/manga/MangaOptionButton.tsx
@@ -15,9 +15,9 @@ import IconButton from '@mui/material/IconButton';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { PopupState } from 'material-ui-popup-state/hooks';
 import { bindTrigger } from 'material-ui-popup-state';
-import { isMobile } from 'react-device-detect';
 import { SelectableCollectionReturnType } from '@/components/collection/useSelectableCollection.ts';
 import { TManga } from '@/typings.ts';
+import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
 
 export const MangaOptionButton = forwardRef(
     (
@@ -38,6 +38,8 @@ export const MangaOptionButton = forwardRef(
     ) => {
         const { t } = useTranslation();
 
+        const isTouchDevice = MediaQuery.useIsTouchDevice();
+
         const bindTriggerProps = useMemo(() => bindTrigger(popupState), [popupState]);
 
         const preventDefaultAction = (e: BaseSyntheticEvent) => {
@@ -51,7 +53,7 @@ export const MangaOptionButton = forwardRef(
         };
 
         const handleClick = (e: MouseEvent | TouchEvent) => {
-            if (isMobile) return;
+            if (isTouchDevice) return;
 
             preventDefaultAction(e);
             popupState.open(e);
@@ -107,8 +109,12 @@ export const MangaOptionButton = forwardRef(
                         minWidth: 'unset',
                         paddingX: '0',
                         paddingY: '2.5px',
-                        visibility: popupState.isOpen && !isMobile ? 'visible' : 'hidden',
-                        pointerEvents: isMobile ? undefined : 'none',
+                        visibility: popupState.isOpen ? 'visible' : 'hidden',
+                        pointerEvents: 'none',
+                        '@media not (pointer: fine)': {
+                            visibility: 'hidden',
+                            pointerEvents: undefined,
+                        },
                     }}
                     onMouseDown={(e) => e.stopPropagation()}
                 >
diff --git a/src/components/menu/NestedMenuItem.tsx b/src/components/menu/NestedMenuItem.tsx
index b19104d8..5f9d9206 100644
--- a/src/components/menu/NestedMenuItem.tsx
+++ b/src/components/menu/NestedMenuItem.tsx
@@ -34,9 +34,9 @@ import Box from '@mui/material/Box';
 
 import { OverridableComponent } from '@mui/material/OverridableComponent';
 import { SvgIconTypeMap } from '@mui/material/SvgIcon';
-import { isMobile } from 'react-device-detect';
 import { IconMenuItem } from '@/components/menu/IconMenuItem.tsx';
 import { getOptionForDirection } from '@/theme.ts';
+import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
 
 export type NestedMenuItemProps = Omit<MuiMenuItemProps, 'button'> & {
     parentMenuOpen: boolean;
@@ -69,6 +69,8 @@ const NestedMenuItem = forwardRef<HTMLLIElement | null, NestedMenuItemProps>((pr
         ...MenuItemProps
     } = props;
 
+    const isTouchDevice = MediaQuery.useIsTouchDevice();
+
     const { ref: containerRefProp, ...ContainerProps } = ContainerPropsProp;
 
     const menuItemRef = useRef<HTMLLIElement | null>(null);
@@ -95,7 +97,7 @@ const NestedMenuItem = forwardRef<HTMLLIElement | null, NestedMenuItemProps>((pr
     };
 
     const handleMouseEnter = (e: MouseEvent<HTMLElement>) => {
-        if (isMobile) {
+        if (isTouchDevice) {
             return;
         }
 
@@ -129,7 +131,7 @@ const NestedMenuItem = forwardRef<HTMLLIElement | null, NestedMenuItemProps>((pr
     };
 
     const handleFocus = (e: FocusEvent<HTMLElement>) => {
-        if (isMobile) {
+        if (isTouchDevice) {
             return;
         }
 
diff --git a/yarn.lock b/yarn.lock
index 965ac3a0..f618f3fd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6036,13 +6036,6 @@ react-beautiful-dnd@13.1.1:
     redux "^4.0.4"
     use-memo-one "^1.1.1"
 
-react-device-detect@2.2.3:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/react-device-detect/-/react-device-detect-2.2.3.tgz#97a7ae767cdd004e7c3578260f48cf70c036e7ca"
-  integrity sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw==
-  dependencies:
-    ua-parser-js "^1.0.33"
-
 react-dom@18.3.1:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
@@ -6989,7 +6982,7 @@ typescript@5.4.5:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.5.tgz#42ccef2c571fdbd0f6718b1d1f5e6e5ef006f611"
   integrity sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==
 
-ua-parser-js@^1.0.33, ua-parser-js@^1.0.35:
+ua-parser-js@^1.0.35:
   version "1.0.37"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.37.tgz#b5dc7b163a5c1f0c510b08446aed4da92c46373f"
   integrity sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==