Move toju-app into own its folder

toju-app/src/app/features/settings/settings-modal/members-settings/members-settings.component.ts

@@ -0,0 +1,155 @@
+/* eslint-disable @typescript-eslint/member-ordering */
+import {
+  Component,
+  computed,
+  inject,
+  input
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { Store } from '@ngrx/store';
+import { lucideUserX, lucideBan } from '@ng-icons/lucide';
+
+import {
+  Room,
+  RoomMember,
+  UserRole
+} from '../../../../shared-kernel';
+import { RealtimeSessionFacade } from '../../../../core/realtime';
+import { RoomsActions } from '../../../../store/rooms/rooms.actions';
+import { UsersActions } from '../../../../store/users/users.actions';
+import { selectCurrentUser, selectUsersEntities } from '../../../../store/users/users.selectors';
+import { selectCurrentRoom } from '../../../../store/rooms/rooms.selectors';
+import { UserAvatarComponent } from '../../../../shared';
+
+interface ServerMemberView extends RoomMember {
+  isOnline: boolean;
+}
+
+@Component({
+  selector: 'app-members-settings',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    NgIcon,
+    UserAvatarComponent
+  ],
+  viewProviders: [
+    provideIcons({
+      lucideUserX,
+      lucideBan
+    })
+  ],
+  templateUrl: './members-settings.component.html'
+})
+export class MembersSettingsComponent {
+  private store = inject(Store);
+  private webrtcService = inject(RealtimeSessionFacade);
+
+  /** The currently selected server, passed from the parent. */
+  server = input<Room | null>(null);
+  /** Whether the current user is admin of this server. */
+  isAdmin = input(false);
+  accessRole = input<UserRole | null>(null);
+
+  currentUser = this.store.selectSignal(selectCurrentUser);
+  currentRoom = this.store.selectSignal(selectCurrentRoom);
+  usersEntities = this.store.selectSignal(selectUsersEntities);
+
+  members = computed<ServerMemberView[]>(() => {
+    const room = this.server();
+    const me = this.currentUser();
+    const currentRoom = this.currentRoom();
+    const usersEntities = this.usersEntities();
+
+    if (!room)
+      return [];
+
+    return (room.members ?? [])
+      .filter((member) => member.id !== me?.id && member.oderId !== me?.oderId)
+      .map((member) => {
+        const liveUser = currentRoom?.id === room.id
+          ? (usersEntities[member.id]
+            || Object.values(usersEntities).find((user) => !!user && user.oderId === member.oderId)
+            || null)
+          : null;
+
+        return {
+          ...member,
+          avatarUrl: liveUser?.avatarUrl || member.avatarUrl,
+          displayName: liveUser?.displayName || member.displayName,
+          isOnline: !!liveUser && (liveUser.isOnline === true || liveUser.status !== 'offline')
+        };
+      });
+  });
+
+  canChangeRoles(): boolean {
+    const role = this.accessRole();
+
+    return role === 'host' || role === 'admin';
+  }
+
+  canKickMembers(): boolean {
+    const role = this.accessRole();
+
+    return role === 'host' || role === 'admin' || role === 'moderator';
+  }
+
+  canBanMembers(): boolean {
+    const role = this.accessRole();
+
+    return role === 'host' || role === 'admin';
+  }
+
+  changeRole(member: ServerMemberView, role: 'admin' | 'moderator' | 'member'): void {
+    const room = this.server();
+
+    if (!room)
+      return;
+
+    const members = (room.members ?? []).map((existingMember) =>
+      existingMember.id === member.id || existingMember.oderId === member.oderId
+        ? { ...existingMember,
+          role }
+        : existingMember
+    );
+
+    this.store.dispatch(RoomsActions.updateRoom({ roomId: room.id,
+      changes: { members } }));
+
+    if (this.currentRoom()?.id === room.id) {
+      this.store.dispatch(UsersActions.updateUserRole({ userId: member.id,
+        role }));
+    }
+
+    this.webrtcService.broadcastMessage({
+      type: 'role-change',
+      roomId: room.id,
+      targetUserId: member.id,
+      role
+    });
+  }
+
+  kickMember(member: ServerMemberView): void {
+    const room = this.server();
+
+    if (!room)
+      return;
+
+    this.store.dispatch(UsersActions.kickUser({ userId: member.id,
+      roomId: room.id }));
+  }
+
+  banMember(member: ServerMemberView): void {
+    const room = this.server();
+
+    if (!room)
+      return;
+
+    this.store.dispatch(UsersActions.banUser({ userId: member.id,
+      roomId: room.id,
+      displayName: member.displayName }));
+  }
+}