add invitations

src/app/organisms/room/RoomView.jsx

@@ -35,6 +35,7 @@ function RoomView({ room, eventId }) {
   const canMessage = myUserId
     ? canSendEvent(EventType.RoomMessage, getPowerLevel(myUserId))
     : false;
+  // FIXME: decide can message on membership based also
 
   useEffect(() => {
     const settingsToggle = (isVisible) => {

src/app/pages/App.tsx

@@ -44,7 +44,7 @@ import { RoomViewer } from '../organisms/room/Room';
 import { Direct } from './client/direct';
 import { SpaceViewer } from './client/space';
 import { Explore, ExploreRedirect, FeaturedRooms, PublicRooms } from './client/explore';
-import { Notifications, Inbox, InboxRedirect } from './client/inbox';
+import { Notifications, Inbox, InboxRedirect, Invites } from './client/inbox';
 import { setAfterLoginRedirectPath } from './afterLoginRedirectPath';
 
 const queryClient = new QueryClient();
@@ -108,7 +108,7 @@ const createRouter = (clientConfig: ClientConfig) => {
           <Route path={INBOX_PATH} element={<Inbox />}>
             <Route index element={<InboxRedirect />} />
             <Route path={_NOTIFICATIONS_PATH} element={<Notifications />} />
-            <Route path={_INVITES_PATH} element={<p>invites</p>} />
+            <Route path={_INVITES_PATH} element={<Invites />} />
           </Route>
         </Route>
       </Route>

src/app/pages/client/inbox/Invites.tsx

@@ -0,0 +1,266 @@
+import React, { useCallback, useRef, useState } from 'react';
+import {
+  Avatar,
+  Box,
+  Button,
+  Icon,
+  Icons,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Scroll,
+  Spinner,
+  Text,
+  color,
+  config,
+} from 'folds';
+import { useAtomValue } from 'jotai';
+import FocusTrap from 'focus-trap-react';
+import { MatrixError, Room } from 'matrix-js-sdk';
+import { Page, PageContent, PageContentCenter, PageHeader } from '../../../components/page';
+import { useDirectInvites, useRoomInvites, useSpaceInvites } from '../../../state/hooks/inviteList';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { allInvitesAtom } from '../../../state/room-list/inviteList';
+import { mDirectAtom } from '../../../state/mDirectList';
+import { SequenceCard } from '../../../components/sequence-card';
+import { getMemberDisplayName, getRoomAvatarUrl, isDirectInvite } from '../../../utils/room';
+import { nameInitials } from '../../../utils/common';
+import { RoomAvatar } from '../../../components/room-avatar';
+import { addRoomIdToMDirect, getMxIdLocalPart, guessDmRoomUserId } from '../../../utils/matrix';
+import { Time } from '../../../components/message';
+import { StateEvent } from '../../../../types/matrix/room';
+import { useStateEvent } from '../../../hooks/useStateEvent';
+import { useElementSizeObserver } from '../../../hooks/useElementSizeObserver';
+import { onEnterOrSpace } from '../../../utils/keyboard';
+import { RoomTopicViewer } from '../../../components/room-topic-viewer';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
+
+const COMPACT_CARD_WIDTH = 548;
+
+type InviteCardProps = {
+  room: Room;
+  userId: string;
+  compact?: boolean;
+  onNavigate: (roomId: string) => void;
+};
+function InviteCard({ room, userId, compact, onNavigate }: InviteCardProps) {
+  const mx = useMatrixClient();
+  const roomName = room.name || room.getCanonicalAlias() || room.roomId;
+  const member = room.getMember(userId);
+  const memberEvent = member?.events.member;
+  const memberTs = memberEvent?.getTs() ?? 0;
+  const senderId = memberEvent?.getSender();
+  const senderName = senderId
+    ? getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId
+    : undefined;
+
+  const topicEvent = useStateEvent(room, StateEvent.RoomTopic);
+  const topic = (topicEvent?.getContent().topic as string) || undefined;
+
+  const [viewTopic, setViewTopic] = useState(false);
+  const closeTopic = () => setViewTopic(false);
+  const openTopic = () => setViewTopic(true);
+
+  const [joinState, join] = useAsyncCallback<void, MatrixError, []>(
+    useCallback(async () => {
+      const dmUserId = isDirectInvite(room, userId) ? guessDmRoomUserId(room, userId) : undefined;
+
+      await mx.joinRoom(room.roomId);
+      if (dmUserId) {
+        await addRoomIdToMDirect(mx, room.roomId, dmUserId);
+      }
+      onNavigate(room.roomId);
+    }, [mx, room, userId, onNavigate])
+  );
+  const [leaveState, leave] = useAsyncCallback<Record<string, never>, MatrixError, []>(
+    useCallback(() => mx.leave(room.roomId), [mx, room])
+  );
+
+  const joining =
+    joinState.status === AsyncStatus.Loading || joinState.status === AsyncStatus.Success;
+  const leaving =
+    leaveState.status === AsyncStatus.Loading || leaveState.status === AsyncStatus.Success;
+
+  return (
+    <SequenceCard
+      variant="SurfaceVariant"
+      direction="Column"
+      gap="200"
+      style={{ padding: config.space.S400, paddingTop: config.space.S200 }}
+    >
+      <Box gap="200" alignItems="Baseline">
+        <Box grow="Yes">
+          <Text size="T200" priority="300" truncate>
+            Invited by <b>{senderName}</b>
+          </Text>
+        </Box>
+        <Box shrink="No">
+          <Time size="T200" ts={memberTs} priority="300" />
+        </Box>
+      </Box>
+      <Box gap="300">
+        <Avatar size="300">
+          <RoomAvatar
+            variant="Secondary"
+            src={getRoomAvatarUrl(mx, room, 96)}
+            alt={roomName}
+            renderInitials={() => (
+              <Text as="span" size="H6">
+                {nameInitials(roomName)}
+              </Text>
+            )}
+          />
+        </Avatar>
+        <Box direction={compact ? 'Column' : 'Row'} grow="Yes" gap="200">
+          <Box grow="Yes" direction="Column" gap="200">
+            <Box direction="Column">
+              <Text size="T300" truncate>
+                <b>{roomName}</b>
+              </Text>
+              {topic && (
+                <Text
+                  size="T200"
+                  onClick={openTopic}
+                  onKeyDown={onEnterOrSpace(openTopic)}
+                  tabIndex={0}
+                  truncate
+                >
+                  {topic}
+                </Text>
+              )}
+              <Overlay open={viewTopic} backdrop={<OverlayBackdrop />}>
+                <OverlayCenter>
+                  <FocusTrap
+                    focusTrapOptions={{
+                      initialFocus: false,
+                      clickOutsideDeactivates: true,
+                      onDeactivate: closeTopic,
+                    }}
+                  >
+                    <RoomTopicViewer
+                      name={roomName}
+                      topic={topic ?? ''}
+                      requestClose={closeTopic}
+                    />
+                  </FocusTrap>
+                </OverlayCenter>
+              </Overlay>
+            </Box>
+            {joinState.status === AsyncStatus.Error && (
+              <Text size="T200" style={{ color: color.Critical.Main }}>
+                {joinState.error.message}
+              </Text>
+            )}
+            {leaveState.status === AsyncStatus.Error && (
+              <Text size="T200" style={{ color: color.Critical.Main }}>
+                {leaveState.error.message}
+              </Text>
+            )}
+          </Box>
+          <Box gap="200" shrink="No" alignItems="Center">
+            <Button
+              onClick={leave}
+              size="300"
+              variant="Secondary"
+              fill="Soft"
+              disabled={joining || leaving}
+              before={leaving ? <Spinner variant="Secondary" size="100" /> : undefined}
+            >
+              <Text size="B300">Decline</Text>
+            </Button>
+            <Button
+              onClick={join}
+              size="300"
+              variant="Primary"
+              fill="Soft"
+              outlined
+              disabled={joining || leaving}
+              before={joining ? <Spinner variant="Primary" fill="Soft" size="100" /> : undefined}
+            >
+              <Text size="B300">Accept</Text>
+            </Button>
+          </Box>
+        </Box>
+      </Box>
+    </SequenceCard>
+  );
+}
+
+export function Invites() {
+  const mx = useMatrixClient();
+  const userId = mx.getUserId()!;
+  const mDirects = useAtomValue(mDirectAtom);
+  const directInvites = useDirectInvites(mx, allInvitesAtom, mDirects);
+  const spaceInvites = useSpaceInvites(mx, allInvitesAtom);
+  const roomInvites = useRoomInvites(mx, allInvitesAtom, mDirects);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [compact, setCompact] = useState(document.body.clientWidth <= COMPACT_CARD_WIDTH);
+  useElementSizeObserver(
+    useCallback(() => containerRef.current, []),
+    useCallback((width) => setCompact(width <= COMPACT_CARD_WIDTH), [])
+  );
+
+  const { navigateRoom, navigateSpace } = useRoomNavigate();
+
+  const renderInvite = (roomId: string, handleNavigate: (rId: string) => void) => {
+    const room = mx.getRoom(roomId);
+    if (!room) return null;
+    return (
+      <InviteCard
+        key={roomId}
+        room={room}
+        userId={userId}
+        compact={compact}
+        onNavigate={handleNavigate}
+      />
+    );
+  };
+
+  return (
+    <Page>
+      <PageHeader>
+        <Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
+          <Icon size="400" src={Icons.Message} />
+          <Text size="H3" truncate>
+            Invitations
+          </Text>
+        </Box>
+      </PageHeader>
+      <Box grow="Yes">
+        <Scroll hideTrack visibility="Hover">
+          <PageContent>
+            <PageContentCenter>
+              <Box ref={containerRef} direction="Column" gap="600">
+                {directInvites.length > 0 && (
+                  <Box direction="Column" gap="200">
+                    <Text size="H4">Direct Messages</Text>
+                    <Box direction="Column" gap="100">
+                      {directInvites.map((roomId) => renderInvite(roomId, navigateRoom))}
+                    </Box>
+                  </Box>
+                )}
+                {spaceInvites.length > 0 && (
+                  <Box direction="Column" gap="200">
+                    <Text size="H4">Spaces</Text>
+                    <Box direction="Column" gap="100">
+                      {spaceInvites.map((roomId) => renderInvite(roomId, navigateSpace))}
+                    </Box>
+                  </Box>
+                )}
+                {roomInvites.length > 0 && (
+                  <Box direction="Column" gap="200">
+                    <Text size="H4">Rooms</Text>
+                    <Box direction="Column" gap="100">
+                      {roomInvites.map((roomId) => renderInvite(roomId, navigateRoom))}
+                    </Box>
+                  </Box>
+                )}
+              </Box>
+            </PageContentCenter>
+          </PageContent>
+        </Scroll>
+      </Box>
+    </Page>
+  );
+}

src/app/pages/client/inbox/index.ts

@@ -1,2 +1,3 @@
 export * from './Inbox';
 export * from './Notifications';
+export * from './Invites';

src/app/state/room-list/utils.ts

@@ -38,7 +38,9 @@ export const useBindRoomsWithMembershipsAtom = (
     };
 
     const handleMembershipChange = (room: Room) => {
-      if (!satisfyMembership(room)) {
+      if (satisfyMembership(room)) {
+        setRoomsAtom({ type: 'PUT', roomId: room.roomId });
+      } else {
         setRoomsAtom({ type: 'DELETE', roomId: room.roomId });
       }
     };

src/app/utils/matrix.ts

@@ -8,10 +8,12 @@ import {
   MatrixError,
   MatrixEvent,
   Room,
+  RoomMember,
   UploadProgress,
   UploadResponse,
 } from 'matrix-js-sdk';
 import { IImageInfo, IThumbnailContent, IVideoInfo } from '../../types/matrix/common';
+import { AccountDataEvent } from '../../types/matrix/accountData';
 
 export const matchMxId = (id: string): RegExpMatchArray | null =>
   id.match(/^([@!$+#])(\S+):(\S+)$/);
@@ -172,3 +174,79 @@ export const getDMRoomFor = (mx: MatrixClient, userId: string): Room | undefined
 
   return dmLikeRooms.find((room) => room.getMember(userId));
 };
+
+export const guessDmRoomUserId = (room: Room, myUserId: string): string => {
+  const getOldestMember = (members: RoomMember[]): RoomMember | undefined => {
+    let oldestMemberTs: number | undefined;
+    let oldestMember: RoomMember | undefined;
+
+    const pickOldestMember = (member: RoomMember) => {
+      if (member.userId === myUserId) return;
+
+      if (
+        oldestMemberTs === undefined ||
+        (member.events.member && member.events.member.getTs() < oldestMemberTs)
+      ) {
+        oldestMember = member;
+        oldestMemberTs = member.events.member?.getTs();
+      }
+    };
+
+    members.forEach(pickOldestMember);
+
+    return oldestMember;
+  };
+
+  // Pick the joined user who's been here longest (and isn't us),
+  const member = getOldestMember(room.getJoinedMembers());
+  if (member) return member.userId;
+
+  // if there are no joined members other than us, use the oldest member
+  const member1 = getOldestMember(room.currentState.getMembers());
+  return member1?.userId ?? myUserId;
+};
+
+export const addRoomIdToMDirect = async (
+  mx: MatrixClient,
+  roomId: string,
+  userId: string
+): Promise<void> => {
+  const mDirectsEvent = mx.getAccountData(AccountDataEvent.Direct);
+  const userIdToRoomIds: Record<string, string[]> = mDirectsEvent?.getContent() ?? {};
+
+  // remove it from the lists of any others users
+  // (it can only be a DM room for one person)
+  Object.keys(userIdToRoomIds).forEach((targetUserId) => {
+    const roomIds = userIdToRoomIds[targetUserId];
+
+    if (targetUserId !== userId) {
+      const indexOfRoomId = roomIds.indexOf(roomId);
+      if (indexOfRoomId > -1) {
+        roomIds.splice(indexOfRoomId, 1);
+      }
+    }
+  });
+
+  const roomIds = userIdToRoomIds[userId] || [];
+  if (roomIds.indexOf(roomId) === -1) {
+    roomIds.push(roomId);
+  }
+  userIdToRoomIds[userId] = roomIds;
+
+  await mx.setAccountData(AccountDataEvent.Direct, userIdToRoomIds);
+};
+
+export const removeRoomIdFromMDirect = async (mx: MatrixClient, roomId: string): Promise<void> => {
+  const mDirectsEvent = mx.getAccountData(AccountDataEvent.Direct);
+  const userIdToRoomIds: Record<string, string[]> = mDirectsEvent?.getContent() ?? {};
+
+  Object.keys(userIdToRoomIds).forEach((targetUserId) => {
+    const roomIds = userIdToRoomIds[targetUserId];
+    const indexOfRoomId = roomIds.indexOf(roomId);
+    if (indexOfRoomId > -1) {
+      roomIds.splice(indexOfRoomId, 1);
+    }
+  });
+
+  await mx.setAccountData(AccountDataEvent.Direct, userIdToRoomIds);
+};