Add a media queue editor generated with AI

app/src/app/apps/app/player/player.component.html

@@ -1 +1,3 @@
 <button mat-button (click)="toggleTray()">Toggle Player</button>
+
+<app-queue-editor></app-queue-editor>

app/src/app/apps/app/player/player.component.ts

@@ -2,11 +2,12 @@ import { ChangeDetectorRef, Component, inject } from '@angular/core';
 import { LayoutService } from '../../../layout.service';
 import { MatButtonModule } from '@angular/material/button';
 import { PlayerService } from '../../../player.service';
+import { QueueEditorComponent } from './queue-editor/queue-editor.component';
 
 @Component({
   selector: 'app-player',
   standalone: true,
-  imports: [MatButtonModule],
+  imports: [MatButtonModule, QueueEditorComponent],
   templateUrl: './player.component.html',
   styleUrl: './player.component.scss',
 })

app/src/app/apps/app/player/queue-editor/queue-editor.component.html

@@ -0,0 +1,14 @@
+<h2>Queue Editor</h2>
+<input [(ngModel)]="newItemTitle" placeholder="Title" />
+<select [(ngModel)]="newItemType">
+  <option value="music">Music</option>
+  <option value="podcast">Podcast</option>
+  <option value="video">Video</option>
+</select>
+<button (click)="addItem()">Add to Queue</button>
+
+<ul>
+  <li *ngFor="let item of queue">
+    {{ item.title }} ({{ item.type }}) <button (click)="removeItem(item.id)">Remove</button>
+  </li>
+</ul>

app/src/app/apps/app/player/queue-editor/queue-editor.component.ts

@@ -0,0 +1,37 @@
+// src/app/components/queue-editor/queue-editor.component.ts
+import { Component } from '@angular/core';
+import { MediaQueueService, MediaItem } from '../../../../media-queue.service';
+import { MatButtonModule } from '@angular/material/button';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-queue-editor',
+  standalone: true,
+  imports: [MatButtonModule, FormsModule],
+  templateUrl: './queue-editor.component.html', // Reference to external template
+})
+export class QueueEditorComponent {
+  newItemTitle: string = '';
+  newItemType: 'music' | 'podcast' | 'video' = 'music';
+  queue: MediaItem[] = [];
+
+  constructor(private mediaQueueService: MediaQueueService) {
+    this.mediaQueueService.queue$.subscribe((queue) => {
+      this.queue = queue;
+    });
+  }
+
+  addItem() {
+    const newItem: MediaItem = {
+      id: Date.now(),
+      title: this.newItemTitle,
+      type: this.newItemType,
+    };
+    this.mediaQueueService.addToQueue(newItem);
+    this.newItemTitle = '';
+  }
+
+  removeItem(itemId: number) {
+    this.mediaQueueService.removeFromQueue(itemId);
+  }
+}

app/src/app/friends/friends.component.html

@@ -5,6 +5,47 @@
       <span class="hide-small">Friends</span>
     </ng-template>
 
+    <mat-list>
+      <!-- <div mat-subheader>Folders</div> -->
+      @for (folder of friends; track folder) {
+      <mat-list-item>
+        <!-- <mat-icon matListItemAvatar>folder</mat-icon> -->
+        <mat-icon matListItemIcon>folder</mat-icon>
+        <div matListItemContent>
+          <div matLine>{{ folder.data.did }}</div>
+          <!-- Primary text -->
+          <!-- <div matLine>{{ folder.record.dateCreated | date }}</div> -->
+          <!-- Secondary text -->
+          <!-- <div matLine>{{ folder }}</div> -->
+          <!-- Tertiary text -->
+        </div>
+        <div matListItemMeta>
+          <button mat-icon-button [matMenuTriggerFor]="menuProfile">
+            <mat-icon>more_vert</mat-icon>
+          </button>
+        </div>
+        <mat-menu #menuProfile="matMenu">
+          <button mat-menu-item [routerLink]="['/profile', folder.data.did]">
+            <mat-icon>account_circle</mat-icon>
+            <span>View Profile</span>
+          </button>
+          <mat-divider></mat-divider>
+
+          <button mat-menu-item [routerLink]="['/app', 'chat', folder.data.did]">
+            <mat-icon>chat_bubble</mat-icon>
+            <span>Message</span>
+          </button>
+        </mat-menu>
+
+        <!-- <div class="mdc-list-item__end ng-star-inserted">
+          <button mat-icon-button [matMenuTriggerFor]="menuProfile">
+            <mat-icon>more_vert</mat-icon>
+          </button>
+        </div> -->
+      </mat-list-item>
+      }
+    </mat-list>
+
     <div class="container responsive-grid">
       @for(request of friends; track request) {
       <app-profile-card [did]="request.data.did!">

app/src/app/layout/layout.component.html

@@ -155,12 +155,13 @@
               onerror="this.src='/avatar-placeholder.png';this.onerror='';"
             />
             <div>
+              @if (profileService.current()) {
               <h2>{{ profileService.current().name }}</h2>
               {{ profileService.current().title }}<br />
               {{ identity.did | did }}<br />
               @if (identity.identity) {
               {{ identity.identity.metadata.name }}<br />
-              }
+              } }
             </div>
           </div>
 

app/src/app/media-queue.service.ts

@@ -0,0 +1,34 @@
+// src/app/services/media-queue.service.ts
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+export interface MediaItem {
+  id: number;
+  title: string;
+  type: 'music' | 'podcast' | 'video';
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MediaQueueService {
+  private queue: MediaItem[] = [];
+  private queueSubject = new BehaviorSubject<MediaItem[]>(this.queue);
+
+  queue$ = this.queueSubject.asObservable();
+
+  addToQueue(item: MediaItem) {
+    this.queue.push(item);
+    this.queueSubject.next(this.queue);
+  }
+
+  removeFromQueue(itemId: number) {
+    this.queue = this.queue.filter((item) => item.id !== itemId);
+    this.queueSubject.next(this.queue);
+  }
+
+  clearQueue() {
+    this.queue = [];
+    this.queueSubject.next(this.queue);
+  }
+}