fix(sidebar): the room filter hides empty sections and says when nothing matches (#289)

A filter matching nothing left Favorites / Projects / Rooms / Low
Priority headers with nothing under them. While filtering, sections
without a match are hidden, and with no match at all the list shows
"No rooms match “…”" with a Clear filter button.

Fixes #289

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017PCb59uY3UKqDqt7B6hzd5

src/app/components/AccountDataEditor.tsx

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

src/app/components/CallEmbedProvider.tsx

@@ -111,8 +111,6 @@ type IncomingCallInfo = {
   intent?: string;
   notificationType: RTCNotificationType;
   refEventId: string;
-  /** [Gitea #313] The rtc.notification event itself: what a decline must reference (MSC4310). */
-  notificationEventId?: string;
 };
 type IncomingCallProps = {
   dm: boolean;
@@ -285,9 +283,7 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
                   fill="Soft"
                   size="400"
                   radii="400"
-                  onClick={() =>
-                    dm ? onReject(room, info.notificationEventId ?? info.refEventId) : onIgnore()
-                  }
+                  onClick={() => (dm ? onReject(room, info.refEventId) : onIgnore())}
                   before={<Icon size="200" src={Icons.Cross} filled />}
                 >
                   <Text as="span" size="B400">
@@ -459,9 +455,7 @@ function IncomingCallBanner({ dm, info, onIgnore, onAnswer, onReject }: Incoming
           size="300"
           radii="300"
           outlined
-          onClick={() =>
-            dm ? onReject(room, info.notificationEventId ?? info.refEventId) : onIgnore()
-          }
+          onClick={() => (dm ? onReject(room, info.refEventId) : onIgnore())}
           before={<Icon size="100" src={Icons.Cross} filled />}
         >
           <Text as="span" size="B300">
@@ -602,7 +596,6 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
             : undefined,
         notificationType,
         refEventId,
-        notificationEventId: event.getId(),
       };
 
       // [Gitea #312] Don't ring for a call that is already over or handled: after
@@ -611,10 +604,7 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
       // stale RTC session). The caller's membership can arrive just after the
       // ring, so an absent one gets a short grace period before giving up.
       const myUserId = mx.getSafeUserId();
-      if (
-        declinedRing(room, [refEventId, event.getId()], myUserId) ||
-        hasActiveCallMembership(room, myUserId)
-      ) {
+      if (declinedRing(room, refEventId, myUserId) || hasActiveCallMembership(room, myUserId)) {
         return;
       }
       if (hasActiveCallMembership(room, sender)) {
@@ -623,10 +613,7 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
       }
       setTimeout(() => {
         if (Date.now() >= senderTs + lifetime) return;
-        if (
-          declinedRing(room, [refEventId, event.getId()], myUserId) ||
-          hasActiveCallMembership(room, myUserId)
-        ) {
+        if (declinedRing(room, refEventId, myUserId) || hasActiveCallMembership(room, myUserId)) {
           return;
         }
         if (hasActiveCallMembership(room, sender)) setCallInfo(info);
@@ -698,10 +685,7 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
       if (eventRoom?.roomId !== room.roomId || !data.liveEvent) return;
       if (event.getType() === EventType.RTCDecline && event.getSender() === myUserId) {
         const related = event.getRelation()?.event_id;
-        // [Gitea #313] Correct clients reference the notification; older Lotus
-        // builds referenced the call membership. Accept both.
-        if (!related || related === refEventId || related === callInfo.notificationEventId)
-          dismiss(); // declined elsewhere
+        if (!related || related === refEventId) dismiss(); // declined elsewhere
       }
     };
     session.on(MatrixRTCSessionEvent.MembershipsChanged, checkMemberships);

src/app/components/DeviceVerificationSetup.tsx

@@ -315,7 +315,7 @@ export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerifica
               Setup Device Verification
             </Text>
           </Box>
-          <IconButton type="button" size="300" radii="300" onClick={onCancel} aria-label="Cancel">
+          <IconButton size="300" radii="300" onClick={onCancel} aria-label="Cancel">
             <Icon src={Icons.Cross} />
           </IconButton>
         </Header>
@@ -361,7 +361,7 @@ export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerifica
               Reset Device Verification
             </Text>
           </Box>
-          <IconButton type="button" size="300" radii="300" onClick={onCancel} aria-label="Cancel">
+          <IconButton size="300" radii="300" onClick={onCancel} aria-label="Cancel">
             <Icon src={Icons.Cross} />
           </IconButton>
         </Header>

src/app/features/common-settings/developer-tools/StateEventEditor.tsx

@@ -275,7 +275,7 @@ export function StateEventEditor({ type, stateKey, requestClose }: StateEventEdi
             </Chip>
           </Box>
           <Box shrink="No">
-            <IconButton type="button" onClick={requestClose} variant="Surface" aria-label="Close">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/room/PollCreator.tsx

@@ -143,7 +143,7 @@ export function PollCreator({ roomId, threadRootId, onClose }: PollCreatorProps)
                   Create Poll
                 </Text>
               </Box>
-              <IconButton type="button" size="300" radii="300" onClick={onClose} aria-label="Close">
+              <IconButton size="300" radii="300" onClick={onClose} aria-label="Close">
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>

src/app/features/room/ReportRoomModal.tsx

@@ -118,7 +118,7 @@ export function ReportRoomModal({ roomId, onClose }: ReportRoomModalProps) {
                   Report Room
                 </Text>
               </Box>
-              <IconButton type="button" size="300" onClick={onClose} radii="300" aria-label="Close">
+              <IconButton size="300" onClick={onClose} radii="300" aria-label="Close">
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>

src/app/features/room/ReportUserModal.tsx

@@ -124,7 +124,7 @@ export function ReportUserModal({ userId, onClose }: ReportUserModalProps) {
                   Report User
                 </Text>
               </Box>
-              <IconButton type="button" size="300" onClick={onClose} radii="300" aria-label="Close">
+              <IconButton size="300" onClick={onClose} radii="300" aria-label="Close">
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>

src/app/features/room/RoomTimeline.tsx

@@ -138,7 +138,7 @@ import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
 import { useImagePackRooms } from '../../hooks/useImagePackRooms';
 import { useIsDirectRoom } from '../../hooks/useRoom';
-import { declinedRing, isRingableRoom } from '../../utils/callRing';
+import { isRingableRoom } from '../../utils/callRing';
 import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
 import { useSpaceOptionally } from '../../hooks/useSpace';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
@@ -2037,9 +2037,6 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         // Same rule as ringing: no "Missed call" in voice rooms or space
         // channels, where starting a call is just joining the channel.
         if (!isRingableRoom(room, direct)) return null;
-        // [Gitea #313] A call we declined isn't a missed call.
-        const ringRef = mEvent.getRelation()?.event_id;
-        if (declinedRing(room, [mEventId, ringRef], mx.getSafeUserId())) return null;
         const content = mEvent.getContent();
         const mention =
           content['m.mentions']?.room ||

src/app/features/room/ScheduleMessageModal.tsx

@@ -202,7 +202,7 @@ export function ScheduleMessageModal({
                   {title}
                 </Text>
               </Box>
-              <IconButton type="button" size="300" radii="300" onClick={onClose} aria-label="Close">
+              <IconButton size="300" radii="300" onClick={onClose} aria-label="Close">
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>

src/app/features/room/message/Message.tsx

@@ -725,13 +725,7 @@ export const MessageDeleteItem = as<
                     Delete Message
                   </Text>
                 </Box>
-                <IconButton
-                  type="button"
-                  size="300"
-                  onClick={handleClose}
-                  radii="300"
-                  aria-label="Close"
-                >
+                <IconButton size="300" onClick={handleClose} radii="300" aria-label="Close">
                   <Icon src={Icons.Cross} />
                 </IconButton>
               </Header>
@@ -871,13 +865,7 @@ export const MessageReportItem = as<
                     Report Message
                   </Text>
                 </Box>
-                <IconButton
-                  type="button"
-                  size="300"
-                  onClick={handleClose}
-                  radii="300"
-                  aria-label="Close"
-                >
+                <IconButton size="300" onClick={handleClose} radii="300" aria-label="Close">
                   <Icon src={Icons.Cross} />
                 </IconButton>
               </Header>

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

@@ -255,6 +255,8 @@ function HomeCustomSection({
       return (localName ?? matrixName).toLowerCase().includes(query);
     });
   }, [mx, section.rooms, closed, roomsWithUnreadSet, selectedRoomId, filterQuery]);
+  // [Gitea #289] While filtering, a section with no matches is hidden.
+  if (filterQuery.trim() && items.length === 0) return null;
   // Sections are user-curated and small, so they render plainly — no
   // virtualizer per section (a late-mounted one never measured its scroller).
   return (
@@ -443,6 +445,26 @@ export function Home() {
     });
   }, [mx, sortedRooms, filterQuery]);
 
+  // [Gitea #289] While filtering, hide empty sections; with no match at all,
+  // say so instead of leaving bare headers.
+  const filtering = filterQuery.trim().length > 0;
+  const customSectionMatch = useMemo(() => {
+    if (!filtering) return true;
+    const query = filterQuery.toLowerCase();
+    const localNames = getLocalRoomNamesContent(mx);
+    return customSections.some((section) =>
+      section.rooms.some((rId) =>
+        (localNames.rooms[rId] ?? mx.getRoom(rId)?.name ?? '').toLowerCase().includes(query),
+      ),
+    );
+  }, [mx, customSections, filtering, filterQuery]);
+  const noFilterMatch =
+    filtering &&
+    !customSectionMatch &&
+    filteredFavoriteRooms.length === 0 &&
+    filteredRooms.length === 0 &&
+    filteredLowPriorityRooms.length === 0;
+
   const favVirtualizer = useVirtualizer({
     count: filteredFavoriteRooms.length,
     getScrollElement: () => scrollRef.current,
@@ -580,7 +602,7 @@ export function Home() {
                 />
               </Box>
             </NavCategory>
-            {favoriteRooms.length > 0 && (
+            {favoriteRooms.length > 0 && (!filtering || filteredFavoriteRooms.length > 0) && (
               <NavCategory>
                 <NavCategoryHeader>
                   <RoomNavCategoryButton
@@ -629,142 +651,171 @@ export function Home() {
                 notificationPreferences={notificationPreferences}
               />
             ))}
-            <NavCategory>
-              <NavCategoryHeader>
-                <RoomNavCategoryButton
-                  closed={closedCategories.has(DEFAULT_CATEGORY_ID)}
-                  data-category-id={DEFAULT_CATEGORY_ID}
-                  onClick={handleCategoryClick}
+            {noFilterMatch && (
+              <NavCategory>
+                <Box
+                  direction="Column"
+                  alignItems="Center"
+                  gap="200"
+                  style={{ padding: config.space.S400 }}
                 >
-                  Rooms
-                </RoomNavCategoryButton>
-                {!closedCategories.has(DEFAULT_CATEGORY_ID) && (
-                  <>
-                    <IconButton
-                      aria-expanded={!!sortMenuAnchor}
-                      aria-haspopup="menu"
-                      variant="Background"
-                      fill="None"
-                      size="300"
-                      radii="300"
-                      onClick={(evt: React.MouseEvent<HTMLButtonElement>) => {
-                        const cords = evt.currentTarget.getBoundingClientRect();
-                        setSortMenuAnchor((current) => (current ? undefined : cords));
-                      }}
-                      aria-label="Sort rooms"
-                    >
-                      <Icon src={Icons.Sort} size="100" />
-                    </IconButton>
-                    <PopOut
-                      anchor={sortMenuAnchor}
-                      position="Bottom"
-                      align="End"
-                      offset={6}
-                      content={
-                        <FocusTrap
-                          focusTrapOptions={{
-                            initialFocus: false,
-                            onDeactivate: () => setSortMenuAnchor(undefined),
-                            clickOutsideDeactivates: true,
-                            isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
-                            isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
-                            escapeDeactivates: stopPropagation,
-                          }}
-                        >
-                          <Menu style={{ maxWidth: toRem(180), width: '100vw' }}>
-                            <Box
-                              direction="Column"
-                              gap="100"
-                              style={{ padding: config.space.S100 }}
-                            >
-                              <MenuItem
-                                onClick={() => {
-                                  setHomeRoomSort('recent');
-                                  setSortMenuAnchor(undefined);
-                                }}
-                                size="300"
-                                after={
-                                  homeRoomSort === 'recent' ? (
-                                    <Icon size="100" src={Icons.Check} />
-                                  ) : undefined
-                                }
-                                radii="300"
+                  <Text size="T300" priority="300" align="Center">
+                    No rooms match &ldquo;{filterQuery.trim()}&rdquo;
+                  </Text>
+                  <Button
+                    size="300"
+                    variant="Secondary"
+                    fill="Soft"
+                    radii="300"
+                    onClick={() => setFilterQuery('')}
+                  >
+                    <Text size="B300">Clear filter</Text>
+                  </Button>
+                </Box>
+              </NavCategory>
+            )}
+            {(!filtering || filteredRooms.length > 0) && (
+              <NavCategory>
+                <NavCategoryHeader>
+                  <RoomNavCategoryButton
+                    closed={closedCategories.has(DEFAULT_CATEGORY_ID)}
+                    data-category-id={DEFAULT_CATEGORY_ID}
+                    onClick={handleCategoryClick}
+                  >
+                    Rooms
+                  </RoomNavCategoryButton>
+                  {!closedCategories.has(DEFAULT_CATEGORY_ID) && (
+                    <>
+                      <IconButton
+                        aria-expanded={!!sortMenuAnchor}
+                        aria-haspopup="menu"
+                        variant="Background"
+                        fill="None"
+                        size="300"
+                        radii="300"
+                        onClick={(evt: React.MouseEvent<HTMLButtonElement>) => {
+                          const cords = evt.currentTarget.getBoundingClientRect();
+                          setSortMenuAnchor((current) => (current ? undefined : cords));
+                        }}
+                        aria-label="Sort rooms"
+                      >
+                        <Icon src={Icons.Sort} size="100" />
+                      </IconButton>
+                      <PopOut
+                        anchor={sortMenuAnchor}
+                        position="Bottom"
+                        align="End"
+                        offset={6}
+                        content={
+                          <FocusTrap
+                            focusTrapOptions={{
+                              initialFocus: false,
+                              onDeactivate: () => setSortMenuAnchor(undefined),
+                              clickOutsideDeactivates: true,
+                              isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+                              isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+                              escapeDeactivates: stopPropagation,
+                            }}
+                          >
+                            <Menu style={{ maxWidth: toRem(180), width: '100vw' }}>
+                              <Box
+                                direction="Column"
+                                gap="100"
+                                style={{ padding: config.space.S100 }}
                               >
-                                <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
-                                  Recent Activity
-                                </Text>
-                              </MenuItem>
-                              <MenuItem
-                                onClick={() => {
-                                  setHomeRoomSort('alpha');
-                                  setSortMenuAnchor(undefined);
-                                }}
-                                size="300"
-                                after={
-                                  homeRoomSort === 'alpha' ? (
-                                    <Icon size="100" src={Icons.Check} />
-                                  ) : undefined
-                                }
-                                radii="300"
-                              >
-                                <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
-                                  A → Z
-                                </Text>
-                              </MenuItem>
-                              <MenuItem
-                                onClick={() => {
-                                  setHomeRoomSort('unread');
-                                  setSortMenuAnchor(undefined);
-                                }}
-                                size="300"
-                                after={
-                                  homeRoomSort === 'unread' ? (
-                                    <Icon size="100" src={Icons.Check} />
-                                  ) : undefined
-                                }
-                                radii="300"
-                              >
-                                <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
-                                  Unread First
-                                </Text>
-                              </MenuItem>
-                            </Box>
-                          </Menu>
-                        </FocusTrap>
-                      }
-                    />
-                  </>
-                )}
-              </NavCategoryHeader>
-              <div
-                style={{
-                  position: 'relative',
-                  height: virtualizer.getTotalSize(),
-                }}
-              >
-                {virtualizer.getVirtualItems().map((vItem) => {
-                  const roomId = filteredRooms[vItem.index];
-                  const room = mx.getRoom(roomId);
-                  if (!room) return null;
-                  const selected = selectedRoomId === roomId;
-
-                  return (
-                    <VirtualTile virtualItem={vItem} key={roomId} ref={virtualizer.measureElement}>
-                      <RoomNavItem
-                        room={room}
-                        selected={selected}
-                        linkPath={getHomeRoomPath(getCanonicalAliasOrRoomId(mx, roomId))}
-                        notificationMode={getRoomNotificationMode(
-                          notificationPreferences,
-                          room.roomId,
-                        )}
+                                <MenuItem
+                                  onClick={() => {
+                                    setHomeRoomSort('recent');
+                                    setSortMenuAnchor(undefined);
+                                  }}
+                                  size="300"
+                                  after={
+                                    homeRoomSort === 'recent' ? (
+                                      <Icon size="100" src={Icons.Check} />
+                                    ) : undefined
+                                  }
+                                  radii="300"
+                                >
+                                  <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+                                    Recent Activity
+                                  </Text>
+                                </MenuItem>
+                                <MenuItem
+                                  onClick={() => {
+                                    setHomeRoomSort('alpha');
+                                    setSortMenuAnchor(undefined);
+                                  }}
+                                  size="300"
+                                  after={
+                                    homeRoomSort === 'alpha' ? (
+                                      <Icon size="100" src={Icons.Check} />
+                                    ) : undefined
+                                  }
+                                  radii="300"
+                                >
+                                  <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+                                    A → Z
+                                  </Text>
+                                </MenuItem>
+                                <MenuItem
+                                  onClick={() => {
+                                    setHomeRoomSort('unread');
+                                    setSortMenuAnchor(undefined);
+                                  }}
+                                  size="300"
+                                  after={
+                                    homeRoomSort === 'unread' ? (
+                                      <Icon size="100" src={Icons.Check} />
+                                    ) : undefined
+                                  }
+                                  radii="300"
+                                >
+                                  <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+                                    Unread First
+                                  </Text>
+                                </MenuItem>
+                              </Box>
+                            </Menu>
+                          </FocusTrap>
+                        }
                       />
-                    </VirtualTile>
-                  );
-                })}
-              </div>
-            </NavCategory>
-            {lowPriorityRooms.length > 0 && (
+                    </>
+                  )}
+                </NavCategoryHeader>
+                <div
+                  style={{
+                    position: 'relative',
+                    height: virtualizer.getTotalSize(),
+                  }}
+                >
+                  {virtualizer.getVirtualItems().map((vItem) => {
+                    const roomId = filteredRooms[vItem.index];
+                    const room = mx.getRoom(roomId);
+                    if (!room) return null;
+                    const selected = selectedRoomId === roomId;
+
+                    return (
+                      <VirtualTile
+                        virtualItem={vItem}
+                        key={roomId}
+                        ref={virtualizer.measureElement}
+                      >
+                        <RoomNavItem
+                          room={room}
+                          selected={selected}
+                          linkPath={getHomeRoomPath(getCanonicalAliasOrRoomId(mx, roomId))}
+                          notificationMode={getRoomNotificationMode(
+                            notificationPreferences,
+                            room.roomId,
+                          )}
+                        />
+                      </VirtualTile>
+                    );
+                  })}
+                </div>
+              </NavCategory>
+            )}
+            {lowPriorityRooms.length > 0 && (!filtering || filteredLowPriorityRooms.length > 0) && (
               <NavCategory>
                 <NavCategoryHeader>
                   <RoomNavCategoryButton

src/app/utils/callRing.test.ts

@@ -67,18 +67,3 @@ test('declinedRing finds our own decline of that ring only (#312)', () => {
   assert.equal(declinedRing(room, '$ring2', '@me:x'), false, "someone else's decline");
   assert.equal(declinedRing(room, '$ring3', '@me:x'), false);
 });
-
-test('declinedRing matches a decline of the notification or of the membership (#313)', () => {
-  const decline = (rel: string) => ({
-    getType: () => 'org.matrix.msc4310.rtc.decline',
-    getSender: () => '@me:x',
-    getRelation: () => ({ event_id: rel }),
-  });
-  const room = stateRoom([], [decline('$notification')]);
-  assert.equal(declinedRing(room, ['$membership', '$notification'], '@me:x'), true);
-  assert.equal(declinedRing(room, ['$membership'], '@me:x'), false);
-  assert.equal(
-    declinedRing(stateRoom([], [decline('$membership')]), ['$membership', undefined], '@me:x'),
-    true,
-  );
-});

src/app/utils/callRing.ts

@@ -40,18 +40,7 @@ export const hasActiveCallMembership = (room: Room, userId: string): boolean =>
  * declined it (our own RTCDecline relates to it) — e.g. replayed together with
  * the ring in the first sync after a restart, before any dismiss listener.
  */
-export const declinedRing = (
-  room: Room,
-  ringIds: string | Array<string | undefined>,
-  myUserId: string,
-): boolean => {
-  // [Gitea #313] A decline references the notification event (MSC4310); older
-  // Lotus builds referenced the call membership instead. Match either.
-  const ids = new Set((Array.isArray(ringIds) ? ringIds : [ringIds]).filter(Boolean));
-  return declinedAny(room, ids, myUserId);
-};
-
-const declinedAny = (room: Room, ids: Set<string | undefined>, myUserId: string): boolean =>
+export const declinedRing = (room: Room, refEventId: string, myUserId: string): boolean =>
   room
     .getLiveTimeline()
     .getEvents()
@@ -59,5 +48,5 @@ const declinedAny = (room: Room, ids: Set<string | undefined>, myUserId: string)
       (ev) =>
         ev.getType() === 'org.matrix.msc4310.rtc.decline' &&
         ev.getSender() === myUserId &&
-        ids.has(ev.getRelation()?.event_id),
+        ev.getRelation()?.event_id === refEventId,
     );