Move toju-app into own its folder

toju-app/src/app/domains/voice-session/feature/voice-controls/voice-controls.component.html

@@ -0,0 +1,130 @@
+<div class="bg-card border-border p-4">
+  <!-- Connection Error Banner -->
+  @if (showConnectionError()) {
+    <div class="mb-3 p-2 bg-destructive/20 border border-destructive/30 rounded-lg flex items-center gap-2">
+      <span class="w-2 h-2 rounded-full bg-destructive animate-pulse"></span>
+      <span class="text-xs text-destructive">{{ connectionErrorMessage() || 'Connection error' }}</span>
+      <button
+        type="button"
+        (click)="retryConnection()"
+        class="ml-auto text-xs text-destructive hover:underline"
+      >
+        Retry
+      </button>
+    </div>
+  }
+
+  <!-- User Info -->
+  <div class="flex items-center gap-3 mb-4">
+    <app-user-avatar
+      [name]="currentUser()?.displayName || '?'"
+      size="sm"
+    />
+    <div class="flex-1 min-w-0">
+      <p class="font-medium text-sm text-foreground truncate">
+        {{ currentUser()?.displayName || 'Unknown' }}
+      </p>
+      <p class="text-xs text-muted-foreground">
+        @if (showConnectionError()) {
+          <span class="text-destructive">● Connection Error</span>
+        } @else if (isConnected()) {
+          <span class="text-green-500">● Connected</span>
+        } @else {
+          <span class="text-muted-foreground">● Disconnected</span>
+        }
+      </p>
+    </div>
+    <div class="flex items-center gap-1">
+      <app-debug-console
+        launcherVariant="inline"
+        [showPanel]="false"
+      />
+      <button
+        type="button"
+        (click)="toggleSettings()"
+        class="p-2 hover:bg-secondary rounded-lg transition-colors"
+      >
+        <ng-icon
+          name="lucideSettings"
+          class="w-4 h-4 text-muted-foreground"
+        />
+      </button>
+    </div>
+  </div>
+
+  <!-- Voice Controls -->
+  <div class="flex items-center justify-center gap-2">
+    @if (isConnected()) {
+      <!-- Mute Toggle -->
+      <button
+        type="button"
+        (click)="toggleMute()"
+        [class]="getMuteButtonClass()"
+      >
+        @if (isMuted()) {
+          <ng-icon
+            name="lucideMicOff"
+            class="w-5 h-5"
+          />
+        } @else {
+          <ng-icon
+            name="lucideMic"
+            class="w-5 h-5"
+          />
+        }
+      </button>
+
+      <!-- Deafen Toggle -->
+      <button
+        type="button"
+        (click)="toggleDeafen()"
+        [class]="getDeafenButtonClass()"
+      >
+        <ng-icon
+          name="lucideHeadphones"
+          class="w-5 h-5"
+        />
+      </button>
+
+      <!-- Screen Share Toggle -->
+      <button
+        type="button"
+        (click)="toggleScreenShare()"
+        [class]="getScreenShareButtonClass()"
+      >
+        @if (isScreenSharing()) {
+          <ng-icon
+            name="lucideMonitorOff"
+            class="w-5 h-5"
+          />
+        } @else {
+          <ng-icon
+            name="lucideMonitor"
+            class="w-5 h-5"
+          />
+        }
+      </button>
+
+      <!-- Disconnect -->
+      <button
+        type="button"
+        (click)="disconnect()"
+        class="w-10 h-10 inline-flex items-center justify-center bg-destructive text-destructive-foreground rounded-full hover:bg-destructive/90 transition-colors"
+      >
+        <ng-icon
+          name="lucidePhoneOff"
+          class="w-5 h-5"
+        />
+      </button>
+    }
+  </div>
+</div>
+
+@if (showScreenShareQualityDialog()) {
+  <app-screen-share-quality-dialog
+    [selectedQuality]="screenShareQuality()"
+    [includeSystemAudio]="includeSystemAudio()"
+    (cancelled)="onScreenShareQualityCancelled()"
+    (confirmed)="onScreenShareQualityConfirmed($event)"
+  />
+}