Move toju-app into own its folder

toju-app/src/app/shared/components/user-volume-menu/user-volume-menu.component.ts

@@ -0,0 +1,63 @@
+import {
+  Component,
+  input,
+  output,
+  inject,
+  signal,
+  OnInit
+} from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideVolume2, lucideVolumeX } from '@ng-icons/lucide';
+import { VoicePlaybackService } from '../../../domains/voice-connection/application/voice-playback.service';
+import { ContextMenuComponent } from '../context-menu/context-menu.component';
+
+@Component({
+  selector: 'app-user-volume-menu',
+  standalone: true,
+  imports: [NgIcon, ContextMenuComponent],
+  viewProviders: [provideIcons({ lucideVolume2, lucideVolumeX })],
+  templateUrl: './user-volume-menu.component.html',
+  styleUrl: './user-volume-menu.component.scss'
+})
+/* eslint-disable @typescript-eslint/member-ordering */
+export class UserVolumeMenuComponent implements OnInit {
+  // eslint-disable-next-line id-length, id-denylist
+  x = input.required<number>();
+  // eslint-disable-next-line id-length, id-denylist
+  y = input.required<number>();
+  peerId = input.required<string>();
+  displayName = input.required<string>();
+  closed = output<undefined>();
+
+  private playback = inject(VoicePlaybackService);
+
+  volume = signal(100);
+  isMuted = signal(false);
+
+  ngOnInit(): void {
+    const id = this.peerId();
+
+    this.volume.set(this.playback.getUserVolume(id));
+    this.isMuted.set(this.playback.isUserMuted(id));
+  }
+
+  onSliderInput(event: Event): void {
+    const val = parseInt((event.target as HTMLInputElement).value, 10);
+
+    this.volume.set(val);
+    this.playback.setUserVolume(this.peerId(), val);
+  }
+
+  toggleMute(): void {
+    const next = !this.isMuted();
+
+    this.isMuted.set(next);
+    this.playback.setUserMuted(this.peerId(), next);
+  }
+
+  muteButtonClass(): string {
+    return this.isMuted()
+      ? 'bg-destructive/15 text-destructive hover:bg-destructive/25'
+      : 'text-muted-foreground hover:bg-secondary hover:text-foreground';
+  }
+}