From caf67b98892dc923ebb57580056253a21bd9a8db Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 7 Feb 2024 11:41:04 +0530
Subject: [PATCH] fix unread room menu ref

---
 .../client/sidebar/NotificationBadge.tsx      | 164 +++++++++---------
 1 file changed, 83 insertions(+), 81 deletions(-)

diff --git a/src/app/pages/client/sidebar/NotificationBadge.tsx b/src/app/pages/client/sidebar/NotificationBadge.tsx
index b250087d..4ae867df 100644
--- a/src/app/pages/client/sidebar/NotificationBadge.tsx
+++ b/src/app/pages/client/sidebar/NotificationBadge.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { forwardRef, useState } from 'react';
 import { useAtomValue } from 'jotai';
 import { PopOut, Menu, Box, toRem, config, Text, Header, Scroll, Avatar } from 'folds';
 import FocusTrap from 'focus-trap-react';
@@ -17,92 +17,94 @@ import { getHomeRoomPath } from '../../pathUtils';
 import { getCanonicalAliasOrRoomId } from '../../../utils/matrix';
 import { useSelectedRoom } from '../../../hooks/useSelectedRoom';
 
-function UnreadMenu({ rooms, requestClose }: { rooms: string[]; requestClose: () => void }) {
-  const mx = useMatrixClient();
-  const mDirects = useAtomValue(mDirectAtom);
-  const roomToUnread = useAtomValue(roomToUnreadAtom);
-  const selectedRoomId = useSelectedRoom();
+const UnreadMenu = forwardRef<HTMLDivElement, { rooms: string[]; requestClose: () => void }>(
+  ({ rooms, requestClose }, ref) => {
+    const mx = useMatrixClient();
+    const mDirects = useAtomValue(mDirectAtom);
+    const roomToUnread = useAtomValue(roomToUnreadAtom);
+    const selectedRoomId = useSelectedRoom();
 
-  return (
-    <Menu style={{ width: toRem(250) }}>
-      <Box direction="Column" style={{ maxHeight: '70vh', maxWidth: toRem(300) }}>
-        <Header
-          size="300"
-          style={{
-            padding: `0 ${config.space.S200}`,
-            flexShrink: 0,
-            borderBottomWidth: config.borderWidth.B300,
-          }}
-        >
-          <Text size="L400">Unread Rooms</Text>
-        </Header>
-        <Scroll size="300" hideTrack>
-          <Box direction="Column" style={{ padding: config.space.S200, paddingRight: 0 }}>
-            {rooms
-              .sort(factoryRoomIdByActivity(mx))
-              .sort(factoryRoomIdByUnreadCount((rId) => roomToUnread.get(rId)?.total ?? 0))
-              .map((roomId) => {
-                const room = mx.getRoom(roomId);
-                if (!room) return null;
-                const avatarSrc = getRoomAvatarUrl(mx, room, 32);
+    return (
+      <Menu ref={ref} style={{ width: toRem(250) }}>
+        <Box direction="Column" style={{ maxHeight: '70vh', maxWidth: toRem(300) }}>
+          <Header
+            size="300"
+            style={{
+              padding: `0 ${config.space.S200}`,
+              flexShrink: 0,
+              borderBottomWidth: config.borderWidth.B300,
+            }}
+          >
+            <Text size="L400">Unread Rooms</Text>
+          </Header>
+          <Scroll size="300" hideTrack>
+            <Box direction="Column" style={{ padding: config.space.S200, paddingRight: 0 }}>
+              {rooms
+                .sort(factoryRoomIdByActivity(mx))
+                .sort(factoryRoomIdByUnreadCount((rId) => roomToUnread.get(rId)?.total ?? 0))
+                .map((roomId) => {
+                  const room = mx.getRoom(roomId);
+                  if (!room) return null;
+                  const avatarSrc = getRoomAvatarUrl(mx, room, 32);
 
-                const roomUnread = roomToUnread.get(roomId);
-                if (!roomUnread) return null;
+                  const roomUnread = roomToUnread.get(roomId);
+                  if (!roomUnread) return null;
 
-                return (
-                  <NavItem
-                    key={roomId}
-                    variant="Surface"
-                    radii="400"
-                    highlight={!!roomUnread || selectedRoomId === roomId}
-                    aria-selected={selectedRoomId === roomId}
-                  >
-                    <NavLink
-                      onClick={requestClose}
-                      to={getHomeRoomPath(getCanonicalAliasOrRoomId(mx, roomId))}
+                  return (
+                    <NavItem
+                      key={roomId}
+                      variant="Surface"
+                      radii="400"
+                      highlight={!!roomUnread || selectedRoomId === roomId}
+                      aria-selected={selectedRoomId === roomId}
                     >
-                      <NavItemContent size="T300">
-                        <Box as="span" grow="Yes" alignItems="Center" gap="200">
-                          <Avatar size="200">
-                            {mDirects.has(roomId) ? (
-                              <RoomAvatar
-                                src={avatarSrc}
-                                alt={room.name}
-                                renderInitials={() => (
-                                  <Text as="span" size="H6">
-                                    {nameInitials(room.name)}
-                                  </Text>
-                                )}
-                              />
-                            ) : (
-                              <RoomIcon size="50" joinRule={room.getJoinRule()} />
+                      <NavLink
+                        onClick={requestClose}
+                        to={getHomeRoomPath(getCanonicalAliasOrRoomId(mx, roomId))}
+                      >
+                        <NavItemContent size="T300">
+                          <Box as="span" grow="Yes" alignItems="Center" gap="200">
+                            <Avatar size="200">
+                              {mDirects.has(roomId) ? (
+                                <RoomAvatar
+                                  src={avatarSrc}
+                                  alt={room.name}
+                                  renderInitials={() => (
+                                    <Text as="span" size="H6">
+                                      {nameInitials(room.name)}
+                                    </Text>
+                                  )}
+                                />
+                              ) : (
+                                <RoomIcon size="50" joinRule={room.getJoinRule()} />
+                              )}
+                            </Avatar>
+                            <Box as="span" grow="Yes">
+                              <Text as="span" size="Inherit" truncate>
+                                {room.name}
+                              </Text>
+                            </Box>
+                            {roomUnread && (
+                              <UnreadBadgeCenter>
+                                <UnreadBadge
+                                  highlight={roomUnread.highlight > 0}
+                                  count={roomUnread.total}
+                                />
+                              </UnreadBadgeCenter>
                             )}
-                          </Avatar>
-                          <Box as="span" grow="Yes">
-                            <Text as="span" size="Inherit" truncate>
-                              {room.name}
-                            </Text>
                           </Box>
-                          {roomUnread && (
-                            <UnreadBadgeCenter>
-                              <UnreadBadge
-                                highlight={roomUnread.highlight > 0}
-                                count={roomUnread.total}
-                              />
-                            </UnreadBadgeCenter>
-                          )}
-                        </Box>
-                      </NavItemContent>
-                    </NavLink>
-                  </NavItem>
-                );
-              })}
-          </Box>
-        </Scroll>
-      </Box>
-    </Menu>
-  );
-}
+                        </NavItemContent>
+                      </NavLink>
+                    </NavItem>
+                  );
+                })}
+            </Box>
+          </Scroll>
+        </Box>
+      </Menu>
+    );
+  }
+);
 
 export function NotificationBadge({ unread }: { unread: Unread }) {
   const unreadRooms = [...(unread.from ?? [])];