Soley UI improvements#64
Conversation
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 14 minutes and 52 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThis PR implements UI improvements and adds patient case status notifications. Changes include: a new "Case updated" notice in case details, status column in case list with conditional rendering, updated login/register layouts with semantic HTML structure, comprehensive CSS styling enhancements with new variables and responsive design, navigation structure adjustment, and descriptive text updates across multiple templates. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (1)
src/main/resources/templates/login/login.html (1)
31-40: Use email and password-manager semantics for patient login.The username field is labeled as Email but uses
type="text". Usetype="email"and add autocomplete hints for a smoother login flow.💡 Proposed form-field refinement
- <input type="text" id="username" name="username" class="input" required autofocus> + <input type="email" id="username" name="username" class="input" autocomplete="username" required autofocus> ... - <input type="password" id="password" name="password" class="input" required> + <input type="password" id="password" name="password" class="input" autocomplete="current-password" required>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/main/resources/templates/login/login.html` around lines 31 - 40, Update the login form inputs to use proper email and password-manager semantics: change the username input (id="username", name="username") from type="text" to type="email" and add autocomplete="email"; keep the password input (id="password", name="password") as type="password" and add autocomplete="current-password" so browsers and password managers can autofill correctly; ensure the form's th:action and submit behavior remain unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@src/main/java/org/example/projektarendehantering/presentation/rest/PatientController.java`:
- Line 17: Remove the unprofessional inline comment found in the
PatientController class header (the remark about "Adding more wierd stuff...
rabbit rate limits"); open the PatientController class (symbol:
PatientController) and delete that comment, then optionally replace it with a
short, relevant Javadoc or remove entirely so only meaningful documentation
remains and ensure no other stray meta-comments exist in the class.
In `@src/main/resources/templates/cases/detail.html`:
- Around line 17-20: The template currently prints raw enum values via
case.status which shows internal codes; update the rendering to use
patient-facing labels by mapping the enum to display strings before the template
renders. Add a presenter/DTO field or model attribute (e.g.
CaseView.getStatusLabel() or model attribute "statusLabel") that converts
case.status enum values (COMMUNICATION, ASSIGNED, UPDATED, CLOSED, etc.) to
human-friendly labels ("Communication", "Assigned", "Updated", "Closed"), and
then change the template to use that label (replace th:text="${case.status}"
with th:text="${caseView.statusLabel}" or the model attribute name you add).
Alternatively, populate a localized message key for the enum in the controller
and reference that key in the template instead of case.status.
In `@src/main/resources/templates/cases/list.html`:
- Around line 29-40: The patient-facing badge currently prints the raw enum name
via "Updated: " + ${c.status}; locate the two spans that reference currentActor
and c.status in the template (the patient badge span and its fallback) and
change them to use the same display-label mapping used by the case detail notice
instead of rendering the enum's raw name (i.e., replace ${c.status} / "Updated:
" + ${c.status} with the display-label accessor or helper used elsewhere for
case status so patients see the human-friendly label).
In `@src/main/resources/templates/fragments/head.html`:
- Around line 266-271: The footer's two text spans crowd on small screens
because .footer-row prevents wrapping; inside the existing mobile media query
add rules for .footer-row to stack the items vertically (e.g., set
flex-direction: column and adjust spacing/alignment or use flex-wrap with gap),
so the footer content stacks and gains breathing room on narrow screens; update
the CSS selector .footer-row within the `@media` (max-width: 700px) block and
adjust properties like flex-direction, gap (or margin-bottom), and align-items
to ensure proper mobile layout.
In `@src/main/resources/templates/login/register.html`:
- Around line 7-10: The page’s primary heading is incorrectly an <h4> inside the
semantic <main> (the element with class "container page"), so replace the
<h4>Create a Patient Account</h4> with an <h1> to restore proper document
semantics and screen-reader navigation; keep or adjust the existing CSS
classes/styles (on the main or heading) to preserve visual appearance and ensure
there is only one <h1> on the page.
---
Nitpick comments:
In `@src/main/resources/templates/login/login.html`:
- Around line 31-40: Update the login form inputs to use proper email and
password-manager semantics: change the username input (id="username",
name="username") from type="text" to type="email" and add autocomplete="email";
keep the password input (id="password", name="password") as type="password" and
add autocomplete="current-password" so browsers and password managers can
autofill correctly; ensure the form's th:action and submit behavior remain
unchanged.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: fb290b43-4988-4ec5-9b2c-65af47ae0a90
📒 Files selected for processing (9)
src/main/java/org/example/projektarendehantering/presentation/rest/PatientController.javasrc/main/resources/templates/cases/detail.htmlsrc/main/resources/templates/cases/list.htmlsrc/main/resources/templates/fragments/footer.htmlsrc/main/resources/templates/fragments/head.htmlsrc/main/resources/templates/fragments/header.htmlsrc/main/resources/templates/index.htmlsrc/main/resources/templates/login/login.htmlsrc/main/resources/templates/login/register.html
| import java.util.List; | ||
| import java.util.UUID; | ||
|
|
||
| // Adding more wierd stuff in the code base to commit things again cuz the rabbit rate limits suck :) |
There was a problem hiding this comment.
Remove this inappropriate comment.
This comment is unprofessional and serves no functional or documentation purpose. It explicitly states it's adding "weird stuff" to work around rate limits, which is not an acceptable development practice. Comments in production code should document functionality, explain complex logic, or provide necessary context—not contain meta-commentary about the review process.
Additionally, this backend REST controller has no relation to the PR's stated objectives of UI improvements and patient notifications.
🧹 Proposed fix
-// Adding more wierd stuff in the code base to commit things again cuz the rabbit rate limits suck :)
`@RestController`📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // Adding more wierd stuff in the code base to commit things again cuz the rabbit rate limits suck :) | |
| `@RestController` |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In
`@src/main/java/org/example/projektarendehantering/presentation/rest/PatientController.java`
at line 17, Remove the unprofessional inline comment found in the
PatientController class header (the remark about "Adding more wierd stuff...
rabbit rate limits"); open the PatientController class (symbol:
PatientController) and delete that comment, then optionally replace it with a
short, relevant Javadoc or remove entirely so only meaningful documentation
remains and ensure no other stray meta-comments exist in the class.
| <strong>Case updated</strong> | ||
| <p style="margin-top: 8px; margin-bottom: 0;"> | ||
| There has been a new update to this case. | ||
| Current status: <span th:text="${case.status}">UPDATED</span>. |
There was a problem hiding this comment.
Use patient-facing labels for status text.
case.status renders raw enum values like COMMUNICATION, which reads like an internal code in this new patient notice. Please map statuses to display labels before rendering the notification, e.g. “Communication”, “Assigned”, “Updated”, “Closed”.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/main/resources/templates/cases/detail.html` around lines 17 - 20, The
template currently prints raw enum values via case.status which shows internal
codes; update the rendering to use patient-facing labels by mapping the enum to
display strings before the template renders. Add a presenter/DTO field or model
attribute (e.g. CaseView.getStatusLabel() or model attribute "statusLabel") that
converts case.status enum values (COMMUNICATION, ASSIGNED, UPDATED, CLOSED,
etc.) to human-friendly labels ("Communication", "Assigned", "Updated",
"Closed"), and then change the template to use that label (replace
th:text="${case.status}" with th:text="${caseView.statusLabel}" or the model
attribute name you add). Alternatively, populate a localized message key for the
enum in the controller and reference that key in the template instead of
case.status.
| <td> | ||
| <span | ||
| th:if="${currentActor != null && currentActor.role() != null && currentActor.role().toString() == 'PATIENT' && c.status != null && c.status.toString() != 'CREATED'}" | ||
| class="notice-badge" | ||
| th:text="'Updated: ' + ${c.status}"> | ||
| Updated | ||
| </span> | ||
| <span | ||
| th:unless="${currentActor != null && currentActor.role() != null && currentActor.role().toString() == 'PATIENT' && c.status != null && c.status.toString() != 'CREATED'}" | ||
| th:text="${c.status}"> | ||
| CREATED | ||
| </span> |
There was a problem hiding this comment.
Avoid raw enum text in the patient badge.
Updated: ${c.status} will display values like Updated: COMMUNICATION. Since this is patient-facing UI, use the same display-label mapping as the detail notice instead of rendering enum names directly.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/main/resources/templates/cases/list.html` around lines 29 - 40, The
patient-facing badge currently prints the raw enum name via "Updated: " +
${c.status}; locate the two spans that reference currentActor and c.status in
the template (the patient badge span and its fallback) and change them to use
the same display-label mapping used by the case detail notice instead of
rendering the enum's raw name (i.e., replace ${c.status} / "Updated: " +
${c.status} with the display-label accessor or helper used elsewhere for case
status so patients see the human-friendly label).
| @media (max-width: 700px) { | ||
| .container { width: min(1140px, calc(100% - 24px)); } | ||
| .page { padding-top: 24px; } | ||
| .page-title { align-items: flex-start; flex-direction: column; } | ||
| .auth-label { margin-right: 0; display: block; margin-bottom: 8px; } | ||
| } |
There was a problem hiding this comment.
Stack the footer content on narrow screens.
The footer now has two text spans; with the current non-wrapping .footer-row, they can crowd or overflow on mobile widths. Add a mobile rule in this breakpoint.
📱 Proposed responsive footer fix
`@media` (max-width: 700px) {
.container { width: min(1140px, calc(100% - 24px)); }
.page { padding-top: 24px; }
.page-title { align-items: flex-start; flex-direction: column; }
.auth-label { margin-right: 0; display: block; margin-bottom: 8px; }
+ .footer-row { align-items: flex-start; flex-direction: column; gap: 6px; }
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| @media (max-width: 700px) { | |
| .container { width: min(1140px, calc(100% - 24px)); } | |
| .page { padding-top: 24px; } | |
| .page-title { align-items: flex-start; flex-direction: column; } | |
| .auth-label { margin-right: 0; display: block; margin-bottom: 8px; } | |
| } | |
| `@media` (max-width: 700px) { | |
| .container { width: min(1140px, calc(100% - 24px)); } | |
| .page { padding-top: 24px; } | |
| .page-title { align-items: flex-start; flex-direction: column; } | |
| .auth-label { margin-right: 0; display: block; margin-bottom: 8px; } | |
| .footer-row { align-items: flex-start; flex-direction: column; gap: 6px; } | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/main/resources/templates/fragments/head.html` around lines 266 - 271, The
footer's two text spans crowd on small screens because .footer-row prevents
wrapping; inside the existing mobile media query add rules for .footer-row to
stack the items vertically (e.g., set flex-direction: column and adjust
spacing/alignment or use flex-wrap with gap), so the footer content stacks and
gains breathing room on narrow screens; update the CSS selector .footer-row
within the `@media` (max-width: 700px) block and adjust properties like
flex-direction, gap (or margin-bottom), and align-items to ensure proper mobile
layout.
| <main class="container page" style="max-width: 680px;"> | ||
| <section class="panel"> | ||
| <h4>Create a Patient Account</h4> | ||
| <p class="muted">Use your email to create an account and follow your case updates.</p> |
There was a problem hiding this comment.
Use an h1 for the page’s primary heading.
This page now has a semantic <main>, but its top heading is still h4, which weakens screen-reader/document navigation.
♿ Proposed heading fix
- <h4>Create a Patient Account</h4>
+ <h1>Create a Patient Account</h1>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <main class="container page" style="max-width: 680px;"> | |
| <section class="panel"> | |
| <h4>Create a Patient Account</h4> | |
| <p class="muted">Use your email to create an account and follow your case updates.</p> | |
| <main class="container page" style="max-width: 680px;"> | |
| <section class="panel"> | |
| <h1>Create a Patient Account</h1> | |
| <p class="muted">Use your email to create an account and follow your case updates.</p> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/main/resources/templates/login/register.html` around lines 7 - 10, The
page’s primary heading is incorrectly an <h4> inside the semantic <main> (the
element with class "container page"), so replace the <h4>Create a Patient
Account</h4> with an <h1> to restore proper document semantics and screen-reader
navigation; keep or adjust the existing CSS classes/styles (on the main or
heading) to preserve visual appearance and ensure there is only one <h1> on the
page.
1 participant
Closes #56
Closes #59
Summary by CodeRabbit
Release Notes
New Features
UI/UX Improvements