Skip to content

Compact Transfers table and collapsible history - #132

Open
Sectumsempra82 wants to merge 2 commits into
rclone:mainfrom
Sectumsempra82:transfers-ui
Open

Sectumsempra82 wants to merge 2 commits into
rclone:mainfrom
Sectumsempra82:transfers-ui

Conversation

@Sectumsempra82

Copy link
Copy Markdown

The Transfers table currently needs horizontal scrolling even on a 1440px desktop, while tall rows make busy transfer lists difficult to scan. This PR makes the table compact and lets users hide finished history while continuing to watch active transfers.

Changes

  • Reduce minimum table width from 1664px to 1156px, with compact rows, badges, progress bars, and Stop buttons.
  • Shorten long paths in the middle: preserve a beginning fragment and the full filename when it fits, otherwise the filename ending. Retain the complete text on hover and for screen readers; recalculate when the available width changes.
  • Add a keyboard-operable activity toggle and active/finished counts. History starts expanded; collapsing it keeps running transfers visible, including during polling updates.
  • Preserve running → failed → completed priority, sorting finished entries newest first within each status by file completion time. Missing or invalid timestamps follow dated entries.
  • Stack the Transfers title and actions on narrow screens. The table keeps its own horizontal scrolling.

The change uses the existing static frontend and official rclone gui launch flow. It introduces no dependencies, queue service, deployment changes, or app-wide restyling. Transfer submission, cancellation, and progress calculations remain unchanged. Three new labels use the existing English translation fallback.

Validation

  • npm run build — passed.
  • npx biome ci . — passed with LF checkout line endings, as used by Linux CI.
  • All 5 Playwright tests passed against the production build served by official rclone v1.75.1, with an isolated rclone config. The local test configuration selected installed Chrome and disabled server reuse; the committed tests run under the existing Playwright configuration.
  • Added coverage for status/date ordering, invalid timestamps, correct Stop job ID, keyboard toggle, active-to-finished polling, retained filename endings, resizing, and a 390px viewport without page overflow.

To reproduce using the existing setup: install rclone and Playwright Chromium, then run npm test.

Screenshots

Same synthetic transfer data in both builds; desktop viewport 1440×900. Images are hosted in the fork on a separate review tag and are not part of this code diff.

Before

Before: wide transfer table

After

After: compact table and readable filename endings

Collapsed history and mobile views

Collapsed history keeps active transfers visible

Before (390px) After (390px)
Before on mobile After on mobile

Reduce table and cell dimensions so progress, speed, ETA, and Stop fit on typical desktop widths. Shorten long paths in the middle using the available width, retaining complete filenames where possible and full text for hover and screen readers.
Show active and finished counts with a keyboard-operable history toggle, and keep running transfers visible during polling. Preserve existing status priority while ordering finished files by completion time. Stack page actions on narrow screens.

Add browser coverage for ordering, invalid timestamps, cancellation job IDs, keyboard interaction, polling transitions, compact long-path labels, resizing, and mobile overflow. Production build, full Biome validation, and all five Playwright tests pass against official rclone v1.75.1.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant