front update

client/app/pages/index.vue

@@ -1,56 +1,11 @@
 <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 class="flex items-center justify-center p-3">
+    <PrimeFieldset legend="Important information">
+      The chat is under development.
+    </PrimeFieldset>
   </div>
-
-  <audio v-for="client in clients" :key="client.id" :ref="(el) => onAudioRef(el, client)" autoplay controls />
-
-  <PrimeBadge class="fixed top-3 right-3" severity="success" />
 </template>
 
 <script setup lang="ts">
-import type { ChadClient } from '#shared/types'
-import { vAutoAnimate } from '@formkit/auto-animate'
-
-const { clients } = useGlobalState()
-const { consumers } = useMediasoup()
-
-function onAudioRef(ref: HTMLAudioElement, client: ChadClient) {
-  if (!ref || !client)
-    return
-
-  if (client.isMe)
-    return
-
-  const consumersArray = client.consumerIds.map(id => consumers.value.get(id)!)
-
-  const audioConsumer = consumersArray.find(
-    consumer => consumer.track.kind === 'audio',
-  )
-
-  if (!audioConsumer)
-    return
-
-  const stream = new MediaStream()
-
-  stream.addTrack(audioConsumer!.track)
-
-  ref.srcObject = stream
-  ref.setAttribute('data-consumer-id', audioConsumer.id)
-}
+const { clients, inputMuted, toggleInput, outputMuted, toggleOutput } = useApp()
 </script>

client/app/pages/login.vue

@@ -1,30 +1,34 @@
 <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" />
+  <PrimeCard class="w-2/5">
+    <template #content>
+      <form class="flex flex-col gap-3" @submit.prevent="submit">
+        <PrimeFloatLabel variant="on">
+          <PrimeInputText id="username" v-model="localUsername" size="large" class="w-full" />
+          <label for="username">Username</label>
+        </PrimeFloatLabel>
 
-          <PrimeButton size="large" icon="pi pi-arrow-right" icon-pos="right" label="Let's go" :disabled="!username" type="submit" />
-        </form>
-      </template>
-    </PrimeCard>
-  </div>
+        <PrimeButton size="large" icon="pi pi-arrow-right" icon-pos="right" label="Let's go" :disabled="!localUsername" type="submit" />
+      </form>
+    </template>
+  </PrimeCard>
 </template>
 
 <script lang="ts" setup>
 definePageMeta({
   name: 'Login',
-  layout: 'login',
+  layout: 'auth',
 })
 
-const { username } = useGlobalState()
-const { init } = useMediasoup()
+const { username } = usePreferences()
+
+const localUsername = ref<typeof username.value>()
 
 async function submit() {
-  if (!username.value)
+  if (!localUsername.value)
     return
 
+  username.value = localUsername.value
+
   await navigateTo('/')
 }
 </script>

client/app/pages/preferences.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <AppHeader title="Preferences" secondary />
+
+    <form class="flex flex-col gap-3 p-3" @submit.prevent="save">
+      <PrimeFloatLabel variant="on">
+        <PrimeInputText id="username" v-model="localUsername" size="large" class="w-full" />
+        <label for="username">Username</label>
+      </PrimeFloatLabel>
+
+      <PrimeButton label="Save" type="submit" />
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  name: 'Preferences',
+})
+
+const { username } = usePreferences()
+const toast = useToast()
+
+const localUsername = ref(username.value)
+
+function save() {
+  username.value = localUsername.value
+
+  toast.add({ severity: 'success', summary: 'Saved', life: 3000 })
+}
+</script>