Feat: implement Problems feature with frontend UI refactoring - #10
Merged
Conversation
…h associated API hooks, UI components, and state management
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI (base), Organization UI (inherited) Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (11)
🚧 Files skipped from review as they are similar to previous changes (7)
📝 WalkthroughWalkthroughA atualização adiciona suporte completo a problemas e tags, reorganiza o workspace de projetos, substitui confirmações nativas por modais assíncronos, introduz auto-resize em textareas e implementa abertura e fechamento controlados da sidebar. ChangesGerenciamento do workspace
Estimated code review effort: 5 (Critical) | ~120 minutes Sequence Diagram(s)sequenceDiagram
participant ProjectDetailView
participant ProblemForm
participant useProblems
participant problemsApi
participant API
ProjectDetailView->>ProblemForm: abre criação ou edição
ProblemForm->>useProblems: envia dados do problema
useProblems->>problemsApi: executa mutação
problemsApi->>API: envia requisição REST
API-->>problemsApi: retorna problema atualizado
problemsApi-->>ProjectDetailView: invalida e atualiza queries
Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
Comment |
…ate terminology in project detail view
MathCunha16
marked this pull request as ready for review
July 21, 2026 09:58
MathCunha16
added
enhancement
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/src/components/DashboardView.tsx (1)
96-165: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winSepare as ações do card do
LinkO
Linkdo@tanstack/react-routerrenderiza um<a>por padrão, então Archive/Delete/Manage ficam aninhados em uma âncora. Mova esses botões para fora doLinke deixe nele só a área de navegação do card.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/components/DashboardView.tsx` around lines 96 - 165, Separate the card actions from the `@tanstack/react-router` Link in the project card rendering: keep only the navigational card content inside the Link, and move the Archive, Delete, and Manage buttons outside it while preserving their existing handlers, styling, and disabled state.
🧹 Nitpick comments (1)
frontend/src/components/ProjectDetailView.tsx (1)
798-869: 📐 Maintainability & Code Quality | 🔵 Trivial | 🏗️ Heavy liftPopover de gerenciamento de tags duplicado entre snippets e problemas.
Este bloco (filtro, lista filtrada e botão "Create") é praticamente idêntico ao das linhas 1220-1291 do detalhe de problemas. Extrair um componente compartilhado (ex.:
<TagManager>) recebendoitemId,itemType,tagse os handlers (handleAddTag/handleRemoveTag/handleCreateAndAddTag) evita divergência futura entre os dois fluxos e reduz a superfície do componente.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/components/ProjectDetailView.tsx` around lines 798 - 869, Extraia o popover duplicado de gerenciamento de tags usado em snippets e problemas para um componente compartilhado, como TagManager, recebendo itemId, itemType, tags e os handlers de adicionar, remover e criar tags. Substitua os blocos correspondentes, incluindo o filtro, a lista e o botão de criação, mantendo o comportamento atual e reutilizando o componente nos dois fluxos.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/components/ConfirmModal.module.css`:
- Around line 22-26: Rename the `@keyframes` identifier modalIn to kebab-case such
as modal-in, and update the animation declaration referencing it so both names
remain consistent.
In `@frontend/src/components/ConfirmModal.tsx`:
- Line 35: Update the ConfirmModal overlay’s onClick behavior to call onClose
only when !isLoading, preventing backdrop dismissal during deletion while
preserving normal closing when loading is complete.
- Around line 34-41: Atualize o componente ConfirmModal para usar role="dialog",
aria-modal="true" e um rótulo acessível associado ao título. Ao abrir, mova e
mantenha o foco dentro do modal, impedindo que o teclado alcance o conteúdo de
fundo; ao fechar ou desmontar, restaure o foco ao elemento que o acionou.
In `@frontend/src/components/RootLayout.tsx`:
- Around line 56-58: Update the sidebar wrapper in RootLayout to add
inert={!isOpen}, so closed sidebar content is removed from keyboard navigation
and the accessibility tree while preserving the existing className behavior.
In `@frontend/src/features/problems/components/ProblemForm.module.css`:
- Around line 24-27: Renomeie a animação modalEnter para o formato kebab-case
exigido pelo Stylelint, atualizando tanto a referência na propriedade animation
quanto o identificador correspondente em `@keyframes`; preserve os demais
parâmetros da animação.
In `@frontend/src/features/problems/components/ProblemForm.tsx`:
- Around line 79-145: Associate every label in ProblemForm with its control by
adding stable, unique id values to the title input, severity and status selects,
errorDescription textarea, and solution textarea, then set each corresponding
label’s htmlFor to the matching id. Preserve the existing form behavior and
styling.
- Line 208: Atualize o fluxo de edição em torno de ProblemForm e useProblemQuery
para impedir a renderização do formulário enquanto os dados do problema ainda
estão carregando. Exiba um estado de carregamento e trate o erro antes de montar
ProblemFormInner, ou configure useProblemQuery para usar uma query suspensiva;
preserve a inicialização de initialValues somente após problem estar disponível.
- Around line 211-218: Atualize o fluxo de submissão em handleSubmit para
persistir também o status selecionado no EditProblemFormModal, usando a mutação
ou endpoint de status já existente em vez de incluí-lo em UpdateProblemRequest.
Se a edição de status não for suportada, remova o seletor correspondente e evite
apresentar uma alteração que não será salva.
---
Outside diff comments:
In `@frontend/src/components/DashboardView.tsx`:
- Around line 96-165: Separate the card actions from the `@tanstack/react-router`
Link in the project card rendering: keep only the navigational card content
inside the Link, and move the Archive, Delete, and Manage buttons outside it
while preserving their existing handlers, styling, and disabled state.
---
Nitpick comments:
In `@frontend/src/components/ProjectDetailView.tsx`:
- Around line 798-869: Extraia o popover duplicado de gerenciamento de tags
usado em snippets e problemas para um componente compartilhado, como TagManager,
recebendo itemId, itemType, tags e os handlers de adicionar, remover e criar
tags. Substitua os blocos correspondentes, incluindo o filtro, a lista e o botão
de criação, mantendo o comportamento atual e reutilizando o componente nos dois
fluxos.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: 59ec2fd9-b5a2-4563-9f14-f0aabbaf31d3
📒 Files selected for processing (18)
frontend/src/components/ConfirmModal.module.cssfrontend/src/components/ConfirmModal.tsxfrontend/src/components/DashboardView.tsxfrontend/src/components/ProjectDetailView.tsxfrontend/src/components/RootLayout.tsxfrontend/src/contexts/SidebarContext.tsxfrontend/src/features/problems/api/problemsApi.tsfrontend/src/features/problems/components/ProblemForm.module.cssfrontend/src/features/problems/components/ProblemForm.tsxfrontend/src/features/problems/hooks/useProblems.tsfrontend/src/features/projects/components/ProjectForm.module.cssfrontend/src/features/projects/components/ProjectForm.tsxfrontend/src/features/tags/api/tagsApi.tsfrontend/src/features/tags/hooks/useTags.tsfrontend/src/hooks/useAutoResize.tsfrontend/src/routes/__root.module.cssfrontend/src/routes/projects.$projectId.module.cssfrontend/src/types/api.ts
This was referenced Jul 21, 2026
This was referenced Jul 30, 2026
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.
This pull request introduces several UI and architectural improvements to the frontend, focusing on enhanced modal experiences, sidebar state management, and code organization. The main highlights include the addition of a reusable confirmation modal, a new sidebar context for managing open/close state with smooth transitions, and the extraction of the problems API. Some legacy UI elements and hardcoded status bars have been removed to streamline the interface.
UI/UX Improvements
ConfirmModalcomponent with modern styling and integrated it into the project deletion flow, replacing the browser's default confirmation dialog for a better user experience. (frontend/src/components/ConfirmModal.tsx,frontend/src/components/ConfirmModal.module.css,frontend/src/components/DashboardView.tsx) [1] [2] [3] [4] [5] [6]frontend/src/features/problems/components/ProblemForm.module.css)frontend/src/components/DashboardView.tsx,frontend/src/components/RootLayout.tsx) [1] [2]Sidebar Architecture & Responsiveness
SidebarContextwith a provider and hook to manage sidebar open/close state application-wide, and refactored the sidebar to use this context for smooth transitions and a "wall-hugging" toggle button. (frontend/src/contexts/SidebarContext.tsx,frontend/src/components/RootLayout.tsx) [1] [2] [3] [4]frontend/src/components/RootLayout.tsx)Code Organization
frontend/src/features/problems/api/problemsApi.ts)Summary by CodeRabbit
Novos Recursos
Melhorias de Interface