Componentes

Navegação

Bottom Navigation com 5 itens: 4 tabs (Início, Feed, Coleção, Perfil) e um FAB central de adição. Ativo em branco, inativo em cinza com opacity-40.

Visão geral

Spinlist
Início
Feed
Coleção
A
Perfil

Anatomia

Spinlist
1
3
Início
2
Feed
4
Coleção
5
A
Perfil
1

Container

fixed bottom-0 inset-x-0 bg-[#0f0f0f] border-t border-[#1a1a1a] pb-safe z-20

2

Tab item

flex flex-col items-center gap-1 flex-1 · ícone 22×22 + label 9px · tap target 48×48

3

Estado ativo

Ícone stroke="#f5f5f5" + label text-[#f5f5f5]. Sem underline ou ponto — cor é o único diferenciador.

4

FAB de adição

bg-[#C8F53C] rounded-[14px] w-12 h-10 · ícone + stroke="#0f0f0f" · sem label · abre fluxo de Adicionar disco

5

Tab de Perfil

Avatar do usuário logado (não ícone Lucide) · w-[22px] rounded-full · label exibe display_name truncado

Itens

Início
Lucide Home. Destino: tela Home com Feed dos seguidos e destaques.
Feed
Lucide AlignLeft. Feed global de postagens recentes de toda a comunidade.
+ Adicionar
FAB central. Abre o fluxo de adição de disco. Não é uma tab de navegação — não tem rota própria nem label.
Coleção
Lucide Grid2x2. Coleção pessoal do usuário logado + Listas.
Perfil
A
Avatar do usuário logado (não ícone Lucide). Label exibe display_name truncado. Destino: Perfil, seguidores e notificações.

Badge de notificação

A
3
com contagem
A
apenas ponto

Badge com número

absolute -top-1 -right-1.5 w-4 h-4 bg-[#C8F53C] text-[#0f0f0f] text-[9px] font-bold rounded-full flex items-center justify-center

Badge ponto

absolute top-0 right-0 w-[9px] h-[9px] bg-[#C8F53C] rounded-full border-[1.5px] border-[#0f0f0f]

Estados

Ativo
Início
stroke="#f5f5f5" · text-[#f5f5f5] font-semibold · sem opacity modifier
Inativo
Feed
opacity-40 no container do item · stroke="#888" · text-[#888]
Pressed
Coleção
active:opacity-60 — feedback tátil no toque
FAB pressed
active:bg-[#a8cf1e] — verde ligeiramente mais escuro no toque

Do / Don't

Início
Feed
Coleção
A
Perfil
Faça Sempre ícone + label em todas as tabs. FAB central sem label — sua forma e cor são auto-explicativas.
Evite Tabs sem label dependem de memória muscular. Usuários novos não sabem o destino de cada ícone.

FAB abre modal/sheet de adição

Não navega para uma rota fixa

Faça O FAB dispara uma ação (sheet de Adicionar disco). Não é um destino de navegação.

FAB navega para /adicionar

FAB fica ativo como tab

Evite Tratar o FAB como tab cria estado ativo no centro da nav e quebra a hierarquia visual.

Specs

PropriedadeValor
Posiçãofixed bottom-0 inset-x-0
Background#0f0f0f
Border top1px solid #1a1a1a
Paddingpy-2 px-3
Padding bottompb-safeenv(safe-area-inset-bottom)
z-indexz-20
Ícone das tabsLucide · 22×22 px · stroke 2
Label das tabstext-[9px] font-medium (ativo: font-semibold)
Tab ativastroke="#f5f5f5" text-[#f5f5f5] · sem opacity
Tab inativastroke="#888" text-[#888] opacity-40
Avatar (Perfil)w-[22px] h-[22px] rounded-full
FAB background#C8F53C · pressed: #a8cf1e
FAB dimensõesw-12 h-10 rounded-[14px] (48×40px)
FAB ícone+ Lucide · 22×22 · stroke="#0f0f0f" · strokeWidth 2.5
Badge (notificação)w-4 h-4 bg-[#C8F53C] text-[#0f0f0f] rounded-full text-[9px] font-bold