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

src/api/client.ts

@@ -0,0 +1,27 @@
+import { useAuthStore } from '../stores/auth'
+
+const BASE_URL = 'http://localhost:8080'
+
+export async function apiFetch<T>(
+  path: string,
+  options: RequestInit = {}
+): Promise<T> {
+  const auth = useAuthStore()
+
+  const res = await fetch(`${BASE_URL}${path}`, {
+    ...options,
+    headers: {
+      'Content-Type': 'application/json',
+      ...(auth.token ? { Authorization: `Bearer ${auth.token}` } : {}),
+      ...options.headers,
+    },
+  })
+
+  if (!res.ok) {
+    const text = await res.text()
+    throw new Error(text || res.statusText)
+  }
+
+  return res.json()
+}
+

src/api/messages.ts

@@ -0,0 +1,17 @@
+import { apiFetch } from './client'
+import type { Message } from '../types/api'
+
+export function fetchMessages(roomUuid: string) {
+  return apiFetch<Message[]>(`/messages/${roomUuid}`)
+}
+
+export function sendMessage(roomUuid: string, content: string) {
+  return apiFetch<Message>(`/messages/${roomUuid}`, {
+    method: 'POST',
+    body: JSON.stringify({
+      message_type: 'text',
+      content,
+    }),
+  })
+}
+

src/api/rooms.ts

@@ -0,0 +1,14 @@
+import { apiFetch } from './client'
+import type { Room } from '../types/api'
+
+export function fetchRooms(userUuid: string) {
+  return apiFetch<Room[]>(`/rooms/${userUuid}`)
+}
+
+export function createRoom(name: string) {
+  return apiFetch<Room>('/rooms', {
+    method: 'POST',
+    body: JSON.stringify({ name }),
+  })
+}
+