From a63bfa0da0caac50af407bad41a91b4b20806d6b Mon Sep 17 00:00:00 2001
From: RainbowBird <git@luoling.moe>
Date: Fri, 13 Mar 2026 23:23:42 +0800
Subject: [PATCH] refactor(stage-*): useBreakpoints

---
 apps/stage-tamagotchi/src/renderer/pages/about.vue       | 4 ++--
 apps/stage-web/src/pages/auth/login.vue                  | 4 ++--
 packages/stage-layouts/src/layouts/stage.vue             | 4 ++--
 .../components/scenarios/dialogs/about/about-dialog.vue  | 6 ++++--
 .../dialogs/audio-input/hearing-config-dialog.vue        | 6 ++++--
 .../background-picker/background-picker-dialog.vue       | 6 ++++--
 .../dialogs/model-selector/model-selector-dialog.vue     | 6 ++++--
 .../scenarios/dialogs/onboarding/onboarding-dialog.vue   | 6 ++++--
 .../provider-validation-details-dialog.vue               | 6 ++++--
 packages/stage-ui/src/composables/index.ts               | 1 +
 packages/stage-ui/src/composables/use-breakpoints.ts     | 9 +++++++++
 packages/stage-ui/src/stores/auth.ts                     | 5 +++--
 12 files changed, 43 insertions(+), 20 deletions(-)
 create mode 100644 packages/stage-ui/src/composables/use-breakpoints.ts

diff --git a/apps/stage-tamagotchi/src/renderer/pages/about.vue b/apps/stage-tamagotchi/src/renderer/pages/about.vue
index 04a134cca..9db95a1db 100644
--- a/apps/stage-tamagotchi/src/renderer/pages/about.vue
+++ b/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)
diff --git a/apps/stage-web/src/pages/auth/login.vue b/apps/stage-web/src/pages/auth/login.vue
index 2175798c2..fa7e92d6c 100644
--- a/apps/stage-web/src/pages/auth/login.vue
+++ b/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,
diff --git a/packages/stage-layouts/src/layouts/stage.vue b/packages/stage-layouts/src/layouts/stage.vue
index 43863cbc2..63ec9fb26 100644
--- a/packages/stage-layouts/src/layouts/stage.vue
+++ b/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>
 
diff --git a/packages/stage-ui/src/components/scenarios/dialogs/about/about-dialog.vue b/packages/stage-ui/src/components/scenarios/dialogs/about/about-dialog.vue
index c90d96b74..7bf8543e8 100644
--- a/packages/stage-ui/src/components/scenarios/dialogs/about/about-dialog.vue
+++ b/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())
diff --git a/packages/stage-ui/src/components/scenarios/dialogs/audio-input/hearing-config-dialog.vue b/packages/stage-ui/src/components/scenarios/dialogs/audio-input/hearing-config-dialog.vue
index baa50fd9a..4fd04c049 100644
--- a/packages/stage-ui/src/components/scenarios/dialogs/audio-input/hearing-config-dialog.vue
+++ b/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())
diff --git a/packages/stage-ui/src/components/scenarios/dialogs/background-picker/background-picker-dialog.vue b/packages/stage-ui/src/components/scenarios/dialogs/background-picker/background-picker-dialog.vue
index b9c8f1025..e46f1e142 100644
--- a/packages/stage-ui/src/components/scenarios/dialogs/background-picker/background-picker-dialog.vue
+++ b/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())
diff --git a/packages/stage-ui/src/components/scenarios/dialogs/model-selector/model-selector-dialog.vue b/packages/stage-ui/src/components/scenarios/dialogs/model-selector/model-selector-dialog.vue
index 2efb05abe..b0e4a9f11 100644
--- a/packages/stage-ui/src/components/scenarios/dialogs/model-selector/model-selector-dialog.vue
+++ b/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())
diff --git a/packages/stage-ui/src/components/scenarios/dialogs/onboarding/onboarding-dialog.vue b/packages/stage-ui/src/components/scenarios/dialogs/onboarding/onboarding-dialog.vue
index 78b752524..0fbcdf839 100644
--- a/packages/stage-ui/src/components/scenarios/dialogs/onboarding/onboarding-dialog.vue
+++ b/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())
diff --git a/packages/stage-ui/src/components/scenarios/dialogs/validation-details/provider-validation-details-dialog.vue b/packages/stage-ui/src/components/scenarios/dialogs/validation-details/provider-validation-details-dialog.vue
index 225cdc703..7b78f5a56 100644
--- a/packages/stage-ui/src/components/scenarios/dialogs/validation-details/provider-validation-details-dialog.vue
+++ b/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())
diff --git a/packages/stage-ui/src/composables/index.ts b/packages/stage-ui/src/composables/index.ts
index c6d5d1133..bd5890db8 100644
--- a/packages/stage-ui/src/composables/index.ts
+++ b/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'
diff --git a/packages/stage-ui/src/composables/use-breakpoints.ts b/packages/stage-ui/src/composables/use-breakpoints.ts
new file mode 100644
index 000000000..aa798fefd
--- /dev/null
+++ b/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 }
+}
diff --git a/packages/stage-ui/src/stores/auth.ts b/packages/stage-ui/src/stores/auth.ts
index a5825fb3a..c1a7b5fcb 100644
--- a/packages/stage-ui/src/stores/auth.ts
+++ b/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) {