All updates
ProductionQAFrontend

QA Batch: Notification Reliability, Comments & Mentions Polish, Responsive Sidebar, and PWA Manifest Fix

PR #523pixbox-supportOct 10, 2025 · 18:45 UTC
QAOct 8, 2025
ProductionOct 10, 2025

Executive summary

A consolidated batch promoting development work to the QA environment, rolling up feature PRs #518, #519, and #522 alongside direct fixes. The standout improvements are a more reliable notification system (accurate unread counts and no duplicate alerts), a cleaner comments-and-mentions experience, a fully responsive sidebar, and a fix that stops the app icon/manifest from triggering redirect errors.

Why this was needed

Several rough edges had accumulated on the development branch: notification badges drifted out of sync and notifications could appear twice due to a duplicate websocket connection; the comments/mention experience needed visual and behavioral polish; the sidebar was a single 700+ line file that was hard to maintain and did not collapse well on smaller screens; and the PWA manifest/icons were being caught by auth redirects, causing errors. This batch addresses all of these before they reach Production.

Client / user impact

  • Notification unread counts stay accurate and update in real time, and users no longer see duplicate notifications.
  • Comments and @mentions get a cleaner, Slack-like minimal styling and smoother composer/mention behavior.
  • The left navigation now auto-collapses on narrower viewports (under ~1024px) for a better tablet/mobile experience.
  • Inbox summary cards and grid pagination adapt better to small screens.
  • App icon and web manifest load without redirect errors, improving PWA install/launch reliability.

Technical scope

Grounded in the diff (55 files, ~2.3k additions). Rolls up PRs #518 (tsc fixes), #519 (manifest fix), and #522 (generic bugs):

  • Notifications: new Zustand notification.store.ts for unread-count state; new notification-cache.utils.ts (+220) to sync websocket payloads into TanStack infinite-query caches; useNotificationsSocket hook hydrates counts and syncs payloads; removed a duplicate useNotificationsSocket call on the notifications page; mutation no longer redundantly hits the count endpoint; new notification.types/socket utils.
  • Comments/Mentions: reworked Composer, MessageBubble, MentionPopover, CommentsDrawer, useMentions, and mention-badge.css to a minimal blue text style.
  • Sidebar: split monolithic ui/sidebar.tsx (-711) into modular ui/sidebar/* files (context, root, menu, rail, trigger, inset, render-context); added useSidebarRenderMode; page-sidebar auto-collapses at 1024px.
  • Routing/PWA: middleware.ts now whitelists public asset paths (manifest.json, icons, robots.txt) past auth redirects; updated icon-192/512.png.
  • Type safety / services: refactors to Document Types grid/types, rules queries/types, and comments/grid-columns/status/notification services with query-param mapping; new featureFlags.ts (notificationsToast flag, default off).
  • Chore: removed the .github/workflows/claude-code-review.yml CI workflow; trimmed AGENTS.md.

Risk & mitigation

Moderate. The notification store/cache-sync rewrite and the large sidebar refactor touch shared, high-traffic UI surfaces, so regressions could affect counts, real-time updates, or navigation layout. The middleware change alters auth bypass rules. Mitigation: this is a QA-stage promotion intended for testing before Production; the notification toast is gated behind a default-off feature flag; sidebar and type changes are largely structural with behavior preserved.

QA validation focus

  • Verify notification unread count is accurate on load and updates live via websocket; confirm no duplicate notifications appear on the notifications page or dropdown.
  • Test comments: posting, @mention popover selection, and rendered mention styling in light/dark/high-contrast modes.
  • Resize the viewport across the ~1024px breakpoint to confirm the sidebar auto-collapses/expands and the inbox summary cards/grid reflow correctly.
  • Confirm the PWA manifest, robots.txt, and app icons load without redirecting to login (check both logged-in and logged-out states).
  • Smoke-test Document Types admin grid (load, edit modal) and bulk status update modal for regressions from the type-safety refactors.
  • Confirm auth-protected routes still redirect unauthenticated users correctly after the middleware change.