fix(stage-tamagotchi): move wss setting to connection page

apps/stage-tamagotchi/electron.vite.config.ts

@@ -199,6 +199,7 @@ export default defineConfig({
             src: resolve(import.meta.dirname, '..', '..', 'packages', 'stage-pages', 'src', 'pages'),
             exclude: base => [
               ...base,
+              '**/settings/connection/index.vue',
               '**/settings/system/general.vue',
               '**/settings/modules/mcp.vue',
             ],

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

@@ -1,10 +1,39 @@
 <script setup lang="ts">
 import ConnectionSettings from '@proj-airi/stage-pages/pages/settings/connection/ConnectionSettings.vue'
+
+import { FieldCheckbox } from '@proj-airi/ui'
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useServerChannelSettingsStore } from '../../../stores/settings/server-channel'
+
+const serverChannelSettingsStore = useServerChannelSettingsStore()
+const { websocketTlsConfig } = storeToRefs(serverChannelSettingsStore)
+const { t } = useI18n()
+
+const websocketTlsEnabled = computed({
+  get: () => websocketTlsConfig.value != null,
+  set: (value: boolean) => {
+    serverChannelSettingsStore.websocketTlsConfig = value ? {} : null
+  },
+})
 </script>
 
 <template>
   <ConnectionSettings>
-    <template #platform-specific />
+    <template #platform-specific>
+      <FieldCheckbox
+        v-model="websocketTlsEnabled"
+        v-motion
+        :initial="{ opacity: 0, y: 10 }"
+        :enter="{ opacity: 1, y: 0 }"
+        :duration="250 + (5 * 10)"
+        :delay="5 * 50"
+        :label="t('settings.websocket-secure-enabled.title')"
+        :description="t('settings.websocket-secure-enabled.description')"
+      />
+    </template>
   </ConnectionSettings>
 </template>
 

apps/stage-tamagotchi/src/renderer/pages/settings/system/general.vue

@@ -1,40 +1,9 @@
 <script setup lang="ts">
 import SettingsGeneralFields from '@proj-airi/stage-pages/components/settings-general-fields.vue'
-
-import { FieldCheckbox } from '@proj-airi/ui'
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { useServerChannelSettingsStore } from '../../../stores/settings/server-channel'
-
-const serverChannelSettingsStore = useServerChannelSettingsStore()
-const { websocketTlsConfig } = storeToRefs(serverChannelSettingsStore)
-const { t } = useI18n()
-
-const websocketTlsEnabled = computed({
-  get: () => websocketTlsConfig.value != null,
-  set: (value: boolean) => {
-    serverChannelSettingsStore.websocketTlsConfig = value ? {} : null
-  },
-})
 </script>
 
 <template>
-  <SettingsGeneralFields>
-    <template #additional-fields>
-      <FieldCheckbox
-        v-model="websocketTlsEnabled"
-        v-motion
-        :initial="{ opacity: 0, y: 10 }"
-        :enter="{ opacity: 1, y: 0 }"
-        :duration="250 + (5 * 10)"
-        :delay="5 * 50"
-        :label="t('settings.websocket-secure-enabled.title')"
-        :description="t('settings.websocket-secure-enabled.description')"
-      />
-    </template>
-  </SettingsGeneralFields>
+  <SettingsGeneralFields />
 </template>
 
 <route lang="yaml">

packages/stage-pages/src/pages/settings/connection/ConnectionSettings.vue

@@ -10,7 +10,7 @@ const websocketUrl = useLocalStorageManualReset('settings/connection/websocket-u
 </script>
 
 <template>
-  <div :class="['rounded-lg', 'bg-neutral-50', 'p-4', 'dark:bg-neutral-800', 'flex', '~', 'col', 'gap-4']">
+  <div :class="['rounded-lg', 'bg-neutral-50', 'p-4', 'dark:bg-neutral-800', 'flex flex-col', 'gap-4']">
     <!-- // TODO: Make this array, support to connect to multiple WebSocket server -->
     <FieldInput
       v-model="websocketUrl"