created frontend with login, room listing and creation, and message page with all features

src/pages/ChatPage.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="chat-page">
+    <div class="messages-container" ref="messageListRef">
+      <MessageList :messages="messages" />
+    </div>
+
+    <div class="input-container">
+      <MessageInput @send="onSend" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, nextTick } from "vue";
+import { fetchMessages, sendMessage } from "../api/messages";
+import type { Message } from "../types/api";
+import MessageList from "../components/MessageList.vue";
+import MessageInput from "../components/MessageInput.vue";
+
+const props = defineProps<{ uuid: string }>();
+const messages = ref<Message[]>([]);
+
+async function load() {
+  messages.value = await fetchMessages(props.uuid);
+}
+
+async function onSend(content: string) {
+  const msg = await sendMessage(props.uuid, content);
+  messages.value.push(msg);
+  await nextTick();
+  scrollToBottom();
+}
+
+onMounted(async () => {
+  await load();
+  await nextTick();
+  scrollToBottom();
+});
+
+const messageListRef = ref<HTMLElement | null>(null);
+
+function scrollToBottom() {
+  if (messageListRef.value) {
+    messageListRef.value.scrollTop = messageListRef.value.scrollHeight;
+  }
+}
+</script>
+
+<style scoped>
+.chat-page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 15px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--panel);
+  overflow: hidden;
+}
+
+.messages-container {
+  flex: 1;
+  padding: 1rem;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  word-wrap: break-word;
+}
+
+.input-container {
+  padding: 0.5rem 1rem;
+  border-top: 1px solid var(--border);
+  background: var(--panel);
+}
+</style>

src/pages/LoginPage.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useAuthStore } from "../stores/auth";
+import { useRouter } from "vue-router";
+
+const email = ref("");
+const username = ref("");
+const password = ref("");
+
+const auth = useAuthStore();
+const router = useRouter();
+
+async function submit() {
+  await auth.login(email.value, username.value, password.value);
+  router.push("/");
+}
+</script>
+
+<template>
+  <div class="login-page">
+    <form class="login-card" @submit.prevent="submit">
+      <h1>Login</h1>
+
+      <input v-model="email" placeholder="email" />
+      <input v-model="password" type="password" placeholder="password" />
+
+      <button type="submit">Login</button>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.login-page {
+  height: 100%;
+  display: grid;
+  place-items: center;
+}
+
+.login-card {
+  width: 100%;
+  max-width: 360px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 2rem;
+
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.login-card h1 {
+  font-size: 1.4rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  text-align: center;
+}
+</style>

src/pages/RoomsPage.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="rooms-page">
+    <header class="rooms-header">
+      <h1>Your rooms</h1>
+      <CreateRoomForm @created="rooms.push($event)" />
+    </header>
+
+    <ul class="rooms-list">
+      <li v-for="room in rooms" :key="room.uuid" class="room-item">
+        <router-link class="room-link" :to="`/rooms/${room.uuid}`">
+          {{ room.name }}
+        </router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useAuthStore } from '../stores/auth'
+import { fetchRooms } from '../api/rooms'
+import type { Room } from '../types/api'
+
+const auth = useAuthStore()
+const rooms = ref<Room[]>([])
+
+onMounted(async () => {
+  rooms.value = await fetchRooms(auth.uuid!)
+})
+</script>
+
+<script lang="ts">
+import CreateRoomForm from '../components/CreateRoomForm.vue'
+export default { components: { CreateRoomForm } }
+</script>
+
+<style scoped>
+.rooms-page {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 2rem 1.5rem;
+
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.rooms-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.rooms-header h1 {
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.rooms-list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.room-item {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+
+.room-link {
+  display: block;
+  padding: 0.75rem 1rem;
+  color: var(--text);
+  text-decoration: none;
+}
+
+.room-link:hover {
+  background: rgba(255, 255, 255, 0.03);
+}
+</style>