refactor(stage-*): useBreakpoints

apps/stage-tamagotchi/src/renderer/pages/about.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useElectronAutoUpdater } from '@proj-airi/electron-vueuse'
 import { AboutContent, MarkdownRenderer } from '@proj-airi/stage-ui/components'
+import { useBreakpoints } from '@proj-airi/stage-ui/composables'
 import { useSharedAnalyticsStore } from '@proj-airi/stage-ui/stores/analytics'
 import { Button, DoubleCheckButton, Progress } from '@proj-airi/ui'
-import { useMediaQuery } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from 'reka-ui'
 import { DrawerContent, DrawerDescription, DrawerHandle, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTitle } from 'vaul-vue'
@@ -31,7 +31,7 @@ const links = [
 ]
 
 const showChangelog = ref(false)
-const isDesktop = useMediaQuery('(min-width: 768px)')
+const { isDesktop } = useBreakpoints()
 
 function handleDownloadClick() {
   if (updateState.value.info?.releaseNotes)

apps/stage-web/src/pages/auth/login.vue

@@ -2,16 +2,16 @@
 import type { OAuthProvider } from '@proj-airi/stage-ui/libs/auth'
 
 import { LoginDrawer } from '@proj-airi/stage-ui/components/auth'
+import { useBreakpoints } from '@proj-airi/stage-ui/composables'
 import { fetchSession, signIn } from '@proj-airi/stage-ui/libs/auth'
 import { Button } from '@proj-airi/ui'
-import { useMediaQuery } from '@vueuse/core'
 import { onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
 
 const router = useRouter()
 
-const isDesktop = useMediaQuery('(min-width: 768px)')
+const { isDesktop } = useBreakpoints()
 
 const loading = ref<Record<OAuthProvider, boolean>>({
   google: false,

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

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { LoginDrawer } from '@proj-airi/stage-ui/components/auth/index'
+import { useBreakpoints } from '@proj-airi/stage-ui/composables'
 import { useAuthStore } from '@proj-airi/stage-ui/stores/auth'
-import { useMediaQuery } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { RouterView } from 'vue-router'
 
-const isMobile = useMediaQuery('(max-width: 768px)')
+const { isMobile } = useBreakpoints()
 const { needsLogin } = storeToRefs(useAuthStore())
 </script>
 

packages/stage-ui/src/components/scenarios/dialogs/about/about-dialog.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import { useMediaQuery, useResizeObserver, useScreenSafeArea } from '@vueuse/core'
+import { useResizeObserver, useScreenSafeArea } from '@vueuse/core'
 import { DialogContent, DialogOverlay, DialogPortal, DialogRoot } from 'reka-ui'
 import { DrawerContent, DrawerHandle, DrawerOverlay, DrawerPortal, DrawerRoot } from 'vaul-vue'
 import { onMounted } from 'vue'
 
+import { useBreakpoints } from '../../../../composables/use-breakpoints'
+
 const showDialog = defineModel({ type: Boolean, default: false, required: false })
 
-const isDesktop = useMediaQuery('(min-width: 768px)')
+const { isDesktop } = useBreakpoints()
 const screenSafeArea = useScreenSafeArea()
 
 useResizeObserver(document.documentElement, () => screenSafeArea.update())

packages/stage-ui/src/components/scenarios/dialogs/audio-input/hearing-config-dialog.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { useMediaQuery, useResizeObserver, useScreenSafeArea } from '@vueuse/core'
+import { useResizeObserver, useScreenSafeArea } from '@vueuse/core'
 import { DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, VisuallyHidden } from 'reka-ui'
 import { DrawerContent, DrawerHandle, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue'
 import { onMounted } from 'vue'
 
 import HearingConfig from './hearing-config.vue'
 
+import { useBreakpoints } from '../../../../composables/use-breakpoints'
+
 const props = defineProps<{
   overlayDim?: boolean
   overlayBlur?: boolean
@@ -18,7 +20,7 @@ const showDialog = defineModel('show', { type: Boolean, default: false, required
 const selectedAudioInput = defineModel<string>('selectedAudioInput')
 const enabled = defineModel<boolean>('enabled', { default: false })
 
-const isDesktop = useMediaQuery('(min-width: 768px)')
+const { isDesktop } = useBreakpoints()
 const screenSafeArea = useScreenSafeArea()
 
 useResizeObserver(document.documentElement, () => screenSafeArea.update())

packages/stage-ui/src/components/scenarios/dialogs/background-picker/background-picker-dialog.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import type { BackgroundOption } from './types'
 
-import { useMediaQuery, useResizeObserver, useScreenSafeArea } from '@vueuse/core'
+import { useResizeObserver, useScreenSafeArea } from '@vueuse/core'
 import { DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, VisuallyHidden } from 'reka-ui'
 import { DrawerContent, DrawerHandle, DrawerOverlay, DrawerPortal, DrawerRoot } from 'vaul-vue'
 import { onMounted } from 'vue'
 
 import BackgroundPicker from './background-picker.vue'
 
+import { useBreakpoints } from '../../../../composables/use-breakpoints'
+
 const props = defineProps<{
   options: BackgroundOption[]
 }>()
@@ -18,7 +20,7 @@ const emit = defineEmits<{
 const showDialog = defineModel({ type: Boolean, default: false, required: false })
 const selected = defineModel<BackgroundOption | undefined>('selected', { default: undefined })
 
-const isDesktop = useMediaQuery('(min-width: 768px)')
+const { isDesktop } = useBreakpoints()
 const screenSafeArea = useScreenSafeArea()
 
 useResizeObserver(document.documentElement, () => screenSafeArea.update())

packages/stage-ui/src/components/scenarios/dialogs/model-selector/model-selector-dialog.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import type { DisplayModel } from '../../../../stores/display-models'
 
-import { useMediaQuery, useResizeObserver, useScreenSafeArea } from '@vueuse/core'
+import { useResizeObserver, useScreenSafeArea } from '@vueuse/core'
 import { DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, VisuallyHidden } from 'reka-ui'
 import { DrawerContent, DrawerHandle, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue'
 import { onMounted } from 'vue'
 
 import ModelManager from './model-selector.vue'
 
+import { useBreakpoints } from '../../../../composables/use-breakpoints'
+
 const props = defineProps<{
   selectedModel?: DisplayModel
 }>()
@@ -15,7 +17,7 @@ const emits = defineEmits<{
   (e: 'pick', value: DisplayModel | undefined): void
 }>()
 const showDialog = defineModel('show', { type: Boolean, default: false, required: false })
-const isDesktop = useMediaQuery('(min-width: 768px)')
+const { isDesktop } = useBreakpoints()
 const screenSafeArea = useScreenSafeArea()
 
 useResizeObserver(document.documentElement, () => screenSafeArea.update())

packages/stage-ui/src/components/scenarios/dialogs/onboarding/onboarding-dialog.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import type { OnboardingStep } from './types'
 
-import { useMediaQuery, useResizeObserver, useScreenSafeArea } from '@vueuse/core'
+import { useResizeObserver, useScreenSafeArea } from '@vueuse/core'
 import { DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, VisuallyHidden } from 'reka-ui'
 import { DrawerContent, DrawerHandle, DrawerOverlay, DrawerPortal, DrawerRoot } from 'vaul-vue'
 import { onMounted } from 'vue'
 
 import Onboarding from './onboarding.vue'
 
+import { useBreakpoints } from '../../../../composables/use-breakpoints'
+
 const props = defineProps<{
   extraSteps?: OnboardingStep[]
 }>()
@@ -19,7 +21,7 @@ const emit = defineEmits<{
 
 const showDialog = defineModel({ type: Boolean, default: false, required: false })
 
-const isDesktop = useMediaQuery('(min-width: 768px)')
+const { isDesktop } = useBreakpoints()
 const screenSafeArea = useScreenSafeArea()
 
 useResizeObserver(document.documentElement, () => screenSafeArea.update())

packages/stage-ui/src/components/scenarios/dialogs/validation-details/provider-validation-details-dialog.vue

@@ -2,11 +2,13 @@
 import type { ProviderValidationStep } from '../../../../libs/providers/validators/run'
 
 import { Button } from '@proj-airi/ui'
-import { useMediaQuery, useResizeObserver, useScreenSafeArea } from '@vueuse/core'
+import { useResizeObserver, useScreenSafeArea } from '@vueuse/core'
 import { DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from 'reka-ui'
 import { DrawerContent, DrawerHandle, DrawerOverlay, DrawerPortal, DrawerRoot } from 'vaul-vue'
 import { computed, onMounted } from 'vue'
 
+import { useBreakpoints } from '../../../../composables/use-breakpoints'
+
 const props = withDefaults(defineProps<{
   steps: ProviderValidationStep[]
   stepId?: string
@@ -17,7 +19,7 @@ const props = withDefaults(defineProps<{
 
 const showDialog = defineModel({ type: Boolean, default: false, required: false })
 
-const isDesktop = useMediaQuery('(min-width: 768px)')
+const { isDesktop } = useBreakpoints()
 const screenSafeArea = useScreenSafeArea()
 
 useResizeObserver(document.documentElement, () => screenSafeArea.update())

packages/stage-ui/src/composables/index.ts

@@ -5,6 +5,7 @@ export * from './markdown'
 export * from './queues'
 export * from './use-analytics'
 export * from './use-async-state'
+export * from './use-breakpoints'
 export * from './use-build-info'
 export * from './use-chat-session/summary'
 export * from './use-optimistic'

packages/stage-ui/src/composables/use-breakpoints.ts

@@ -0,0 +1,9 @@
+import { useMediaQuery } from '@vueuse/core'
+import { computed } from 'vue'
+
+export function useBreakpoints() {
+  const isDesktop = useMediaQuery('(min-width: 768px)')
+  const isMobile = computed(() => !isDesktop.value)
+
+  return { isDesktop, isMobile }
+}

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

@@ -1,10 +1,11 @@
 import type { Session, User } from 'better-auth'
 
-import { StorageSerializers, useLocalStorage, useMediaQuery, whenever } from '@vueuse/core'
+import { StorageSerializers, useLocalStorage, whenever } from '@vueuse/core'
 import { defineStore } from 'pinia'
 import { computed, ref, watch } from 'vue'
 
 import { client } from '../composables/api'
+import { useBreakpoints } from '../composables/use-breakpoints'
 
 /**
  * Auth store — holds identity state and credits.
@@ -25,7 +26,7 @@ export const useAuthStore = defineStore('auth', () => {
 
   // For controlling the login drawer on mobile
   const needsLogin = ref(false)
-  const isMobile = useMediaQuery('(max-width: 768px)')
+  const { isMobile } = useBreakpoints()
 
   whenever(needsLogin, () => {
     if (isMobile.value) {