Componentes
Feedback Widget
Aba lateral fixa que abre um painel de coleta de opinião. Aparece em todas as telas autenticadas e é ligado/desligado pelo Admin sem deploy.
Visão geral
Aba "Feedback" flutuando sobre qualquer tela autenticada
Demo
Aba fechada
Painel aberto
Obrigado por testar o Spinlist!
Sua opinião ajuda a melhorar o app.
Anatomia
Aba (trigger)
Aba lateral
fixed right-0 top-1/2 · bg-[#C8F53C] · texto vertical · rounded-l-lg · z-50
Painel
Obrigado por testar o Spinlist!
Sua opinião ajuda a melhorar o app.
Cabeçalho
Título + subtítulo fixos · botão fechar (X) no canto superior direito
Fechar
Ícone X 16px · color:#888 · fecha o painel sem submeter
Rating de estrelas
5 estrelas · fill="#C8F53C" quando ativo/hover · opcional (pode enviar só texto)
Textarea
bg-[#111] · border-[#C8F53C] no focus · 3 linhas · opcional junto com rating
Botão Enviar
Disabled (opacity-40) se texto e rating estiverem vazios · loading state "Enviando..."
Comportamento
app_settings (key: 'feedback_widget'). O Admin alterna sem precisar de deploy. O componente também escuta o evento feedback-widget-toggled para atualizar em tempo real./login, /cadastro e /admin. Em qualquer outra rota autenticada, a aba é exibida.useSwipeToDismiss — mesmo padrão dos Bottom Sheets do app.feedback com user_id, text, rating e page (pathname atual). Após sucesso, mostra "🙏 Obrigado!" por 2 s e fecha.text-red-400 · botão volta ao estado normal.marginBottom: env(safe-area-inset-bottom) para respeitar o home indicator no iPhone.Specs
| Elemento | Valor |
|---|---|
| Aba — posição | fixed right-0 top-1/2 z-50 |
| Aba — fundo | #C8F53C |
| Aba — texto | #0f0f0f · 11 px · 700 · vertical-rl |
| Aba — borda | rounded-l-lg (8 px esquerda) |
| Painel — fundo | #1a1a1a |
| Painel — borda topo | border-t border-[#2a2a2a] |
| Painel — raio | rounded-t-2xl (16 px) |
| Painel — largura | max-w-sm (384 px) |
| Painel — padding | p-5 (20 px) |
| Estrelas — ativas | fill="#C8F53C" stroke="#C8F53C" · 24 px |
| Estrelas — inativas | fill="none" stroke="#C8F53C" |
| Textarea — fundo | #111 · border-[#C8F53C] no focus |
| Textarea — linhas | 3 (rows={3}) |
| Botão Enviar | bg-[#C8F53C] text-[#0f0f0f] · opacity-40 quando disabled |
| z-index | 50 (acima do conteúdo, abaixo de modais) |