user preferences

client/app/components/AppHeader.vue

@@ -1,30 +0,0 @@
-<template>
-  <div
-    class="flex items-center justify-between gap-2 border-b-2 border-surface-800 px-3 py-3"
-    :class="{
-      'bg-surface-950': !secondary,
-      'bg-surface-900': secondary,
-    }"
-    style="height: 75px;"
-  >
-    <slot name="left">
-      <h1 v-if="!!title">
-        {{ title }}
-      </h1>
-    </slot>
-
-    <slot name="right" />
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-  title?: string
-  secondary?: boolean
-}>()
-
-defineSlots<{
-  left: () => unknown
-  right: () => unknown
-}>()
-</script>

client/app/components/ClientRow.vue

@@ -42,6 +42,7 @@
 <script setup lang="ts">
 import type { ChadClient } from '#shared/types'
 import type { MenuItem } from 'primevue/menuitem'
+import { useLocalStorage } from '@vueuse/core'
 import { User } from 'lucide-vue-next'
 
 const props = defineProps<{
@@ -52,9 +53,9 @@ const { outputMuted } = useApp()
 const { getClientConsumers, micProducer } = useMediasoup()
 const { me } = useClients()
 
-const menuRef = useTemplateRef<HTMLAudioElement>('menu')
+const volume = useLocalStorage<number>(computed(() => `CLIENT_VOLUME_${props.client.userId}`), 100, { writeDefaults: false })
 
-const volume = ref(100)
+const menuRef = useTemplateRef<HTMLAudioElement>('menu')
 
 const menuItems: MenuItem[] = [
   {
@@ -101,7 +102,7 @@ watch(volume, (volume) => {
   //   return
 
   setGain(volume * 0.01)
-})
+}, { immediate: true })
 
 // watch(outputMuted, (outputMuted) => {
 //   setGain(outputMuted ? 0 : (volume.value * 0.01))