[Design] Shell do app — sidebar e layout #169

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/layout.tsx, pages/layout-new.tsx
• pages/layout/* (app-project-sidebar, inline-editor, session-tab-avatar, sidebar-items, sidebar-project, sidebar-shell, sidebar-workspace) — exceto dialog-workspace-actions.tsx, coberto na leva de modais

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.

Nota: conforme CLAUDE.md, pages/layout.tsx não deve ser dividido em arquivos menores antes do épico #25 avançar — esta issue é só ajuste visual/tokens, não split de arquivo, então não conflita com essa regra.

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

• [Design] Dark-mode token contrast pass — packages/ui/src/v2/styles/theme.css #164

Verification

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