feat(stage-ui,stage-web): Implement Comprehensive Module Settings Management with Frontend UI and Backend WebSocket Integration (#617)

---------

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Neko Ayaka <neko@ayaka.moe>

Author: 3 people

apps/stage-tamagotchi-electron/src/renderer/main.ts

@@ -1,12 +1,6 @@
-import type { Plugin } from 'vue'
-
-import Tres from '@tresjs/core'
-
-import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
-import { MotionPlugin } from '@vueuse/motion'
+import { initializeApp } from '@proj-airi/stage-ui/services'
 import { createPinia } from 'pinia'
 import { setupLayouts } from 'virtual:generated-layouts'
-import { createApp } from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import { routes } from 'vue-router/auto-routes'
 
@@ -38,12 +32,11 @@ const router = createRouter({
   routes: setupLayouts(routes),
 })
 
-createApp(App)
-  .use(MotionPlugin)
-  // TODO: Fix autoAnimatePlugin type error
-  .use(autoAnimatePlugin as unknown as Plugin)
-  .use(router)
-  .use(pinia)
-  .use(i18n)
-  .use(Tres)
-  .mount('#app')
+// Initialize and mount the app using the shared initialization logic
+initializeApp(App, {
+  router,
+  pinia,
+  i18n,
+}).then((app) => {
+  app.mount('#app')
+})

apps/stage-tamagotchi-electron/src/renderer/pages/settings/modules/gaming-factorio.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { GamingFactorio } from '@proj-airi/stage-ui/components'
+</script>
+
+<template>
+  <GamingFactorio />
+</template>
+
+<route lang="yaml">
+meta:
+  layout: settings
+  stageTransition:
+    name: slide
+    pageSpecificAvailable: true
+</route>

apps/stage-tamagotchi-electron/src/renderer/pages/settings/modules/gaming-minecraft.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { GamingMinecraft } from '@proj-airi/stage-ui/components'
+</script>
+
+<template>
+  <GamingMinecraft />
+</template>
+
+<route lang="yaml">
+meta:
+  layout: settings
+  stageTransition:
+    name: slide
+    pageSpecificAvailable: true
+</route>

apps/stage-tamagotchi-electron/src/renderer/pages/settings/modules/index.vue

@@ -1,118 +1,12 @@
 <script setup lang="ts">
 import { IconStatusItem } from '@proj-airi/stage-ui/components'
-import { useConsciousnessStore } from '@proj-airi/stage-ui/stores/modules/consciousness'
-import { useSpeechStore } from '@proj-airi/stage-ui/stores/modules/speech'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { useModulesList } from '@proj-airi/stage-ui/composables/use-modules-list'
 
 import IconAnimation from '../../../components/IconAnimation.vue'
 
 import { useIconAnimation } from '../../../composables/icon-animation'
 
-const { t } = useI18n()
-
-interface Module {
-  id: string
-  name: string
-  description: string
-  icon?: string
-  iconColor?: string
-  iconImage?: string
-  to: string
-  configured: boolean
-}
-
-// TODO: categorize modules, such as essential, messaging, gaming, etc.
-const modulesList = computed<Module[]>(() => [
-  {
-    id: 'consciousness',
-    name: t('settings.pages.modules.consciousness.title'),
-    description: t('settings.pages.modules.consciousness.description'),
-    icon: 'i-solar:ghost-bold-duotone',
-    to: '/settings/modules/consciousness',
-    configured: useConsciousnessStore().configured,
-  },
-  {
-    id: 'speech',
-    name: t('settings.pages.modules.speech.title'),
-    description: t('settings.pages.modules.speech.description'),
-    icon: 'i-solar:user-speak-rounded-bold-duotone',
-    to: '/settings/modules/speech',
-    configured: useSpeechStore().configured,
-  },
-  {
-    id: 'hearing',
-    name: t('settings.pages.modules.hearing.title'),
-    description: t('settings.pages.modules.hearing.description'),
-    icon: 'i-solar:microphone-3-bold-duotone',
-    to: '/settings/modules/hearing',
-    configured: false,
-  },
-  {
-    id: 'vision',
-    name: t('settings.pages.modules.vision.title'),
-    description: t('settings.pages.modules.vision.description'),
-    icon: 'i-solar:eye-closed-bold-duotone',
-    to: '',
-    configured: false,
-  },
-  {
-    id: 'memory-short-term',
-    name: t('settings.pages.modules.memory-short-term.title'),
-    description: t('settings.pages.modules.memory-short-term.description'),
-    icon: 'i-solar:bookmark-bold-duotone',
-    to: '/settings/modules/memory-short-term',
-    configured: false,
-  },
-  {
-    id: 'memory-long-term',
-    name: t('settings.pages.modules.memory-long-term.title'),
-    description: t('settings.pages.modules.memory-long-term.description'),
-    icon: 'i-solar:book-bookmark-bold-duotone',
-    to: '/settings/modules/memory-long-term',
-    configured: false,
-  },
-  {
-    id: 'messaging-discord',
-    name: t('settings.pages.modules.messaging-discord.title'),
-    description: t('settings.pages.modules.messaging-discord.description'),
-    icon: 'i-simple-icons:discord',
-    to: '',
-    configured: false,
-  },
-  {
-    id: 'x',
-    name: t('settings.pages.modules.x.title'),
-    description: t('settings.pages.modules.x.description'),
-    icon: 'i-simple-icons:x',
-    to: '',
-    configured: false,
-  },
-  {
-    id: 'game-minecraft',
-    name: t('settings.pages.modules.gaming-minecraft.title'),
-    description: t('settings.pages.modules.gaming-minecraft.description'),
-    iconColor: 'i-vscode-icons:file-type-minecraft',
-    to: '',
-    configured: false,
-  },
-  {
-    id: 'game-factorio',
-    name: t('settings.pages.modules.gaming-factorio.title'),
-    description: t('settings.pages.modules.gaming-factorio.description'),
-    iconImage: '',
-    to: '',
-    configured: false,
-  },
-  {
-    id: 'mcp-server',
-    name: t('settings.pages.modules.mcp-server.title'),
-    description: t('settings.pages.modules.mcp-server.description'),
-    icon: 'i-solar:server-bold-duotone',
-    to: '/settings/modules/mcp',
-    configured: false,
-  },
-])
+const { modulesList } = useModulesList()
 
 const {
   iconAnimationStarted,

apps/stage-tamagotchi-electron/src/renderer/pages/settings/modules/messaging-discord.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { MessagingDiscord } from '@proj-airi/stage-ui/components'
+</script>
+
+<template>
+  <MessagingDiscord />
+</template>
+
+<route lang="yaml">
+meta:
+  layout: settings
+  stageTransition:
+    name: slide
+    pageSpecificAvailable: true
+</route>

apps/stage-tamagotchi-electron/src/renderer/pages/settings/modules/x.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { X } from '@proj-airi/stage-ui/components'
+</script>
+
+<template>
+  <X />
+</template>
+
+<route lang="yaml">
+meta:
+  layout: settings
+  stageTransition:
+    name: slide
+    pageSpecificAvailable: true
+</route>

apps/stage-tamagotchi-electron/src/renderer/pages/settings/providers/302-ai.vue

@@ -10,7 +10,7 @@ import {
   ProviderSettingsContainer,
   ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'

apps/stage-tamagotchi-electron/src/renderer/pages/settings/providers/anthropic.vue

@@ -10,7 +10,7 @@ import {
   ProviderSettingsContainer,
   ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'

apps/stage-tamagotchi-electron/src/renderer/pages/settings/providers/azure-ai-foundry.vue

@@ -10,7 +10,7 @@ import {
   ProviderSettingsContainer,
   ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'

apps/stage-tamagotchi-electron/src/renderer/pages/settings/providers/cloudflare-workers-ai.vue

@@ -9,7 +9,7 @@ import {
   ProviderSettingsContainer,
   ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'