feat: UX overhaul + keyboard shortcuts, monthly charts, reports UI#41
Merged
Conversation
…rts, reports UI) Track 1 — Functional fixes: - Wire useKeyboardShortcuts into App.jsx (Space/R/F/B/L/Ctrl+D/Ctrl+T/?) - Keep Timer always mounted to preserve state across view changes - Add dbService.cycles.statsMonthly() and implement monthly bar chart in ProgressCharts - Create ReportsView component with date-range picker, generate/list/delete reports - Add Reports tab to Dashboard - Create KeyboardHelpModal with full shortcut reference Track 2 — UI/UX overhaul: - Add lucide-react; replace all emoji icons across every component - Add CSS design tokens (--surface-*, --border-*, --text-*) and utility classes (.card, .card-hover, .skeleton shimmer) - Extend Tailwind with text-2xs, slide-up/glow-pulse animations - Rebuild Navigation: SVG logo, w-16, active underline bar, dark tooltips, keyboard hint button - Timer: phase badge pill, text-6xl extralight countdown, circular icon buttons, ambient glow ring, separator stats - Dashboard: stats cards with lucide icons, underline tabs, mini daily bars, skeleton loading, phase icons (Brain/Coffee/Moon) - ProgressCharts: gradient bars, hover tooltip, Trophy/TrendingUp summary icons - Settings: NumberInput [−][n][+], refined toggles, card sections, compact layout - TagManager: pill tags with hover X, checkbox with Check icon, Flame pomodoro counter, on-hover delete - QuickNotes: character counter, typed icons per item, tag color pills - GitDetectModal: GitCommit icon header, refined spinner, dark card layout Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replace toast.innerHTML with interpolated user-controlled strings with safe DOM manipulation using createElement + textContent. The previous pattern allowed arbitrary HTML injection through the title/message params. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Resumo
Este PR cobre dois tracks de melhorias no CodeFocus:
Track 1 — Correções Funcionais
useKeyboardShortcuts): hook estava 100% implementado mas nunca importado. Agora conectado noApp.jsx—Space(toggle timer),R(reset),F/B/L(foco/pausa curta/longa),Ctrl+D/T(navegar),?(modal de atalhos).className="hidden"— preserva estado do timer ao navegar entre views e mantém o ref válido para os atalhos.ProgressChartsexibia"Em breve.". AdicionadodbService.cycles.statsMonthly()com query SQLite agrupando os últimos 28 dias por semana; view "Mês" agora funcional.ReportsView.jsx): seletor de data, tipo (semanal/personalizado), botão gerar, lista com score colorido (verde/amarelo/vermelho), delete por item, empty state descritivo. Nova aba "Relatórios" no Dashboard.KeyboardHelpModal.jsx): lista todas as shortcuts; acessível pelo botão?na Navigation e pela tecla?.Track 2 — UI/UX Overhaul
lucide-reactinstalado — todos os emojis usados como ícones substituídos por SVGs lucide em todos os componentes.globals.css: variáveis CSS--surface-*,--border-*,--text-*; classes utilitárias.card,.card-hover,.skeleton(animação shimmer). Tailwind expandido comtext-2xs,slide-up,glow-pulse.w-16, active bar lateral, tooltips dark estilo Linear, botão?no rodapé.text-6xl font-extralight, botões circulares com ícones lucide, glow ring pulsante quando rodando, quick stats com separador vertical..card+ícones, tabs underline-style, mini barras diárias no progress card, skeleton loading, ícones de fase (Brain/Coffee/Moon) nas atividades.from-indigo-600 to-indigo-400, hover tooltip, ícones Trophy/TrendingUp.NumberInputcomposto[−][n][+], toggles redesenhados, seções com.card, backdrop blur forte.<X>on-hover, checkbox com<Check>, pomodoro counter com<Flame>, delete on-hover.<GitCommit>, spinner refinado, layout darkened.Plano de teste
pnpm tauri dev— app abre sem erros de consoleSpaceinicia/pausa,Rreseta,F/B/Lmudam fase,Ctrl+Dabre Dashboard,?abre modal de atalhos.card, sem emojis🤖 Generated with Claude Code