Feat/109 status indicator update

I added an indicator status that krack whether a user is online or disconnected of a current session, as you can see on the image below (red for disconnected and green for connected). So, the logic is simple, I noticed that there is an attribut called is_active for each user which is true by default. So, when a user logs out, I turned this value to False. So, in Message.svelte, I handle the user status based on this attribut. But the issue is not yet ended up, I need to think how to handle the fact that a user is still connected but not present in the session. So, I was wondering about if I need to set a timer to track the inactivity of a user (e.g if a user didn't make an action during a while, I set its presence as inactive ?)

frontend/src/routes/sessions/[id]/+page.svelte

@@ -3,28 +3,12 @@
 	import type { PageData } from './$types.js';
 	import WeeklySurvey from './WeeklySurvey.svelte';
 	import Chatbox from './Chatbox.svelte';
-	import type User from '$lib/types/user';
 
 	let { data }: { data: PageData } = $props();
 	let user = data.user!;
 
 	let { session, jwt } = data;
-
-	function getUserStatus(user: User | null, isIn: boolean): string {
-		if (!user) {
-			return 'red';
-		}
-
-		if (!user.is_active) {
-			return 'red';
-		}
-
-		if (isIn) {
-			return 'green';
-		}
-
-		return 'orange';
-	}
+	let { onlineUsers } = session;
 </script>
 
 <div class="h-full flex lg:flex-row flex-col pt-2 lg:pt-0">
@@ -34,28 +18,22 @@
 		<h2 class="text-center font-bold">{$t('utils.words.participants')}</h2>
 		<div class="pb-2 space-y-2">
 			{#each session.users as sessionUser (sessionUser.id)}
-				<div class="flex space-x-2 items-center">
-					<div class="relative mx-2 chat-image size-6" title={sessionUser.nickname}>
+				<div class="flex space-x-2">
+					<div class="rounded-full mx-2 chat-image size-6" title={sessionUser.nickname}>
 						<img
 							src={`https://gravatar.com/avatar/${sessionUser.emailHash}?d=identicon`}
 							alt={sessionUser.nickname}
-							class="rounded-full border-2 text-sm size-6"
+							class="rounded-full border-2 text-sm {sessionUser.id == user?.id ||
+							$onlineUsers.has(sessionUser.id)
+								? 'border-green-500'
+								: 'border-red-500'}"
 						/>
-						<div
-							class={`absolute bottom-0 right-0 w-3 h-3 rounded-full border-2 border-white ${
-								getUserStatus(sessionUser, true) === 'green'
-									? 'bg-green-500'
-									: getUserStatus(sessionUser, false) === 'orange'
-										? 'bg-orange-500'
-										: 'bg-red-500'
-							}`}
-						></div>
 					</div>
+
 					<span class:font-bold={sessionUser === user}>{sessionUser.nickname}</span>
 				</div>
 			{/each}
 		</div>
-
 		<h2 class="text-center font-bold border-t pt-2">{$t('utils.words.topics')}</h2>
 		<p class="text-center text-sm text-neutral-500 italic">{$t('session.noTopic')}</p>
 	</div>