julioandClaude Opus 5.5
48fd51e377
Um ⓘ ao lado do título de cada seção (Ao vivo, Vida, Eventos, Ajustes, Reações, Conversa, Movimento) abre a explicação daquela parte: o que faz cada opção, onde fica e uma dica. No cartão Vida também há ⓘ para humores, cuidados e ritmo. O ⓘ do topo explica a tela atual. A página Guia (#/guia) junta todos os 21 tópicos em ordem de tutorial, com índice e busca; cada tópico também aparece no Ctrl+K e há atalho em Ajustes › Sistema. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
63 lines
1.5 KiB
Svelte
63 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { BookOpen, Info } from '@lucide/svelte';
|
|
import { TOPICOS } from '../guia';
|
|
import Modal from './Modal.svelte';
|
|
import TopicoGuia from './TopicoGuia.svelte';
|
|
|
|
// Botão ⓘ: abre a explicação de um tópico do guia num balão, com atalho para o guia completo.
|
|
let { topico, tamanho = 15 }: { topico: string; tamanho?: number } = $props();
|
|
const t = $derived(TOPICOS[topico]);
|
|
let aberto = $state(false);
|
|
</script>
|
|
|
|
{#if t}
|
|
<button
|
|
type="button"
|
|
class="ajuda"
|
|
aria-label={'O que é: ' + t.titulo}
|
|
title="O que é isto?"
|
|
onclick={(e) => {
|
|
e.stopPropagation();
|
|
aberto = true;
|
|
}}
|
|
>
|
|
<Info size={tamanho} />
|
|
</button>
|
|
<Modal bind:aberto titulo={t.emoji + ' ' + t.titulo}>
|
|
<TopicoGuia topico={t} />
|
|
<a class="btn pequeno guia" href={'#/guia?t=' + topico} onclick={() => (aberto = false)}>
|
|
<BookOpen size={14} /> Ver o guia completo
|
|
</a>
|
|
</Modal>
|
|
{/if}
|
|
|
|
<style>
|
|
.ajuda {
|
|
display: inline-grid;
|
|
place-items: center;
|
|
width: 26px;
|
|
height: 26px;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 50%;
|
|
background: transparent;
|
|
color: var(--texto-3);
|
|
cursor: pointer;
|
|
vertical-align: middle;
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
}
|
|
.ajuda:hover {
|
|
background: var(--superficie-2);
|
|
color: var(--destaque);
|
|
}
|
|
.ajuda:focus-visible {
|
|
outline: 2px solid var(--destaque);
|
|
outline-offset: 1px;
|
|
}
|
|
.guia {
|
|
justify-self: start;
|
|
text-decoration: none;
|
|
}
|
|
</style>
|