Leonardo
2dae4a11ae
ROADMAP item #1.3 #11. localStorage por user_id pra isolar sessoes diferentes no mesmo browser. ROADMAP sugeria localStorage OU tabela user_recent_access — escolhi localStorage por simplicidade (sem migration adicional + zero round-trip por visita). composables/useRecentPatients.js: - useRecentPatients() — composable reativo Tipo A: items + hasItems + addVisit + remove + clear + refresh - registerPatientVisit(patient) — helper stateless pra usar fora de setup (ex: navigation guards, action handlers) - Sincroniza entre instancias na mesma aba via CustomEvent + 'storage' - Max 5 items. Dedup por id, novo no topo. Wire-up de visita (registra ao carregar prontuario): - MelissaPaciente.vue: registerPatientVisit no loadAll apos detail.load - PatientProntuario.vue: registerPatientVisit em loadDetail apos p resolved Wire-up de visualizacao (mostra quando query vazia): - GlobalSearch.vue: grupo "Acessados recentemente" antes dos Atalhos. goTo("recent") navega pra /therapist/patients/:id. - MelissaBusca.vue: grupo "Acessados recentemente". emit('paciente') reusando a logica do MelissaLayout que ja navega pra /melissa/paciente?id=X. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
716 lines
29 KiB
Vue
716 lines
29 KiB
Vue
<!--
|
|
|--------------------------------------------------------------------------
|
|
| Agência PSI — GlobalSearch (topbar)
|
|
|--------------------------------------------------------------------------
|
|
| Busca global com atalho Ctrl+K / ⌘+K. Consulta a RPC `search_global` e
|
|
| mostra resultados agrupados por entidade + ações rápidas client-side.
|
|
|--------------------------------------------------------------------------
|
|
-->
|
|
<script setup>
|
|
import { ref, computed, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import IconField from 'primevue/iconfield';
|
|
import InputIcon from 'primevue/inputicon';
|
|
import InputText from 'primevue/inputtext';
|
|
import { supabase } from '@/lib/supabase/client';
|
|
import { useTenantStore } from '@/stores/tenantStore';
|
|
import { searchPages } from './pagesIndex';
|
|
import { useRecentPatients } from '@/composables/useRecentPatients';
|
|
|
|
const router = useRouter();
|
|
const tenantStore = useTenantStore();
|
|
const { items: recentPatients, hasItems: hasRecentPatients } = useRecentPatients();
|
|
|
|
// ────────────────────────────────────────────────────────────
|
|
// State
|
|
// ────────────────────────────────────────────────────────────
|
|
const rootEl = ref(null);
|
|
const inputEl = ref(null);
|
|
const query = ref('');
|
|
const results = ref({ patients: [], appointments: [], documents: [], services: [], intakes: [] });
|
|
const loading = ref(false);
|
|
const showPanel = ref(false);
|
|
const activeIndex = ref(-1);
|
|
|
|
// ────────────────────────────────────────────────────────────
|
|
// Ações estáticas (client-side, respondem na hora)
|
|
// ────────────────────────────────────────────────────────────
|
|
const STATIC_ACTIONS = [
|
|
{ id: 'act_new_patient', label: 'Novo paciente', icon: 'pi pi-user-plus', sublabel: 'Cadastrar paciente', to: '/therapist/patients/cadastro', keywords: ['novo','paciente','cadastrar','criar','add'] },
|
|
{ id: 'act_agenda', label: 'Agenda', icon: 'pi pi-calendar', sublabel: 'Ver calendário', to: '/therapist/agenda', keywords: ['agenda','calendario','sessoes','hoje'] },
|
|
{ id: 'act_patients', label: 'Pacientes', icon: 'pi pi-users', sublabel: 'Lista de pacientes', to: '/therapist/patients', keywords: ['pacientes','lista','todos'] },
|
|
{ id: 'act_financial', label: 'Financeiro', icon: 'pi pi-dollar', sublabel: 'Dashboard financeiro', to: '/therapist/financeiro', keywords: ['financeiro','cobrancas','pagamentos','dinheiro'] },
|
|
{ id: 'act_documents', label: 'Documentos', icon: 'pi pi-file', sublabel: 'Gestão de documentos', to: '/therapist/documents', keywords: ['documentos','arquivos','anexos'] },
|
|
{ id: 'act_services', label: 'Serviços', icon: 'pi pi-briefcase', sublabel: 'Precificação de serviços', to: '/configuracoes/precificacao', keywords: ['servicos','precificacao','precos','modalidade'] },
|
|
{ id: 'act_settings', label: 'Configurações', icon: 'pi pi-cog', sublabel: 'Preferências', to: '/configuracoes', keywords: ['configuracoes','settings','preferencias','ajustes'] }
|
|
];
|
|
|
|
function normalize(s) {
|
|
return String(s || '').normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase().trim();
|
|
}
|
|
|
|
const filteredActions = computed(() => {
|
|
const q = normalize(query.value);
|
|
if (!q) return STATIC_ACTIONS.slice(0, 4); // quick defaults quando vazio
|
|
return STATIC_ACTIONS.filter((a) => {
|
|
const hay = normalize(a.label + ' ' + (a.keywords || []).join(' '));
|
|
return hay.includes(q);
|
|
}).slice(0, 4);
|
|
});
|
|
|
|
// Páginas do app (client-side, filtrado por papel ativo)
|
|
const filteredPages = computed(() => {
|
|
const q = query.value.trim();
|
|
const role = tenantStore?.activeRole || null;
|
|
if (!q) return []; // só mostra páginas quando o usuário busca algo
|
|
return searchPages(q, role, 5);
|
|
});
|
|
|
|
// ────────────────────────────────────────────────────────────
|
|
// Flat list pra navegação por teclado
|
|
// ────────────────────────────────────────────────────────────
|
|
// Recently-viewed só aparece quando a query está vazia — não polui resultados de busca.
|
|
const showRecent = computed(() => !query.value.trim() && hasRecentPatients.value);
|
|
const recentItems = computed(() => showRecent.value ? (recentPatients.value || []).slice(0, 5) : []);
|
|
|
|
const flatList = computed(() => {
|
|
const out = [];
|
|
filteredActions.value.forEach((a, i) => out.push({ group: 'actions', item: a, idx: i }));
|
|
recentItems.value.forEach((p, i) => out.push({ group: 'recent', item: p, idx: i }));
|
|
results.value.patients.forEach((p, i) => out.push({ group: 'patients', item: p, idx: i }));
|
|
results.value.intakes.forEach((r, i) => out.push({ group: 'intakes', item: r, idx: i }));
|
|
results.value.appointments.forEach((a, i) => out.push({ group: 'appointments', item: a, idx: i }));
|
|
results.value.documents.forEach((d, i) => out.push({ group: 'documents', item: d, idx: i }));
|
|
results.value.services.forEach((s, i) => out.push({ group: 'services', item: s, idx: i }));
|
|
filteredPages.value.forEach((p, i) => out.push({ group: 'pages', item: p, idx: i }));
|
|
return out;
|
|
});
|
|
|
|
function findFlatIndex(group, idx) {
|
|
return flatList.value.findIndex((e) => e.group === group && e.idx === idx);
|
|
}
|
|
|
|
const hasAnyResult = computed(() =>
|
|
filteredActions.value.length
|
|
|| results.value.patients.length
|
|
|| results.value.intakes.length
|
|
|| results.value.appointments.length
|
|
|| results.value.documents.length
|
|
|| results.value.services.length
|
|
|| filteredPages.value.length
|
|
);
|
|
|
|
// ────────────────────────────────────────────────────────────
|
|
// Fetch (debounced, com controle de ordem)
|
|
// ────────────────────────────────────────────────────────────
|
|
let debounceT = null;
|
|
let searchSeq = 0;
|
|
|
|
function resetResults() {
|
|
results.value = { patients: [], appointments: [], documents: [], services: [], intakes: [] };
|
|
}
|
|
|
|
watch(query, (v) => {
|
|
if (debounceT) clearTimeout(debounceT);
|
|
const q = String(v || '').trim();
|
|
if (q.length < 2) {
|
|
resetResults();
|
|
activeIndex.value = flatList.value.length ? 0 : -1;
|
|
loading.value = false;
|
|
return;
|
|
}
|
|
loading.value = true;
|
|
const mySeq = ++searchSeq;
|
|
debounceT = setTimeout(async () => {
|
|
try {
|
|
const { data, error } = await supabase.rpc('search_global', { p_q: q, p_limit: 6 });
|
|
if (mySeq !== searchSeq) return; // resposta antiga, descarta
|
|
if (error) {
|
|
// eslint-disable-next-line no-console
|
|
console.error('[search_global] erro:', error);
|
|
resetResults();
|
|
} else {
|
|
results.value = {
|
|
patients: Array.isArray(data?.patients) ? data.patients : [],
|
|
appointments: Array.isArray(data?.appointments) ? data.appointments : [],
|
|
documents: Array.isArray(data?.documents) ? data.documents : [],
|
|
services: Array.isArray(data?.services) ? data.services : [],
|
|
intakes: Array.isArray(data?.intakes) ? data.intakes : []
|
|
};
|
|
}
|
|
} catch (e) {
|
|
if (mySeq !== searchSeq) return;
|
|
// eslint-disable-next-line no-console
|
|
console.error('[search_global] exceção:', e);
|
|
resetResults();
|
|
} finally {
|
|
if (mySeq === searchSeq) loading.value = false;
|
|
}
|
|
activeIndex.value = flatList.value.length ? 0 : -1;
|
|
}, 200);
|
|
});
|
|
|
|
// ────────────────────────────────────────────────────────────
|
|
// Teclado
|
|
// ────────────────────────────────────────────────────────────
|
|
function focusInput() {
|
|
nextTick(() => {
|
|
const inst = inputEl.value;
|
|
const el = inst?.$el?.tagName === 'INPUT' ? inst.$el : inst?.$el?.querySelector?.('input');
|
|
el?.focus?.();
|
|
try { el?.select?.(); } catch { /* ignore */ }
|
|
});
|
|
}
|
|
|
|
function onGlobalKeydown(e) {
|
|
const isK = e.key?.toLowerCase() === 'k';
|
|
const cmd = e.ctrlKey || e.metaKey;
|
|
if (cmd && isK) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
showPanel.value = true;
|
|
focusInput();
|
|
return;
|
|
}
|
|
if (e.key === 'Escape' && showPanel.value) {
|
|
showPanel.value = false;
|
|
}
|
|
}
|
|
|
|
function onInputKeydown(e) {
|
|
const n = flatList.value.length;
|
|
if (e.key === 'ArrowDown') {
|
|
if (!n) return;
|
|
e.preventDefault();
|
|
activeIndex.value = (activeIndex.value + 1 + n) % n;
|
|
} else if (e.key === 'ArrowUp') {
|
|
if (!n) return;
|
|
e.preventDefault();
|
|
activeIndex.value = (activeIndex.value - 1 + n) % n;
|
|
} else if (e.key === 'Enter') {
|
|
const entry = flatList.value[activeIndex.value];
|
|
if (entry) {
|
|
e.preventDefault();
|
|
goTo(entry);
|
|
}
|
|
} else if (e.key === 'Escape') {
|
|
showPanel.value = false;
|
|
const inst = inputEl.value;
|
|
const el = inst?.$el?.tagName === 'INPUT' ? inst.$el : inst?.$el?.querySelector?.('input');
|
|
el?.blur?.();
|
|
}
|
|
}
|
|
|
|
async function goTo(entry) {
|
|
// Recent patients: usa id pra navegar pro prontuário do paciente
|
|
if (entry?.group === 'recent' && entry?.item?.id) {
|
|
showPanel.value = false;
|
|
query.value = '';
|
|
resetResults();
|
|
activeIndex.value = -1;
|
|
await router.push({ path: '/therapist/patients/' + entry.item.id });
|
|
return;
|
|
}
|
|
|
|
const target = entry?.item?.to || entry?.item?.deeplink || entry?.item?.path;
|
|
if (!target) return;
|
|
showPanel.value = false;
|
|
query.value = '';
|
|
resetResults();
|
|
activeIndex.value = -1;
|
|
await router.push(target);
|
|
}
|
|
|
|
function onFocus() {
|
|
showPanel.value = true;
|
|
if (flatList.value.length && activeIndex.value < 0) activeIndex.value = 0;
|
|
}
|
|
|
|
function onDocMouseDown(e) {
|
|
if (!showPanel.value) return;
|
|
const el = rootEl.value;
|
|
if (!el) return;
|
|
if (!el.contains(e.target)) showPanel.value = false;
|
|
}
|
|
|
|
onMounted(() => {
|
|
window.addEventListener('keydown', onGlobalKeydown, true);
|
|
document.addEventListener('mousedown', onDocMouseDown);
|
|
});
|
|
onBeforeUnmount(() => {
|
|
if (debounceT) clearTimeout(debounceT);
|
|
window.removeEventListener('keydown', onGlobalKeydown, true);
|
|
document.removeEventListener('mousedown', onDocMouseDown);
|
|
});
|
|
|
|
// ────────────────────────────────────────────────────────────
|
|
// UI helpers
|
|
// ────────────────────────────────────────────────────────────
|
|
const kbdIsMac = typeof navigator !== 'undefined' && /Mac|iP(ad|od|hone)/i.test(navigator.platform || '');
|
|
const kbdModifier = kbdIsMac ? '⌘' : 'Ctrl';
|
|
</script>
|
|
|
|
<template>
|
|
<div ref="rootEl" class="gs-root">
|
|
<div class="gs-field">
|
|
<IconField class="gs-field__wrap">
|
|
<InputIcon class="pi pi-search gs-field__icon" />
|
|
<InputText
|
|
ref="inputEl"
|
|
v-model="query"
|
|
type="search"
|
|
autocomplete="off"
|
|
spellcheck="false"
|
|
placeholder="Buscar pacientes, agenda, documentos…"
|
|
class="gs-field__input"
|
|
@focus="onFocus"
|
|
@keydown="onInputKeydown"
|
|
/>
|
|
</IconField>
|
|
<span class="gs-field__kbd" aria-hidden="true">
|
|
<kbd>{{ kbdModifier }}</kbd>
|
|
<kbd>K</kbd>
|
|
</span>
|
|
</div>
|
|
|
|
<div v-if="showPanel" class="gs-panel" role="listbox">
|
|
<div v-if="loading" class="gs-panel__state">
|
|
<i class="pi pi-spin pi-spinner" /> buscando…
|
|
</div>
|
|
|
|
<div v-else-if="query.trim().length >= 2 && !hasAnyResult" class="gs-panel__state">
|
|
Nada encontrado pra <b>{{ query }}</b>.
|
|
</div>
|
|
|
|
<template v-else>
|
|
<!-- Acessados recentemente (só quando query vazia) -->
|
|
<div v-if="showRecent" class="gs-group">
|
|
<div class="gs-group__title">Acessados recentemente</div>
|
|
<button
|
|
v-for="(p, i) in recentItems"
|
|
:key="'rp-' + p.id"
|
|
type="button"
|
|
class="gs-item"
|
|
:class="{ 'is-active': findFlatIndex('recent', i) === activeIndex }"
|
|
@mouseenter="activeIndex = findFlatIndex('recent', i)"
|
|
@click="goTo({ group: 'recent', item: p, idx: i })"
|
|
>
|
|
<span class="gs-item__icon"><i class="pi pi-history" /></span>
|
|
<span class="gs-item__main">
|
|
<span class="gs-item__label">{{ p.nome }}</span>
|
|
<span class="gs-item__sub">{{ p.extras?.telefone || p.extras?.email || 'Abrir prontuário' }}</span>
|
|
</span>
|
|
<i class="gs-item__go pi pi-arrow-right" />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Ações -->
|
|
<div v-if="filteredActions.length" class="gs-group">
|
|
<div class="gs-group__title">{{ query.trim() ? 'Ações' : 'Atalhos' }}</div>
|
|
<button
|
|
v-for="(a, i) in filteredActions"
|
|
:key="a.id"
|
|
type="button"
|
|
class="gs-item"
|
|
:class="{ 'is-active': findFlatIndex('actions', i) === activeIndex }"
|
|
@mouseenter="activeIndex = findFlatIndex('actions', i)"
|
|
@click="goTo({ group: 'actions', item: a, idx: i })"
|
|
>
|
|
<span class="gs-item__icon"><i :class="a.icon" /></span>
|
|
<span class="gs-item__main">
|
|
<span class="gs-item__label">{{ a.label }}</span>
|
|
<span class="gs-item__sub">{{ a.sublabel }}</span>
|
|
</span>
|
|
<i class="gs-item__go pi pi-arrow-right" />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Pacientes -->
|
|
<div v-if="results.patients.length" class="gs-group">
|
|
<div class="gs-group__title">Pacientes</div>
|
|
<button
|
|
v-for="(p, i) in results.patients"
|
|
:key="p.id"
|
|
type="button"
|
|
class="gs-item"
|
|
:class="{ 'is-active': findFlatIndex('patients', i) === activeIndex }"
|
|
@mouseenter="activeIndex = findFlatIndex('patients', i)"
|
|
@click="goTo({ group: 'patients', item: p, idx: i })"
|
|
>
|
|
<span class="gs-item__avatar">
|
|
<img v-if="p.avatar_url" :src="p.avatar_url" :alt="p.label" />
|
|
<i v-else class="pi pi-user" />
|
|
</span>
|
|
<span class="gs-item__main">
|
|
<span class="gs-item__label">{{ p.label }}</span>
|
|
<span class="gs-item__sub">{{ p.sublabel }}</span>
|
|
</span>
|
|
<i class="gs-item__go pi pi-arrow-right" />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Cadastros pendentes (intakes) -->
|
|
<div v-if="results.intakes.length" class="gs-group">
|
|
<div class="gs-group__title">Cadastros pendentes</div>
|
|
<button
|
|
v-for="(r, i) in results.intakes"
|
|
:key="r.id"
|
|
type="button"
|
|
class="gs-item"
|
|
:class="{ 'is-active': findFlatIndex('intakes', i) === activeIndex }"
|
|
@mouseenter="activeIndex = findFlatIndex('intakes', i)"
|
|
@click="goTo({ group: 'intakes', item: r, idx: i })"
|
|
>
|
|
<span class="gs-item__icon gs-item__icon--amber"><i class="pi pi-inbox" /></span>
|
|
<span class="gs-item__main">
|
|
<span class="gs-item__label">{{ r.label }}</span>
|
|
<span class="gs-item__sub">{{ r.sublabel }}</span>
|
|
</span>
|
|
<i class="gs-item__go pi pi-arrow-right" />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Agendamentos -->
|
|
<div v-if="results.appointments.length" class="gs-group">
|
|
<div class="gs-group__title">Agendamentos</div>
|
|
<button
|
|
v-for="(a, i) in results.appointments"
|
|
:key="a.id"
|
|
type="button"
|
|
class="gs-item"
|
|
:class="{ 'is-active': findFlatIndex('appointments', i) === activeIndex }"
|
|
@mouseenter="activeIndex = findFlatIndex('appointments', i)"
|
|
@click="goTo({ group: 'appointments', item: a, idx: i })"
|
|
>
|
|
<span class="gs-item__icon gs-item__icon--blue"><i class="pi pi-calendar" /></span>
|
|
<span class="gs-item__main">
|
|
<span class="gs-item__label">{{ a.label }}</span>
|
|
<span class="gs-item__sub">{{ a.sublabel }}</span>
|
|
</span>
|
|
<i class="gs-item__go pi pi-arrow-right" />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Documentos -->
|
|
<div v-if="results.documents.length" class="gs-group">
|
|
<div class="gs-group__title">Documentos</div>
|
|
<button
|
|
v-for="(d, i) in results.documents"
|
|
:key="d.id"
|
|
type="button"
|
|
class="gs-item"
|
|
:class="{ 'is-active': findFlatIndex('documents', i) === activeIndex }"
|
|
@mouseenter="activeIndex = findFlatIndex('documents', i)"
|
|
@click="goTo({ group: 'documents', item: d, idx: i })"
|
|
>
|
|
<span class="gs-item__icon gs-item__icon--purple"><i class="pi pi-file" /></span>
|
|
<span class="gs-item__main">
|
|
<span class="gs-item__label">{{ d.label }}</span>
|
|
<span class="gs-item__sub">{{ d.sublabel }}</span>
|
|
</span>
|
|
<i class="gs-item__go pi pi-arrow-right" />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Serviços -->
|
|
<div v-if="results.services.length" class="gs-group">
|
|
<div class="gs-group__title">Serviços</div>
|
|
<button
|
|
v-for="(s, i) in results.services"
|
|
:key="s.id"
|
|
type="button"
|
|
class="gs-item"
|
|
:class="{ 'is-active': findFlatIndex('services', i) === activeIndex }"
|
|
@mouseenter="activeIndex = findFlatIndex('services', i)"
|
|
@click="goTo({ group: 'services', item: s, idx: i })"
|
|
>
|
|
<span class="gs-item__icon gs-item__icon--orange"><i class="pi pi-briefcase" /></span>
|
|
<span class="gs-item__main">
|
|
<span class="gs-item__label">{{ s.label }}</span>
|
|
<span class="gs-item__sub">{{ s.sublabel }}</span>
|
|
</span>
|
|
<i class="gs-item__go pi pi-arrow-right" />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Páginas do app -->
|
|
<div v-if="filteredPages.length" class="gs-group">
|
|
<div class="gs-group__title">Páginas</div>
|
|
<button
|
|
v-for="(p, i) in filteredPages"
|
|
:key="p.id"
|
|
type="button"
|
|
class="gs-item"
|
|
:class="{ 'is-active': findFlatIndex('pages', i) === activeIndex }"
|
|
@mouseenter="activeIndex = findFlatIndex('pages', i)"
|
|
@click="goTo({ group: 'pages', item: p, idx: i })"
|
|
>
|
|
<span class="gs-item__icon gs-item__icon--slate"><i :class="p.icon" /></span>
|
|
<span class="gs-item__main">
|
|
<span class="gs-item__label">{{ p.label }}</span>
|
|
<span class="gs-item__sub">{{ p.sublabel }}</span>
|
|
</span>
|
|
<i class="gs-item__go pi pi-arrow-right" />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Hint -->
|
|
<div v-if="!query.trim()" class="gs-panel__hint">
|
|
<i class="pi pi-info-circle" />
|
|
Digite ao menos 2 caracteres para buscar em pacientes, agenda, documentos e serviços.
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.gs-root {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 420px;
|
|
min-width: 220px;
|
|
flex: 1 1 320px;
|
|
}
|
|
|
|
.gs-field { position: relative; display: flex; align-items: center; }
|
|
.gs-field__wrap { flex: 1; min-width: 0; }
|
|
.gs-field__icon { font-size: 0.82rem; opacity: 0.6; }
|
|
|
|
.gs-field__wrap :deep(.p-inputtext) {
|
|
width: 100%;
|
|
padding: 8px 56px 8px 34px;
|
|
font-size: 0.82rem;
|
|
height: 36px;
|
|
border-radius: 10px;
|
|
background: var(--p-content-background, var(--surface-card));
|
|
border: 1px solid var(--p-content-border-color, var(--surface-border));
|
|
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
|
|
}
|
|
.gs-field__wrap :deep(.p-inputtext:hover) {
|
|
border-color: color-mix(in srgb, var(--primary-color) 40%, var(--surface-border));
|
|
}
|
|
.gs-field__wrap :deep(.p-inputtext:focus) {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent);
|
|
outline: none;
|
|
}
|
|
|
|
.gs-field__kbd {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: inline-flex;
|
|
gap: 3px;
|
|
pointer-events: none;
|
|
}
|
|
.gs-field__kbd kbd {
|
|
font-family: inherit;
|
|
font-size: 0.6rem;
|
|
font-weight: 600;
|
|
padding: 2px 5px;
|
|
border-radius: 4px;
|
|
background: color-mix(in srgb, var(--text-color) 7%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
|
|
color: var(--text-color-secondary);
|
|
line-height: 1;
|
|
min-width: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
.gs-panel {
|
|
position: absolute;
|
|
top: calc(100% + 6px);
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 3100;
|
|
background: var(--surface-card);
|
|
border: 1px solid var(--surface-border);
|
|
border-radius: 12px;
|
|
box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.3);
|
|
max-height: 70vh;
|
|
overflow-y: auto;
|
|
padding: 6px;
|
|
min-width: 360px;
|
|
}
|
|
|
|
.gs-panel__state {
|
|
padding: 18px;
|
|
text-align: center;
|
|
font-size: 0.82rem;
|
|
color: var(--text-color-secondary);
|
|
}
|
|
.gs-panel__hint {
|
|
padding: 10px 12px;
|
|
font-size: 0.72rem;
|
|
color: var(--text-color-secondary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.gs-group + .gs-group {
|
|
margin-top: 4px;
|
|
border-top: 1px solid var(--surface-border);
|
|
padding-top: 4px;
|
|
}
|
|
.gs-group__title {
|
|
padding: 8px 10px 4px;
|
|
font-size: 0.62rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
color: var(--text-color-secondary);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.gs-item {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
gap: 10px;
|
|
padding: 8px 10px;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: background 0.12s, border-color 0.12s;
|
|
text-align: left;
|
|
font-family: inherit;
|
|
color: var(--text-color);
|
|
}
|
|
.gs-item.is-active {
|
|
background: color-mix(in srgb, var(--primary-color) 10%, transparent);
|
|
border-color: color-mix(in srgb, var(--primary-color) 24%, transparent);
|
|
}
|
|
|
|
.gs-item__icon,
|
|
.gs-item__avatar {
|
|
width: 28px;
|
|
height: 28px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 8px;
|
|
flex-shrink: 0;
|
|
font-size: 0.82rem;
|
|
}
|
|
.gs-item__icon {
|
|
background: color-mix(in srgb, var(--primary-color) 12%, transparent);
|
|
color: var(--primary-color);
|
|
}
|
|
.gs-item__icon--blue {
|
|
background: color-mix(in srgb, #60a5fa 14%, transparent);
|
|
color: #60a5fa;
|
|
}
|
|
.gs-item__icon--purple {
|
|
background: color-mix(in srgb, #c084fc 14%, transparent);
|
|
color: #c084fc;
|
|
}
|
|
.gs-item__icon--orange {
|
|
background: color-mix(in srgb, #fb923c 14%, transparent);
|
|
color: #fb923c;
|
|
}
|
|
.gs-item__icon--amber {
|
|
background: color-mix(in srgb, #f59e0b 14%, transparent);
|
|
color: #f59e0b;
|
|
}
|
|
.gs-item__icon--slate {
|
|
background: color-mix(in srgb, var(--text-color) 8%, transparent);
|
|
color: var(--text-color-secondary);
|
|
}
|
|
.gs-item__avatar {
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
background: color-mix(in srgb, var(--text-color) 6%, transparent);
|
|
color: var(--text-color-secondary);
|
|
}
|
|
.gs-item__avatar img { width: 100%; height: 100%; object-fit: cover; }
|
|
|
|
.gs-item__main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
.gs-item__label {
|
|
font-size: 0.82rem;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.gs-item__sub {
|
|
font-size: 0.7rem;
|
|
color: var(--text-color-secondary);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.gs-item__go {
|
|
font-size: 0.7rem;
|
|
color: var(--text-color-secondary);
|
|
opacity: 0;
|
|
transition: opacity 0.12s;
|
|
}
|
|
.gs-item.is-active .gs-item__go { opacity: 1; color: var(--primary-color); }
|
|
|
|
/* Responsive */
|
|
@media (max-width: 820px) { .gs-root { max-width: 260px; flex-basis: 220px; } }
|
|
|
|
/* Compact: ≤ 640px → só ícone + kbd visíveis (input textual colapsado) */
|
|
@media (max-width: 640px) {
|
|
.gs-root {
|
|
flex: 0 0 auto;
|
|
width: auto;
|
|
min-width: 0;
|
|
max-width: none;
|
|
}
|
|
.gs-field__wrap :deep(.p-inputtext) {
|
|
width: 92px;
|
|
padding: 8px 42px 8px 30px;
|
|
color: transparent;
|
|
caret-color: transparent;
|
|
cursor: pointer;
|
|
}
|
|
.gs-field__wrap :deep(.p-inputtext::placeholder) {
|
|
color: transparent;
|
|
}
|
|
/* Mantém kbd visível em compact (dica visual do atalho) */
|
|
.gs-field__kbd {
|
|
display: inline-flex;
|
|
right: 6px;
|
|
pointer-events: none;
|
|
}
|
|
.gs-field__kbd kbd {
|
|
font-size: 0.55rem;
|
|
padding: 1px 4px;
|
|
}
|
|
|
|
/* Focado: expande como overlay sobre o topbar */
|
|
.gs-root:focus-within {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0.5rem;
|
|
right: 0.5rem;
|
|
transform: translateY(-50%);
|
|
z-index: 110;
|
|
}
|
|
.gs-root:focus-within .gs-field__wrap :deep(.p-inputtext) {
|
|
width: 100%;
|
|
padding: 8px 56px 8px 34px;
|
|
color: inherit;
|
|
caret-color: auto;
|
|
cursor: text;
|
|
background: var(--p-content-background, var(--surface-card));
|
|
}
|
|
.gs-root:focus-within .gs-field__wrap :deep(.p-inputtext::placeholder) {
|
|
color: var(--text-color-secondary);
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
</style>
|