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

@@ -72,6 +72,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';
 
 /**
@@ -260,6 +261,9 @@ type RoomNavItemProps = {
   showAvatar?: boolean;
   direct?: boolean;
   customDMCards?: boolean;
+  roomTopicPreview?: boolean;
+  roomMessagePreview?: boolean;
+  dmMessagePreview?: boolean;
 };
 
 export function RoomNavItem({
@@ -268,6 +272,9 @@ export function RoomNavItem({
   showAvatar,
   direct,
   customDMCards,
+  roomTopicPreview = false,
+  roomMessagePreview = false,
+  dmMessagePreview = true,
   notificationMode,
   linkPath,
 }: RoomNavItemProps) {
@@ -289,8 +296,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

@@ -367,12 +367,18 @@ 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 [themeBrowserOpen, setThemeBrowserOpen] = useState(false);
   const [closeFoldersByDefault, setCloseFoldersByDefault] = useSetting(
     settingsAtom,
     'closeFoldersByDefault'
   );
+  const [roomTopicPreview, setRoomTopicPreview] = useSetting(settingsAtom, 'roomTopicPreview');
+  const [roomMessagePreview, setRoomMessagePreview] = useSetting(
+    settingsAtom,
+    'roomMessagePreview'
+  );
 
   return (
     <Box direction="Column" gap="700">
@@ -425,6 +431,51 @@ 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/timeline/useTimelineSync.ts

@@ -489,7 +489,7 @@ export function useTimelineSync({
             setUnreadInfo(getRoomUnreadInfo(room));
           }
 
-          scrollToBottom(mEvt.getSender() === mx.getUserId() ? 'instant' : 'smooth');
+          scrollToBottom();
           lastScrolledAtEventsLengthRef.current = eventsLengthRef.current + 1;
 
           setTimeline((ct) => ({ ...ct }));