Skip to content

[Design] Home page + lista de projetos #165

Closed

Description

@alltomatos

Parent

Épico: revisão visual dark-mode / Apple-like do OpenCode Desktop. Depende da fundação de tokens (#164).

What to build

Auditar e ajustar apenas visual/tokens, sem alterar comportamento, os seguintes arquivos:

  • pages/home/* (home.tsx, home-projects*.tsx, home-sessions*.tsx, legacy-home.tsx)

Passos:

  1. Revisar cada componente em light e dark mode usando os tokens --v2-* de packages/ui/src/v2/styles/theme.css (já corrigidos por [Design] Dark-mode token contrast pass — packages/ui/src/v2/styles/theme.css #164) — nenhum hex cru, apenas tokens semânticos.
  2. Aplicar refinamento estilo Apple HIG: hierarquia por peso/tamanho (não só cor), 1 CTA primário por tela, transições 150-300ms (ease-out ao entrar / ease-in ao sair), cantos e sombras usando a escala --v2-elevation-* existente (sem valores de shadow ad-hoc), focus ring visível em todo elemento interativo, scrim de modal 40-60% preto reservado para contexto de dismissal.
  3. Garantir que texto muted/faint, bordas e estados de hover/pressed permanecem legíveis nos dois temas (retestar após [Design] Dark-mode token contrast pass — packages/ui/src/v2/styles/theme.css #164).
  4. Verificar botões só-ícone têm aria-label, e que nenhuma informação é passada só por cor.

Acceptance criteria

  • Nenhuma mudança de comportamento/UX — apenas visual (cor, espaçamento, tipografia, elevação, motion)
  • Sem hex cru — só tokens --v2-* semânticos
  • Contraste de texto ≥4.5:1 (corpo) / ≥3:1 (grande, ícones, bordas) confirmado em light e dark
  • Estados de foco visíveis via teclado em todos os elementos interativos da página
  • Botões ícone-apenas têm aria-label
  • Testado manualmente em light e dark antes de abrir o PR

Blocked by

Verification

Screenshots antes/depois em light e dark mode desta página/superfície, anexados ao PR.

Activity

  1. added
    ui-uxUI/UX polish and consistency work
    ready-for-agentScoped and ready for an agent to pick up
    on Sep 9, 2026
  2. alltomatos commented on Sep 9, 2026

    @alltomatos
    OwnerAuthor

    Audited `pages/home/home-projects-view.tsx` and `pages/home/home-sessions-view.tsx` (the current v2 home screens) against the checklist in this issue and #164's token fix:

    • All colors already go through semantic `--v2-*` tokens — no raw hex found.
    • All icon-only buttons already have `aria-label` (`home.project.add`, `common.clearSearch`, `common.archive`, `common.moreOptions`, `command.session.new`, etc).
    • Transitions are already consistently 120-150ms with `ease-in-out`.
    • Borders/elevation already use `--v2-border-border-base` and `var(--v2-elevation-floating)` from the shared scale, not ad-hoc shadow values.

    These pages inherit the dark-mode contrast improvements from #164 automatically since they only reference tokens, not hardcoded colors — no separate code change needed here.

    `pages/home/legacy-home.tsx` (the pre-v2 home screen) was not touched: it uses an entirely different, older token set (`text-text-weak`, `bg-icon-success-base`, not `--v2-*`) and belongs to the legacy layout the project's own CLAUDE.md says not to invest further work in until epic #25 (legacy layout deprecation) progresses.

    Closing as verified/no-change-needed. Reopen if a manual pass in the desktop app surfaces something this static audit missed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    ready-for-agentScoped and ready for an agent to pick upui-uxUI/UX polish and consistency work

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions