update

client/app/components.d.ts

@@ -13,15 +13,20 @@ declare module 'vue' {
     PrimeButton: typeof import('primevue/button')['default']
     PrimeButtonGroup: typeof import('primevue/buttongroup')['default']
     PrimeCard: typeof import('primevue/card')['default']
+    PrimeCheckbox: typeof import('primevue/checkbox')['default']
+    PrimeDivider: typeof import('primevue/divider')['default']
     PrimeFloatLabel: typeof import('primevue/floatlabel')['default']
     PrimeInputText: typeof import('primevue/inputtext')['default']
     PrimeMenu: typeof import('primevue/menu')['default']
     PrimePanel: typeof import('primevue/panel')['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']
     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/components/AppHeader.vue

@@ -8,7 +8,7 @@
     style="height: 75px;"
   >
     <slot name="left">
-      <h1>
+      <h1 v-if="!!title">
         {{ title }}
       </h1>
     </slot>
@@ -19,7 +19,12 @@
 
 <script setup lang="ts">
 defineProps<{
-  title: string
+  title?: string
   secondary?: boolean
 }>()
+
+defineSlots<{
+  left: () => unknown
+  right: () => unknown
+}>()
 </script>

client/app/components/ClientRow.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="py-3">
     <div class="flex items-center gap-3 ">
-      <PrimeAvatar
-        icon="pi pi-user"
-        size="small"
-      />
+      <PrimeAvatar size="small">
+        <template #icon>
+          <User :size="20" />
+        </template>
+      </PrimeAvatar>
 
       <div class="flex-1">
         <div class="text-sm leading-5 font-medium text-color whitespace-nowrap overflow-ellipsis">
@@ -15,7 +16,8 @@
         </div>
       </div>
 
-      <PrimeBadge v-if="audioConsumerPaused" severity="info" value="Muted" />
+      <PrimeBadge v-if="inputMuted" severity="info" value="Muted" />
+      <!--      <PrimeBadge v-if="outputMuted" severity="info" value="No sound" /> -->
       <PrimeBadge v-if="isMe" severity="secondary" value="You" />
 
       <template v-if="!isMe">
@@ -40,13 +42,14 @@
 <script setup lang="ts">
 import type { ChadClient } from '#shared/types'
 import type { MenuItem } from 'primevue/menuitem'
+import { User } from 'lucide-vue-next'
 
 const props = defineProps<{
   client: ChadClient
 }>()
 
-const { inputMuted, outputMuted } = useApp()
-const { getClientConsumers } = useMediasoup()
+const { outputMuted } = useApp()
+const { getClientConsumers, micProducer } = useMediasoup()
 const { me } = useClients()
 
 const menuRef = useTemplateRef<HTMLAudioElement>('menu')
@@ -78,9 +81,9 @@ const audioConsumer = computed(() => {
   return consumers.find(consumer => consumer.track.kind === 'audio')
 })
 
-const audioConsumerPaused = computed(() => {
+const inputMuted = computed(() => {
   if (isMe.value)
-    return false
+    return micProducer.value?.paused ?? false
 
   const consumers = getClientConsumers(props.client.socketId)
 
@@ -94,13 +97,13 @@ const audioTrack = computed(() => {
 const { setGain } = useAudioContext(audioTrack)
 
 watch(volume, (volume) => {
-  if (outputMuted.value)
-    return
+  // if (outputMuted.value)
+  //   return
 
   setGain(volume * 0.01)
 })
 
-watch(outputMuted, (outputMuted) => {
-  setGain(outputMuted ? 0 : (volume.value * 0.01))
-})
+// watch(outputMuted, (outputMuted) => {
+//   setGain(outputMuted ? 0 : (volume.value * 0.01))
+// })
 </script>

client/app/composables/use-audio-context.ts

@@ -4,13 +4,12 @@ export default function useAudioContext(audioTrack: Ref<MediaStreamTrack | undef
   const ctx = new (window.AudioContext || window.webkitAudioContext)()
 
   const stream = new MediaStream()
+  const audioEl = new Audio()
 
   const sourceNode = shallowRef<MediaStreamAudioSourceNode>()
   const gainNode = ctx.createGain()
 
-  let hackExecuted = false
-
-  watch(audioTrack, (track, prevTrack) => {
+  watch(audioTrack, async (track, prevTrack) => {
     if (prevTrack)
       stream.removeTrack(prevTrack)
 
@@ -19,16 +18,14 @@ export default function useAudioContext(audioTrack: Ref<MediaStreamTrack | undef
 
     stream.addTrack(track)
 
-    if (!hackExecuted) {
-      const audioEl = new Audio()
+    if (!audioEl.srcObject) {
       audioEl.srcObject = stream
       audioEl.muted = true
-      hackExecuted = true
     }
 
     sourceNode.value = ctx.createMediaStreamSource(stream)
 
-    connect()
+    await connect()
   }, { immediate: true })
 
   useEventListener(document, 'click', async () => {
@@ -36,10 +33,16 @@ export default function useAudioContext(audioTrack: Ref<MediaStreamTrack | undef
       await ctx.resume()
     }
 
-    connect()
+    await connect()
   }, { once: true })
 
-  function connect() {
+  onScopeDispose(() => {
+    audioEl.pause()
+    audioEl.srcObject = null
+    ctx.close()
+  })
+
+  async function connect() {
     if (!sourceNode.value || ctx.state === 'suspended')
       return
 

client/app/composables/use-mediasoup.ts

@@ -246,12 +246,13 @@ export const useMediasoup = createSharedComposable(() => {
 
     const stream = await navigator.mediaDevices.getUserMedia({
       audio: {
-        autoGainControl: false,
-        noiseSuppression: true,
-        echoCancellation: false,
-        channelCount: 2,
+        deviceId: { exact: preferences.inputDeviceId.value },
+        autoGainControl: { exact: preferences.autoGainControl.value },
+        echoCancellation: { exact: preferences.echoCancellation.value },
+        noiseSuppression: { exact: preferences.noiseSuppression.value },
       },
     })
+
     const track = stream.getAudioTracks()[0]
 
     if (!track)
@@ -268,6 +269,7 @@ export const useMediasoup = createSharedComposable(() => {
 
     producers.value.set(micProducer.value.id, micProducer.value)
     triggerRef(producers)
+    triggerRef(micProducer)
 
     micProducer.value.on('transportclose', () => {
       micProducer.value = undefined
@@ -283,7 +285,6 @@ export const useMediasoup = createSharedComposable(() => {
       return
 
     producers.value.delete(micProducer.value.id)
-    triggerRef(producers)
 
     try {
       micProducer.value.close()
@@ -294,6 +295,10 @@ export const useMediasoup = createSharedComposable(() => {
     }
     catch {
     }
+    finally {
+      triggerRef(producers)
+      triggerRef(micProducer)
+    }
 
     micProducer.value = undefined
   }
@@ -304,21 +309,25 @@ export const useMediasoup = createSharedComposable(() => {
 
     const producer = getProducerByType(type)
 
-    if (!producer)
+    if (!producer.value)
       return
 
-    if (producer.paused)
+    if (producer.value.paused)
       return
 
     try {
-      producer.pause()
+      producer.value.pause()
 
       await signaling.socket.value.emitWithAck('pauseProducer', {
-        producerId: producer.id,
+        producerId: producer.value.id,
       })
     }
     catch {
-      producer.resume()
+      producer.value.resume()
+    }
+    finally {
+      triggerRef(producers)
+      triggerRef(producer)
     }
   }
 
@@ -328,18 +337,22 @@ export const useMediasoup = createSharedComposable(() => {
 
     const producer = getProducerByType(type)
 
-    if (!producer)
+    if (!producer.value)
       return
 
     try {
-      producer.resume()
+      producer.value.resume()
 
       await signaling.socket.value.emitWithAck('resumeProducer', {
-        producerId: producer.id,
+        producerId: producer.value.id,
       })
     }
     catch {
-      producer.pause()
+      producer.value.pause()
+    }
+    finally {
+      triggerRef(producers)
+      triggerRef(producer)
     }
   }
 
@@ -350,14 +363,40 @@ export const useMediasoup = createSharedComposable(() => {
   function getProducerByType(type: ProducerType) {
     switch (type) {
       case 'microphone':
-        return micProducer.value
+        return micProducer
       case 'camera':
-        return cameraProducer.value
+        return cameraProducer
       case 'share':
-        return shareProducer.value
+        return shareProducer
     }
   }
 
+  watch(
+    preferences.inputDeviceId,
+    async (inputDeviceId) => {
+      await disableMic()
+
+      if (!inputDeviceId)
+        return
+
+      await enableMic()
+    },
+  )
+
+  watch([
+    preferences.inputDeviceId,
+    preferences.echoCancellation,
+    preferences.autoGainControl,
+    preferences.noiseSuppression,
+  ], async ([inputDeviceId]) => {
+    await disableMic()
+
+    if (!inputDeviceId)
+      return
+
+    await enableMic()
+  })
+
   return {
     init,
     consumers,

client/app/composables/use-preferences.ts

@@ -1,8 +1,12 @@
-import { createGlobalState, useDevicesList } from '@vueuse/core'
+import { createGlobalState, useDevicesList, useLocalStorage } from '@vueuse/core'
 
 export const usePreferences = createGlobalState(() => {
-  const inputDeviceId = shallowRef<MediaDeviceInfo['deviceId']>()
-  const outputDeviceId = shallowRef<MediaDeviceInfo['deviceId']>()
+  const inputDeviceId = useLocalStorage<MediaDeviceInfo['deviceId']>('INPUT_DEVICE_ID', 'default')
+  const outputDeviceId = useLocalStorage<MediaDeviceInfo['deviceId']>('OUTPUT_DEVICE_ID', 'default')
+
+  const autoGainControl = useLocalStorage('AUTO_GAIN_CONTROL', false)
+  const noiseSuppression = useLocalStorage('NOISE_SUPPRESSION', true)
+  const echoCancellation = useLocalStorage('ECHO_CANCELLATION', true)
 
   const {
     ensurePermissions,
@@ -12,11 +16,24 @@ export const usePreferences = createGlobalState(() => {
     audioOutputs,
   } = useDevicesList()
 
+  const inputDeviceExist = computed(() => {
+    return audioInputs.value.some(device => device.deviceId === inputDeviceId.value)
+  })
+
+  const outputDeviceExist = computed(() => {
+    return audioOutputs.value.some(device => device.deviceId === outputDeviceId.value)
+  })
+
   return {
     inputDeviceId,
     outputDeviceId,
-    videoInputs,
-    audioInputs,
-    audioOutputs,
+    autoGainControl,
+    noiseSuppression,
+    echoCancellation,
+    inputDeviceExist,
+    outputDeviceExist,
+    videoInputs: computed(() => JSON.parse(JSON.stringify(videoInputs.value))),
+    audioInputs: computed(() => JSON.parse(JSON.stringify(audioInputs.value))),
+    audioOutputs: computed(() => JSON.parse(JSON.stringify(audioOutputs.value))),
   }
 })

client/app/composables/use-signaling.ts

@@ -66,11 +66,9 @@ export const useSignaling = createSharedComposable(() => {
 
     const uri = host ? `${protocol}//${host}` : ``
 
-    // socket.value = io(`http://localhost:4000/webrtc`, {
-    //   path: `/chad/ws`,
-    //   transports: ['websocket'],
     socket.value = io(`${uri}/webrtc`, {
       path: `${pathname}/ws`,
+      transports: ['websocket'],
       withCredentials: true,
       auth: {
         userId: me.value.id,

client/app/composables/use-updater.ts

@@ -22,6 +22,7 @@ export const useUpdater = createGlobalState(() => {
 
   return {
     lastUpdate,
+    checking,
     checkForUpdates,
   }
 })

client/app/layouts/auth.vue

@@ -27,7 +27,6 @@ const options = computed(() => {
     {
       label: 'Register',
       routeName: 'Register',
-
     },
   ]
 })

client/app/layouts/default.vue

@@ -1,52 +1,100 @@
 <template>
-  <div class="grid grid-cols-2 h-screen">
-    <div class="flex flex-col shadow-xl shadow-surface-950 overflow-y-hidden">
-      <AppHeader title="Надарики">
-        <template #right>
-          <PrimeButtonGroup class="ml-auto">
-            <PrimeButton
-              icon="pi pi-microphone" size="large" :severity="inputMuted ? 'contrast' : 'secondary'"
-              :outlined="!inputMuted" @click="toggleInput"
-            />
-            <PrimeButton
-              icon="pi pi-headphones" size="large" :severity="outputMuted ? 'contrast' : 'secondary'"
-              :outlined="!outputMuted" @click="toggleOutput"
-            />
-          </PrimeButtonGroup>
+  <div class="grid grid-cols-2 gap-2 p-2 h-screen grid-rows-[auto_1fr]">
+    <div
+      class="flex items-center justify-between gap-2 rounded-xl p-3 bg-surface-950"
+    >
+      <div class="inline-flex items-center gap-3">
+        <PrimeBadge v-if="isTauri" class="opacity-50" severity="secondary" :value="version" size="small" />
+        <PrimeBadge :severity="connected ? 'success' : 'danger' " />
+      </div>
 
-          <PrimeButton icon="pi pi-cog" size="large" :text="!inPreferences" :severity="inPreferences ? 'contrast' : 'secondary'" @click="onClickPreferences" />
+      <PrimeButtonGroup class="ml-auto">
+        <PrimeButton outlined @click="toggleInput">
+          <template #icon>
+            <Component :is="inputMuted ? MicOff : Mic" />
+          </template>
+        </PrimeButton>
+        <PrimeButton outlined @click="toggleOutput">
+          <template #icon>
+            <Component :is="outputMuted ? VolumeOff : Volume2" />
+          </template>
+        </PrimeButton>
+      </PrimeButtonGroup>
+    </div>
+
+    <div
+      class="flex items-center justify-center rounded-xl p-3 bg-surface-950"
+    >
+      <PrimeSelectButton
+        v-model="activeTab"
+        :options="tabs"
+        data-key="id"
+        :allow-empty="false"
+        style="--p-togglebutton-content-padding: 0.25rem 0.5rem"
+      >
+        <template #option="{ option }">
+          <Component :is="option.icon" size="24" />
         </template>
-      </AppHeader>
+      </PrimeSelectButton>
+    </div>
 
-      <div v-auto-animate class="p-3 overflow-y-auto flex-1 bg-surface-900 overflow-hidden divide-y divide-surface-800">
+    <PrimeScrollPanel class="bg-surface-900 rounded-xl" style="min-height: 0">
+      <div v-auto-animate class="p-3 divide-y divide-surface-800">
         <ClientRow v-for="client of clients" :key="client.id" :client="client" />
       </div>
-    </div>
+    </PrimeScrollPanel>
 
-    <div class="overflow-y-auto">
-      <slot />
-    </div>
-  </div>
-
-  <div class="fixed top-3 right-3 inline-flex items-center gap-3">
-    <PrimeBadge v-if="isTauri" class="opacity-50" severity="secondary" :value="version" size="small" />
-    <PrimeBadge :severity="connected ? 'success' : 'danger' " />
+    <PrimeScrollPanel class="bg-surface-900 rounded-xl" style="min-height: 0">
+      <div class="p-3">
+        <slot />
+      </div>
+    </PrimeScrollPanel>
   </div>
 </template>
 
 <script setup lang="ts">
+import { MessageCircle, Mic, MicOff, Settings, UserPen, Volume2, VolumeOff } from 'lucide-vue-next'
+
 const { clients, inputMuted, toggleInput, outputMuted, toggleOutput, version, isTauri } = useApp()
 const { connect, connected } = useSignaling()
 
+interface Tab {
+  id: string
+  icon: Component
+  onClick: () => void | Promise<void>
+}
+
 const route = useRoute()
 
-const inPreferences = computed(() => {
-  return route.name === 'Preferences'
-})
+const tabs: Tab[] = [
+  {
+    id: 'Index',
+    icon: MessageCircle,
+    onClick: () => {
+      navigateTo({ name: 'Index' })
+    },
+  },
+  {
+    id: 'Profile',
+    icon: UserPen,
+    onClick: () => {
+      navigateTo({ name: 'Profile' })
+    },
+  },
+  {
+    id: 'Preferences',
+    icon: Settings,
+    onClick: () => {
+      navigateTo({ name: 'Preferences' })
+    },
+  },
+]
 
-function onClickPreferences() {
-  navigateTo(!inPreferences.value ? { name: 'Preferences' } : '/')
-}
+const activeTab = ref<Tab>(tabs.find(tab => tab.id === route.name) ?? tabs[0]!)
+
+watch(activeTab, (activeTab) => {
+  activeTab.onClick()
+})
 
 connect()
 </script>

client/app/pages/index.vue

@@ -1,62 +1,15 @@
 <template>
-  <div class="flex flex-col gap-3 p-3 pt-12">
-    <PrimePanel header="Clients" toggleable collapsed :pt="{ content: { class: 'divide-y divide-surface-800 py-4' } }">
-      <dl v-for="client in clients" :key="client.socketId" class="">
-        <div v-for="(value, key) in client" :key="key" class="py-2">
-          <dt class="font-bold">
-            {{ key }}
-          </dt>
-          <dd class="pl-8">
-            {{ value }}
-          </dd>
-        </div>
-      </dl>
-    </PrimePanel>
-
-    <PrimePanel header="Producers" toggleable collapsed :pt="{ content: { class: 'divide-y divide-surface-800 py-4' } }">
-      <dl v-for="[_, producer] in Array.from(producers)" :key="producer.id" class="">
-        <div v-for="key in ['id', 'paused']" :key="key" class="py-2">
-          <dt class="font-bold">
-            {{ key }}
-          </dt>
-          <dd class="pl-8">
-            {{ producer[key] }}
-          </dd>
-        </div>
-      </dl>
-    </PrimePanel>
-
-    <PrimePanel header="Consumers" toggleable collapsed :pt="{ content: { class: 'divide-y divide-surface-800 py-4' } }">
-      <dl v-for="[_, consumer] in Array.from(consumers)" :key="consumer.id" class="">
-        <div v-for="key in ['id', 'paused']" :key="key" class="py-2">
-          <dt class="font-bold">
-            {{ key }}
-          </dt>
-          <dd class="pl-8">
-            {{ consumer[key] }}
-          </dd>
-        </div>
-      </dl>
-    </PrimePanel>
+  <div class="flex items-center justify-center">
+    <PrimeCard>
+      <template #content>
+        The chat is under development.
+      </template>
+    </PrimeCard>
   </div>
-
-<!--  <div class="flex items-center justify-center p-3"> -->
-<!--    <PrimeCard> -->
-<!--      <template #subtitle> -->
-<!--        Important information -->
-<!--      </template> -->
-
-<!--      <template #content> -->
-<!--        The chat is under development. -->
-<!--      </template> -->
-<!--    </PrimeCard> -->
-<!--  </div> -->
 </template>
 
 <script setup lang="ts">
-const { clients } = useClients()
-const { producers, consumers } = useMediasoup()
-
 definePageMeta({
+  name: 'Index',
 })
 </script>

client/app/pages/preferences.vue

@@ -1,23 +1,60 @@
 <template>
   <div>
-    <AppHeader title="Preferences" secondary />
+    <PrimeFloatLabel variant="on">
+      <PrimeSelect
+        v-model="inputDeviceId"
+        :options="audioInputs"
+        option-label="label"
+        option-value="deviceId"
+        fluid
+        input-id="inputDevice"
+        :invalid="!inputDeviceExist"
+      />
+      <label for="inputDevice">Input device</label>
+    </PrimeFloatLabel>
 
-    <form class="flex flex-col gap-3 p-3" @submit.prevent="save">
-      <PrimeFloatLabel variant="on">
-        <PrimeInputText id="username" v-model="displayName" size="large" fluid autocomplete="off" />
-        <label for="username">Username</label>
-      </PrimeFloatLabel>
-
-      <PrimeButton label="Save" type="submit" :disabled="!valid" />
-    </form>
-
-    <div v-if="isTauri" class="p-3">
-      <PrimeButton label="Check for Updates" fluid severity="info" @click="onCheckForUpdates" />
+    <div class="flex items-center gap-2 mt-3">
+      <PrimeToggleSwitch v-model="autoGainControl" input-id="autoGainControl" />
+      <label for="autoGainControl">Auto Gain Control</label>
     </div>
 
-    <div class="p-3">
-      <PrimeButton label="Logout" fluid severity="danger" @click="logout()" />
+    <div class="flex items-center gap-2 mt-3">
+      <PrimeToggleSwitch v-model="echoCancellation" input-id="echoCancellation" />
+      <label for="echoCancellation">Echo Cancellation</label>
     </div>
+
+    <div class="flex items-center gap-2 mt-3">
+      <PrimeToggleSwitch v-model="noiseSuppression" input-id="noiseSuppression" />
+      <label for="noiseSuppression">Noise Suppression</label>
+    </div>
+
+    <!--    <PrimeFloatLabel variant="on"> -->
+    <!--      <PrimeSelect -->
+    <!--        v-model="outputDeviceId" -->
+    <!--        :options="audioOutputs" -->
+    <!--        option-label="label" -->
+    <!--        option-value="deviceId" -->
+    <!--        fluid -->
+    <!--        class="mt-6" -->
+    <!--        input-id="outputDevice" -->
+    <!--        :invalid="!outputDeviceExist" -->
+    <!--        -->
+    <!--      /> -->
+    <!--      <label for="outputDevice">Output device</label> -->
+    <!--    </PrimeFloatLabel> -->
+
+    <template v-if="isTauri">
+      <PrimeDivider />
+
+      <PrimeButton
+        size="small"
+        label="Check for Updates"
+        fluid
+        severity="info"
+        :loading="checking"
+        @click="onCheckForUpdates"
+      />
+    </template>
   </div>
 
   <PrimeToast position="bottom-center" group="updater">
@@ -39,26 +76,22 @@
 definePageMeta({
   name: 'Preferences',
 })
-
 const { isTauri } = useApp()
-const { checkForUpdates } = useUpdater()
-const { me, setMe, logout } = useAuth()
+const { checking, checkForUpdates } = useUpdater()
+const {
+  inputDeviceId,
+  outputDeviceId,
+  autoGainControl,
+  noiseSuppression,
+  echoCancellation,
+  inputDeviceExist,
+  outputDeviceExist,
+  audioInputs,
+  audioOutputs,
+} = usePreferences()
 
-const signaling = useSignaling()
 const toast = useToast()
 
-const displayName = ref(me.value?.displayName || '')
-
-const valid = computed(() => {
-  if (!displayName.value || !me.value)
-    return false
-
-  if (displayName.value === me.value.displayName)
-    return false
-
-  return true
-})
-
 async function onCheckForUpdates() {
   const update = await checkForUpdates()
 
@@ -76,20 +109,5 @@ async function onCheckForUpdates() {
     detail: `Version ${update?.version ?? '1.0.1'} is available!`,
     closable: false,
   })
-
-  // asdasd
-}
-
-async function save() {
-  if (!valid.value)
-    return
-
-  const updatedMe = await signaling.socket.value?.emitWithAck('updateClient', {
-    displayName: displayName.value,
-  })
-
-  setMe({ ...me.value, displayName: updatedMe.displayName })
-
-  toast.add({ severity: 'success', summary: 'Saved', life: 1000, closable: false })
 }
 </script>

client/app/pages/profile.vue

@@ -0,0 +1,62 @@
+<template>
+  <form @submit.prevent="save()">
+    <PrimeFloatLabel variant="on">
+      <PrimeInputText id="displayName" v-model="displayName" fluid autocomplete="off" />
+      <label for="displayName">Display name</label>
+    </PrimeFloatLabel>
+
+    <PrimeDivider />
+
+    <div class="flex items-center gap-3">
+      <PrimeButton label="Save" :disabled="!valid" :loading="saving" fluid type="submit" />
+      <PrimeButton severity="danger" class="shrink-0" @click="logout()">
+        <template #icon>
+          <LogOut />
+        </template>
+      </PrimeButton>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { LogOut } from 'lucide-vue-next'
+
+definePageMeta({
+  name: 'Profile',
+})
+
+const { me, setMe, logout } = useAuth()
+const signaling = useSignaling()
+const toast = useToast()
+
+const displayName = ref(me.value?.displayName || '')
+
+const saving = ref(false)
+
+const valid = computed(() => {
+  if (!me.value)
+    return false
+
+  if (displayName.value === me.value.displayName)
+    return false
+
+  return true
+})
+
+async function save() {
+  if (!valid.value)
+    return
+
+  saving.value = true
+
+  const updatedMe = await signaling.socket.value?.emitWithAck('updateClient', {
+    displayName: displayName.value,
+  })
+
+  setMe({ ...me.value!, displayName: (updatedMe.displayName as string) })
+
+  toast.add({ severity: 'success', summary: 'Saved', life: 1000, closable: false })
+
+  saving.value = false
+}
+</script>

client/nuxt.config.ts

@@ -97,7 +97,7 @@ export default defineNuxtConfig({
       },
     },
     define: {
-      __API_BASE_URL__: JSON.stringify(import.meta.env.API_BASE_URL || '/api'),
+      __API_BASE_URL__: JSON.stringify(import.meta.env.API_BASE_URL || 'http://localhost:4000/chad'),
       __COMMIT_SHA__: JSON.stringify(import.meta.env.COMMIT_SHA || 'local'),
     },
   },

client/package.json

@@ -17,6 +17,7 @@
     "@tauri-apps/plugin-process": "~2",
     "@tauri-apps/plugin-updater": "~2",
     "@vueuse/core": "^13.9.0",
+    "lucide-vue-next": "^0.562.0",
     "mediasoup-client": "^3.16.7",
     "nuxt": "^4.2.2",
     "postcss": "^8.5.6",

client/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "chad",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "identifier": "xyz.koptilnya.chad",
   "build": {
     "frontendDist": "../.output/public",

client/yarn.lock

@@ -4041,6 +4041,7 @@ __metadata:
     "@vueuse/core": "npm:^13.9.0"
     eslint: "npm:^9.36.0"
     eslint-plugin-format: "npm:^1.0.2"
+    lucide-vue-next: "npm:^0.562.0"
     mediasoup-client: "npm:^3.16.7"
     nuxt: "npm:^4.2.2"
     postcss: "npm:^8.5.6"
@@ -7024,6 +7025,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lucide-vue-next@npm:^0.562.0":
+  version: 0.562.0
+  resolution: "lucide-vue-next@npm:0.562.0"
+  peerDependencies:
+    vue: ">=3.0.1"
+  checksum: 10c0/5ba792ea5e48d01fc99a3c5ae4a59d9767e5d4c7826901800831cf051cf85eb4a680b3564d2910ed4d17dc1d35223c37d006bdbcdb291d90a9491b9c6a20ae14
+  languageName: node
+  linkType: hard
+
 "magic-regexp@npm:^0.10.0":
   version: 0.10.0
   resolution: "magic-regexp@npm:0.10.0"