O app por dentro: navegação, sino, mensagens e sync

Onde: o container do app (topo + abas)

Visão geral

O app é organizado em 5 abas na barra inferior, com uma barra no topo (a organização, mensagens, notificações e o cronômetro) e camadas flutuantes (cronômetros, folhas, celebrações). Esta página é o mapa de navegação — onde fica cada coisa.

Quando usar

• Para se localizar: achar o sino, as mensagens, o tema, e entender por que umas telas “sobem” por cima.

Pré-requisitos

• Estar logado (Cap. 1).

Passo a passo (por região)

As 5 abas (barra inferior)

Aba	O que é
Hoje	o treino do dia (Cap. 3)
Programas	sua matrícula + catálogo (Cap. 8)
Agenda	as provas e os eventos da temporada — quanto falta para a próxima (Cap. 6)
Progresso	PRs, aderência, volume (Cap. 7)
Perfil	conta, estatísticas e preferências (Cap. 10)

Nota

o Perfil é a única aba que não é um símbolo: é a sua foto, num quadrado no fim da barra. Sem foto, o quadrado mostra as suas iniciais, do mesmo tamanho e no mesmo lugar. Quando a aba está ativa, o quadrado ganha um filete em volta.

Nota

o cronômetro livre também mora em Perfil › Ajustes › Cronômetro e sessão, onde o botão Abrir o cronômetro o chama — na mesma porta que já guardava os ajustes dele (Cap. 4.10). Ele voltou a ter o botão preenchido da ponta direita: com as Aulas fora do ar, o check-in que o tinha herdado não tem aula para confirmar.

A barra do topo

É uma placa só, de canto vivo, dividida por filetes finos em quatro partes lado a lado, todas da mesma altura:

• A marca do app e a organização, à esquerda, ocupando o espaço que sobra: o A do Atleta num quadrado — o mesmo símbolo do ícone que você toca para abrir o app —, o nome da organização e, embaixo, a frase da organização, a linha de identidade que o coach cadastrou (sem ela, o nome fica sozinho). Encostada na borda direita dessa mesma parte, de cima a baixo, fica a barra de sincronização (ver abaixo) — ela informa, não é botão: o nome do estado aparece ao segurar o toque, e é o que o leitor de tela anuncia. Toque no resto para abrir o cartão Sua organização.
• Mensagens — a conversa com o coach, com o número de não-lidas num selo quadrado (acima de nove, 9+) (Cap. 9).
• Notificações — o sino, com um ponto quadrado quando há não-lidas (Cap. 9).
• Cronômetro, fechando a placa à direita: o único botão preenchido da barra. Ele abre o cronômetro livre (Cap. 4.10).

Cuidado

enquanto as Aulas estiverem fora do ar, este botão é o cronômetro. Quando elas voltarem, ele volta a ser o Estou aqui — o check-in da aula que está para começar (Cap. 14).

Em tela estreita quem encurta é o texto — primeiro a frase da organização, depois o nome dela. Os três botões não mudam de tamanho: a barra nunca se desmonta, e nenhum alvo fica menor que o polegar.

📐 Regra de negócio

a placa tem quatro partes e continua com quatro. Aulas ia ganhar uma quinta, e ela foi medida antes de entrar: com cinco botões sobram 23 pixels para o nome da organização num telefone de 320 px — “CrossFit Impacto” viraria “C…”. A porta das Aulas ficava onde ela é sobre o assunto: dentro do Hoje, na linha da sua aula do dia — e é ela que sai do ar junto com a grade.

📸 Screenshot pendente

a placa do topo, com a marca do app e a organização à esquerda e o botão preenchido do cronômetro fechando à direita.

Ela não fica travada. A barra do topo rola junto com a página: ao descer, sai da tela; ao puxar um pouco para cima, volta. Vale para todas as abas. A tela é do treino — a moldura só aparece quando você pede.

A tela de abertura

Ao abrir o app, enquanto ele confirma a sua sessão, a marca se monta: quatro traços que crescem até formar o A. Numa abertura “quente” ela passa num piscar; numa fria (servidor esquentando) ela segura até o app entrar, e aí o nome da sua organização aparece ao lado da palavra Carregando. Não é uma etapa que dá para pular, e não indica erro. Ver Cap. 1.

Camadas flutuantes & sub-telas

📐 Regra de negócio

algumas telas sobem por cima da aba atual em vez de trocar de aba — Detalhe, Registro e Feedback são sub-telas; o cronômetro de sessão e o de bloco flutuam sobre tudo.

• Sub-telas (Detalhe/Registro/Feedback): abrem sobre a aba e voltam com o botão de voltar.
• Flutuantes: cronômetro de sessão, cronômetro de bloco, cronômetro livre, celebrações (PR/conclusão), o wizard de registro e o toast de aviso.

No desktop (a partir de 1024px)

Vira sidebar (logo + as seções, com o Perfil ainda na lista — no desktop sobra espaço, e ele não precisou sair — + card da organização/coach) + uma toolbar (dia, sync, mensagens, notificações) e a área principal. Mesmas funções, layout largo. Detalhes no Cap. 11.

Tema, unidade e idioma

Ficam no Perfil: tema (claro/escuro), unidade (kg/lb) e idioma (pt-BR…). Ver Cap. 10.

Na primeira vez que você abre, o app segue o seu aparelho: se o celular está no modo escuro, ele abre escuro; se está no claro, abre claro. A partir do momento em que você escolhe um tema no Perfil, a sua escolha passa a valer sempre — o aparelho não manda mais.

O tema vale no app inteiro: no claro, a abertura, o login, o Hoje, o Detalhe, o registro e os Programas são claros do começo ao fim — nenhum cartão preto no meio. O destaque não é mais uma cor: o que está escolhido (o dia na trilha, o botão de iniciar, a aba aberta) fica com campo cheio de tinta e texto invertido. O app gasta exatamente três cores, e cada uma tem um dono: vermelho é erro, verde é resultado salvo, azul é sistema (sincronização, seleção, progresso). Aviso não tem cor: ele vem hachurado. O cronômetro é a exceção — ele tem cor própria por fase: ver Cap. 4.3.

Estados de sincronização

Uma barra fina, na altura inteira da célula da organização. Ela muda de forma, não só de cor — quem não enxerga cor lê os dois estados do mesmo jeito —, e o nome exato está sempre lá para o leitor de tela.

A barra	O que significa
inteira, em azul	a linha está viva: Sincronizado, Sincronizando ou Salvo
partida em três, apagada	Offline — sem rede. O shell e o cache podem abrir, mas API e registros aguardam conexão

Qual dos três estados vivos é o atual vem no toque longo e no leitor de tela: Sincronizado, Sincronizando, Salvo.

Nota

ela era um ícone dentro do texto — um círculo de confirmação, setas, nuvem, nuvem cortada. Quatro desenhos disputando atenção com o nome da organização, para dizer uma coisa que quase nunca muda. Uma barra na periferia da visão diz o mesmo sem competir: você não a lê, você nota quando ela quebra.

📐 Regra de negócio

azul é o matiz do sistema no app (sincronização, seleção, progresso). Mas matiz nunca viaja sozinho: por isso offline é uma barra partida, e não só uma barra cinza.

Dicas

Dica

o ponto no sino e o número nas mensagens são o jeito rápido de saber que o coach te mandou algo — feedback ou recado.

Erros comuns / troubleshooting

• “Abri o Detalhe e sumiu a barra de abas.” — É uma sub-tela (sobe por cima). Use voltar para retornar à aba.
• “Cadê o Perfil?” — É a sua foto, o quadrado no fim da barra de abas.
• “Cadê o Timer?” — No botão preenchido, na ponta direita da barra do topo.
• “Aparece ‘offline’.” — Sem rede. Conteúdo já carregado pode continuar visível, mas o app não inventa dados nem garante fila de registros; confira a confirmação do servidor quando a conexão voltar.

O que o coach vê

O sino e as mensagens são as duas pontas da comunicação com o coach: pelo sino chegam o feedback e os avisos dele; pelas mensagens vocês conversam (Cap. 9).