cringe sfx

client/app/components.d.ts

@@ -13,18 +13,13 @@ declare module 'vue' {
     PrimeButton: typeof import('primevue/button')['default']
     PrimeButtonGroup: typeof import('primevue/buttongroup')['default']
     PrimeCard: typeof import('primevue/card')['default']
-    PrimeDivider: typeof import('primevue/divider')['default']
     PrimeFloatLabel: typeof import('primevue/floatlabel')['default']
     PrimeInputText: typeof import('primevue/inputtext')['default']
     PrimePassword: typeof import('primevue/password')['default']
-    PrimeProgressBar: typeof import('primevue/progressbar')['default']
     PrimeScrollPanel: typeof import('primevue/scrollpanel')['default']
-    PrimeSelect: typeof import('primevue/select')['default']
     PrimeSelectButton: typeof import('primevue/selectbutton')['default']
     PrimeSlider: typeof import('primevue/slider')['default']
-    PrimeTag: typeof import('primevue/tag')['default']
     PrimeToast: typeof import('primevue/toast')['default']
-    PrimeToggleSwitch: typeof import('primevue/toggleswitch')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

client/app/composables/use-signaling.ts

@@ -66,7 +66,7 @@ export const useSignaling = createSharedComposable(() => {
 
     const uri = host ? `${protocol}//${host}` : ``
 
-    socket.value = io(`${uri}/webrtc`, {
+    socket.value = io(`${uri}`, {
       path: `${pathname}/ws`,
       transports: ['websocket'],
       withCredentials: true,

client/app/layouts/auth.vue

@@ -4,7 +4,7 @@
 
     <div v-auto-animate class="w-1/2 m-auto">
       <div class="text-center">
-        <PrimeSelectButton v-model="tab" class="mb-6" :options="options" option-label="label" :allow-empty="false" />
+        <PrimeSelectButton :model-value="tab" class="mb-6" :options="options" option-label="label" :allow-empty="false" @update:model-value="onTabChanged" />
       </div>
 
       <slot />
@@ -15,28 +15,35 @@
 </template>
 
 <script setup lang="ts">
+import type { RouteLocationRaw } from 'vue-router'
+
 const route = useRoute()
+const router = useRouter()
 const { version } = useApp()
 
+interface Tab {
+  label: string
+  route: RouteLocationRaw
+}
+
 const options = computed(() => {
   return [
     {
       label: 'Login',
-      routeName: 'Login',
+      route: { name: 'Login' },
     },
     {
       label: 'Register',
-      routeName: 'Register',
+      route: { name: 'Register' },
     },
-  ]
+  ] as Tab[]
 })
 
-const tab = shallowRef(options.value.find(option => route.name === option.routeName))
-
-watch(tab, (tab) => {
-  if (!tab)
-    return
-
-  navigateTo({ name: tab.routeName })
+const tab = computed(() => {
+  return options.value.find(option => route.name === router.resolve(option.route)?.name)
 })
+
+function onTabChanged(tab: Tab) {
+  navigateTo(tab.route)
+}
 </script>

client/app/pages/preferences.vue

@@ -81,6 +81,7 @@
         size="small"
         option-label="label"
         option-value="value"
+        :allow-empty="false"
       />
     </div>