fix: allow click when selecting

#1512

Author: hyoban

apps/renderer/src/modules/feed-column/list.tsx

@@ -136,7 +136,7 @@ function FeedListImpl({ className, view }: { className?: string; view: number })
   const selectoRef = useRef<Selecto>(null)
   const [selectedFeedIds, setSelectedFeedIds] = useSelectedFeedIds()
 
-  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
+  const { attributes, listeners, setNodeRef, transform } = useDraggable({
     id: "selected-feed",
     disabled: selectedFeedIds.length === 0,
   })
@@ -198,7 +198,7 @@ function FeedListImpl({ className, view }: { className?: string; view: number })
         ref={selectoRef}
         rootContainer={document.body}
         dragContainer={"#feeds-area"}
-        dragCondition={() => !(selectedFeedIds.length > 0 && isDragging)}
+        dragCondition={() => selectedFeedIds.length === 0}
         selectableTargets={["[data-feed-id]"]}
         continueSelect
         hitRate={10}

apps/renderer/src/pages/(main)/layout.tsx

@@ -1,4 +1,5 @@
-import { DndContext, pointerWithin } from "@dnd-kit/core"
+import type { DragEndEvent } from "@dnd-kit/core"
+import { DndContext, PointerSensor, pointerWithin, useSensor, useSensors } from "@dnd-kit/core"
 import { useViewport } from "@follow/components/hooks/useViewport.js"
 import { PanelSplitter } from "@follow/components/ui/divider/index.js"
 import { RootPortal } from "@follow/components/ui/portal/index.jsx"
@@ -105,9 +106,32 @@ export function Component() {
   const { data: remoteSettings, isLoading } = useAuthQuery(settings.get(), {})
   const isNewUser = !isLoading && remoteSettings && Object.keys(remoteSettings.updated).length === 0
 
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    }),
+  )
   const [selectedIds, setSelectedIds] = useSelectedFeedIds()
-
   const { mutate } = useBatchUpdateSubscription()
+  const handleDragEnd = React.useCallback(
+    (event: DragEndEvent) => {
+      if (!event.over) {
+        return
+      }
+
+      const { category, view } = event.over.data.current as {
+        category: string
+        view: FeedViewType
+      }
+
+      mutate({ category, view, feedIdList: selectedIds })
+
+      setSelectedIds([])
+    },
+    [mutate, selectedIds, setSelectedIds],
+  )
 
   if (isNotSupportWidth) {
     return <NotSupport />
@@ -123,21 +147,9 @@ export function Component() {
       <AppLayoutGridContainerProvider>
         <FeedResponsiveResizerContainer containerRef={containerRef}>
           <DndContext
+            sensors={sensors}
             collisionDetection={pointerWithin}
-            onDragEnd={(event) => {
-              if (!event.over) {
-                return
-              }
-
-              const { category, view } = event.over.data.current as {
-                category: string
-                view: FeedViewType
-              }
-
-              mutate({ category, view, feedIdList: selectedIds })
-
-              setSelectedIds([])
-            }}
+            onDragEnd={handleDragEnd}
           >
             <FeedColumn>
               <CornerPlayer />