[TabNews] Exibir/Ocultar respostas e mais outras melhorias 🎉

Uma semana se passou desde a última publicação de melhorias e temos mais novidades sobre o TabNews.

Atualizadas todas as dependências do projeto

Todas as dependências foram atualizadas no PR #1319.

Corrige visualização de diagramas mermaid

A atualização do ByteMD, que é nosso editor e visualizador de markdown, trouxe correções importantes que permitem renderizar corretamente e com segurança diagramas como esses abaixo:

graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;

Que podem ser criados com o seguinte código:

```mermaid
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
```

A implementação foi realizada por mim no PR #1322.

Aceitar fórmulas matemáticas

Adicionei mais um plug-in do ByteMD e agora podemos aceitar equações matemáticas como a abaixo:

Que é criada com o código:

$$
\displaystyle \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
$$

A implementação foi realizada no PR #1323.

Compatibilidade do comando docker compose

Para executar a versão 2 do Docker Compose, conhecida como Compose V2, o comando utilizado é docker compose, ou seja, sem o hífen utilizado na V1.

Para quem possui o Docker Desktop nas últimas versões, um aliase foi criado para direcionar o comando docker-compose para a V2, portanto nenhuma medida precisa ser tomada, mas para quem não utiliza o Docker Desktop, deve-se utilizar o comando correto, de acordo com a versão do Compose instalada.

Para facilitar a vida dos contribuidores do TabNews, o @FabricioFFC modificou o script para ser capaz de utilizar qualquer dos dois comandos que estiver funcional.

Os detalhes podem ser vistos no PR #1315.

Remoção do botão duplicado no navegador Edge

O navegador Edge possui embutida a funcionalidade de mostrar o conteúdo oculto em campos de senha.

Já que implementamos essa funcionalidade no TabNews na semana passada, precisamos desativar a opção nativa do Edge para não mostrar dois botões juntos, como na imagem abaixo:

O @ermesonqueiroz notou o problema e realizou a correção.

Os detalhes podem ser conferidos no PR #1318.

Exclusão da página de login no histórico de navegação

Quando um usuário não está logado e tenta executar alguma operação que exige autenticação, automaticamente ele é redirecionado para a tela de login e retorna para onde estava assim que fornecer as credenciais.

Acontece que essa visita à página de login ficava no histórico do navegador e dificultava a navegação através do botão voltar, pois sempre que chegava na tela de login com o usuário já logado, ele era redirecionado novamente para frente.

Agora essa passagem pela página de login é excluída do histórico assim que o usuário é redirecionado de volta para a página que estava.

O problema foi notado por @hgsantana e solucionado por mim no PR #1321.

Esse mesmo PR foi aproveitado para excluir os arquivos da antiga página de sucesso de login.

Refatoração da função can no model authorization

Essa refatoração tornou a função muito mais entendível ao remover as recursividades, facilitando para quem precisar incluir qualquer nova verificação de permissões dos usuários.

O @eletroswing realizou essa refatoração e os detalhes podem ser vistos no PR #1312.

Logs do banco de dados

O @FabricioFFC deixou pronto o código que configura grupo de parâmetros do banco de dados na AWS para que sejam habilitados os registros de todas as consultas que demorarem mais do que 2 segundos.

parameter {
	name = "log_min_duration_statement"
	value = "2000"
}

O código já está mesclado, porém a habilitação no banco é um processo manual, e será realizado em outro momento.

Com esses logs teremos informações para poder otimizar as consultas menos performáticas.

Os detalhes podem ser vistos no PR #1316.

Ocultar/Exibir respostas

Quando há muitas interações em um conteúdo, os usuários podem querer ocultar algumas respostas para focar a leitura em outras.

Pensando nisso, o @renanmoraisdasilva mandou bem ao começar a implementação da funcionalidade de ocultar respostas, baseado no funcionamento do Reddit (PR #1299).

E relacionado a isso, conteúdos com muitos comentários podem ser pesados para alguns dispositivos. Para esses casos é melhor mostrar inicialmente apenas parte das respostas e deixar o usuário decidir se quer ver mais.

Então parti da inciativa do Renan e realizei a implementação da funcionalidade complementar, onde a publicação com muitas respostas já vem com parte delas ocultas e é possível exibir mais respostas, seja das que já vieram ocultas, seja das que o usuário decidiu ocultar.

Nada vai mudar na primeira renderização para a maioria dos conteúdos, mas para os que possuem muitas respostas, apenas uma parte deles será renderizada e o restante só será mostrada de poucas em poucas quando o usuário clicar em ver mais respostas.

Mas, para qualquer conteúdo, o usuário poderá ocultar respostas se achar necessário para facilitar sua leitura.

A implementação final foi realizada por mim, e os detalhes podem ser vistos no PR #1300, onde também foram implementadas as melhorias citadas a seguir.

Achatar árvore de respostas (mudança revertida)

Transformar sequência de respostas diagonal em vertical sempre que não houver duas respostas para uma anterior.

Isso é necessário para diminuir as chances de quebra do layout em conversas mais longas.

Vejam os exemplos de um caso mais comum e o outro mais extremo, em que ocorre a quebra do layout.

Antes	Depois

Quando existem duas respostas para uma mesma, então a bifurcação continua ocorrendo como antes.

As duas implementações anteriores são relacionadas com a issue #379, mas ainda existem pontos de melhoria tratados lá.

Tolerância a datas inválidas

Torna o componente PublishedSince tolerante a datas inválidas.

O componente que mostra que a publicação ocorreu há "X horas atrás" era a origem de uma quebra na interface que ocorria em algumas situações de conteúdos excluídos, onde a data passada para esse componente era undefined e ocorria a quebra pelo erro não tratado.

Por ser uma situação rara, foi apenas inserido um try catch para retornar uma string vazia quando a data for inválida.

Isso foi implementado no mesmo PR que implementou o ocultar/exibir conteúdos, pois esse erro (que não era diretamente relacionado) estava atrapalhando os testes de comportamento da interface em diferentes situações de exibição e de atualização da lista de conteúdos em segundo plano.

Aumento do gap dos links do footer

A funcionalidade de exibir/ocultar respostas exigiu alguns ajustes na interface para melhorar nossas pontuações no PageSpeed Insights.

A principal foi não mais comprimir horizontalmente os vários níveis de respostas como ocorria antes em telas pequenas.

Mas para chegar a 100% nos itens abaixo, faltava um pequeno ajuste no Footer que não tinha o espaçamento adequado na versão mobile, e isso já foi feito.

Conclusão

Turma, isso é só uma pequena parte da imensa quantidade de melhorias que estão por vir.

E já somos mais de 60 contribuidores 🤩🤩🤩