refactor signed-in state loading flow

Author: nighca

spx-gui/src/components/agent-copilot/CopilotProvider.vue

@@ -84,7 +84,7 @@ export function useAgentCopilotCtx() {
  * Handles initialization of Copilot, MCP connections, and UI rendering.
  */
 import { reactive, inject, ref, provide, onBeforeUnmount, computed, type Ref, watch } from 'vue'
-import { computedShallowReactive, untilNotNull } from '@/utils/utils'
+import { computedShallowReactive } from '@/utils/utils'
 import { useI18n } from '@/utils/i18n'
 import { Copilot } from './copilot'
 import { CopilotController, type ICopilot } from './index'
@@ -95,7 +95,8 @@ import { ToolRegistry } from './mcp/registry'
 import { Collector } from './mcp/collector'
 import CopilotUI from './CopilotUI.vue'
 import { z } from 'zod'
-import { isSignedIn, useSignedInUser } from '@/stores/user'
+import { untilLoaded } from '@/utils/query'
+import { useSignedInStateQuery } from '@/stores/user'
 import { createProjectToolDescription, CreateProjectArgsSchema } from './mcp/definitions'
 import { getProject, Visibility } from '@/apis/project'
 import { useRouter } from 'vue-router'
@@ -114,7 +115,7 @@ const visible = ref(false)
 const mcpDebuggerVisible = ref(false)
 const showEnvPanel = ref(false)
 const router = useRouter()
-const signedInUser = useSignedInUser()
+const signedInStateQuery = useSignedInStateQuery()
 
 const toggleEnvPanel = () => {
   showEnvPanel.value = !showEnvPanel.value
@@ -180,15 +181,15 @@ const initBasicTools = async () => {
 async function createProject(options: CreateProjectOptions) {
   const projectName = options.projectName
 
-  // Check if user is signed in
-  if (!isSignedIn()) {
+  const signedInState = await untilLoaded(signedInStateQuery)
+  if (!signedInState.isSignedIn) {
     return {
       success: false,
       message: 'Please sign in to create a project'
     }
   }
 
-  const { username } = await untilNotNull(signedInUser)
+  const { username } = signedInState.user
 
   try {
     // Check if project already exists

spx-gui/src/components/asset/gen/sprite/SpriteGen.vue

@@ -4,7 +4,7 @@ import { useI18n } from '@/utils/i18n'
 import { useNetwork } from '@/utils/network'
 import type { SpriteGen } from '@/models/spx/gen/sprite-gen'
 import type { Sprite } from '@/models/spx/sprite'
-import { useSignedInUser } from '@/stores/user'
+import { useSignedInStateQuery } from '@/stores/user'
 import { cloudHelpers } from '@/models/common/cloud'
 import { provideLocalEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 import { EditorState } from '@/components/editor/editor-state'
@@ -23,7 +23,7 @@ const emit = defineEmits<{
 }>()
 
 const i18n = useI18n()
-const signedInUser = useSignedInUser()
+const signedInStateQuery = useSignedInStateQuery()
 const { isOnline } = useNetwork()
 // Local cache is not really used in sprite gen, so a dummy implementation is sufficient.
 const localCache: ILocalCache = {
@@ -33,7 +33,7 @@ const localCache: ILocalCache = {
 }
 // We should override the state to avoid history operations caused by animation / costume changes within sprite gen.
 const editorStateInGen = useComputedDisposable(
-  () => new EditorState(i18n, props.gen.previewProject, isOnline, signedInUser, cloudHelpers, localCache)
+  () => new EditorState(i18n, props.gen.previewProject, isOnline, signedInStateQuery, cloudHelpers, localCache)
 )
 const editorCtxInGen = computedShallowReactive(() => ({
   project: props.gen.previewProject,

spx-gui/src/components/asset/library/AssetSaveModal.vue

@@ -23,7 +23,7 @@ import type { AssetModel, PartialAssetData } from '@/models/spx/common/asset'
 import { backdrop2Asset, sound2Asset, sprite2Asset } from '@/models/spx/common/asset'
 import { useI18n } from '@/utils/i18n'
 import { useQuery } from '@/utils/query'
-import { useSignedInUser } from '@/stores/user'
+import { useSignedInStateQuery } from '@/stores/user'
 import { categoryAll, getAssetCategories } from './category'
 import BackdropPreview from './BackdropPreview.vue'
 import SpritePreview from './SpritePreview.vue'
@@ -39,10 +39,10 @@ const emit = defineEmits<{
   resolved: []
 }>()
 
-const signedInUser = useSignedInUser()
+const signedInStateQuery = useSignedInStateQuery()
 
 const user = computed(() => {
-  const u = signedInUser.value
+  const u = signedInStateQuery.data.value?.user
   if (u == null) throw new Error('user is not signed in')
   return u
 })

spx-gui/src/components/copilot/CopilotRoot.vue

@@ -28,7 +28,7 @@ import * as highlightLink from './custom-elements/HighlightLink.vue'
 import * as codeLink from './custom-elements/CodeLink'
 import * as codeChange from './custom-elements/CodeChange.vue'
 import { codeFilePathSchema, parseProjectIdentifier, projectIdentifierSchema } from './common'
-import { isSignedIn, useSignedInUser, type SignedInUser } from '@/stores/user'
+import { useSignedInStateQuery, type SignedInState } from '@/stores/user'
 import { userSessionStorageRef } from '@/utils/user-storage'
 import { cloudHelpers, type CloudHelpers } from '@/models/common/cloud'
 import { provideCopilot } from './context'
@@ -298,15 +298,15 @@ If there's an API References UI in code editor, encourage the user to insert cod
 }
 
 class UserContextProvider implements ICopilotContextProvider {
-  constructor(private signedInUser: WatchSource<SignedInUser | null>) {}
+  constructor(private signedInState: WatchSource<SignedInState | null>) {}
 
   provideContext(): string {
-    const signedInUsername = toValue(this.signedInUser)?.username
+    const signedInState = toValue(this.signedInState)
     const userInfo =
-      signedInUsername != null
-        ? `Now the user is signed in with name "${signedInUsername}"`
-        : isSignedIn()
-          ? 'The user is signed in, but the user info is still loading'
+      signedInState == null
+        ? 'The signed-in state is still loading'
+        : signedInState.isSignedIn
+          ? `Now the user is signed in with name "${signedInState.user.username}"`
           : 'The user is not signed in'
     return `# Current user
 ${userInfo}`
@@ -413,7 +413,7 @@ const modalEvents = useModalEvents()
 const messageEvents = useMessageEvents()
 const editorCtxRef = useEditorCtxRef()
 const codeEditorRef = useCodeEditorRef()
-const signedInUser = useSignedInUser()
+const signedInStateQuery = useSignedInStateQuery()
 const retriever = new Retriever(editorCtxRef, cloudHelpers)
 const copilot = new Copilot()
 onUnmounted(() => copilot.dispose())
@@ -455,7 +455,7 @@ copilot.registerCustomElement({
 
 copilot.registerTool(new GetUINodeTextContentTool(radar))
 copilot.registerContextProvider(new UIContextProvider(radar, i18n))
-copilot.registerContextProvider(new UserContextProvider(signedInUser))
+copilot.registerContextProvider(new UserContextProvider(signedInStateQuery.data))
 copilot.registerContextProvider(new LocationContextProvider(router))
 copilot.registerContextProvider(new ProjectContextProvider(editorCtxRef))
 copilot.registerContextProvider(new SpriteContextProvider(editorCtxRef))

spx-gui/src/components/copilot/CopilotUI.vue

@@ -29,8 +29,9 @@ import { useRouter } from 'vue-router'
 
 import { isRectIntersecting, useBottomSticky, useContentSize } from '@/utils/dom'
 import { assertNever, localStorageRef, timeout, untilNotNull } from '@/utils/utils'
+import { untilLoaded } from '@/utils/query'
 import { useMessageHandle } from '@/utils/exception'
-import { isSignedIn, useSignedInUser } from '@/stores/user'
+import { isSignedIn, useSignedInStateQuery } from '@/stores/user'
 import { useDraggable, type Offset } from '@/utils/draggable'
 import { providePopupContainer, UIButton, UITooltip } from '@/components/ui'
 import CopilotInput from './CopilotInput.vue'
@@ -397,7 +398,7 @@ onBeforeUnmount(
 )
 
 // Copilot open handling, implemented here due to high business logic coupling
-const signedInUser = useSignedInUser()
+const signedInStateQuery = useSignedInStateQuery()
 const usedCopilotUsersRef = localStorageRef<string[]>('spx-gui-used-copilot-users', [])
 watch(
   router.currentRoute,
@@ -411,12 +412,17 @@ watch(
     immediate: true
   }
 )
-/**
- * Records that the current user has used Copilot when the specified condition is met.
- */
+/** Whether the current user has not used Copilot. */
+const copilotNotUsed = computed(() => {
+  const signedInState = signedInStateQuery.data.value
+  if (signedInState == null) return false
+  return !signedInState.isSignedIn || !usedCopilotUsersRef.value.includes(signedInState.user.username)
+})
+/** Records that the current user has used Copilot when the specified condition is met. */
 async function recordCopilotUsage(shouldRecord: () => boolean) {
-  if (!isSignedIn()) return
-  const { username } = await untilNotNull(signedInUser)
+  const signedInState = await untilLoaded(signedInStateQuery)
+  if (!signedInState.isSignedIn) return
+  const { username } = signedInState.user
   const userUsedCopilot = usedCopilotUsersRef.value
   // Skip if condition is not met or user has already been recorded
   if (!shouldRecord() || userUsedCopilot.includes(username)) return
@@ -434,9 +440,9 @@ watch(
 )
 /** Open copilot for signed-in users on their first copilot use */
 onMounted(async () => {
-  if (!isSignedIn()) return
-  const user = await untilNotNull(signedInUser)
-  if (usedCopilotUsersRef.value.includes(user.username)) return
+  const signedInState = await untilLoaded(signedInStateQuery)
+  if (!signedInState.isSignedIn) return
+  if (usedCopilotUsersRef.value.includes(signedInState.user.username)) return
   copilot.open()
 })
 </script>
@@ -540,7 +546,7 @@ onMounted(async () => {
               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                 <path d="M12 12.6667V3.33333" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                 <path
-                  :class="{ arrow: signedInUser == null || !usedCopilotUsersRef.includes(signedInUser.username) }"
+                  :class="{ animating: copilotNotUsed }"
                   d="M3.33301 3.33334L8.66634 8L3.33301 12.6667"
                   stroke-width="1.33333"
                   stroke-linecap="round"
@@ -831,7 +837,7 @@ $toColor: #c390ff;
       }
     }
 
-    .arrow {
+    .animating {
       animation: nudge 0.5s ease-in-out infinite alternate;
     }