Leonardo
bad828cab3
No mobile o botao "Menu Lancamentos/Notificacoes/etc" ja indica a sessao,
entao o pi-list/pi-bell ao lado do contador era redundante. Adiciona
.<prefix>-page__title-icon { display: none; } no @media max-width: 1023px.
Em MelissaConversas usa > i:first-child (icone nao tem classe dedicada).
Pages: FinanceiroLancamentos, Compromissos, Documentos, CadastrosRecebidos,
Conversas, AgendamentosRecebidos, Financeiro, Grupos, Notificacoes, Tags,
Medicos, Relatorios, Recorrencias.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1463 lines
48 KiB
Vue
1463 lines
48 KiB
Vue
<script setup>
|
|
/*
|
|
* MelissaNotificacoes — Página nativa Melissa pro histórico de notificações
|
|
* (substitui o embed via MelissaEmbed que duplicava headers).
|
|
*
|
|
* Layout 2-col (espelha demais Melissa Pages tabulares):
|
|
* - COL 1 — Sidebar (~280px): stats + filtros (status / tipo) + footer fixo
|
|
* - COL 2 — Main: toolbar (busca) + lista de notificações com row design
|
|
* preservado da NotificationsHistoryPage (border-left colorido
|
|
* por tipo, hover actions pra lida/arquivar/remover)
|
|
*
|
|
* Click numa notificação:
|
|
* - inbound_message → abre o ConversationDrawer (paciente ou anônimo)
|
|
* - outras com deeplink → router.push(deeplink)
|
|
* - todas marcam como lida automaticamente se ainda não estiverem.
|
|
*/
|
|
import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { useToast } from 'primevue/usetoast';
|
|
import { useConfirm } from 'primevue/useconfirm';
|
|
import { formatDistanceToNow, format } from 'date-fns';
|
|
import { ptBR } from 'date-fns/locale';
|
|
import { supabase } from '@/lib/supabase/client';
|
|
import { useNotificationStore } from '@/stores/notificationStore';
|
|
import { useConversationDrawerStore } from '@/stores/conversationDrawerStore';
|
|
import { useTenantStore } from '@/stores/tenantStore';
|
|
// Button/InputText/Message: auto via PrimeVueResolver
|
|
|
|
const emit = defineEmits(['close']);
|
|
|
|
const router = useRouter();
|
|
const toast = useToast();
|
|
const confirm = useConfirm();
|
|
const notifStore = useNotificationStore();
|
|
const conversationDrawer = useConversationDrawerStore();
|
|
const tenantStore = useTenantStore();
|
|
|
|
// ── Breakpoints + drawer mobile ────────────────────────
|
|
const drawerOpen = ref(false);
|
|
const isMobile = ref(false);
|
|
let _mqMobile = null;
|
|
function _onMqMobileChange(e) {
|
|
isMobile.value = e.matches;
|
|
if (!e.matches) drawerOpen.value = false;
|
|
}
|
|
function toggleDrawer() { drawerOpen.value = !drawerOpen.value; }
|
|
function fecharDrawer() { drawerOpen.value = false; }
|
|
|
|
// ── Estado ─────────────────────────────────────────────
|
|
const ownerId = ref(null);
|
|
const items = ref([]);
|
|
const loading = ref(true);
|
|
|
|
const busca = ref('');
|
|
const statusFilter = ref('all'); // 'all' | 'unread' | 'read' | 'archived'
|
|
const typeFilter = ref(''); // '' | new_scheduling | new_patient | ...
|
|
|
|
// ── Type meta (cores Tailwind 600 — usadas em ícones, border-left, badges) ──
|
|
const typeMap = {
|
|
new_scheduling: { icon: 'pi-inbox', color: 'rgb(220, 38, 38)', label: 'Agendamento' },
|
|
new_patient: { icon: 'pi-user-plus', color: 'rgb(2, 132, 199)', label: 'Novo paciente' },
|
|
recurrence_alert: { icon: 'pi-refresh', color: 'rgb(217, 119, 6)', label: 'Recorrência' },
|
|
session_status: { icon: 'pi-calendar-times', color: 'rgb(234, 88, 12)', label: 'Sessão' },
|
|
inbound_message: { icon: 'pi-whatsapp', color: 'rgb(22, 163, 74)', label: 'Mensagem' }
|
|
};
|
|
|
|
function metaFor(item) {
|
|
return typeMap[item.type] || { icon: 'pi-bell', color: 'var(--m-text-muted)', label: item.type };
|
|
}
|
|
|
|
// ── Filter options (button lists) ──────────────────────
|
|
const STATUS_FILTER_OPTIONS = [
|
|
{ key: 'all', label: 'Todas', icon: 'pi pi-list' },
|
|
{ key: 'unread', label: 'Não lidas', icon: 'pi pi-bell' },
|
|
{ key: 'read', label: 'Lidas', icon: 'pi pi-check' },
|
|
{ key: 'archived', label: 'Arquivadas', icon: 'pi pi-inbox' }
|
|
];
|
|
|
|
const TYPE_FILTER_OPTIONS = [
|
|
{ key: 'new_scheduling', label: 'Agendamento', icon: 'pi pi-inbox' },
|
|
{ key: 'new_patient', label: 'Novo paciente', icon: 'pi pi-user-plus' },
|
|
{ key: 'recurrence_alert', label: 'Recorrência', icon: 'pi pi-refresh' },
|
|
{ key: 'session_status', label: 'Sessão', icon: 'pi pi-calendar-times' },
|
|
{ key: 'inbound_message', label: 'Mensagem', icon: 'pi pi-whatsapp' }
|
|
];
|
|
|
|
function setStatusFilter(s) {
|
|
statusFilter.value = s;
|
|
}
|
|
function toggleTypeFilter(t) {
|
|
typeFilter.value = typeFilter.value === t ? '' : t;
|
|
}
|
|
|
|
const hasActiveFilters = computed(() =>
|
|
!!(busca.value || typeFilter.value || statusFilter.value !== 'all')
|
|
);
|
|
function clearAllFilters() {
|
|
busca.value = '';
|
|
typeFilter.value = '';
|
|
statusFilter.value = 'all';
|
|
}
|
|
|
|
// ── Stats agregadas ────────────────────────────────────
|
|
const stats = computed(() => {
|
|
const total = items.value.length;
|
|
const unread = items.value.filter((n) => !n.read_at && !n.archived).length;
|
|
const read = items.value.filter((n) => n.read_at && !n.archived).length;
|
|
const archived = items.value.filter((n) => n.archived).length;
|
|
return [
|
|
{ key: 'total', label: 'Total', value: total, cls: 'neutral' },
|
|
{ key: 'unread', label: 'Não lidas', value: unread, cls: unread > 0 ? 'warn' : 'neutral' },
|
|
{ key: 'read', label: 'Lidas', value: read, cls: read > 0 ? 'ok' : 'neutral' },
|
|
{ key: 'archived', label: 'Arquivadas', value: archived, cls: 'neutral' }
|
|
];
|
|
});
|
|
|
|
// ── Filtragem (status + tipo + busca) ──────────────────
|
|
const filteredItems = computed(() => {
|
|
const q = busca.value.trim().toLowerCase();
|
|
return items.value.filter((n) => {
|
|
if (statusFilter.value === 'unread' && (n.read_at || n.archived)) return false;
|
|
if (statusFilter.value === 'read' && (!n.read_at || n.archived)) return false;
|
|
if (statusFilter.value === 'archived' && !n.archived) return false;
|
|
if (statusFilter.value === 'all' && n.archived) return false;
|
|
if (typeFilter.value && n.type !== typeFilter.value) return false;
|
|
if (q) {
|
|
const title = (n.payload?.title || '').toLowerCase();
|
|
const detail = (n.payload?.detail || '').toLowerCase();
|
|
if (!title.includes(q) && !detail.includes(q)) return false;
|
|
}
|
|
return true;
|
|
});
|
|
});
|
|
|
|
const unreadCount = computed(() =>
|
|
items.value.filter((n) => !n.read_at && !n.archived).length
|
|
);
|
|
|
|
// ── Data loading ───────────────────────────────────────
|
|
async function load() {
|
|
loading.value = true;
|
|
try {
|
|
const { data: authData } = await supabase.auth.getUser();
|
|
ownerId.value = authData?.user?.id || null;
|
|
if (!ownerId.value) {
|
|
loading.value = false;
|
|
return;
|
|
}
|
|
const { data, error } = await supabase
|
|
.from('notifications')
|
|
.select('*')
|
|
.eq('owner_id', ownerId.value)
|
|
.order('created_at', { ascending: false })
|
|
.limit(500);
|
|
if (error) throw error;
|
|
items.value = data || [];
|
|
} catch (e) {
|
|
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao carregar notificações.', life: 4500 });
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
// ── Actions: lida/não lida/arquivar/remover ────────────
|
|
async function markRead(id) {
|
|
const now = new Date().toISOString();
|
|
const { error } = await supabase.from('notifications').update({ read_at: now }).eq('id', id);
|
|
if (error) {
|
|
toast.add({ severity: 'error', summary: 'Erro', detail: error.message, life: 3500 });
|
|
return;
|
|
}
|
|
const item = items.value.find((n) => n.id === id);
|
|
if (item) item.read_at = now;
|
|
const storeItem = notifStore.items.find((n) => n.id === id);
|
|
if (storeItem) storeItem.read_at = now;
|
|
}
|
|
|
|
async function markUnread(id) {
|
|
const { error } = await supabase.from('notifications').update({ read_at: null }).eq('id', id);
|
|
if (error) {
|
|
toast.add({ severity: 'error', summary: 'Erro', detail: error.message, life: 3500 });
|
|
return;
|
|
}
|
|
const item = items.value.find((n) => n.id === id);
|
|
if (item) item.read_at = null;
|
|
const storeItem = notifStore.items.find((n) => n.id === id);
|
|
if (storeItem) storeItem.read_at = null;
|
|
}
|
|
|
|
async function archive(id) {
|
|
const { error } = await supabase.from('notifications').update({ archived: true }).eq('id', id);
|
|
if (error) {
|
|
toast.add({ severity: 'error', summary: 'Erro', detail: error.message, life: 3500 });
|
|
return;
|
|
}
|
|
const item = items.value.find((n) => n.id === id);
|
|
if (item) item.archived = true;
|
|
notifStore.items = notifStore.items.filter((n) => n.id !== id);
|
|
}
|
|
|
|
async function unarchive(id) {
|
|
const { error } = await supabase.from('notifications').update({ archived: false }).eq('id', id);
|
|
if (error) {
|
|
toast.add({ severity: 'error', summary: 'Erro', detail: error.message, life: 3500 });
|
|
return;
|
|
}
|
|
const item = items.value.find((n) => n.id === id);
|
|
if (item) item.archived = false;
|
|
if (item && !notifStore.items.find((n) => n.id === id)) {
|
|
notifStore.items.unshift({ ...item });
|
|
}
|
|
}
|
|
|
|
function confirmRemove(id) {
|
|
confirm.require({
|
|
message: 'Remover esta notificação permanentemente? Essa ação não pode ser desfeita.',
|
|
header: 'Remover notificação',
|
|
icon: 'pi pi-exclamation-triangle',
|
|
acceptLabel: 'Remover',
|
|
rejectLabel: 'Cancelar',
|
|
acceptClass: 'p-button-danger',
|
|
accept: () => remove(id)
|
|
});
|
|
}
|
|
|
|
async function remove(id) {
|
|
const { error } = await supabase.from('notifications').delete().eq('id', id);
|
|
if (error) {
|
|
toast.add({ severity: 'error', summary: 'Erro', detail: error.message, life: 3500 });
|
|
return;
|
|
}
|
|
items.value = items.value.filter((n) => n.id !== id);
|
|
notifStore.items = notifStore.items.filter((n) => n.id !== id);
|
|
toast.add({ severity: 'success', summary: 'Removida', life: 2500 });
|
|
}
|
|
|
|
async function markAllRead() {
|
|
const unreadIds = items.value.filter((n) => !n.read_at && !n.archived).map((n) => n.id);
|
|
if (!unreadIds.length) return;
|
|
const now = new Date().toISOString();
|
|
const { error } = await supabase.from('notifications').update({ read_at: now }).in('id', unreadIds);
|
|
if (error) {
|
|
toast.add({ severity: 'error', summary: 'Erro', detail: error.message, life: 3500 });
|
|
return;
|
|
}
|
|
items.value.forEach((n) => {
|
|
if (unreadIds.includes(n.id)) n.read_at = now;
|
|
});
|
|
notifStore.items.forEach((n) => {
|
|
if (unreadIds.includes(n.id)) n.read_at = now;
|
|
});
|
|
toast.add({
|
|
severity: 'success',
|
|
summary: `${unreadIds.length} marcada${unreadIds.length > 1 ? 's' : ''} como lida${unreadIds.length > 1 ? 's' : ''}`,
|
|
life: 2500
|
|
});
|
|
}
|
|
|
|
// ── Click numa row: abre deeplink ou conversation drawer ──
|
|
function handleRowClick(n) {
|
|
if (n.type === 'inbound_message') {
|
|
const payload = n.payload || {};
|
|
if (payload.patient_id) {
|
|
conversationDrawer.openForPatient(payload.patient_id);
|
|
} else if (payload.from_number) {
|
|
conversationDrawer.openForThread({
|
|
thread_key: `anon:${payload.from_number}`,
|
|
tenant_id: tenantStore.activeTenantId,
|
|
patient_id: null,
|
|
patient_name: null,
|
|
contact_number: payload.from_number,
|
|
channel: payload.channel || 'whatsapp',
|
|
message_count: 1,
|
|
unread_count: 1,
|
|
kanban_status: 'awaiting_us',
|
|
last_message_at: new Date().toISOString()
|
|
});
|
|
}
|
|
if (!n.read_at) markRead(n.id);
|
|
return;
|
|
}
|
|
const deeplink = n.payload?.deeplink;
|
|
if (deeplink) {
|
|
if (!n.read_at) markRead(n.id);
|
|
// Fecha a página Melissa antes de navegar pra rota Rail (deeplinks
|
|
// apontam pra /therapist/... ou /admin/...).
|
|
emit('close');
|
|
router.push(deeplink);
|
|
} else if (!n.read_at) {
|
|
markRead(n.id);
|
|
}
|
|
}
|
|
|
|
// ── Helpers de formatação ──────────────────────────────
|
|
function timeAgo(iso) {
|
|
try {
|
|
return formatDistanceToNow(new Date(iso), { addSuffix: true, locale: ptBR });
|
|
} catch {
|
|
return '—';
|
|
}
|
|
}
|
|
|
|
function fullDate(iso) {
|
|
try {
|
|
return format(new Date(iso), "dd 'de' MMMM 'às' HH:mm", { locale: ptBR });
|
|
} catch {
|
|
return '';
|
|
}
|
|
}
|
|
|
|
function initials(item) {
|
|
return item.payload?.avatar_initials || '?';
|
|
}
|
|
|
|
// Watcher: se filtro de tipo casa com nenhum item visível, mantém ativo
|
|
// pra dar feedback. (Não auto-reseta — user controla via X inline.)
|
|
watch(() => statusFilter.value, () => { /* noop — filter applies via computed */ });
|
|
|
|
onMounted(() => {
|
|
if (typeof window !== 'undefined' && window.matchMedia) {
|
|
_mqMobile = window.matchMedia('(max-width: 1023px)');
|
|
isMobile.value = _mqMobile.matches;
|
|
_mqMobile.addEventListener('change', _onMqMobileChange);
|
|
}
|
|
load();
|
|
});
|
|
onBeforeUnmount(() => {
|
|
if (_mqMobile) _mqMobile.removeEventListener('change', _onMqMobileChange);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<ConfirmDialog />
|
|
|
|
<!-- Drawer host (mobile) -->
|
|
<aside
|
|
class="mn-mobile-drawer"
|
|
:class="{ 'is-open': drawerOpen }"
|
|
v-show="isMobile"
|
|
aria-label="Estatísticas e filtros"
|
|
>
|
|
<div id="mn-mobile-drawer-target" class="mn-mobile-drawer__scroll" />
|
|
</aside>
|
|
<Transition name="mn-drawer-fade">
|
|
<div
|
|
v-if="isMobile && drawerOpen"
|
|
class="mn-mobile-drawer__backdrop"
|
|
@click="fecharDrawer"
|
|
/>
|
|
</Transition>
|
|
|
|
<section class="mn-page">
|
|
<header class="mn-page__head">
|
|
<button
|
|
class="mn-menu-btn mn-menu-btn--mobile-only"
|
|
v-tooltip.bottom="'Estatísticas & filtros'"
|
|
@click="toggleDrawer"
|
|
>
|
|
<i class="pi pi-bars" />
|
|
<span>Menu Notificações</span>
|
|
</button>
|
|
<div class="mn-page__title">
|
|
<i class="pi pi-bell mn-page__title-icon" />
|
|
<span>Notificações</span>
|
|
<span class="mn-page__count">{{ filteredItems.length }}</span>
|
|
<span v-if="unreadCount > 0" class="mn-page__unread">
|
|
{{ unreadCount }} não lida{{ unreadCount !== 1 ? 's' : '' }}
|
|
</span>
|
|
</div>
|
|
<div class="mn-page__actions">
|
|
<button
|
|
v-if="unreadCount > 0"
|
|
class="mn-act-btn"
|
|
v-tooltip.bottom="'Marcar todas como lidas'"
|
|
:disabled="loading"
|
|
@click="markAllRead"
|
|
>
|
|
<i class="pi pi-check-circle" />
|
|
<span>Marcar todas lidas</span>
|
|
</button>
|
|
<button
|
|
class="mn-head-btn"
|
|
v-tooltip.bottom="'Recarregar'"
|
|
:disabled="loading"
|
|
@click="load"
|
|
>
|
|
<i :class="loading ? 'pi pi-spin pi-spinner' : 'pi pi-refresh'" />
|
|
</button>
|
|
<button class="mn-close" v-tooltip.bottom="'Voltar (Esc)'" @click="emit('close')">
|
|
<i class="pi pi-times" />
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Subheader explicativo (blueprint §9) -->
|
|
<div class="mn-subheader">
|
|
<i class="pi pi-info-circle mn-subheader__icon" />
|
|
<span class="mn-subheader__text">
|
|
Histórico completo de notificações da clínica — agendamentos,
|
|
mensagens, recorrências e sessões. <strong>Marque como lida</strong>,
|
|
<strong>arquive</strong> ou clique numa notificação pra abrir o
|
|
contexto correspondente.
|
|
</span>
|
|
</div>
|
|
|
|
<div class="mn-body">
|
|
<!-- ═══ COL 1: Stats + filtros ═══ -->
|
|
<Teleport to="#mn-mobile-drawer-target" :disabled="!isMobile">
|
|
<aside class="mn-side">
|
|
<div class="mn-side__scroll">
|
|
<!-- Stats -->
|
|
<div class="mn-w mn-w--side">
|
|
<div class="mn-w__head">
|
|
<span class="mn-w__title"><i class="pi pi-chart-bar" /> Estatísticas</span>
|
|
</div>
|
|
<div class="mn-stats">
|
|
<div
|
|
v-for="s in stats"
|
|
:key="s.key"
|
|
class="mn-stat"
|
|
:class="`is-${s.cls}`"
|
|
>
|
|
<div class="mn-stat__val">{{ s.value }}</div>
|
|
<div class="mn-stat__lbl">{{ s.label }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filtro de status -->
|
|
<div class="mn-w mn-w--side">
|
|
<div class="mn-w__head">
|
|
<span class="mn-w__title"><i class="pi pi-filter" /> Status</span>
|
|
<button
|
|
v-if="statusFilter !== 'all'"
|
|
class="mn-side__clear-inline"
|
|
v-tooltip.top="'Voltar pro filtro padrão (Todas)'"
|
|
aria-label="Voltar pro filtro padrão"
|
|
@click="setStatusFilter('all')"
|
|
>
|
|
<i class="pi pi-times" />
|
|
</button>
|
|
</div>
|
|
<div class="mn-side__list">
|
|
<button
|
|
v-for="o in STATUS_FILTER_OPTIONS"
|
|
:key="o.key"
|
|
class="mn-side__item"
|
|
:class="[`is-status-${o.key}`, { 'is-active': statusFilter === o.key }]"
|
|
@click="setStatusFilter(o.key)"
|
|
>
|
|
<i :class="o.icon" />
|
|
<span>{{ o.label }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filtro de tipo -->
|
|
<div class="mn-w mn-w--side">
|
|
<div class="mn-w__head">
|
|
<span class="mn-w__title"><i class="pi pi-tag" /> Tipo</span>
|
|
<button
|
|
v-if="typeFilter"
|
|
class="mn-side__clear-inline"
|
|
v-tooltip.top="'Limpar filtro de tipo'"
|
|
aria-label="Limpar filtro de tipo"
|
|
@click="typeFilter = ''"
|
|
>
|
|
<i class="pi pi-times" />
|
|
</button>
|
|
</div>
|
|
<div class="mn-side__list">
|
|
<button
|
|
v-for="o in TYPE_FILTER_OPTIONS"
|
|
:key="o.key"
|
|
class="mn-side__item"
|
|
:class="[`is-type-${o.key}`, { 'is-active': typeFilter === o.key }]"
|
|
@click="toggleTypeFilter(o.key)"
|
|
>
|
|
<i :class="o.icon" />
|
|
<span>{{ o.label }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer fixo: Limpar filtros (Transition fade+collapse) -->
|
|
<Transition name="mn-clear">
|
|
<div v-if="hasActiveFilters" class="mn-side__footer">
|
|
<button class="mn-side__clear-all" @click="clearAllFilters">
|
|
<i class="pi pi-filter-slash" />
|
|
<span>Limpar filtros</span>
|
|
</button>
|
|
</div>
|
|
</Transition>
|
|
</aside>
|
|
</Teleport>
|
|
|
|
<!-- ═══ COL 2: Toolbar + Lista ═══ -->
|
|
<div class="mn-main">
|
|
<!-- Toolbar: busca -->
|
|
<div class="mn-toolbar">
|
|
<div class="mn-search">
|
|
<i class="pi pi-search mn-search__icon" />
|
|
<input
|
|
v-model="busca"
|
|
type="text"
|
|
placeholder="Buscar por título ou descrição…"
|
|
class="mn-search__input"
|
|
/>
|
|
<button
|
|
v-if="busca"
|
|
class="mn-search__clear"
|
|
v-tooltip.bottom="'Limpar busca'"
|
|
@click="busca = ''"
|
|
>
|
|
<i class="pi pi-times" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lista -->
|
|
<div class="mn-list">
|
|
<!-- Loading -->
|
|
<div v-if="loading" class="mn-loading">
|
|
<i class="pi pi-spin pi-spinner" />
|
|
<span>Carregando notificações…</span>
|
|
</div>
|
|
|
|
<!-- Empty -->
|
|
<div v-else-if="!filteredItems.length" class="mn-empty">
|
|
<i class="pi pi-bell-slash mn-empty__icon" />
|
|
<div class="mn-empty__title">
|
|
{{ hasActiveFilters ? 'Nada encontrado' : 'Nenhuma notificação ainda' }}
|
|
</div>
|
|
<div class="mn-empty__hint">
|
|
{{ hasActiveFilters
|
|
? 'Ajuste os filtros ou limpe-os pra ver tudo.'
|
|
: 'Quando algo acontecer, você será avisado aqui.' }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Items -->
|
|
<div v-else class="mn-rows">
|
|
<div
|
|
v-for="n in filteredItems"
|
|
:key="n.id"
|
|
class="mn-row"
|
|
:class="{
|
|
'is-unread': !n.read_at && !n.archived,
|
|
'is-archived': n.archived
|
|
}"
|
|
:style="{ '--mn-row-color': metaFor(n).color }"
|
|
role="button"
|
|
tabindex="0"
|
|
@click="handleRowClick(n)"
|
|
@keydown.enter="handleRowClick(n)"
|
|
>
|
|
<div class="mn-row__icon" :style="{ color: metaFor(n).color }">
|
|
<i :class="['pi', metaFor(n).icon]" />
|
|
</div>
|
|
|
|
<div class="mn-row__avatar">{{ initials(n) }}</div>
|
|
|
|
<div class="mn-row__body">
|
|
<div class="mn-row__title-row">
|
|
<span class="mn-row__title">{{ n.payload?.title || '(sem título)' }}</span>
|
|
<span
|
|
class="mn-row__type-pill"
|
|
:style="{ color: metaFor(n).color, borderColor: metaFor(n).color + '50', background: metaFor(n).color + '12' }"
|
|
>
|
|
{{ metaFor(n).label }}
|
|
</span>
|
|
<span v-if="n.archived" class="mn-row__type-pill mn-row__type-pill--muted">
|
|
Arquivada
|
|
</span>
|
|
</div>
|
|
<div class="mn-row__detail">{{ n.payload?.detail || '—' }}</div>
|
|
<div class="mn-row__time" :title="fullDate(n.created_at)">
|
|
{{ timeAgo(n.created_at) }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mn-row__actions" @click.stop>
|
|
<button
|
|
v-if="!n.read_at && !n.archived"
|
|
class="mn-row__btn"
|
|
v-tooltip.top="'Marcar como lida'"
|
|
@click="markRead(n.id)"
|
|
>
|
|
<i class="pi pi-check" />
|
|
</button>
|
|
<button
|
|
v-else-if="n.read_at && !n.archived"
|
|
class="mn-row__btn"
|
|
v-tooltip.top="'Marcar como não lida'"
|
|
@click="markUnread(n.id)"
|
|
>
|
|
<i class="pi pi-envelope" />
|
|
</button>
|
|
<button
|
|
v-if="!n.archived"
|
|
class="mn-row__btn"
|
|
v-tooltip.top="'Arquivar'"
|
|
@click="archive(n.id)"
|
|
>
|
|
<i class="pi pi-inbox" />
|
|
</button>
|
|
<button
|
|
v-else
|
|
class="mn-row__btn"
|
|
v-tooltip.top="'Desarquivar'"
|
|
@click="unarchive(n.id)"
|
|
>
|
|
<i class="pi pi-undo" />
|
|
</button>
|
|
<button
|
|
class="mn-row__btn mn-row__btn--danger"
|
|
v-tooltip.top="'Remover'"
|
|
@click="confirmRemove(n.id)"
|
|
>
|
|
<i class="pi pi-trash" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* ─── Page chrome (espelha demais Melissa Pages) ─── */
|
|
.mn-page {
|
|
position: absolute;
|
|
inset: 6px 6px calc(var(--m-dock-h, 76px) + 6px) 6px;
|
|
z-index: 40;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--m-bg-medium);
|
|
backdrop-filter: blur(32px) saturate(160%);
|
|
-webkit-backdrop-filter: blur(32px) saturate(160%);
|
|
border: 1px solid var(--m-border);
|
|
border-radius: 18px;
|
|
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
|
|
overflow: hidden;
|
|
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
|
|
color: var(--m-text);
|
|
animation: mn-page-enter 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
|
|
}
|
|
@keyframes mn-page-enter {
|
|
from { opacity: 0; transform: scale(0.985); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
|
|
.mn-page__head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 14px 18px;
|
|
border-bottom: 1px solid var(--m-border);
|
|
flex-shrink: 0;
|
|
gap: 10px;
|
|
}
|
|
.mn-page__title {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
flex-wrap: wrap;
|
|
}
|
|
.mn-page__title-icon {
|
|
color: var(--p-primary-color);
|
|
font-size: 1.05rem;
|
|
}
|
|
.mn-page__title > span:not(.mn-page__count):not(.mn-page__unread) {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.mn-page__count {
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
color: var(--m-accent);
|
|
background: var(--m-accent-soft);
|
|
border: 1px solid color-mix(in srgb, var(--m-accent) 35%, transparent);
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
}
|
|
.mn-page__unread {
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
color: rgb(217, 119, 6);
|
|
background: rgba(217, 119, 6, 0.12);
|
|
border: 1px solid rgba(217, 119, 6, 0.35);
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.mn-page__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
|
|
|
|
.mn-close, .mn-head-btn {
|
|
width: 32px; height: 32px;
|
|
display: grid; place-items: center;
|
|
background: var(--m-bg-soft);
|
|
border: 1px solid var(--m-border);
|
|
color: var(--m-text);
|
|
border-radius: 9px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
transition: background-color 140ms ease;
|
|
}
|
|
.mn-close:hover, .mn-head-btn:hover { background: var(--m-bg-soft-hover); }
|
|
.mn-head-btn > i { font-size: 0.85rem; }
|
|
.mn-head-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
|
|
.mn-act-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
height: 32px;
|
|
padding: 0 12px;
|
|
border-radius: 9px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
transition: background-color 140ms ease;
|
|
background: var(--m-bg-soft);
|
|
border: 1px solid var(--m-border);
|
|
color: var(--m-text);
|
|
}
|
|
.mn-act-btn:hover {
|
|
background: var(--m-bg-soft-hover);
|
|
border-color: var(--m-border-strong);
|
|
}
|
|
.mn-act-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
.mn-act-btn > i { font-size: 0.78rem; }
|
|
|
|
/* Subheader (blueprint §9) */
|
|
.mn-subheader {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
padding: 10px 18px;
|
|
border-bottom: 1px solid var(--m-border);
|
|
background: var(--m-bg-soft);
|
|
font-size: 0.78rem;
|
|
color: var(--m-text-muted);
|
|
line-height: 1.45;
|
|
flex-shrink: 0;
|
|
}
|
|
.mn-subheader__icon {
|
|
color: var(--p-primary-color);
|
|
font-size: 0.92rem;
|
|
flex-shrink: 0;
|
|
margin-top: 1px;
|
|
}
|
|
.mn-subheader__text { flex: 1; min-width: 0; }
|
|
.mn-subheader__text strong { color: var(--m-text); font-weight: 600; }
|
|
|
|
/* Body */
|
|
.mn-body {
|
|
flex: 1;
|
|
display: flex;
|
|
min-height: 0;
|
|
gap: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ─── Sidebar (2 zonas: __scroll + __footer fixo) ─── */
|
|
.mn-side {
|
|
width: 280px;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--m-bg-soft);
|
|
border-right: 1px solid var(--m-border);
|
|
overflow: hidden;
|
|
}
|
|
.mn-side__scroll {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.mn-side__scroll::-webkit-scrollbar { width: 5px; }
|
|
.mn-side__scroll::-webkit-scrollbar-thumb {
|
|
background: var(--m-border-strong);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.mn-side__footer {
|
|
flex-shrink: 0;
|
|
padding: 12px;
|
|
background: var(--m-bg-soft);
|
|
border-top: 1px solid var(--m-border);
|
|
}
|
|
.mn-side__clear-all {
|
|
width: 100%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 9px 12px;
|
|
background: var(--m-bg-medium);
|
|
border: 1px solid var(--m-border);
|
|
color: var(--m-text);
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
transition: background-color 140ms ease, border-color 140ms ease;
|
|
}
|
|
.mn-side__clear-all:hover {
|
|
background: var(--m-bg-soft-hover);
|
|
border-color: var(--m-border-strong);
|
|
}
|
|
.mn-side__clear-all > i {
|
|
font-size: 0.78rem;
|
|
color: var(--m-text-muted);
|
|
transition: color 140ms ease;
|
|
}
|
|
.mn-side__clear-all:hover > i { color: var(--m-text); }
|
|
|
|
.mn-side__clear-inline {
|
|
width: 18px;
|
|
height: 18px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: transparent;
|
|
border: 1px solid color-mix(in srgb, rgb(220, 38, 38) 30%, var(--m-border));
|
|
color: rgb(220, 38, 38);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
transition: background-color 140ms ease, border-color 140ms ease;
|
|
}
|
|
.mn-side__clear-inline:hover {
|
|
background: rgba(220, 38, 38, 0.10);
|
|
border-color: rgba(220, 38, 38, 0.55);
|
|
}
|
|
.mn-side__clear-inline > i { font-size: 0.6rem; }
|
|
|
|
.mn-clear-enter-active,
|
|
.mn-clear-leave-active {
|
|
transition: opacity 220ms ease, transform 220ms ease, max-height 240ms ease;
|
|
overflow: hidden;
|
|
}
|
|
.mn-clear-enter-from,
|
|
.mn-clear-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(6px);
|
|
max-height: 0;
|
|
}
|
|
.mn-clear-enter-to,
|
|
.mn-clear-leave-from {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
max-height: 80px;
|
|
}
|
|
|
|
.mn-w {
|
|
background: var(--m-bg-medium);
|
|
border: 1px solid var(--m-border);
|
|
border-radius: 12px;
|
|
padding: 12px;
|
|
}
|
|
.mn-w--side {
|
|
margin: 12px 12px 0;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
|
}
|
|
.mn-w--side:last-of-type { margin-bottom: 12px; }
|
|
.mn-w__head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
}
|
|
.mn-w__title {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 0.7rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: var(--m-text-muted);
|
|
font-weight: 600;
|
|
}
|
|
.mn-w__title > i { color: var(--m-text-muted); font-size: 0.7rem; }
|
|
|
|
.mn-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 6px;
|
|
}
|
|
.mn-stat {
|
|
background: var(--m-bg-soft);
|
|
border: 1px solid var(--m-border);
|
|
border-radius: 10px;
|
|
padding: 8px 10px;
|
|
}
|
|
.mn-stat__val {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
line-height: 1.1;
|
|
}
|
|
.mn-stat__lbl {
|
|
font-size: 0.65rem;
|
|
color: var(--m-text-muted);
|
|
margin-top: 4px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
.mn-stat.is-warn .mn-stat__val { color: rgb(217, 119, 6); }
|
|
.mn-stat.is-ok .mn-stat__val { color: rgb(22, 163, 74); }
|
|
|
|
/* ─── Filter buttons (blueprint §8) ─── */
|
|
.mn-side__list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
.mn-side__item {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 10px;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
color: var(--m-text);
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-size: 0.82rem;
|
|
text-align: left;
|
|
transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
|
|
}
|
|
.mn-side__item > i {
|
|
font-size: 0.78rem;
|
|
width: 14px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Status: Todas neutral, Não lidas amber, Lidas verde, Arquivadas neutral */
|
|
.mn-side__item.is-status-all {
|
|
background: var(--m-bg-soft);
|
|
border-color: var(--m-border);
|
|
}
|
|
.mn-side__item.is-status-all > i { color: var(--m-text-muted); }
|
|
.mn-side__item.is-status-all:hover {
|
|
background: var(--m-bg-soft-hover);
|
|
border-color: var(--m-border-strong);
|
|
}
|
|
.mn-side__item.is-active.is-status-all {
|
|
background: var(--m-bg-soft-hover);
|
|
border-color: var(--m-border-strong);
|
|
box-shadow: 0 0 0 1px var(--m-border-strong);
|
|
}
|
|
|
|
.mn-side__item.is-status-unread {
|
|
background: rgba(217, 119, 6, 0.05);
|
|
border-color: rgba(217, 119, 6, 0.18);
|
|
}
|
|
.mn-side__item.is-status-unread > i { color: rgb(217, 119, 6); }
|
|
.mn-side__item.is-status-unread:hover {
|
|
background: rgba(217, 119, 6, 0.10);
|
|
border-color: rgba(217, 119, 6, 0.30);
|
|
}
|
|
.mn-side__item.is-active.is-status-unread {
|
|
background: rgba(217, 119, 6, 0.16);
|
|
border-color: rgba(217, 119, 6, 0.55);
|
|
box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.35);
|
|
}
|
|
|
|
.mn-side__item.is-status-read {
|
|
background: rgba(22, 163, 74, 0.05);
|
|
border-color: rgba(22, 163, 74, 0.18);
|
|
}
|
|
.mn-side__item.is-status-read > i { color: rgb(22, 163, 74); }
|
|
.mn-side__item.is-status-read:hover {
|
|
background: rgba(22, 163, 74, 0.10);
|
|
border-color: rgba(22, 163, 74, 0.30);
|
|
}
|
|
.mn-side__item.is-active.is-status-read {
|
|
background: rgba(22, 163, 74, 0.16);
|
|
border-color: rgba(22, 163, 74, 0.55);
|
|
box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.35);
|
|
}
|
|
|
|
.mn-side__item.is-status-archived {
|
|
background: var(--m-bg-soft);
|
|
border-color: var(--m-border);
|
|
}
|
|
.mn-side__item.is-status-archived > i { color: var(--m-text-muted); }
|
|
.mn-side__item.is-status-archived:hover {
|
|
background: var(--m-bg-soft-hover);
|
|
border-color: var(--m-border-strong);
|
|
}
|
|
.mn-side__item.is-active.is-status-archived {
|
|
background: var(--m-bg-soft-hover);
|
|
border-color: var(--m-border-strong);
|
|
box-shadow: 0 0 0 1px var(--m-border-strong);
|
|
}
|
|
|
|
/* Tipo: cores Tailwind 600 por tipo (espelha typeMap do JS) */
|
|
.mn-side__item.is-type-new_scheduling {
|
|
background: rgba(220, 38, 38, 0.05);
|
|
border-color: rgba(220, 38, 38, 0.18);
|
|
}
|
|
.mn-side__item.is-type-new_scheduling > i { color: rgb(220, 38, 38); }
|
|
.mn-side__item.is-type-new_scheduling:hover {
|
|
background: rgba(220, 38, 38, 0.10);
|
|
border-color: rgba(220, 38, 38, 0.30);
|
|
}
|
|
.mn-side__item.is-active.is-type-new_scheduling {
|
|
background: rgba(220, 38, 38, 0.16);
|
|
border-color: rgba(220, 38, 38, 0.55);
|
|
box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.35);
|
|
}
|
|
|
|
.mn-side__item.is-type-new_patient {
|
|
background: rgba(2, 132, 199, 0.05);
|
|
border-color: rgba(2, 132, 199, 0.18);
|
|
}
|
|
.mn-side__item.is-type-new_patient > i { color: rgb(2, 132, 199); }
|
|
.mn-side__item.is-type-new_patient:hover {
|
|
background: rgba(2, 132, 199, 0.10);
|
|
border-color: rgba(2, 132, 199, 0.30);
|
|
}
|
|
.mn-side__item.is-active.is-type-new_patient {
|
|
background: rgba(2, 132, 199, 0.16);
|
|
border-color: rgba(2, 132, 199, 0.55);
|
|
box-shadow: 0 0 0 1px rgba(2, 132, 199, 0.35);
|
|
}
|
|
|
|
.mn-side__item.is-type-recurrence_alert {
|
|
background: rgba(217, 119, 6, 0.05);
|
|
border-color: rgba(217, 119, 6, 0.18);
|
|
}
|
|
.mn-side__item.is-type-recurrence_alert > i { color: rgb(217, 119, 6); }
|
|
.mn-side__item.is-type-recurrence_alert:hover {
|
|
background: rgba(217, 119, 6, 0.10);
|
|
border-color: rgba(217, 119, 6, 0.30);
|
|
}
|
|
.mn-side__item.is-active.is-type-recurrence_alert {
|
|
background: rgba(217, 119, 6, 0.16);
|
|
border-color: rgba(217, 119, 6, 0.55);
|
|
box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.35);
|
|
}
|
|
|
|
.mn-side__item.is-type-session_status {
|
|
background: rgba(234, 88, 12, 0.05);
|
|
border-color: rgba(234, 88, 12, 0.18);
|
|
}
|
|
.mn-side__item.is-type-session_status > i { color: rgb(234, 88, 12); }
|
|
.mn-side__item.is-type-session_status:hover {
|
|
background: rgba(234, 88, 12, 0.10);
|
|
border-color: rgba(234, 88, 12, 0.30);
|
|
}
|
|
.mn-side__item.is-active.is-type-session_status {
|
|
background: rgba(234, 88, 12, 0.16);
|
|
border-color: rgba(234, 88, 12, 0.55);
|
|
box-shadow: 0 0 0 1px rgba(234, 88, 12, 0.35);
|
|
}
|
|
|
|
.mn-side__item.is-type-inbound_message {
|
|
background: rgba(22, 163, 74, 0.05);
|
|
border-color: rgba(22, 163, 74, 0.18);
|
|
}
|
|
.mn-side__item.is-type-inbound_message > i { color: rgb(22, 163, 74); }
|
|
.mn-side__item.is-type-inbound_message:hover {
|
|
background: rgba(22, 163, 74, 0.10);
|
|
border-color: rgba(22, 163, 74, 0.30);
|
|
}
|
|
.mn-side__item.is-active.is-type-inbound_message {
|
|
background: rgba(22, 163, 74, 0.16);
|
|
border-color: rgba(22, 163, 74, 0.55);
|
|
box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.35);
|
|
}
|
|
|
|
/* ─── Main column ─── */
|
|
.mn-main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 12px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.mn-toolbar {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.mn-search {
|
|
position: relative;
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.mn-search__icon {
|
|
position: absolute;
|
|
left: 12px;
|
|
color: var(--m-text-muted);
|
|
font-size: 0.78rem;
|
|
pointer-events: none;
|
|
}
|
|
.mn-search__input {
|
|
width: 100%;
|
|
background: var(--m-bg-medium);
|
|
border: 1px solid var(--m-border);
|
|
color: var(--m-text);
|
|
padding: 9px 36px 9px 34px;
|
|
border-radius: 10px;
|
|
font-size: 0.85rem;
|
|
font-family: inherit;
|
|
outline: none;
|
|
transition: background-color 140ms ease, border-color 140ms ease;
|
|
}
|
|
.mn-search__input::placeholder { color: var(--m-text-faint); }
|
|
.mn-search__input:focus { border-color: var(--m-border-strong); }
|
|
.mn-search__clear {
|
|
position: absolute;
|
|
right: 8px;
|
|
width: 22px;
|
|
height: 22px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--m-text-muted);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
transition: background-color 140ms ease;
|
|
}
|
|
.mn-search__clear:hover {
|
|
background: var(--m-bg-soft-hover);
|
|
color: var(--m-text);
|
|
}
|
|
.mn-search__clear > i { font-size: 0.7rem; }
|
|
|
|
/* ─── Lista de notificações ─── */
|
|
.mn-list {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid var(--m-border);
|
|
border-radius: 10px;
|
|
background: transparent;
|
|
}
|
|
.mn-list::-webkit-scrollbar { width: 5px; }
|
|
.mn-list::-webkit-scrollbar-thumb {
|
|
background: var(--m-border-strong);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.mn-loading,
|
|
.mn-empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 56px 28px;
|
|
text-align: center;
|
|
color: var(--m-text-muted);
|
|
gap: 8px;
|
|
flex: 1;
|
|
}
|
|
.mn-loading > i { font-size: 1.4rem; color: var(--p-primary-color); }
|
|
.mn-empty__icon {
|
|
font-size: 2rem;
|
|
color: var(--m-text-faint);
|
|
margin-bottom: 4px;
|
|
}
|
|
.mn-empty__title {
|
|
font-size: 0.92rem;
|
|
font-weight: 600;
|
|
color: var(--m-text);
|
|
}
|
|
.mn-empty__hint { font-size: 0.78rem; }
|
|
|
|
.mn-rows {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.mn-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
padding: 12px 14px;
|
|
border-left: 3px solid var(--mn-row-color, var(--m-border));
|
|
border-bottom: 1px solid var(--m-border);
|
|
background: transparent;
|
|
cursor: pointer;
|
|
transition: background-color 140ms ease;
|
|
}
|
|
.mn-row:last-child { border-bottom: none; }
|
|
.mn-row:hover {
|
|
background: var(--m-bg-soft-hover);
|
|
}
|
|
.mn-row.is-unread {
|
|
background: color-mix(in srgb, var(--mn-row-color) 4%, transparent);
|
|
}
|
|
.mn-row.is-unread:hover {
|
|
background: color-mix(in srgb, var(--mn-row-color) 8%, var(--m-bg-soft-hover));
|
|
}
|
|
.mn-row.is-archived {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.mn-row__icon {
|
|
flex-shrink: 0;
|
|
width: 28px;
|
|
height: 28px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 8px;
|
|
background: color-mix(in srgb, var(--mn-row-color) 15%, transparent);
|
|
font-size: 0.92rem;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.mn-row__avatar {
|
|
flex-shrink: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, var(--p-primary-color), color-mix(in srgb, var(--p-primary-color) 60%, white));
|
|
color: white;
|
|
font-size: 0.72rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
display: grid;
|
|
place-items: center;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.mn-row__body {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
}
|
|
.mn-row__title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.mn-row__title {
|
|
font-weight: 600;
|
|
font-size: 0.88rem;
|
|
color: var(--m-text);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 100%;
|
|
}
|
|
.mn-row__type-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 1px 8px;
|
|
border-radius: 999px;
|
|
font-size: 0.62rem;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
border: 1px solid;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.mn-row__type-pill--muted {
|
|
background: var(--m-bg-medium) !important;
|
|
color: var(--m-text-muted) !important;
|
|
border-color: var(--m-border) !important;
|
|
}
|
|
.mn-row__detail {
|
|
font-size: 0.78rem;
|
|
color: var(--m-text-muted);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
line-height: 1.45;
|
|
}
|
|
.mn-row__time {
|
|
font-size: 0.7rem;
|
|
color: var(--m-text-faint);
|
|
}
|
|
|
|
.mn-row__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
flex-shrink: 0;
|
|
opacity: 0.4;
|
|
transition: opacity 140ms ease;
|
|
}
|
|
.mn-row:hover .mn-row__actions,
|
|
.mn-row:focus-within .mn-row__actions {
|
|
opacity: 1;
|
|
}
|
|
.mn-row__btn {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--m-text-muted);
|
|
display: grid;
|
|
place-items: center;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
transition: background-color 140ms ease, color 140ms ease;
|
|
}
|
|
.mn-row__btn:hover {
|
|
background: var(--m-bg-soft-hover);
|
|
color: var(--m-text);
|
|
}
|
|
.mn-row__btn--danger:hover {
|
|
background: rgba(220, 38, 38, 0.12);
|
|
color: rgb(220, 38, 38);
|
|
}
|
|
.mn-row__btn > i { font-size: 0.78rem; }
|
|
|
|
/* ─── Botão Menu mobile (abre drawer com sidebar) ─── */
|
|
.mn-menu-btn {
|
|
display: none;
|
|
height: 32px;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex-shrink: 0;
|
|
background: var(--m-accent);
|
|
border: 1px solid var(--m-accent);
|
|
color: white;
|
|
padding: 0 11px;
|
|
border-radius: 9px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
transition: background-color 140ms ease, transform 140ms ease;
|
|
}
|
|
.mn-menu-btn:hover {
|
|
background: color-mix(in srgb, var(--m-accent) 88%, white);
|
|
transform: translateY(-1px);
|
|
}
|
|
.mn-menu-btn > i { font-size: 0.85rem; }
|
|
|
|
/* ─── Drawer mobile (Teleport target) ─── */
|
|
.mn-mobile-drawer {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100vh;
|
|
height: 100dvh;
|
|
width: min(360px, 88vw);
|
|
z-index: 80;
|
|
background: var(--m-bg-medium);
|
|
backdrop-filter: blur(28px) saturate(160%);
|
|
-webkit-backdrop-filter: blur(28px) saturate(160%);
|
|
border-right: 1px solid var(--m-border);
|
|
transform: translateX(-100%);
|
|
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
color: var(--m-text);
|
|
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.mn-mobile-drawer.is-open { transform: translateX(0); }
|
|
.mn-mobile-drawer__scroll {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.mn-mobile-drawer__scroll .mn-side {
|
|
flex: 1;
|
|
min-height: 0;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
background: transparent;
|
|
border-right: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.mn-mobile-drawer__scroll .mn-side__scroll {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--m-border-strong) transparent;
|
|
}
|
|
.mn-mobile-drawer__scroll .mn-side__scroll::-webkit-scrollbar { width: 5px; }
|
|
.mn-mobile-drawer__scroll .mn-side__scroll::-webkit-scrollbar-thumb {
|
|
background: var(--m-border-strong);
|
|
border-radius: 3px;
|
|
}
|
|
.mn-mobile-drawer__scroll .mn-w--side {
|
|
margin: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
.mn-mobile-drawer__scroll .mn-w--side:last-of-type { margin-bottom: 0; }
|
|
.mn-mobile-drawer__scroll .mn-side__footer {
|
|
flex-shrink: 0;
|
|
margin: 0;
|
|
padding: 12px;
|
|
background: var(--m-bg-medium);
|
|
border-top: 1px solid var(--m-border);
|
|
backdrop-filter: blur(24px) saturate(160%);
|
|
-webkit-backdrop-filter: blur(24px) saturate(160%);
|
|
}
|
|
|
|
.mn-mobile-drawer__backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
backdrop-filter: blur(4px);
|
|
-webkit-backdrop-filter: blur(4px);
|
|
z-index: 79;
|
|
}
|
|
.mn-drawer-fade-enter-active,
|
|
.mn-drawer-fade-leave-active { transition: opacity 200ms ease; }
|
|
.mn-drawer-fade-enter-from,
|
|
.mn-drawer-fade-leave-to { opacity: 0; }
|
|
|
|
/* ─── Mobile (<1024px) ─── */
|
|
@media (max-width: 1023px) {
|
|
/* Sidebar saiu pro drawer via Teleport — body fica só com .mn-main. */
|
|
.mn-body { flex-direction: column; padding: 0; }
|
|
.mn-main { width: 100%; padding: 8px; }
|
|
.mn-page__title > span:first-of-type { display: none; }
|
|
.mn-page__title-icon { display: none; }
|
|
.mn-menu-btn--mobile-only { display: inline-flex; }
|
|
.mn-act-btn span { display: none; }
|
|
.mn-act-btn { width: 32px; padding: 0; justify-content: center; }
|
|
.mn-row__actions { opacity: 1; }
|
|
}
|
|
</style>
|