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.

Author: jmattheis

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 = () => {

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}