101 lines
4.0 KiB
Vue
101 lines
4.0 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
selectedTab: "communications" | "documents";
|
|
peopleLeftMode: "contacts" | "calendar";
|
|
authInitials: string;
|
|
authDisplayName: string;
|
|
telegramStatusBadgeClass: string;
|
|
telegramStatusLabel: string;
|
|
telegramConnectBusy: boolean;
|
|
telegramConnectNotice: string;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: "open-contacts"): void;
|
|
(e: "open-calendar"): void;
|
|
(e: "open-documents"): void;
|
|
(e: "start-telegram-connect"): void;
|
|
(e: "logout"): void;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="workspace-topbar border-b border-base-300 px-3 py-2 md:px-4">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<div class="join">
|
|
<button
|
|
class="btn btn-sm join-item"
|
|
:class="
|
|
props.selectedTab === 'communications' && props.peopleLeftMode === 'contacts'
|
|
? 'btn-ghost border border-base-300 bg-base-200/70 text-base-content'
|
|
: 'btn-ghost border border-transparent text-base-content/65 hover:border-base-300/70 hover:text-base-content'
|
|
"
|
|
@click="emit('open-contacts')"
|
|
>
|
|
Contacts
|
|
</button>
|
|
<button
|
|
class="btn btn-sm join-item"
|
|
:class="
|
|
props.selectedTab === 'communications' && props.peopleLeftMode === 'calendar'
|
|
? 'btn-ghost border border-base-300 bg-base-200/70 text-base-content'
|
|
: 'btn-ghost border border-transparent text-base-content/65 hover:border-base-300/70 hover:text-base-content'
|
|
"
|
|
@click="emit('open-calendar')"
|
|
>
|
|
Calendar
|
|
</button>
|
|
<button
|
|
class="btn btn-sm join-item"
|
|
:class="
|
|
props.selectedTab === 'documents'
|
|
? 'btn-ghost border border-base-300 bg-base-200/70 text-base-content'
|
|
: 'btn-ghost border border-transparent text-base-content/65 hover:border-base-300/70 hover:text-base-content'
|
|
"
|
|
@click="emit('open-documents')"
|
|
>
|
|
Documents
|
|
</button>
|
|
</div>
|
|
|
|
<div class="dropdown dropdown-end">
|
|
<button tabindex="0" class="btn btn-sm btn-ghost gap-2">
|
|
<div class="avatar placeholder">
|
|
<div class="flex h-7 w-7 items-center justify-center rounded-full bg-primary text-primary-content">
|
|
<span class="text-[11px] font-semibold leading-none">{{ props.authInitials }}</span>
|
|
</div>
|
|
</div>
|
|
<span class="max-w-[160px] truncate text-xs font-medium">{{ props.authDisplayName }}</span>
|
|
</button>
|
|
<div tabindex="0" class="dropdown-content z-30 mt-2 w-80 rounded-box border border-base-300 bg-base-100 p-3 shadow-lg">
|
|
<div class="mb-2 border-b border-base-300 pb-2">
|
|
<p class="truncate text-sm font-semibold">{{ props.authDisplayName }}</p>
|
|
<p class="text-[11px] uppercase tracking-wide text-base-content/60">Settings</p>
|
|
</div>
|
|
|
|
<div class="space-y-2 rounded-lg border border-base-300 bg-base-50/40 p-2">
|
|
<div class="flex items-center justify-between gap-2">
|
|
<span class="text-xs font-medium">Telegram Business</span>
|
|
<span class="badge badge-xs" :class="props.telegramStatusBadgeClass">{{ props.telegramStatusLabel }}</span>
|
|
</div>
|
|
<button
|
|
class="btn btn-xs btn-primary w-full"
|
|
:disabled="props.telegramConnectBusy"
|
|
@click="emit('start-telegram-connect')"
|
|
>
|
|
{{ props.telegramConnectBusy ? "Connecting..." : "Connect Telegram" }}
|
|
</button>
|
|
<p v-if="props.telegramConnectNotice" class="text-[11px] leading-snug text-base-content/70">
|
|
{{ props.telegramConnectNotice }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-3 border-t border-base-300 pt-2">
|
|
<button class="btn btn-sm w-full btn-ghost justify-start" @click="emit('logout')">Logout</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|