Add DM custom images, DM statuses, Member Tile statuses

.changeset/feat-add-DM-statuses.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Add statuses to DMs

.changeset/feat-add-custom-DM-looks.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Add custom DM images and descriptions

.changeset/feat-add-statuses-in-Members.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Add statuses to Member Tile

src/app/components/member-tile/MemberTile.tsx

@@ -7,6 +7,8 @@ import { useSableCosmetics } from '$hooks/useSableCosmetics';
 import { useAtomValue } from 'jotai';
 import { nicknamesAtom } from '$state/nicknames';
 import { UserAvatar } from '$components/user-avatar';
+import { useUserPresence } from '$hooks/useUserPresence';
+import { PresenceBadge } from '$components/presence';
 import * as css from './style.css';
 
 const getName = (room: Room, member: RoomMember, nicknames: Record<string, string>) =>
@@ -25,7 +27,7 @@ export const MemberTile = as<'button', MemberTileProps>(
   ({ as: AsMemberTile = 'button', mx, room, member, useAuthentication, after, ...props }, ref) => {
     const nicknames = useAtomValue(nicknamesAtom);
     const name = getName(room, member, nicknames);
-    const username = getMxIdLocalPart(member.userId);
+    const presence = useUserPresence(member.userId ?? '');
 
     const avatarMxcUrl = member.getMxcAvatarUrl();
     const avatarUrl = avatarMxcUrl
@@ -49,11 +51,14 @@ export const MemberTile = as<'button', MemberTileProps>(
           <Text as="span" size="T300" truncate style={{ color, fontFamily: font }}>
             <b>{name}</b>
           </Text>
-          <Box alignItems="Center" justifyContent="SpaceBetween" gap="100">
-            <Text as="span" size="T200" priority="300" truncate>
-              {username}
-            </Text>
-          </Box>
+          {presence && presence.status && (
+            <Box alignItems="Center" gap="100">
+              <PresenceBadge presence={presence.presence} size="200" />
+              <Text as="span" size="T200" priority="300" truncate>
+                {presence.status}
+              </Text>
+            </Box>
+          )}
         </Box>
         {after}
       </AsMemberTile>

src/app/features/common-settings/general/RoomProfile.tsx

@@ -35,6 +35,8 @@ import { useFilePicker } from '$hooks/useFilePicker';
 import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback';
 import { useAlive } from '$hooks/useAlive';
 import { RoomPermissionsAPI } from '$hooks/useRoomPermissions';
+import { useSetting } from '$state/hooks/settings';
+import { settingsAtom } from '$state/settings';
 
 type RoomProfileEditProps = {
   canEditAvatar: boolean;
@@ -294,8 +296,9 @@ export function RoomProfile({ permissions }: RoomProfileProps) {
   const room = useRoom();
   const directs = useAtomValue(mDirectAtom);
   const isDm = directs.has(room.roomId);
+  const [customDMCards] = useSetting(settingsAtom, 'customDMCards');
 
-  const avatar = useRoomAvatar(room, directs.has(room.roomId));
+  const avatar = useRoomAvatar(room, directs.has(room.roomId) && !customDMCards);
   const name = useRoomName(room);
   const topic = useRoomTopic(room);
   const joinRule = useRoomJoinRule(room);

src/app/features/common-settings/members/Members.tsx

@@ -305,6 +305,7 @@ export function Members({ requestClose }: MembersProps) {
 
                   if ('userId' in tagOrMember) {
                     const server = getMxIdServer(tagOrMember.userId);
+                    const username = getMxIdLocalPart(tagOrMember.userId);
                     return (
                       <VirtualTile
                         virtualItem={vItem}
@@ -322,7 +323,12 @@ export function Members({ requestClose }: MembersProps) {
                             useAuthentication={useAuthentication}
                             after={
                               server && (
-                                <Box as="span" shrink="No" alignSelf="End">
+                                <Box as="span" shrink="No" alignSelf="End" direction="Column">
+                                  <ServerBadge
+                                    server={username ?? ''}
+                                    fill="None"
+                                    style={{ alignSelf: 'End' }}
+                                  />
                                   <ServerBadge server={server} fill="None" />
                                 </Box>
                               )

src/app/features/room-nav/RoomNavItem.tsx

@@ -26,7 +26,12 @@ import { useNavigate } from 'react-router-dom';
 import { NavButton, NavItem, NavItemContent, NavItemOptions } from '$components/nav';
 import { UnreadBadge, UnreadBadgeCenter } from '$components/unread-badge';
 import { RoomAvatar, RoomIcon } from '$components/room-avatar';
-import { getDirectRoomAvatarUrl, getRoomAvatarUrl, roomHaveUnread } from '$utils/room';
+import {
+  getDirectRoomAvatarUrl,
+  getRoomAvatarUrl,
+  getStateEvent,
+  roomHaveUnread,
+} from '$utils/room';
 import { nameInitials } from '$utils/common';
 import { useMatrixClient } from '$hooks/useMatrixClient';
 import { useRoomUnread } from '$state/hooks/unread';
@@ -68,6 +73,9 @@ import { useCallPreferencesAtom } from '$state/hooks/callPreferences';
 import { CallControlState } from '$plugins/call/CallControlState';
 import { useAutoDiscoveryInfo } from '$hooks/useAutoDiscoveryInfo';
 import { livekitSupport } from '$hooks/useLivekitSupport';
+import { Presence, useUserPresence } from '$hooks/useUserPresence';
+import { StateEvent } from '$types/matrix/room';
+import { AvatarPresence, PresenceBadge } from '$components/presence';
 import { RoomNavUser } from './RoomNavUser';
 
 /**
@@ -255,13 +263,15 @@ type RoomNavItemProps = {
   notificationMode?: RoomNotificationMode;
   showAvatar?: boolean;
   direct?: boolean;
+  customDMCards?: boolean;
 };
 
 export function RoomNavItem({
   room,
   selected,
   showAvatar,
   direct,
+  customDMCards,
   notificationMode,
   linkPath,
 }: RoomNavItemProps) {
@@ -282,6 +292,14 @@ export function RoomNavItem({
   const dmUserId = direct ? room.getAvatarFallbackMember()?.userId : undefined;
   const matrixRoomName = useRoomName(room);
   const roomName = (dmUserId && nicknames[dmUserId]) || matrixRoomName;
+  const presence = useUserPresence(dmUserId ?? '');
+  const [topicEvent, setTopicEvent] = useState(getStateEvent(room, StateEvent.RoomTopic));
+
+  // Ensures that the description does not stick to the position the room is in the row
+  useEffect(() => setTopicEvent(getStateEvent(room, StateEvent.RoomTopic)), [room, setTopicEvent]);
+  const roomDescription = direct
+    ? (customDMCards && (topicEvent?.getContent().topic as string)) || presence?.status
+    : undefined;
 
   const { navigateRoom } = useRoomNavigate();
   const navigate = useNavigate();
@@ -381,47 +399,69 @@ export function RoomNavItem({
         <NavButton onClick={handleNavItemClick} aria-label={ariaLabel}>
           <NavItemContent>
             <Box as="span" grow="Yes" alignItems="Center" gap="200">
-              <Avatar size="200" radii="400">
-                {showAvatar ? (
-                  <RoomAvatar
-                    roomId={room.roomId}
-                    src={
-                      direct
-                        ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
-                        : getRoomAvatarUrl(mx, room, 96, useAuthentication)
-                    }
-                    uniformIcons
-                    alt={roomName}
-                    renderFallback={() => (
-                      <Text as="span" size="H6">
-                        {nameInitials(roomName)}
-                      </Text>
-                    )}
-                  />
-                ) : (
-                  <RoomIcon
-                    style={{
-                      opacity:
-                        unread || hasRoomUnread || isActiveCall
-                          ? config.opacity.P500
-                          : config.opacity.P300,
-                    }}
-                    filled={selected || isActiveCall}
-                    size="100"
-                    joinRule={room.getJoinRule()}
-                    roomType={room.getType()}
-                  />
-                )}
-              </Avatar>
-              <Box as="span" grow="Yes">
+              <AvatarPresence
+                badge={
+                  presence &&
+                  presence.presence !== Presence.Offline && (
+                    <PresenceBadge presence={presence.presence} size="200" />
+                  )
+                }
+              >
+                <Avatar size="200" radii="400">
+                  {showAvatar ? (
+                    <RoomAvatar
+                      roomId={room.roomId}
+                      src={
+                        ((!direct || customDMCards) &&
+                          getRoomAvatarUrl(mx, room, 96, useAuthentication)) ||
+                        getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
+                      }
+                      uniformIcons
+                      alt={roomName}
+                      renderFallback={() => (
+                        <Text as="span" size="H6">
+                          {nameInitials(roomName)}
+                        </Text>
+                      )}
+                    />
+                  ) : (
+                    <RoomIcon
+                      style={{
+                        opacity:
+                          unread || hasRoomUnread || isActiveCall
+                            ? config.opacity.P500
+                            : config.opacity.P300,
+                      }}
+                      filled={selected || isActiveCall}
+                      size="100"
+                      joinRule={room.getJoinRule()}
+                      roomType={room.getType()}
+                    />
+                  )}
+                </Avatar>
+              </AvatarPresence>
+              <Box as="span" grow="Yes" direction="Column">
                 <Text
-                  priority={unread || hasRoomUnread || isActiveCall ? '500' : '300'}
+                  priority={unread || hasRoomUnread || isActiveCall ? '500' : '400'}
                   as="span"
                   size="Inherit"
                   truncate
                 >
                   {roomName}
                 </Text>
+                {roomDescription && (
+                  <Text
+                    truncate
+                    size="T200"
+                    priority="300"
+                    style={{
+                      opacity: config.opacity.P300,
+                      marginTop: '-2px',
+                    }}
+                  >
+                    {roomDescription}
+                  </Text>
+                )}
               </Box>
               {!optionsVisible && !unread && !selected && typingMember.length > 0 && (
                 <Badge size="300" variant="Secondary" fill="Soft" radii="Pill" outlined>

src/app/features/room-settings/RoomSettings.tsx

@@ -17,6 +17,8 @@ import { Members } from '$features/common-settings/members';
 import { EmojisStickers } from '$features/common-settings/emojis-stickers';
 import { DeveloperTools } from '$features/common-settings/developer-tools';
 import { Cosmetics } from '$features/common-settings/cosmetics/Cosmetics';
+import { settingsAtom } from '$state/settings';
+import { useSetting } from '$state/hooks/settings';
 import { Permissions } from './permissions';
 import { General } from './general';
 import { RoomAbbreviations } from './abbreviations/RoomAbbreviations';
@@ -81,8 +83,9 @@ export function RoomSettings({ initialPage, requestClose }: RoomSettingsProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const mDirects = useAtomValue(mDirectAtom);
+  const [customDMCards] = useSetting(settingsAtom, 'customDMCards');
 
-  const roomAvatar = useRoomAvatar(room, mDirects.has(room.roomId));
+  const roomAvatar = useRoomAvatar(room, mDirects.has(room.roomId) && !customDMCards);
   const roomName = useRoomName(room);
   const joinRuleContent = useRoomJoinRule(room);
 

src/app/features/room/RoomViewHeader.tsx

@@ -350,6 +350,7 @@ export function RoomViewHeader({ callView }: Readonly<{ callView?: boolean }>) {
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const [pinMenuAnchor, setPinMenuAnchor] = useState<RectCords>();
   const direct = useIsDirectRoom();
+  const [customDMCards] = useSetting(settingsAtom, 'customDMCards');
 
   const [chat, setChat] = useAtom(callChatAtom);
   const [threadBrowserOpen, setThreadBrowserOpen] = useAtom(
@@ -366,7 +367,7 @@ export function RoomViewHeader({ callView }: Readonly<{ callView?: boolean }>) {
 
   const encryptionEvent = useStateEvent(room, StateEvent.RoomEncryption);
   const encryptedRoom = !!encryptionEvent;
-  const avatarMxc = useRoomAvatar(room, direct);
+  const avatarMxc = useRoomAvatar(room, direct && !customDMCards);
   const name = useRoomName(room);
   const topic = useRoomTopic(room);
   const avatarUrl = avatarMxc

src/app/features/settings/cosmetics/Themes.tsx

@@ -481,6 +481,7 @@ function PageZoomInput() {
 
 export function Appearance() {
   const [twitterEmoji, setTwitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
+  const [customDMCards, setCustomDMCards] = useSetting(settingsAtom, 'customDMCards');
   const [showEasterEggs, setShowEasterEggs] = useSetting(settingsAtom, 'showEasterEggs');
   const [closeFoldersByDefault, setCloseFoldersByDefault] = useSetting(
     settingsAtom,
@@ -519,6 +520,15 @@ export function Appearance() {
           />
         </SequenceCard>
 
+        <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+          <SettingTile
+            title="Customize DM cards"
+            focusId="customize-dm-cards"
+            description="Show a custom DM card instead of the DM-ed's details"
+            after={<Switch variant="Primary" value={customDMCards} onChange={setCustomDMCards} />}
+          />
+        </SequenceCard>
+
         <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
           <SettingTile
             title="Show Easter Eggs"

src/app/pages/client/direct/Direct.tsx

@@ -177,6 +177,7 @@ export function Direct() {
   const notificationPreferences = useRoomsNotificationPreferencesContext();
   const roomToUnread = useAtomValue(roomToUnreadAtom);
   const navigate = useNavigate();
+  const [customDMCards] = useSetting(settingsAtom, 'customDMCards');
 
   const createDirectSelected = useDirectCreateSelected();
 
@@ -294,6 +295,7 @@ export function Direct() {
                         selected={selected}
                         showAvatar
                         direct
+                        customDMCards={customDMCards}
                         linkPath={getDirectRoomPath(getCanonicalAliasOrRoomId(mx, roomId))}
                         notificationMode={getRoomNotificationMode(
                           notificationPreferences,

src/app/state/settings.ts

@@ -88,6 +88,7 @@ export interface Settings {
   renderRoomColors: boolean;
   renderRoomFonts: boolean;
   captionPosition: CaptionPosition;
+  customDMCards: boolean;
 
   // Sable features!
   sendPresence: boolean;
@@ -187,6 +188,7 @@ const defaultSettings: Settings = {
   renderRoomColors: true,
   renderRoomFonts: true,
   captionPosition: CaptionPosition.Below,
+  customDMCards: true,
 
   // Sable features!
   sendPresence: true,