Remove "react-device-detect" dependency

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"

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',
+                        },
                     },
                 }}
             >

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',
+                        },
                     },
                 }}
             >

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()}
                 >

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;
         }