From 62f41c24910632b270f9f5765e20e48db4b95ec9 Mon Sep 17 00:00:00 2001
From: Caleb Allen <caleballen1276@gmail.com>
Date: Wed, 4 Mar 2026 23:21:56 -0500
Subject: [PATCH] perf(08-03): optimize column rendering and apply classMap to
 queue-panel renderTrackItem

- Hoist searchCtrl.term lookup outside per-column loop in renderTrackRow
- Search highlighting already short-circuits when search term is empty
- Import classMap in queue-panel.ts
- Replace array filter/join class construction with classMap in renderTrackItem
- Eliminates per-row array allocation in queue panel render hot path
---
 .../src/components/queue-panel/queue-panel.ts | 19 ++++------
 .../src/components/track-list/track-list.ts   | 37 ++++++++++---------
 2 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/queue-panel/queue-panel.ts b/frontend/src/components/queue-panel/queue-panel.ts
index fc720f4..36b8703 100644
--- a/frontend/src/components/queue-panel/queue-panel.ts
+++ b/frontend/src/components/queue-panel/queue-panel.ts
@@ -16,6 +16,7 @@ import '@lit-labs/virtualizer';
 import type { LitVirtualizer } from '@lit-labs/virtualizer';
 import { flow } from '@lit-labs/virtualizer/layouts/flow.js';
 import { repeat } from 'lit/directives/repeat.js';
+import { classMap } from 'lit/directives/class-map.js';
 import type { QueueTrack } from '@store/queue-store';
 import { SelectionController } from '@utils/selection-controller';
 import type { SelectionHost } from '@utils/selection-controller';
@@ -1150,19 +1151,15 @@ export class QueuePanel
             dropIdx === trackCount &&
             index === trackCount - 1;
 
-        const classes = [
-            'track-item',
-            active ? 'active' : '',
-            selected ? 'selected' : '',
-            showBefore ? 'drop-before' : '',
-            showAfter ? 'drop-after' : '',
-        ]
-            .filter(Boolean)
-            .join(' ');
-
         return html`
             <div
-                class=${classes}
+                class=${classMap({
+                    'track-item': true,
+                    active,
+                    selected,
+                    'drop-before': showBefore,
+                    'drop-after': showAfter,
+                })}
                 data-index=${index}
                 draggable="true"
                 @click=${(e: MouseEvent) =>
diff --git a/frontend/src/components/track-list/track-list.ts b/frontend/src/components/track-list/track-list.ts
index 09cc779..eff2768 100644
--- a/frontend/src/components/track-list/track-list.ts
+++ b/frontend/src/components/track-list/track-list.ts
@@ -1572,25 +1572,26 @@ export class TrackList extends LitElement implements SelectionHost, ContextMenuH
             variant=${favVariant}
           ></wa-icon>
         </div>
-        ${cols.map((col) => {
-                const val = col.accessor(track);
-                const centered = val === '\u2014';
-                const term =
-                    this.searchCtrl.term;
-                const display = term
-                    ? highlightText(val, term)
-                    : val;
+        ${(() => {
+                const term = this.searchCtrl.term;
+                return cols.map((col) => {
+                    const val = col.accessor(track);
+                    const centered = val === '\u2014';
+                    const display = term
+                        ? highlightText(val, term)
+                        : val;
 
-                return html`
-                    <div class=${classMap({
-                        cell: true,
-                        'cell-center': centered,
-                        'cell-right': !centered && col.align === 'right',
-                    })}>
-                        ${display}
-                    </div>
-                `;
-            })}
+                    return html`
+                        <div class=${classMap({
+                            cell: true,
+                            'cell-center': centered,
+                            'cell-right': !centered && col.align === 'right',
+                        })}>
+                            ${display}
+                        </div>
+                    `;
+                });
+            })()}
       </div>
     `;
     };