fix(torrents): stabilize tag and category dialogs (#1638)

Author: s0up4200

web/src/components/torrents/TorrentDialogs.tsx

@@ -1049,17 +1049,31 @@ export const SetCategoryDialog = memo(function SetCategoryDialog({
 }: SetCategoryDialogProps) {
   const [categoryInput, setCategoryInput] = useState("")
   const [searchQuery, setSearchQuery] = useState("")
+  const [dialogCategories, setDialogCategories] = useState<Record<string, Category>>({})
+  const [dialogUseSubcategories, setDialogUseSubcategories] = useState(useSubcategories)
   const wasOpen = useRef(false)
   const scrollContainerRef = useRef<HTMLDivElement>(null)
+  const availableCategoryCount = Object.keys(availableCategories || {}).length
+  const dialogCategoryCount = Object.keys(dialogCategories).length
 
-  // Initialize category only when dialog transitions from closed to open
+  // Freeze the category list while the dialog is open so background table refreshes
+  // do not reshuffle the scroll container. If the dialog opened before categories
+  // finished loading, hydrate exactly once when the first non-empty list arrives.
   useEffect(() => {
     if (open && !wasOpen.current) {
       setCategoryInput(initialCategory)
       setSearchQuery("")
+      setDialogCategories(availableCategories || {})
+      setDialogUseSubcategories(useSubcategories)
+    } else if (open && dialogCategoryCount === 0 && availableCategoryCount > 0) {
+      setDialogCategories(availableCategories || {})
+      setDialogUseSubcategories(useSubcategories)
+    } else if (!open && wasOpen.current) {
+      setDialogCategories({})
+      setDialogUseSubcategories(useSubcategories)
     }
     wasOpen.current = open
-  }, [open, initialCategory])
+  }, [availableCategories, availableCategoryCount, dialogCategoryCount, initialCategory, open, useSubcategories])
 
   const handleConfirm = useCallback(() => {
     onConfirm(categoryInput)
@@ -1074,13 +1088,13 @@ export const SetCategoryDialog = memo(function SetCategoryDialog({
   }, [onOpenChange])
 
   // Filter categories based on search, with subcategory support
-  const categoryList = Object.keys(availableCategories || {}).sort()
+  const categoryList = useMemo(() => Object.keys(dialogCategories).sort(), [dialogCategories])
 
   const filteredCategories = useMemo(() => {
     const query = searchQuery.trim().toLowerCase()
 
-    if (useSubcategories) {
-      const tree = buildCategoryTree(availableCategories || {}, {})
+    if (dialogUseSubcategories) {
+      const tree = buildCategoryTree(dialogCategories, {})
       const shouldIncludeCache = new Map<CategoryNode, boolean>()
 
       const shouldIncludeNode = (node: CategoryNode): boolean => {
@@ -1133,16 +1147,10 @@ export const SetCategoryDialog = memo(function SetCategoryDialog({
       displayName: name,
       level: 0,
     }))
-  }, [availableCategories, categoryList, searchQuery, useSubcategories])
+  }, [categoryList, dialogCategories, dialogUseSubcategories, searchQuery])
 
-  const shouldUseVirtualization = filteredCategories.length > 50
-
-  const virtualizer = useVirtualizer({
-    count: shouldUseVirtualization ? filteredCategories.length : 0,
-    getScrollElement: () => scrollContainerRef.current,
-    estimateSize: () => 36,
-    overscan: 5,
-  })
+  const showLoadingCategories = isLoadingCategories && dialogCategoryCount === 0
+  const showSearch = !showLoadingCategories && categoryList.length > 10
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -1155,89 +1163,47 @@ export const SetCategoryDialog = memo(function SetCategoryDialog({
         </DialogHeader>
         <div className="py-4 space-y-4">
           {/* Search bar for categories */}
-          {!isLoadingCategories && categoryList.length > 10 && (
-            <div className="space-y-2">
-              <Label htmlFor="categorySearch">Search Categories</Label>
-              <Input
-                id="categorySearch"
-                placeholder="Type to search..."
-                value={searchQuery}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
-              />
-            </div>
-          )}
+          <div className={showSearch ? "space-y-2" : "hidden"} aria-hidden={!showSearch}>
+            {showSearch && (
+              <>
+                <Label htmlFor="categorySearch">Search Categories</Label>
+                <Input
+                  id="categorySearch"
+                  placeholder="Type to search..."
+                  value={searchQuery}
+                  onChange={(e: ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
+                />
+              </>
+            )}
+          </div>
 
           {/* Category list with optional virtualization */}
           <div className="space-y-2">
             <Label>Select Category</Label>
-            {isLoadingCategories ? (
-              <div className="max-h-64 border rounded-md p-3 flex items-center justify-center">
-                <div className="flex items-center gap-2 text-muted-foreground">
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                  <span className="text-sm">Loading categories...</span>
+            <div
+              ref={scrollContainerRef}
+              className="max-h-64 border rounded-md overflow-y-auto"
+            >
+              {showLoadingCategories ? (
+                <div className="p-3 flex items-center justify-center">
+                  <div className="flex items-center gap-2 text-muted-foreground">
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    <span className="text-sm">Loading categories...</span>
+                  </div>
                 </div>
-              </div>
-            ) : (
-              <div
-                ref={scrollContainerRef}
-                className="max-h-64 border rounded-md overflow-y-auto"
-              >
-                {/* No category option */}
-                <button
-                  type="button"
-                  onClick={() => setCategoryInput("")}
-                  className={`w-full text-left px-3 py-2 hover:bg-accent transition-colors ${
-                    categoryInput === "" ? "bg-accent" : ""
-                  }`}
-                >
-                  <span className="text-sm text-muted-foreground italic">(No category)</span>
-                </button>
-
-                {shouldUseVirtualization ? (
-                // Virtualized rendering for large lists
-                  <div
-                    style={{
-                      height: `${virtualizer.getTotalSize()}px`,
-                      width: "100%",
-                      position: "relative",
-                    }}
+              ) : (
+                <>
+                  {/* No category option */}
+                  <button
+                    type="button"
+                    onClick={() => setCategoryInput("")}
+                    className={`w-full text-left px-3 py-2 hover:bg-accent transition-colors ${
+                      categoryInput === "" ? "bg-accent" : ""
+                    }`}
                   >
-                    {virtualizer.getVirtualItems().map((virtualRow) => {
-                      const category = filteredCategories[virtualRow.index]
-                      return (
-                        <div
-                          key={virtualRow.key}
-                          data-index={virtualRow.index}
-                          ref={virtualizer.measureElement}
-                          style={{
-                            position: "absolute",
-                            top: 0,
-                            left: 0,
-                            width: "100%",
-                            transform: `translateY(${virtualRow.start}px)`,
-                          }}
-                        >
-                          <button
-                            type="button"
-                            onClick={() => setCategoryInput(category.name)}
-                            className={`w-full text-left px-3 py-2 hover:bg-accent transition-colors ${
-                              categoryInput === category.name ? "bg-accent" : ""
-                            }`}
-                            title={category.name}
-                          >
-                            <span
-                              className="text-sm"
-                              style={category.level > 0 ? { paddingLeft: category.level * 12 } : undefined}
-                            >
-                              {category.displayName}
-                            </span>
-                          </button>
-                        </div>
-                      )
-                    })}
-                  </div>
-                ) : (
-                // Simple rendering for small lists - much faster!
+                    <span className="text-sm text-muted-foreground italic">(No category)</span>
+                  </button>
+
                   <div>
                     {filteredCategories.map((category) => (
                       <button
@@ -1258,15 +1224,15 @@ export const SetCategoryDialog = memo(function SetCategoryDialog({
                       </button>
                     ))}
                   </div>
-                )}
 
-                {filteredCategories.length === 0 && searchQuery && (
-                  <div className="px-3 py-6 text-center text-sm text-muted-foreground">
-                    No categories found matching "{searchQuery}"
-                  </div>
-                )}
-              </div>
-            )}
+                  {filteredCategories.length === 0 && searchQuery && (
+                    <div className="px-3 py-6 text-center text-sm text-muted-foreground">
+                      No categories found matching "{searchQuery}"
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
           </div>
 
           {/* Option to enter new category */}

web/src/components/torrents/TorrentManagementBar.tsx

@@ -589,32 +589,19 @@ export const TorrentManagementBar = memo(function TorrentManagementBar({
             )
           })()}
 
-          {/* Tag Actions */}
-          <DropdownMenu>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <DropdownMenuTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    disabled={isPending || isDisabled}
-                  >
-                    <Tag className="h-4 w-4" />
-                  </Button>
-                </DropdownMenuTrigger>
-              </TooltipTrigger>
-              <TooltipContent>Tag Actions</TooltipContent>
-            </Tooltip>
-            <DropdownMenuContent align="center">
-              <DropdownMenuItem
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
                 onClick={() => prepareTagsAction(selectedHashes, selectedTorrents)}
                 disabled={isPending || isDisabled}
               >
-                <Tag className="h-4 w-4 mr-2" />
-                Set Tags {selectionCount > 1 ? `(${selectionCount})` : ""}
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
+                <Tag className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Set Tags</TooltipContent>
+          </Tooltip>
 
           <Tooltip>
             <TooltipTrigger asChild>