Add new settngs modal

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

@@ -0,0 +1,64 @@
+@if (server()) {
+  <div class="space-y-3 max-w-xl">
+    @if (membersFiltered().length === 0) {
+      <p class="text-sm text-muted-foreground text-center py-8">No other members online</p>
+    } @else {
+      @for (user of membersFiltered(); track user.id) {
+        <div class="flex items-center gap-3 p-3 bg-secondary/50 rounded-lg">
+          <app-user-avatar [name]="user.displayName || '?'" size="sm" />
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center gap-1.5">
+              <p class="text-sm font-medium text-foreground truncate">
+                {{ user.displayName }}
+              </p>
+              @if (user.role === 'host') {
+                <span class="text-[10px] bg-yellow-500/20 text-yellow-400 px-1 py-0.5 rounded"
+                  >Owner</span
+                >
+              } @else if (user.role === 'admin') {
+                <span class="text-[10px] bg-blue-500/20 text-blue-400 px-1 py-0.5 rounded"
+                  >Admin</span
+                >
+              } @else if (user.role === 'moderator') {
+                <span class="text-[10px] bg-green-500/20 text-green-400 px-1 py-0.5 rounded"
+                  >Mod</span
+                >
+              }
+            </div>
+          </div>
+          @if (user.role !== 'host' && isAdmin()) {
+            <div class="flex items-center gap-1">
+              <select
+                [ngModel]="user.role"
+                (ngModelChange)="changeRole(user, $event)"
+                class="text-xs px-2 py-1 bg-secondary rounded border border-border text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
+              >
+                <option value="member">Member</option>
+                <option value="moderator">Moderator</option>
+                <option value="admin">Admin</option>
+              </select>
+              <button
+                (click)="kickMember(user)"
+                class="p-1 rounded hover:bg-destructive/20 text-muted-foreground hover:text-destructive transition-colors"
+                title="Kick"
+              >
+                <ng-icon name="lucideUserX" class="w-4 h-4" />
+              </button>
+              <button
+                (click)="banMember(user)"
+                class="p-1 rounded hover:bg-destructive/20 text-muted-foreground hover:text-destructive transition-colors"
+                title="Ban"
+              >
+                <ng-icon name="lucideBan" class="w-4 h-4" />
+              </button>
+            </div>
+          }
+        </div>
+      }
+    }
+  </div>
+} @else {
+  <div class="flex items-center justify-center h-40 text-muted-foreground text-sm">
+    Select a server from the sidebar to manage
+  </div>
+}