strawberries/frangipane-client
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reworked the chat layout and fixed a rate limiting mistake

Browse Source
This commit is contained in:
eiiko6
2025-12-28 20:29:13 +01:00
parent 3633b6594c
commit dd293c8e3d
11 changed files with 424 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@@ -3,6 +3,10 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tauri + Vue + Typescript App</title> <title>Tauri + Vue + Typescript App</title>
</head> </head>

107
src/App.vue
View File

@@ -1,18 +1,22 @@
<template> <template>
<div id="page"> <div id="page">
<main id="content">
<router-view /> <router-view />
</main>
<div id="absolute"> <nav id="bottom-nav">
<button class="logout" @click="logout()">Logout</button> <router-link to="/" class="nav-item" aria-label="Home">
<i class="fa-solid fa-message"></i>
<router-link to="." class="button">
Home
</router-link> </router-link>
<router-link to="/friendlist" class="button"> <router-link to="/friendlist" class="nav-item" aria-label="Friends">
Friendlist <i class="fa-solid fa-user-group"></i>
</router-link> </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> </div>
</template> </template>
@@ -30,27 +34,86 @@ function logout() {
<style scoped> <style scoped>
#page { #page {
min-height: 100vh;
background: var(--bg);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; }
height: 100vh;
#content {
width: 100%;
max-width: 1100px;
padding: 2rem; padding: 2rem;
box-sizing: border-box; padding-bottom: 120px;
background: var(--background);
} }
#absolute { #bottom-nav {
position: absolute; position: fixed;
left: 0; bottom: 24px;
top: 0; left: 50%;
margin: 30px; 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) { .nav-item {
#page { all: unset;
padding: 0; cursor: pointer;
padding-top: 20px;
padding-bottom: 40px; 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> </style>

10
src/api/client.ts
View File

@@ -1,5 +1,6 @@
import { initAuth } from '../stores/auth.ts' import { initAuth, logout } from '../stores/auth.ts'
import { API } from '../main.ts' import { API } from '../main.ts'
import router from '../router'
export async function apiFetch<T>( export async function apiFetch<T>(
path: string, 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) { if (!res.ok) {
const text = await res.text() const text = await res.text()
throw new Error(text || res.statusText) throw new Error(text || res.statusText)
@@ -23,4 +30,3 @@ export async function apiFetch<T>(
return res.json() return res.json()
} }

139
src/components/ChatWindow.vue Normal file
View File

@@ -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>

28
src/components/MessageInput.vue
View File

@@ -1,11 +1,19 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, nextTick } from 'vue' import { ref, nextTick, defineExpose } from 'vue'
const content = ref('') const content = ref('')
const textareaRef = ref<HTMLTextAreaElement | null>(null)
const emit = defineEmits<{ (e: 'send', content: string): void }>() const emit = defineEmits<{ (e: 'send', content: string): void }>()
defineExpose({
focus: () => {
textareaRef.value?.focus()
}
})
function submit() { function submit() {
if (!content.value) return if (!content.value.trim()) return
emit('send', content.value) emit('send', content.value)
content.value = '' content.value = ''
resize() resize()
@@ -13,17 +21,15 @@ function submit() {
function resize() { function resize() {
nextTick(() => { nextTick(() => {
const textarea = document.querySelector('textarea') if (textareaRef.value) {
if (textarea) { textareaRef.value.style.height = 'auto'
textarea.style.height = 'auto' textareaRef.value.style.height = textareaRef.value.scrollHeight + 'px'
textarea.style.height = textarea.scrollHeight + 'px'
} }
}) })
} }
function handleKeydown(e: KeyboardEvent) { function handleKeydown(e: KeyboardEvent) {
if ((e.shiftKey || e.altKey) && e.key === 'Enter') { if ((e.shiftKey || e.altKey) && e.key === 'Enter') {
// Insert a line break at cursor
const textarea = e.target as HTMLTextAreaElement const textarea = e.target as HTMLTextAreaElement
const start = textarea.selectionStart const start = textarea.selectionStart
const end = textarea.selectionEnd const end = textarea.selectionEnd
@@ -41,10 +47,10 @@ function handleKeydown(e: KeyboardEvent) {
</script> </script>
<template> <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> </template>
<style scoped> <style scoped>
textarea { textarea {
width: 100%; width: 100%;
@@ -54,5 +60,9 @@ textarea {
font-size: 1rem; font-size: 1rem;
line-height: 1.4; line-height: 1.4;
box-sizing: border-box; box-sizing: border-box;
background: transparent;
border: none;
color: inherit;
outline: none;
} }
</style> </style>

116
src/components/RoomList.vue Normal file
View File

@@ -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>

13
src/main.ts
View File

@@ -1,12 +1,19 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import router from './router' import router from './router'
import App from './App.vue' import App from './App.vue'
import { validateToken } from './stores/auth.ts'
import './base.css' import './base.css'
createApp(App) async function init() {
.use(router) await validateToken()
.mount('#app')
const app = createApp(App)
app.use(router)
app.mount('#app')
}
init()
export const API = 'http://127.0.0.1:8080' export const API = 'http://127.0.0.1:8080'
export const API_WS = 'ws://127.0.0.1:8080/ws' export const API_WS = 'ws://127.0.0.1:8080/ws'

144
src/pages/ChatPage.vue
View File

@@ -1,138 +1,50 @@
<template> <template>
<div class="chat-page"> <div class="chat-layout">
<div class="messages-container" ref="messageListRef"> <aside class="sidebar">
<MessageList :messages="messages" /> <RoomList />
</div> </aside>
<div class="input-container"> <main class="chat-window-container">
<MessageInput @send="onSend" /> <ChatWindow :uuid="uuid" />
</div> </main>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, onUnmounted, ref, nextTick } from "vue"; defineProps<{ uuid: string }>();
import { fetchMessages, sendMessage, getWsToken } from "../api/messages"; import RoomList from "../components/RoomList.vue";
import type { Message } from "../types/api"; import ChatWindow from "../components/ChatWindow.vue";
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();
});
</script> </script>
<style scoped> <style scoped>
.chat-page { .chat-layout {
display: flex; display: flex;
flex-direction: column; height: 80vh;
height: 95%; width: 100%;
width: 90%; max-width: 1200px;
padding: 15px; background: var(--panel);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius); border-radius: var(--radius);
background: var(--panel);
overflow: hidden; overflow: hidden;
} }
.messages-container { .sidebar {
width: 300px;
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
}
.chat-window-container {
flex: 1; flex: 1;
padding: 1rem;
overflow-y: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; min-width: 0;
word-wrap: break-word;
} }
.input-container { @media (max-width: 720px) {
padding: 0.5rem 1rem; .sidebar {
border-top: 1px solid var(--border); display: none;
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);
} }
</style> </style>

90
src/pages/RoomsPage.vue
View File

@@ -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>

15
src/router/index.ts
View File

@@ -1,33 +1,30 @@
import { createRouter, createWebHistory } from 'vue-router' 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 LoginPage from '../pages/LoginPage.vue'
import RoomsPage from '../pages/RoomsPage.vue'
import ChatPage from '../pages/ChatPage.vue' import ChatPage from '../pages/ChatPage.vue'
import FriendListPage from '../pages/FriendListPage.vue' import FriendListPage from '../pages/FriendListPage.vue'
const router = createRouter({ const router = createRouter({
history: createWebHistory(), history: createWebHistory(),
routes: [ routes: [
{ path: '/', redirect: '/rooms/none' },
{ path: '/login', component: LoginPage }, { path: '/login', component: LoginPage },
{ path: '/', component: RoomsPage },
{ path: '/rooms/:uuid', component: ChatPage, props: true }, { path: '/rooms/:uuid', component: ChatPage, props: true },
{ path: '/friendlist', component: FriendListPage } { path: '/friendlist', component: FriendListPage }
], ],
}) })
router.beforeEach(async (to) => { router.beforeEach(async (to) => {
if (to.path === '/login') return true
const auth = await initAuth() const auth = await initAuth()
if (!auth.isAuthenticated && to.path !== '/login') { if (!auth.isAuthenticated) {
return '/login' return '/login'
} }
if (auth.isAuthenticated) { return true
const valid = await validateToken()
if (!valid) return '/login'
}
}) })
export default router export default router

13
src/stores/auth.ts
View File

@@ -45,15 +45,14 @@ export async function validateToken(): Promise<boolean> {
if (!auth.token) return false if (!auth.token) return false
try { try {
await apiFetch('/validate-token', { await apiFetch('/validate-token')
method: 'GET',
})
return true return true
} catch (e) { } catch (e: any) {
console.log(e); // Only logout if token is bad
if (e.message.includes('401')) {
await logout() await logout()
return false return false
} }
return true
}
} }