feat(painel): Ajustes com submenu e ligações do PIR pelo esquema real

Ajustes vira uma tela com submenu (#/ajustes/<seção>): cada grupo do
celular é uma seção (Tela, Sensores, Sono, Vídeo, Sensibilidade), mais
Robô (Inteligência artificial, Ligações da placa) e Painel (Segurança,
Sistema). No PC o menu fica numa coluna fixa com descrição; no celular,
numa fileira rolável que traz a seção aberta para a vista. A busca
procura em todos os grupos do celular.

Ligações da placa passa a ser uma seção dos Ajustes (#/ligacoes antigo
redireciona) e segue o esquema que já tinha sido desenhado para o PIR:
- HC-SR505 mini, marcação + · out · −; no cabo, + no fio preto →
  pino 4, out no verde → pino 11, − no branco → pino 14;
- etiquetas do conector e tabela mostram a cor real do fio;
- tela TFT reserva também o pino 7; pinos livres listados;
- avisos do HC-SR505 (sinal de ~8 s, 30–60 s para estabilizar, teste
  com gpiomon).

Rotas ganham nav.sub (seção da tela); atalhos vão direto à seção
(câmera, IA, ligações).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/lib/rotas.svelte.ts

@@ -1,6 +1,6 @@
 /** 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' | 'ligacoes';
+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' },
@@ -17,23 +17,34 @@ export const SECUNDARIAS: { id: Rota; titulo: string; volta: Rota }[] = [
   { 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' },
-  { id: 'ligacoes', titulo: 'Ligações da placa', volta: 'ajustes' },
 ];
 
 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 {
-  let id = location.hash.replace(/^#\/?/, '').split('?')[0] as Rota;
-  if ((id as string) === 'historico') id = 'eventos';   // endereço antigo
+  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<Rota>(lerHash());
-  ir(rota: Rota) {
-    location.hash = '/' + rota;
+  /** 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()));
+addEventListener('hashchange', () => {
+  nav.atual = lerHash();
+  nav.sub = partes()[1];
+});