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

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

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

.changeset/room-message-preview.md

@@ -0,0 +1,5 @@
+---
+default: 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"