reworked the chat layout and fixed a rate limiting mistake

2025-12-28 20:29:13 +01:00
parent 3633b6594c
commit dd293c8e3d
11 changed files with 424 additions and 261 deletions
--- a/index.html
+++ b/index.html
@@ -3,6 +3,10 @@
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tauri + Vue + Typescript App</title>
  </head>
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,18 +1,22 @@
 <template>
  <div id="page">
+    <main id="content">
      <router-view />
+    </main>

-    <div id="absolute">
-      <button class="logout" @click="logout()">Logout</button>
-
-      <router-link to="." class="button">
-        Home
+    <nav id="bottom-nav">
+      <router-link to="/" class="nav-item" aria-label="Home">
+        <i class="fa-solid fa-message"></i>
      </router-link>

-      <router-link to="/friendlist" class="button">
-        Friendlist
+      <router-link to="/friendlist" class="nav-item" aria-label="Friends">
+        <i class="fa-solid fa-user-group"></i>
      </router-link>
-    </div>
+
+      <button class="nav-item logout" @click="logout" aria-label="Logout">
+        <i class="fa-solid fa-right-from-bracket"></i>
+      </button>
+    </nav>
  </div>
 </template>

@@ -30,27 +34,86 @@ function logout() {

 <style scoped>
 #page {
+  min-height: 100vh;
+  background: var(--bg);
  display: flex;
  justify-content: center;
-  align-items: center;
-  height: 100vh;
+}
+
+#content {
+  width: 100%;
+  max-width: 1100px;
  padding: 2rem;
-  box-sizing: border-box;
-  background: var(--background);
+  padding-bottom: 120px;
 }

-#absolute {
-  position: absolute;
-  left: 0;
-  top: 0;
-  margin: 30px;
+#bottom-nav {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+
+  display: flex;
+  gap: 28px;
+
+  padding: 14px 22px;
+  background: color-mix(in srgb, var(--panel) 85%, transparent);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+
+  backdrop-filter: blur(10px);
+  z-index: 50;
 }

-@media screen and (max-width: 720px) {
-  #page {
-    padding: 0;
-    padding-top: 20px;
-    padding-bottom: 40px;
+.nav-item {
+  all: unset;
+  cursor: pointer;
+
+  width: 44px;
+  height: 44px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  color: var(--muted);
+  font-size: 1.25rem;
+  border-radius: 50%;
+
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease,
+    transform 0.15s ease;
+}
+
+.nav-item:hover {
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.04);
+  transform: translateY(-2px);
+}
+
+.nav-item:not(.router-link-active):hover {
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.04);
+  transform: translateY(-2px);
+}
+
+.router-link-active {
+  color: var(--accent);
+}
+
+.logout:hover {
+  color: rgba(255, 80, 80, 0.8);
+}
+
+@media (max-width: 720px) {
+  #content {
+    padding: 1.2rem;
+    padding-bottom: 130px;
+  }
+
+  #bottom-nav {
+    bottom: 16px;
  }
 }
 </style>
--- a/src/api/client.ts
+++ b/src/api/client.ts
@@ -1,5 +1,6 @@
-import { initAuth } from '../stores/auth.ts'
+import { initAuth, logout } from '../stores/auth.ts'
 import { API } from '../main.ts'
+import router from '../router'

 export async function apiFetch<T>(
  path: string,
@@ -16,6 +17,12 @@ export async function apiFetch<T>(
    },
  })

+  if (res.status === 401) {
+    await logout()
+    router.push('/login')
+    throw new Error("Session expired")
+  }
+
  if (!res.ok) {
    const text = await res.text()
    throw new Error(text || res.statusText)
@@ -23,4 +30,3 @@ export async function apiFetch<T>(

  return res.json()
 }
-
--- a/src/components/ChatWindow.vue
+++ b/src/components/ChatWindow.vue
@@ -0,0 +1,139 @@
+<template>
+  <div v-if="uuid === 'none'" class="no-room">
+    <div class="empty-state">
+      <i class="fa-solid fa-comments"></i>
+      <p>Select a room to start talking</p>
+    </div>
+  </div>
+
+  <div v-else class="chat-container">
+    <div class="messages-container" ref="messageListRef">
+      <MessageList :messages="messages" />
+    </div>
+
+    <div class="input-container">
+      <!-- Added ref="messageInputRef" -->
+      <MessageInput ref="messageInputRef" @send="onSend" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch, nextTick } from "vue";
+import { fetchMessages, sendMessage, getWsToken } from "../api/messages";
+import type { Message } from "../types/api";
+import { API_WS } from '../main.ts'
+import MessageList from "./MessageList.vue";
+import MessageInput from "./MessageInput.vue";
+
+const props = defineProps<{ uuid: string }>();
+const messages = ref<Message[]>([]);
+const messageListRef = ref<HTMLElement | null>(null);
+const messageInputRef = ref<InstanceType<typeof MessageInput> | null>(null); // Ref for focusing
+let socket: WebSocket | null = null;
+
+// Handle global Enter key to focus input
+const handleGlobalKeyDown = (event: KeyboardEvent) => {
+  if (event.key === 'Enter') {
+    const active = document.activeElement?.tagName.toLowerCase();
+
+    // Don't hijack focus if user is already typing in an input or textarea
+    const isTyping = active === 'input' || active === 'textarea';
+
+    if (!isTyping && messageInputRef.value) {
+      // Prevent default to avoid side effects like clicking a focused button
+      event.preventDefault();
+      messageInputRef.value.focus();
+    }
+  }
+};
+
+async function initializeRoom() {
+  if (socket) {
+    socket.close();
+    socket = null;
+  }
+  messages.value = [];
+
+  if (props.uuid === 'none') return;
+
+  messages.value = await fetchMessages(props.uuid);
+  await nextTick();
+  scrollToBottom();
+
+  const wsToken = await getWsToken(props.uuid);
+  socket = new WebSocket(`${API_WS}/rooms/${props.uuid}?token=${wsToken}`);
+
+  socket.onmessage = (event) => {
+    const msg: Message = JSON.parse(event.data);
+    const exists = messages.value.some(m => m.sent_at === msg.sent_at && m.sender === msg.sender);
+    if (!exists) {
+      messages.value.push(msg);
+      nextTick().then(scrollToBottom);
+    }
+  };
+}
+
+async function onSend(content: string) {
+  if (props.uuid === 'none') return;
+  await sendMessage(props.uuid, content);
+}
+
+function scrollToBottom() {
+  if (messageListRef.value) {
+    messageListRef.value.scrollTop = messageListRef.value.scrollHeight;
+  }
+}
+
+watch(() => props.uuid, () => {
+  initializeRoom();
+});
+
+onMounted(() => {
+  initializeRoom();
+  window.addEventListener('keydown', handleGlobalKeyDown);
+});
+
+onUnmounted(() => {
+  socket?.close();
+  window.removeEventListener('keydown', handleGlobalKeyDown);
+});
+</script>
+
+<style scoped>
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.messages-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+}
+
+.input-container {
+  padding: 1rem;
+  border-top: 1px solid var(--border);
+}
+
+.no-room {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--muted);
+}
+
+.empty-state {
+  text-align: center;
+  font-size: 1.2rem;
+}
+
+.empty-state i {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  opacity: 0.3;
+}
+</style>
--- a/src/components/MessageInput.vue
+++ b/src/components/MessageInput.vue
@@ -1,11 +1,19 @@
 <script setup lang="ts">
-import { ref, nextTick } from 'vue'
+import { ref, nextTick, defineExpose } from 'vue'

 const content = ref('')
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+
 const emit = defineEmits<{ (e: 'send', content: string): void }>()

+defineExpose({
+  focus: () => {
+    textareaRef.value?.focus()
+  }
+})
+
 function submit() {
-  if (!content.value) return
+  if (!content.value.trim()) return
  emit('send', content.value)
  content.value = ''
  resize()
@@ -13,17 +21,15 @@ function submit() {

 function resize() {
  nextTick(() => {
-    const textarea = document.querySelector('textarea')
-    if (textarea) {
-      textarea.style.height = 'auto'
-      textarea.style.height = textarea.scrollHeight + 'px'
+    if (textareaRef.value) {
+      textareaRef.value.style.height = 'auto'
+      textareaRef.value.style.height = textareaRef.value.scrollHeight + 'px'
    }
  })
 }

 function handleKeydown(e: KeyboardEvent) {
  if ((e.shiftKey || e.altKey) && e.key === 'Enter') {
-    // Insert a line break at cursor
    const textarea = e.target as HTMLTextAreaElement
    const start = textarea.selectionStart
    const end = textarea.selectionEnd
@@ -41,10 +47,10 @@ function handleKeydown(e: KeyboardEvent) {
 </script>

 <template>
-  <textarea v-model="content" @input="resize" @keydown="handleKeydown" placeholder="type a message" rows="1"></textarea>
+  <textarea ref="textareaRef" v-model="content" @input="resize" @keydown="handleKeydown" placeholder="type a message"
+    rows="1"></textarea>
 </template>

-
 <style scoped>
 textarea {
  width: 100%;
@@ -54,5 +60,9 @@ textarea {
  font-size: 1rem;
  line-height: 1.4;
  box-sizing: border-box;
+  background: transparent;
+  border: none;
+  color: inherit;
+  outline: none;
 }
 </style>
--- a/src/components/RoomList.vue
+++ b/src/components/RoomList.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="room-list">
+    <header class="rooms-header">
+      <h2>Rooms</h2>
+      <button class="create-btn" @click="showCreate = true">+</button>
+    </header>
+
+    <CreateRoomModal v-if="showCreate" @close="showCreate = false" @created="rooms.push($event)" />
+
+    <div class="scroll-area">
+      <router-link v-for="room in rooms" :key="room.uuid" :to="`/rooms/${room.uuid}`" class="room-item"
+        :class="{ active: route.params.uuid === room.uuid }">
+        <div class="room-info">
+          <span class="room-name">{{ room.name }}</span>
+          <span class="room-owner">{{ room.owner_name }}</span>
+        </div>
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { initAuth } from '../stores/auth.ts';
+import { fetchRooms } from '../api/rooms';
+import type { Room } from '../types/api';
+import CreateRoomModal from './CreateRoomModal.vue';
+
+const route = useRoute();
+const showCreate = ref(false);
+const rooms = ref<Room[]>([]);
+
+onMounted(async () => {
+  const auth = await initAuth();
+  rooms.value = await fetchRooms(auth.uuid!);
+});
+</script>
+
+<style scoped>
+.room-list {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.rooms-header {
+  padding: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--border);
+}
+
+.rooms-header h2 {
+  font-size: 1.1rem;
+  margin: 0;
+}
+
+.scroll-area {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.5rem;
+}
+
+.room-item {
+  display: block;
+  padding: 0.75rem 1rem;
+  margin-bottom: 0.25rem;
+  border-radius: 8px;
+  text-decoration: none;
+  color: var(--muted);
+  transition: all 0.2s;
+}
+
+.room-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text);
+}
+
+.room-item.active {
+  background: var(--accent);
+  color: white;
+}
+
+.room-item.active .room-owner {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.room-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.room-name {
+  font-weight: 500;
+}
+
+.room-owner {
+  font-size: 0.75rem;
+  opacity: 0.6;
+}
+
+.create-btn {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: none;
+  background: var(--accent);
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,12 +1,19 @@
 import { createApp } from 'vue'
 import router from './router'
 import App from './App.vue'
+import { validateToken } from './stores/auth.ts'

 import './base.css'

-createApp(App)
-  .use(router)
-  .mount('#app')
+async function init() {
+  await validateToken()
+
+  const app = createApp(App)
+  app.use(router)
+  app.mount('#app')
+}
+
+init()

 export const API = 'http://127.0.0.1:8080'
 export const API_WS = 'ws://127.0.0.1:8080/ws'
--- a/src/pages/ChatPage.vue
+++ b/src/pages/ChatPage.vue
@@ -1,138 +1,50 @@
 <template>
-  <div class="chat-page">
-    <div class="messages-container" ref="messageListRef">
-      <MessageList :messages="messages" />
-    </div>
+  <div class="chat-layout">
+    <aside class="sidebar">
+      <RoomList />
+    </aside>

-    <div class="input-container">
-      <MessageInput @send="onSend" />
-    </div>
+    <main class="chat-window-container">
+      <ChatWindow :uuid="uuid" />
+    </main>
  </div>
 </template>

 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, nextTick } from "vue";
-import { fetchMessages, sendMessage, getWsToken } from "../api/messages";
-import type { Message } from "../types/api";
-import MessageList from "../components/MessageList.vue";
-import MessageInput from "../components/MessageInput.vue";
-import { API_WS } from '../main.ts'
-
-let socket: WebSocket | null = null;
-
-const props = defineProps<{ uuid: string }>();
-const messages = ref<Message[]>([]);
-
-const messageListRef = ref<HTMLElement | null>(null);
-
-async function load() {
-  messages.value = await fetchMessages(props.uuid);
-}
-
-async function onSend(content: string) {
-  await sendMessage(props.uuid, content);
-  // messages.value.push(msg);
-  await nextTick();
-  scrollToBottom();
-}
-
-function scrollToBottom() {
-  if (messageListRef.value) {
-    messageListRef.value.scrollTop = messageListRef.value.scrollHeight;
-  }
-}
-
-onMounted(async () => {
-  await load();
-  await nextTick();
-  scrollToBottom();
-
-  // Fetch WebSocket token from the backend
-  const wsToken = await getWsToken(props.uuid);
-
-  // Connect to the WebSocket with the token
-  socket = new WebSocket(`${API_WS}/rooms/${props.uuid}?token=${wsToken}`);
-
-  socket.onmessage = (event) => {
-    const msg: Message = JSON.parse(event.data);
-
-    const exists = messages.value.some(
-      (m) =>
-        m.sent_at === msg.sent_at &&
-        m.sender === msg.sender &&
-        m.content === msg.content
-    );
-
-    if (!exists) {
-      messages.value.push(msg);
-      nextTick().then(scrollToBottom);
-    }
-  };
-
-  socket.onclose = () => {
-    console.warn("WebSocket closed");
-  };
-});
-
-onUnmounted(() => {
-  socket?.close();
-});
+defineProps<{ uuid: string }>();
+import RoomList from "../components/RoomList.vue";
+import ChatWindow from "../components/ChatWindow.vue";
 </script>

 <style scoped>
-.chat-page {
+.chat-layout {
  display: flex;
-  flex-direction: column;
-  height: 95%;
-  width: 90%;
-  padding: 15px;
+  height: 80vh;
+  width: 100%;
+  max-width: 1200px;
+  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
-  background: var(--panel);
  overflow: hidden;
 }

-.messages-container {
+.sidebar {
+  width: 300px;
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+}
+
+.chat-window-container {
  flex: 1;
-  padding: 1rem;
-  overflow-y: auto;
  display: flex;
  flex-direction: column;
-  gap: 0.5rem;
-  word-wrap: break-word;
+  min-width: 0;
 }

-.input-container {
-  padding: 0.5rem 1rem;
-  border-top: 1px solid var(--border);
-  background: var(--panel);
-}
-
-.chat-page {
-  display: flex;
-  flex-direction: column;
-  height: 95%;
-  width: 90%;
-  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);
+@media (max-width: 720px) {
+  .sidebar {
+    display: none;
+  }
 }
 </style>
--- a/src/pages/RoomsPage.vue
+++ b/src/pages/RoomsPage.vue
@@ -1,90 +0,0 @@
-<template>
-  <div class="rooms-page">
-    <header class="rooms-header">
-      <h1>Your rooms</h1>
-      <button @click="showCreate = true">Create room</button>
-    </header>
-
-    <CreateRoomModal v-if="showCreate" @close="showCreate = false" @created="rooms.push($event)" />
-
-    <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 }} <span class="owner">{{ room.owner_name }}</span>
-        </router-link>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import { initAuth } from '../stores/auth.ts'
-import { fetchRooms } from '../api/rooms'
-import type { Room } from '../types/api'
-import CreateRoomModal from '../components/CreateRoomModal.vue'
-
-const showCreate = ref(false)
-
-const rooms = ref<Room[]>([])
-
-onMounted(async () => {
-  const auth = await initAuth()
-  rooms.value = await fetchRooms(auth.uuid!)
-})
-</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);
-}
-
-.owner {
-  font-weight: normal;
-  opacity: 0.7;
-  font-size: 0.85rem;
-  margin-left: 0.5rem;
-}
-</style>
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,33 +1,30 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import { initAuth, validateToken } from '../stores/auth.ts'
+import { initAuth } from '../stores/auth.ts'

 import LoginPage from '../pages/LoginPage.vue'
-import RoomsPage from '../pages/RoomsPage.vue'
 import ChatPage from '../pages/ChatPage.vue'
 import FriendListPage from '../pages/FriendListPage.vue'

 const router = createRouter({
  history: createWebHistory(),
  routes: [
+    { path: '/', redirect: '/rooms/none' },
    { path: '/login', component: LoginPage },
-    { path: '/', component: RoomsPage },
    { path: '/rooms/:uuid', component: ChatPage, props: true },
    { path: '/friendlist', component: FriendListPage }
  ],
 })

 router.beforeEach(async (to) => {
+  if (to.path === '/login') return true
+
  const auth = await initAuth()

-  if (!auth.isAuthenticated && to.path !== '/login') {
+  if (!auth.isAuthenticated) {
    return '/login'
  }

-  if (auth.isAuthenticated) {
-    const valid = await validateToken()
-    if (!valid) return '/login'
-  }
+  return true
 })

 export default router
-
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -45,15 +45,14 @@ export async function validateToken(): Promise<boolean> {
  if (!auth.token) return false

  try {
-    await apiFetch('/validate-token', {
-      method: 'GET',
-    })
+    await apiFetch('/validate-token')
    return true
-  } catch (e) {
-    console.log(e);
-
+  } catch (e: any) {
+    // Only logout if token is bad
+    if (e.message.includes('401')) {
      await logout()
      return false
    }
+    return true
+  }
 }
-