feat(ui): build the packages view (task 29)

Merged
MP
6mo ago
+1937-7

Summary

Replaces the placeholder Packages view with a full tree-based package management UI. Implements all requirements from task 29: tree expand/collapse, inline rename, source-type filtering, auto-extract toggle, password masking, priority selection, folder browsing, and drag-and-drop between packages. Unblocks task 30 (auto-grouping) and completes P1.10 acceptance criteria.

Why

Task 27 and 28 delivered the command and query infrastructure for packages. This task builds the React UI to expose all functionality to users, replacing the placeholder with a complete feature set matching the PRD §6.3 requirements.

Changes

  • Add PackagesView root component managing filter state, search, dialog targets, and expanded package
  • Wire all 9 commands from task 27: package_create, package_update, package_set_password, package_set_priority, package_move_to_folder, package_toggle_auto_extract, package_delete, package_add_download, package_remove_download
  • Add PackageToolbar with source-type filter chips (all/container/playlist/manual/split-archive) and 300ms debounced search
  • Add PackageRow (expandable) displaying: name, source-type badge, file count with plural i18n, total bytes, progress bar, folder button, password trigger, auto-extract switch, priority 1-10 select, pause-all/start-all/delete buttons
  • Add PackageDownloadRow with native HTML5 draggable attribute and dataTransfer payloads
  • Implement drag-and-drop orchestration: drop chains package_remove_download + package_add_download on target package
  • Add bulk pause-all/start-all via Promise.allSettled over download_pause/download_resume
  • Add 5 dialog types: AddPackageDialog, RenamePackageDialog, PasswordDialog (masked input), FolderDialog (with tauri-plugin-dialog), DeletePackageDialog (with cascade checkbox)
  • New src/types/package.ts with PackageView, PackageSourceType enum, PackagePatch, CreatePackageInput
  • New src/hooks/usePackagesQuery.ts with usePackagesQuery and usePackageDownloadsQuery (TanStack Query v5, 30s/10s staleTime)
  • Add packageQueries cache key factory to src/api/queries.ts
  • EN + FR i18n namespace with ~60 keys covering toolbar, rows, dialogs, bulk actions, drag-drop, toasts (success/error variants)
  • 16 comprehensive Vitest tests covering: empty state, expand/load children, filter chips, debounced search, create/rename/delete dialogs, toggle auto-extract, set priority, set password, change folder, drag-and-drop, bulk actions, error state
  • Update CHANGELOG.md with detailed feature entry

Testing

Verified locally:

  • All 16 Vitest tests pass: npx vitest run → 622/622 total suite green
  • TypeScript strict mode: tsc --noEmit → exit 0
  • oxlint compliance: npx oxlint . → 0 warnings, 0 errors across 245 files
  • Coverage on PackagesView directory: 87.28% statements / 90.07% lines (exceeds 80% threshold)
  • All acceptance criteria validated: tree expand/collapse smooth, auto-extract toggle persists, password dialog masks + keyring, drag-download FK update, coverage ≥80%, prop drilling ≤2 levels

Related Issues

  • Refs vortex-qa (phase 1 milestone)

Checklist

  • Tests added/updated and passing locally
  • Docs updated (CHANGELOG.md)
  • No secrets, debug prints, or commented-out code
  • Self-reviewed the diff
  • TypeScript strict mode passing
  • oxlint green

Summary by cubic

Replaces the placeholder Packages view with a full tree-based package management UI that completes Task 29. Users can filter, edit, drag-and-drop, and run bulk actions with EN/FR i18n and tests.

  • New Features

    • PackagesView with expand/collapse rows, aggregated progress, and a toolbar.
    • Source-type filter chips and 300 ms debounced search sent to package_list.
    • Edit actions: inline rename, masked password dialog, folder picker, auto-extract toggle, 1–10 priority; bulk Pause/Start.
    • Native drag-and-drop moves downloads between packages by chaining package_remove_download + package_add_download.
    • Data layer: usePackagesQuery/usePackageDownloadsQuery on @tanstack/react-query v5 with packageQueries; EN/FR packages.* translations; 16 Vitest tests.

  • Bug Fixes

    • Block no-op folder moves and rename submissions by trimming both sides.
    • Show partial outcomes from package_move_to_folder via packages.toast.movePartialError (EN/FR).
    • Drag-and-drop: compensate if package_add_download fails after removal; show a dedicated rollback error; handle empty dataTransfer.getData() and clear stale drag refs on onDragEnd.
    • Align source type wire format to split_archive across filters, dialogs, and tests.
    • Invalidate downloadQueries.all() after package_set_priority so Downloads refresh immediately.
    • After bulk Pause/Start, also invalidate packageQueries.all() so expanded package downloads refresh immediately.
    • Clear the expanded package when it’s deleted to avoid a stale child query.
    • Trim folder paths sent from Add/Folder dialogs (still trim only to detect empty input) to avoid invalid paths with edge whitespace.

Summary by CodeRabbit

  • New Features

    • Full Packages management UI with list/detail views, per-package downloads (progress/ETA), drag‑and‑drop transfer, create/rename/password/move/delete dialogs, priority/auto‑extract controls, pause/start (including bulk) and toasts; client-side query hooks and typed APIs for package data.

  • i18n

    • Added English and French translations for the Packages UX, dialogs, accessibility labels, and toast messages.

  • Tests

    • Comprehensive UI tests covering listing, dialogs, actions, drag/drop, bulk actions, and error states.

  • Documentation

    • Changelog updated with detailed unreleased release notes.