feat(web): compact torrent details panel

[martylukyy]

This PR compacts the view of the torrent details panel.
The name has been moved into the grid of the panel and the close button into the div of the tabs.
A lot of whitespace has been removed by moving the
name, (temp) save path, hashes, created by and comment to the top in a 2 column grid.

Disclaimer: This PR has been created with the help of Ai.

Old:

New:

Summary by CodeRabbit

Release Notes

• UI/UX Improvements
  • Reorganized torrent details panel layout with improved information hierarchy and structured rows
  • Moved close button from header to tab bar for better accessibility
  • Enhanced copy-to-clipboard controls with improved affordances across torrent information fields
  • Improved spacing and alignment consistency throughout details view

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

[coderabbitai]

Walkthrough

The torrent details panel header is restructured, moving the display name and close button from a separate header block into the tabs region. The GeneralTabHorizontal component is reorganized with a new displayName prop, consolidated rows for additional information, and improved layout consistency.

Changes

Cohort / File(s)	Change Summary
Header and close button restructuring web/src/components/torrents/TorrentDetailsPanel.tsx	Removed top header displaying torrent displayName and optional close button; added close button inside TabsList when onClose is provided; propagated displayName to GeneralTabHorizontal and general content rendering.
General tab layout reorganization web/src/components/torrents/details/GeneralTabHorizontal.tsx	Added optional displayName prop to GeneralTabHorizontalProps; restructured layout into new rows: Name (optional), Save Path, Temp Path, Hash values, Additional Info, and Transfer/Speed/Network/Time statistics; updated copy-to-clipboard affordances with smaller button/icon sizes; consolidated separators.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Verify close button behavior and placement in tabs region functions correctly
• Check that displayName propagation and optional rendering in GeneralTabHorizontal works as intended
• Validate layout alignment, spacing consistency, and visual appearance across the restructured rows
• Confirm copy-to-clipboard functionality is preserved for all applicable fields

Possibly related PRs

• feat(web): new torrent details panel for desktop #760: Direct modifications to the same components (TorrentDetailsPanel.tsx and GeneralTabHorizontal.tsx) with related layout/header changes.
• feat(web): add copy button to torrent name in DetailsPanel #529: Related to torrent name and copy-button UI handling in the panel header.
• fix(web): restore piece size display in torrent details panel #790: Modifies GeneralTabHorizontal.tsx with layout changes to the display rows.

Suggested labels

enhancement, torrent

Suggested reviewers

• s0up4200

Poem

🐰 The header takes a bow, steps aside with grace,
The close button finds a new, tidy place—
In tabs it dwells, while names now proudly show,
Rows realigned, the data gleams below! ✨

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 pull request title 'feat(web): compact torrent details panel' directly and concisely describes the main change—compacting the torrent details panel by reorganizing its layout and moving elements into a grid structure.
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
• Commit unit tests in branch compact-torrent-details-panel

---

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

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

712-722: Close button integration looks good, but consider touch target size.

The close button is well-integrated into the tab bar with proper conditional rendering and accessibility labeling. However, the button height (h-5 = 20px) is below the recommended minimum touch target size of 44×44px for mobile devices. Consider increasing to h-8 w-8 or adding padding to improve tap accuracy on touch screens.

🔎 Proposed fix for touch target sizing

           {onClose && (
             <Button
               variant="ghost"
               size="icon"
-              className="h-5 w-10 shrink-0"
+              className="h-8 w-8 shrink-0 ml-auto"
               onClick={onClose}
               aria-label="Close details panel"
             >
-              <X className="h-3 w-3" />
+              <X className="h-4 w-4" />
             </Button>
           )}

web/src/components/torrents/details/GeneralTabHorizontal.tsx (2)

96-135: Compact layout achieved, but consider accessibility improvements.

The new row-based layout successfully compacts the interface. However, there are accessibility concerns:

1. Touch target size: Copy buttons at h-5 w-5 (20px) are below the recommended 44px minimum for touch devices, making them difficult to tap on mobile.
2. Fixed row height: The h-5 constraint might cause text clipping when users increase font size for accessibility.

Consider making the row height flexible (remove h-5) and increasing button sizes to at least h-8 w-8 for better touch accessibility.

🔎 Proposed accessibility improvements

-        <div className="flex gap-6 h-5">
+        <div className="flex gap-6 min-h-5 items-center">
           {displayName && (
             <div className="flex items-center gap-2 flex-1">
               <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground shrink-0 w-20">
                 Name:
               </span>
               <code className="text-xs font-mono text-muted-foreground truncate" title={displayName}>
                 {displayName}
               </code>
               <Button
                 variant="ghost"
                 size="icon"
-                className="h-5 w-5 shrink-0"
+                className="h-8 w-8 shrink-0"
                 onClick={() => copyToClipboard(displayName, "Torrent name")}
               >
                 <Copy className="h-4 w-4" />
               </Button>
             </div>
           )}
           <div className="flex items-center gap-2 flex-1">
             <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground shrink-0 w-20">
               Save Path:
             </span>
             <code className="text-xs font-mono text-muted-foreground truncate">
               {displaySavePath || "N/A"}
             </code>
             {displaySavePath && (
               <Button
                 variant="ghost"
                 size="icon"
-                className="h-5 w-5 shrink-0"
+                className="h-8 w-8 shrink-0"
                 onClick={() => copyToClipboard(displaySavePath, "Save path")}
               >
                 <Copy className="h-4 w-4" />
               </Button>
             )}
           </div>
         </div>

Apply similar changes to other rows.

---

139-157: Consider a more semantic alignment approach.

The empty <div className="flex-1" /> on line 140 is used to maintain alignment when displayName is present. While functional, a more semantic approach would be to use a consistent grid layout for all rows.

🔎 Alternative grid-based approach

-        {tempPathEnabled && displayTempPath && (
-          <div className="flex gap-6 h-5">
-            {displayName && <div className="flex-1" />}
-            <div className="flex items-center gap-2 flex-1">
+        {tempPathEnabled && displayTempPath && (
+          <div className={`grid gap-6 h-5 ${displayName ? 'grid-cols-2' : 'grid-cols-1'}`}>
+            {displayName && <div />}
+            <div className="flex items-center gap-2">
               <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground shrink-0 w-20">
                 Temp Path:
               </span>

This makes the layout structure more explicit.

📜 Review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e9fcbda and c35f3c5.

📒 Files selected for processing (2)

• web/src/components/torrents/TorrentDetailsPanel.tsx (2 hunks)
• web/src/components/torrents/details/GeneralTabHorizontal.tsx (7 hunks)

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

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.

📚 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/details/GeneralTabHorizontal.tsx
• web/src/components/torrents/TorrentDetailsPanel.tsx

🧬 Code graph analysis (2)

web/src/components/torrents/details/GeneralTabHorizontal.tsx (3)

web/src/components/ui/button.tsx (1)

• Button (64-64)

web/src/lib/linkUtils.tsx (1)

• renderTextWithLinks (17-53)

web/src/components/ui/separator.tsx (1)

• Separator (33-33)

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

web/src/components/ui/button.tsx (1)

• Button (64-64)

web/src/components/ui/tabs.tsx (1)

• TabsList (69-69)

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

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

736-736: LGTM!

The displayName prop is correctly passed to GeneralTabHorizontal, enabling the torrent name to be displayed in the compact horizontal layout while respecting incognito mode.

web/src/components/torrents/details/GeneralTabHorizontal.tsx (3)

26-26: LGTM!

The displayName prop is properly added to the interface as optional and correctly destructured. This enables the compact layout to display the torrent name inline.

Also applies to: 47-47

---

201-225: LGTM!

The Additional Info row properly handles conditional rendering and uses renderTextWithLinks to make URLs clickable. The title attribute provides full text on hover when content is truncated, which is good for UX.

---

227-303: Excellent stats grid organization.

The new stats grid layout is well-structured with clear sections (Transfer, Speed, Network, Time) and responsive breakpoints. The consistent use of StatRow components and semantic section headers makes the code maintainable and the UI scannable.

[s0up4200]

👍