Cursor rule

1---
2description: crit — frontend js
3globs: web/app.js,web/*.js
4alwaysApply: false
5---
6 
7# Frontend JS Rules (semantic — ESLint handles syntax/style)
8 
9## DOM & Events
10- Use `addEventListener`, not inline `onclick` handlers in new code.
11- Cache repeated DOM queries into const variables.
12 
13## State Management
14- When async operations can be triggered from multiple sources, add dedup guards (e.g., `reloadInFlight` promise pattern).
15- Reset ALL navigation/UI state when context changes (scope change, session reload, comment delete).
16- When implementing UI state logic that counts comments, account for ALL comment types (file-scoped AND review-level).
17 
18## Persisted Settings (cookies, not localStorage)
19- Use cookies for any setting that should persist across `crit` invocations. Crit defaults to a random port (`port=0`), and localStorage is scoped per origin (scheme + host + **port**), so localStorage settings reset every run. Cookies are host-scoped and survive port changes.
20- Persisted settings live in a single `crit-settings` JSON cookie via `getSetting(key, fallback)` / `setSetting(key, value)`. The exception is `crit-templates`, which stays in its own cookie because it's user-defined and can be longer.
21- localStorage is fine for transient per-session data (e.g., `crit-draft-*` autosave keys that are review-specific anyway).
22- Before adding persistence to a setting, ask whether it should be sticky. Transient view state (active filter, sort order on a list) usually shouldn't be — users coming back to a new review with "resolved-only" active would miss new open comments. Persist preferences (theme, width, hide-resolved), not transient views.
23 
24## Error Handling
25- Always check `response.ok` after `fetch()` calls. Throw on unexpected statuses.
26- Every async operation must have error recovery that restores interactivity (re-attach listeners, undo optimistic UI).
27- Never call `.remove()` directly on elements with CSS exit animations. Use class toggle + animationend listener.
28 
29## Accessibility (axe-core in E2E catches missing aria-labels, dialog roles, tab roles)
30- Never call `.blur()` on interactive elements — it breaks keyboard navigation. axe-core catches the effect (no focus indicator) but not the cause.
31 
32## SSE Events
33- When an SSE event signals a specific data change (e.g., `comments-changed`), only re-fetch that data — not everything.
34