Frontend migration to the new visual language#3436
Open
zurdi15 wants to merge 256 commits into
Open
Conversation
…ndtrackMiniPlayer
…for soundtrack and manual entries
Bring in manual/soundtrack backend + shared frontend code so v2 can expose the new media features. Resolved RomM.vue by keeping both the v2 gate and the app-wide SoundtrackMiniPlayer; took the branch's uv.lock.
…ton styles feat: add PlatformsIndex.vue for displaying a grid of platforms with loading skeletons fix: update bcrypt version to 4.0.1 and adjust dependencies in uv.lock
… and usability - Introduced AuthCard component to standardize the layout of authentication views. - Added AuthBackLink component for consistent navigation back to the login page. - Replaced password input fields in Login, Register, and ResetPassword views with PasswordField component for better encapsulation of show/hide functionality. - Removed GameContextMenu component and related context menu logic, transitioning to MoreMenu for per-ROM actions. - Updated AppLayout and AuthLayout to utilize useThemeClass for theme management. - Cleaned up unused variables and styles across various components to enhance maintainability.
…ndex and PlatformsIndex to use new components
…brary management, metadata sources, server stats, user interface, and user profile - Implemented Administration view with UsersTable, TokensTable, and Tasks components. - Created ClientApiTokens view with ClientTokensTable component. - Developed LibraryManagement view with tabs for FolderMappings, Excluded, and MissingGames. - Added MetadataSources view displaying API key and connection status for various metadata providers. - Introduced ServerStats view for displaying library-wide totals and per-platform breakdowns. - Established UserInterface view for toggling between v1 and v2 UI versions, theme selection, and language settings. - Rewrote UserProfile view for managing account details, avatar, and linked services, integrating RetroAchievements component.
…ialog functionality
…ss collection components
… scrollbar color in RDialog
- Implemented RSliderBtnGroup as a segmented/tab control with a sliding indicator. - Created stories for different variants: Segmented, Tab, and Disabled. - Added types for SliderBtnGroupItem to define item structure. - Introduced RSpinner component for inline loading states with stories. - Developed RList and RListItem components with stories for list display. - Created RToolbar component for toolbar layout with customizable properties. - Added RTooltip component for tooltips with various activator patterns. - Updated imports in EmulatorJS and LibraryManagement views to reflect new component paths.
…m styling Co-authored-by: Copilot <copilot@github.com>
…rd, PlatformTile, and GameList components
…meCard and useGameActions Co-authored-by: Copilot <copilot@github.com>
Add Vitest 4 with happy-dom, @vue/test-utils, and a single test/storybook.test.ts that auto-discovers every story under src/v2/lib and runs its play() via composeStories — no Playwright, just composition-based interaction tests. 89 stories now smoke-pass in CI. Scripts: lint:fix (auto-fix), lint (now scoped to ./src/v2; v1 is frozen), lint:all (legacy sweep), test, test:watch, test:ui, storybook:test. eslint.config.js gets argsIgnorePattern: "^_" so unused-by-design parameters can use the underscore convention. CI: new frontend.yml runs lint, test, build in parallel on frontend/** changes; typecheck.yml bumped to Node 22 with cached npm ci. Existing typecheck job preserved for branch protection. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Drop unused imports (RTooltip in MetadataProviderChips, BackBtn in GameDetails). Add aria-label to NotesTab textarea and proper for/id pairing to its public-toggle checkbox label. Mark Home's favoriteRoms with eslint-disable-next-line (false positive: used in <template> but @typescript-eslint/no-unused-vars with projectService doesn't see Vue templates). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
scripts/build-tokens.ts emits src/v2/styles/tokens.css with explicit naming overrides for the special cases (--r-row-pad, --r-elev-*, --r-nav-h, abbreviated layout vars). tsx wired into devDeps; build:tokens script + predev/prebuild hooks keep the CSS in sync. Backfill missing tokens that lived only in CSS: --r-color-fav joins colorBrand, and the focus colors in colorDark / colorLight match the translucent values components actually consume (not the unused #ffffff / #111117 they used to declare). Drop the orphan --r-focus-ring-color (zero references in the codebase). Adopt --r-radius-card (14px) for RMenuPanel and RDialog instead of hard-coded 14px; switch a NotesTab badge from 10px to --r-radius-lg. Closes the "panels use 14px not --r-radius-lg" pitfall — the constitution no longer needs that footnote. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…ancy
build-tokens.ts: import the source as .js (compatible with vue-tsc
without enabling allowImportingTsExtensions), wrap top-level await
in main(), drop a leftover unused helper. Doc strings now point to
"npm run build:tokens" — the script name avoids npm's reserved
"token" subcommand. Header in the regenerated tokens.css matches.
AppLayout, AuthLayout and PairShell: drop the redundant
"r-v2 r-v2-{dark|light}" classes from their root divs. RomM.vue
already toggles those on <html>, which covers both the in-tree
shell and any teleported overlays — anchoring them again on the
layout root was harmless duplication that complicated the v1 →
v2-only cleanup. Each layout keeps its own BEM root class
(.r-v2-shell, .r-v2-auth, .r-v2-pair-shell) for its scoped styles.
useThemeClass becomes unused and is removed; when v1 is deleted,
the only thing left to clean is the toggle in RomM.vue.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…te MetadataSources.vue for API key handling
…croll remains at the top for better user experience
…er readability in AuthLayout
…imations in ScanPlatformRow
…re in AppNav and SettingsSidebar
…s layout and remove LibraryToolsLayout component
- Updated localization files for multiple languages to include new keys for collection kinds (standard, smart, virtual) and visibility (public, private). - Enhanced CollectionListHeader and CollectionListRow components to support sorting by visibility and display appropriate labels. - Modified CollectionTile component to show visibility status for owner-managed collections. - Updated CollectionsIndex view to implement segmented filters for kind and visibility, allowing users to filter collections based on these criteria. - Adjusted styles for new visibility and kind indicators in collection components.
Adopt master's ROM schema design (sibling_roms + files, batched
get_files_for_roms / get_siblings_for_roms) while preserving the v2-branch
features master lacks: per-user is_main_sibling on siblings and audio_meta
on rom files.
Conflict resolution:
- responses/rom.py: keep master's sibling_roms/files fields; re-graft
is_main_sibling via SiblingRomSchema.from_rom(rom, is_main_sibling=...);
restore the eager-relationship fallback in
SimpleRomSchema.from_orm_with_request (None sentinel) so the v2
/{id}/simple endpoint still returns siblings/files.
- roms_handler.py: get_siblings_for_roms now left-joins RomUser and returns
(Rom, is_main_sibling) tuples; keep both branch and master file helpers.
- drop the redundant branch-only sibling_ids field and
get_sibling_data_for_roms.
- generated types resolved to match (sibling_roms + files; RomFileSchema
keeps audio_meta and gains archive_members).
- update v2 components and the RelatedGameCard mock to read sibling_roms.
- fix stale exclude={"siblings"} -> "sibling_roms" in scan emit payloads.
- re-chain the audio_meta migration as 0083 (after master's 0082) to keep a
single Alembic head.
- package.json: union of branch tooling + master dependency bumps; lock
regenerated.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
gantoine
changed the title
gantoine
removed
the
on-hold
…timization - Deleted the V2_PLAN.md file which contained the full UI overhaul plan for the RomM frontend. - Updated vite.config.js to exclude vue-i18n from pre-bundling to fix issues with Vite 8's Rolldown dependency optimizer.
- Updated `useGameActions` to improve navigation handling during game play. - Modified `RMenu` to allow modifier-clicks on links to open in new tabs without closing the menu. - Added new stories and tests for `RMenuItem` to ensure correct behavior for new-tab gestures. - Introduced `colorCoverArt` for procedural cover-art generation, ensuring consistent styling across missing and unmatched cover images. - Implemented SVG generation for cover art in `covers.ts`, providing unique visuals for identified and unidentified ROMs. - Enhanced `EmulatorJS` and `Ruffle` views to support dynamic cover art based on selected styles, improving user experience during gameplay. - Refactored cover image handling to support animations and maintain aspect ratios.
- Added new dependencies including @one-ini/wasm and @oxc-parser bindings for various platforms in package-lock.json. - Updated vitest to version 4.1.8 with its dependencies. - Removed exclusion of vue-i18n from Vite's optimizeDeps configuration to improve dependency optimization.
gantoine
reviewed
Jun 16, 2026
gantoine
left a comment
gantoine
left a comment
Member
There was a problem hiding this comment.
finished backend for now, will do frontend later
| # `with_details` decorator) pass neither and fall back to the | ||
| # eager-loaded relationships. `None` (not provided) is distinct from an | ||
| # explicit empty list (e.g. the gallery list, which intentionally omits | ||
| # files unless `with_files` is set). |
Member
There was a problem hiding this comment.
we could probably improve this case, but AFTER this is merged
Member
Author
There was a problem hiding this comment.
yeah for sure. A lot of the stuff I needed to do in the backend for some of the new features needs to be revisited 100%
| router = APIRouter() | ||
|
|
||
| MANUAL_FOLDER = "manual" | ||
| ALLOWED_MANUAL_EXTENSIONS = frozenset({".pdf"}) |
Member
Author
There was a problem hiding this comment.
Sure! great idea, but then more logic needs to be added to render the pdf reader component or the markdown renderer
There was a problem hiding this comment.
I think for manuals and any other similar media (guide books, art books, etc.) we should allow .cbr and .cbz, in addition to .pdf. When I worked on my guide book PR I thought about markdown files but then just figured anything like that can be captured in the Notes section, probably a more appropriate place for things where markdown is desirable.
- Added "esbuild" version "^0.28.1" to frontend package overrides. - Updated "exclude-newer-package" in pyproject.toml to include "vcrpy" with a date of "2026-06-17". - Modified uv.lock to reflect the new "vcrpy" version "8.2.1" and removed platform-specific markers for dependencies.
gantoine
reviewed
Jun 17, 2026
| * entry below if the default convention does not produce the desired CSS | ||
| * variable name. Re-run `npm run build:tokens`. | ||
| */ | ||
| import { writeFile, readFile } from "node:fs/promises"; |
Member
There was a problem hiding this comment.
you're uh, gonna have to explain the purpose of this file in human form
gantoine
requested changes
Jun 17, 2026
gantoine
left a comment
gantoine
left a comment
Member
There was a problem hiding this comment.
the frontend is looking like a real serious codebase 🔥 🔥 🔥 🔥 🔥
| @@ -67,6 +70,7 @@ export function getUnmatchedCoverImage(name: string): string { | |||
| return strToObjUrl(svgString); | |||
| } | |||
|
|
|||
| /** @deprecated v2 forks this in `@/v2/utils/covers`. Use that from v2 code. */ | |||
Member
There was a problem hiding this comment.
nice marking these as deprecated 👍🏼
| "lint": "eslint ./src --ext .vue,.js,.ts --quiet" | ||
| "lint": "eslint ./src/v2 --ext .vue,.js,.ts --quiet", | ||
| "lint:fix": "eslint ./src/v2 --ext .vue,.js,.ts --fix", | ||
| "lint:all": "eslint ./src --ext .vue,.js,.ts --quiet", |
Member
There was a problem hiding this comment.
these necessary when trunk handles linting?
| - Player canvas → `--r-color-canvas-bg`, `--r-color-canvas-bg-deep`. | ||
| - Emphasis pill (always-white-on-dark "Play" CTA over cover art) → `--r-color-overlay-emphasis-bg/-fg/-bg-hover`. | ||
|
|
||
| If a literal would otherwise be needed, the answer is: **add a token**. Update `src/v2/tokens/index.ts`, run `npm run build:tokens`, then consume via `var(--r-color-...)` (CSS) or by importing the named export (TS/JS — e.g., `colorCanvas`, `colorOverlay`). |
Member
There was a problem hiding this comment.
this is great but a little long, let's merge it as-is and i'll massage these into separate skills
| @@ -57,6 +60,7 @@ dependencies = [ | |||
| "watchfiles ~= 1.1", | |||
| "yarl ~= 1.14", | |||
| "zipfile-inflate64 ~= 0.1", | |||
| "bcrypt<4.1", | |||
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.
alphasoundtrackfolder for a multi-part game and will be able to play them directly from RomMscreenshotsfolder and show them in the game detailsgamepad debugsection in the settings to check the controler works properly (New UI only)NOTE
New UI is not responsive yet. Mobile version is on the works but won't be released with the first iteration of the New UI.
Next step
Migrate the New UI from plain css to tailwind
Checklist
Please check all that apply.
Screenshots (if applicable)