refactor: unify upload UX across GameDetails subtabs#3570
Merged
Conversation
…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>
Contributor
There was a problem hiding this comment.
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-fadeglobal 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
PdfViewerwith 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.
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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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:
RCollapsibleaction panel.PdfViewerprops (deletable,redownloadable,redownloading) and emits (delete,redownload) — they read as one action cluster next to Download.screenshots-section-mine-desc).Entrance animation:
r-v2-asset-fadeCSS (320ms, 14px rise + fade, no scale, no overshoot, 24ms stagger) sits next to the existingr-v2-card-fadeso dense info rows have their own visual vocabulary distinct from hero cards.AssetListrows,AssetStriptiles,FileRow, screenshot thumbnails, and soundtrack track rows.Checklist
Please check all that apply.
Screenshots (if applicable)
🤖 Generated with Claude Code