74 lines
1.3 KiB
Vue
74 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { useTelemetryStore } from "~/stores/telemetry";
|
|
|
|
const telemetry = useTelemetryStore();
|
|
const user = useSupabaseUser();
|
|
|
|
onMounted(() => {
|
|
telemetry.connect();
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
telemetry.disconnect();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="app-shell">
|
|
<header class="app-shell__header">
|
|
<span class="app-shell__brand">Continuum</span>
|
|
<span class="app-shell__status" :class="telemetry.connected ? 'is-online' : 'is-offline'">
|
|
{{ telemetry.connected ? "Live" : "Reconnecting…" }}
|
|
</span>
|
|
<span v-if="user" class="app-shell__user">{{ user.email }}</span>
|
|
</header>
|
|
<main class="app-shell__main">
|
|
<NuxtPage />
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
:root {
|
|
color-scheme: dark;
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: #0b0d12;
|
|
color: #e6e8ec;
|
|
}
|
|
|
|
.app-shell__header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 0.75rem 1.25rem;
|
|
border-bottom: 1px solid #1f232c;
|
|
}
|
|
|
|
.app-shell__brand {
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.app-shell__status.is-online {
|
|
color: #35d07f;
|
|
}
|
|
|
|
.app-shell__status.is-offline {
|
|
color: #f2a33c;
|
|
}
|
|
|
|
.app-shell__user {
|
|
margin-left: auto;
|
|
opacity: 0.7;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.app-shell__main {
|
|
padding: 1.25rem;
|
|
}
|
|
</style>
|