frontend/app/layouts/app.vue
Jesse Wierzbinski dc32f3b3ea
Some checks failed
CodeQL / Analyze (javascript) (push) Failing after 0s
Deploy to GitHub Pages / build (push) Failing after 0s
Deploy to GitHub Pages / deploy (push) Has been skipped
Docker / build (push) Failing after 0s
Mirror to Codeberg / Mirror (push) Failing after 0s
feat: 👽 Support Versia Server 0.9 login system
2025-11-21 12:16:00 +01:00

61 lines
1.8 KiB
Vue

<template>
<SidebarProvider>
<AppSidebar>
<slot />
</AppSidebar>
</SidebarProvider>
<MobileNavbar v-if="authStore.isSignedIn" />
<Preferences />
<ComposerDialog v-if="authStore.isSignedIn" />
</template>
<script setup lang="ts">
import ComposerDialog from "~/components/composer/dialog.vue";
import MobileNavbar from "~/components/navigation/mobile-navbar.vue";
import Preferences from "~/components/preferences/index.vue";
import AppSidebar from "~/components/sidebars/sidebar.vue";
import { SidebarProvider } from "~/components/ui/sidebar";
const colorMode = useColorMode();
const { n, d } = useMagicKeys();
const activeElement = useActiveElement();
const authStore = useAuthStore();
const notUsingInput = computed(
() =>
activeElement.value?.tagName !== "INPUT" &&
activeElement.value?.tagName !== "TEXTAREA" &&
activeElement.value?.contentEditable !== "true",
);
const route = useRoute();
watch(
() => route.path,
async () => {
console.log(route.meta.requiresAuth && !authStore.isSignedIn);
if (route.meta.requiresAuth && !authStore.isSignedIn) {
window.location.href = "/";
}
},
{ immediate: true },
);
watch([n, notUsingInput, d], async () => {
if (n?.value && notUsingInput.value) {
// Wait 50ms
await new Promise((resolve) => setTimeout(resolve, 50));
useEvent("composer:open");
}
if (d?.value && notUsingInput.value && !colorMode.forced) {
// Swap theme from dark to light or vice versa
if (colorMode.value === "dark") {
colorMode.preference = "light";
preferences.color_theme.value = "light";
} else {
colorMode.preference = "dark";
preferences.color_theme.value = "dark";
}
}
});
</script>