Fix smooth scrolling + add scroll on reply click

holium · Apr 4, 2023 · decda33 · decda33
1 parent 0638708
commit decda33
Show file tree

Hide file tree

Showing 46 changed files with 351 additions and 4,460 deletions.
diff --git a/app/package.json b/app/package.json
@@ -66,6 +66,7 @@
     "react-hotkeys-hook": "^3.4.7",
     "react-spaces": "^0.3.2",
     "react-spinners": "^0.13.4",
+    "react-virtuoso": "^4.2.0",
     "socket.io-client": "^4.5.4",
     "styled-components": "^5.3.3",
     "styled-system": "^5.1.5",

diff --git a/app/src/renderer/apps/Account-old/components/NotificationList.tsx b/app/src/renderer/apps/Account-old/components/NotificationList.tsx
@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
+import { Virtuoso } from 'react-virtuoso';
 import { Flex, Text } from 'renderer/components';
 import { Notification } from './Notification';
 import { useTrayApps } from 'renderer/apps/store';
-import { WindowedList } from '@holium/design-system';
 import { NotificationModelType } from 'os/services/spaces/models/beacon';
 import { observer } from 'mobx-react';
 
@@ -42,10 +42,12 @@ const NotificationListPresenter = ({ unseen, seen }: INotificationList) => {
       flexDirection="column"
       height={dimensions.height}
     >
-      <WindowedList
-        width={370}
+      <Virtuoso
+        style={{
+          width: 370,
+        }}
         data={listData}
-        rowRenderer={(item, index) => {
+        itemContent={(index, item) => {
           if (item.type === 'title') {
             const title = item.data as string;
             return (

diff --git a/app/src/renderer/apps/Account/components/NotificationList.tsx b/app/src/renderer/apps/Account/components/NotificationList.tsx
@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
+import { Virtuoso } from 'react-virtuoso';
 import { Flex, Text } from 'renderer/components';
 import { Notification } from './Notification';
 import { useTrayApps } from 'renderer/apps/store';
-import { WindowedList } from '@holium/design-system';
 import { NotificationModelType } from 'os/services/spaces/models/beacon';
 import { observer } from 'mobx-react';
 
@@ -42,10 +42,12 @@ const NotificationListPresenter = ({ unseen, seen }: INotificationList) => {
       flexDirection="column"
       height={dimensions.height}
     >
-      <WindowedList
-        width={370}
+      <Virtuoso
+        style={{
+          width: 370,
+        }}
         data={listData}
-        rowRenderer={(item, index) => {
+        itemContent={(index, item) => {
           if (item.type === 'title') {
             const title = item.data as string;
             return (

diff --git a/app/src/renderer/apps/Courier/components/ChatMessage.tsx b/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}
     />
   );
 };

diff --git a/app/src/renderer/apps/Courier/views/ChatLog.tsx b/app/src/renderer/apps/Courier/views/ChatLog.tsx
@@ -1,11 +1,11 @@
-import { useMemo, useEffect, useState } from 'react';
+import { useMemo, useEffect, useState, useRef } from 'react';
 import { observer } from 'mobx-react';
 import styled from 'styled-components';
 import { AnimatePresence } from 'framer-motion';
+import { Virtuoso } from 'react-virtuoso';
 import {
   Box,
   Flex,
-  WindowedList,
   Text,
   Reply,
   measureImage,
@@ -42,6 +42,7 @@ export const ChatLogPresenter = ({ storage }: ChatLogProps) => {
   const accountStore = useAccountStore();
   const { ship, friends } = useServices();
   const [showAttachments, setShowAttachments] = useState(false);
+  const listRef = useRef<any>(null);
 
   const { color: ourColor } = useMemo(() => {
     if (!ship) return { color: '#000' };
@@ -198,14 +199,16 @@ export const ChatLogPresenter = ({ storage }: ChatLogProps) => {
                   />
                 </FullWidthAnimatePresence>
               )}
-              <WindowedList
-                key={`${path}-${selectedChat.lastFetch}-${messages.length}`}
-                startAtBottom
-                hideScrollbar
-                width={containerWidth}
-                height={height}
+              <Virtuoso
+                ref={listRef}
+                style={{
+                  height,
+                  width: containerWidth,
+                }}
                 data={messages}
-                rowRenderer={(row, index, measure) => {
+                initialTopMostItemIndex={messages.length - 1}
+                followOutput="auto"
+                itemContent={(index, row) => {
                   const isLast = selectedChat
                     ? index === messages.length - 1
                     : false;
@@ -253,7 +256,20 @@ export const ChatLogPresenter = ({ storage }: ChatLogProps) => {
                         containerWidth={containerWidth}
                         message={row as ChatMessageType}
                         ourColor={ourColor}
-                        measure={measure}
+                        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>
                   );

diff --git a/app/src/renderer/apps/Messages/DMs.tsx b/app/src/renderer/apps/Messages/DMs.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { observer } from 'mobx-react';
+import { Virtuoso } from 'react-virtuoso';
 import {
   Icon,
   Text,
@@ -9,7 +10,6 @@ import {
   TextInput,
   Skeleton,
   Spinner,
-  WindowedList,
 } from '@holium/design-system';
 import { ContactRow } from './components/ContactRow';
 import { ThemeModelType } from 'os/services/theme.model';
@@ -107,14 +107,14 @@ const DMsPresenter = (props: IProps) => {
     }
 
     return (
-      <WindowedList
+      <Virtuoso
         key={lastTimeSent}
-        width={364}
-        height={544}
-        rowHeight={57}
-        data={previews}
-        filter={searchFilter}
-        rowRenderer={(dm, index) => (
+        style={{
+          width: 364,
+          height: 544,
+        }}
+        data={previews.filter(searchFilter)}
+        itemContent={(index, dm) => (
           <Box
             display="block"
             key={`dm-${index}-${dm.lastTimeSent}-${dm.pending}`}

diff --git a/app/src/renderer/apps/Messages/components/ChatLogView.tsx b/app/src/renderer/apps/Messages/components/ChatLogView.tsx
@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { Flex, WindowedList } from '@holium/design-system';
+import { Virtuoso } from 'react-virtuoso';
+import { Flex } from '@holium/design-system';
 import { ShipModelType } from 'os/services/ship/models/ship';
 import { GraphDMType } from 'os/services/ship/models/courier';
 import { ThemeModelType } from 'os/services/theme.model';
@@ -31,10 +32,13 @@ export const ChatLogView = ({
         flexDirection="column-reverse"
         pb={44}
       >
-        <WindowedList
-          width={364}
+        <Virtuoso
+          style={{
+            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 +60,8 @@ export const ChatLogView = ({
               ourColor={ship.color || '#569BE2'}
               contents={message.contents}
               timeSent={message.timeSent}
-              onImageLoad={measure}
             />
           )}
-          startAtBottom
         />
       </Flex>
     ),

diff --git a/app/src/renderer/apps/Messages/components/ChatMessage.tsx b/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,

diff --git a/app/src/renderer/apps/Rooms/Room/Chat.tsx b/app/src/renderer/apps/Rooms/Room/Chat.tsx
@@ -2,9 +2,9 @@ import { useRef, useMemo, useCallback } from 'react';
 import { Flex, Text, Input, IconButton, Icons } from 'renderer/components';
 import { createField, createForm } from 'mobx-easy-form';
 import { observer } from 'mobx-react';
+import { Virtuoso } from 'react-virtuoso';
 import { useTrayApps } from 'renderer/apps/store';
 import { useServices } from 'renderer/logic/store';
-import { WindowedList } from '@holium/design-system';
 import { RoomChatMessage } from './RoomChatMessage';
 import { useRooms } from '../useRooms';
 
@@ -75,12 +75,13 @@ const RoomChatPresenter = () => {
     }
 
     return (
-      <WindowedList
-        width={354}
+      <Virtuoso
+        style={{
+          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 +94,6 @@ const RoomChatPresenter = () => {
             }
           />
         )}
-        startAtBottom
       />
     );
   }, [chats]);

diff --git a/app/src/renderer/apps/Spaces/FeaturedList.tsx b/app/src/renderer/apps/Spaces/FeaturedList.tsx
@@ -1,9 +1,10 @@
 import { useState } from 'react';
 import { observer } from 'mobx-react';
+import { Virtuoso } from 'react-virtuoso';
 import { Text, TextButton } from 'renderer/components';
 import { Row } from 'renderer/components/NewRow';
 import { useServices } from 'renderer/logic/store';
-import { Flex, Spinner, WindowedList } from '@holium/design-system';
+import { Flex, Spinner } from '@holium/design-system';
 import { EmptyGroup } from './SpaceRow';
 import { SpacesActions } from 'renderer/logic/actions/spaces';
 
@@ -35,11 +36,13 @@ const FeaturedListPresenter = () => {
   }
   return (
     <Flex flex={1} width="100%">
-      <WindowedList
+      <Virtuoso
         key={`featured-spaces-${listData.length}`}
-        width={354}
+        style={{
+          width: 354,
+        }}
         data={listData}
-        rowRenderer={(data: any) => {
+        itemContent={(_, data) => {
           const onJoin = async () => {
             setJoining(true);
             SpacesActions.joinSpace(data.path.substring(1))
@@ -75,6 +78,7 @@ const FeaturedListPresenter = () => {
                     height="32px"
                     width="32px"
                     src={data.picture}
+                    alt={data.name}
                   />
                 ) : (
                   <EmptyGroup color={data.color || '#000000'} />

diff --git a/app/src/renderer/apps/Spaces/SpacesList.tsx b/app/src/renderer/apps/Spaces/SpacesList.tsx
@@ -1,14 +1,13 @@
 import { useMemo } from 'react';
 import { observer } from 'mobx-react';
+import { Virtuoso } from 'react-virtuoso';
 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;
@@ -107,12 +106,13 @@ const SpacesListPresenter = ({
 
   return (
     <Flex flex={1} width="100%">
-      <WindowedList
-        rowHeight={56}
+      <Virtuoso
         key={`${spaces.length}-${incoming.length}`}
-        width={354}
+        style={{
+          width: 354,
+        }}
         data={rows}
-        rowRenderer={({ space, visa }) => {
+        itemContent={(_, { space, visa }) => {
           if (space) {
             return (
               <SpaceRow