fix: allow selecting when meta key is pressed

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

@@ -2,6 +2,7 @@ import { useDraggable } from "@dnd-kit/core"
 import { ScrollArea } from "@follow/components/ui/scroll-area/index.js"
 import type { FeedViewType } from "@follow/constants"
 import { views } from "@follow/constants"
+import { useKeyPressing } from "@follow/hooks"
 import { stopPropagation } from "@follow/utils/dom"
 import { cn } from "@follow/utils/utils"
 import * as HoverCard from "@radix-ui/react-hover-card"
@@ -190,6 +191,8 @@ function FeedListImpl({ className, view }: { className?: string; view: number })
 
   const shouldFreeUpSpace = useShouldFreeUpSpace()
 
+  const isMetaKeyPressed = useKeyPressing("Meta")
+
   return (
     <div className={cn(className, "font-medium")}>
       <ListHeader view={view} />
@@ -198,24 +201,18 @@ function FeedListImpl({ className, view }: { className?: string; view: number })
         ref={selectoRef}
         rootContainer={document.body}
         dragContainer={"#feeds-area"}
-        dragCondition={() => selectedFeedIds.length === 0}
+        dragCondition={() => selectedFeedIds.length === 0 || isMetaKeyPressed}
         selectableTargets={["[data-feed-id]"]}
         continueSelect
         hitRate={10}
         onSelect={(e) => {
           const allChanged = [...e.added, ...e.removed]
+            .map((el) => el.dataset.feedId)
+            .filter((id) => id !== undefined)
 
           setSelectedFeedIds((prev) => {
-            const added = allChanged
-              .map((el) => el.dataset.feedId)
-              .filter((id) => id !== undefined)
-              .filter((id) => !prev.includes(id))
-            const removed = new Set(
-              allChanged
-                .map((el) => el.dataset.feedId)
-                .filter((id) => id !== undefined)
-                .filter((id) => prev.includes(id)),
-            )
+            const added = allChanged.filter((id) => !prev.includes(id))
+            const removed = new Set(allChanged.filter((id) => prev.includes(id)))
             return [...prev.filter((id) => !removed.has(id)), ...added]
           })
         }}

packages/hooks/src/index.ts

@@ -5,6 +5,7 @@ export * from "./useDark"
 export * from "./useInputComposition"
 export * from "./useInterval"
 export * from "./useIsOnline"
+export * from "./useKeyPressing"
 export * from "./useMeasure"
 export * from "./useOnce"
 export * from "./usePageVisibility"

packages/hooks/src/useKeyPressing.ts

@@ -0,0 +1,29 @@
+import { useEffect, useMemo, useState } from "react"
+
+export function useKeyPressing(key: string) {
+  const [keysPressed, setKeysPressed] = useState(() => new Set())
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      setKeysPressed((prev) => new Set(prev).add(event.key))
+    }
+
+    const handleKeyUp = (event: KeyboardEvent) => {
+      setKeysPressed((prev) => {
+        const newSet = new Set(prev)
+        newSet.delete(event.key)
+        return newSet
+      })
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    window.addEventListener("keyup", handleKeyUp)
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown)
+      window.removeEventListener("keyup", handleKeyUp)
+    }
+  }, [])
+
+  return useMemo(() => keysPressed.has(key), [keysPressed, key])
+}