front update

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>