added room actions: leave and delete, and improved connection error handling

This commit is contained in:
2026-01-17 07:09:52 +01:00
parent e30631be60
commit d325511d0e
17 changed files with 874 additions and 350 deletions

View File

@@ -1,16 +1,16 @@
<template>
<div id="page">
<main id="content">
<router-view />
</main>
<div id="page">
<main id="content">
<router-view />
</main>
<VersionWarningModal v-if="showVersionWarningModal" :appVersion="appVersion" :backendVersion="backendVersion"
:expectedBackendVersion="expectedBackendVersion" @close="showVersionWarningModal = false" />
<VersionWarningModal v-if="showVersionWarningModal" :appVersion="appVersion" :backendVersion="backendVersion"
:expectedBackendVersion="expectedBackendVersion" @close="showVersionWarningModal = false" />
<footer v-if="!$route.meta.hideNavbar">
<Navbar />
</footer>
</div>
<footer v-if="!$route.meta.hideNavbar">
<Navbar />
</footer>
</div>
</template>
<script setup lang="ts">
@@ -27,51 +27,51 @@ const appVersion = __APP_VERSION__
const expectedBackendVersion = __BACKEND_VERSION__
onMounted(async () => {
backendVersion.value = (await getBackendVersion()).version
if (backendVersion.value !== expectedBackendVersion) {
showVersionWarningModal.value = true
}
backendVersion.value = (await getBackendVersion()).version
if (backendVersion.value !== expectedBackendVersion) {
showVersionWarningModal.value = true
}
})
async function getBackendVersion() {
return await apiFetch<VersionResponse>('/version')
return await apiFetch<VersionResponse>('/version')
}
</script>
<style scoped>
#page {
background: var(--bg);
height: 100dvh;
display: flex;
flex-direction: column;
align-items: center;
background: var(--bg);
height: 100dvh;
display: flex;
flex-direction: column;
align-items: center;
}
#content {
width: 100%;
max-width: 1100px;
padding: 2rem;
width: 100%;
max-width: 1100px;
padding: 2rem;
flex: 1;
overflow-y: auto;
flex: 1;
overflow-y: auto;
}
footer {
width: 100%;
display: flex;
justify-content: center;
padding-bottom: 24px;
background: var(--bg);
width: 100%;
display: flex;
justify-content: center;
padding-bottom: 24px;
background: var(--bg);
}
@media (max-width: 720px) {
#content {
padding: 12px;
padding-top: 30px;
}
#content {
padding: 12px;
padding-top: 30px;
}
footer {
padding-bottom: 56px;
}
footer {
padding-bottom: 56px;
}
}
</style>