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

.changeset/room-message-preview.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Show topic and last-message preview below room and DM names in the sidebar.

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';
 import { SidebarUnreadBadge } from '$components/sidebar';
 
@@ -266,6 +267,9 @@ type RoomNavItemProps = {
   customDMCards?: boolean;
   hideText?: boolean;
   joinCallOnSingleClick?: boolean;
+  roomTopicPreview?: boolean;
+  roomMessagePreview?: boolean;
+  dmMessagePreview?: boolean;
 };
 
 export function RoomNavItem({
@@ -274,6 +278,9 @@ export function RoomNavItem({
   showAvatar,
   direct,
   customDMCards,
+  roomTopicPreview = false,
+  roomMessagePreview = false,
+  dmMessagePreview = true,
   notificationMode,
   linkPath,
   hideText,
@@ -297,8 +304,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

@@ -784,12 +784,18 @@ export function Appearance({
   const [sidebarSelector, setSidebarSelector] = useState('roomSidebarWidth');
   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">
@@ -842,6 +848,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"