Fix dnd on touch devices

src/lib/dnd-kit/DndKitUtil.ts

@@ -16,7 +16,7 @@ import {
     SensorOptions,
     useSensors,
 } from '@dnd-kit/core';
-import { AbstractPointerSensorOptions } from '@dnd-kit/core/dist/sensors';
+import { AbstractPointerSensorOptions, PointerActivationConstraint } from '@dnd-kit/core/dist/sensors';
 import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
 
 export class DndKitUtil {
@@ -28,11 +28,38 @@ export class DndKitUtil {
         return MouseSensor;
     }
 
+    static useGetSensorForDevice(): Sensor<PointerSensorOptions> {
+        MediaQuery.useIsTouchDevice();
+
+        return DndKitUtil.getSensorForDevice();
+    }
+
+    static useGetActivationConstraintForDevice(): PointerActivationConstraint {
+        const isTouchDevice = MediaQuery.useIsTouchDevice();
+
+        if (isTouchDevice) {
+            return {
+                delay: 300,
+                tolerance: 8,
+            };
+        }
+
+        return {
+            distance: 8,
+        };
+    }
+
     static useSensorsForDevice(options?: AbstractPointerSensorOptions): SensorDescriptor<SensorOptions>[] {
+        const sensor = DndKitUtil.useGetSensorForDevice();
+        const activationConstraint = DndKitUtil.useGetActivationConstraintForDevice();
+
         return useSensors(
-            useSensor(DndKitUtil.getSensorForDevice(), {
+            useSensor(sensor, {
                 ...options,
-                activationConstraint: { distance: 15, ...options?.activationConstraint },
+                activationConstraint: {
+                    ...activationConstraint,
+                    ...options?.activationConstraint,
+                },
             }),
         );
     }

src/modules/downloads/components/DownloadQueueChapterCard.tsx

@@ -28,10 +28,12 @@ import { makeToast } from '@/modules/core/utils/Toast.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { DownloaderState } from '@/lib/graphql/generated/graphql.ts';
 import { ChapterDownloadStatus, ChapterIdInfo } from '@/modules/chapter/Chapter.types.ts';
+import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
 
 export const DownloadQueueChapterCard = memo(
     ({ item, status }: { item: ChapterDownloadStatus; status: DownloaderState }) => {
         const { t } = useTranslation();
+        const preventMobileContextMenu = MediaQuery.usePreventMobileContextMenu();
 
         const handleDelete = useCallback(
             async (chapter: ChapterIdInfo) => {
@@ -68,7 +70,12 @@ export const DownloadQueueChapterCard = memo(
         return (
             <Box sx={{ p: 1, pb: 0 }}>
                 <Card>
-                    <CardActionArea component={Link} to={AppRoutes.manga.path(item.manga.id)}>
+                    <CardActionArea
+                        component={Link}
+                        to={AppRoutes.manga.path(item.manga.id)}
+                        onContextMenu={preventMobileContextMenu}
+                        sx={MediaQuery.preventMobileContextMenuSx()}
+                    >
                         <ListCardContent>
                             <IconButton {...MUIUtil.preventRippleProp()} sx={{ pointerEvents: 'none' }}>
                                 <DragHandle />