Skip to content

feat: add grid view with RA artwork and adjustable tile size#187

Open
JZimz wants to merge 1 commit into
mainfrom
claude/add-grid-view-Mh7Ns
Open

feat: add grid view with RA artwork and adjustable tile size#187
JZimz wants to merge 1 commit into
mainfrom
claude/add-grid-view-Mh7Ns

Conversation

@JZimz

@JZimz JZimz commented Apr 22, 2026

Copy link
Copy Markdown
Owner
  • New RomGridItem component shows RA artwork when available, with a
    system-badge + game-name empty state for ROMs without metadata
  • New RomGrid component virtualises rows via PrimeVue VirtualScroller
    using a ResizeObserver to compute items-per-row dynamically
  • RA metadata is lazy-loaded per tile via onMounted so only visible
    items trigger IPC calls; the store's cache prevents duplicate requests
  • RomListLayout exposes a list/grid toggle (SelectButton) and a tile
    size slider (80–220 px) in the toolbar; both are persisted to
    localStorage under r_view_mode and r_grid_item_size
  • All existing filter logic (query, system, region, RA, availability)
    works identically in grid mode
  • LibraryView, SystemView, FavoritesView, and TagView all switch between
    RomList and RomGrid based on the shared mode preference

https://claude.ai/code/session_01Xwsxkb6kbcbvGm39cynvfv

You can now browse your library in a grid layout. No boxart yet — that's coming
soon — but the grid is there and ready for it. Card size is adjustable and saves
between sessions.
@JZimz JZimz force-pushed the claude/add-grid-view-Mh7Ns branch from ab52cbc to 2628d23 Compare April 27, 2026 01:09
@JZimz JZimz requested a review from CharlieHelps April 27, 2026 01:09

@charliecreates charliecreates Bot 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.

Non-blocking feedback (2)
  1. Validate persisted grid settings before using them — src/layouts/RomListLayout.vue
    listMode and gridItemSize are read directly from localStorage and cast/parsed without guards. If either value is invalid (stale/corrupted/manual edit), grid mode can render with itemSize = NaN, which breaks tile sizing and VirtualScroller math.
    Consider normalizing on read (allow only list|grid) and clamping grid size to 80–220 with a default fallback.

  2. Make the full slider track no-drag in the toolbar — src/components/AppToolbar.vue#L159
    The toolbar correctly marks interactive elements as -webkit-app-region: no-drag, but the new selectors only cover .p-slider-handle and .p-slider-range. The unfilled .p-slider track can still sit under the draggable titlebar region, so clicking that area may drag the window instead of moving the thumb.
    Add .p-slider to the same selector list so the whole control is consistently interactive.

If you want me to push fixes, reply with item numbers (for example: please fix 1 or please fix 1-2).

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.

1 participant