Fix smooth scrolling + add scroll on reply click

app/src/renderer/apps/Account-old/components/NotificationList.tsx

@@ -45,7 +45,7 @@ const NotificationListPresenter = ({ unseen, seen }: INotificationList) => {
       <WindowedList
         width={370}
         data={listData}
-        rowRenderer={(item, index) => {
+        itemContent={(index, item) => {
           if (item.type === 'title') {
             const title = item.data as string;
             return (

app/src/renderer/apps/Account/components/NotificationList.tsx

@@ -45,7 +45,7 @@ const NotificationListPresenter = ({ unseen, seen }: INotificationList) => {
       <WindowedList
         width={370}
         data={listData}
-        rowRenderer={(item, index) => {
+        itemContent={(index, item) => {
           if (item.type === 'title') {
             const title = item.data as string;
             return (

app/src/renderer/apps/Courier/components/ChatMessage.tsx

@@ -17,7 +17,7 @@ type ChatMessageProps = {
   ourColor: string;
   isPrevGrouped: boolean;
   isNextGrouped: boolean;
-  measure: () => void;
+  onReplyClick?: (msgId: string) => void;
 };
 
 export const ChatMessagePresenter = ({
@@ -26,7 +26,7 @@ export const ChatMessagePresenter = ({
   ourColor,
   isPrevGrouped,
   isNextGrouped,
-  measure,
+  onReplyClick,
 }: ChatMessageProps) => {
   const { ship, friends, theme } = useServices();
   const { selectedChat } = useChatStore();
@@ -195,7 +195,7 @@ export const ChatMessagePresenter = ({
 
   return (
     <Bubble
-      ref={messageRef}
+      innerRef={messageRef}
       id={messageRowId}
       isPrevGrouped={isPrevGrouped}
       isNextGrouped={isNextGrouped}
@@ -213,9 +213,9 @@ export const ChatMessagePresenter = ({
       authorColor={authorColor}
       message={mergedContents}
       sentAt={sentAt}
-      onMeasure={measure}
       reactions={reactionList}
       onReaction={canReact ? onReaction : undefined}
+      onReplyClick={onReplyClick}
     />
   );
 };

app/src/renderer/apps/Courier/views/ChatLog.tsx

@@ -3,9 +3,7 @@ import { observer } from 'mobx-react';
 import styled from 'styled-components';
 import { AnimatePresence } from 'framer-motion';
 import {
-  Box,
   Flex,
-  WindowedList,
   Text,
   Reply,
   measureImage,
@@ -18,12 +16,11 @@ import { ChatInputBox } from '../components/ChatInputBox';
 import { ChatLogHeader } from '../components/ChatLogHeader';
 import { ChatAvatar } from '../components/ChatAvatar';
 import { IuseStorage } from 'renderer/logic/lib/useStorage';
-import { ChatMessage } from '../components/ChatMessage';
 import { PinnedContainer } from '../components/PinnedMessage';
 import { useServices } from 'renderer/logic/store';
 import { ChatMessageType, ChatModelType } from '../models';
 import { useAccountStore } from 'renderer/apps/Account/store';
-import { displayDate } from 'os/lib/time';
+import { ChatLogList } from './ChatLogList';
 
 const FullWidthAnimatePresence = styled(AnimatePresence)`
   width: 100%;
@@ -198,66 +195,12 @@ export const ChatLogPresenter = ({ storage }: ChatLogProps) => {
                   />
                 </FullWidthAnimatePresence>
               )}
-              <WindowedList
-                key={`${path}-${selectedChat.lastFetch}-${messages.length}`}
-                startAtBottom
-                hideScrollbar
+              <ChatLogList
+                messages={messages}
+                selectedChat={selectedChat}
                 width={containerWidth}
                 height={height}
-                data={messages}
-                rowRenderer={(row, index, measure) => {
-                  const isLast = selectedChat
-                    ? index === messages.length - 1
-                    : false;
-
-                  const isNextGrouped =
-                    index < messages.length - 1 &&
-                    row.sender === messages[index + 1].sender;
-
-                  const isPrevGrouped =
-                    index > 0 &&
-                    row.sender === messages[index - 1].sender &&
-                    Object.keys(messages[index - 1].contents[0])[0] !==
-                      'status';
-
-                  const topSpacing = isPrevGrouped ? '3px' : 2;
-                  const bottomSpacing = isNextGrouped ? '3px' : 2;
-
-                  const thisMsgDate = new Date(row.createdAt).toDateString();
-                  const prevMsgDate =
-                    messages[index - 1] &&
-                    new Date(messages[index - 1].createdAt).toDateString();
-                  const showDate: boolean =
-                    index === 0 || thisMsgDate !== prevMsgDate;
-                  return (
-                    <Box
-                      mx="1px"
-                      pt={topSpacing}
-                      pb={isLast ? bottomSpacing : 0}
-                    >
-                      {showDate && (
-                        <Text.Custom
-                          opacity={0.5}
-                          fontSize="12px"
-                          fontWeight={500}
-                          textAlign="center"
-                          mt={2}
-                          mb={2}
-                        >
-                          {displayDate(row.createdAt)}
-                        </Text.Custom>
-                      )}
-                      <ChatMessage
-                        isPrevGrouped={isPrevGrouped}
-                        isNextGrouped={isNextGrouped}
-                        containerWidth={containerWidth}
-                        message={row as ChatMessageType}
-                        ourColor={ourColor}
-                        measure={measure}
-                      />
-                    </Box>
-                  );
-                }}
+                ourColor={ourColor}
               />
             </Flex>
           )}

app/src/renderer/apps/Courier/views/ChatLogList.tsx

@@ -0,0 +1,105 @@
+import { useRef } from 'react';
+import {
+  Box,
+  Text,
+  WindowedList,
+  WindowedListRef,
+} from '@holium/design-system';
+import { displayDate } from 'os/lib/time';
+import { ChatMessage } from '../components/ChatMessage';
+import { ChatMessageType, ChatModelType } from '../models';
+
+type Props = {
+  width: number;
+  height: number;
+  messages: ChatMessageType[];
+  selectedChat: ChatModelType;
+  ourColor: string;
+};
+
+export const ChatLogList = ({
+  width,
+  height,
+  messages,
+  selectedChat,
+  ourColor,
+}: Props) => {
+  const listRef = useRef<WindowedListRef>(null);
+
+  const scrollbarWidth = 12;
+
+  const renderChatRow = (index: number, row: ChatMessageType) => {
+    const isLast = selectedChat ? index === messages.length - 1 : false;
+
+    const isNextGrouped =
+      index < messages.length - 1 && row.sender === messages[index + 1].sender;
+
+    const isPrevGrouped =
+      index > 0 &&
+      row.sender === messages[index - 1].sender &&
+      Object.keys(messages[index - 1].contents[0])[0] !== 'status';
+
+    const topSpacing = isPrevGrouped ? '3px' : 2;
+    const bottomSpacing = isNextGrouped ? '3px' : 2;
+
+    const thisMsgDate = new Date(row.createdAt).toDateString();
+    const prevMsgDate =
+      messages[index - 1] &&
+      new Date(messages[index - 1].createdAt).toDateString();
+    const showDate = index === 0 || thisMsgDate !== prevMsgDate;
+
+    return (
+      <Box
+        key={row.id}
+        mx="1px"
+        pt={topSpacing}
+        pb={isLast ? bottomSpacing : 0}
+      >
+        {showDate && (
+          <Text.Custom
+            opacity={0.5}
+            fontSize="12px"
+            fontWeight={500}
+            textAlign="center"
+            mt={2}
+            mb={2}
+          >
+            {displayDate(row.createdAt)}
+          </Text.Custom>
+        )}
+        <ChatMessage
+          isPrevGrouped={isPrevGrouped}
+          isNextGrouped={isNextGrouped}
+          containerWidth={width}
+          message={row as ChatMessageType}
+          ourColor={ourColor}
+          onReplyClick={(replyId) => {
+            const replyIndex = messages.findIndex((msg) => msg.id === replyId);
+            if (replyIndex === -1) return;
+
+            console.log('reply index', replyIndex);
+
+            listRef.current?.scrollToIndex({
+              index: replyIndex,
+              align: 'start',
+              behavior: 'smooth',
+            });
+          }}
+        />
+      </Box>
+    );
+  };
+
+  return (
+    <WindowedList
+      innerRef={listRef}
+      data={messages}
+      followOutput="auto"
+      width={width + scrollbarWidth}
+      height={height}
+      style={{ marginRight: -scrollbarWidth }}
+      initialTopMostItemIndex={messages.length - 1}
+      itemContent={renderChatRow}
+    />
+  );
+};

app/src/renderer/apps/Messages/DMs.tsx

@@ -111,10 +111,8 @@ const DMsPresenter = (props: IProps) => {
         key={lastTimeSent}
         width={364}
         height={544}
-        rowHeight={57}
-        data={previews}
-        filter={searchFilter}
-        rowRenderer={(dm, index) => (
+        data={previews.filter(searchFilter)}
+        itemContent={(index, dm) => (
           <Box
             display="block"
             key={`dm-${index}-${dm.lastTimeSent}-${dm.pending}`}

app/src/renderer/apps/Messages/components/ChatLogView.tsx

@@ -34,7 +34,8 @@ export const ChatLogView = ({
         <WindowedList
           width={364}
           data={messages}
-          rowRenderer={(message, index, measure) => (
+          initialTopMostItemIndex={messages.length - 1}
+          itemContent={(index, message) => (
             <ChatMessage
               isSending={message.pending}
               // Only show author if it's a group
@@ -56,10 +57,8 @@ export const ChatLogView = ({
               ourColor={ship.color || '#569BE2'}
               contents={message.contents}
               timeSent={message.timeSent}
-              onImageLoad={measure}
             />
           )}
-          startAtBottom
         />
       </Flex>
     ),

app/src/renderer/apps/Messages/components/ChatMessage.tsx

@@ -16,7 +16,6 @@ interface IProps {
   ourColor: string;
   contents: GraphDMType['contents'];
   timeSent: number;
-  onImageLoad?: () => void;
 }
 
 export const ChatMessage = ({
@@ -29,7 +28,6 @@ export const ChatMessage = ({
   isSending,
   primaryBubble,
   timeSent,
-  onImageLoad,
 }: IProps) => {
   const messageTypes = useMemo(
     () =>
@@ -111,7 +109,6 @@ export const ChatMessage = ({
                   textColor={theme.textColor}
                   bgColor={referenceColor}
                   content={content}
-                  onImageLoad={onImageLoad}
                 />
               );
             })}
@@ -135,7 +132,6 @@ export const ChatMessage = ({
       contents,
       isMention,
       isSending,
-      onImageLoad,
       ourColor,
       primaryBubble,
       referenceColor,

app/src/renderer/apps/Rooms/Room/Chat.tsx

@@ -78,9 +78,8 @@ const RoomChatPresenter = () => {
       <WindowedList
         width={354}
         height={listHeight}
-        data={chats}
-        sort={(a, b) => a.timeReceived - b.timeReceived}
-        rowRenderer={(chat, index) => (
+        data={chats.sort((a, b) => a.timeReceived - b.timeReceived)}
+        itemContent={(index, chat) => (
           <RoomChatMessage
             key={chat.index}
             chat={chat}
@@ -93,7 +92,6 @@ const RoomChatPresenter = () => {
             }
           />
         )}
-        startAtBottom
       />
     );
   }, [chats]);

app/src/renderer/apps/Spaces/FeaturedList.tsx

@@ -39,7 +39,7 @@ const FeaturedListPresenter = () => {
         key={`featured-spaces-${listData.length}`}
         width={354}
         data={listData}
-        rowRenderer={(data: any) => {
+        itemContent={(_, data) => {
           const onJoin = async () => {
             setJoining(true);
             SpacesActions.joinSpace(data.path.substring(1))
@@ -75,6 +75,7 @@ const FeaturedListPresenter = () => {
                     height="32px"
                     width="32px"
                     src={data.picture}
+                    alt={data.name}
                   />
                 ) : (
                   <EmptyGroup color={data.color || '#000000'} />

app/src/renderer/apps/Spaces/SpacesList.tsx

@@ -1,14 +1,13 @@
 import { useMemo } from 'react';
 import { observer } from 'mobx-react';
+import { WindowedList } from '@holium/design-system';
 import { SpaceModelType } from 'os/services/spaces/models/spaces';
-
 import { Flex, Text, ActionButton, Icons } from 'renderer/components';
 import { SpaceRow } from './SpaceRow';
 import { ShellActions } from 'renderer/logic/actions/shell';
 import { useServices } from 'renderer/logic/store';
 import { VisaRow } from './components/VisaRow';
 import { rgba } from 'polished';
-import { WindowedList } from '@holium/design-system';
 
 export interface Space {
   color?: string;
@@ -108,11 +107,10 @@ const SpacesListPresenter = ({
   return (
     <Flex flex={1} width="100%">
       <WindowedList
-        rowHeight={56}
         key={`${spaces.length}-${incoming.length}`}
         width={354}
         data={rows}
-        rowRenderer={({ space, visa }) => {
+        itemContent={(_, { space, visa }) => {
           if (space) {
             return (
               <SpaceRow