Padrões
Layouts
Os 5 padrões de layout do Spinlist. Toda tela é uma combinação desses moldes com os componentes do DiSco.
Shell básico
Container de toda tela autenticada. fixed inset-0 no container raiz — Header fixo no topo, BottomNav fixo na base, área central scrollável.
Header
Fixo no topo · z-10 · altura 56 px · back button, título, ação secundária
Área scrollável
flex-1 overflow-y-auto · px-4 · safe area no topo coberta pelo Header
BottomNav
Fixo na base · z-30 · paddingBottom: env(safe-area-inset-bottom) · 4 abas
fixed inset-0 (não h-dvh) para compatibilidade com iOS PWA.Tela de lista
Feed, coleção, busca, atividades. Shell com faixa de filtros fixos abaixo do Header e lista de itens repetidos no scroll.
Faixa de filtros
Sticky abaixo do Header · Chips em overflow-x-auto scrollbar-none · filtra sem requisição nova quando os dados já estão carregados
Lista de itens
flex flex-col gap-3 · cada item é um FeedCard ou List Item · Skeleton enquanto carrega
Tela de detalhe
Disco, perfil público. Hero full-bleed no topo sem Header fixo (back button flutua sobre o hero), conteúdo em abas abaixo.
Hero
Imagem full-bleed · altura ~160 px · back button flutuante com bg-black/50 · capa do disco ou avatar sobreposto na borda inferior
Tabs
Sticky abaixo do hero quando scroll passa · indicador border-b-2 border-[#C8F53C]
Seções de conteúdo
Metadados, faixas, avaliações, discos relacionados — em cards com rounded-2xl
Tela de formulário
Adicionar, editar. Shell com campos empilhados verticalmente e botão primário ao final do scroll (não fixo, para não competir com o teclado iOS).
Preview / contexto
Capa buscada do Discogs, avatar, ou ilustração — ancora o formulário ao objeto sendo criado
Campos
Empilhados com gap-4 · label + TextField · campos obrigatórios primeiro · ordem: o que o usuário sabe de cabeça antes do que precisa consultar
Botão CTA
Full-width Filled · último elemento do scroll · não fixo na tela para não sobrepor o teclado iOS
Onboarding / Auth
Login, Cadastro, Boas-vindas. Sem BottomNav. Logo centralizado no topo, campos no meio, CTA fixo na base. Container ainda usa fixed inset-0.
Logo + headline
Centralizado · espaço generoso acima (pt-16) · marca + slogan curto definem o contexto antes dos campos
Campos mínimos
Login: e-mail + senha. Cadastro: nome + e-mail + senha. Link "Esqueci senha" discreto abaixo dos campos.
CTA + link secundário
Full-width · position:fixed bottom com pb-safe · abaixo: "Não tem conta? Cadastrar" em texto pequeno