From 1c3514da1d0491b9758d7a6f9f72d59ef78fc8ed Mon Sep 17 00:00:00 2001
From: Caleb Allen <caleballen1276@gmail.com>
Date: Wed, 4 Mar 2026 23:16:55 -0500
Subject: [PATCH] perf(08-02): migrate cover-grid, artists-view, and
 genres-view virtualizers to repeat() directive

- cover-grid: all 3 virtualizers (single, before-split, after-split) use repeat() with album.ID key
- artists-view uses repeat() with artist.ID key
- genres-view uses repeat() with genre.name key
- Removed gridKeyFunction (now inlined in repeat calls)
- Removed .renderItem and .keyFunction properties from all virtualizers
---
 .../components/artists-view/artists-view.ts   | 13 ++++----
 .../src/components/cover-grid/cover-grid.ts   | 31 ++++++++++---------
 .../src/components/genres-view/genres-view.ts | 11 ++++---
 3 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/artists-view/artists-view.ts b/frontend/src/components/artists-view/artists-view.ts
index 89c1b53..24bc7de 100644
--- a/frontend/src/components/artists-view/artists-view.ts
+++ b/frontend/src/components/artists-view/artists-view.ts
@@ -10,6 +10,7 @@ import type {
     VisibilityChangedEvent,
 } from '@lit-labs/virtualizer';
 import { grid } from '@lit-labs/virtualizer/layouts/grid.js';
+import { repeat } from 'lit/directives/repeat.js';
 import {
     GetAlbumsByArtist,
     GetAlbumTracks,
@@ -1216,15 +1217,13 @@ export class ArtistsView
             >
                 <lit-virtualizer
                     .items=${entries}
-                    .renderItem=${(
-                        entry: ArtistEntry,
-                    ) =>
-                        this.renderArtistCard(
-                            entry,
-                        )}
                     .layout=${this.gridLayout}
                     @visibilityChanged=${this.onVisibilityChanged}
-                ></lit-virtualizer>
+                >${repeat(
+                    entries,
+                    (entry) => entry.artist.ID,
+                    (entry) => this.renderArtistCard(entry),
+                )}</lit-virtualizer>
             </div>
             ${this.renderContextMenu()}
         `;
diff --git a/frontend/src/components/cover-grid/cover-grid.ts b/frontend/src/components/cover-grid/cover-grid.ts
index 43fa794..5a38346 100644
--- a/frontend/src/components/cover-grid/cover-grid.ts
+++ b/frontend/src/components/cover-grid/cover-grid.ts
@@ -11,6 +11,7 @@ import type {
     VisibilityChangedEvent,
 } from '@lit-labs/virtualizer';
 import { grid } from '@lit-labs/virtualizer/layouts/grid.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { GetAlbumTracks } from '@go/library/Library';
 import { library } from '@go/models';
 import { LibraryController } from '@store/controllers/library-controller';
@@ -924,12 +925,6 @@ export class CoverGrid
         );
     }
 
-    private gridKeyFunction = (
-        entry: GridEntry,
-    ) => {
-        return `a-${entry.album.ID}`;
-    };
-
     /* ====================================================================
      * Dropdown (expand/collapse)
      * ==================================================================== */
@@ -1853,15 +1848,17 @@ export class CoverGrid
             <lit-virtualizer
                 id="grid-single"
                 .items=${this.buildGridEntries()}
-                .renderItem=${this.renderGridEntry}
-                .keyFunction=${this.gridKeyFunction}
                 .layout=${this.gridLayout}
                 @click=${this.onGridAlbumClick}
                 @dblclick=${this.onGridAlbumDblClick}
                 @keydown=${this.onGridAlbumKeydown}
                 @contextmenu=${this.onGridAlbumContextMenu}
                 @visibilityChanged=${this.onVisibilityChanged}
-            ></lit-virtualizer>
+            >${repeat(
+                this.buildGridEntries(),
+                (entry) => entry.album.ID,
+                (entry) => this.renderGridEntry(entry),
+            )}</lit-virtualizer>
         `;
     }
 
@@ -1880,15 +1877,17 @@ export class CoverGrid
             <lit-virtualizer
                 id="grid-before"
                 .items=${this.getBeforeEntries()}
-                .renderItem=${this.renderGridEntry}
-                .keyFunction=${this.gridKeyFunction}
                 .layout=${this.gridLayout}
                 @click=${this.onGridAlbumClick}
                 @dblclick=${this.onGridAlbumDblClick}
                 @keydown=${this.onGridAlbumKeydown}
                 @contextmenu=${this.onGridAlbumContextMenu}
                 @visibilityChanged=${this.onVisibilityChanged}
-            ></lit-virtualizer>
+            >${repeat(
+                this.getBeforeEntries(),
+                (entry) => entry.album.ID,
+                (entry) => this.renderGridEntry(entry),
+            )}</lit-virtualizer>
 
             <album-dropdown
                 .tracks=${this.expandedTracks}
@@ -1909,14 +1908,16 @@ export class CoverGrid
                       <lit-virtualizer
                           id="grid-after"
                           .items=${afterEntries}
-                          .renderItem=${this.renderGridEntry}
-                          .keyFunction=${this.gridKeyFunction}
                           .layout=${this.gridLayoutAfter}
                           @click=${this.onGridAlbumClick}
                           @dblclick=${this.onGridAlbumDblClick}
                           @keydown=${this.onGridAlbumKeydown}
                           @contextmenu=${this.onGridAlbumContextMenu}
-                      ></lit-virtualizer>
+                      >${repeat(
+                          afterEntries,
+                          (entry) => entry.album.ID,
+                          (entry) => this.renderGridEntry(entry),
+                      )}</lit-virtualizer>
                   `
                 : nothing}
         `;
diff --git a/frontend/src/components/genres-view/genres-view.ts b/frontend/src/components/genres-view/genres-view.ts
index 7248385..5276d57 100644
--- a/frontend/src/components/genres-view/genres-view.ts
+++ b/frontend/src/components/genres-view/genres-view.ts
@@ -10,6 +10,7 @@ import type {
     VisibilityChangedEvent,
 } from '@lit-labs/virtualizer';
 import { grid } from '@lit-labs/virtualizer/layouts/grid.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { GetTracksByGenre } from '@go/library/Library';
 import type { library } from '@go/models';
 import { LibraryController } from '@store/controllers/library-controller';
@@ -1168,13 +1169,13 @@ export class GenresView
             >
                 <lit-virtualizer
                     .items=${entries}
-                    .renderItem=${(
-                        entry: GenreEntry,
-                    ) =>
-                        this.renderGenreCard(entry)}
                     .layout=${this.gridLayout}
                     @visibilityChanged=${this.onVisibilityChanged}
-                ></lit-virtualizer>
+                >${repeat(
+                    entries,
+                    (entry) => entry.genre.name,
+                    (entry) => this.renderGenreCard(entry),
+                )}</lit-virtualizer>
             </div>
             ${this.renderContextMenu()}
         `;