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

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) =>

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 term = this.searchCtrl.term;
-                const centered = val === '\u2014';
+                return cols.map((col) => {
-                const term =
+                    const val = col.accessor(track);
-                    this.searchCtrl.term;
+                    const centered = val === '\u2014';
-                const display = term
+                    const display = term
-                    ? highlightText(val, term)
+                        ? highlightText(val, term)
-                    : val;
+                        : val;
 
-                return html`
+                    return html`
-                    <div class=${classMap({
+                        <div class=${classMap({
-                        cell: true,
+                            cell: true,
-                        'cell-center': centered,
+                            'cell-center': centered,
-                        'cell-right': !centered && col.align === 'right',
+                            'cell-right': !centered && col.align === 'right',
-                    })}>
+                        })}>
-                        ${display}
+                            ${display}
-                    </div>
+                        </div>
-                `;
+                    `;
-            })}
+                });
+            })()}
       </div>
     `;
     };