refactor: modularize frontend flows

src/composables/useAppShell.ts

@@ -0,0 +1,52 @@
+import { computed, onMounted, onUnmounted, provide } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { AUTH_EVENTS } from '@/services'
+import { ROUTES } from '@/constants'
+import { useTheme } from './useTheme'
+import { usePublicConfigBootstrap } from './usePublicConfigBootstrap'
+import { useRouteLoading } from './useRouteLoading'
+
+export function useAppShell() {
+  const route = useRoute()
+  const router = useRouter()
+  const { isDarkMode, toggleTheme, initTheme } = useTheme()
+  const { isLoading, setupRouteLoading } = useRouteLoading(router)
+  const { syncPublicConfig } = usePublicConfigBootstrap()
+  const showGlobalControls = computed(() => route.meta.showGlobalControls !== false)
+
+  let cleanupThemeListener: (() => void) | null = null
+
+  const handleUnauthorized = () => {
+    if (router.currentRoute.value.path !== ROUTES.LOGIN) {
+      void router.push({
+        path: ROUTES.LOGIN,
+        query: {
+          redirect: router.currentRoute.value.fullPath
+        }
+      })
+    }
+  }
+
+  onMounted(() => {
+    cleanupThemeListener = initTheme()
+    setupRouteLoading()
+    window.addEventListener(AUTH_EVENTS.UNAUTHORIZED, handleUnauthorized)
+    void syncPublicConfig()
+  })
+
+  onUnmounted(() => {
+    cleanupThemeListener?.()
+    window.removeEventListener(AUTH_EVENTS.UNAUTHORIZED, handleUnauthorized)
+  })
+
+  provide('isDarkMode', isDarkMode)
+  provide('toggleTheme', toggleTheme)
+  provide('isLoading', isLoading)
+
+  return {
+    isDarkMode,
+    isLoading,
+    route,
+    showGlobalControls
+  }
+}