janpeter/Scrum4Me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(PBI-76): migrate SplitPane positions to user-settings store

Browse source 
Outside of a drag the store is the source of truth (cross-tab
updates flow in for free). During a drag we keep splits in local
state so mousemove does not round-trip through the store. On
mouseup we persist the final splits via setPref. Removes
document.cookie reads/writes — cookieKey is reused as the
store-key for backwards compat.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser 2026-05-10 15:20:20 +02:00
parent a2267502ba
commit 90861c3135
1 changed files with 25 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

62
components/split-pane/split-pane.tsx
View file

@ -3,34 +3,15 @@
import { Fragment, useRef, useState, useEffect, useCallback } from 'react'
import { cn } from '@/lib/utils'
import { debugProps } from '@/lib/debug'
import { useUserSettingsStore } from '@/stores/user-settings/store'
const COOKIE_PREFIX = 'sp:'
const COOKIE_MAX_AGE = 60 * 60 * 24 * 365
function readSplits(cookieKey: string, n: number): number[] | null {
if (typeof document === 'undefined') return null
const match = document.cookie.match(
new RegExp(`(?:^|; )${COOKIE_PREFIX}${cookieKey}=([^;]+)`)
function isValidPositions(value: unknown, n: number): value is number[] {
return (
Array.isArray(value) &&
value.length === n &&
value.every((v) => typeof v === 'number') &&
Math.abs((value as number[]).reduce((a, b) => a + b, 0) - 100) <= 1
)
if (!match) return null
try {
const parsed: unknown = JSON.parse(decodeURIComponent(match[1]))
if (
!Array.isArray(parsed) ||
parsed.length !== n ||
parsed.some((v) => typeof v !== 'number') ||
Math.abs((parsed as number[]).reduce((a, b) => a + b, 0) - 100) > 1
) return null
return parsed as number[]
} catch {
return null
}
}
function writeSplits(cookieKey: string, splits: number[]) {
document.cookie = `${COOKIE_PREFIX}${cookieKey}=${encodeURIComponent(
JSON.stringify(splits)
)}; max-age=${COOKIE_MAX_AGE}; path=/; samesite=lax`
}
export interface SplitPaneProps {
@ -59,9 +40,16 @@ export function SplitPane({
const containerRef = useRef<HTMLDivElement>(null)
const splitsRef = useRef<number[]>(defaultSplit)
const [splits, setSplits] = useState<number[]>(() => {
return readSplits(cookieKey, n) ?? defaultSplit
})
const persisted = useUserSettingsStore(
(s) => s.entities.settings.layout?.splitPanePositions?.[cookieKey],
)
const setPref = useUserSettingsStore((s) => s.setPref)
// While dragging we keep splits in local state to avoid round-tripping every
// mousemove through the store. Outside of a drag, the store is the source of
// truth so cross-tab updates flow in automatically.
const [dragSplits, setDragSplits] = useState<number[] | null>(null)
const splits = dragSplits ?? (isValidPositions(persisted, n) ? persisted : defaultSplit)
const [dragging, setDragging] = useState<number | null>(null) // divider index (0..n-2)
const [isMobile, setIsMobile] = useState(false)
const [internalTab, setInternalTab] = useState(0)
@ -96,20 +84,20 @@ export function SplitPane({
const newLeft = Math.min(Math.max(cursorPct - leftEdge, minPct), combinedWidth - minPct)
const newRight = combinedWidth - newLeft
setSplits((prev) => {
const next = [...prev]
next[dragging] = newLeft
next[dragging + 1] = newRight
return next
})
const base = splitsRef.current
const next = [...base]
next[dragging] = newLeft
next[dragging + 1] = newRight
setDragSplits(next)
}, [dragging, minSize])
const onMouseUp = useCallback(() => {
if (dragging !== null) {
writeSplits(cookieKey, splitsRef.current)
void setPref(['layout', 'splitPanePositions', cookieKey], splitsRef.current)
setDragSplits(null)
setDragging(null)
}
}, [dragging, cookieKey])
}, [dragging, cookieKey, setPref])
useEffect(() => {
if (dragging !== null) {