Toju/src/app/features/settings/settings-modal/network-settings/network-settings.component.html

<div class="space-y-6 max-w-xl">
  <!-- Server Endpoints -->
  <section>
    <div class="flex items-center justify-between mb-3">
      <div class="flex items-center gap-2">
        <ng-icon
          name="lucideGlobe"
          class="w-5 h-5 text-muted-foreground"
        />
        <h4 class="text-sm font-semibold text-foreground">Server Endpoints</h4>
      </div>
      <button
        (click)="testAllServers()"
        [disabled]="isTesting()"
        class="flex items-center gap-1.5 px-2.5 py-1 text-xs bg-secondary text-foreground rounded-lg hover:bg-secondary/80 transition-colors disabled:opacity-50"
      >
        <ng-icon
          name="lucideRefreshCw"
          class="w-3.5 h-3.5"
          [class.animate-spin]="isTesting()"
        />
        Test All
      </button>
    </div>

    <p class="text-xs text-muted-foreground mb-3">Server directories to search for rooms. The active server is used for creating new rooms.</p>

    <!-- Server List -->
    <div class="space-y-2 mb-3">
      @for (server of servers(); track server.id) {
        <div
          class="flex items-center gap-3 p-2.5 rounded-lg border transition-colors"
          [class.border-primary]="server.isActive"
          [class.bg-primary/5]="server.isActive"
          [class.border-border]="!server.isActive"
          [class.bg-secondary/30]="!server.isActive"
        >
          <div
            class="w-2.5 h-2.5 rounded-full flex-shrink-0"
            [class.bg-green-500]="server.status === 'online'"
            [class.bg-red-500]="server.status === 'offline'"
            [class.bg-yellow-500]="server.status === 'checking'"
            [class.bg-muted]="server.status === 'unknown'"
          ></div>
          <div class="flex-1 min-w-0">
            <div class="flex items-center gap-2">
              <span class="text-sm font-medium text-foreground truncate">{{ server.name }}</span>
              @if (server.isActive) {
                <span class="text-[10px] bg-primary text-primary-foreground px-1.5 py-0.5 rounded-full">Active</span>
              }
            </div>
            <p class="text-xs text-muted-foreground truncate">{{ server.url }}</p>
            @if (server.latency !== undefined && server.status === 'online') {
              <p class="text-[10px] text-muted-foreground">{{ server.latency }}ms</p>
            }
          </div>
          <div class="flex items-center gap-1 flex-shrink-0">
            @if (!server.isActive) {
              <button
                (click)="setActiveServer(server.id)"
                class="p-1.5 hover:bg-secondary rounded-lg transition-colors"
                title="Set as active"
              >
                <ng-icon
                  name="lucideCheck"
                  class="w-3.5 h-3.5 text-muted-foreground hover:text-primary"
                />
              </button>
            }
            @if (!server.isDefault) {
              <button
                (click)="removeServer(server.id)"
                class="p-1.5 hover:bg-destructive/10 rounded-lg transition-colors"
                title="Remove"
              >
                <ng-icon
                  name="lucideTrash2"
                  class="w-3.5 h-3.5 text-muted-foreground hover:text-destructive"
                />
              </button>
            }
          </div>
        </div>
      }
    </div>

    <!-- Add New Server -->
    <div class="border-t border-border pt-3">
      <h4 class="text-xs font-medium text-foreground mb-2">Add New Server</h4>
      <div class="flex gap-2">
        <div class="flex-1 space-y-1.5">
          <input
            type="text"
            [(ngModel)]="newServerName"
            placeholder="Server name"
            class="w-full px-3 py-1.5 bg-secondary rounded-lg border border-border text-foreground text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
          />
          <input
            type="url"
            [(ngModel)]="newServerUrl"
            placeholder="Server URL (e.g., http://localhost:3001)"
            class="w-full px-3 py-1.5 bg-secondary rounded-lg border border-border text-foreground text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
          />
        </div>
        <button
          (click)="addServer()"
          [disabled]="!newServerName || !newServerUrl"
          class="px-3 py-1.5 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed self-end"
        >
          <ng-icon
            name="lucidePlus"
            class="w-4 h-4"
          />
        </button>
      </div>
      @if (addError()) {
        <p class="text-xs text-destructive mt-1.5">{{ addError() }}</p>
      }
    </div>
  </section>

  <!-- Connection Settings -->
  <section>
    <div class="flex items-center gap-2 mb-3">
      <ng-icon
        name="lucideServer"
        class="w-5 h-5 text-muted-foreground"
      />
      <h4 class="text-sm font-semibold text-foreground">Connection</h4>
    </div>
    <div class="space-y-3">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-sm font-medium text-foreground">Auto-reconnect</p>
          <p class="text-xs text-muted-foreground">Reconnect when connection is lost</p>
        </div>
        <label class="relative inline-flex items-center cursor-pointer">
          <input
            type="checkbox"
            [(ngModel)]="autoReconnect"
            (change)="saveConnectionSettings()"
            class="sr-only peer"
          />
          <div
            class="w-10 h-5 bg-secondary rounded-full peer peer-checked:bg-primary peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"
          ></div>
        </label>
      </div>
      <div class="flex items-center justify-between">
        <div>
          <p class="text-sm font-medium text-foreground">Search all servers</p>
          <p class="text-xs text-muted-foreground">Search across all server directories</p>
        </div>
        <label class="relative inline-flex items-center cursor-pointer">
          <input
            type="checkbox"
            [(ngModel)]="searchAllServers"
            (change)="saveConnectionSettings()"
            class="sr-only peer"
          />
          <div
            class="w-10 h-5 bg-secondary rounded-full peer peer-checked:bg-primary peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"
          ></div>
        </label>
      </div>
    </div>
  </section>
</div>