fix(timeline): remember 'Read more' expansion per message for the session (#152)
CollapsibleBody kept its collapsed flag in component state, which the timeline's windowed rendering throws away when a row unmounts. A module-level Set<eventId> (never persisted, cleared on reload) now seeds the state, so scrolling away and back, or a re-render, keeps an expanded message open. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
This commit is contained in:
@@ -46,14 +46,31 @@ type CollapsibleBodyProps = {
|
|||||||
eventId?: string;
|
eventId?: string;
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
};
|
};
|
||||||
|
// [Gitea #152] Messages the user expanded this session. The timeline unmounts
|
||||||
|
// rows as they scroll away, so component state alone forgot the choice;
|
||||||
|
// module-scoped (never persisted) survives remounts and clears on reload.
|
||||||
|
const expandedMessages = new Set<string>();
|
||||||
|
|
||||||
function CollapsibleBody({ eventId, children }: CollapsibleBodyProps) {
|
function CollapsibleBody({ eventId, children }: CollapsibleBodyProps) {
|
||||||
const bodyRef = useRef<HTMLDivElement>(null);
|
const bodyRef = useRef<HTMLDivElement>(null);
|
||||||
const [needsCollapse, setNeedsCollapse] = useState(false);
|
const [needsCollapse, setNeedsCollapse] = useState(false);
|
||||||
const [collapsed, setCollapsed] = useState(true);
|
const [collapsed, setCollapsedState] = useState(
|
||||||
|
() => !(eventId && expandedMessages.has(eventId)),
|
||||||
|
);
|
||||||
|
const setCollapsed = (next: boolean | ((c: boolean) => boolean)) => {
|
||||||
|
setCollapsedState((c) => {
|
||||||
|
const value = typeof next === 'function' ? next(c) : next;
|
||||||
|
if (eventId) {
|
||||||
|
if (value) expandedMessages.delete(eventId);
|
||||||
|
else expandedMessages.add(eventId);
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
// Reset collapsed state when the event changes (new message)
|
// Reset collapsed state when the event changes (new message)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setCollapsed(true);
|
setCollapsedState(!(eventId && expandedMessages.has(eventId)));
|
||||||
setNeedsCollapse(false);
|
setNeedsCollapse(false);
|
||||||
}, [eventId]);
|
}, [eventId]);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user