Fix two lint errors from the P2 header work

A masked lint exit code (piped through tail) let these ship in 65a0f1a:
- DevicePanel: reset subHeader via the render-phase prev-state pattern instead
  of a setState-in-effect.
- AppShell useSubHeader: assign the latest-callback ref in an effect, not
  during render.

Co-Authored-By: Claude Opus 4.8 <[email protected]>
This commit is contained in:
Omar Sobh
2026-06-12 23:10:25 -05:00
co-authored by Claude Opus 4.8
parent 48730abd78
commit 0923fb3f6a
2 changed files with 11 additions and 7 deletions
@@ -3,7 +3,6 @@
import { ChevronLeft, X } from "lucide-react"; import { ChevronLeft, X } from "lucide-react";
import { useQueryStates } from "nuqs"; import { useQueryStates } from "nuqs";
import { import {
useEffect,
useRef, useRef,
useState, useState,
type CSSProperties, type CSSProperties,
@@ -39,14 +38,16 @@ export function DevicePanel({ agent }: { agent: Agent }) {
// A drilled sub-screen registers its back-header here (see useSubHeader); the // A drilled sub-screen registers its back-header here (see useSubHeader); the
// single panel header morphs to back+title instead of app name + close. // single panel header morphs to back+title instead of app name + close.
const [subHeader, setSubHeader] = useState<SubHeader | null>(null); const [subHeader, setSubHeader] = useState<SubHeader | null>(null);
// Reset the registered sub-header when the open app changes (render-phase
// prev-state pattern — no effect).
const [seenApp, setSeenApp] = useState(app);
if (seenApp !== app) {
setSeenApp(app);
setSubHeader(null);
}
const open = app !== null; const open = app !== null;
const onHome = app === "home" || app === null; const onHome = app === "home" || app === null;
// Switching apps (or going home) resets any registered sub-header.
useEffect(() => {
setSubHeader(null);
}, [app]);
// Opening mounts content immediately; closing keeps it mounted through the // Opening mounts content immediately; closing keeps it mounted through the
// collapse transition (flex-basis when leaving phone/tablet, flex-grow when // collapse transition (flex-basis when leaving phone/tablet, flex-grow when
// leaving full), then unmounts. // leaving full), then unmounts.
@@ -21,7 +21,10 @@ export function useSubHeader(
) { ) {
const setSub = useContext(SubHeaderContext); const setSub = useContext(SubHeaderContext);
const backRef = useRef(onBack); const backRef = useRef(onBack);
// Keep the latest callback in the ref (in an effect, not during render).
useEffect(() => {
backRef.current = onBack; backRef.current = onBack;
});
useEffect(() => { useEffect(() => {
if (!active) return; if (!active) return;
setSub({ title, onBack: () => backRef.current() }); setSub({ title, onBack: () => backRef.current() });