Fix #134 and prevent to cite and underline

frontend/src/routes/sessions/[id]/Chatbox.svelte

@@ -125,6 +125,11 @@
 	onDestroy(() => {
 		clearInterval(presenceTimeout);
 	});
+
+	let chatClosed =
+		session.users.find((u: User) => user.id === u.id) === undefined ||
+		new Date().getTime() > session.end_time.getTime() + 3600000 ||
+		new Date().getTime() < session.start_time.getTime() - 3600000;
 </script>
 
 <div class="flex flex-col w-full max-w-5xl mx-auto h-full scroll-smooth">
@@ -134,7 +139,7 @@
 		</div>
 		{#each $messages.sort((a, b) => b.created_at.getTime() - a.created_at.getTime()) as message (message.uuid)}
 			{#if message instanceof Message}
-				<MessageC {user} {message} bind:replyTo />
+				<MessageC {user} {message} bind:replyTo {chatClosed} />
 			{:else if message instanceof Feedback}
 				<a class="text-center italic text-gray-500 my-2" href="#{message.message.uuid}">
 					{$t('session.feedbackInline')} "{message.message.content.length > 20
@@ -152,7 +157,7 @@
 		</div>
 	{/if}
 	<div class="flex flex-row">
-		<Writebox {user} {session} bind:replyTo />
+		<Writebox {user} {session} {chatClosed} bind:replyTo />
 	</div>
 </div>
 

frontend/src/routes/sessions/[id]/Message.svelte

@@ -16,8 +16,9 @@
 	let {
 		user,
 		message,
-		replyTo = $bindable()
-	}: { user: User; message: Message; replyTo: Message | undefined } = $props();
+		replyTo = $bindable(),
+		chatClosed = false
+	}: { user: User; message: Message; replyTo: Message | undefined; chatClosed: boolean } = $props();
 
 	let displayedTime = $state(displayTime(message.created_at));
 
@@ -100,7 +101,7 @@
 	}
 
 	function onTextSelect() {
-		if (isEdit) return;
+		if (isEdit || chatClosed) return;
 		const selection = window.getSelection();
 		if (!selection || selection.rangeCount < 1 || !hightlight) return;
 		const range = selection.getRangeAt(0);
@@ -271,22 +272,24 @@
 				{/each}
 			</div>
 		{/if}
-		{#if isSender}
+		{#if !chatClosed}
+			{#if isSender}
+				<button
+					class="absolute bottom-0 left-[-1.5rem] invisible group-hover:visible h-full p-0"
+					onclick={() => (isEdit ? endEdit() : startEdit())}
+				>
+					<Icon src={Pencil} class="w-5 h-full text-gray-500 hover:text-gray-800" />
+				</button>
+			{/if}
 			<button
-				class="absolute bottom-0 left-[-1.5rem] invisible group-hover:visible h-full p-0"
-				onclick={() => (isEdit ? endEdit() : startEdit())}
+				class="absolute bottom-0 invisible group-hover:visible h-full p-0"
+				class:right-[-1.5rem]={!isSender}
+				class:left-[-3.5rem]={isSender}
+				onclick={() => (replyTo = message)}
 			>
-				<Icon src={Pencil} class="w-5 h-full text-gray-500 hover:text-gray-800" />
+				<Icon src={ArrowUturnLeft} class="w-5 h-full text-gray-500 hover:text-gray-800" />
 			</button>
 		{/if}
-		<button
-			class="absolute bottom-0 invisible group-hover:visible h-full p-0"
-			class:right-[-1.5rem]={!isSender}
-			class:left-[-3.5rem]={isSender}
-			onclick={() => (replyTo = message)}
-		>
-			<Icon src={ArrowUturnLeft} class="w-5 h-full text-gray-500 hover:text-gray-800" />
-		</button>
 	</div>
 	<div class="chat-footer opacity-50">
 		<Icon src={Check} class="w-4 inline" />

frontend/src/routes/sessions/[id]/Writebox.svelte

@@ -17,8 +17,9 @@
 	let {
 		user,
 		session,
-		replyTo = $bindable()
-	}: { user: User; session: Session; replyTo: Message | undefined } = $props();
+		replyTo = $bindable(),
+		chatClosed = false
+	}: { user: User; session: Session; replyTo: Message | undefined; chatClosed: boolean } = $props();
 
 	let metadata: { message: string; date: number }[] = [];
 	let lastMessage = '';
@@ -31,11 +32,6 @@
 		replyTo = undefined;
 	}
 
-	let disabled =
-		session.users.find((u: User) => user.id === u.id) === undefined ||
-		new Date().getTime() > session.end_time.getTime() + 3600000 ||
-		new Date().getTime() < session.start_time.getTime() - 3600000;
-
 	async function sendMessage() {
 		message = message.trim();
 		if (message.length == 0) return;
@@ -142,8 +138,8 @@
 		<textarea
 			bind:this={textearea}
 			class="flex-grow p-2 resize-none overflow-hidden py-4 pr-12 border rounded-[32px]"
-			placeholder={disabled ? $t('chatbox.disabled') : $t('chatbox.placeholder')}
-			{disabled}
+			placeholder={chatClosed ? $t('chatbox.disabled') : $t('chatbox.placeholder')}
+			disabled={chatClosed}
 			bind:value={message}
 			use:autosize
 			rows={1}