Re-sort inbox list on message sent/received

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

@@ -33,7 +33,7 @@ export const CourierAppPresenter = () => {
     clearInnerNavigation();
   }, [chatStore.subroute]);
 
-  if (chatStore.loader.isFirstLoad) {
+  if (chatStore.inboxInitLoader.isFirstLoad) {
     return (
       <Flex
         position="absolute"

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

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { observer } from 'mobx-react';
 import styled from 'styled-components';
 
-import { Button, Flex, Icon } from '@holium/design-system/general';
+import { Button, Flex, Icon, Spinner } from '@holium/design-system/general';
 import { Menu, MenuItemProps } from '@holium/design-system/navigation';
 
 import { useAppState } from 'renderer/stores/app.store';
@@ -30,15 +30,13 @@ type Props = {
   path: string;
   isMuted: boolean;
   hasMenu: boolean;
-  rightAction?: React.ReactNode;
   forceBackButton?: boolean;
   isStandaloneChat?: boolean;
   onBack: () => void;
 };
 
 const ChatLogHeaderPresenter = ({
   path,
-  rightAction,
   isMuted,
   hasMenu = true,
   forceBackButton = false,
@@ -47,7 +45,7 @@ const ChatLogHeaderPresenter = ({
 }: Props) => {
   const { loggedInAccount, shellStore } = useAppState();
   const { chatStore } = useShipStore();
-  const { selectedChat, setSubroute, toggleMuted } = chatStore;
+  const { selectedChat, chatLoader, setSubroute, toggleMuted } = chatStore;
   const isSpaceChat = selectedChat?.type === 'space';
 
   const chatLogId = useMemo(() => `chat-log-${path}`, [path]);
@@ -144,8 +142,10 @@ const ChatLogHeaderPresenter = ({
         )}
         <ChatLogHeaderContent isStandaloneChat={isStandaloneChat} />
       </Flex>
-      <Flex>
-        {rightAction}
+      <Flex gap={8}>
+        {chatLoader.isLoading && (
+          <Spinner size="16px" width={1.5} color="var(--rlm-text-color)" />
+        )}
         {hasMenu && (
           <Menu
             id={`chat-${path}-menu`}

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

@@ -20,7 +20,6 @@ type ChatRowProps = {
   title: string;
   peers: string[];
   isAdmin: boolean;
-  muted: boolean;
   metadata: any;
   timestamp: number;
   type: ChatPathType;
@@ -230,14 +229,7 @@ export const ChatRowPresenter = ({
                 >
                   {lastMessageTimestamp}
                 </Text.Custom>
-                {isMuted && (
-                  <Icon
-                    name="NotificationOff"
-                    size={12}
-                    fill="text"
-                    opacity={0.3}
-                  />
-                )}
+                {unreadCount > 0 && <UnreadBadge count={unreadCount} />}
               </Flex>
             </Flex>
             <Flex
@@ -265,7 +257,19 @@ export const ChatRowPresenter = ({
               >
                 {lastMessageUpdated}
               </Text.Custom>
-              <UnreadBadge count={unreadCount} />
+              <Flex gap="6px" alignItems="center">
+                {isMuted && (
+                  <Icon
+                    name="NotificationOff"
+                    size={12}
+                    fill="text"
+                    opacity={0.3}
+                  />
+                )}
+                {isPinned && (
+                  <Icon name="Pin" size={12} fill="text" opacity={0.3} />
+                )}
+              </Flex>
             </Flex>
           </Flex>
         </Flex>

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

@@ -50,7 +50,7 @@ const ChatLogBodyPresenter = ({
   onSend,
 }: Props) => {
   const { chatStore } = useShipStore();
-  const { selectedChat, setSubroute, inboxLoader } = chatStore;
+  const { selectedChat, setSubroute, chatLoader } = chatStore;
 
   const messages = selectedChat?.messages ?? [];
 
@@ -93,7 +93,7 @@ const ChatLogBodyPresenter = ({
           pinnedChatMessage={pinnedChatMessage}
           isStandaloneChat={isStandaloneChat}
           isEmpty={messages.length === 0}
-          isLoaded={inboxLoader.isLoaded}
+          isLoaded={chatLoader.isLoaded}
         />
       </Flex>
       <ChatInputContainer isStandaloneChat={isStandaloneChat}>

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

@@ -34,12 +34,16 @@ export const ChatLogBodyList = ({
   isStandaloneChat,
   pinnedChatMessage,
 }: Props) => {
-  if (isEmpty && isLoaded) {
-    return (
-      <Text.Custom textAlign="center" width={300} fontSize={3} opacity={0.5}>
-        You haven't sent or received any messages in this chat yet.
-      </Text.Custom>
-    );
+  if (isEmpty) {
+    if (isLoaded) {
+      return (
+        <Text.Custom textAlign="center" width={300} fontSize={3} opacity={0.5}>
+          You haven't sent or received any messages in this chat yet.
+        </Text.Custom>
+      );
+    }
+
+    return null;
   }
 
   return (

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

@@ -15,8 +15,15 @@ export const InboxPresenter = ({ isStandaloneChat = false }: Props) => {
   const { loggedInAccount, shellStore } = useAppState();
   const { chatStore, spacesStore } = useShipStore();
 
-  const { sortedChatList, loader, setChat, setSubroute, isChatPinned } =
-    chatStore;
+  const {
+    sortedChatList,
+    sortedStandaloneChatList,
+    inboxLoader,
+    inboxMetadataLoader,
+    setChat,
+    setSubroute,
+    isChatPinned,
+  } = chatStore;
   const currentSpace = spacesStore.selected;
 
   useEffect(() => {
@@ -25,11 +32,11 @@ export const InboxPresenter = ({ isStandaloneChat = false }: Props) => {
 
   return (
     <InboxBody
-      inboxes={sortedChatList}
+      inboxes={isStandaloneChat ? sortedStandaloneChatList : sortedChatList}
       accountIdentity={loggedInAccount?.serverId}
       spacePath={currentSpace?.path}
       isStandaloneChat={isStandaloneChat}
-      isLoading={loader.isLoading}
+      isLoading={inboxLoader.isLoading || inboxMetadataLoader.isLoading}
       isChatPinned={isChatPinned}
       onClickInbox={(path) => {
         setChat(path);

app/src/renderer/apps/Courier/views/Inbox/InboxBody.tsx

@@ -85,7 +85,7 @@ export const InboxBody = ({
           </Button.IconButton>
         </Flex>
       </InboxBodyHeaderContainer>
-      {isLoading && <InboxBodyLoadingHeader />}
+      {isLoading && isStandaloneChat && <InboxBodyLoadingHeader />}
       <InboxBodyList
         inboxes={filteredInboxes}
         spacePath={spacePath}

app/src/renderer/apps/Courier/views/Inbox/InboxBodyLoadingHeader.tsx

@@ -19,6 +19,6 @@ export const InboxBodyLoadingHeader = () => (
     transition={{ duration: 0.2, ease: 'easeInOut' }}
   >
     <Spinner size="16px" width={1.5} color="var(--rlm-text-color)" />
-    <Text.Body>Loading new messages...</Text.Body>
+    <Text.Body>Syncing messages...</Text.Body>
   </Container>
 );

app/src/renderer/apps/Courier/views/Inbox/InboxRow.styles.tsx

@@ -16,18 +16,10 @@ export const StyledInboxRowContainer = styled(Box)<{
   `}
 `;
 
-export const StyledInboxRow = styled(Box)<{
-  isPinned: boolean;
-}>`
+export const StyledInboxRow = styled(Box)`
   width: 100%;
   min-width: 0;
   align-items: center;
   z-index: 2;
   border-radius: 6px;
-
-  ${({ isPinned }) =>
-    isPinned &&
-    `
-    background: var(--rlm-overlay-hover-color);
-  `}
 `;

app/src/renderer/apps/Courier/views/Inbox/InboxRow.tsx

@@ -39,12 +39,7 @@ export const InboxRow = ({
       isSelectedSpaceChat={isSelectedSpaceChat}
       className={className}
     >
-      <StyledInboxRow
-        className="chat-inbox-row"
-        isPinned={isPinned}
-        // layout="preserve-aspect"
-        // layoutId={isStandaloneChat ? undefined : `chat-${inbox.path}-container`}
-      >
+      <StyledInboxRow className="chat-inbox-row">
         <ChatRow
           path={inbox.path}
           title={inbox.metadata.title}
@@ -54,7 +49,6 @@ export const InboxRow = ({
           timestamp={inbox.createdAt || inbox.metadata.timestamp}
           metadata={inbox.metadata}
           peersGetBacklog={inbox.peersGetBacklog}
-          muted={inbox.muted}
           isStandaloneChat={isStandaloneChat}
           onClick={(evt) => {
             evt.stopPropagation();

app/src/renderer/apps/StandaloneChat/StandaloneChatBody.tsx

@@ -53,7 +53,7 @@ export const StandaloneChatBodyPresenter = () => {
     }
   }, [chatStore.subroute, chatStore.selectedChat, chatStore.inbox]);
 
-  if (chatStore.loader.isFirstLoad) {
+  if (chatStore.inboxInitLoader.isFirstLoad) {
     return (
       <Flex
         position="absolute"

app/src/renderer/apps/StandaloneChat/StandaloneChatPassport.tsx

@@ -26,7 +26,6 @@ const StandaloneChatPassportPresenter = ({ onBack }: Props) => {
     >
       <ChatLogHeader
         path={loggedInAccount.serverId}
-        rightAction={null}
         isMuted={false}
         hasMenu={false}
         forceBackButton