Melhorias UI/UX no Frontend - Plano de Implementação

Para agentes: Use compose:execute ou compose:subagent para implementar este plano tarefa por tarefa.

Goal: Implementar 5 melhorias de UI/UX no frontend: hierarquia tipográfica, redundância de conteúdo, design de comentários, ações de interação e identidade visual de avatares.

Architecture: Modificações pontuais em componentes existentes (PostCard, CommentPreview, ReactionBar, MemberAvatar) seguindo padrões já estabelecidos no codebase.

Tech Stack: React, Tailwind CSS v4, shadcn/ui, Lucide icons

---

Task 1: Hierarquia Tipográfica no Post Principal

Covers: S1 (Melhoria 1 - Hierarquia Tipográfica)

Files:

• Modify: frontend/src/components/circle/PostCard.tsx:211-224

• [ ] Step 1: Atualizar contraste do texto do corpo

Mudar text-foreground/90 para text-foreground no div do corpo do post para melhorar contraste (WCAG):

// Linha 212 - Antes:
className={`mt-4 text-sm leading-relaxed text-foreground/90 space-y-3 ${expanded ? "" : "max-h-48 overflow-hidden relative"}`}

// Depois:
className={`mt-4 text-sm leading-relaxed text-foreground space-y-3 ${expanded ? "" : "max-h-48 overflow-hidden relative"}`}

• [ ] Step 2: Alinhar cor do botão "See more" com a paleta primária

O botão já usa text-primary que é correto. Nenhuma alteração necessária - verificar se a cor está consistente.

• [ ] Step 3: Commit

git add frontend/src/components/circle/PostCard.tsx
git commit -m "fix: improve post body text contrast for WCAG accessibility"

---

Task 2: Redundância de Conteúdo (Título vs Corpo)

Covers: S2 (Melhoria 2 - Redundância de Conteúdo)

Files:

• Modify: frontend/src/components/circle/PostCard.tsx:120-224

• [ ] Step 1: Analisar fonte dos dados do post

O campo post.body é um ReactNode passado como prop. A redundância pode estar na transformação dos dados antes de chegar ao componente. Verificar onde PostCard é usado.

• [ ] Step 2: Adicionar lógica para posts curtos

Se o post for curto (pouco conteúdo), exibir apenas o corpo completo sem o botão "See more":

// Adicionar após linha 98 (const hiddenCommentCount):
const isShortPost = !post.body || (typeof post.body === 'string' && post.body.length < 300);

// Na linha 219, condicionar o botão:
{!isShortPost && (
  <button
    onClick={() => setExpanded((e) => !e)}
    className="text-sm text-primary hover:underline mt-3 font-medium"
  >
    {expanded ? "Show less" : "See more"}
  </button>
)}

• [ ] Step 3: Commit

git add frontend/src/components/circle/PostCard.tsx
git commit -m "fix: hide See more button for short posts to reduce redundancy"

---

Task 3: Design dos Comentários e Alinhamento

Covers: S3 (Melhoria 3 - Design dos Comentários)

Files:

• Modify: frontend/src/components/circle/CommentPreview.tsx:28,75

• Modify: frontend/src/components/circle/PostCard.tsx:292

• [ ] Step 1: Reduzir border-radius dos comentários

Mudar rounded-xl para rounded-lg nos balões de comentários:

// CommentPreview.tsx linha 28 (ReplyRow):
// Antes:
<div className="bg-card rounded-xl px-3 py-2 border border-border">
// Depois:
<div className="bg-card rounded-lg px-3 py-2 border border-border">

// CommentPreview.tsx linha 75 (CommentPreview):
// Antes:
<div className="bg-card rounded-xl px-3 py-2 border border-border">
// Depois:
<div className="bg-card rounded-lg px-3 py-2 border border-border">

• [ ] Step 2: Reduzir gap entre avatar e comentário

// CommentPreview.tsx linha 72:
// Antes:
<div className="flex items-start gap-2.5">
// Depois:
<div className="flex items-start gap-2">

// ReplyRow linha 25 já usa gap-2, manter consistente

• [ ] Step 3: Atualizar skeleton loading para consistência

// PostCard.tsx linha 292:
// Antes:
<div className="flex-1 space-y-1.5 bg-card rounded-xl px-3 py-2 border border-border">
// Depois:
<div className="flex-1 space-y-1.5 bg-card rounded-lg px-3 py-2 border border-border">

• [ ] Step 4: Commit

git add frontend/src/components/circle/CommentPreview.tsx frontend/src/components/circle/PostCard.tsx
git commit -m "style: reduce comment border-radius and gap for cleaner forum layout"

---

Task 4: Ações de Interação e Cores de Reação

Covers: S4 (Melhoria 4 - Ações de Interação)

Files:

• Modify: frontend/src/components/circle/ReactionBar.tsx:59,61

• [ ] Step 1: Padronizar ícone de reação

O ReactionBar já usa Heart (coração) como ícone padrão. Quando curtido, mostra o emoji escolhido. Esta implementação está correta.

• [ ] Step 2: Ajustar cor do estado ativo

Mudar text-rose-400 para usar a cor primária do tema para consistência:

// ReactionBar.tsx linha 59:
// Antes:
className={`${buttonSize} grid grid-flow-col items-center gap-1.5 rounded-md hover:bg-accent transition disabled:opacity-50 ${liked ? "text-rose-400" : ""}`}

// Depois:
className={`${buttonSize} grid grid-flow-col items-center gap-1.5 rounded-md hover:bg-accent transition disabled:opacity-50 ${liked ? "text-primary" : ""}`}

• [ ] Step 3: Commit

git add frontend/src/components/circle/ReactionBar.tsx
git commit -m "fix: use theme primary color for active reaction state"

---

Task 5: Consistência de Identidade Visual nos Avatares

Covers: S5 (Melhoria 5 - Identidade Visual dos Avatares)

Files:

• Modify: frontend/src/components/ui/app/member-avatar.tsx:5-12

• [ ] Step 1: Expandir paleta de cores dos avatares

Adicionar mais gradientes para maior variabilidade visual:

// member-avatar.tsx linhas 5-12:
const GRADIENTS = [
  "from-violet-500 to-fuchsia-500",
  "from-sky-500 to-cyan-500",
  "from-amber-500 to-orange-500",
  "from-emerald-500 to-teal-500",
  "from-rose-500 to-pink-500",
  "from-indigo-500 to-blue-500",
  "from-lime-500 to-green-500",
  "from-fuchsia-500 to-purple-500",
  "from-orange-500 to-red-500",
  "from-teal-500 to-cyan-500",
  "from-blue-500 to-indigo-500",
  "from-pink-500 to-rose-500",
];

• [ ] Step 2: Melhorar hash para distribuição uniforme

O hash atual já é uniforme. Nenhuma alteração necessária.

• [ ] Step 3: Commit

git add frontend/src/components/ui/app/member-avatar.tsx
git commit -m "feat: expand avatar gradient palette for better visual variety"

---

Resumo das Alterações

Melhoria	Arquivo	Mudança Principal
1. Hierarquia Tipográfica	PostCard.tsx	Aumentar contraste do texto
2. Redundância	PostCard.tsx	Esconder "See more" para posts curtos
3. Comentários	CommentPreview.tsx, PostCard.tsx	Reduzir border-radius e gap
4. Reações	ReactionBar.tsx	Usar cor primária para estado ativo
5. Avatares	member-avatar.tsx	Expandir paleta de cores

Verificação

Após implementação, testar:

1. Posts longos vs curtos - botão "See more" aparece corretamente
2. Comentários - border-radius menor, layout mais limpo
3. Reações - cor consistente com tema
4. Avatares - cores variadas para usuários diferentes