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/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/kumaStatus.test.ts

@@ -1,7 +1,6 @@
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
 import {
-  plain,
   DEFAULT_GROUPS,
   kumaBeatTime,
   kumaUrls,
@@ -261,27 +260,3 @@ test('a dismissed calls-down banner lets the next one through, never hides serve
     'server-down',
   );
 });
-
-test('plain: strips Markdown syntax only, keeps ordinary #, _, > and * (#308)', () => {
-  assert.equal(
-    plain('join #lotus-general or #announcements:lotusguild.org'),
-    'join #lotus-general or #announcements:lotusguild.org',
-  );
-  assert.equal(
-    plain('ping @some_user about snake_case and C#'),
-    'ping @some_user about snake_case and C#',
-  );
-  assert.equal(
-    plain('calls -> fixed, > 5 people, 5 * 3 = 15'),
-    'calls -> fixed, > 5 people, 5 * 3 = 15',
-  );
-  assert.equal(
-    plain('# Heading\n* item one\n- item two\n> quoted'),
-    'Heading\nitem one\nitem two\nquoted',
-  );
-  assert.equal(plain('**bold**, *em*, _em_, `/sfu/get`'), 'bold, em, em, /sfu/get');
-  assert.equal(
-    plain('Read the <b>guide</b> <img src=x onerror=alert(1)> [docs](https://x.y)'),
-    'Read the guide  docs',
-  );
-});

src/app/utils/kumaStatus.ts

@@ -240,25 +240,12 @@ const incidentTone = (style: string): BannerTone => {
 };
 
 /** Markdown-ish incident text as plain text for the Details line. */
-/**
- * [Gitea #308] Markdown → plain text for the Details line. Strips only the
- * syntax: removing every `*_\`#>` also broke "#lotus-general", "snake_case",
- * "->" and "5 * 3". HTML tags are dropped (React escapes the text anyway).
- */
-export const plain = (s: string): string =>
+const plain = (s: string): string =>
   s
     .replace(/!\[[^\]]*\]\([^)]*\)/g, '')
     .replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
-    .replace(/<\/?[a-z][^>]*>/gi, '')
-    .replace(/^[ \t]{0,3}#{1,6}[ \t]+/gm, '')
-    .replace(/^[ \t]*>[ \t]?/gm, '')
-    .replace(/^[ \t]*[*+-][ \t]+/gm, '')
-    .replace(/`([^`\n]+)`/g, '$1')
-    .replace(/\*\*(?=\S)([^*\n]*?\S)\*\*/g, '$1')
-    .replace(/__(?=\S)([^_\n]*?\S)__/g, '$1')
-    .replace(/(^|[^\w*])\*(?=\S)([^*\n]*?\S)\*(?![\w*])/g, '$1$2')
-    .replace(/(^|[^\w])_(?=\S)([^_\n]*?\S)_(?!\w)/g, '$1$2')
-    .replace(/[ \t]+\n/g, '\n')
+    .replace(/[*_`#>]/g, '')
+    .replace(/\s+\n/g, '\n')
     .trim();
 
 /**