[TabNews] Dark Mode e novas funcionalidades do editor 🎉

Duas semanas se passaram desde a última publicação de novidades, e nisso foi implementado um dos recursos mais pedidos pelos usuários, mas não foi só ele.

Redirecionamento após login

Agora sempre vai ocorrer um redirecionamento de volta para página de origem após o usuário efetuar login.

Antes isso só ocorria quando o usuário tentava fazer uma publicação, ou votar em algum conteúdo, sem estar logado. Nessa situação ele era direcionado para o login e depois voltava para onde estava.

Agora ele também vai voltar para a página em que estava mesmo que tenha navegado para o login por conta própria. O fallback é a página inicial do TabNews.

Essa foi uma sugestão do @rafatcb que começou a ser colocada em prática pelo @jgbispo e foi concluída por mim. Os detalhes estão no PR #1340.

Mostrar metadados corretos no navegador

Foi refatorado o infra/webserver para expor variáveis acessíveis no lado do client e com isso permitir mostrar corretamente os metadados no navegador. Para isso foi acrescido NEXT_PUBLIC aos nomes das variáveis de ambiente que podem ser acessadas pelo client.

Todas as funções foram transformadas em constantes e foram ajustados alguns de seus nomes.

A refatoração foi realizada por mim. Mais detalhes estão no PR #1228.

Tooltip nos botões de qualificação de conteúdos

Para deixar um pouco mais claro para novos usuários o significado dos botões de qualificação, foi inserido um Tooltip com os dizeres "Achei relevante" e "Não achei relevante".

A implementação foi realizada pelo @PauloIVM. Os detalhes estão no PR #1277.

Desabilitado o achatamento da árvore de respostas

Uma das mudanças anunciadas na última publicação sobre novidades foi o achatamento da árvore de respostas quando não houvesse bifurcação. Essa medida era um passo em direção de resolver o problema de responsividade que ocorre com árvores profundas.

Sempre que a árvore era achatada estava sendo garantida a ordem cronológica das respostas para permitir acompanhar uma conversa, mas o feedback dos usuário foi de que não estava sendo possível entender para quem era a resposta, então essa alteração foi revertida pelo menos até que uma solução mais completa seja definida na issue #379 que trata do assunto.

E o tão pedido modo escuro, quando chega???

Enfim chegou:

Foi o resultado de diversos colaboradores, que abriram diferentes PRs com propostas de implementação, além da turma que comentou nesses PRs sugerindo soluções para os problemas que eles continham. Nem vou tentar citar todos pelo risco de deixar alguém de fora, pois acredito que esse foi o problema que envolveu a maior turma por enquanto, mesmo que alguns trabalhando isoladamente.

A maior dificuldade era manter as páginas estáticas em cache e mesmo assim renderizar de primeira para o usuário o tema escolhido sem mostrar a transição.

A solução para isso foi executar um script que torna o conteúdo invisível antes da primeira renderização e mostrar a página apenas após a definição do tema correto. E isso é feito apenas no navegador, então não é para afetar o SEO e não impede o funcionamento da página mesmo com o JavaScript desabilitado.

A implementação atual foi realizada por mim. Os detalhes estão no PR #1348.

Chaveadores de temas

Para auxiliar na nova funcionalidade foram criados duas versões de chaveadores de temas, uma que aparece no menu para usuários logados e outra que aparece no header para usuários anônimos.

Com essa adição ao header foi necessário mudar os links para a versão mobile. Os links para "Login" e "Cadastrar" viraram apenas um "Entrar" que vai para a página de login, e na página de login já existe o link para a página de cadastro.

Nova visualização do editor de markdown

No PR que implementa o modo escuro eu aproveitei para estilizar o editor ByteMD de maneira que pudéssemos habilitar algumas de suas funcionalidades, mas mantendo a padronização atual do TabNews.
Com isso agora nós temos:

• Botões de ferramentas que ajudam aos usuários menos familiarizados com markdown;
• Possibilidade de dividir o editor ao meio e visualizar o preview ao mesmo tempo em que escreve;
• Possibilidade de redimensionar o campo de texto (em complemento à já presente possibilidade de ver o editor em tela cheia).

Lembrando que os editores de markdown que permitem a escrita de códigos de programação não são 100% adaptados para dispositivos móveis, então a experiência em desktop para essas novas funcionalidades também será melhor.

Cores 🌈

Apesar de não haver praticamente nenhuma mudança nas cores do tema claro do TabNews, muitas delas precisaram de ajustes para usarem variáveis do Primer que fizessem sentido ao alternar para o tema escuro.

Acho que a única alteração de cor foi a dos campos de texto que agora possuem um pouco de contraste com relação ao restante.

Já o editor e visualizador de markdown, que não é da biblioteca Primer, precisou que cada cor utilizada fosse convertida para alguma variável do Primer para facilitar quaisquer futuras mudanças ou adições de temas.

E no lado contrário estão as cores dos ícones de TabCoins e TabCash, que utilizavam variáveis do Primer, mas que agora foram fixadas para manter sempre a mesma cor independentemente do tema selecionado.

Outras alterações

• Refatoração de boa parte das importações dentro dos arquivos da UI;
• Ajustes das caixas de texto que ficavam com uma sobreposição das bordas quando era utilizado o autopreenchimento.
• Aumento no tempo limite para estabelecer conexão com o banco de dados, pois em homologação esse tempo de vez em quando era atingido, já que existe uma latência maior do que o banco de produção.

Conclusão

Está sendo muito gratificante participar da evolução das ideias, das funcionalidades e das pessoas que estão colaborando com o TabNews. Independentemente do nível de experiência técnica, ou de habilidades interpessoais de cada um, eu sinto que todos estamos crescendo muito juntos. 🚀