Refactor and code designing

src/app/features/settings/settings.component.ts

@@ -16,6 +16,7 @@ import {
 } from '@ng-icons/lucide';
 
 import { ServerDirectoryService } from '../../core/services/server-directory.service';
+import { STORAGE_KEY_CONNECTION_SETTINGS } from '../../core/constants';
 
 @Component({
   selector: 'app-settings',
@@ -36,6 +37,9 @@ import { ServerDirectoryService } from '../../core/services/server-directory.ser
   ],
   templateUrl: './settings.component.html',
 })
+/**
+ * Settings page for managing signaling servers and connection preferences.
+ */
 export class SettingsComponent implements OnInit {
   private serverDirectory = inject(ServerDirectoryService);
   private router = inject(Router);
@@ -49,10 +53,12 @@ export class SettingsComponent implements OnInit {
   autoReconnect = true;
   searchAllServers = true;
 
+  /** Load persisted connection settings on component init. */
   ngOnInit(): void {
     this.loadConnectionSettings();
   }
 
+  /** Add a new signaling server after URL validation and duplicate checking. */
   addServer(): void {
     this.addError.set(null);
 
@@ -65,7 +71,7 @@ export class SettingsComponent implements OnInit {
     }
 
     // Check for duplicates
-    if (this.servers().some((s) => s.url === this.newServerUrl)) {
+    if (this.servers().some((server) => server.url === this.newServerUrl)) {
       this.addError.set('This server URL already exists');
       return;
     }
@@ -87,22 +93,26 @@ export class SettingsComponent implements OnInit {
     }
   }
 
+  /** Remove a signaling server by its ID. */
   removeServer(id: string): void {
     this.serverDirectory.removeServer(id);
   }
 
+  /** Set the active signaling server used for connections. */
   setActiveServer(id: string): void {
     this.serverDirectory.setActiveServer(id);
   }
 
+  /** Test connectivity to all configured servers. */
   async testAllServers(): Promise<void> {
     this.isTesting.set(true);
     await this.serverDirectory.testAllServers();
     this.isTesting.set(false);
   }
 
+  /** Load connection settings (auto-reconnect, search scope) from localStorage. */
   loadConnectionSettings(): void {
-    const settings = localStorage.getItem('metoyou_connection_settings');
+    const settings = localStorage.getItem(STORAGE_KEY_CONNECTION_SETTINGS);
     if (settings) {
       const parsed = JSON.parse(settings);
       this.autoReconnect = parsed.autoReconnect ?? true;
@@ -111,9 +121,10 @@ export class SettingsComponent implements OnInit {
     }
   }
 
+  /** Persist current connection settings to localStorage. */
   saveConnectionSettings(): void {
     localStorage.setItem(
-      'metoyou_connection_settings',
+      STORAGE_KEY_CONNECTION_SETTINGS,
       JSON.stringify({
         autoReconnect: this.autoReconnect,
         searchAllServers: this.searchAllServers,
@@ -122,6 +133,7 @@ export class SettingsComponent implements OnInit {
     this.serverDirectory.setSearchAllServers(this.searchAllServers);
   }
 
+  /** Navigate back to the main page. */
   goBack(): void {
     this.router.navigate(['/']);
   }