feat(room-nav): show topic and last-message preview for rooms in the sidebar

.changeset/feat-dm-message-preview.md

@@ -0,0 +1,5 @@
+---
+'@sable/client': minor
+---
+
+feat(dm-list): show last-message preview below DM room name

.changeset/room-message-preview.md

@@ -0,0 +1,5 @@
+---
+'@sable/client': minor
+---
+
+feat(room-nav): show topic and last-message preview for rooms in the sidebar, fetching enough timeline events to handle reactions and edits correctly

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

@@ -70,6 +70,7 @@ import { useAutoDiscoveryInfo } from '$hooks/useAutoDiscoveryInfo';
 import { livekitSupport } from '$hooks/useLivekitSupport';
 import { Presence, useUserPresence } from '$hooks/useUserPresence';
 import { AvatarPresence, PresenceBadge } from '$components/presence';
+import { useRoomLastMessage } from '$hooks/useRoomLastMessage';
 import { RoomNavUser } from './RoomNavUser';
 
 /**
@@ -258,6 +259,9 @@ type RoomNavItemProps = {
   showAvatar?: boolean;
   direct?: boolean;
   customDMCards?: boolean;
+  roomTopicPreview?: boolean;
+  roomMessagePreview?: boolean;
+  dmMessagePreview?: boolean;
 };
 
 export function RoomNavItem({
@@ -266,6 +270,9 @@ export function RoomNavItem({
   showAvatar,
   direct,
   customDMCards,
+  roomTopicPreview = false,
+  roomMessagePreview = false,
+  dmMessagePreview = true,
   notificationMode,
   linkPath,
 }: RoomNavItemProps) {
@@ -287,8 +294,12 @@ export function RoomNavItem({
   const matrixRoomName = useRoomName(room);
   const roomName = (dmUserId && nicknames[dmUserId]) || matrixRoomName;
   const presence = useUserPresence(dmUserId ?? '');
+  const showPreview = direct ? dmMessagePreview : roomMessagePreview;
+  const lastMessage = useRoomLastMessage(showPreview ? room : undefined, mx);
   const getRoomTopic = useRoomTopic(room);
-  const roomTopic = direct ? ((customDMCards && getRoomTopic) ?? presence?.status) : undefined;
+  const roomTopic = direct
+    ? (customDMCards && getRoomTopic) || lastMessage || presence?.status
+    : (roomTopicPreview && getRoomTopic) || (roomMessagePreview ? lastMessage : undefined);
 
   const { navigateRoom } = useRoomNavigate();
   const navigate = useNavigate();

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

@@ -482,11 +482,17 @@ function PageZoomInput() {
 export function Appearance() {
   const [twitterEmoji, setTwitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
   const [customDMCards, setCustomDMCards] = useSetting(settingsAtom, 'customDMCards');
+  const [dmMessagePreview, setDmMessagePreview] = useSetting(settingsAtom, 'dmMessagePreview');
   const [showEasterEggs, setShowEasterEggs] = useSetting(settingsAtom, 'showEasterEggs');
   const [closeFoldersByDefault, setCloseFoldersByDefault] = useSetting(
     settingsAtom,
     'closeFoldersByDefault'
   );
+  const [roomTopicPreview, setRoomTopicPreview] = useSetting(settingsAtom, 'roomTopicPreview');
+  const [roomMessagePreview, setRoomMessagePreview] = useSetting(
+    settingsAtom,
+    'roomMessagePreview'
+  );
 
   return (
     <Box direction="Column" gap="700">
@@ -529,6 +535,43 @@ export function Appearance() {
           />
         </SequenceCard>
 
+        <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+          <SettingTile
+            title="DM Message Preview"
+            focusId="dm-message-preview"
+            description="Show a preview of the last message below DM room names."
+            after={
+              <Switch variant="Primary" value={dmMessagePreview} onChange={setDmMessagePreview} />
+            }
+          />
+        </SequenceCard>
+
+        <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+          <SettingTile
+            title="Room Topic Preview"
+            focusId="room-topic-preview"
+            description="Show the room topic below room names in spaces and Home."
+            after={
+              <Switch variant="Primary" value={roomTopicPreview} onChange={setRoomTopicPreview} />
+            }
+          />
+        </SequenceCard>
+
+        <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+          <SettingTile
+            title="Room Message Preview"
+            focusId="room-message-preview"
+            description="Show the latest message below room names in spaces and Home."
+            after={
+              <Switch
+                variant="Primary"
+                value={roomMessagePreview}
+                onChange={setRoomMessagePreview}
+              />
+            }
+          />
+        </SequenceCard>
+
         <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
           <SettingTile
             title="Show Easter Eggs"

src/app/hooks/useRoomLastMessage.ts

@@ -0,0 +1,95 @@
+import { useEffect, useState } from 'react';
+import {
+  MatrixClient,
+  MatrixEvent,
+  MatrixEventEvent,
+  MsgType,
+  Room,
+  RoomEvent as RoomEventEnum,
+} from '$types/matrix-sdk';
+import { MessageEvent } from '$types/matrix/room';
+
+function eventToPreviewText(ev: MatrixEvent): string | undefined {
+  if (ev.isRedacted()) return undefined;
+
+  const type = ev.getType();
+
+  if (type === MessageEvent.RoomMessageEncrypted) return '🔒 Encrypted message';
+
+  if (type === MessageEvent.RoomMessage) {
+    const content = ev.getContent();
+    const { msgtype } = content;
+    if (msgtype === MsgType.Text || msgtype === MsgType.Emote || msgtype === MsgType.Notice) {
+      return content.body;
+    }
+    if (msgtype === MsgType.Image) return '📷 Image';
+    if (msgtype === MsgType.Video) return '📹 Video';
+    if (msgtype === MsgType.Audio) return '🎵 Audio';
+    if (msgtype === MsgType.File) return '📎 File';
+  }
+
+  if (type === MessageEvent.Sticker) {
+    return `🎉 ${ev.getContent().body ?? 'Sticker'}`;
+  }
+
+  return undefined;
+}
+
+function getLastMessageText(room: Room, mx: MatrixClient): string | undefined {
+  const events = room.getLiveTimeline().getEvents();
+  const match = [...events].reverse().find((ev) => eventToPreviewText(ev) !== undefined);
+  if (!match) return undefined;
+  const text = eventToPreviewText(match);
+  if (!text) return undefined;
+
+  const senderId = match.getSender();
+  let prefix: string;
+  if (senderId === mx.getUserId()) {
+    prefix = 'You';
+  } else {
+    prefix = room.getMember(senderId ?? '')?.name ?? senderId ?? 'Unknown';
+  }
+  return `${prefix}: ${text}`;
+}
+
+/**
+ * Reactively returns a human-readable preview of the last message in a room's
+ * live timeline, prefixed with "You:" or the sender's display name.
+ * Listens to Timeline and Decrypted events so the preview updates as messages
+ * arrive or are decrypted.
+ * Pass `undefined` for room to disable (returns `undefined`).
+ */
+export function useRoomLastMessage(
+  room: Room | undefined,
+  mx: MatrixClient | undefined
+): string | undefined {
+  const [text, setText] = useState<string | undefined>(() =>
+    room && mx ? getLastMessageText(room, mx) : undefined
+  );
+
+  useEffect(() => {
+    if (!room || !mx) {
+      setText(undefined);
+      return undefined;
+    }
+    setText(getLastMessageText(room, mx));
+
+    const update = () => setText(getLastMessageText(room, mx));
+    room.on(RoomEventEnum.Timeline, update);
+    room.on(RoomEventEnum.LocalEchoUpdated, update);
+
+    // Re-check when any event in this room is decrypted (encrypted → plaintext).
+    const onDecrypted = (ev: MatrixEvent) => {
+      if (ev.getRoomId() === room.roomId) update();
+    };
+    mx.on(MatrixEventEvent.Decrypted, onDecrypted);
+
+    return () => {
+      room.off(RoomEventEnum.Timeline, update);
+      room.off(RoomEventEnum.LocalEchoUpdated, update);
+      mx.off(MatrixEventEvent.Decrypted, onDecrypted);
+    };
+  }, [room, mx]);
+
+  return text;
+}

src/app/pages/client/ClientRoot.tsx

@@ -48,6 +48,7 @@ import { useSyncNicknames } from '$hooks/useNickname';
 import { useAppVisibility } from '$hooks/useAppVisibility';
 import { getHomePath } from '$pages/pathUtils';
 import { useClientConfig } from '$hooks/useClientConfig';
+import { getSettings } from '$state/settings';
 import { pushSessionToSW } from '../../../sw-session';
 import { SyncStatus } from './SyncStatus';
 import { SpecVersions } from './SpecVersions';
@@ -212,12 +213,18 @@ export function ClientRoot({ children }: ClientRootProps) {
 
   const [startState, startMatrix] = useAsyncCallback<void, Error, [MatrixClient]>(
     useCallback(
-      (m) =>
-        startClient(m, {
+      (m) => {
+        const s = getSettings();
+        const needsPreviewTimeline = s.dmMessagePreview || s.roomMessagePreview;
+        return startClient(m, {
           baseUrl: activeSession?.baseUrl,
-          slidingSync: clientConfig.slidingSync,
+          slidingSync: {
+            ...clientConfig.slidingSync,
+            listTimelineLimit: needsPreviewTimeline ? 5 : undefined,
+          },
           sessionSlidingSyncOptIn: activeSession?.slidingSyncOptIn,
-        }),
+        });
+      },
       [activeSession?.baseUrl, activeSession?.slidingSyncOptIn, clientConfig.slidingSync]
     )
   );

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

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

src/app/pages/client/home/Home.tsx

@@ -199,6 +199,8 @@ export function Home() {
   const notificationPreferences = useRoomsNotificationPreferencesContext();
   const roomToUnread = useAtomValue(roomToUnreadAtom);
   const navigate = useNavigate();
+  const [roomTopicPreview] = useSetting(settingsAtom, 'roomTopicPreview');
+  const [roomMessagePreview] = useSetting(settingsAtom, 'roomMessagePreview');
 
   const selectedRoomId = useSelectedRoom();
   const createRoomSelected = useHomeCreateSelected();
@@ -344,6 +346,8 @@ export function Home() {
                       <RoomNavItem
                         room={room}
                         selected={selected}
+                        roomTopicPreview={roomTopicPreview}
+                        roomMessagePreview={roomMessagePreview}
                         linkPath={getHomeRoomPath(getCanonicalAliasOrRoomId(mx, roomId))}
                         notificationMode={getRoomNotificationMode(
                           notificationPreferences,

src/app/pages/client/space/Space.tsx

@@ -533,6 +533,8 @@ export function Space() {
    * Determines the depth limit for the joined space hierarchy and the SpaceNavItems to start appearing
    */
   const [subspaceHierarchyLimit] = useSetting(settingsAtom, 'subspaceHierarchyLimit');
+  const [roomTopicPreview] = useSetting(settingsAtom, 'roomTopicPreview');
+  const [roomMessagePreview] = useSetting(settingsAtom, 'roomMessagePreview');
   /**
    * Creates an SVG used for connecting spaces to their subrooms.
    * @param virtualizedItems - The virtualized item list that will be used to render elements in the nav
@@ -826,6 +828,8 @@ export function Space() {
                         selected={selectedRoomId === roomId}
                         showAvatar={mDirects.has(roomId)}
                         direct={mDirects.has(roomId)}
+                        roomTopicPreview={roomTopicPreview}
+                        roomMessagePreview={roomMessagePreview}
                         linkPath={getToLink(roomId)}
                         notificationMode={getRoomNotificationMode(
                           notificationPreferences,

src/app/state/settings.ts

@@ -118,6 +118,9 @@ export interface Settings {
   mentionInReplies: boolean;
   showPersonaSetting: boolean;
   closeFoldersByDefault: boolean;
+  roomTopicPreview: boolean;
+  roomMessagePreview: boolean;
+  dmMessagePreview: boolean;
 
   // furry stuff
   renderAnimals: boolean;
@@ -219,6 +222,9 @@ const defaultSettings: Settings = {
   mentionInReplies: true,
   showPersonaSetting: false,
   closeFoldersByDefault: false,
+  roomTopicPreview: false,
+  roomMessagePreview: false,
+  dmMessagePreview: true,
 
   // furry stuff
   renderAnimals: true,