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;
|
||||
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) {
|
||||
const bodyRef = useRef<HTMLDivElement>(null);
|
||||
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)
|
||||
useEffect(() => {
|
||||
setCollapsed(true);
|
||||
setCollapsedState(!(eventId && expandedMessages.has(eventId)));
|
||||
setNeedsCollapse(false);
|
||||
}, [eventId]);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user