Merge pull request #16 from hinagiku-dev/Frontend-update

Frontend update

src/routes/+layout.svelte

@@ -23,6 +23,6 @@
 	}
 
 	main.sidebar-open {
-		margin-left: 12.5rem; /* 側邊欄的寬度 */
+		margin-left: 12.5rem;
 	}
 </style>

src/routes/join/+page.svelte

@@ -40,22 +40,9 @@
 					bind:value={tempIdInput}
 					required
 					pattern="\d\{6}"
-					class="w-full rounded-lg border p-2"
+					class="w-full rounded-lg border p-2 font-bold"
 					placeholder="Enter 6-digit code"
 				/>
-
-				<label for="groupId" class="mb-2 block pt-3 font-medium">Group number</label>
-				<input
-					type="text"
-					id="groupId"
-					name="groupId"
-					bind:value={tempGroupInput}
-					required
-					pattern="\d\{1}"
-					class="w-full rounded-lg border p-2"
-					placeholder="Enter group number"
-				/>
-
 				{#if form?.idInvalid}
 					<p class="mt-1 text-sm text-primary-600">Please enter a valid 6-digit code</p>
 				{/if}
@@ -73,10 +60,10 @@
 					required
 					pattern="^(?:[1-9]|[1-4][0-9]|50)$"
 					class="w-full rounded-lg border p-2"
-					placeholder="輸入組別"
+					placeholder="Please enter your group number"
 				/>
 				{#if form?.groupNumberInvalid}
-					<p class="mt-1 text-sm text-primary-600">請輸入有效的組別</p>
+					<p class="mt-1 text-sm text-red-600">Please enter a valid group number</p>
 				{/if}
 			</div>
 

src/routes/session/[id]/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	// disable eslint for this file
 	/* eslint-disable */
-	import { Play, Users } from 'lucide-svelte';
+	import { Play, Users, Pencil } from 'lucide-svelte';
 	import { getContext } from 'svelte';
 	import { page } from '$app/stores';
 
@@ -11,7 +11,7 @@
 	import QRCode from '$lib/components/QRCode.svelte';
 
 	let { data } = $props();
-	let session = $state(getContext<Readable<Session>>('session'));
+	let session = getContext<Readable<Session>>('session');
 	let isHost = $derived($session?.host === data.user.uid);
 
 	let goalInput = $state($session?.task || '');
@@ -146,7 +146,7 @@
 							class="ml-2 text-gray-600 hover:text-gray-800"
 							aria-label="Edit title"
 						>
-							編輯(要換成圖標)
+							<Pencil size={20} />
 						</button>
 					</div>
 				{/if}

src/routes/session/[id]/discussion/[userId]/+page.server.ts

@@ -0,0 +1,30 @@
+import { adminDb } from '$lib/server/firebase';
+import { redirect } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from '../$types';
+
+export const load: PageServerLoad = async ({ params, locals }) => {
+	if (!locals.user) {
+		throw redirect(303, '/login');
+	}
+
+	const sessionRef = adminDb.collection('discussion').doc(params.id);
+	console.log(sessionRef);
+	//const sessionDoc = await sessionRef.get();
+
+	/*
+	if (!sessionDoc.exists) {
+		throw error(404, 'User is not in the session');
+	}
+		*/
+
+	return {};
+};
+
+export const actions = {
+	default: async ({ locals }) => {
+		if (!locals.user) {
+			throw redirect(303, '/login');
+		}
+		//send message to the server
+	}
+} satisfies Actions;

src/routes/session/[id]/discussion/[userId]/+page.svelte

@@ -0,0 +1,102 @@
+<script>
+	let messages = [{ sender: 'Support', text: 'Hello! How can I assist you today?' }];
+	let inputText = '';
+	//import { User } from 'lucide-svelte'
+
+	function sendMessage() {
+		if (messages[messages.length - 1].sender === 'me') return;
+		if (inputText.trim() !== '') {
+			messages = [...messages, { sender: 'me', text: inputText }];
+			inputText = '';
+		}
+	}
+</script>
+
+<main class="mt-20">
+	<div class="chat-container">
+		<div class="messages">
+			{#each messages as message}
+				<div class="message" class:me={message.sender === 'me'}>
+					<!--<User class="inline-block"/>-->
+					{#if message.sender !== 'me'}
+						<img src={message.avatar} alt="Avatar" class="avatar left" />
+					{/if}
+					<p class="font-bold">{message.sender === 'me' ? 'You' : message.sender}:</p>
+					{message.text}
+					{#if message.sender === 'me'}
+						<img src={message.avatar} alt="Avatar" class="avatar right" />
+					{/if}
+				</div>
+			{/each}
+		</div>
+		<div class="input-area">
+			<input
+				class="inline-block"
+				type="text"
+				bind:value={inputText}
+				placeholder="Type your message..."
+				on:keyup={(e) => e.key === 'Enter' && sendMessage()}
+			/>
+			<button disabled={messages[messages.length - 1].sender === 'me'} on:click={sendMessage}
+				>Send</button
+			>
+			<div class="w-full"></div>
+			{#if messages[messages.length - 1].sender === 'me'}
+				<div>Please wait for a response...</div>
+			{/if}
+		</div>
+	</div>
+</main>
+
+<style>
+	.chat-container {
+		max-width: 80%;
+		margin: 0 auto;
+	}
+	.messages {
+		height: 400px;
+		overflow-y: auto;
+		border: 1px solid #ccc;
+		padding: 10px;
+	}
+	.message {
+		margin: 10px 0;
+		text-align: left;
+	}
+	.message.me {
+		text-align: right;
+	}
+	.input-area {
+		margin-top: 10px;
+		display: flex;
+		flex-wrap: wrap;
+	}
+	.input-area input {
+		flex: 1;
+		padding: 10px;
+	}
+	.input-area button {
+		padding: 10px;
+	}
+	.input-area button:hover {
+		background-color: #f0f0f0;
+	}
+	.input-area button:active {
+		background-color: #e0e0e0;
+	}
+	.input-area button:disabled {
+		pointer-events: none;
+	}
+	.avatar {
+		width: 40px;
+		height: 40px;
+		border-radius: 50%;
+		margin: 0 10px;
+	}
+	.avatar.left {
+		order: -1;
+	}
+	.avatar.right {
+		order: 1;
+	}
+</style>