front update

client/app/app.vue

@@ -1,24 +1,7 @@
 <template>
-  <PrimeProgressSpinner v-if="initializing" />
+  <NuxtPage />
-
-  <template v-for="(s, producerId) in streams" :key="producerId">
-    <PrimeChip :label="producerId" />
-    <audio
-      :ref="(el) => onAudioRef(el as HTMLAudioElement, s)"
-      autoplay
-      controls
-      style="display: none;"
-    />
-  </template>
 </template>
 
 <script lang="ts" setup>
-const { initializing, connected, streams } = useMediasoup()
+useMediasoup()
-
-function onAudioRef(ref: HTMLAudioElement, stream: MediaStream) {
-  if (!ref)
-    return
-
-  ref.srcObject = stream
-}
 </script>

client/app/assets/styles/main.scss

@@ -1,5 +1,13 @@
+
 html,
 body {
   font-family: 'Inter', sans-serif;
-  font-size: 14px;
+  font-size: 16px;
+
+  height: 100%;
+  overflow: hidden;
+}
+
+#__nuxt {
+  height: 100%;
 }

client/app/assets/styles/primeicons.css

@@ -0,0 +1 @@
+@import 'primeicons/primeicons.css';

client/app/assets/styles/tailwind.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "tailwindcss-primeui";

client/app/components.d.ts

@@ -8,9 +8,27 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    PrimeAccordion: typeof import('primevue/accordion')['default']
+    PrimeAccordionContent: typeof import('primevue/accordioncontent')['default']
+    PrimeAccordionHeader: typeof import('primevue/accordionheader')['default']
+    PrimeAccordionPanel: typeof import('primevue/accordionpanel')['default']
+    PrimeAvatar: typeof import('primevue/avatar')['default']
+    PrimeBadge: typeof import('primevue/badge')['default']
     PrimeButton: typeof import('primevue/button')['default']
-    PrimeChip: typeof import('primevue/chip')['default']
+    PrimeButtonGroup: typeof import('primevue/buttongroup')['default']
-    PrimeProgressSpinner: typeof import('primevue/progressspinner')['default']
+    PrimeCard: typeof import('primevue/card')['default']
+    PrimeContextMenu: typeof import('primevue/contextmenu')['default']
+    PrimeDivider: typeof import('primevue/divider')['default']
+    PrimeDrawer: typeof import('primevue/drawer')['default']
+    PrimeFloatLabel: typeof import('primevue/floatlabel')['default']
+    PrimeInputText: typeof import('primevue/inputtext')['default']
+    PrimeMenu: typeof import('primevue/menu')['default']
+    PrimeOverlayBadge: typeof import('primevue/overlaybadge')['default']
+    PrimePopover: typeof import('primevue/popover')['default']
+    PrimeScrollPanel: typeof import('primevue/scrollpanel')['default']
+    PrimeSlider: typeof import('primevue/slider')['default']
+    PrimeTag: typeof import('primevue/tag')['default']
+    PrimeToolbar: typeof import('primevue/toolbar')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

client/app/components/ClientRow.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="flex items-center gap-3 py-3">
+    <PrimeAvatar icon="pi pi-user" size="small" />
+
+    <div class="flex-1">
+      <div class="text-sm leading-5 font-medium text-color whitespace-nowrap overflow-ellipsis">
+        {{ client.username }}
+      </div>
+      <div class="mt-1 text-xs leading-5 text-muted-color">
+        {{ client.id }}
+      </div>
+    </div>
+
+    <PrimeBadge severity="secondary" value="Muted" />
+
+    <PrimeButton icon="pi pi-ellipsis-h" text size="small" @click="menuRef?.toggle" />
+
+    <PrimeMenu ref="menu" popup :model="menuItems" style="translate: calc(-100% + 2rem) 0.5rem">
+      <template #start>
+        <div class="px-4 py-3">
+          <div class="flex justify-between">
+            <span>Volume</span>
+            <span>{{ volume }}</span>
+          </div>
+          <PrimeSlider v-model="volume" class="mt-4" :min="0" :max="100" :step="5" />
+        </div>
+      </template>
+    </PrimeMenu>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Client } from '#shared/types'
+import type { MenuItem } from 'primevue/menuitem'
+
+defineProps<{
+  client: Client
+}>()
+
+const menuRef = useTemplateRef('menu')
+const volume = ref(100)
+
+const menuItems: MenuItem[] = [
+  {
+    label: 'Mute',
+    icon: 'pi pi-headphones',
+  },
+  {
+    label: 'DM',
+    icon: 'pi pi-comment',
+    disabled: true,
+  },
+]
+</script>

client/app/composables/use-global-state.ts

@@ -0,0 +1,18 @@
+import type { Client } from '#shared/types'
+import { createGlobalState, useLocalStorage } from '@vueuse/core'
+
+export const useGlobalState = createGlobalState(() => {
+  const username = useLocalStorage<string>('username', '')
+
+  const clients = shallowRef<Client[]>([])
+
+  function reset() {
+    clients.value = []
+  }
+
+  return {
+    username,
+    clients,
+    reset,
+  }
+})

client/app/composables/use-mediasoup.ts

@@ -1,6 +1,5 @@
-import type { type Consumer, Producer } from 'mediasoup-client/types'
 import type { Socket } from 'socket.io-client'
-import { createGlobalState } from '@vueuse/core'
+import { createSharedComposable } from '@vueuse/core'
 import * as mediasoupClient from 'mediasoup-client'
 import { io } from 'socket.io-client'
 
@@ -17,84 +16,172 @@ const ICE_SERVERS: RTCIceServer[] = [
   { urls: 'stun:stun4.l.google.com:5349' },
 ]
 
-export const useMediasoup = createGlobalState(() => {
+export const useMediasoup = createSharedComposable(() => {
-  const socket: Socket = io('https://api.koptilnya.xyz/webrtc', {
+  const state = useGlobalState()
-    path: '/chad/ws',
+
-    transports: ['websocket'],
+  const socket = shallowRef<Socket>()
+
+  const device = shallowRef<mediasoupClient.Device>()
+  const rtpCapabilities = shallowRef<mediasoupClient.types.RtpCapabilities>()
+  const sendTransport = shallowRef<mediasoupClient.types.Transport>()
+  const recvTransport = shallowRef<mediasoupClient.types.Transport>()
+
+  const micProducer = shallowRef<mediasoupClient.types.Producer>()
+  const webcamProducer = shallowRef<mediasoupClient.types.Producer>()
+  const shareProducer = shallowRef<mediasoupClient.types.Producer>()
+
+  const producers = shallowRef<Map<string, mediasoupClient.types.Producer>>(new Map())
+  const consumers = shallowRef<Map<string, mediasoupClient.types.Consumer>>(new Map())
+
+  //
+  // socket.on('producers', async (producers) => {
+  //   watch(connected, async () => {
+  //     if (!connected.value)
+  //       return
+  //
+  //     for (const producer of producers) {
+  //       await consume(producer.producerId)
+  //     }
+  //   }, { immediate: true })
+  // })
+  //
+  // socket.on('newProducer', async ({ producerId }) => {
+  //   await consume(producerId)
+  // })
+  //
+  // socket.on('producerClosed', async (producerId: Producer['id']) => {
+  //   delete streams.value[producerId]
+  //
+  //   triggerRef(streams)
+  // })
+  //
+  // async function consume(producerId: number) {
+  //   const params = await socket.emitWithAck('consume', {
+  //     producerId,
+  //     transportId: recvTransport.id,
+  //     rtpCapabilities: device.rtpCapabilities,
+  //   })
+  //
+  //   if (params?.error) {
+  //     console.error('consume error:', params.error)
+  //     return
+  //   }
+  //
+  //   const consumer = await recvTransport.consume({
+  //     ...params,
+  //     id: params.consumerId,
+  //   })
+  //
+  //   const stream = new MediaStream([consumer.track])
+  //
+  //   streams.value[producerId] = stream
+  //
+  //   triggerRef(streams)
+  // }
+
+  watch(socket, (socket, prevSocket) => {
+    if (prevSocket) {
+      prevSocket.close()
+
+      dispose()
+      state.reset()
+    }
+
+    if (!socket) {
+      return
+    }
+
+    socket.onAny((event, ...args) => {
+      console.log('[onAny]', event, args)
     })
 
-  const initializing = ref(false)
+    socket.onAnyOutgoing((event, ...args) => {
-  const connected = ref(false)
+      console.log('[onAnyOutgoing]', event, args)
-  const streams = shallowRef<Record<Consumer['id'], MediaStream>>({})
+    })
-  let device: mediasoupClient.Device
-  let sendTransport: mediasoupClient.types.Transport
-  let recvTransport: mediasoupClient.types.Transport
 
-  socket.on('producers', async (producers) => {
+    socket.on('connect', () => {
-    watch(connected, async () => {
+      if (!state.username.value)
-      if (!connected.value)
+        state.username.value = socket.id!
+
+      join()
+    })
+
+    socket.on('newPeer', (client) => {
+      state.clients.value.push(client)
+      triggerRef(state.clients)
+    })
+
+    socket.on('peerClosed', (id) => {
+      state.clients.value = state.clients.value.filter(client => client.id !== id)
+    })
+
+    socket.on(
+      'newConsumer',
+      async (
+        { id, producerId, kind, rtpParameters, peerId, appData, producerPaused },
+        cb,
+      ) => {
+        console.log({ id, producerId, kind, rtpParameters, peerId, appData }, cb)
+
+        if (!recvTransport.value)
           return
 
-      for (const producer of producers) {
+        const consumer = await recvTransport.value.consume({
-        await consume(producer.producerId)
+          id,
-      }
-    }, { immediate: true })
-  })
-
-  socket.on('newProducer', async ({ producerId }) => {
-    await consume(producerId)
-  })
-
-  socket.on('producerClosed', async (producerId: Producer['id']) => {
-    delete streams.value[producerId]
-
-    triggerRef(streams)
-  })
-
-  async function consume(producerId: number) {
-    const params = await socket.emitWithAck('consume', {
           producerId,
-      transportId: recvTransport.id,
+          kind,
-      rtpCapabilities: device.rtpCapabilities,
+          rtpParameters,
+          streamId: `${peerId}-${appData.share ? 'share' : 'mic-webcam'}`,
+          appData: { ...appData, peerId },
         })
 
-    if (params?.error) {
+        consumers.value.set(consumer.id, consumer)
-      console.error('consume error:', params.error)
+        triggerRef(consumers)
+
+        consumer.on('transportclose', () => {
+          consumers.value.delete(consumer.id)
+          triggerRef(consumers)
+        })
+      },
+    )
+
+    socket.on('disconnect', () => {
+      sendTransport.value?.close()
+      sendTransport.value = undefined
+
+      recvTransport.value?.close()
+      recvTransport.value = undefined
+    })
+  }, { immediate: true, flush: 'sync' })
+
+  onBeforeUnmount(() => {
+    socket.value?.close()
+  })
+
+  async function join() {
+    if (!socket.value)
       return
-    }
 
-    const consumer = await recvTransport.consume({
+    device.value = new mediasoupClient.Device()
-      ...params,
+    rtpCapabilities.value = await socket.value.emitWithAck('getRtpCapabilities')
-      id: params.consumerId,
-    })
 
-    const stream = new MediaStream([consumer.track])
+    await device.value.load({ routerRtpCapabilities: rtpCapabilities.value! })
 
-    streams.value[producerId] = stream
+    // Send transport
-
+    {
-    triggerRef(streams)
+      const transportInfo = await socket.value.emitWithAck('createTransport', { producing: true, consuming: false })
-  }
+      sendTransport.value = device.value.createSendTransport({
-
+        ...transportInfo,
-  async function loadDevice() {
-    device = new mediasoupClient.Device()
-    const rtpCapabilities = await socket.emitWithAck('getRtpCapabilities')
-    await device.load({ routerRtpCapabilities: rtpCapabilities })
-  }
-
-  async function createSendTransport() {
-    const params = await socket.emitWithAck('createTransport')
-    sendTransport = device.createSendTransport({
-      ...params,
         iceServers: [
           ...ICE_SERVERS,
-        ...(params.iceServers ?? []),
+          ...(transportInfo.iceServers ?? []),
         ],
       })
 
-    sendTransport.on('connect', async ({ dtlsParameters }, callback, errback) => {
+      sendTransport.value.on('connect', async ({ dtlsParameters }, callback, errback) => {
         try {
-        await socket.emitWithAck('connectTransport', {
+          await socket.value!.emitWithAck('connectTransport', {
-          transportId: sendTransport.id,
+            transportId: sendTransport.value!.id,
             dtlsParameters,
           })
 
@@ -107,14 +194,15 @@ export const useMediasoup = createGlobalState(() => {
         }
       })
 
-    sendTransport.on('produce', async ({ kind, rtpParameters }, callback, errback) => {
+      sendTransport.value.on('produce', async ({ kind, rtpParameters, appData }, callback, errback) => {
         try {
-        const { producerId } = await socket.emitWithAck('produce', {
+          const { id } = await socket.value!.emitWithAck('produce', {
-          transportId: sendTransport.id,
+            transportId: sendTransport.value!.id,
             kind,
             rtpParameters,
+            appData,
           })
-        callback({ id: producerId })
+          callback({ id })
         }
         catch (error) {
           if (error instanceof Error) {
@@ -124,68 +212,166 @@ export const useMediasoup = createGlobalState(() => {
       })
     }
 
-  async function publishMic() {
+    // Recv Transport
-    const devices = await navigator.mediaDevices.enumerateDevices()
+    {
-    console.log(devices)
+      const transportInfo = await socket.value.emitWithAck('createTransport', { producing: false, consuming: true })
+      recvTransport.value = device.value.createRecvTransport({
+        ...transportInfo,
+        iceServers: [
+          ...ICE_SERVERS,
+          ...(transportInfo.iceServers ?? []),
+        ],
+      })
+
+      recvTransport.value.on('connect', async ({ dtlsParameters }, callback, errback) => {
+        try {
+          await socket.value!.emitWithAck('connectTransport', {
+            transportId: recvTransport.value!.id,
+            dtlsParameters,
+          })
+
+          callback()
+        }
+        catch (error) {
+          if (error instanceof Error) {
+            errback(error)
+          }
+        }
+      })
+    }
+
+    const result = await socket.value.emitWithAck('join', { username: state.username.value, rtpCapabilities: rtpCapabilities.value })
+
+    state.clients.value = result
+
+    await enableMic()
+  }
+
+  async function enableMic() {
+    if (micProducer.value)
+      return
+
+    if (!device.value || !sendTransport.value)
+      return
+
+    if (!device.value.canProduce('audio'))
+      return
 
     const stream = await navigator.mediaDevices.getUserMedia({
       audio: {
         autoGainControl: false,
         noiseSuppression: true,
         echoCancellation: false,
+        channelCount: 2,
       },
     })
     const track = stream.getAudioTracks()[0]
 
-    await sendTransport.produce({ track })
+    micProducer.value = await sendTransport.value.produce({
-  }
+      track,
-
+      codecOptions: {
-  async function createRecvTransport() {
+        opusStereo: true,
-    const params = await socket.emitWithAck('createTransport')
+        opusDtx: true, // Меньше пакетов летит когда тишина
-    recvTransport = device.createRecvTransport({
+        opusFec: false, // Фиксит пакет лос
-      ...params,
+      },
-      iceServers: [
-        ...ICE_SERVERS,
-        ...(params.iceServers ?? []),
-      ],
     })
 
-    recvTransport.on('connect', async ({ dtlsParameters }, callback, errback) => {
+    producers.value.set(micProducer.value.id, micProducer.value)
-      try {
+    triggerRef(producers)
-        await socket.emitWithAck('connectTransport', {
+
-          transportId: recvTransport.id,
+    micProducer.value.on('transportclose', () => {
-          dtlsParameters,
+      micProducer.value = undefined
     })
 
-        callback()
+    micProducer.value.on('trackended', () => {
-      }
+      disableMic()
-      catch (error) {
-        if (error instanceof Error) {
-          errback(error)
-        }
-      }
     })
   }
 
-  (async () => {
+  async function disableMic() {
-    if (initializing.value || connected.value)
+    if (!micProducer.value)
       return
 
-    initializing.value = true
+    producers.value.delete(micProducer.value.id)
-    connected.value = false
+    triggerRef(producers)
 
-    await loadDevice()
+    try {
-    await createSendTransport()
+      micProducer.value.close()
-    await createRecvTransport()
-    await publishMic()
 
-    initializing.value = false
+      await socket.value?.emitWithAck('closeProducer', {
-    connected.value = true
+        producerId: micProducer.value.id,
-  })()
+      })
+    }
+    catch {
+    }
+
+    micProducer.value = undefined
+  }
+
+  async function muteMic() {
+    if (!micProducer.value)
+      return
+
+    try {
+      micProducer.value.pause()
+
+      await socket.value?.emitWithAck('pauseProducer', {
+        producerId: micProducer.value.id,
+      })
+    }
+    catch {
+    }
+  }
+
+  async function unmuteMic() {
+    if (!micProducer.value)
+      return
+
+    try {
+      micProducer.value?.resume()
+
+      await socket.value?.emitWithAck('resumeProducer', {
+        producerId: micProducer.value.id,
+      })
+    }
+    catch {
+    }
+  }
+
+  function init() {
+    if (socket.value)
+      return
+
+    socket.value = io('https://api.koptilnya.xyz/webrtc', {
+      path: '/chad/ws',
+      transports: ['websocket'],
+    })
+  }
+
+  function dispose() {
+    device.value = undefined
+    rtpCapabilities.value = undefined
+    sendTransport.value = undefined
+    recvTransport.value = undefined
+
+    micProducer.value = undefined
+    webcamProducer.value = undefined
+    shareProducer.value = undefined
+
+    consumers.value = new Map()
+  }
 
   return {
-    initializing,
+    init,
-    connected,
+    sendTransport,
-    streams,
+    recvTransport,
+    socket,
+    rtpCapabilities,
+    device,
+    producers,
+    consumers,
+    micProducer,
+    webcamProducer,
+    shareProducer,
   }
 })

client/app/middleware/02.auth.global.ts

@@ -0,0 +1,19 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+  const { username } = useGlobalState()
+
+  if (!username.value && to.name !== 'Login') {
+    console.log('yes')
+    return navigateTo({ name: 'Login' })
+  }
+
+  if (!username.value)
+    return
+
+  const { init } = useMediasoup()
+
+  init()
+
+  if (to.name === 'Login') {
+    return navigateTo('/')
+  }
+})

client/app/pages/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="grid grid-cols-2 h-screen">
+    <div class="flex flex-col shadow-xl overflow-y-hidden">
+      <div class="flex items-center bg-surface-950 border-b-2 border-surface-800 px-3 py-3">
+        <h1>
+          Шальные сиськи 18+
+        </h1>
+
+        <div class="inline-flex gap-2 ml-auto">
+          <PrimeButton icon="pi pi-headphones" text size="large" />
+          <PrimeButton icon="pi pi-microphone" text size="large" />
+        </div>
+      </div>
+
+      <div v-auto-animate class="p-3 overflow-y-auto flex-1 bg-surface-900 overflow-hidden divide-y divide-surface-800">
+        <ClientRow v-for="client of clients" :key="client.id" :client="client" />
+      </div>
+    </div>
+  </div>
+
+  <audio v-for="[id, producer] in Array.from(producers)" :key="id" :ref="(el) => onAudioRef(el, producer)" />
+
+  <PrimeBadge class="fixed top-3 right-3" severity="success" />
+</template>
+
+<script setup lang="ts">
+import type { Producer } from 'mediasoup-client/types'
+import { vAutoAnimate } from '@formkit/auto-animate'
+
+const { clients } = useGlobalState()
+const { producers } = useMediasoup()
+
+function onAudioRef(ref: HTMLAudioElement, producer: Producer) {
+  if (!ref || !producer.track)
+    return
+
+  console.log(onAudioRef)
+
+  const stream = new MediaStream()
+
+  stream.addTrack(producer.track)
+
+  ref.srcObject = stream
+
+  ref.play()
+}
+</script>

client/app/pages/login.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="w-full h-full flex justify-center items-center">
+    <PrimeCard class="w-2/5">
+      <template #content>
+        <form class="flex flex-col gap-3" @submit.prevent="submit">
+          <PrimeInputText v-model="username" type="text" placeholder="Username" />
+
+          <PrimeButton size="large" icon="pi pi-arrow-right" icon-pos="right" label="Let's go" :disabled="!username" type="submit" />
+        </form>
+      </template>
+    </PrimeCard>
+  </div>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  name: 'Login',
+  layout: 'login',
+})
+
+const { username } = useGlobalState()
+const { init } = useMediasoup()
+
+async function submit() {
+  if (!username.value)
+    return
+
+  await navigateTo('/')
+}
+</script>

client/nuxt.config.ts

@@ -1,4 +1,5 @@
 import Aura from '@primeuix/themes/aura'
+import tailwindcss from '@tailwindcss/vite'
 
 export default defineNuxtConfig({
   compatibilityDate: '2025-09-29',
@@ -18,11 +19,18 @@ export default defineNuxtConfig({
       prefix: 'Prime',
     },
   },
-  css: ['@/assets/styles/main.scss'],
+  css: [
+    '@/assets/styles/tailwind.css',
+    '@/assets/styles/primeicons.css',
+    '@/assets/styles/main.scss',
+  ],
   devServer: {
     // host: '0',
   },
   vite: {
+    plugins: [
+      tailwindcss(),
+    ],
     clearScreen: false,
     envPrefix: ['VITE_', 'TAURI_'],
     server: {

client/package.json

@@ -10,13 +10,19 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@formkit/auto-animate": "^0.9.0",
     "@nuxt/fonts": "^0.11.4",
     "@primeuix/themes": "^1.2.5",
+    "@tailwindcss/vite": "^4.1.14",
     "@vueuse/core": "^13.9.0",
     "mediasoup-client": "^3.16.7",
     "nuxt": "^4.1.2",
+    "postcss": "^8.5.6",
+    "primeicons": "^7.0.0",
     "primevue": "^4.4.0",
     "socket.io-client": "^4.8.1",
+    "tailwindcss": "^4.1.14",
+    "tailwindcss-primeui": "^0.6.1",
     "vue": "^3.5.22",
     "vue-router": "^4.5.1"
   },

client/shared/types.ts

@@ -0,0 +1,7 @@
+import type * as mediasoupClient from 'mediasoup-client'
+
+export interface Client {
+  id: string
+  username: string
+  consumers: mediasoupClient.types.Consumer['id'][]
+}

client/yarn.lock

@@ -494,7 +494,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emnapi/wasi-threads@npm:1.1.0":
+"@emnapi/wasi-threads@npm:1.1.0, @emnapi/wasi-threads@npm:^1.1.0":
   version: 1.1.0
   resolution: "@emnapi/wasi-threads@npm:1.1.0"
   dependencies:
@@ -849,6 +849,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@formkit/auto-animate@npm:^0.9.0":
+  version: 0.9.0
+  resolution: "@formkit/auto-animate@npm:0.9.0"
+  checksum: 10c0/5337bb905761d347cc07cf323b54fbd9967c1eac5469cb63f6ad67cf6705b08493c80ddafc470f317eee82fcc1c05f34391eb05896d41aa9f2f8a02738614ce4
+  languageName: node
+  linkType: hard
+
 "@humanfs/core@npm:^0.19.1":
   version: 0.19.1
   resolution: "@humanfs/core@npm:0.19.1"
@@ -920,7 +927,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/remapping@npm:^2.3.5":
+"@jridgewell/remapping@npm:^2.3.4, @jridgewell/remapping@npm:^2.3.5":
   version: 2.3.5
   resolution: "@jridgewell/remapping@npm:2.3.5"
   dependencies:
@@ -1024,6 +1031,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@napi-rs/wasm-runtime@npm:^1.0.5":
+  version: 1.0.6
+  resolution: "@napi-rs/wasm-runtime@npm:1.0.6"
+  dependencies:
+    "@emnapi/core": "npm:^1.5.0"
+    "@emnapi/runtime": "npm:^1.5.0"
+    "@tybys/wasm-util": "npm:^0.10.1"
+  checksum: 10c0/af48168c6e13c970498fda3ce7238234a906bc69dd474dc9abd560cdf8a7dea6410147afec8f0191a1d19767c8347d8ec0125a8a93225312f7ac37e06e8c15ad
+  languageName: node
+  linkType: hard
+
 "@nodelib/fs.scandir@npm:2.1.5":
   version: 2.1.5
   resolution: "@nodelib/fs.scandir@npm:2.1.5"
@@ -2353,6 +2371,172 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tailwindcss/node@npm:4.1.14":
+  version: 4.1.14
+  resolution: "@tailwindcss/node@npm:4.1.14"
+  dependencies:
+    "@jridgewell/remapping": "npm:^2.3.4"
+    enhanced-resolve: "npm:^5.18.3"
+    jiti: "npm:^2.6.0"
+    lightningcss: "npm:1.30.1"
+    magic-string: "npm:^0.30.19"
+    source-map-js: "npm:^1.2.1"
+    tailwindcss: "npm:4.1.14"
+  checksum: 10c0/dcdb53217534b5220e8ffd0357848b542935aa5ebcae691ff1ac2924c5c0b89d6150d938ff69c776d9835e53fdb29b6db78367930985bd50b367ddb646778239
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-android-arm64@npm:4.1.14":
+  version: 4.1.14
+  resolution: "@tailwindcss/oxide-android-arm64@npm:4.1.14"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-darwin-arm64@npm:4.1.14":
+  version: 4.1.14
+  resolution: "@tailwindcss/oxide-darwin-arm64@npm:4.1.14"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-darwin-x64@npm:4.1.14":
+  version: 4.1.14
+  resolution: "@tailwindcss/oxide-darwin-x64@npm:4.1.14"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-freebsd-x64@npm:4.1.14":
+  version: 4.1.14
+  resolution: "@tailwindcss/oxide-freebsd-x64@npm:4.1.14"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.1.14":
+  version: 4.1.14
+  resolution: "@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.1.14"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm64-gnu@npm:4.1.14":
+  version: 4.1.14
+  resolution: "@tailwindcss/oxide-linux-arm64-gnu@npm:4.1.14"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm64-musl@npm:4.1.14":
+  version: 4.1.14
+  resolution: "@tailwindcss/oxide-linux-arm64-musl@npm:4.1.14"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-x64-gnu@npm:4.1.14":
+  version: 4.1.14
+  resolution: "@tailwindcss/oxide-linux-x64-gnu@npm:4.1.14"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-x64-musl@npm:4.1.14":
+  version: 4.1.14
+  resolution: "@tailwindcss/oxide-linux-x64-musl@npm:4.1.14"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-wasm32-wasi@npm:4.1.14":
+  version: 4.1.14
+  resolution: "@tailwindcss/oxide-wasm32-wasi@npm:4.1.14"
+  dependencies:
+    "@emnapi/core": "npm:^1.5.0"
+    "@emnapi/runtime": "npm:^1.5.0"
+    "@emnapi/wasi-threads": "npm:^1.1.0"
+    "@napi-rs/wasm-runtime": "npm:^1.0.5"
+    "@tybys/wasm-util": "npm:^0.10.1"
+    tslib: "npm:^2.4.0"
+  conditions: cpu=wasm32
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-win32-arm64-msvc@npm:4.1.14":
+  version: 4.1.14
+  resolution: "@tailwindcss/oxide-win32-arm64-msvc@npm:4.1.14"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-win32-x64-msvc@npm:4.1.14":
+  version: 4.1.14
+  resolution: "@tailwindcss/oxide-win32-x64-msvc@npm:4.1.14"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide@npm:4.1.14":
+  version: 4.1.14
+  resolution: "@tailwindcss/oxide@npm:4.1.14"
+  dependencies:
+    "@tailwindcss/oxide-android-arm64": "npm:4.1.14"
+    "@tailwindcss/oxide-darwin-arm64": "npm:4.1.14"
+    "@tailwindcss/oxide-darwin-x64": "npm:4.1.14"
+    "@tailwindcss/oxide-freebsd-x64": "npm:4.1.14"
+    "@tailwindcss/oxide-linux-arm-gnueabihf": "npm:4.1.14"
+    "@tailwindcss/oxide-linux-arm64-gnu": "npm:4.1.14"
+    "@tailwindcss/oxide-linux-arm64-musl": "npm:4.1.14"
+    "@tailwindcss/oxide-linux-x64-gnu": "npm:4.1.14"
+    "@tailwindcss/oxide-linux-x64-musl": "npm:4.1.14"
+    "@tailwindcss/oxide-wasm32-wasi": "npm:4.1.14"
+    "@tailwindcss/oxide-win32-arm64-msvc": "npm:4.1.14"
+    "@tailwindcss/oxide-win32-x64-msvc": "npm:4.1.14"
+    detect-libc: "npm:^2.0.4"
+    tar: "npm:^7.5.1"
+  dependenciesMeta:
+    "@tailwindcss/oxide-android-arm64":
+      optional: true
+    "@tailwindcss/oxide-darwin-arm64":
+      optional: true
+    "@tailwindcss/oxide-darwin-x64":
+      optional: true
+    "@tailwindcss/oxide-freebsd-x64":
+      optional: true
+    "@tailwindcss/oxide-linux-arm-gnueabihf":
+      optional: true
+    "@tailwindcss/oxide-linux-arm64-gnu":
+      optional: true
+    "@tailwindcss/oxide-linux-arm64-musl":
+      optional: true
+    "@tailwindcss/oxide-linux-x64-gnu":
+      optional: true
+    "@tailwindcss/oxide-linux-x64-musl":
+      optional: true
+    "@tailwindcss/oxide-wasm32-wasi":
+      optional: true
+    "@tailwindcss/oxide-win32-arm64-msvc":
+      optional: true
+    "@tailwindcss/oxide-win32-x64-msvc":
+      optional: true
+  checksum: 10c0/7fdf5345272d0348624cd003f431f10715372d585f0180d32d3c8dd18f5417cdfe7e8c4e86fc504fa1aefd19324fb4c4b174bbefdc054882ae6919ed1160d86c
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/vite@npm:^4.1.14":
+  version: 4.1.14
+  resolution: "@tailwindcss/vite@npm:4.1.14"
+  dependencies:
+    "@tailwindcss/node": "npm:4.1.14"
+    "@tailwindcss/oxide": "npm:4.1.14"
+    tailwindcss: "npm:4.1.14"
+  peerDependencies:
+    vite: ^5.2.0 || ^6 || ^7
+  checksum: 10c0/38a34602a29fcad23eb80bdb6f3162473d191a1d8ec0bffdee73a1c7b9716de13a1c3705b95baf40eed6ed70e806df35ba03f3cfe541f1758a3440ddb03b6e81
+  languageName: node
+  linkType: hard
+
 "@tauri-apps/cli-darwin-arm64@npm:2.8.4":
   version: 2.8.4
   resolution: "@tauri-apps/cli-darwin-arm64@npm:2.8.4"
@@ -3540,18 +3724,24 @@ __metadata:
   resolution: "chad-client@workspace:."
   dependencies:
     "@antfu/eslint-config": "npm:^5.4.1"
+    "@formkit/auto-animate": "npm:^0.9.0"
     "@nuxt/fonts": "npm:^0.11.4"
     "@primeuix/themes": "npm:^1.2.5"
     "@primevue/nuxt-module": "npm:^4.4.0"
+    "@tailwindcss/vite": "npm:^4.1.14"
     "@tauri-apps/cli": "npm:^2.8.4"
     "@vueuse/core": "npm:^13.9.0"
     eslint: "npm:^9.36.0"
     eslint-plugin-format: "npm:^1.0.2"
     mediasoup-client: "npm:^3.16.7"
     nuxt: "npm:^4.1.2"
+    postcss: "npm:^8.5.6"
+    primeicons: "npm:^7.0.0"
     primevue: "npm:^4.4.0"
     sass-embedded: "npm:^1.93.2"
     socket.io-client: "npm:^4.8.1"
+    tailwindcss: "npm:^4.1.14"
+    tailwindcss-primeui: "npm:^0.6.1"
     typescript: "npm:^5.9.3"
     vue: "npm:^3.5.22"
     vue-router: "npm:^4.5.1"
@@ -4176,7 +4366,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"detect-libc@npm:^2.0.0":
+"detect-libc@npm:^2.0.0, detect-libc@npm:^2.0.3, detect-libc@npm:^2.0.4":
   version: 2.1.1
   resolution: "detect-libc@npm:2.1.1"
   checksum: 10c0/97053299c1f68c7c4adf7b78c8d506e1d5f3a3fbc775920aaa0ecf7f8fcc6dfa46338a6ca82fe4500b4a51937def314584265a4ec9d565577485c4496aa7d64e
@@ -4359,7 +4549,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"enhanced-resolve@npm:^5.17.1":
+"enhanced-resolve@npm:^5.17.1, enhanced-resolve@npm:^5.18.3":
   version: 5.18.3
   resolution: "enhanced-resolve@npm:5.18.3"
   dependencies:
@@ -6006,6 +6196,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jiti@npm:^2.6.0":
+  version: 2.6.1
+  resolution: "jiti@npm:2.6.1"
+  bin:
+    jiti: lib/jiti-cli.mjs
+  checksum: 10c0/79b2e96a8e623f66c1b703b98ec1b8be4500e1d217e09b09e343471bbb9c105381b83edbb979d01cef18318cc45ce6e153571b6c83122170eefa531c64b6789b
+  languageName: node
+  linkType: hard
+
 "js-tokens@npm:^4.0.0":
   version: 4.0.0
   resolution: "js-tokens@npm:4.0.0"
@@ -6178,6 +6377,116 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lightningcss-darwin-arm64@npm:1.30.1":
+  version: 1.30.1
+  resolution: "lightningcss-darwin-arm64@npm:1.30.1"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-darwin-x64@npm:1.30.1":
+  version: 1.30.1
+  resolution: "lightningcss-darwin-x64@npm:1.30.1"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss-freebsd-x64@npm:1.30.1":
+  version: 1.30.1
+  resolution: "lightningcss-freebsd-x64@npm:1.30.1"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm-gnueabihf@npm:1.30.1":
+  version: 1.30.1
+  resolution: "lightningcss-linux-arm-gnueabihf@npm:1.30.1"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm64-gnu@npm:1.30.1":
+  version: 1.30.1
+  resolution: "lightningcss-linux-arm64-gnu@npm:1.30.1"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm64-musl@npm:1.30.1":
+  version: 1.30.1
+  resolution: "lightningcss-linux-arm64-musl@npm:1.30.1"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-x64-gnu@npm:1.30.1":
+  version: 1.30.1
+  resolution: "lightningcss-linux-x64-gnu@npm:1.30.1"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-x64-musl@npm:1.30.1":
+  version: 1.30.1
+  resolution: "lightningcss-linux-x64-musl@npm:1.30.1"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"lightningcss-win32-arm64-msvc@npm:1.30.1":
+  version: 1.30.1
+  resolution: "lightningcss-win32-arm64-msvc@npm:1.30.1"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-win32-x64-msvc@npm:1.30.1":
+  version: 1.30.1
+  resolution: "lightningcss-win32-x64-msvc@npm:1.30.1"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss@npm:1.30.1":
+  version: 1.30.1
+  resolution: "lightningcss@npm:1.30.1"
+  dependencies:
+    detect-libc: "npm:^2.0.3"
+    lightningcss-darwin-arm64: "npm:1.30.1"
+    lightningcss-darwin-x64: "npm:1.30.1"
+    lightningcss-freebsd-x64: "npm:1.30.1"
+    lightningcss-linux-arm-gnueabihf: "npm:1.30.1"
+    lightningcss-linux-arm64-gnu: "npm:1.30.1"
+    lightningcss-linux-arm64-musl: "npm:1.30.1"
+    lightningcss-linux-x64-gnu: "npm:1.30.1"
+    lightningcss-linux-x64-musl: "npm:1.30.1"
+    lightningcss-win32-arm64-msvc: "npm:1.30.1"
+    lightningcss-win32-x64-msvc: "npm:1.30.1"
+  dependenciesMeta:
+    lightningcss-darwin-arm64:
+      optional: true
+    lightningcss-darwin-x64:
+      optional: true
+    lightningcss-freebsd-x64:
+      optional: true
+    lightningcss-linux-arm-gnueabihf:
+      optional: true
+    lightningcss-linux-arm64-gnu:
+      optional: true
+    lightningcss-linux-arm64-musl:
+      optional: true
+    lightningcss-linux-x64-gnu:
+      optional: true
+    lightningcss-linux-x64-musl:
+      optional: true
+    lightningcss-win32-arm64-msvc:
+      optional: true
+    lightningcss-win32-x64-msvc:
+      optional: true
+  checksum: 10c0/1e1ad908f3c68bf39d964a6735435a8dd5474fb2765076732d64a7b6aa2af1f084da65a9462443a9adfebf7dcfb02fb532fce1d78697f2a9de29c8f40f09aee3
+  languageName: node
+  linkType: hard
+
 "lilconfig@npm:^3.1.3":
   version: 3.1.3
   resolution: "lilconfig@npm:3.1.3"
@@ -8369,6 +8678,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"primeicons@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "primeicons@npm:7.0.0"
+  checksum: 10c0/a7f6344d6db49e785d2040b35f8cae761d15bb8f8ee70ade8981d45438245414e913fe7235921122aade2b0a11a032c98b44dc527be2da11aa791ff145099c06
+  languageName: node
+  linkType: hard
+
 "primevue@npm:4.4.0, primevue@npm:^4.4.0":
   version: 4.4.0
   resolution: "primevue@npm:4.4.0"
@@ -9591,6 +9907,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tailwindcss-primeui@npm:^0.6.1":
+  version: 0.6.1
+  resolution: "tailwindcss-primeui@npm:0.6.1"
+  peerDependencies:
+    tailwindcss: ">=3.1.0"
+  checksum: 10c0/a7a576660d4b42dd31d8851c69a1c67199bf79b74bb0ac7e7ff3c8f721e8f05b41278d9af47550a78b234426e9df68cea802ddd5d28a97b00af28b2979226f74
+  languageName: node
+  linkType: hard
+
+"tailwindcss@npm:4.1.14, tailwindcss@npm:^4.1.14":
+  version: 4.1.14
+  resolution: "tailwindcss@npm:4.1.14"
+  checksum: 10c0/c7e9ebfb241707b2a3eb7d465fd326cc8fcfa22e7215e01f67cccec32db8a49a19e17d1f694fc5d0435d55350ea3f863521c52c9bbe6bd790c2009dc8ff516a1
+  languageName: node
+  linkType: hard
+
 "tapable@npm:^2.2.0":
   version: 2.2.3
   resolution: "tapable@npm:2.2.3"
@@ -9609,7 +9941,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tar@npm:^7.4.0, tar@npm:^7.4.3":
+"tar@npm:^7.4.0, tar@npm:^7.4.3, tar@npm:^7.5.1":
   version: 7.5.1
   resolution: "tar@npm:7.5.1"
   dependencies: