Pedro/melhorias

[pedrosilvaadev]

Contexto

Este PR melhora a experiência da listagem de vagas, especialmente em dispositivos móveis, além de adicionar informações e controles para facilitar a análise das oportunidades.

Principais alterações

Listagem de vagas

• Adiciona a coluna Publicada em, utilizando a data de publicação da própria vaga.
• Exibe Não informado quando a fonte não fornece essa data.
• Adiciona ordenação nas colunas:
  • Fonte
  • Nível
  • Publicada em
• Ajusta os cabeçalhos para sentence case, removendo o uppercase.
• Altera o título da primeira coluna para Cargo / empresa.
• Corrige a busca inicial para respeitar as preferências de modelo de trabalho do usuário.

Responsividade

• Adiciona uma tabbar inferior para navegação em dispositivos móveis.
• Mantém a sidebar apenas em telas desktop.
• Destaca automaticamente a aba correspondente à página atual.
• Adiciona suporte à safe area de dispositivos móveis.
• Compacta o header em telas menores.
• Mantém Perfil, Ajuda e Sair disponíveis pelo menu do usuário.
• Ajusta o grid de filtros para não ultrapassar a largura da tela:
  • 1 coluna no celular
  • 2 colunas em telas pequenas
  • 3 colunas em notebooks
  • Até 6 colunas em telas maiores

Detalhes da vaga

• Adiciona formatação para descrições recebidas como HTML codificado.
• Preserva elementos como:
  • Títulos
  • Parágrafos
  • Listas
  • Negrito e itálico
  • Links externos
• Remove scripts, imagens e outros elementos potencialmente inseguros.
• Evita a repetição da descrição na seção de payload da vaga.
• Mantém compatibilidade com descrições em texto simples.

Testes realizados

• Testes unitários dos componentes de vagas
• Testes dos componentes de layout
• Testes do adaptador da API
• Validação de descrições HTML codificadas
• Validação contra conteúdo HTML inseguro
• ESLint
• TypeScript dos arquivos alterados
• Build de produção do frontend

Como validar

1. Acessar a página de vagas em uma resolução mobile.
2. Confirmar que a sidebar foi substituída pela tabbar inferior.
3. Redimensionar a tela e verificar a quebra dos filtros em novas linhas.
4. Ordenar a tabela por Fonte, Nível e Publicada em.
5. Abrir uma vaga que possua descrição em HTML.
6. Confirmar que títulos, parágrafos, listas e links são apresentados formatados.
7. Confirmar que nenhuma tag HTML aparece como texto na descrição.