Skip to content

CreatorTrack SidePeek (shared right-side panel)

URL: https://mkdocs.justinsforge.com/memory/general/reference_creatortrack_sidepeek/

components/apps/shared/SidePeek.tsx + sidepeek.css (import the css from the consuming app face, same pattern as weekstrip.css). Built 2026-07-06 on branch feat/finances-surfaces during the finances Phase D passes; Justin wants this pattern for ALL CreatorTrack apps.

  • URL-driven: the app opens a peek by putting a query param on its own URL (?tx=, ?rec=, ?acct=) and rendering <SidePeek> next to the surface (server-rendered content as children). Deep links and browser back/forward work for free.
  • Chrome it owns: slide-in on mount, animated slide-out (X, Escape, or row toggle), left-edge col-resize grip persisted per storageKey in localStorage, head (rich header) + actions (e.g. expand-to-full-page link) slots, fixed overlay mode under 1100px.
  • Animated row-toggle close: pass openParams (params meaning "peek open") + interceptSelector (row link selector); clicks on row links whose target URL drops all openParams are intercepted, the slide-out plays, then it navigates.
  • Finance consumers: TxDrawer / RecDrawer / AcctDrawer share FINANCE_PEEK (openParams ["tx","rec","acct"], selector a.fs-row, a.fs-rowlink, storageKey fs-drawer-w). Detail bodies live in TxProfile / RecProfile / AccountProfile, shared 1:1 with the full-screen views (?view=<tab>&<param>=<id>&full=1), so peek and full page cannot drift.
  • Gotcha: peeks render OUTSIDE .fin-root (sibling of the app's scroll container), so any styles they need must be unscoped.

[Claude Code]