Add option to change room notification settings (#2281)

src/app/features/room-nav/RoomNavItem.tsx

@@ -15,6 +15,7 @@ import {
   Line,
   RectCords,
   Badge,
+  Spinner,
 } from 'folds';
 import { useFocusWithin, useHover } from 'react-aria';
 import FocusTrap from 'focus-trap-react';
@@ -43,13 +44,19 @@ import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
 import { useSpaceOptionally } from '../../hooks/useSpace';
+import {
+  getRoomNotificationModeIcon,
+  RoomNotificationMode,
+} from '../../hooks/useRoomsNotificationPreferences';
+import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
 
 type RoomNavItemMenuProps = {
   room: Room;
   requestClose: () => void;
+  notificationMode?: RoomNotificationMode;
 };
 const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
-  ({ room, requestClose }, ref) => {
+  ({ room, requestClose, notificationMode }, ref) => {
     const mx = useMatrixClient();
     const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
     const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
@@ -95,6 +102,27 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
               Mark as Read
             </Text>
           </MenuItem>
+          <RoomNotificationModeSwitcher roomId={room.roomId} value={notificationMode}>
+            {(handleOpen, opened, changing) => (
+              <MenuItem
+                size="300"
+                after={
+                  changing ? (
+                    <Spinner size="100" variant="Secondary" />
+                  ) : (
+                    <Icon size="100" src={getRoomNotificationModeIcon(notificationMode)} />
+                  )
+                }
+                radii="300"
+                aria-pressed={opened}
+                onClick={handleOpen}
+              >
+                <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+                  Notifications
+                </Text>
+              </MenuItem>
+            )}
+          </RoomNotificationModeSwitcher>
         </Box>
         <Line variant="Surface" size="300" />
         <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
@@ -170,7 +198,7 @@ type RoomNavItemProps = {
   room: Room;
   selected: boolean;
   linkPath: string;
-  muted?: boolean;
+  notificationMode?: RoomNotificationMode;
   showAvatar?: boolean;
   direct?: boolean;
 };
@@ -179,7 +207,7 @@ export function RoomNavItem({
   selected,
   showAvatar,
   direct,
-  muted,
+  notificationMode,
   linkPath,
 }: RoomNavItemProps) {
   const mx = useMatrixClient();
@@ -263,7 +291,9 @@ export function RoomNavItem({
                 <UnreadBadge highlight={unread.highlight > 0} count={unread.total} />
               </UnreadBadgeCenter>
             )}
-            {muted && !optionsVisible && <Icon size="50" src={Icons.BellMute} />}
+            {!optionsVisible && notificationMode !== RoomNotificationMode.Unset && (
+              <Icon size="50" src={getRoomNotificationModeIcon(notificationMode)} />
+            )}
           </Box>
         </NavItemContent>
       </NavLink>
@@ -287,7 +317,11 @@ export function RoomNavItem({
                   escapeDeactivates: stopPropagation,
                 }}
               >
-                <RoomNavItemMenu room={room} requestClose={() => setMenuAnchor(undefined)} />
+                <RoomNavItemMenu
+                  room={room}
+                  requestClose={() => setMenuAnchor(undefined)}
+                  notificationMode={notificationMode}
+                />
               </FocusTrap>
             }
           >