fixed player behavior after final queue track completes, added click to play from queue window

frontend/src/components/queue-panel/queue-panel.ts

@@ -75,7 +75,7 @@ export class QueuePanel extends LitElement {
       padding: 8px 16px;
       gap: 12px;
       border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-      cursor: default;
+      cursor: pointer;
     }
 
     .track-item:hover {
@@ -165,10 +165,15 @@ export class QueuePanel extends LitElement {
     this.dispatchEvent(new CustomEvent('queue-panel-close', { bubbles: true, composed: true }));
   }
 
-  private handleRemoveTrack(position: number) {
+  private handleRemoveTrack(e: Event, position: number) {
+    e.stopPropagation();
     this.queue.removeFromQueue(position);
   }
 
+  private handleTrackClick(index: number) {
+    this.queue.playAtIndex(index);
+  }
+
   private getDisplayTitle(track: { title: string; filePath: string }): string {
     if (track.title) return track.title;
 
@@ -203,7 +208,8 @@ export class QueuePanel extends LitElement {
             <ul class="track-list">
               ${tracks.map(
                 (track, index) => html`
-                  <li class="track-item ${index === currentIndex ? 'active' : ''}">
+                  <li class="track-item ${index === currentIndex ? 'active' : ''}"
+                      @click=${() => this.handleTrackClick(index)}>
                     <span class="track-position">${index + 1}</span>
                     <div class="track-details">
                       <span class="track-title">${this.getDisplayTitle(track)}</span>
@@ -211,7 +217,7 @@ export class QueuePanel extends LitElement {
                     </div>
                     <button
                       class="remove-button"
-                      @click=${() => this.handleRemoveTrack(index)}
+                      @click=${(e: Event) => this.handleRemoveTrack(e, index)}
                       title="Remove from queue"
                     >
                       <wa-icon name="xmark"></wa-icon>

frontend/src/events.ts

@@ -32,6 +32,7 @@ export const Events = {
     RequestCycleRepeat: "RequestCycleRepeat",
     RequestAddTracksToQueue: "RequestAddTracksToQueue",
     RequestPlayTracksNext: "RequestPlayTracksNext",
+    RequestPlayQueueIndex: "RequestPlayQueueIndex",
 } as const;
 
 export type EventName = (typeof Events)[keyof typeof Events];

frontend/src/store/controllers/queue-controller.ts

@@ -110,4 +110,8 @@ export class QueueController implements ReactiveController {
   cycleRepeat(): void {
     queueStore.cycleRepeat();
   }
+
+  playAtIndex(index: number): void {
+    queueStore.playAtIndex(index);
+  }
 }

frontend/src/store/player-store.ts

@@ -51,8 +51,8 @@ class PlayerStore {
       this.update({ isPlaying: data.state === 'playing' });
     });
 
-    EventsOn(Events.TrackChanged, (trackInfo: TrackInfo) => {
-      this.update({ currentTrack: trackInfo });
+    EventsOn(Events.TrackChanged, (trackInfo: TrackInfo | null) => {
+      this.update({ currentTrack: trackInfo ?? null });
     });
 
     EventsOn(Events.PlaybackFinished, () => {

frontend/src/store/queue-store.ts

@@ -7,6 +7,8 @@ export interface QueueTrack {
   audioFileId: number;
   filePath: string;
   position: number;
+  title: string;
+  artist: string;
 }
 
 export type RepeatMode = 'off' | 'all' | 'one';
@@ -24,7 +26,7 @@ type Subscriber = () => void;
 class QueueStore {
   private state: QueueState = {
     tracks: [],
-    currentIndex: 0,
+    currentIndex: -1,
     shuffleMode: false,
     repeatMode: 'off',
     sourcePlaylistId: 0,
@@ -107,6 +109,10 @@ class QueueStore {
     EventsEmit(Events.RequestCycleRepeat);
   }
 
+  playAtIndex(index: number): void {
+    EventsEmit(Events.RequestPlayQueueIndex, index);
+  }
+
   // ===================================================================
   // SUBSCRIPTION SYSTEM
   // ===================================================================