fix(web): indent subcategories in SetCategoryDialog

[s0up4200]

Closes #598

Summary by CodeRabbit

• New Features

  • Optional subcategory support for hierarchical category organization across the app.
  • Category selection dialogs, management bars, context menus, and list rows now display and handle nested categories with indentation and proper selection.
  • Subcategory behavior is automatically enabled/disabled based on backend capability and user preference.

• Performance

  • Large category lists are optimized for responsiveness via filtered/virtualized rendering.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Derives a useSubcategories flag from instance capabilities and user preferences, threads it through UI and callbacks, extends onFilteredDataUpdate signature, and adds hierarchical category rendering to SetCategoryDialog using a CategoryTree when subcategories are enabled.

Changes

Cohort / File(s)	Summary
Flag propagation & callers web/src/components/torrents/TorrentCardsMobile.tsx, web/src/components/torrents/TorrentManagementBar.tsx, web/src/components/torrents/TorrentTableOptimized.tsx	Read capabilities and instance preferences to compute allowSubcategories (boolean) and pass it as useSubcategories into category dialogs/components; TorrentCardsMobile forwards backend useSubcategories to onFilteredDataUpdate.
SetCategoryDialog — hierarchical UI web/src/components/torrents/TorrentDialogs.tsx	Add useSubcategories prop and Category typing; import and use buildCategoryTree / CategoryNode; implement tree-based filtering, flattening (with level/displayName), indentation rendering and virtualization when useSubcategories is true; retain flat list behavior when false.
Type & API updates web/src/types/index.ts, web/src/components/torrents/TorrentDialogs.tsx, web/src/components/torrents/TorrentCardsMobile.tsx, web/src/components/torrents/TorrentTableOptimized.tsx	Add use_subcategories?: boolean to AppPreferences; change SetCategoryDialogProps.availableCategories to Record<string, Category> and add useSubcategories?: boolean; extend onFilteredDataUpdate(...) signature to include optional useSubcategories?: boolean; add optional useSubcategories prop to CompactRow and TorrentContextMenu usages.

Sequence Diagram(s)

sequenceDiagram
    participant Parent as Parent Component
    participant Cap as useInstanceCapabilities
    participant Meta as Instance Metadata
    participant SetDlg as SetCategoryDialog
    participant Tree as CategoryTree

    Parent->>Cap: fetch capabilities
    Parent->>Meta: read preferences
    Cap-->>Parent: { supportsSubcategories }
    Meta-->>Parent: { use_subcategories }
    Parent->>Parent: allowSubcategories = supportsSubcategories && use_subcategories
    Parent->>SetDlg: open(..., useSubcategories=allowSubcategories)

    alt allowSubcategories == true
        SetDlg->>Tree: buildCategoryTree(availableCategories)
        Tree-->>SetDlg: hierarchical nodes
        SetDlg->>SetDlg: flatten visible nodes (name, displayName, level)
        SetDlg-->>Parent: selected category (category.name)
    else allowSubcategories == false
        SetDlg->>SetDlg: filter/render flat category list
        SetDlg-->>Parent: selected category (flat name)
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

• Areas to focus on:
  • Tree integration, flatten/cache correctness and performance in web/src/components/torrents/TorrentDialogs.tsx.
  • Updated onFilteredDataUpdate signature in TorrentCardsMobile.tsx and all call sites.
  • Consistent propagation of useSubcategories through UI components (ManagementBar, Table, CompactRow, ContextMenu) and TypeScript type updates.

Possibly related PRs

• fix(incognito): prevent categories leaking #592 — touches category/subcategory handling; may interact with how subcategory lists are constructed in the sidebar and affect merged category lists.
• feat(torrents): add alternative layout to table #520 — adds/adjusts CompactRow and TorrentContextMenu props; directly related to introducing useSubcategories and its propagation.

Suggested labels

bugfix, torrent

Poem

🐰 I hopped through nodes both shallow and deep,
Built trees of names for users to keep,
Indented leaves now easy to see,
Subcategories dancing, tidy as can be —
A tiny hop for UI harmony. 🥕

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix(web): indent subcategories in SetCategoryDialog' directly matches the main change described in issue #598: fixing subcategory indentation in the top-menu Set Category dialog.
Linked Issues check	✅ Passed	The PR changes implement hierarchical category rendering with indentation in SetCategoryDialog, matching the requirements from issue #598. The implementation adds useSubcategories support, tree-based filtering, and level-based visual indentation throughout affected components.
Out of Scope Changes check	✅ Passed	All changes are scoped to implementing subcategory indentation support. While the changes span multiple files (TorrentCardsMobile, TorrentDialogs, TorrentManagementBar, TorrentTableOptimized, types), each modification directly supports the core objective of displaying indented subcategories in the SetCategoryDialog.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/category-dialog-subcategory-indent

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6c21aa6 and 16ed3f9.

📒 Files selected for processing (4)

• web/src/components/torrents/TorrentCardsMobile.tsx (7 hunks)
• web/src/components/torrents/TorrentManagementBar.tsx (3 hunks)
• web/src/components/torrents/TorrentTableOptimized.tsx (2 hunks)
• web/src/types/index.ts (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• web/src/components/torrents/TorrentTableOptimized.tsx

🧰 Additional context used

🧬 Code graph analysis (2)

web/src/components/torrents/TorrentManagementBar.tsx (1)

web/src/hooks/useInstanceCapabilities.ts (1)

• useInstanceCapabilities (15-34)

web/src/components/torrents/TorrentCardsMobile.tsx (2)

web/src/types/index.ts (3)

• Torrent (172-229)
• TorrentCounts (259-265)
• Category (310-313)

internal/qbittorrent/sync_manager.go (1)

• TorrentCounts (1657-1663)

🪛 Biome (2.1.2)

web/src/components/torrents/TorrentManagementBar.tsx

[error] 109-109: This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.

Hooks should not be called after an early return.

For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

(lint/correctness/useHookAtTopLevel)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Run tests

🔇 Additional comments (5)

web/src/types/index.ts (1)

281-296: Subcategory flags are modeled consistently and look good

TorrentResponse.useSubcategories and AppPreferences.use_subcategories? align with existing patterns (ServerState.use_subcategories?) and being optional is appropriate for backward‑compat APIs. I don’t see any type‑level issues here; just ensure the backend actually populates these fields so the UI logic (e.g. allowSubcategories) doesn’t silently stay false on supported instances.

Also applies to: 725-731

web/src/components/torrents/TorrentManagementBar.tsx (1)

99-104: Subcategory capability + preference gating is wired correctly into SetCategoryDialog

The new allowSubcategories flag combines backend capability (supportsSubcategories) with user preference (preferences?.use_subcategories ?? false) and is then passed to SetCategoryDialog as useSubcategories. This matches the new types and gives you a clean single gate for hierarchical rendering in the top‑bar “Set Category” dialog. Just make sure metadata.preferences.use_subcategories is actually populated by the metadata endpoint so you don’t end up with capability enabled but UI still flat.

Also applies to: 108-113, 659-670

web/src/components/torrents/TorrentCardsMobile.tsx (3)

60-61: Cross-seed filter integration on mobile looks coherent

Importing GitBranch and useCrossSeedFilter, then wiring the “Filter Cross-Seeds” button only when onFilterChange is provided and exactly one torrent is selected, is a clean integration. The hook is still called unconditionally at the top level, so hooks rules are respected, and the isFilteringCrossSeeds flag is correctly used to disable the action while a filter is in progress.

Also applies to: 83-84, 1928-1941

---

311-323: Extended onFilteredDataUpdate callback and subcategory plumbing

Updating TorrentCardsMobileProps.onFilteredDataUpdate to include an optional trailing useSubcategories?: boolean and calling it with subcategoriesFromData keeps the runtime contract backward compatible while exposing the new flag to parents.

The combination:

• useSubcategories: subcategoriesFromData from useTorrentsList, and
• allowSubcategories = supportsSubcategories && (preferences?.use_subcategories ?? subcategoriesFromData ?? false)

is reasonable: parents see “server says subcategories are in play” via the callback, while dialogs gate on both capability and user preference. Just confirm that any existing onFilteredDataUpdate implementations have been updated to accept the new sixth argument in their TypeScript signatures (even if they ignore it), and that they indeed expect the raw backend state (subcategoriesFromData) rather than the UI‑gated allowSubcategories.

Also applies to: 1167-1175, 1190-1195, 1197-1203

---

1067-1071: Mobile Set Category dialog correctly honors preferences + capabilities

On mobile, you now:

• Read preferences from metadata,
• Derive supportsSubcategories from instance capabilities, and
• Compute allowSubcategories = supportsSubcategories && (preferences?.use_subcategories ?? subcategoriesFromData ?? false),

then pass useSubcategories={allowSubcategories} into SetCategoryDialog.

This matches the new type surface and should ensure the bottom‑sheet category picker shows indented subcategories only when both the backend and user settings permit it. Given this is the mobile analog of the desktop behavior, it would be good to smoke‑test that the mobile and desktop dialogs stay in sync when toggling the subcategory preference.

Also applies to: 1187-1195, 2148-2158

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

web/src/components/torrents/TorrentManagementBar.tsx (1)

93-113: Critical: Hook called after early return violates Rules of Hooks.

The early return at lines 93-95 causes useInstanceCapabilities (and other hooks below it) to be called conditionally. React requires hooks to be called in the same order on every render. When instanceId is invalid, the component returns early, but on subsequent renders with a valid instanceId, hooks will be called in a different order.

This can cause React to lose track of hook state, leading to bugs or crashes.

Move the guard logic after all hooks, or restructure to avoid conditional hook invocation:

 export const TorrentManagementBar = memo(function TorrentManagementBar({
   instanceId,
   selectedHashes = [],
   selectedTorrents = [],
   isAllSelected = false,
   totalSelectionCount = 0,
   totalSelectionSize = 0,
   filters,
   search,
   excludeHashes = [],
   onComplete,
 }: TorrentManagementBarProps) {
-  if (typeof instanceId !== "number" || instanceId <= 0) {
-    return null
-  }
+  const isValidInstanceId = typeof instanceId === "number" && instanceId > 0

   const selectionCount = totalSelectionCount || selectedHashes.length

   // Use shared metadata hook to leverage cache from table and filter sidebar
-  const { data: metadata, isLoading: isMetadataLoading } = useInstanceMetadata(instanceId)
+  const { data: metadata, isLoading: isMetadataLoading } = useInstanceMetadata(isValidInstanceId ? instanceId : 0)
   const availableTags = metadata?.tags || []
   const availableCategories = metadata?.categories || {}
   const preferences = metadata?.preferences

   const isLoadingTagsData = isMetadataLoading && availableTags.length === 0
   const isLoadingCategoriesData = isMetadataLoading && Object.keys(availableCategories).length === 0

   // Get capabilities to check subcategory support
-  const { data: capabilities } = useInstanceCapabilities(instanceId)
+  const { data: capabilities } = useInstanceCapabilities(isValidInstanceId ? instanceId : null)
   const supportsSubcategories = capabilities?.supportsSubcategories ?? false
   const allowSubcategories = Boolean(
     supportsSubcategories && (preferences?.use_subcategories ?? false)
   )

   // ... rest of hooks ...

+  // Keep this guard after hooks so their invocation order stays stable.
+  if (!isValidInstanceId) {
+    return null
+  }

Alternatively, use the enabled option in useInstanceCapabilities to disable the query when instanceId is invalid, ensuring all hooks are still called.

🧹 Nitpick comments (3)

web/src/components/torrents/TorrentDialogs.tsx (1)

31-31: Unused import: Torrent type is imported but not used in this file.

The Torrent type is imported alongside Category, but only Category is used in the SetCategoryDialogProps interface.

-import type { Category, Torrent } from "@/types"
+import type { Category } from "@/types"

web/src/components/torrents/TorrentCardsMobile.tsx (2)

1067-1071: Subcategory flags: consider unifying or documenting backendUseSubcategories vs allowSubcategories.

You now have two related booleans:

• backendUseSubcategories from useTorrentsList (data-layer view).
• allowSubcategories from capabilities + preferences?.use_subcategories, used for SetCategoryDialog.

If these are intended to represent the same “effective” behavior, it may be clearer to derive a single effectiveUseSubcategories and use it both for the callback and SetCategoryDialog. If they are intentionally different (e.g., backend vs. user-facing gating), a brief comment explaining the distinction would help future maintainers reason about when each should be used.

Also applies to: 1187-1193, 2148-2157

---

83-83: useCrossSeedFilter with optional onFilterChange: ensure the hook tolerates undefined.

onFilterChange is optional in props but is passed directly into useCrossSeedFilter. The button that calls filterCrossSeeds is already guarded behind onFilterChange && …, so the callback won’t be invoked without it, but the hook itself still sees onFilterChange (possibly undefined).

Confirm that useCrossSeedFilter handles a missing onFilterChange gracefully (e.g., checks before calling) rather than assuming it’s always defined. If not, consider either:

• Making onFilterChange required in TorrentCardsMobileProps, or
• Only calling useCrossSeedFilter when onFilterChange is present, or having the hook default to a no‑op when it’s not.

Also applies to: 1620-1623, 1927-1940

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cd3caaf and a5feb94.

📒 Files selected for processing (4)

• web/src/components/torrents/TorrentCardsMobile.tsx (7 hunks)
• web/src/components/torrents/TorrentDialogs.tsx (6 hunks)
• web/src/components/torrents/TorrentManagementBar.tsx (3 hunks)
• web/src/components/torrents/TorrentTableOptimized.tsx (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (2)

web/src/components/torrents/TorrentManagementBar.tsx (1)

web/src/hooks/useInstanceCapabilities.ts (1)

• useInstanceCapabilities (15-34)

web/src/components/torrents/TorrentCardsMobile.tsx (2)

web/src/types/index.ts (3)

• Torrent (172-229)
• TorrentCounts (259-265)
• Category (310-313)

internal/qbittorrent/sync_manager.go (1)

• TorrentCounts (1657-1663)

🪛 Biome (2.1.2)

web/src/components/torrents/TorrentManagementBar.tsx

[error] 109-109: This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.

Hooks should not be called after an early return.

For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

(lint/correctness/useHookAtTopLevel)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Run tests

🔇 Additional comments (8)

web/src/components/torrents/TorrentDialogs.tsx (3)

1106-1166: Well-structured category filtering with subcategory support.

The tree-building and filtering logic correctly handles:

• Caching via Map to avoid redundant recursive calls
• Inclusive filtering that shows parent nodes when children match the search query
• Proper flattening of the tree structure with level information for indentation

The fallback path for non-subcategory mode maintains backward compatibility.

---

1250-1264: Virtualized category rendering correctly applies hierarchical indentation.

The implementation properly:

• Uses category.name for selection and comparison
• Applies paddingLeft based on category.level for visual hierarchy
• Includes title attribute for accessibility on truncated names

---

1272-1288: Non-virtualized category rendering mirrors the virtualized path correctly.

Both rendering paths maintain consistent behavior for indentation and selection logic.

web/src/components/torrents/TorrentManagementBar.tsx (1)

670-670: Correct propagation of useSubcategories to SetCategoryDialog.

The allowSubcategories flag is correctly derived from both capability support and user preference, then passed to the dialog.

web/src/components/torrents/TorrentTableOptimized.tsx (3)

1000-1002: Correct derivation of allowSubcategories flag.

The logic correctly combines:

1. Backend capability support (supportsSubcategories)
2. User preference (preferences?.use_subcategories)
3. Fallback to data-driven flag (subcategoriesFromData)

This ensures subcategory features are only enabled when both supported and configured.

---

2510-2510: Consistent propagation of useSubcategories to TorrentContextMenu.

Both compact and normal view paths correctly pass allowSubcategories to the context menu, ensuring consistent subcategory behavior across view modes.

Also applies to: 2609-2609

---

2951-2951: SetCategoryDialog receives useSubcategories prop.

The dialog correctly receives allowSubcategories to enable hierarchical category display when supported.

web/src/components/torrents/TorrentCardsMobile.tsx (1)

311-323: Upstream types are properly updated across all components—no TypeScript signature mismatches.

Verification confirms that all related type definitions and implementations have already been updated to include the trailing optional useSubcategories parameter:

• TorrentTableResponsive.tsx (line 20): callback signature includes useSubcategories?: boolean ✓
• TorrentTableOptimized.tsx (line 601): callback signature includes useSubcategories?: boolean ✓
• TorrentTableOptimized.tsx (line 1120): passes nextUseSubcategories as the 6th argument ✓
• Torrents.tsx (line 101): handler handleFilteredDataUpdate accepts subcategoriesEnabled?: boolean ✓

The implementation is consistent and type-safe throughout. No updates are needed.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

web/src/components/torrents/TorrentCardsMobile.tsx (1)

1190-1195: Remove redundant Boolean() wrapper.

The expression supportsSubcategories && (preferences?.use_subcategories ?? subcategoriesFromData ?? false) already resolves to a boolean value. The outer Boolean() wrapper is unnecessary.

Apply this diff:

-  const allowSubcategories = Boolean(
-    supportsSubcategories && (preferences?.use_subcategories ?? subcategoriesFromData ?? false)
-  )
+  const allowSubcategories = supportsSubcategories && (preferences?.use_subcategories ?? subcategoriesFromData ?? false)

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 461c1d8 and 6c21aa6.

📒 Files selected for processing (1)

• web/src/components/torrents/TorrentCardsMobile.tsx (7 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

web/src/components/torrents/TorrentCardsMobile.tsx (2)

web/src/types/index.ts (3)

• Torrent (172-229)
• TorrentCounts (259-265)
• Category (310-313)

internal/qbittorrent/sync_manager.go (1)

• TorrentCounts (1657-1663)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Run tests

🔇 Additional comments (5)

web/src/components/torrents/TorrentCardsMobile.tsx (5)

60-60: LGTM - Missing imports added for existing functionality.

These imports support existing features (cross-seed filtering) that were already implemented but had missing imports. Good catch fixing these while updating the file.

Also applies to: 83-83

---

318-318: Callback signature correctly extended for subcategory support.

The useSubcategories parameter receives backend-derived subcategory state, which is appropriate for data filtering callbacks. This differs from the UI-level allowSubcategories (which combines backend capabilities with user preferences) that's passed to dialog components.

---

1070-1070: LGTM - Preferences extracted correctly.

Proper use of optional chaining to safely access preferences from instance metadata.

---

1198-1203: LGTM - Callback correctly invoked with backend subcategory state.

The effect properly passes subcategoriesFromData (backend state) to the callback and includes it in the dependency array. This ensures parent components receive data updates when subcategory configuration changes on the backend.

---

2158-2158: LGTM - Dialog correctly receives UI-level subcategory preference.

Passing allowSubcategories (which respects both backend capabilities and user preferences) enables SetCategoryDialog to render indented subcategories when appropriate. This aligns with the PR objective to fix subcategory indentation in the dialog.