feat(web): Torrent list details bar shows free space

[finevan]

This addresses #676

Summary by CodeRabbit

• New Features
  • Added a free disk space indicator in the torrent table header/footer showing available storage with a hard drive icon and a "Free Space" tooltip.
• Bug Fixes
  • External IPv4/IPv6 addresses now reflect the computed server state so displayed addresses match the current server status.

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

[coderabbitai]

Walkthrough

Replaces serverState with effectiveServerState for rendering external IPv4/IPv6 addresses and adds a conditional "Free Space" indicator (HardDrive icon + formatted bytes in a Tooltip labeled "Free Space") shown when effectiveServerState.free_space_on_disk is defined and > 0.

Changes

Cohort / File(s)	Change Summary
TorrentTable UI updates web/src/components/torrents/TorrentTableOptimized.tsx	Uses effectiveServerState instead of serverState when displaying External IPs (IPv4/IPv6). Adds conditional rendering of a Free Space indicator in header/footer: HardDrive icon, formatted byte value, wrapped in a Tooltip labeled "Free Space" when effectiveServerState.free_space_on_disk is defined and > 0.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Verify all serverState → effectiveServerState replacements cover UI uses and don't leave inconsistent references.
• Check conditional rendering, Tooltip text, and icon sizing/spacing for alignment with existing UI patterns.

Possibly related PRs

• feat(web): streamline torrent footer controls #522 — Related changes to TorrentTableOptimized.tsx affecting external IP rendering and footer/status area.

Suggested labels

enhancement, web, torrent

Poem

🐰 I hopped through JSX, neatly and spry,

A tiny drive icon caught my eye,
Bytes now shown where space was unseen,
Effective state makes the view clean,
Nibble, hop—UI bright as pie! 🥕

Pre-merge checks and finishing touches

✅ Passed checks (3 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 change: adding a free space indicator to the torrent list details bar, which aligns with the summary of changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 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 806039a and f77ce04.

📒 Files selected for processing (1)

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

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

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

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{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)

2808-2819: Consider basing free-space badge on effectiveServerState and a stricter numeric guard

The free-space indicator works, but you may want to:

• Read from effectiveServerState?.free_space_on_disk instead of serverState so the badge doesn’t flicker/disappear when serverState is temporarily undefined, matching how alt-speed and connection status use the memoized state.
• Guard on typeof freeSpace === "number" (and optionally allow 0 if you want to show “0 B” when the disk is full) for clearer intent.

This is a behavioral polish; current implementation is functionally safe.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 85fd74b and 68f89b5.

📒 Files selected for processing (1)

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

🧰 Additional context used

🧠 Learnings (1)

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

Learnt from: finevan
Repo: autobrr/qui PR: 677
File: web/src/components/torrents/AddTorrentDialog.tsx:496-504
Timestamp: 2025-12-03T18:11:08.659Z
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

🧬 Code graph analysis (1)

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

web/src/components/ui/tooltip.tsx (3)

• Tooltip (184-184)
• TooltipTrigger (184-184)
• TooltipContent (184-184)

web/src/lib/utils.ts (1)

• formatBytes (13-19)

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

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

97-118: Icon import for free-space badge is consistent

Adding the HardDrive icon alongside the other status-bar icons is consistent with existing usage; no issues here.

[s0up4200]

Should we place it here instead? 🤔 That way it wont get pushed around by varying upload/dowload speeds 👍

[finevan]

I like it -- I'm more of a backend dev and admittedly don't have much UI sense :-)

Updated!

[s0up4200]

Perfect!