front update

client/app/layouts/default.vue

@@ -0,0 +1,46 @@
+<template>
+  <div v-auto-animate class="grid grid-cols-2 h-screen">
+    <div class="flex flex-col shadow-xl shadow-surface-950 overflow-y-hidden z-10">
+      <AppHeader title="Шальные сиськи 18+">
+        <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>
+
+          <PrimeButton icon="pi pi-cog" size="large" :text="!inPreferences" :severity="inPreferences ? 'contrast' : 'secondary'" @click="onClickPreferences" />
+        </template>
+      </AppHeader>
+
+      <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>
+
+    <slot />
+  </div>
+
+  <PrimeBadge class="fixed top-3 right-3" severity="success" />
+</template>
+
+<script setup lang="ts">
+import { vAutoAnimate } from '@formkit/auto-animate'
+
+const { clients, inputMuted, toggleInput, outputMuted, toggleOutput } = useApp()
+
+const route = useRoute()
+
+const inPreferences = computed(() => {
+  return route.name === 'Preferences'
+})
+
+function onClickPreferences() {
+  navigateTo(!inPreferences.value ? { name: 'Preferences' } : '/')
+}
+</script>