feat(web): add zebra striping to torrent table

[s0up4200]

Closes #584

Summary by CodeRabbit

• Style
  • Added zebra striping to torrent table rows for improved visual tracking and readability.
  • Unified hover, selection, and compact-view backgrounds so rows display consistent highlighting across the table.
  • Ensured background behavior is consistent between compact and regular row layouts for a cleaner, more predictable UI.

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

[coderabbitai]

Walkthrough

Added a rowIndex prop to CompactRow, passed it through render sites, introduced getRowBackgroundClass(isRowSelected, isSelected, rowIndex) for alternating row backgrounds, and included rowIndex in the CompactRow memo comparator.

Changes

Cohort / File(s)	Summary
Torrent table zebra striping web/src/components/torrents/TorrentTableOptimized.tsx	Added rowIndex: number to CompactRowProps; threaded rowIndex into CompactRow usages; introduced getRowBackgroundClass(isRowSelected, isSelected, rowIndex) and replaced inline background logic; updated CompactRow memo comparator to include rowIndex; minor import reorder.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Review CompactRow prop addition and memo comparator change.
• Verify rowIndex is passed at all render sites and striping/hover classes behave as intended.

Possibly related PRs

• feat(torrents): add alternative layout to table #520 — Related changes adding alternating row colours / CompactRow modifications.
• feat(torrents): add progress background to stacked view #562 — Modifies the same CompactRow implementation and rendering/background behavior.

Suggested labels

cosmetic

Poem

🐇
I hop along each numbered line,
Painting stripes both soft and fine.
Rows in order, bright and neat,
Every torrent finds its seat.
Hooray — the table looks complete.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% 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 accurately describes the main feature being added: zebra striping to improve row tracking in the torrent table.
Linked Issues check	✅ Passed	The code adds zebra striping via getRowBackgroundClass and rowIndex prop to CompactRow, implementing alternating row colors requested in issue #584.
Out of Scope Changes check	✅ Passed	All changes are scoped to implementing zebra striping in TorrentTableOptimized with no unrelated modifications detected.

✨ 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 feat/torrent-table-zebra-stripes

---

📜 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 42e798d and 6e958c9.

📒 Files selected for processing (1)

• web/src/components/torrents/TorrentTableOptimized.tsx (8 hunks)

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

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

⏰ 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

---

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

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

2668-2676: Unify background decision logic for compact and normal rows (optional)

The non‑compact row now duplicates the background precedence logic inline (selected row > current torrent > zebra via virtualRow.index % 2). This matches the compact view, but the two branches could drift over time.

Consider extracting a small helper (or reusing cn) to compute the background class from { isRowSelected, isSelected, index } once and use it in both compact and normal layouts. That would keep behavior identical and slightly simplify this long template string.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 59884a9 and 80eac94.

📒 Files selected for processing (1)

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

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-12-03T18:11:08.682Z

Learnt from: finevan
Repo: autobrr/qui PR: 677
File: web/src/components/torrents/AddTorrentDialog.tsx:496-504
Timestamp: 2025-12-03T18:11:08.682Z
Learning: In the AddTorrentDialog component (web/src/components/torrents/AddTorrentDialog.tsx), temporary path settings (useDownloadPath/downloadPath) should be applied per-torrent rather than updating global instance preferences. The UI/UX is designed to suggest that these options apply to the individual torrent being added.

Applied to files:

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

⏰ 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 (3)

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

119-121: DeleteTorrentDialog import relocation looks good

Importing DeleteTorrentDialog alongside AddTorrentDialog from the same local directory keeps related dialogs co-located and doesn’t change behavior.

---

365-420: rowIndex prop + memo comparator correctly support zebra striping

Threading rowIndex: number through CompactRowProps, using it only for the non‑selected zebra background, and adding it to the memo comparator ensures:

• Stripe color follows the row’s actual position (including resorting/filtering).
• Selected and “current” rows still override stripes via isRowSelected / isSelected.

No functional issues here; this integrates cleanly with virtualization and memoization.

Also applies to: 532-555

---

2567-2570: Passing virtualRow.index into CompactRow is consistent with virtualization

Using rowIndex={virtualRow.index} at the CompactRow call site keeps the compact view’s zebra striping aligned with the same index basis used in the non‑compact view and with TanStack Virtual’s item indexing. Looks correct and stable with progressive loading.