Update/live lessons

src/package.json

@@ -81,6 +81,7 @@
 		"axios": "^1.7.2",
 		"bcrypt": "^5.1.1",
 		"canvas-confetti": "^1.9.3",
+		"date-fns": "^4.1.0",
 		"mongodb": "^6.8.0",
 		"mongoose": "^8.4.5",
 		"playroomkit": "^0.0.79",

src/src/lib/components/announcements/Main.svelte

@@ -12,7 +12,7 @@
 	$: ({ id, role, announcements } = data);
 </script>
 
-<main class="container mx-auto my-2 px-4">
+<main class="container mx-auto my-2 mt-24 px-4">
 	{#if announcements.length === 0}
 		<div
 			class="flex h-full w-full flex-col items-center justify-center space-x-8 space-y-16 lg:flex-row lg:space-y-0 2xl:space-x-0"

src/src/lib/components/common/Navbar.svelte

@@ -32,27 +32,46 @@
 	];
 
 	const currentLinks = navLinks[role];
+
+	const signout = () => {
+		window.location.href = '/signout';
+	};
 </script>
 
-<Navbar class="fixed start-0 top-0 z-20 w-full border-b px-2 py-2.5 sm:px-4">
-	<NavBrand href="/">
-		<img src="images/class-connect-logo.png" class="mr-3 h-8 sm:h-10" alt="ClassConnect Logo" />
-		<span
-			class="self-center whitespace-nowrap text-xl font-semibold text-gray-800 transition-colors duration-300 dark:text-white"
-			>ClassConnect</span
-		>
-	</NavBrand>
-	<NavHamburger />
-	<NavUl>
-		{#each currentLinks as { name, href }}
-			<NavLi {href} active={activeUrl === href}>
-				{name}
+<div class="relative px-8">
+	<Navbar class="fixed start-0 top-0 z-20 w-full border-b px-2 sm:px-4 md:py-0.5 lg:py-0.5">
+		<NavBrand href="/">
+			<img src="images/class-connect-logo.png" class="mr-3 h-8 sm:h-10" alt="ClassConnect Logo" />
+			<span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white"
+				>ClassConnect</span
+			>
+		</NavBrand>
+		<NavHamburger />
+		<NavUl>
+			{#each [...currentLinks, ...commonLinks] as { name, href }}
+				<NavLi {href} active={activeUrl === href} class="nav-link font-semibold">
+					{name}
+				</NavLi>
+			{/each}
+			<NavLi on:click={signout}>
+				<button
+					class="w-full transform rounded-lg bg-red-600 px-3.5 py-2 text-left font-semibold text-white transition duration-300 ease-in-out hover:bg-red-700 hover:shadow-xl dark:bg-red-700 dark:hover:bg-red-800"
+				>
+					Sign Out
+				</button>
 			</NavLi>
-		{/each}
-		{#each commonLinks as { name, href }}
-			<NavLi {href} active={activeUrl === href}>
-				{name}
-			</NavLi>
-		{/each}
-	</NavUl>
-</Navbar>
+		</NavUl>
+	</Navbar>
+</div>
+
+<style>
+	:global(.nav-link) {
+		padding-top: 0.5rem;
+	}
+	@media (max-width: 768px) {
+		:global(.nav-link) {
+			padding-left: 1.5rem !important;
+			font-weight: bold;
+		}
+	}
+</style>

src/src/lib/components/lessons/lesson/AttendanceList.svelte

@@ -6,7 +6,7 @@
 		MicrophoneSolid,
 		VideoCameraSolid,
 		VideoCameraOutline,
-		MicrophoneSlashOutline
+		MicrophoneSlashSolid
 	} from 'flowbite-svelte-icons';
 
 	import type { Writable } from 'svelte/store';
@@ -27,28 +27,30 @@
 	});
 </script>
 
-<Listgroup active class="h-dvh p-4">
+<Listgroup class="h-dvh rounded-lg bg-white p-4 shadow-lg dark:bg-gray-800">
 	<h2 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">
 		Participants ({participants.length})
 	</h2>
 
 	{#each participants as participant (participant.sessionId)}
-		<ListgroupItem class="gap-2 text-base font-semibold">
-			<Avatar src={participant.image} size="xs" />
+		<ListgroupItem class="flex items-center gap-4 text-base font-semibold">
+			<Avatar src={participant.image} size="sm" class="shadow-md" />
 
-			<p class="text-sm text-gray-500">{participant.name}</p>
+			<div class="flex flex-col">
+				<p class="text-gray-900 dark:text-gray-200">{participant.name}</p>
+			</div>
 
 			<div class="ml-auto flex space-x-2">
 				{#if hasAudio(participant)}
-					<MicrophoneSolid color="green" />
+					<MicrophoneSolid class="text-green-500" />
 				{:else}
-					<MicrophoneSlashOutline color="red" />
+					<MicrophoneSlashSolid class="text-red-500" />
 				{/if}
 
 				{#if hasVideo(participant)}
-					<VideoCameraSolid color="green" />
+					<VideoCameraSolid class="text-green-500" />
 				{:else}
-					<VideoCameraOutline color="red" />
+					<VideoCameraOutline class="text-red-500" />
 				{/if}
 			</div>
 		</ListgroupItem>

src/src/lib/components/lessons/lesson/Chat.svelte

@@ -2,16 +2,15 @@
 	import { onMount, afterUpdate } from 'svelte';
 	import { Button, Input, Avatar } from 'flowbite-svelte';
 	import type { Channel, FormatMessageResponse } from 'stream-chat';
-
 	import AttendanceList from './AttendanceList.svelte';
 
 	export let channel: Channel;
 
 	let state: any;
 	let newMessage = '';
-	let activeTab = 'Chat';
+	let activeTab = 'Chat'; // "Chat" by default
 	let chatContainer: HTMLElement;
-	let messages: FormatMessageResponse[];
+	let messages: FormatMessageResponse[] = []; // Initialize to avoid undefined
 
 	onMount(async () => {
 		state = await channel.watch();
@@ -43,6 +42,7 @@
 	</div>
 {:else}
 	<div class="flex h-full flex-col">
+		<!-- Tabs for Chat and Participants -->
 		<div class="mb-4 flex space-x-4">
 			<Button
 				color={activeTab === 'Chat' ? 'primary' : 'light'}
@@ -61,8 +61,9 @@
 			</Button>
 		</div>
 
+		<!-- Chat View -->
 		{#if activeTab === 'Chat'}
-			<div class="flex-1 overflow-hidden rounded-lg border border-gray-300 dark:border-gray-600">
+			<div class="flex-1 overflow-hidden rounded-lg bg-white shadow-lg dark:bg-gray-800">
 				<div
 					bind:this={chatContainer}
 					class="h-full overflow-y-auto p-4"

src/src/lib/components/lessons/lesson/ChatAndParticipant.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { Tabs, TabItem } from 'flowbite-svelte';
+	import Chat from './Chat.svelte';
+	import Participant from './Participant.svelte';
+
+	let activeTab = 'chat';
+	let messages: never[] = [];
+	let participants: any[] = [];
+
+	// Populate participants and messages as needed
+</script>
+
+<div class="flex h-full flex-col">
+	<Tabs style="pills" class="border-b bg-white p-2">
+		<TabItem open title="Chat" on:click={() => (activeTab = 'chat')}>
+			<span slot="title" class="flex items-center gap-2">
+				<svg
+					class="h-5 w-5"
+					fill="none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
+					></path>
+				</svg>
+				Chat
+			</span>
+		</TabItem>
+		<TabItem title="Participants" on:click={() => (activeTab = 'participants')}>
+			<span slot="title" class="flex items-center gap-2">
+				<svg
+					class="h-5 w-5"
+					fill="none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+					></path>
+				</svg>
+				Participants
+			</span>
+		</TabItem>
+	</Tabs>
+
+	<div class="flex-grow overflow-hidden">
+		{#if activeTab === 'chat'}
+			<Chat {messages} />
+		{:else if activeTab === 'participants'}
+			<div class="grid grid-cols-1 gap-4 p-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+				{#each participants as participant}
+					<Participant {...participant} />
+				{/each}
+			</div>
+		{/if}
+	</div>
+</div>