Replace "react-beautiful-dnd" with "dnd-kit"

"react-beautiful-dnd" has been deprecated for quite some time

src/lib/dnd-kit/DndKitUtil.ts

@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import {
+    MouseSensor,
+    PointerSensorOptions,
+    Sensor,
+    SensorDescriptor,
+    TouchSensor,
+    useSensor,
+    SensorOptions,
+    useSensors,
+} from '@dnd-kit/core';
+import { AbstractPointerSensorOptions } from '@dnd-kit/core/dist/sensors';
+import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
+
+export class DndKitUtil {
+    static getSensorForDevice(): Sensor<PointerSensorOptions> {
+        if (MediaQuery.isTouchDevice()) {
+            return TouchSensor;
+        }
+
+        return MouseSensor;
+    }
+
+    static useSensorsForDevice(options?: AbstractPointerSensorOptions): SensorDescriptor<SensorOptions>[] {
+        return useSensors(
+            useSensor(DndKitUtil.getSensorForDevice(), {
+                ...options,
+                activationConstraint: { distance: 15, ...options?.activationConstraint },
+            }),
+        );
+    }
+}

src/lib/dnd-kit/DndOverlayItem.tsx

@@ -0,0 +1,18 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { DragOverlay } from '@dnd-kit/core';
+import { ReactNode } from 'react';
+
+export const DndOverlayItem = ({ isActive, children }: { isActive: boolean; children?: ReactNode }) => {
+    if (!isActive) {
+        return null;
+    }
+
+    return <DragOverlay style={{ cursor: 'grabbing' }}>{children}</DragOverlay>;
+};

src/lib/dnd-kit/DndSortableItem.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import Box from '@mui/material/Box';
+import { useSortable } from '@dnd-kit/sortable';
+import { ReactNode } from 'react';
+import { UniqueIdentifier } from '@dnd-kit/core';
+import { CSS } from '@dnd-kit/utilities';
+import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
+
+export const DndSortableItem = ({
+    id,
+    isDragging = false,
+    children,
+}: {
+    id: UniqueIdentifier;
+    isDragging?: boolean;
+    children: ReactNode;
+}) => {
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
+
+    return (
+        <Box
+            ref={setNodeRef}
+            sx={{
+                transform: CSS.Translate.toString(transform),
+                transition,
+                ...applyStyles(isDragging, {
+                    opacity: 0.25,
+                }),
+            }}
+            {...attributes}
+            {...listeners}
+        >
+            {children}
+        </Box>
+    );
+};