Skip to content

polish(pwa): redesigned install/update notices for all screen sizes + review follow-ups#905

Merged
BigSimmo merged 9 commits into
mainfrom
claude/clinical-kb-pwa-review-asi3wb
Jul 19, 2026
Merged

polish(pwa): redesigned install/update notices for all screen sizes + review follow-ups#905
BigSimmo merged 9 commits into
mainfrom
claude/clinical-kb-pwa-review-asi3wb

Conversation

@BigSimmo

@BigSimmo BigSimmo commented Jul 19, 2026

Copy link
Copy Markdown
Owner

Summary

  • Install button + notifications redesign (src/components/pwa-lifecycle.tsx, src/app/globals.css): the PWA install prompt, update notice, iOS install hint, and offline/restored notices are now glass "lux" cards with per-type icon tiles (accent download / info refresh / warning offline / success restored), heading-ink titles, corner dismiss buttons (44px-safe targets, aria-labelled), and a 280ms entrance animation that honours both prefers-reduced-motion and the app's data-motion="reduced" toggle. Placement is now deliberate per screen size: phones keep the bottom sheet-style card above the fixed composer (thumb zone, safe-area aware); medium screens (≥640px) float a 25rem card bottom-right; desktop (≥1280px) moves the stack to a top-right toast under the header — beside the browser's own install affordance and clear of the composer — with the entrance animation direction flipped to slide down. Copy, ARIA roles, and button names are unchanged, so all existing tests pass untouched.
  • Review follow-up fix (scripts/pr-policy.mjs): the requested repo review of recent main changes confirmed one P2 in fix(ci): make PR policy section parsing robust to markdown heading variants #892's parser — a required section ended at ANY next heading, so ### sub-structure inside ## Verification truncated the section and false-rejected valid PR bodies (fail-closed). Sections are now outline-aware (run to the next heading of same-or-shallower level) with a self-test case locking the regression.
  • Review scope and full findings (one P2 fixed here; no P0/P1; residual risks noted) are recorded in the ledger rows on this branch.

Verification

  • npm run verify:cheap — full chain green: 2828 passed / 1 failed (the long-baselined container-only pdf-extraction-budget artifact, hosted-CI-green through feat(pwa): retirement kill-switch, offline-version binding guard, and dev teardown flag #826polish(design): Phase 5 sweep — forced-colors button labels, tools rail titles, privacy microcopy #896); includes the pr-policy self-test with the new sub-heading case
  • npm run test:e2e:pwa — privacy/offline journey green; sole failure is the container-only in-incognito installability artifact
  • npm run verify:ui — 236 passed / 2 failed (both long-baselined container-only artifacts: ui-pwa installability, ui-smoke PDF-canvas mobile)
  • npm run build + client-bundle secret scan + npm run check:bundle-budget — 1293.4 KiB gzip vs 1278.6 KiB enforced baseline, within tolerance (~2.8 KiB from icons/CSS)
  • Focused vitest: pwa-lifecycle.dom 9/9, pwa-manifest 8/8 post-redesign
  • npm run check:pr-policy self-test green (new outline case included)
  • Visual evidence at 390×844, 768×1024, 1440×1000 light/dark + offline state (session scratchpad, pwa-notice--*.png)

Risk and rollout

  • Risk: low — presentation-only PWA notice changes (no cache semantics, no service-worker change, no copy/role changes); the policy change only widens accepted PR-body shapes (fail-closed before and after).
  • Rollback: revert either commit independently (b2afe66 visuals, 6531178 policy).
  • Provider or production effects: None.

Notes

  • The desktop top-right placement uses the same 4.25rem + safe-area header offset constant as the mode-menu popover, so the toast tracks the header height.
  • Dev-environment note from this session: Turbopack's persistent .next cache twice served a stale globals.css compile across restarts; setting the cache aside fixed it. Not a shippable defect, recorded in the ledger's checks column.

🤖 Generated with Claude Code

https://claude.ai/code/session_01EXsJcLrbZUXwnBeG91cVo9

Summary by CodeRabbit

  • New Features

    • Redesigned PWA notices with a shared icon-and-text tile layout, improved responsive placement, and entrance animation.
    • Added icon-only dismiss buttons with accessible labels; offline dismiss is tied to the current offline “episode” and will return after the next offline transition.
  • Bug Fixes

    • Improved pull request policy section parsing so nested headings no longer truncate verification content and reduce false rejections.
  • Documentation

    • Updated the project ledger with new review/verification entries.
  • Tests

    • Added coverage for dismissing the offline notice and reappearing on subsequent offline transitions.

claude added 2 commits July 19, 2026 03:50
Glass lux cards with per-type icon tiles (install/update/offline/restored),
heading-ink titles, corner dismiss buttons, and a reduced-motion-safe
entrance animation. Placement per screen size: bottom sheet-style above the
composer on phones, floating bottom-right card on medium screens, top-right
toast under the header on desktop (beside the browser's own install
affordance). Copy, roles, and button names unchanged.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EXsJcLrbZUXwnBeG91cVo9
Review follow-up on #892: the widened heading matcher ended a required
section at ANY next heading, so ### sub-structure inside ## Verification
truncated the section and false-rejected valid bodies. A section now runs
to the next heading of the same or shallower level; self-test case added.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EXsJcLrbZUXwnBeG91cVo9
@coderabbitai

coderabbitai Bot commented Jul 19, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Warning

Review limit reached

@BigSimmo, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 16 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: dff04e59-d6d1-48dd-a310-a454449966b6

📥 Commits

Reviewing files that changed from the base of the PR and between d08a17f and 39f45b1.

📒 Files selected for processing (3)
  • scripts/pr-policy.mjs
  • src/app/globals.css
  • src/components/pwa-lifecycle.tsx
📝 Walkthrough

Walkthrough

The PR redesigns PWA notices with shared icons, dismiss controls, responsive animation, and reduced-motion support. It also makes PR policy parsing heading-aware, adds nested-heading coverage, and records two review outcomes in the branch ledger.

Changes

PWA notice redesign

Layer / File(s) Summary
Notice structure and controls
src/components/pwa-lifecycle.tsx, tests/pwa-lifecycle.dom.test.tsx
PWA notices use shared tone-specific icon tiles, revised layouts and actions, accessible icon-only dismiss buttons, and per-offline-episode dismissal behavior covered by a DOM test.
Responsive notice presentation
src/app/globals.css
Notice sizing, breakpoint placement, entrance animation, desktop positioning, and reduced-motion handling were updated.

PR policy section parsing

Layer / File(s) Summary
Heading-aware policy parsing
scripts/pr-policy.mjs
Section extraction now preserves deeper headings within a section and stops at equal or shallower headings, with self-tests for both cases.

Review ledger updates

Layer / File(s) Summary
Review record additions
docs/branch-review-ledger.md
Two dated review records were added with fix, verification, and residual-status details.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Possibly related PRs

Suggested labels: codex

Suggested reviewers: claude

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title matches the main change: redesigned PWA notices across screen sizes, with review follow-ups as a secondary part.
Description check ✅ Passed The description covers the required sections and provides detailed verification, risk, and rollout notes for the UI and policy changes.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch claude/clinical-kb-pwa-review-asi3wb

Comment @coderabbitai help to get the list of available commands.

@supabase

supabase Bot commented Jul 19, 2026

Copy link
Copy Markdown

This pull request has been ignored for the connected project sjrfecxgysukkwxsowpy because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.


Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EXsJcLrbZUXwnBeG91cVo9
@BigSimmo
BigSimmo marked this pull request as ready for review July 19, 2026 04:32
@BigSimmo

Copy link
Copy Markdown
Owner Author

@copilot resolve the merge conflicts on this branch.

…a-review-asi3wb

# Conflicts:
#	docs/branch-review-ledger.md
#	src/components/pwa-lifecycle.tsx

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 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 `@scripts/pr-policy.mjs`:
- Around line 55-65: Update the heading parser used by the section-boundary
logic around normalizeSectionHeading to collect levels 1 through 6 instead of
only levels 2 through 6, so a later level-1 heading terminates a preceding
section. Add a regression test verifying checklist or rollback evidence after a
level-1 heading is excluded from the earlier section.

In `@src/components/pwa-lifecycle.tsx`:
- Around line 387-405: Update the offline notice in the component containing the
“You appear to be offline” text to add accessible dismiss state and a clearly
labeled dismiss button alongside “Try again.” Suppress the card after dismissal,
and reset that state on the next connectivity transition so the notice can
reappear when connectivity changes.
🪄 Autofix (Beta)

❌ Autofix failed (check again to retry)

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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 21af3d47-4ab2-4867-802d-f1b2b57b199a

📥 Commits

Reviewing files that changed from the base of the PR and between 4034d2e and d160d80.

📒 Files selected for processing (4)
  • docs/branch-review-ledger.md
  • scripts/pr-policy.mjs
  • src/app/globals.css
  • src/components/pwa-lifecycle.tsx

Comment thread scripts/pr-policy.mjs Outdated
Comment thread src/components/pwa-lifecycle.tsx Outdated
@BigSimmo

Copy link
Copy Markdown
Owner Author

@copilot resolve the merge conflicts in this pull request

claude added 2 commits July 19, 2026 04:39
…ection boundaries

Offline notice gains the same corner dismiss as the other cards, scoped per
offline episode (the next connectivity drop re-surfaces it) with a dom test.
pr-policy heading scan widened to #{1,6} so a level-1 heading terminates a
preceding ## section; self-test case added.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EXsJcLrbZUXwnBeG91cVo9
…a-review-asi3wb

# Conflicts:
#	docs/branch-review-ledger.md

Copilot AI commented Jul 19, 2026

Copy link
Copy Markdown
Contributor

@copilot resolve the merge conflicts in this pull request

Resolved. The conflict was in docs/branch-review-ledger.md — both this branch and origin/main had appended new ledger rows. I merged the latest main and kept all rows from both sides. The branch is now up to date with main and the PR should be mergeable.

@coderabbitai

coderabbitai Bot commented Jul 19, 2026

Copy link
Copy Markdown
Contributor

Note

Autofix is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it.

Autofix skipped. No unresolved CodeRabbit review comments with fix instructions found.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: d08a17ffd9

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread scripts/pr-policy.mjs
Review follow-up: the outline-aware boundary let a mis-levelled sub-heading
(and its content) satisfy the Summary requirement. Summary is now judged on
its direct content before the first sub-heading, heading lines no longer
count as meaningful text anywhere, and self-tests cover both shapes.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EXsJcLrbZUXwnBeG91cVo9

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 2d24f57c2d

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread src/components/pwa-lifecycle.tsx Outdated
claude added 2 commits July 19, 2026 04:48
Review follow-up: the corner dismiss was 32px, below the repo's
--spacing-tap contract. Now h-tap/w-tap with widened content clearance.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EXsJcLrbZUXwnBeG91cVo9
@BigSimmo
BigSimmo merged commit e377ab1 into main Jul 19, 2026
16 checks passed
@BigSimmo
BigSimmo deleted the claude/clinical-kb-pwa-review-asi3wb branch July 19, 2026 05:23
@BigSimmo BigSimmo mentioned this pull request Jul 19, 2026
13 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants