101 lines
2.6 KiB
Vue
101 lines
2.6 KiB
Vue
<template>
|
|
<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>
|
|
|
|
<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>
|
|
</PrimeSelectButton>
|
|
</div>
|
|
|
|
<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>
|
|
</PrimeScrollPanel>
|
|
|
|
<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 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' })
|
|
},
|
|
},
|
|
]
|
|
|
|
const activeTab = ref<Tab>(tabs.find(tab => tab.id === route.name) ?? tabs[0]!)
|
|
|
|
watch(activeTab, (activeTab) => {
|
|
activeTab.onClick()
|
|
})
|
|
|
|
connect()
|
|
</script>
|