From f04cb2ddd7ef04951baa80980fc6b1683e177338 Mon Sep 17 00:00:00 2001
From: Jannis Mattheis <contact@jmattheis.de>
Date: Mon, 4 Aug 2025 17:19:59 +0200
Subject: [PATCH] fix: preserve expanded state

Previously, expanded messages where collapsed again when scrolling some
messages further. The saved height in the virtual list wasn't changed.
This caused the list to flicker when scrolling to the previously
expanded message again.
---
 ui/src/message/Message.tsx  | 18 ++++++++++++++++--
 ui/src/message/Messages.tsx |  3 +++
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/ui/src/message/Message.tsx b/ui/src/message/Message.tsx
index 91e8a44..19cfe92 100644
--- a/ui/src/message/Message.tsx
+++ b/ui/src/message/Message.tsx
@@ -83,6 +83,8 @@ interface IProps {
     priority: number;
     fDelete: VoidFunction;
     extras?: IMessageExtras;
+    expanded: boolean;
+    onExpand: (expand: boolean) => void;
 }
 
 const priorityColor = (priority: number) => {
@@ -95,16 +97,28 @@ const priorityColor = (priority: number) => {
     }
 };
 
-const Message = ({fDelete, title, date, image, priority, content, extras}: IProps) => {
+const Message = ({
+    fDelete,
+    title,
+    date,
+    image,
+    priority,
+    content,
+    extras,
+    onExpand,
+    expanded: initialExpanded,
+}: IProps) => {
     const [previewRef, setPreviewRef] = React.useState<HTMLDivElement | null>(null);
     const {classes} = useStyles();
-    const [expanded, setExpanded] = React.useState(false);
+    const [expanded, setExpanded] = React.useState(initialExpanded);
     const [isOverflowing, setOverflowing] = React.useState(false);
 
     React.useEffect(() => {
         setOverflowing(!!previewRef && previewRef.scrollHeight > previewRef.clientHeight);
     }, [previewRef]);
 
+    React.useEffect(() => void onExpand(expanded), [expanded]);
+
     const togglePreviewHeight = () => setExpanded((b) => !b);
 
     const renderContent = () => {
diff --git a/ui/src/message/Messages.tsx b/ui/src/message/Messages.tsx
index 0c7e4fc..1c91ff4 100644
--- a/ui/src/message/Messages.tsx
+++ b/ui/src/message/Messages.tsx
@@ -23,6 +23,7 @@ const Messages = observer(() => {
     const hasMore = messagesStore.canLoadMore(appId);
     const name = appStore.getName(appId);
     const hasMessages = messages.length !== 0;
+    const expandedState = React.useRef<Record<number, boolean>>({});
 
     const deleteMessage = (message: IMessage) => () => messagesStore.removeSingle(message);
 
@@ -36,8 +37,10 @@ const Messages = observer(() => {
         <Message
             key={index}
             fDelete={deleteMessage(message)}
+            onExpand={(expanded) => (expandedState.current[message.id] = expanded)}
             title={message.title}
             date={message.date}
+            expanded={expandedState.current[message.id] ?? false}
             content={message.message}
             image={message.image}
             extras={message.extras}