fix(frontend): only request platform icons that ship - #4792
Merged
Merged
Conversation
The v2 platform icon components probed /assets/platforms/<slug>.svg, then .ico, and let the browser 404 on every miss before settling on default.ico. A build-time manifest of the shipped filenames (virtual:platform-icons) now picks the right file up front, so unknown slugs go straight to the default and the prefetch cache makes at most one request per shipped slug. The manifest is a Vite virtual module rather than an eager import.meta.glob, which would emit hashed copies of all ~240 icons and inline the small ones into the lib chunk just to read their names. RPlatformIcon moves out of lib/ to components/shared/PlatformIcon, since it now depends on platform-specific asset knowledge. Its tooltip also falls back to the slug when no title or alt is given (the empty-string alt default used to short-circuit the `??` chain). Based on the approach in #4728 by @andest01. Fixes #4671 Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Contributor
|
4 tasks
- Emit the slug-to-file map from the manifest plugin and reload it when icons change under the dev server. - Default the plugin's icon directory so both configs share one path. - Keep decorative platform icons at an empty alt, and turn off the slug tooltip where the display name already sits next to the icon. - Clean up the manifest test's temp dir and cover CachedPlatformIcon. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
- Move the slug-to-URL resolver into src/v2/utils/platformIcons so PlatformIcon no longer pulls in the blob cache, and normalize slugs through one helper. - Keep PlatformIcon's tooltip as title or alt, which drops the three :show-tooltip="false" overrides the slug fallback needed. - Drop the plugin's unused directory argument, the redundant onError guards and the doubled fsSlug lookup, and shorten the test helper. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
PlatformIcon's story moved out of src/v2/lib, which the harness only globbed, so CI stopped rendering it and running its axe checks. Covering components/shared restores that and adds the four other shared stories. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
gantoine
added a commit
to rommapp/docs
that referenced
this pull request
Sep 26, 2026
The new UI only loads the icons built into the image (rommapp/romm#4792), and the classic UI is being removed, so bind-mounting custom icons is no longer supported. Co-Authored-By: Claude Opus 5.5 (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
Fixes #4671
The v2 platform icon components tried
/assets/platforms/<slug>.svg, then.ico, and let the browser 404 on every miss before landing ondefault.ico. The prefetch cache did the same probing for every platform on app load. That's where theps.svg,win.svgandps.ico404s in the issue come from.This takes the approach from #4728 by @andest01 (look icons up in a list of the files that ship instead of probing) and narrows it to the fix:
scripts/platformIconManifest.ts) exposes the icons underfrontend/assets/platforms/asvirtual:platform-icons, a slug to filename map (.svgwins over.ico). It reloads when an icon is added or removed under the dev server.src/v2/utils/platformIcons.tsexportsplatformIconUrl(slug, fsSlug); unknown slugs go straight todefault.icowithout a request.import.meta.glob. An eager?urlglob over the folder would import every icon just to read its name. I measured it: it emits 233 hashed copies of the icons (~5.6 MB) intodist/assetsand inlines 26 small ones asdata:URIs into thelibchunk (165 KB to 273 KB). The virtual module only adds the names.prefetchPlatformIconsskips slugs that ship nothing and fetches one URL per shipped slug.RPlatformIconbecomescomponents/shared/PlatformIcon. It now depends on platform-specific asset knowledge, so it no longer qualifies as alib/primitive. Consumers import it by path; the story moved with it, and the Storybook test harness (test/storybook.test.ts) now coverscomponents/sharedstories too, so it keeps rendering and running its axe checks in CI.CachedPlatformIconuses the same resolver.Behavior change: custom icon mounts. The docs let users bind-mount their own icons over
/var/www/html/assets/platforms. The new UI now only knows the icons built into the image, so it ignores those mounts. This is intended since the classic UI is going away; rommapp/docs#150 removes the custom icon guide and should merge when this ships.Left out on purpose: the Storybook
staticDirs/fixtures work from #4728 (separate PR), and mergingCachedPlatformIconintoPlatformIcon(follow-up).AI assistance: This PR was written with Claude Code (Claude Opus 5.5): the implementation, tests, review passes and this description. I reviewed the approach against #4728 and the diff before opening.
Checklist
Local checks:
npm run typecheck,typecheck:scripts,npm run test(235 files, 2655 tests; the Storybook harness now runs 408 stories including 31 shared ones),npm run build,storybook build, andtrunk check. I did not do a manual browser pass: nothing visual changes, only which URL each icon requests.Screenshots (if applicable)
No visual change.
🤖 Generated with Claude Code