feat: active user count

src/lib/components/layout/Sidebar/UserMenu.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { DropdownMenu } from 'bits-ui';
-	import { createEventDispatcher, getContext } from 'svelte';
+	import { createEventDispatcher, getContext, onMount } from 'svelte';
 
 	import { flyAndScale } from '$lib/utils/transitions';
 	import { goto } from '$app/navigation';
 	import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
-	import { showSettings } from '$lib/stores';
+	import { showSettings, activeUserCount } from '$lib/stores';
 	import { fade, slide } from 'svelte/transition';
 
 	const i18n = getContext('i18n');
@@ -107,7 +107,7 @@
 				</button>
 			{/if}
 
-			<hr class=" dark:border-gray-800 my-2 p-0" />
+			<hr class=" dark:border-gray-800 my-1.5 p-0" />
 
 			<button
 				class="flex rounded-md py-2 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
@@ -139,6 +139,30 @@
 				<div class=" self-center font-medium">{$i18n.t('Sign Out')}</div>
 			</button>
 
+			{#if $activeUserCount}
+				<hr class=" dark:border-gray-800 my-1.5 p-0" />
+
+				<div class="flex rounded-md py-1.5 px-3 text-xs gap-2.5 items-center">
+					<div class=" flex items-center">
+						<span class="relative flex size-2">
+							<span
+								class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"
+							/>
+							<span class="relative inline-flex rounded-full size-2 bg-green-500" />
+						</span>
+					</div>
+
+					<div class=" translate-y-[0.25px]">
+						<span class=" font-medium">
+							{$i18n.t('Active Users')}:
+						</span>
+						<span class=" font-semibold">
+							{$activeUserCount}
+						</span>
+					</div>
+				</div>
+			{/if}
+
 			<!-- <DropdownMenu.Item class="flex items-center px-3 py-2 text-sm  font-medium">
 				<div class="flex items-center">Profile</div>
 			</DropdownMenu.Item> -->

src/lib/stores/index.ts

@@ -15,6 +15,7 @@ export const MODEL_DOWNLOAD_POOL = writable({});
 export const mobile = writable(false);
 
 export const socket: Writable<null | Socket> = writable(null);
+export const activeUserCount: Writable<null | number> = writable(null);
 
 export const theme = writable('system');
 export const chatId = writable('');