playlist creation, viewing, integration with other views. still wip for full playlist functionality

frontend/src/components/track-list/track-list.ts

@@ -11,6 +11,8 @@ import { flow } from '@lit-labs/virtualizer/layouts/flow.js';
 import '@awesome.me/webawesome/dist/components/popup/popup.js';
 import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
+import '@components/playlist-picker/playlist-picker.js';
+import type { PlaylistPicker } from '@components/playlist-picker/playlist-picker.js';
 
 @customElement('track-list')
 export class TrackList extends LitElement {
@@ -26,9 +28,15 @@ export class TrackList extends LitElement {
   @state()
   private contextMenuTrack: library.Track | null = null;
 
+  @state()
+  private playlistSubmenuOpen = false;
+
   @query('#context-menu')
   private contextMenuPopup!: HTMLElement;
 
+  @query('#playlist-submenu')
+  private playlistSubmenuPopup!: HTMLElement;
+
   private closeHandler = () => this.closeContextMenu();
 
   static override styles = css`
@@ -128,6 +136,20 @@ export class TrackList extends LitElement {
     .context-menu-panel wa-dropdown-item:hover {
       background-color: rgba(255, 255, 255, 0.1);
     }
+
+    .submenu-item {
+      position: relative;
+    }
+
+    .submenu-arrow {
+      font-size: 10px;
+      margin-left: auto;
+      padding-left: 12px;
+    }
+
+    #playlist-submenu {
+      z-index: 210;
+    }
   `;
 
   override connectedCallback() {
@@ -214,6 +236,7 @@ export class TrackList extends LitElement {
   private closeContextMenu() {
     if (!this.contextMenuOpen) return;
 
+    this.closePlaylistSubmenu();
     this.contextMenuOpen = false;
     this.contextMenuTrack = null;
 
@@ -224,6 +247,44 @@ export class TrackList extends LitElement {
     }
   }
 
+  private async showPlaylistSubmenu() {
+    if (this.playlistSubmenuOpen) return;
+
+    this.playlistSubmenuOpen = true;
+
+    await this.updateComplete;
+
+    const submenu = this.playlistSubmenuPopup;
+    const trigger = this.shadowRoot?.querySelector('.submenu-item');
+
+    if (submenu && trigger) {
+      (submenu as any).anchor = trigger;
+      (submenu as any).active = true;
+    }
+
+    const picker = this.shadowRoot?.querySelector(
+      'playlist-picker',
+    ) as PlaylistPicker | null;
+
+    picker?.reset();
+  }
+
+  private closePlaylistSubmenu() {
+    if (!this.playlistSubmenuOpen) return;
+
+    this.playlistSubmenuOpen = false;
+
+    const submenu = this.playlistSubmenuPopup;
+
+    if (submenu) {
+      (submenu as any).active = false;
+    }
+  }
+
+  private onPlaylistActionComplete = () => {
+    this.closeContextMenu();
+  };
+
   private isActiveTrack(track: library.Track): boolean {
     const currentTrack = this.player.currentTrack;
 
@@ -298,10 +359,38 @@ export class TrackList extends LitElement {
                   <wa-icon slot="icon" name="forward-step"></wa-icon>
                   Play Next
                 </wa-dropdown-item>
+                <wa-dropdown-item
+                  class="submenu-item"
+                  @mouseenter=${() => this.showPlaylistSubmenu()}
+                  @click=${(e: Event) => {
+                    e.stopPropagation();
+                    void this.showPlaylistSubmenu();
+                  }}
+                >
+                  <wa-icon slot="icon" name="plus"></wa-icon>
+                  Add to Playlist
+                  <span class="submenu-arrow">&#9654;</span>
+                </wa-dropdown-item>
               </div>
             `
           : nothing}
       </wa-popup>
+
+      <wa-popup
+        id="playlist-submenu"
+        placement="right-start"
+        .active=${this.playlistSubmenuOpen}
+      >
+        ${this.playlistSubmenuOpen && this.contextMenuTrack
+          ? html`
+              <playlist-picker
+                .filePaths=${[this.contextMenuTrack.FilePath]}
+                @playlist-action-complete=${this.onPlaylistActionComplete}
+                @click=${(e: Event) => e.stopPropagation()}
+              ></playlist-picker>
+            `
+          : nothing}
+      </wa-popup>
     `;
   }
 }