feat(web): improve torrent selection UX with unified click and escape behavior (#782)

Author: s0up4200

web/src/components/torrents/TorrentDetailsPanel.tsx

@@ -86,23 +86,8 @@ export const TorrentDetailsPanel = memo(function TorrentDetailsPanel({ instanceI
     }
   }, [initialTab, onInitialTabConsumed, setActiveTab])
 
-  // Escape key handler to close the panel
-  useEffect(() => {
-    if (!onClose) return
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape" && !e.defaultPrevented) {
-        // Don't close if a dialog/modal is open
-        const hasOpenDialog = document.querySelector("[role=\"dialog\"]")
-        if (!hasOpenDialog) {
-          onClose()
-        }
-      }
-    }
-
-    window.addEventListener("keydown", handleKeyDown)
-    return () => window.removeEventListener("keydown", handleKeyDown)
-  }, [onClose])
+  // Note: Escape key handling is now unified in Torrents.tsx
+  // to close panel and clear selection atomically
 
   const [showAddPeersDialog, setShowAddPeersDialog] = useState(false)
   const { formatTimestamp } = useDateTimeFormatters()

web/src/components/torrents/TorrentTableOptimized.tsx

@@ -1912,12 +1912,7 @@ export const TorrentTableOptimized = memo(function TorrentTableOptimized({
     }
   }, [filters, effectiveSearch, instanceId, virtualizer, sortedTorrents.length, lastUserAction, resetSelectionState])
 
-  // Clear selection handler for keyboard navigation
-  const clearSelection = useCallback(() => {
-    resetSelectionState()
-  }, [resetSelectionState])
-
-  // Set up keyboard navigation with selection clearing
+  // Set up keyboard navigation (PageUp/Down, Home/End)
   useKeyboardNavigation({
     parentRef,
     virtualizer,
@@ -1926,8 +1921,6 @@ export const TorrentTableOptimized = memo(function TorrentTableOptimized({
     isLoadingMore,
     loadMore,
     estimatedRowHeight,
-    onClearSelection: clearSelection,
-    hasSelection: isAllSelected || selectedRowIds.length > 0,
   })
 
   // Apply Ctrl/Cmd+A shortcut to select all torrents
@@ -2609,6 +2602,17 @@ export const TorrentTableOptimized = memo(function TorrentTableOptimized({
                             handleRowSelection(torrent.hash, !isRowSelected, row.id)
                             lastSelectedIndexRef.current = currentIndex
                           } else {
+                            // Plain click - open details panel
+                            // If row is already selected, keep selection intact
+                            // Otherwise, select only this torrent (replace selection)
+                            if (!isRowSelected) {
+                              const allRows = table.getRowModel().rows
+                              const currentIndex = allRows.findIndex(r => r.id === row.id)
+                              setIsAllSelected(false)
+                              setExcludedFromSelectAll(new Set())
+                              setRowSelection({ [row.id]: true })
+                              lastSelectedIndexRef.current = currentIndex
+                            }
                             onTorrentSelect?.(torrent)
                           }
                         }}
@@ -2722,7 +2726,17 @@ export const TorrentTableOptimized = memo(function TorrentTableOptimized({
                             handleRowSelection(torrent.hash, !isRowSelected, row.id)
                             lastSelectedIndexRef.current = currentIndex
                           } else {
-                            // Plain click - open details without changing checkbox selection state
+                            // Plain click - open details panel
+                            // If row is already selected, keep selection intact
+                            // Otherwise, select only this torrent (replace selection)
+                            if (!isRowSelected) {
+                              const allRows = table.getRowModel().rows
+                              const currentIndex = allRows.findIndex(r => r.id === row.id)
+                              setIsAllSelected(false)
+                              setExcludedFromSelectAll(new Set())
+                              setRowSelection({ [row.id]: true })
+                              lastSelectedIndexRef.current = currentIndex
+                            }
                             onTorrentSelect?.(torrent)
                           }
                         }

web/src/hooks/useKeyboardNavigation.ts

@@ -17,9 +17,6 @@ interface UseKeyboardNavigationProps {
   isLoadingMore: boolean
   loadMore: () => void
   estimatedRowHeight?: number
-  // Selection handling props (optional)
-  onClearSelection?: () => void
-  hasSelection?: boolean
 }
 
 export function useKeyboardNavigation({
@@ -30,8 +27,6 @@ export function useKeyboardNavigation({
   isLoadingMore,
   loadMore,
   estimatedRowHeight = 40,
-  onClearSelection,
-  hasSelection = false,
 }: UseKeyboardNavigationProps) {
 
   // Set up keyboard event listeners
@@ -54,12 +49,8 @@ export function useKeyboardNavigation({
 
       if (!container) return
 
-      // Handle Escape key for clearing selection
-      if (key === "Escape" && onClearSelection && hasSelection) {
-        event.preventDefault()
-        onClearSelection()
-        return
-      }
+      // Note: Escape key handling is now unified in Torrents.tsx
+      // to close panel and clear selection atomically
 
       // Only handle standard navigation keys
       const navigationKeys = ["PageUp", "PageDown", "Home", "End"]
@@ -157,5 +148,5 @@ export function useKeyboardNavigation({
     return () => {
       window.removeEventListener("keydown", handleKeyDown)
     }
-  }, [virtualizer, safeLoadedRows, hasLoadedAll, isLoadingMore, loadMore, estimatedRowHeight, parentRef, onClearSelection, hasSelection])
-}
+  }, [virtualizer, safeLoadedRows, hasLoadedAll, isLoadingMore, loadMore, estimatedRowHeight, parentRef])
+}

web/src/pages/Torrents.tsx

@@ -12,6 +12,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/u
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable"
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"
 import { VisuallyHidden } from "@/components/ui/visually-hidden"
+import { useTorrentSelection } from "@/contexts/TorrentSelectionContext"
 import { usePersistedCompactViewState } from "@/hooks/usePersistedCompactViewState"
 import { usePersistedFilters } from "@/hooks/usePersistedFilters"
 import { usePersistedFilterSidebarState } from "@/hooks/usePersistedFilterSidebarState"
@@ -31,6 +32,7 @@ export function Torrents({ instanceId, search, onSearchChange }: TorrentsProps)
   const [filters, setFilters] = usePersistedFilters(instanceId)
   const [filterSidebarCollapsed] = usePersistedFilterSidebarState(false)
   const { viewMode } = usePersistedCompactViewState("normal")
+  const { clearSelection } = useTorrentSelection()
 
   // Sidebar width: 320px normal, 260px dense
   const sidebarWidth = viewMode === "dense" ? "16.25rem" : "20rem"
@@ -220,6 +222,26 @@ export function Torrents({ instanceId, search, onSearchChange }: TorrentsProps)
     }
   }, [selectedTorrent, isMobile])
 
+  // Unified Escape handler: close panel and clear selection atomically
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key !== "Escape") return
+      if (e.defaultPrevented) return
+
+      // Skip if a dialog is open (dialogs handle their own Escape)
+      if (document.querySelector("[role=\"dialog\"]")) return
+
+      e.preventDefault()
+
+      // Close panel and clear selection in one action
+      setSelectedTorrent(null)
+      clearSelection()
+    }
+
+    window.addEventListener("keydown", handleEscape)
+    return () => window.removeEventListener("keydown", handleEscape)
+  }, [clearSelection])
+
   // Close the mobile filters sheet when viewport switches to desktop layout
   useEffect(() => {
     const mediaQuery = window.matchMedia("(min-width: 768px)")