ui polish

dotnet/AipsRT/Hubs/WhiteboardHub.cs

@@ -5,6 +5,7 @@ using AipsCore.Application.Models.Whiteboard.Command.RejectUserRequestToJoin;
 using AipsCore.Application.Models.Whiteboard.Query.GetMembershipStatus;
 using AipsCore.Domain.Models.WhiteboardMembership.Enums;
 using AipsRT.Model.Memberships;
+using AipsRT.Model.Users;
 using AipsRT.Model.Whiteboard;
 using AipsRT.Model.Whiteboard.Shapes;
 using AipsRT.Model.Whiteboard.Structs;
@@ -28,6 +29,23 @@ public class WhiteboardHub : Hub
         _membershipService = membershipService;
     }
 
+    public override async Task OnDisconnectedAsync(Exception? exception)
+    {
+        var userId = CurrentUserId;
+        var whiteboard = _whiteboardManager.GetWhiteboardForUser(userId);
+
+        if (whiteboard != null)
+        {
+            whiteboard.RemoveActiveUser(userId);
+            _whiteboardManager.RemoveUserFromWhiteboard(userId);
+
+            await Clients.Group(whiteboard.WhiteboardId.ToString())
+                .SendAsync("Leaved", userId.ToString());
+        }
+
+        await base.OnDisconnectedAsync(exception);
+    }
+    
     public async Task JoinWhiteboard(Guid whiteboardId)
     {
         if (!_whiteboardManager.WhiteboardExists(whiteboardId))
@@ -56,11 +74,28 @@ public class WhiteboardHub : Hub
         if (status == WhiteboardMembershipStatus.Accepted)
         {
             _whiteboardManager.AddUserToWhiteboard(userId, whiteboardId);
-            
+
+            var joiningUser = whiteboard.Users.FirstOrDefault(u => u.UserId == userId);
+            if (joiningUser == null)
+            {
+                if (ownerId == userId)
+                {
+                    joiningUser = whiteboard.Owner;
+                }
+                else
+                {
+                    joiningUser = new User(userId, Context.User?.Identity?.Name ?? "Unknown",
+                        "");
+                    whiteboard.AddUser(joiningUser);
+                }
+            }
+            whiteboard.AddActiveUser(joiningUser);
+
             var state = _whiteboardManager.GetWhiteboard(whiteboardId)!;
             await Clients.Caller.SendAsync("InitWhiteboard", state);
-            
+
-            await Clients.GroupExcept(whiteboardId.ToString(), Context.ConnectionId).SendAsync("Joined", Context.UserIdentifier!);
+            await Clients.GroupExcept(whiteboardId.ToString(),
+                Context.ConnectionId).SendAsync("Joined", joiningUser);
         }
         else
         {
@@ -104,8 +139,13 @@ public class WhiteboardHub : Hub
 
     public async Task LeaveWhiteboard(Guid whiteboardId)
     {
+        var userId = CurrentUserId;
+        _whiteboardManager.RemoveUserFromWhiteboard(userId);
+        _whiteboardManager.GetWhiteboard(whiteboardId)?.RemoveActiveUser(userId);
+
         await Clients.GroupExcept(whiteboardId.ToString(), Context.ConnectionId)
             .SendAsync("Leaved", Context.UserIdentifier!);
+
     }
 
     private Guid CurrentUserId => Guid.Parse(Context.UserIdentifier!);

dotnet/AipsRT/Model/Whiteboard/GetWhiteboardService.cs

@@ -28,6 +28,7 @@ public class GetWhiteboardService
         {
             WhiteboardId = entity.Id,
             OwnerId = entity.OwnerId,
+            Owner = new User(entity.Owner.Id, entity.Owner.UserName!, entity.Owner.Email!)
         };
 
         foreach (var membership in entity.Memberships)

dotnet/AipsRT/Model/Whiteboard/Whiteboard.cs

@@ -8,9 +8,15 @@ public class Whiteboard
     public Guid WhiteboardId { get; set; }
 
     public Guid OwnerId { get; set; }
+    public User Owner { get; set; } = null!;
 
     public List<User> Users { get; } = [];
 
+    public List<User> ActiveUsers { get; } = [];
+    public void AddActiveUser(User user) => ActiveUsers.Add(user);
+    public void RemoveActiveUser(Guid userId) 
+        => ActiveUsers.RemoveAll(u => u.UserId == userId);
+    
     public List<Shape> Shapes { get; } = [];
 
     public List<Rectangle> Rectangles { get; } = [];

front/src/assets/scss/_app.scss

@@ -4,3 +4,7 @@
   max-width: 420px;
   margin: 4rem auto;
 }
+
+.btn-close {
+  filter: invert(1) grayscale(100%) brightness(200%);
+}

front/src/assets/scss/_variables.scss

@@ -22,5 +22,3 @@ $border-color: #2a2a2a;
 
 $link-color: $primary;
 
-$btn-close-color: #e5e7eb;
-$btn-close-filter: invert(1);

front/src/components/AppTopBar.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import { RouterLink } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 
 const auth = useAuthStore()
+const showLogoutConfirm = ref(false)
 </script>
 
 <template>
@@ -27,9 +29,6 @@ const auth = useAuthStore()
           <li class="nav-item">
             <RouterLink class="nav-link" active-class="active" to="/test">Test</RouterLink>
           </li>
-          <li class="nav-item">
-            <RouterLink class="nav-link" active-class="active" to="/about">About</RouterLink>
-          </li>
         </ul>
 
         <ul class="navbar-nav">
@@ -38,7 +37,7 @@ const auth = useAuthStore()
               <span class="nav-link text-light">{{ auth.user?.username }}</span>
             </li>
             <li class="nav-item">
-              <button class="btn btn-outline-light btn-sm my-1" @click="auth.logout()">
+              <button class="btn btn-outline-light btn-sm my-1" @click="showLogoutConfirm = true">
                 Logout
               </button>
             </li>
@@ -55,4 +54,46 @@ const auth = useAuthStore()
       </div>
     </div>
   </nav>
+
+  <Teleport to="body">
+    <div
+      v-if="showLogoutConfirm"
+      class="modal d-block"
+      tabindex="-1"
+      style="background: rgba(0,0,0,0.5)"
+      @click.self="showLogoutConfirm = false"
+    >
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header border-0 pb-0">
+            <h5 class="modal-title">Logout</h5>
+            <button
+              type="button"
+              class="btn-close"
+              @click="showLogoutConfirm = false"
+            ></button>
+          </div>
+          <div class="modal-body">
+            Are you sure you want to logout?
+          </div>
+          <div class="modal-footer border-0 pt-0">
+            <button
+              type="button"
+              class="btn btn-outline-secondary"
+              @click="showLogoutConfirm = false"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              class="btn btn-danger"
+              @click="showLogoutConfirm = false; auth.logout()"
+            >
+              Yes, logout
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
 </template>

front/src/components/RecentWhiteboardsItem.vue

@@ -19,7 +19,7 @@ const handleClick = () => emit('click', props.whiteboard)
     @click="handleClick"
   >
     <div class="d-flex justify-content-between align-items-start mb-2">
-      <h5 class="mb-0 text-dark">{{ whiteboard.title }}</h5>
+      <h5 class="mb-0">{{ whiteboard.title }}</h5>
       <small class="text-muted">{{ formatDate(whiteboard.createdAt) }}</small>
     </div>
   </div>

front/src/components/RecentWhiteboardsPanel.vue

@@ -18,7 +18,7 @@ import RecentWhiteboardsList from './RecentWhiteboardsList.vue'
       </h5>
       <button
         type="button"
-        class="btn-close btn-close-white"
+        class="btn-close"
         data-bs-dismiss="offcanvas"
         aria-label="Close"
       />

front/src/components/WhiteboardHistoryItem.vue

@@ -44,7 +44,7 @@ const handleConfirmDelete = (e: MouseEvent) => {
     @click="handleClick"
   >
     <div class="d-flex justify-content-between align-items-start mb-2">
-      <h5 class="mb-0 text-dark">{{ whiteboard.title }}</h5>
+      <h5 class="mb-0">{{ whiteboard.title }}</h5>
       <div class="d-flex align-items-center gap-2">
         <small class="text-muted">{{ formatDate(whiteboard.createdAt) }}</small>
         <button

front/src/components/WhiteboardHistorySidebar.vue

@@ -18,7 +18,7 @@ import WhiteboardHistoryList from './WhiteboardHistoryList.vue'
       </h5>
       <button
         type="button"
-        class="btn-close btn-close-white"
+        class="btn-close"
         data-bs-dismiss="offcanvas"
         aria-label="Close"
       />

front/src/components/whiteboard/WhiteboardToolbar.vue

@@ -2,18 +2,21 @@
 import {computed, ref} from 'vue'
 import { useWhiteboardStore } from '@/stores/whiteboard.ts'
 import { useWhiteboardsStore } from "@/stores/whiteboards.ts";
+import { useAuthStore } from '@/stores/auth'
+import { avatarColorFromString } from '@/composables/useShapeOwner'
 import type { ShapeTool, Arrow, Line, Rectangle, TextShape } from '@/types/whiteboard.ts'
 
 const sessionStore = useWhiteboardStore()
 const infoStore = useWhiteboardsStore()
+const auth = useAuthStore()
 const emit = defineEmits<{ leave: [] }>()
 
 const tools: { name: ShapeTool; label: string; icon: string; enabled: boolean }[] = [
-  { name: 'hand', label: 'Select', icon: '\u270B', enabled: true },
+  { name: 'hand', label: 'Select', icon: 'bi-cursor', enabled: true },
-  { name: 'rectangle', label: 'Rectangle', icon: '\u25AD', enabled: true },
+  { name: 'rectangle', label: 'Rectangle', icon: 'bi-square', enabled: true },
-  { name: 'arrow', label: 'Arrow', icon: '\u2192', enabled: true },
+  { name: 'arrow', label: 'Arrow', icon: 'bi-arrow-up-right', enabled: true },
-  { name: 'line', label: 'Line', icon: '\u2571', enabled: true },
+  { name: 'line', label: 'Line', icon: 'bi-slash-lg', enabled: true },
-  { name: 'text', label: 'Text', icon: 'T', enabled: true },
+  { name: 'text', label: 'Text', icon: 'bi-fonts', enabled: true },
 ]
 
 const colors = ['#4f9dff', '#ff4f4f', '#4fff4f', '#ffff4f', '#ff4fff', '#ffffff', '#ff9f4f', '#4fffff']
@@ -86,7 +89,7 @@ const copyCodeToClipboard = async () => {
         :title="tool.enabled ? tool.label : `${tool.label} (coming soon)`"
         @click="tool.enabled && sessionStore.selectTool(tool.name)"
       >
-        {{ tool.icon }}
+        <i :class="['bi', tool.icon]"></i>
       </button>
     </div>
 
@@ -140,6 +143,28 @@ const copyCodeToClipboard = async () => {
       </div>
     </div>
 
+    <div v-if="sessionStore.connectedUsers.length" class="participants-panel">
+      <div class="property-label">Participants ({{ sessionStore.connectedUsers.length }})</div>
+      <div class="participants-list">
+        <div
+          v-for="user in sessionStore.connectedUsers"
+          :key="user.userId"
+          class="participant"
+        >
+          <span
+            class="participant-avatar"
+            :style="{ backgroundColor: avatarColorFromString(user.username || user.userId) }"
+          >
+            {{ (user.username || '?').charAt(0).toUpperCase() }}
+          </span>
+          <span class="participant-name">
+            {{ user.username || 'Unknown' }}
+            <span v-if="user.userId === auth.user?.userId" class="you-label">(You)</span>
+          </span>
+        </div>
+      </div>
+    </div>
+
     <div class="toolbar-footer">
       <div class="position-relative mb-2">
         <button
@@ -253,6 +278,52 @@ const copyCodeToClipboard = async () => {
   accent-color: #4f9dff;
 }
 
+.participants-panel {
+  margin-top: 12px;
+  border-top: 1px solid #2a2a3e;
+  padding-top: 10px;
+}
+
+.participants-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-height: 160px;
+  overflow-y: auto;
+}
+
+.participant {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.participant-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 700;
+  color: #fff;
+  flex-shrink: 0;
+}
+
+.participant-name {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.85);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.you-label {
+  color: #8a8a9e;
+  font-size: 11px;
+}
+
 .toolbar-footer {
   margin-top: auto;
   padding-top: 8px;

front/src/composables/useShapeOwner.ts

@@ -2,7 +2,7 @@ import { ref, watch, type Ref } from 'vue'
 import { useAuthStore } from '@/stores/auth'
 import { fetchUser } from '@/services/userService'
 
-function avatarColorFromString(str: string): string {
+export function avatarColorFromString(str: string): string {
   let hash = 5381
   for (let i = 0; i < str.length; i++) {
     hash = ((hash << 5) + hash + str.charCodeAt(i)) & 0xffffffff

front/src/router/index.ts

@@ -17,12 +17,6 @@ const router = createRouter({
       component: () => import('../views/TestView.vue'),
       meta: { requiresAuth: false },
     },
-    {
-      path: '/about',
-      name: 'about',
-      component: () => import('../views/AboutView.vue'),
-      meta: { requiresAuth: false },
-    },
     {
       path: '/login',
       name: 'login',

front/src/services/whiteboardHubService.ts

@@ -69,8 +69,8 @@ export const whiteboardHubService = {
     client.on<MoveShapeCommand>('MovedShape', callback)
   },
 
-  onJoined(callback: (userId: string) => void) {
+  onJoined(callback: (user: User) => void) {
-    client.on<string>('Joined', callback)
+    client.on<User>('Joined', callback)
   },
 
   onLeaved(callback: (userId: string) => void) {

front/src/stores/whiteboard.ts

@@ -9,6 +9,7 @@ import type {User} from "@/types";
 export const useWhiteboardStore = defineStore('whiteboard', () => {
   const whiteboard = ref<Whiteboard | null>(null)
   const pendingUsers = ref<User[]>([])
+  const connectedUsers = ref<User[]>([])
 
   const selectedTool = ref<ShapeTool>('hand')
   const isConnected = ref(false)
@@ -51,8 +52,10 @@ export const useWhiteboardStore = defineStore('whiteboard', () => {
 
   function registerHubEvents() {
     whiteboardHubService.onInitWhiteboard((wb) => {
+      console.log('InitWhiteboard payload:', JSON.stringify(wb, null, 2))
       deselectShape()
       whiteboard.value = wb
+      connectedUsers.value = wb.activeUsers ?? []
       isLoading.value = false
     })
 
@@ -76,12 +79,14 @@ export const useWhiteboardStore = defineStore('whiteboard', () => {
       applyMoveShape(command.shapeId, command.newPositionX, command.newPositionY)
     })
 
-    whiteboardHubService.onJoined((userId) => {
+    whiteboardHubService.onJoined((user) => {
-      console.log('User joined:', userId)
+      if (!connectedUsers.value.some(u => u.userId === user.userId)) {
+        connectedUsers.value.push(user)
+      }
     })
 
     whiteboardHubService.onLeaved((userId) => {
-      console.log('User left:', userId)
+      connectedUsers.value = connectedUsers.value.filter(u => u.userId !== userId)
     })
 
     whiteboardHubService.onWaitingForApproval(() => {
@@ -155,6 +160,7 @@ export const useWhiteboardStore = defineStore('whiteboard', () => {
     await whiteboardHubService.disconnect()
 
     whiteboard.value = null
+    connectedUsers.value = []
     isConnected.value = false
     selectedTool.value = 'hand'
     deselectShape()
@@ -251,6 +257,7 @@ export const useWhiteboardStore = defineStore('whiteboard', () => {
     toolThickness,
     toolTextSize,
     pendingUsers,
+    connectedUsers,
     approveUser,
     rejectUser,
     cancelJoinRequest,

front/src/types/whiteboard.ts

@@ -37,6 +37,8 @@ export interface Whiteboard {
   arrows: Arrow[]
   lines: Line[]
   textShapes: TextShape[]
+  users: import('@/types').User[]
+  activeUsers: import('@/types').User[]
 }
 
 export interface MoveShapeCommand {

front/src/views/AboutView.vue

@@ -1,3 +0,0 @@
-<template>
-  <h1>About</h1>
-</template>

front/src/views/HomeView.vue

@@ -6,7 +6,7 @@ import WhiteboardHistorySidebar from '@/components/WhiteboardHistorySidebar.vue'
 import RecentWhiteboardsPanel from '@/components/RecentWhiteboardsPanel.vue'
 import {useAuthStore} from '@/stores/auth'
 import {useWhiteboardsStore} from "@/stores/whiteboards.ts";
-import {MembershipStatus} from "@/enums";
+import {MembershipStatus, WhiteboardJoinPolicy} from "@/enums";
 
 const auth = useAuthStore()
 const whiteboards = useWhiteboardsStore()
@@ -14,6 +14,8 @@ const router = useRouter()
 
 const joinCode = ref('')
 const whiteboardTitle = ref('')
+const selectedJoinPolicy = ref(WhiteboardJoinPolicy.FreeToJoin)
+const maxParticipants = ref(10)
 const showCreateModal = ref(false)
 
 async function handleCreateNewWhiteboard() {
@@ -27,6 +29,8 @@ async function handleCreateNewWhiteboard() {
 
     showCreateModal.value = false
     whiteboardTitle.value = ''
+    selectedJoinPolicy.value = WhiteboardJoinPolicy.FreeToJoin
+    maxParticipants.value = 10
 
     await router.push({ name: 'whiteboard', params: { id: newWhiteboardId } })
   } catch (e) {
@@ -124,6 +128,23 @@ async function joinWithCode() {
             class="form-control bg-dark text-light border-secondary"
             placeholder="Whiteboard title"
           />
+          <label class="form-label mt-3 mb-1">Join Policy</label>
+          <select
+            v-model="selectedJoinPolicy"
+            class="form-select bg-dark text-light border-secondary"
+          >
+            <option :value="WhiteboardJoinPolicy.FreeToJoin">Free to Join</option>
+            <option :value="WhiteboardJoinPolicy.RequestToJoin">Request to Join</option>
+            <option :value="WhiteboardJoinPolicy.Private">Private</option>
+          </select>
+          <label class="form-label mt-3 mb-1">Max Participants</label>
+          <input
+            v-model.number="maxParticipants"
+            type="number"
+            min="2"
+            max="50"
+            class="form-control bg-dark text-light border-secondary"
+          />
         </div>
         <div class="modal-footer border-secondary">
           <button type="button" class="btn btn-secondary" @click="showCreateModal = false">Cancel</button>