Add new settngs modal

src/app/features/settings/settings-modal/server-settings/server-settings.component.html

@@ -0,0 +1,123 @@
+@if (serverData()) {
+  <div class="space-y-5 max-w-xl">
+    <section>
+      <h4 class="text-sm font-semibold text-foreground mb-3">Room Settings</h4>
+      @if (!isAdmin()) {
+        <p class="text-xs text-muted-foreground mb-3">
+          You are viewing this server's settings as a non-admin. Only the server owner can make
+          changes.
+        </p>
+      }
+      <div class="space-y-4">
+        <div>
+          <label class="block text-xs font-medium text-muted-foreground mb-1">Room Name</label>
+          <input
+            type="text"
+            [(ngModel)]="roomName"
+            [readOnly]="!isAdmin()"
+            class="w-full px-3 py-2 bg-secondary rounded-lg border border-border text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+            [class.opacity-60]="!isAdmin()"
+            [class.cursor-not-allowed]="!isAdmin()"
+          />
+        </div>
+        <div>
+          <label class="block text-xs font-medium text-muted-foreground mb-1">Description</label>
+          <textarea
+            [(ngModel)]="roomDescription"
+            [readOnly]="!isAdmin()"
+            rows="3"
+            class="w-full px-3 py-2 bg-secondary rounded-lg border border-border text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary resize-none"
+            [class.opacity-60]="!isAdmin()"
+            [class.cursor-not-allowed]="!isAdmin()"
+          ></textarea>
+        </div>
+        @if (isAdmin()) {
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-sm font-medium text-foreground">Private Room</p>
+              <p class="text-xs text-muted-foreground">Require approval to join</p>
+            </div>
+            <button
+              (click)="togglePrivate()"
+              class="p-2 rounded-lg transition-colors"
+              [class.bg-primary]="isPrivate()"
+              [class.text-primary-foreground]="isPrivate()"
+              [class.bg-secondary]="!isPrivate()"
+              [class.text-muted-foreground]="!isPrivate()"
+            >
+              @if (isPrivate()) {
+                <ng-icon name="lucideLock" class="w-4 h-4" />
+              } @else {
+                <ng-icon name="lucideUnlock" class="w-4 h-4" />
+              }
+            </button>
+          </div>
+        } @else {
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-sm font-medium text-foreground">Private Room</p>
+              <p class="text-xs text-muted-foreground">Require approval to join</p>
+            </div>
+            <span class="text-sm text-muted-foreground">{{ isPrivate() ? 'Yes' : 'No' }}</span>
+          </div>
+        }
+        <div>
+          <label class="block text-xs font-medium text-muted-foreground mb-1"
+            >Max Users (0 = unlimited)</label
+          >
+          <input
+            type="number"
+            [(ngModel)]="maxUsers"
+            [readOnly]="!isAdmin()"
+            min="0"
+            class="w-full px-3 py-2 bg-secondary rounded-lg border border-border text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+            [class.opacity-60]="!isAdmin()"
+            [class.cursor-not-allowed]="!isAdmin()"
+          />
+        </div>
+      </div>
+    </section>
+
+    @if (isAdmin()) {
+      <button
+        (click)="saveServerSettings()"
+        class="w-full px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors flex items-center justify-center gap-2 text-sm"
+        [class.bg-green-600]="saveSuccess() === 'server'"
+        [class.hover:bg-green-600]="saveSuccess() === 'server'"
+      >
+        <ng-icon name="lucideCheck" class="w-4 h-4" />
+        {{ saveSuccess() === 'server' ? 'Saved!' : 'Save Settings' }}
+      </button>
+
+      <!-- Danger Zone -->
+      <div class="pt-4 border-t border-border">
+        <h4 class="text-sm font-medium text-destructive mb-3">Danger Zone</h4>
+        <button
+          (click)="confirmDeleteRoom()"
+          class="w-full px-4 py-2 bg-destructive/10 text-destructive border border-destructive/20 rounded-lg hover:bg-destructive/20 transition-colors flex items-center justify-center gap-2 text-sm"
+        >
+          <ng-icon name="lucideTrash2" class="w-4 h-4" />
+          Delete Room
+        </button>
+      </div>
+    }
+  </div>
+
+  <!-- Delete Confirmation (sub-modal) -->
+  @if (showDeleteConfirm()) {
+    <app-confirm-dialog
+      title="Delete Room"
+      confirmLabel="Delete Room"
+      variant="danger"
+      [widthClass]="'w-96 max-w-[90vw]'"
+      (confirmed)="deleteRoom()"
+      (cancelled)="showDeleteConfirm.set(false)"
+    >
+      <p>Are you sure you want to delete this room? This action cannot be undone.</p>
+    </app-confirm-dialog>
+  }
+} @else {
+  <div class="flex items-center justify-center h-40 text-muted-foreground text-sm">
+    Select a server from the sidebar to manage
+  </div>
+}