artchat/app/app.vue

<script lang="ts" setup>
import { Analytics } from '@vercel/analytics/nuxt'
import { SpeedInsights } from '@vercel/speed-insights/nuxt'

useHead({
  link: [{ rel: 'icon', type: 'image/webp', href: '/favicon.webp' }],
})

const route = useRoute()
const { messages } = useChatStore()
</script>

<template>
  <UApp>
    <NuxtLoadingIndicator color="#808080" />
    <AppBackground />
    <UContainer>
      <ChatCommandPalette
        v-motion
        :active="messages.length > 0"
        :mode="route.path.includes('/projects') || route.path.includes('/writings') || route.path.includes('/canva') ? 'work' : 'chat'"
        :initial="{
          opacity: 0,
          y: 200,
          scale: 0.6,
        }"
        :enter="{
          opacity: 1,
          y: 0,
          scale: 1,
          transition: {
            delay: route.path === '/' ? 1800 : 0,
            ease: 'easeIn',
          },
        }"
      />
      <NuxtPage />
    </UContainer>
    <SpeedInsights />
    <Analytics />
  </UApp>
</template>

<style>
@reference "@/assets/css/main.css";

/* Transition switcher */
.page-enter-active,
.page-leave-active {
  transition: all 0.2s;
}

.page-leave-to {
  opacity: 0;
  transform: translateY(-5px);
}

.page-enter-from {
  opacity: 0;
  transform: translateY(5px);
}

/* Theme switcher */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) {
  z-index: 1;
}
::view-transition-new(root) {
  z-index: 9999;
}
.dark::view-transition-old(root) {
  z-index: 9999;
}
.dark::view-transition-new(root) {
  z-index: 1;
}
</style>