Jakob Wennberg
ec27228a8e
Em dashes (—) and en dashes (–) had spread across comments, docs, tests, and a few UI strings, reading as AI-generated boilerplate rather than house style. Replaced each with punctuation matching its context: colon for explanatory clauses, comma for asides, plain hyphen for numeric/legal ranges (e.g. "21-23§"), "to"/"till" for date ranges, parentheses for paired-dash asides. messages/en.json and messages/sv.json were fixed by hand together to keep sv/en in sync. Left untouched where the dash is the functional subject rather than decorative punctuation: date-range-parser.ts's separator regex, charset-repair.ts's CP1252 byte-mapping table (and its test), the SIE encoding mojibake docs, generic-csv.ts's minus-sign normalizer, the agent system-prompt files that already instruct against em dashes, and a golden iXBRL test fixture compared byte-for-byte. Also fixes two bugs surfaced along the way: an off-by-one in ApiKeysPanel's scope-label split (a leftover from an earlier partial pass), and a charset-repair test that had lost the literal en-dash it exists to verify. Regenerated the agent atom seed migration (skills:generate) since 27 SKILL.md files changed. Added a CLAUDE.md rule against em/en dashes, with an explicit carve-out for the functional-dash cases above. Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
98 lines
3.3 KiB
TypeScript
98 lines
3.3 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect } from 'react'
|
|
import { useCompany } from '@/contexts/CompanyContext'
|
|
|
|
/**
|
|
* CompanyTabSync: cross-tab active company enforcement.
|
|
*
|
|
* Mounted once inside the dashboard layout (via CompanyProvider), this
|
|
* component guarantees that every open tab of the same user always shows
|
|
* the same active company. It has three layers:
|
|
*
|
|
* 1. BroadcastChannel('gnubok-company-switch')
|
|
* When the user switches company in one tab, every other live tab
|
|
* receives the message and hard-reloads if its current company differs
|
|
* from the broadcasted one.
|
|
*
|
|
* 2. visibilitychange
|
|
* Catches tabs that were hidden/minimized during a switch. On focus,
|
|
* the tab checks /api/company/current and reloads on mismatch, before
|
|
* any pixel of stale data is painted to the user.
|
|
*
|
|
* 3. pageshow with event.persisted === true
|
|
* Catches tabs restored from the browser's bfcache (back/forward
|
|
* navigation). bfcache literally freezes the DOM and JS state, so
|
|
* neither BroadcastChannel nor visibilitychange fires. pageshow is the
|
|
* only reliable signal and is guaranteed to fire on bfcache restore.
|
|
*
|
|
* All three layers converge on the same action: window.location.assign('/'),
|
|
* a hard navigation that wipes React state, the router cache, in-flight
|
|
* requests, blob URLs, and every other in-tab leak vector.
|
|
*
|
|
* No-op when the user has no active company (renders nothing, attaches no
|
|
* listeners).
|
|
*/
|
|
export default function CompanyTabSync() {
|
|
const { company } = useCompany()
|
|
const currentCompanyId = company?.id ?? null
|
|
|
|
useEffect(() => {
|
|
const hardReload = () => {
|
|
window.location.assign('/')
|
|
}
|
|
|
|
// Layer 1: BroadcastChannel: live cross-tab sync
|
|
let channel: BroadcastChannel | null = null
|
|
if (typeof BroadcastChannel !== 'undefined') {
|
|
channel = new BroadcastChannel('gnubok-company-switch')
|
|
channel.onmessage = (event: MessageEvent<{ companyId: string | null }>) => {
|
|
const incomingId = event.data?.companyId ?? null
|
|
if (incomingId !== currentCompanyId) {
|
|
hardReload()
|
|
}
|
|
}
|
|
}
|
|
|
|
// Layer 2: visibilitychange: on focus, verify against server
|
|
const checkServer = async () => {
|
|
try {
|
|
const res = await fetch('/api/company/current', {
|
|
cache: 'no-store',
|
|
credentials: 'same-origin',
|
|
})
|
|
if (!res.ok) return
|
|
const data = (await res.json()) as { companyId: string | null }
|
|
if (data.companyId !== currentCompanyId) {
|
|
hardReload()
|
|
}
|
|
} catch {
|
|
// Network error / offline: do nothing (don't accidentally reload-loop)
|
|
}
|
|
}
|
|
|
|
const handleVisibilityChange = () => {
|
|
if (document.visibilityState === 'visible') {
|
|
void checkServer()
|
|
}
|
|
}
|
|
document.addEventListener('visibilitychange', handleVisibilityChange)
|
|
|
|
// Layer 3: pageshow (persisted === true): bfcache restore
|
|
const handlePageShow = (event: PageTransitionEvent) => {
|
|
if (event.persisted) {
|
|
void checkServer()
|
|
}
|
|
}
|
|
window.addEventListener('pageshow', handlePageShow)
|
|
|
|
return () => {
|
|
channel?.close()
|
|
document.removeEventListener('visibilitychange', handleVisibilityChange)
|
|
window.removeEventListener('pageshow', handlePageShow)
|
|
}
|
|
}, [currentCompanyId])
|
|
|
|
return null
|
|
}
|