Something went wrong. Try again.
the {coilest,wokest,funnest} client for bluesky next.bbell.vt3e.cat
bluesky client
Something went wrong. Try again.
4.3 kB · 209 lines
Vue
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210<script lang="ts" setup>import { computed, ref, watch } from "vue";
import { TabStack, BottomBar, SideBar } from ".";import SplashScreen from "@/views/SplashScreen.vue";import OAuthCallback from "@/views/Auth/OAuthCallback.vue";
import { SPLASH_MESSAGES as messages } from "@/utils/constants";import { useEnvironmentStore } from "@/stores/environment";import { useNavigationStore } from "@/stores/navigation";import { rootPages } from "@/router";import { ModalHost } from "../modals";import OnboardingBase from "@/views/Onboarding/OnboardingBase.vue";
const navigation = useNavigationStore();const environment = useEnvironmentStore();
const showBars = computed(() => { return !environment.immersiveView;});
const stage = computed(() => environment.stage);
const setMessage = () => { let newIndex; do { newIndex = Math.floor(Math.random() * messages.length); } while (messages[newIndex] === message.value && messages.length > 1);
message.value = messages[newIndex];};const message = ref();setMessage();
const transitionName = ref("enter-before");
watch( () => navigation.activeTab, (newTab, oldTab) => { const newIndex = rootPages.findIndex((p) => p.name === newTab); const oldIndex = rootPages.findIndex((p) => p.name === oldTab); if (newIndex > oldIndex) { transitionName.value = "enter-before"; } else { transitionName.value = "enter-after"; } },);</script>
<template> <div :class="[ 'app-shell', { 'is-mobile': environment.isMobile, 'is-desktop': environment.isDesktop }, ]" > <Transition name="fade"> <SideBar v-if="!environment.isMobile && showBars" /> </Transition>
<ModalHost />
<div id="viewport" :class="['viewport', { immersive: environment.immersiveView }]"> <template v-if="stage === 'shell'"> <Transition :name="transitionName" v-for="t in rootPages.map((p) => p.name)" :key="t"> <TabStack :tab="t" v-show="navigation.activeTab === t" :class="{ active: navigation.activeTab === t }" /> </Transition> </template>
<Transition name="fade-splash"> <SplashScreen v-if="stage === 'loading'" /> </Transition>
<Transition name="fade-splash"> <OnboardingBase v-if="stage === 'onboarding'" /> </Transition>
<Transition name="fade-splash"> <OAuthCallback v-if="stage === 'oauth-callback'" /> </Transition> </div>
<BottomBar v-if="environment.isMobile && showBars" /> </div></template>
<style scoped>.fade-enter-active,.fade-leave-active { transition: 0.8s var(--ease-spring); overflow: hidden;}
.fade-enter-from,.fade-leave-to { position: absolute; opacity: 0; filter: blur(0.5rem); width: 0; margin-left: 0;}
.fade-splash-leave-active { transition: 0.8s var(--ease-spring); position: absolute; filter: blur(1.5rem) brightness(0.4);
inset: 0; z-index: 50;}
.fade-splash-leave-to { opacity: 0;}
body:has(.app-dialog:not(.dialog-fade-leave-active)) { .app-shell { transform: scale(0.975); border-radius: var(--radius-xl); }}
.app-shell { display: flex; height: 100dvh; width: 100vw; background-color: hsla(var(--mantle) / 1); &.is-mobile { background-color: hsla(var(--base) / 1); overflow-x: hidden; }}
.tab-stack { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.viewport { position: relative; flex: 1; transition: 0.8s var(--ease-spring);}
.is-desktop { .app-shell { flex-direction: row; justify-content: center; }
.viewport { max-width: 668px; margin: var(--space-2);
&.immersive { max-width: 1200px; /*margin: 0;*/ } }}
body { .tab-stack.enter-before-enter-active, .tab-stack.enter-before-leave-active, .tab-stack.enter-after-enter-active, .tab-stack.enter-after-leave-active { position: absolute; transition: 0.3s var(--ease-spring) !important; }
.tab-stack { --enter-pos: translateY(3rem); --enter-neg: translateY(-3rem); }
.is-mobile .tab-stack { --enter-pos: translateX(3rem); --enter-neg: translateX(-3rem); }
.enter-before-enter-from { opacity: 0; transform: var(--enter-pos); }
.enter-before-leave-to { opacity: 0; transform: var(--enter-neg); }
.enter-after-enter-from { opacity: 0; transform: var(--enter-neg); }
.enter-after-leave-to { opacity: 0; transform: var(--enter-pos); }}</style>