profile rest

client/app/components/ClientRow.vue

@@ -1,23 +1,23 @@
 <template>
   <div class="py-3">
-    <div class="flex items-center gap-3 ">
+    <div class="flex items-center gap-3">
       <PrimeAvatar size="small">
         <template #icon>
           <User :size="20" />
         </template>
       </PrimeAvatar>
 
-      <div class="flex-1">
+      <div class="flex-1 overflow-hidden">
-        <div class="text-sm leading-5 font-medium text-color whitespace-nowrap overflow-ellipsis">
+        <div class="overflow-hidden text-sm leading-5 font-medium text-color whitespace-nowrap overflow-ellipsis">
           {{ client.displayName }}
         </div>
-        <div v-if="client.username !== client.displayName" class="mt-1 text-xs leading-5 text-muted-color">
+        <div v-if="client.username !== client.displayName" class="overflow-hidden mt-1 text-xs leading-5 text-muted-color">
           {{ client.username }}
         </div>
       </div>
 
-      <PrimeBadge v-if="inputMuted" severity="info" value="Muted" />
+      <PrimeBadge v-if="client.outputMuted" severity="info" value="No sound" />
-      <!--      <PrimeBadge v-if="outputMuted" severity="info" value="No sound" /> -->
+      <PrimeBadge v-else-if="inputMuted" severity="info" value="Muted" />
       <PrimeBadge v-if="isMe" severity="secondary" value="You" />
 
       <template v-if="!isMe">
@@ -98,13 +98,13 @@ const audioTrack = computed(() => {
 const { setGain } = useAudioContext(audioTrack)
 
 watch(volume, (volume) => {
-  // if (outputMuted.value)
+  if (outputMuted.value)
-  //   return
+    return
 
   setGain(volume * 0.01)
 }, { immediate: true })
 
-// watch(outputMuted, (outputMuted) => {
+watch(outputMuted, (outputMuted) => {
-//   setGain(outputMuted ? 0 : (volume.value * 0.01))
+  setGain(outputMuted ? 0 : (volume.value * 0.01))
-// })
+})
 </script>

client/app/composables/use-app.ts

@@ -6,6 +6,7 @@ import { useClients } from '~/composables/use-clients'
 export const useApp = createGlobalState(() => {
   const { clients } = useClients()
   const mediasoup = useMediasoup()
+  const signaling = useSignaling()
   const toast = useToast()
 
   const ready = ref(false)
@@ -36,7 +37,7 @@ export const useApp = createGlobalState(() => {
     toast.add({ severity: 'info', summary: toastText, closable: false, life: 1000 })
   })
 
-  watch(outputMuted, (outputMuted) => {
+  watch(outputMuted, async (outputMuted) => {
     if (outputMuted) {
       previousInputMuted.value = inputMuted.value
       muteInput()
@@ -45,6 +46,10 @@ export const useApp = createGlobalState(() => {
       inputMuted.value = previousInputMuted.value
     }
 
+    const updatedMe = await signaling.socket.value?.emitWithAck('updateClient', {
+      outputMuted,
+    })
+
     const toastText = outputMuted ? 'Sound muted' : 'Sound resumed'
     toast.add({ severity: 'info', summary: toastText, closable: false, life: 1000 })
   })

client/app/pages/preferences.vue

@@ -47,19 +47,21 @@
     <!--      <label for="outputDevice">Output device</label> -->
     <!--    </PrimeFloatLabel> -->
 
-    <PrimeDivider align="left">
+    <template v-if="isTauri">
-      Hotkeys
+      <PrimeDivider align="left">
-    </PrimeDivider>
+        Hotkeys
+      </PrimeDivider>
 
-    <PrimeFloatLabel variant="on">
+      <PrimeFloatLabel variant="on">
-      <PrimeInputText id="microphoneToggle" :model-value="toggleInputHotkey" fluid @keydown="setupToggleInputHotkey" />
+        <PrimeInputText id="microphoneToggle" :model-value="toggleInputHotkey" fluid @keydown="setupToggleInputHotkey" />
-      <label for="microphoneToggle">Toggle microphone</label>
+        <label for="microphoneToggle">Toggle microphone</label>
-    </PrimeFloatLabel>
+      </PrimeFloatLabel>
 
-    <PrimeFloatLabel variant="on" class="mt-3">
+      <PrimeFloatLabel variant="on" class="mt-3">
-      <PrimeInputText id="soundToggle" :model-value="toggleOutputHotkey" fluid @keydown="setupToggleOutputHotkey" />
+        <PrimeInputText id="soundToggle" :model-value="toggleOutputHotkey" fluid @keydown="setupToggleOutputHotkey" />
-      <label for="soundToggle">Toggle sound</label>
+        <label for="soundToggle">Toggle sound</label>
-    </PrimeFloatLabel>
+      </PrimeFloatLabel>
+    </template>
 
     <PrimeDivider align="left">
       About
@@ -72,31 +74,28 @@
       COMMIT_SHA: {{ commitSha }}
     </p>
 
-    <PrimeButton
+    <template v-if="isTauri">
-      v-if="isTauri"
+      <PrimeButton
-      class="mt-3"
+        v-if="lastUpdate"
-      size="small"
+        class="mt-3"
-      label="Check for Updates"
+        size="small"
-      fluid
+        label="Install new version"
-      severity="info"
+        fluid
-      :loading="checking"
+        severity="success"
-      @click="onCheckForUpdates"
+        @click="navigateTo({ name: 'Updater' })"
-    />
+      />
-  </div>
+      <PrimeButton
-
+        v-else
-  <PrimeToast position="bottom-center" group="updater">
+        class="mt-3"
-    <template #container="slotProps">
+        size="small"
-      <div class="p-3">
+        label="Check for Updates"
-        <div class="font-medium text-lg mb-4">
+        fluid
-          {{ slotProps.message.detail }}
+        severity="info"
-        </div>
+        :loading="checking"
-        <div class="flex gap-3">
+        @click="checkForUpdates"
-          <PrimeButton size="small" label="Update now" @click="() => {}" />
+      />
-          <PrimeButton size="small" label="Later" severity="secondary" outlined @click="slotProps.closeCallback()" />
-        </div>
-      </div>
     </template>
-  </PrimeToast>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -106,7 +105,7 @@ definePageMeta({
   name: 'Preferences',
 })
 const { isTauri, version, commitSha } = useApp()
-const { checking, checkForUpdates } = useUpdater()
+const { checking, checkForUpdates, lastUpdate } = useUpdater()
 const {
   inputDeviceId,
   outputDeviceId,
@@ -121,8 +120,6 @@ const {
   audioOutputs,
 } = usePreferences()
 
-const toast = useToast()
-
 const setupToggleInputHotkey = (event: KeyboardEvent) => setupHotkey(event, toggleInputHotkey)
 const setupToggleOutputHotkey = (event: KeyboardEvent) => setupHotkey(event, toggleOutputHotkey)
 
@@ -162,23 +159,4 @@ function setupHotkey(event: KeyboardEvent, model: RemovableRef<string>) {
 
   model.value = hotkey.join('+')
 }
-
-async function onCheckForUpdates() {
-  const update = await checkForUpdates()
-
-  toast.removeGroup('updater')
-
-  if (!update) {
-    toast.add({ severity: 'success', summary: 'You are up to date', closable: false, life: 1000 })
-
-    return
-  }
-
-  toast.add({
-    group: 'updater',
-    severity: 'info',
-    detail: `Version ${update?.version ?? '1.0.1'} is available!`,
-    closable: false,
-  })
-}
 </script>

client/app/pages/profile.vue

@@ -21,6 +21,7 @@
 </template>
 
 <script setup lang="ts">
+import chadApi from '#shared/chad-api'
 import { LogOut } from 'lucide-vue-next'
 
 definePageMeta({
@@ -51,8 +52,11 @@ async function save() {
 
   saving.value = true
 
-  const updatedMe = await signaling.socket.value?.emitWithAck('updateClient', {
+  const updatedMe = await chadApi('/profile', {
-    displayName: displayName.value,
+    method: 'PATCH',
+    body: {
+      displayName: displayName.value,
+    },
   })
 
   setMe({ ...me.value!, displayName: (updatedMe.displayName as string) })

client/src-tauri/tauri.conf.json

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