fix(stage-layouts): login drawer in mobile

packages/stage-layouts/src/components/Layouts/HeaderAvatar.vue

@@ -60,7 +60,7 @@ async function handleListSessions() {
           w-fit flex items-center justify-center rounded-xl p-2 backdrop-blur-md
           title="Login"
           type="button"
-          @click="authStore.isLoginOpen = true"
+          @click="authStore.isLoginDrawerOpen = true"
         >
           <div i-solar:user-bold-duotone />
         </button>

packages/stage-layouts/src/layouts/stage.vue

@@ -1,28 +1,16 @@
 <script setup lang="ts">
 import { LoginDrawer } from '@proj-airi/stage-ui/components/auth/index'
 import { useAuthStore } from '@proj-airi/stage-ui/stores/auth'
-import { useMediaQuery } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import { watch } from 'vue'
 import { RouterView } from 'vue-router'
 
 const authStore = useAuthStore()
-const { isLoginOpen, isAuthenticated } = storeToRefs(authStore)
-const isMobile = useMediaQuery('(max-width: 768px)')
-
-watch([isAuthenticated, isMobile], ([auth, mobile]) => {
-  if (!auth && mobile) {
-    isLoginOpen.value = true
-  }
-  else {
-    isLoginOpen.value = false
-  }
-})
+const { isLoginDrawerOpen } = storeToRefs(authStore)
 </script>
 
 <template>
   <main h-full font-cute>
     <RouterView />
-    <LoginDrawer v-model:open="isLoginOpen" />
+    <LoginDrawer v-model:open="isLoginDrawerOpen" />
   </main>
 </template>

packages/stage-ui/src/stores/auth.ts

@@ -11,7 +11,8 @@ export const useAuthStore = defineStore('auth', () => {
   const isAuthenticated = computed(() => !!user.value && !!session.value)
   const userId = computed(() => user.value?.id ?? 'local')
 
-  const isLoginOpen = ref(false)
+  // For controlling the login drawer on mobile
+  const isLoginDrawerOpen = ref(false)
 
   const initialized = ref(false)
   const initialize = () => {
@@ -30,6 +31,6 @@ export const useAuthStore = defineStore('auth', () => {
     userId,
     session,
     isAuthenticated,
-    isLoginOpen,
+    isLoginDrawerOpen,
   }
 })