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

src/components/MailboxSetting/index.tsx

@@ -4,6 +4,23 @@ import { useNostr } from '@/providers/NostrProvider'
 import { TMailboxRelay, TMailboxRelayScope } from '@/types'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent
+} from '@dnd-kit/core'
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy
+} from '@dnd-kit/sortable'
+import { restrictToVerticalAxis, restrictToParentElement } from '@dnd-kit/modifiers'
 import MailboxRelay from './MailboxRelay'
 import NewMailboxRelayInput from './NewMailboxRelayInput'
 import RelayCountWarning from './RelayCountWarning'
@@ -15,6 +32,37 @@ export default function MailboxSetting() {
   const [relays, setRelays] = useState<TMailboxRelay[]>([])
   const [hasChange, setHasChange] = useState(false)
 
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8
+      }
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 200,
+        tolerance: 8
+      }
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  )
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event
+
+    if (active.id !== over?.id) {
+      const oldIndex = relays.findIndex((relay) => relay.url === active.id)
+      const newIndex = relays.findIndex((relay) => relay.url === over?.id)
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        setRelays((relays) => arrayMove(relays, oldIndex, newIndex))
+        setHasChange(true)
+      }
+    }
+  }
+
   useEffect(() => {
     if (!relayList) return
 
@@ -68,16 +116,25 @@ export default function MailboxSetting() {
       </div>
       <RelayCountWarning relays={relays} />
       <SaveButton mailboxRelays={relays} hasChange={hasChange} setHasChange={setHasChange} />
-      <div className="space-y-2">
-        {relays.map((relay) => (
-          <MailboxRelay
-            key={relay.url}
-            mailboxRelay={relay}
-            changeMailboxRelayScope={changeMailboxRelayScope}
-            removeMailboxRelay={removeMailboxRelay}
-          />
-        ))}
-      </div>
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={handleDragEnd}
+        modifiers={[restrictToVerticalAxis, restrictToParentElement]}
+      >
+        <SortableContext items={relays.map((r) => r.url)} strategy={verticalListSortingStrategy}>
+          <div className="space-y-2">
+            {relays.map((relay) => (
+              <MailboxRelay
+                key={relay.url}
+                mailboxRelay={relay}
+                changeMailboxRelayScope={changeMailboxRelayScope}
+                removeMailboxRelay={removeMailboxRelay}
+              />
+            ))}
+          </div>
+        </SortableContext>
+      </DndContext>
       <NewMailboxRelayInput saveNewMailboxRelay={saveNewMailboxRelay} />
     </div>
   )