feat: support dnd to reorder mailbox relays

src/components/MailboxSetting/MailboxRelay.tsx

@@ -8,8 +8,10 @@ import {
 } from '@/components/ui/select'
 import { toRelay } from '@/lib/link'
 import { TMailboxRelay, TMailboxRelayScope } from '@/types'
-import { CircleX } from 'lucide-react'
+import { CircleX, GripVertical } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
 import RelayIcon from '../RelayIcon'
 
 export default function MailboxRelay({
@@ -24,14 +26,34 @@ export default function MailboxRelay({
   const { t } = useTranslation()
   const { push } = useSecondaryPage()
 
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: mailboxRelay.url
+  })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  }
+
   return (
-    <div className="flex items-center justify-between">
-      <div
-        className="flex items-center gap-2 flex-1 w-0 cursor-pointer"
-        onClick={() => push(toRelay(mailboxRelay.url))}
-      >
-        <RelayIcon url={mailboxRelay.url} />
-        <div className="truncate">{mailboxRelay.url}</div>
+    <div ref={setNodeRef} style={style} className="flex items-center justify-between">
+      <div className="flex items-center gap-2 flex-1 w-0">
+        <div
+          {...attributes}
+          {...listeners}
+          className="cursor-grab active:cursor-grabbing p-2 hover:bg-muted rounded touch-none"
+          style={{ touchAction: 'none' }}
+        >
+          <GripVertical size={16} className="text-muted-foreground" />
+        </div>
+        <div
+          className="flex items-center gap-2 flex-1 w-0 cursor-pointer"
+          onClick={() => push(toRelay(mailboxRelay.url))}
+        >
+          <RelayIcon url={mailboxRelay.url} />
+          <div className="truncate">{mailboxRelay.url}</div>
+        </div>
       </div>
       <div className="flex items-center gap-4">
         <Select