fix(perf,a11y): selectAtom for unread subscriptions, semantic headings, Perf-5 binary search

Perf-3: Replace raw roomToUnreadAtom subscription in Home, Direct, Space with
  selectAtom-derived Set<string> — components now only re-render when rooms
  gain/lose unread presence, not on every notification count update
Perf-5: RoomTimeline eventRenderer now uses binary search on precomputed
  timelineSegments instead of O(N×T) linear scan per visible message
A11y L-1: Add as=h2 semantic heading to Home, Direct, Inbox, Space page nav
  titles so screen readers announce page sections correctly

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/components/AccountDataEditor.tsx

@@ -294,7 +294,7 @@ export function AccountDataEditor({
             </Chip>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/components/DeviceVerification.tsx

@@ -261,7 +261,7 @@ export function DeviceVerification({ request, onExit }: DeviceVerificationProps)
               <Box grow="Yes">
                 <Text size="H4">Device Verification</Text>
               </Box>
-              <IconButton size="300" radii="300" onClick={handleCancel}>
+              <IconButton size="300" radii="300" onClick={handleCancel} aria-label="Cancel verification">
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>

src/app/components/DeviceVerificationSetup.tsx

@@ -301,7 +301,7 @@ export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerifica
           <Box grow="Yes">
             <Text size="H4">Setup Device Verification</Text>
           </Box>
-          <IconButton size="300" radii="300" onClick={onCancel}>
+          <IconButton size="300" radii="300" onClick={onCancel} aria-label="Cancel">
             <Icon src={Icons.Cross} />
           </IconButton>
         </Header>

src/app/components/editor/Toolbar.tsx

@@ -54,8 +54,8 @@ function BtnTooltip({ text, shortCode }: { text: string; shortCode?: string }) {
   );
 }
 
-type MarkButtonProps = { format: MarkType; icon: IconSrc; tooltip: ReactNode };
+type MarkButtonProps = { format: MarkType; icon: IconSrc; tooltip: ReactNode; label?: string };
-export function MarkButton({ format, icon, tooltip }: MarkButtonProps) {
+export function MarkButton({ format, icon, tooltip, label }: MarkButtonProps) {
   const editor = useSlate();
   const disableInline = isBlockActive(editor, BlockType.CodeBlock);
 
@@ -76,6 +76,7 @@ export function MarkButton({ format, icon, tooltip }: MarkButtonProps) {
           variant="SurfaceVariant"
           onClick={handleClick}
           aria-pressed={isMarkActive(editor, format)}
+          aria-label={label}
           size="400"
           radii="300"
           disabled={disableInline}
@@ -91,8 +92,9 @@ type BlockButtonProps = {
   format: BlockType;
   icon: IconSrc;
   tooltip: ReactNode;
+  label?: string;
 };
-export function BlockButton({ format, icon, tooltip }: BlockButtonProps) {
+export function BlockButton({ format, icon, tooltip, label }: BlockButtonProps) {
   const editor = useSlate();
 
   const handleClick = () => {
@@ -108,6 +110,7 @@ export function BlockButton({ format, icon, tooltip }: BlockButtonProps) {
           variant="SurfaceVariant"
           onClick={handleClick}
           aria-pressed={isBlockActive(editor, format)}
+          aria-label={label}
           size="400"
           radii="300"
         >
@@ -165,6 +168,7 @@ export function HeadingBlockButton() {
                   <IconButton
                     ref={triggerRef}
                     onClick={() => handleMenuSelect(1)}
+                    aria-label="Heading 1"
                     size="400"
                     radii="300"
                   >
@@ -180,6 +184,7 @@ export function HeadingBlockButton() {
                   <IconButton
                     ref={triggerRef}
                     onClick={() => handleMenuSelect(2)}
+                    aria-label="Heading 2"
                     size="400"
                     radii="300"
                   >
@@ -195,6 +200,7 @@ export function HeadingBlockButton() {
                   <IconButton
                     ref={triggerRef}
                     onClick={() => handleMenuSelect(3)}
+                    aria-label="Heading 3"
                     size="400"
                     radii="300"
                   >
@@ -271,32 +277,44 @@ export function Toolbar() {
               <MarkButton
                 format={MarkType.Bold}
                 icon={Icons.Bold}
-                tooltip={<BtnTooltip text="Bold" shortCode={`${modKey} + B`} />}
+                tooltip={<BtnTooltip text="Bold" shortCode={`${modKey} + B`}
+                label="Bold"
+              />}
               />
               <MarkButton
                 format={MarkType.Italic}
                 icon={Icons.Italic}
-                tooltip={<BtnTooltip text="Italic" shortCode={`${modKey} + I`} />}
+                tooltip={<BtnTooltip text="Italic" shortCode={`${modKey} + I`}
+                label="Italic"
+              />}
               />
               <MarkButton
                 format={MarkType.Underline}
                 icon={Icons.Underline}
-                tooltip={<BtnTooltip text="Underline" shortCode={`${modKey} + U`} />}
+                tooltip={<BtnTooltip text="Underline" shortCode={`${modKey} + U`}
+                label="Underline"
+              />}
               />
               <MarkButton
                 format={MarkType.StrikeThrough}
                 icon={Icons.Strike}
-                tooltip={<BtnTooltip text="Strike Through" shortCode={`${modKey} + S`} />}
+                tooltip={<BtnTooltip text="Strike Through" shortCode={`${modKey} + S`}
+                label="Strikethrough"
+              />}
               />
               <MarkButton
                 format={MarkType.Code}
                 icon={Icons.Code}
-                tooltip={<BtnTooltip text="Inline Code" shortCode={`${modKey} + [`} />}
+                tooltip={<BtnTooltip text="Inline Code" shortCode={`${modKey} + [`}
+                label="Inline code"
+              />}
               />
               <MarkButton
                 format={MarkType.Spoiler}
                 icon={Icons.EyeBlind}
-                tooltip={<BtnTooltip text="Spoiler" shortCode={`${modKey} + H`} />}
+                tooltip={<BtnTooltip text="Spoiler" shortCode={`${modKey} + H`}
+                label="Spoiler"
+              />}
               />
             </Box>
             <Line variant="SurfaceVariant" direction="Vertical" style={{ height: toRem(12) }} />
@@ -305,22 +323,30 @@ export function Toolbar() {
             <BlockButton
               format={BlockType.BlockQuote}
               icon={Icons.BlockQuote}
-              tooltip={<BtnTooltip text="Block Quote" shortCode={`${modKey} + '`} />}
+              tooltip={<BtnTooltip text="Block Quote" shortCode={`${modKey} + '`}
+              label="Block quote"
+            />}
             />
             <BlockButton
               format={BlockType.CodeBlock}
               icon={Icons.BlockCode}
-              tooltip={<BtnTooltip text="Block Code" shortCode={`${modKey} + ;`} />}
+              tooltip={<BtnTooltip text="Block Code" shortCode={`${modKey} + ;`}
+              label="Code block"
+            />}
             />
             <BlockButton
               format={BlockType.OrderedList}
               icon={Icons.OrderList}
-              tooltip={<BtnTooltip text="Ordered List" shortCode={`${modKey} + 7`} />}
+              tooltip={<BtnTooltip text="Ordered List" shortCode={`${modKey} + 7`}
+              label="Ordered list"
+            />}
             />
             <BlockButton
               format={BlockType.UnorderedList}
               icon={Icons.UnorderList}
-              tooltip={<BtnTooltip text="Unordered List" shortCode={`${modKey} + 8`} />}
+              tooltip={<BtnTooltip text="Unordered List" shortCode={`${modKey} + 8`}
+              label="Unordered list"
+            />}
             />
             <HeadingBlockButton />
           </Box>

src/app/components/event-readers/EventReaders.tsx

@@ -73,7 +73,7 @@ export const EventReaders = as<'div', EventReadersProps>(
           <Box grow="Yes">
             <Text size="H3" style={lotusTerminal ? { color: '#00D4FF', textShadow: '0 0 6px rgba(0,212,255,0.45)', letterSpacing: '0.05em' } : undefined}>Seen by</Text>
           </Box>
-          <IconButton size="300" onClick={requestClose}>
+          <IconButton size="300" onClick={requestClose} aria-label="Close">
             <Icon src={Icons.Cross} />
           </IconButton>
         </Header>

src/app/components/password-input/PasswordInput.tsx

@@ -28,6 +28,7 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
                   variant={visible ? 'Warning' : variant}
                   size="300"
                   radii="300"
+                  aria-label={visible ? 'Hide password' : 'Show password'}
                 >
                   <Icon
                     style={{ opacity: config.opacity.P300 }}

src/app/components/uia-stages/PasswordStage.tsx

@@ -45,7 +45,7 @@ export function PasswordStage({
         <Box grow="Yes">
           <Text size="H4">Account Password</Text>
         </Box>
-        <IconButton size="300" onClick={onCancel} radii="300">
+        <IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
           <Icon src={Icons.Cross} />
         </IconButton>
       </Header>

src/app/components/uia-stages/SSOStage.tsx

@@ -56,7 +56,7 @@ export function SSOStage({
         <Box grow="Yes">
           <Text size="H4">SSO Login</Text>
         </Box>
-        <IconButton size="300" onClick={onCancel} radii="300">
+        <IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
           <Icon src={Icons.Cross} />
         </IconButton>
       </Header>

src/app/features/room/RoomTimeline.tsx

@@ -546,6 +546,17 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const timelineRef = React.useRef(timeline);
   timelineRef.current = timeline;
   const eventsLength = getTimelinesEventsCount(timeline.linkedTimelines);
+
+  // Perf-5: precompute base offsets once per linkedTimelines change instead of O(N×T) scan
+  const timelineSegments = useMemo<Array<[number, number, EventTimeline]>>(() => {
+    let base = 0;
+    return timeline.linkedTimelines.map((t) => {
+      const len = t.getEvents().length;
+      const seg: [number, number, EventTimeline] = [base, len, t];
+      base += len;
+      return seg;
+    });
+  }, [timeline.linkedTimelines]);
   const liveTimelineLinked =
     timeline.linkedTimelines[timeline.linkedTimelines.length - 1] === getLiveTimeline(room);
   const canPaginateBack =
@@ -1809,7 +1820,20 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   let newDivider = false;
   let dayDivider = false;
   const eventRenderer = (item: number) => {
-    const [eventTimeline, baseIndex] = getTimelineAndBaseIndex(timeline.linkedTimelines, item);
+    // Perf-5: O(T) → O(log T) via precomputed segments
+    let eventTimeline: EventTimeline | undefined;
+    let baseIndex = 0;
+    {
+      let lo = 0;
+      let hi = timelineSegments.length - 1;
+      while (lo <= hi) {
+        const mid = (lo + hi) >>> 1;
+        const [base, len] = timelineSegments[mid];
+        if (item < base) { hi = mid - 1; }
+        else if (item >= base + len) { lo = mid + 1; }
+        else { eventTimeline = timelineSegments[mid][2]; baseIndex = base; break; }
+      }
+    }
     if (!eventTimeline) return null;
     const timelineSet = eventTimeline?.getTimelineSet();
     const mEvent = getTimelineEvent(eventTimeline, getTimelineRelativeIndex(item, baseIndex));

src/app/features/settings/Settings.tsx

@@ -141,7 +141,7 @@ export function Settings({ initialPage, requestClose }: SettingsProps) {
               </Box>
               <Box shrink="No">
                 {screenSize === ScreenSize.Mobile && (
-                  <IconButton onClick={requestClose} variant="Background">
+                  <IconButton onClick={requestClose} variant="Background" aria-label="Close settings">
                     <Icon src={Icons.Cross} />
                   </IconButton>
                 )}

src/app/features/settings/about/About.tsx

@@ -25,7 +25,7 @@ export function About({ requestClose }: AboutProps) {
             </Text>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/settings/account/Account.tsx

@@ -20,7 +20,7 @@ export function Account({ requestClose }: AccountProps) {
             </Text>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/settings/account/IgnoredUserList.tsx

@@ -72,6 +72,7 @@ function IgnoreUserInput({ userList }: { userList: string[] }) {
                 size="300"
                 radii="300"
                 variant="Secondary"
+                aria-label="Clear"
               >
                 <Icon src={Icons.Cross} size="100" />
               </IconButton>

src/app/features/settings/account/Profile.tsx

@@ -185,7 +185,7 @@ function ProfileAvatar({ profile, userId }: ProfileProps) {
                 <Box grow="Yes">
                   <Text size="H4">Remove Avatar</Text>
                 </Box>
-                <IconButton size="300" onClick={() => setAlertRemove(false)} radii="300">
+                <IconButton size="300" onClick={() => setAlertRemove(false)} radii="300" aria-label="Cancel">
                   <Icon src={Icons.Cross} />
                 </IconButton>
               </Header>
@@ -278,6 +278,7 @@ function ProfileDisplayName({ profile, userId }: ProfileProps) {
                     size="300"
                     radii="300"
                     variant="Secondary"
+                    aria-label="Reset display name"
                   >
                     <Icon src={Icons.Cross} size="100" />
                   </IconButton>

src/app/features/settings/developer-tools/DevelopTools.tsx

@@ -51,7 +51,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
             </Text>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/settings/devices/DeviceTile.tsx

@@ -292,6 +292,8 @@ export function DeviceTile({
             outlined={deleted}
             radii="300"
             onClick={() => setDetails(!details)}
+            aria-label={details ? 'Collapse device details' : 'Expand device details'}
+            aria-expanded={details}
           >
             <Icon size="50" src={details ? Icons.ChevronBottom : Icons.ChevronRight} />
           </IconButton>

src/app/features/settings/devices/Devices.tsx

@@ -74,7 +74,7 @@ export function Devices({ requestClose }: DevicesProps) {
             </Text>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/settings/devices/Verification.tsx

@@ -293,6 +293,7 @@ export function DeviceVerificationOptions() {
         size="300"
         radii="300"
         onClick={handleMenu}
+        aria-label="Verification options"
       >
         <Icon size="100" src={Icons.VerticalDots} />
       </IconButton>

src/app/features/settings/emojis-stickers/EmojisStickers.tsx

@@ -30,7 +30,7 @@ export function EmojisStickers({ requestClose }: EmojisStickersProps) {
             </Text>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/settings/emojis-stickers/GlobalPacks.tsx

@@ -373,6 +373,7 @@ export function GlobalPacks({ onViewPack }: GlobalPacksProps) {
                   variant="Critical"
                   onClick={() => handleUndoRemove(address)}
                   disabled={applyingChanges}
+                  aria-label="Undo remove pack"
                 >
                   <Icon src={Icons.Plus} size="100" />
                 </IconButton>
@@ -383,6 +384,7 @@ export function GlobalPacks({ onViewPack }: GlobalPacksProps) {
                   variant="Secondary"
                   onClick={() => handleRemove(address)}
                   disabled={applyingChanges}
+                  aria-label="Remove pack"
                 >
                   <Icon src={Icons.Cross} size="100" />
                 </IconButton>

src/app/features/settings/general/General.tsx

@@ -1184,7 +1184,7 @@ export function General({ requestClose }: GeneralProps) {
             </Text>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/settings/notifications/KeywordMessages.tsx

@@ -80,6 +80,7 @@ function KeywordInput() {
                 size="300"
                 radii="300"
                 variant="Secondary"
+                aria-label="Clear keyword input"
               >
                 <Icon src={Icons.Cross} size="100" />
               </IconButton>
@@ -118,7 +119,7 @@ function KeywordCross({ pushRule }: PushRulesProps) {
 
   const removing = removeState.status === AsyncStatus.Loading;
   return (
-    <IconButton onClick={remove} size="300" radii="Pill" variant="Secondary" disabled={removing}>
+    <IconButton onClick={remove} size="300" radii="Pill" variant="Secondary" disabled={removing} aria-label="Remove keyword">
       {removing ? <Spinner size="100" /> : <Icon src={Icons.Cross} size="100" />}
     </IconButton>
   );

src/app/features/settings/notifications/Notifications.tsx

@@ -23,7 +23,7 @@ export function Notifications({ requestClose }: NotificationsProps) {
             </Text>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

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

@@ -1,5 +1,6 @@
 import React, { MouseEventHandler, forwardRef, useMemo, useRef, useState } from 'react';
 import { useAtom, useAtomValue } from 'jotai';
+import { selectAtom } from 'jotai/utils';
 import {
   Avatar,
   Box,
@@ -102,7 +103,7 @@ function DirectHeader() {
       <PageNavHeader>
         <Box alignItems="Center" grow="Yes" gap="300">
           <Box grow="Yes">
-            <Text size="H4" truncate>
+            <Text as="h2" size="H4" truncate>
               Direct Messages
             </Text>
           </Box>
@@ -174,7 +175,25 @@ export function Direct() {
   const scrollRef = useRef<HTMLDivElement>(null);
   const directs = useDirectRooms();
   const notificationPreferences = useRoomsNotificationPreferencesContext();
-  const roomToUnread = useAtomValue(roomToUnreadAtom);
+  const roomsWithUnreadSet = useAtomValue(
+    useMemo(
+      () =>
+        selectAtom(
+          roomToUnreadAtom,
+          (rtu) => {
+            const s = new Set<string>();
+            for (const id of rtu.keys()) s.add(id);
+            return s;
+          },
+          (a, b) => {
+            if (a.size !== b.size) return false;
+            for (const id of a) if (!b.has(id)) return false;
+            return true;
+          }
+        ),
+      []
+    )
+  );
   const navigate = useNavigate();
 
   const createDirectSelected = useDirectCreateSelected();
@@ -186,10 +205,10 @@ export function Direct() {
   const sortedDirects = useMemo(() => {
     const items = Array.from(directs).sort(factoryRoomIdByActivity(mx));
     if (closedCategories.has(DEFAULT_CATEGORY_ID)) {
-      return items.filter((rId) => roomToUnread.has(rId) || rId === selectedRoomId);
+      return items.filter((rId) => roomsWithUnreadSet.has(rId) || rId === selectedRoomId);
     }
     return items;
-  }, [mx, directs, closedCategories, roomToUnread, selectedRoomId]);
+  }, [mx, directs, closedCategories, roomsWithUnreadSet, selectedRoomId]);
 
   const virtualizer = useVirtualizer({
     count: sortedDirects.length,

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

@@ -17,6 +17,7 @@ import {
 } from 'folds';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useAtom, useAtomValue } from 'jotai';
+import { selectAtom } from 'jotai/utils';
 import FocusTrap from 'focus-trap-react';
 import { factoryRoomIdByActivity, factoryRoomIdByAtoZ } from '../../../utils/sort';
 import {
@@ -116,7 +117,7 @@ function HomeHeader() {
       <PageNavHeader>
         <Box alignItems="Center" grow="Yes" gap="300">
           <Box grow="Yes">
-            <Text size="H4" truncate>
+            <Text as="h2" size="H4" truncate>
               Home
             </Text>
           </Box>
@@ -200,7 +201,26 @@ export function Home() {
   const scrollRef = useRef<HTMLDivElement>(null);
   const rooms = useHomeRooms();
   const notificationPreferences = useRoomsNotificationPreferencesContext();
-  const roomToUnread = useAtomValue(roomToUnreadAtom);
+  // Perf-3: only re-render when the set of rooms WITH unread changes, not on count updates
+  const roomsWithUnreadSet = useAtomValue(
+    useMemo(
+      () =>
+        selectAtom(
+          roomToUnreadAtom,
+          (rtu) => {
+            const s = new Set<string>();
+            for (const id of rtu.keys()) s.add(id);
+            return s;
+          },
+          (a, b) => {
+            if (a.size !== b.size) return false;
+            for (const id of a) if (!b.has(id)) return false;
+            return true;
+          }
+        ),
+      []
+    )
+  );
   const navigate = useNavigate();
 
   const selectedRoomId = useSelectedRoom();
@@ -216,10 +236,10 @@ export function Home() {
         : factoryRoomIdByAtoZ(mx)
     );
     if (closedCategories.has(DEFAULT_CATEGORY_ID)) {
-      return items.filter((rId) => roomToUnread.has(rId) || rId === selectedRoomId);
+      return items.filter((rId) => roomsWithUnreadSet.has(rId) || rId === selectedRoomId);
     }
     return items;
-  }, [mx, rooms, closedCategories, roomToUnread, selectedRoomId]);
+  }, [mx, rooms, closedCategories, roomsWithUnreadSet, selectedRoomId]);
 
   const virtualizer = useVirtualizer({
     count: sortedRooms.length,

src/app/pages/client/inbox/Inbox.tsx

@@ -52,7 +52,7 @@ export function Inbox() {
       <PageNavHeader>
         <Box grow="Yes" gap="300">
           <Box grow="Yes">
-            <Text size="H4" truncate>
+            <Text as="h2" size="H4" truncate>
               Inbox
             </Text>
           </Box>

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

@@ -7,6 +7,7 @@ import React, {
   useState,
 } from 'react';
 import { useAtom, useAtomValue } from 'jotai';
+import { selectAtom } from 'jotai/utils';
 import {
   Avatar,
   Box,
@@ -267,7 +268,7 @@ function SpaceHeader() {
       <PageNavHeader>
         <Box alignItems="Center" grow="Yes" gap="300">
           <Box grow="Yes" alignItems="Center" gap="100">
-            <Text size="H4" truncate>
+            <Text as="h2" size="H4" truncate>
               {spaceName}
             </Text>
             {joinRules?.join_rule !== JoinRule.Public && <Icon src={Icons.Lock} size="50" />}
@@ -382,7 +383,25 @@ export function Space() {
   const spaceIdOrAlias = getCanonicalAliasOrRoomId(mx, space.roomId);
   const scrollRef = useRef<HTMLDivElement>(null);
   const mDirects = useAtomValue(mDirectAtom);
-  const roomToUnread = useAtomValue(roomToUnreadAtom);
+  const roomsWithUnreadSet = useAtomValue(
+    useMemo(
+      () =>
+        selectAtom(
+          roomToUnreadAtom,
+          (rtu) => {
+            const s = new Set<string>();
+            for (const id of rtu.keys()) s.add(id);
+            return s;
+          },
+          (a, b) => {
+            if (a.size !== b.size) return false;
+            for (const id of a) if (!b.has(id)) return false;
+            return true;
+          }
+        ),
+      []
+    )
+  );
   const allRooms = useAtomValue(allRoomsAtom);
   const allJoinedRooms = useMemo(() => new Set(allRooms), [allRooms]);
   const notificationPreferences = useRoomsNotificationPreferencesContext();
@@ -414,10 +433,10 @@ export function Space() {
           return false;
         }
         const showRoomAnyway =
-          roomToUnread.has(roomId) || roomId === selectedRoomId || callEmbed?.roomId === roomId;
+          roomsWithUnreadSet.has(roomId) || roomId === selectedRoomId || callEmbed?.roomId === roomId;
         return !showRoomAnyway;
       },
-      [space.roomId, closedCategories, roomToUnread, selectedRoomId, callEmbed]
+      [space.roomId, closedCategories, roomsWithUnreadSet, selectedRoomId, callEmbed]
     ),
     useCallback(
       (sId) => closedCategories.has(makeNavCategoryId(space.roomId, sId)),