Skip to content

refactor: unify upload UX across GameDetails subtabs#3570

Merged
zurdi15 merged 7 commits into
masterfrom
chore/extract-files-layout
Jun 21, 2026
Merged

refactor: unify upload UX across GameDetails subtabs#3570
zurdi15 merged 7 commits into
masterfrom
chore/extract-files-layout

Conversation

@zurdi15

@zurdi15 zurdi15 commented Jun 21, 2026

Copy link
Copy Markdown
Member

Description
Explain the changes or enhancements you are proposing with this pull request.

Stacked on top of #3569. Aligns every upload affordance in the GameDetails view with the layout pioneered by ScreenshotsSubtab: the sidebar becomes navigation-only and each panel grows a section header at the top whose right-hand cluster hosts the contextual actions (Upload, mainly).

Touched subtabs:

  • SaveDataTab (Saves + States) — Upload moved into each Mine section header. Sidebar drops the RCollapsible action panel.
  • MediaTab Manual — sidebar action panel removed. Header keeps the entry selector (when 2+ manuals coexist) + Upload only. Delete and Redownload migrate into the PDF viewer's toolbar via new PdfViewer props (deletable, redownloadable, redownloading) and emits (delete, redownload) — they read as one action cluster next to Download.
  • MediaTab Soundtrack — header with just Upload; same sidebar cleanup.
  • MediaTab subtab order — Screenshots now sits above Soundtrack (Manual → Screenshots → Soundtrack).
  • FilesTab — sidebar action panel gone. Header keeps Upload only (the previous Download all / Copy link are reachable via select-all + the existing selection toolbar). The disabled-with-tooltip Upload behaviour for non-manual/soundtrack folders is preserved.
  • ScreenshotsSubtab + SaveDataTab — drop the redundant "Private to you until you make them public" subtitle and its 17-locale key (screenshots-section-mine-desc).

Entrance animation:

  • New r-v2-asset-fade CSS (320ms, 14px rise + fade, no scale, no overshoot, 24ms stagger) sits next to the existing r-v2-card-fade so dense info rows have their own visual vocabulary distinct from hero cards.
  • Applied to AssetList rows, AssetStrip tiles, FileRow, screenshot thumbnails, and soundtrack track rows.

Checklist
Please check all that apply.

  • I've tested the changes locally
  • I've updated relevant comments
  • I've assigned reviewers for this PR
  • I've added unit tests that cover the changes

Screenshots (if applicable)

🤖 Generated with Claude Code

zurdi15 and others added 6 commits June 21, 2026 14:00
…ections

- Introduced new API endpoints for updating visibility of saves and states.
- Added `is_public` property to `SaveSchema` and `StateSchema`.
- Created new models for user saves and states with visibility attributes.
- Updated the `SaveDataTab` component to differentiate between "Mine" and "Community" sections.
- Implemented visibility toggle functionality for user saves and states.
- Enhanced localization files to include new strings for visibility actions.
…states

- Introduced AssetList.vue for displaying a vertical list of saves with detailed information.
- Added AssetStrip.vue for a horizontal strip of state tiles, supporting selection and management modes.
- Created stories for AssetStrip to demonstrate various states and scenarios.
- Enhanced RSliderBtnGroup to include a badge for displaying counts next to labels.
- Updated EmulatorJS.vue to utilize the new AssetList and AssetStrip components, including badge counts for saves and states.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Notes already paints the lock button primary when private and muted when
public; bring screenshots and the new saves/states toggles to the same
binding so the three visibility surfaces read consistently.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* i18n `rom.cant-toggle-visibility` is interpolated with `{error}` in
  SaveDataTab but the strings dropped the placeholder, hiding the
  backend error detail from the snackbar. Add `{error}` to every locale
  (en_US source + es_ES translated, others English placeholder).
* `RSliderBtnGroup` badge visibility check did not handle the string
  `"0"` / `""` cases allowed by the `string | number | null` type.
  Extract a `showBadge` helper and use it in both the router-link and
  RBtn branches.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Move every upload affordance out of the sidebar's collapsible action
panel into a section header at the top of each panel, matching
ScreenshotsSubtab. Sidebars become navigation-only.

Touched subtabs:
- SaveDataTab (Saves + States) — Upload per Mine section header.
- MediaTab Manual — header hosts the entry selector + Upload only;
  Delete + Redownload move into the PDF viewer's toolbar via new
  PdfViewer `deletable` / `redownloadable` props.
- MediaTab Soundtrack — header with just Upload.
- MediaTab — reorder subtabs so Screenshots sits above Soundtrack.
- FilesTab — header with Upload only (Download all / Copy link
  dropped; equivalent via select-all + selection toolbar).
- ScreenshotsSubtab + SaveDataTab — drop the redundant "Private to
  you until you make them public" subtitle and i18n keys.

Add a distinct entrance animation for dense, data-row content:
`r-v2-asset-fade` (fade + 14px rise, no scale, no overshoot, 320ms,
24ms stagger). Applied to AssetList / AssetStrip rows, FileRow,
screenshot thumbnails and soundtrack track rows so they cascade in
on first paint, separate from the bouncier `r-v2-card-fade` reserved
for hero cards.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings June 21, 2026 17:25
@zurdi15 zurdi15 self-assigned this Jun 21, 2026

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Refactors the v2 GameDetails “upload” experience so contextual actions live in each panel’s section header (sidebar becomes navigation-only), and introduces a lighter-weight “asset row/tile” entrance animation distinct from the existing card reveal.

Changes:

  • Added r-v2-asset-fade global animation and applied it across asset rows/tiles (lists, strips, file rows, screenshots, soundtrack rows).
  • Migrated multiple GameDetails subtabs (SaveData, Media, Files) away from sidebar action panels to header-based actions; reordered Media subtabs (Manual → Screenshots → Soundtrack).
  • Extended PdfViewer with optional delete / redownload controls so manual actions can live in the viewer toolbar.

Reviewed changes

Copilot reviewed 28 out of 28 changed files in this pull request and generated 5 comments.

Show a summary per file
File Description
frontend/src/v2/styles/global.css Adds the new r-v2-asset-fade animation and reduced-motion variant.
frontend/src/v2/components/shared/AssetStrip.vue Applies r-v2-asset-fade with stagger index to strip tiles.
frontend/src/v2/components/shared/AssetList.vue Applies r-v2-asset-fade with stagger index to list rows.
frontend/src/v2/components/GameDetails/SoundtrackPanel.vue Animates soundtrack track rows via r-v2-asset-fade.
frontend/src/v2/components/GameDetails/ScreenshotsTab.vue Animates screenshot thumbnail cells via r-v2-asset-fade.
frontend/src/v2/components/GameDetails/ScreenshotsSubtab.vue Removes the “mine” subtitle line using the deleted locale key.
frontend/src/v2/components/GameDetails/SaveDataTab.vue Removes sidebar action panel; moves Upload into Mine section headers for Saves/States.
frontend/src/v2/components/GameDetails/PdfViewer.vue Adds optional deletable / redownloadable / redownloading props and emits for toolbar actions.
frontend/src/v2/components/GameDetails/MediaTab.vue Removes sidebar action panel; introduces per-panel headers; reorders subtabs; wires PdfViewer delete/redownload.
frontend/src/v2/components/GameDetails/FilesTab/FilesTab.vue Removes sidebar action panel; adds header Upload (with existing disabled+tooltip behavior) and animates FileRow items.
frontend/src/v2/components/GameDetails/FilesTab/FileRow.vue Forwards $attrs onto the root <li> so parent-provided animation class/style can apply.
frontend/src/locales/zh_TW/rom.json Removes screenshots-section-mine-desc translation key.
frontend/src/locales/zh_CN/rom.json Removes screenshots-section-mine-desc translation key.
frontend/src/locales/ru_RU/rom.json Removes screenshots-section-mine-desc translation key.
frontend/src/locales/ro_RO/rom.json Removes screenshots-section-mine-desc translation key.
frontend/src/locales/pt_BR/rom.json Removes screenshots-section-mine-desc translation key.
frontend/src/locales/pl_PL/rom.json Removes screenshots-section-mine-desc translation key.
frontend/src/locales/ko_KR/rom.json Removes screenshots-section-mine-desc translation key.
frontend/src/locales/ja_JP/rom.json Removes screenshots-section-mine-desc translation key.
frontend/src/locales/it_IT/rom.json Removes screenshots-section-mine-desc translation key.
frontend/src/locales/hu_HU/rom.json Removes screenshots-section-mine-desc translation key.
frontend/src/locales/fr_FR/rom.json Removes screenshots-section-mine-desc translation key.
frontend/src/locales/es_ES/rom.json Removes screenshots-section-mine-desc translation key.
frontend/src/locales/en_US/rom.json Removes screenshots-section-mine-desc translation key.
frontend/src/locales/en_GB/rom.json Removes screenshots-section-mine-desc translation key.
frontend/src/locales/de_DE/rom.json Removes screenshots-section-mine-desc translation key.
frontend/src/locales/cs_CZ/rom.json Removes screenshots-section-mine-desc translation key.
frontend/src/locales/bg_BG/rom.json Removes screenshots-section-mine-desc translation key.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread frontend/src/v2/styles/global.css Outdated
Comment thread frontend/src/v2/components/GameDetails/SaveDataTab.vue Outdated
Comment thread frontend/src/v2/components/GameDetails/FilesTab/FilesTab.vue Outdated
Comment thread frontend/src/v2/components/GameDetails/FilesTab/FilesTab.vue
Comment thread frontend/src/v2/components/GameDetails/FilesTab/FilesTab.vue Outdated
Refresh stale doc comments that didn't keep pace with the refactor:

- `global.css` r-v2-asset-fade — list AssetList / AssetStrip / FileRow
  / ScreenshotsTab / SoundtrackPanel as the consumers (was: just
  AssetList / AssetStrip).
- `SaveDataTab.vue` section-head comment — drop the "subtitle" mention
  (subtitle was removed in this PR).
- `FilesTab.vue` file header — section header now hosts Upload only;
  Download-all / Copy-link moved to the selection toolbar (select-all
  then act). Updated the file-level summary and the content-column
  bullet list to match.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Base automatically changed from feat/share-savestates to master June 21, 2026 19:18
@zurdi15
zurdi15 merged commit dbc6139 into master Jun 21, 2026
3 checks passed
@zurdi15
zurdi15 deleted the chore/extract-files-layout branch June 21, 2026 19:21
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.

3 participants