opti1337/chad
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases 17 Wiki Activity

update

Browse Source
This commit is contained in:
opti1337
2025-12-25 03:51:29 +06:00
parent 4f91309f7f
commit 8265e2d719
16 changed files with 283 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
client/app/layouts/default.vue
View File

@@ -1,52 +1,100 @@
<template>
<div class="grid grid-cols-2 h-screen">
<div class="flex flex-col shadow-xl shadow-surface-950 overflow-y-hidden">
<AppHeader title="Надарики">
<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>
<div
class="flex items-center justify-between gap-2 border-b-2 border-surface-800 px-3 py-3 bg-surface-950"
style="height: 75px;"
>
<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>
<PrimeButton icon="pi pi-cog" size="large" :text="!inPreferences" :severity="inPreferences ? 'contrast' : 'secondary'" @click="onClickPreferences" />
</template>
</AppHeader>
<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 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>
<div class="overflow-y-auto">
<div class="bg-surface-950 overflow-y-auto">
<div
class="flex items-center justify-center gap-2 border-b-2 border-surface-800 px-3 py-3 bg-surface-900"
style="height: 75px;"
>
<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>
<slot />
</div>
</div>
<div class="fixed top-3 right-3 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>
</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 inPreferences = computed(() => {
return route.name === 'Preferences'
})
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' })
},
},
]
function onClickPreferences() {
navigateTo(!inPreferences.value ? { name: 'Preferences' } : '/')
}
const activeTab = ref<Tab>(tabs.find(tab => tab.id === route.name) ?? tabs[0]!)
watch(activeTab, (activeTab) => {
activeTab.onClick()
})
connect()
</script>