/** Rotas por hash (#/conversa): o servidor só precisa entregar index.html em "/". */ export type Rota = 'ao-vivo' | 'eventos' | 'conversa' | 'reacoes' | 'movimento' | 'ajustes' | 'rosto' | 'guia' | 'criar' | 'dia-a-dia'; export const ROTAS: { id: Rota; titulo: string; atalho: string }[] = [ { id: 'ao-vivo', titulo: 'Ao vivo', atalho: 'g v' }, { id: 'eventos', titulo: 'Eventos', atalho: 'g e' }, { id: 'conversa', titulo: 'Conversa', atalho: 'g c' }, { id: 'reacoes', titulo: 'Reações', atalho: 'g r' }, { id: 'movimento', titulo: 'Movimento', atalho: 'g m' }, { id: 'ajustes', titulo: 'Ajustes', atalho: 'g a' }, ]; /** Páginas abertas a partir de outra tela (não aparecem na navegação). */ export const SECUNDARIAS: { id: Rota; titulo: string; volta: Rota }[] = [ { id: 'rosto', titulo: 'Rosto', volta: 'ao-vivo' }, { id: 'guia', titulo: 'Guia', volta: 'ajustes' }, { id: 'criar', titulo: 'Criar com IA', volta: 'reacoes' }, { id: 'dia-a-dia', titulo: 'Dia a dia', volta: 'ao-vivo' }, ]; export const tituloDa = (id: Rota) => [...ROTAS, ...SECUNDARIAS].find((r) => r.id === id)?.titulo ?? ''; /** #/ajustes/ia -> ['ajustes', 'ia']: a segunda parte é a seção (submenu) da tela. */ function partes(): [string, string] { const [id, sub = ''] = location.hash.replace(/^#\/?/, '').split('?')[0].split('/'); if (id === 'historico') return ['eventos', sub]; // endereço antigo if (id === 'ligacoes') return ['ajustes', 'ligacoes']; // virou seção dos Ajustes return [id, sub]; } function lerHash(): Rota { const id = partes()[0] as Rota; return ROTAS.some((r) => r.id === id) || SECUNDARIAS.some((r) => r.id === id) ? id : 'ao-vivo'; } class Navegacao { atual = $state(lerHash()); /** Seção dentro da tela (ex.: a parte dos Ajustes aberta). */ sub = $state(partes()[1]); ir(rota: Rota, sub = '') { location.hash = '/' + rota + (sub ? '/' + sub : ''); } } export const nav = new Navegacao(); addEventListener('hashchange', () => { nav.atual = lerHash(); nav.sub = partes()[1]; });