Refactor and code designing

src/app/features/voice/floating-voice-controls/floating-voice-controls.component.ts

@@ -15,7 +15,7 @@ import {
 
 import { WebRTCService } from '../../../core/services/webrtc.service';
 import { VoiceSessionService } from '../../../core/services/voice-session.service';
-import * as UsersActions from '../../../store/users/users.actions';
+import { UsersActions } from '../../../store/users/users.actions';
 import { selectCurrentUser } from '../../../store/users/users.selectors';
 
 @Component({
@@ -34,6 +34,10 @@ import { selectCurrentUser } from '../../../store/users/users.selectors';
   ],
   templateUrl: './floating-voice-controls.component.html'
 })
+/**
+ * Floating voice controls displayed when the user navigates away from the voice-connected server.
+ * Provides mute, deafen, screen-share, and disconnect actions in a compact overlay.
+ */
 export class FloatingVoiceControlsComponent implements OnInit, OnDestroy {
   private webrtcService = inject(WebRTCService);
   private voiceSessionService = inject(VoiceSessionService);
@@ -52,6 +56,7 @@ export class FloatingVoiceControlsComponent implements OnInit, OnDestroy {
 
   private stateSubscription: Subscription | null = null;
 
+  /** Sync local mute/deafen/screen-share state from the WebRTC service on init. */
   ngOnInit(): void {
     // Sync mute/deafen state from webrtc service
     this.isMuted.set(this.webrtcService.isMuted());
@@ -63,12 +68,14 @@ export class FloatingVoiceControlsComponent implements OnInit, OnDestroy {
     this.stateSubscription?.unsubscribe();
   }
 
+  /** Navigate back to the voice-connected server. */
   navigateToServer(): void {
     this.voiceSessionService.navigateToVoiceServer();
   }
 
+  /** Toggle microphone mute and broadcast the updated voice state. */
   toggleMute(): void {
-    this.isMuted.update(v => !v);
+    this.isMuted.update((current) => !current);
     this.webrtcService.toggleMute(this.isMuted());
 
     // Broadcast mute state change
@@ -84,8 +91,9 @@ export class FloatingVoiceControlsComponent implements OnInit, OnDestroy {
     });
   }
 
+  /** Toggle deafen state (muting audio output) and broadcast the updated voice state. */
   toggleDeafen(): void {
-    this.isDeafened.update(v => !v);
+    this.isDeafened.update((current) => !current);
     this.webrtcService.toggleDeafen(this.isDeafened());
 
     // When deafening, also mute
@@ -107,6 +115,7 @@ export class FloatingVoiceControlsComponent implements OnInit, OnDestroy {
     });
   }
 
+  /** Toggle screen sharing on or off. */
   async toggleScreenShare(): Promise<void> {
     if (this.isScreenSharing()) {
       this.webrtcService.stopScreenShare();
@@ -115,12 +124,13 @@ export class FloatingVoiceControlsComponent implements OnInit, OnDestroy {
       try {
         await this.webrtcService.startScreenShare(false);
         this.isScreenSharing.set(true);
-      } catch (error) {
-        console.error('Failed to start screen share:', error);
+      } catch (_error) {
+        // Screen share request was denied or failed
       }
     }
   }
 
+  /** Disconnect from the voice session entirely, cleaning up all voice state. */
   disconnect(): void {
     // Stop voice heartbeat
     this.webrtcService.stopVoiceHeartbeat();
@@ -163,6 +173,7 @@ export class FloatingVoiceControlsComponent implements OnInit, OnDestroy {
     this.isDeafened.set(false);
   }
 
+  /** Return the CSS classes for the compact control button based on active state. */
   getCompactButtonClass(isActive: boolean): string {
     const base = 'w-7 h-7 inline-flex items-center justify-center rounded-lg transition-colors';
     if (isActive) {
@@ -171,6 +182,7 @@ export class FloatingVoiceControlsComponent implements OnInit, OnDestroy {
     return base + ' bg-secondary text-foreground hover:bg-secondary/80';
   }
 
+  /** Return the CSS classes for the compact screen-share button. */
   getCompactScreenShareClass(): string {
     const base = 'w-7 h-7 inline-flex items-center justify-center rounded-lg transition-colors';
     if (this.isScreenSharing()) {
@@ -179,6 +191,7 @@ export class FloatingVoiceControlsComponent implements OnInit, OnDestroy {
     return base + ' bg-secondary text-foreground hover:bg-secondary/80';
   }
 
+  /** Return the CSS classes for the mute toggle button. */
   getMuteButtonClass(): string {
     const base = 'w-10 h-10 inline-flex items-center justify-center rounded-full transition-colors';
     if (this.isMuted()) {
@@ -187,6 +200,7 @@ export class FloatingVoiceControlsComponent implements OnInit, OnDestroy {
     return base + ' bg-secondary text-foreground hover:bg-secondary/80';
   }
 
+  /** Return the CSS classes for the deafen toggle button. */
   getDeafenButtonClass(): string {
     const base = 'w-10 h-10 inline-flex items-center justify-center rounded-full transition-colors';
     if (this.isDeafened()) {
@@ -195,6 +209,7 @@ export class FloatingVoiceControlsComponent implements OnInit, OnDestroy {
     return base + ' bg-secondary text-foreground hover:bg-secondary/80';
   }
 
+  /** Return the CSS classes for the screen-share toggle button. */
   getScreenShareButtonClass(): string {
     const base = 'w-10 h-10 inline-flex items-center justify-center rounded-full transition-colors';
     if (this.isScreenSharing()) {