Move notification bell to space panel

cypress/e2e/right-panel/notification-panel.spec.ts

@@ -38,6 +38,7 @@ describe("NotificationPanel", () => {
     });
 
     it("should render empty state", () => {
+        cy.enableLabsFeature("feature_notifications_panel");
         cy.viewRoomByName(ROOM_NAME);
         cy.findByRole("button", { name: "Notifications" }).click();
 

cypress/e2e/room/room-header.spec.ts

@@ -46,7 +46,6 @@ describe("Room Header", () => {
                 "Video call",
                 "Search",
                 "Threads",
-                "Notifications",
                 "Room info",
             ];
 
@@ -56,7 +55,7 @@ describe("Room Header", () => {
             }
 
             // Assert that just those seven buttons exist on mx_LegacyRoomHeader by default
-            cy.findAllByRole("button").should("have.length", 7);
+            cy.findAllByRole("button").should("have.length", expectedButtonNames.length);
         });
 
         cy.get(".mx_LegacyRoomHeader").percySnapshotElement("Room header");
@@ -97,7 +96,7 @@ describe("Room Header", () => {
             // Assert the size of buttons on RoomHeader are specified and the buttons are not compressed
             // Note these assertions do not check the size of mx_LegacyRoomHeader_name button
             cy.get(".mx_LegacyRoomHeader_button")
-                .should("have.length", 6)
+                .should("have.length", 5)
                 .should("be.visible")
                 .should("have.css", "height", "32px")
                 .should("have.css", "width", "32px");
@@ -108,21 +107,6 @@ describe("Room Header", () => {
         });
     });
 
-    it("should have buttons highlighted by being clicked", () => {
-        cy.createRoom({ name: "Test Room" }).viewRoomByName("Test Room");
-
-        cy.get(".mx_LegacyRoomHeader").within(() => {
-            // Check these buttons
-            const buttonsHighlighted = ["Threads", "Notifications", "Room info"];
-
-            for (const name of buttonsHighlighted) {
-                cy.findByRole("button", { name: name }).click(); // Highlight the button
-            }
-        });
-
-        cy.get(".mx_LegacyRoomHeader").percySnapshotElement("Room header - with a highlighted button");
-    });
-
     describe("with a video room", () => {
         const createVideoRoom = () => {
             // Enable video rooms. This command reloads the app
@@ -160,7 +144,7 @@ describe("Room Header", () => {
                 }
 
                 // Assert that there is not a button except those buttons
-                cy.findAllByRole("button").should("have.length", 7);
+                cy.findAllByRole("button").should("have.length", 6);
             });
 
             cy.get(".mx_LegacyRoomHeader").percySnapshotElement("Room header - with a video room");

res/css/structures/_QuickSettingsButton.pcss

@@ -15,15 +15,6 @@ limitations under the License.
 */
 
 .mx_QuickSettingsButton {
-    flex: 0 0 auto;
-    border-radius: 8px;
-    position: relative;
-    margin: 12px auto;
-    color: $secondary-content;
-    min-width: 32px;
-    min-height: 32px;
-    line-height: 32px;
-
     &.expanded {
         margin-left: 20px;
         padding-left: 44px; /* align with toggle collapse button text */
@@ -32,9 +23,9 @@ limitations under the License.
 
     &::before {
         content: "";
-        position: absolute;
-        width: 32px;
-        height: 32px;
+        display: block;
+        width: 100%;
+        height: 100%;
         left: 0;
         mask-image: url("$(res)/img/element-icons/settings.svg");
         mask-repeat: no-repeat;

res/css/structures/_RightPanel.pcss

@@ -38,11 +38,6 @@ limitations under the License.
     mask-image: url("$(res)/img/element-icons/room/thread.svg");
 }
 
-.mx_RightPanel_notifsButton::before {
-    mask-image: url("$(res)/img/element-icons/notifications.svg");
-    mask-position: center;
-}
-
 .mx_RightPanel_roomSummaryButton::before {
     mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
     mask-position: center;

res/css/structures/_SpacePanel.pcss

@@ -24,7 +24,7 @@ limitations under the License.
 
     background-color: $spacePanel-bg-color;
     flex: 0 0 auto;
-    padding: 0;
+    padding: 0 0 12px 0;
     margin: 0;
     position: relative;
     /* Fix for the blurred avatar-background */
@@ -283,7 +283,6 @@ limitations under the License.
         }
 
         .mx_SpaceTreeLevel {
-            // Indent subspaces
             padding-left: 16px;
         }
     }
@@ -439,3 +438,28 @@ limitations under the License.
 .mx_SpacePanel_sharePublicSpace {
     margin: 0;
 }
+
+.mx_SpacePanel_button {
+    flex: 0 0 auto;
+    border-radius: 8px;
+    position: relative;
+    margin: 0 auto;
+    color: $secondary-content;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    padding: 12px;
+
+    &:not(.expanded):hover {
+        color: $quaternary-content;
+        background-color: $quaternary-content;
+
+        &::before {
+            background-color: $primary-content;
+        }
+
+        svg {
+            color: $primary-content;
+        }
+    }
+}

src/components/views/right_panel/LegacyRoomHeaderButtons.tsx

@@ -33,12 +33,8 @@ import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
 import { useReadPinnedEvents, usePinnedEvents } from "./PinnedMessagesCard";
 import { showThreadPanel } from "../../../dispatcher/dispatch-actions/threads";
 import SettingsStore from "../../../settings/SettingsStore";
-import {
-    RoomNotificationStateStore,
-    UPDATE_STATUS_INDICATOR,
-} from "../../../stores/notifications/RoomNotificationStateStore";
+import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
 import { NotificationColor } from "../../../stores/notifications/NotificationColor";
-import { SummarizedNotificationState } from "../../../stores/notifications/SummarizedNotificationState";
 import PosthogTrackers from "../../../PosthogTrackers";
 import { ButtonEvent } from "../elements/AccessibleButton";
 import { doesRoomOrThreadHaveUnreadMessages } from "../../../Unread";
@@ -57,7 +53,7 @@ interface IUnreadIndicatorProps {
     color?: NotificationColor;
 }
 
-const UnreadIndicator: React.FC<IUnreadIndicatorProps> = ({ color }) => {
+export const UnreadIndicator: React.FC<IUnreadIndicatorProps> = ({ color }) => {
     if (color === NotificationColor.None) {
         return null;
     }
@@ -132,11 +128,9 @@ interface IProps {
  */
 export default class LegacyRoomHeaderButtons extends HeaderButtons<IProps> {
     private static readonly THREAD_PHASES = [RightPanelPhases.ThreadPanel, RightPanelPhases.ThreadView];
-    private globalNotificationState: SummarizedNotificationState;
 
     public constructor(props: IProps) {
         super(props, HeaderKind.Room);
-        this.globalNotificationState = RoomNotificationStateStore.instance.globalState;
     }
 
     public componentDidMount(): void {
@@ -153,7 +147,6 @@ export default class LegacyRoomHeaderButtons extends HeaderButtons<IProps> {
         this.props.room?.on(ThreadEvent.New, this.onNotificationUpdate);
         this.props.room?.on(ThreadEvent.Update, this.onNotificationUpdate);
         this.onNotificationUpdate();
-        RoomNotificationStateStore.instance.on(UPDATE_STATUS_INDICATOR, this.onUpdateStatus);
     }
 
     public componentWillUnmount(): void {
@@ -166,7 +159,6 @@ export default class LegacyRoomHeaderButtons extends HeaderButtons<IProps> {
         this.props.room?.off(RoomEvent.MyMembership, this.onNotificationUpdate);
         this.props.room?.off(ThreadEvent.New, this.onNotificationUpdate);
         this.props.room?.off(ThreadEvent.Update, this.onNotificationUpdate);
-        RoomNotificationStateStore.instance.off(UPDATE_STATUS_INDICATOR, this.onUpdateStatus);
     }
 
     private onNotificationUpdate = (): void => {
@@ -196,14 +188,6 @@ export default class LegacyRoomHeaderButtons extends HeaderButtons<IProps> {
         return NotificationColor.None;
     }
 
-    private onUpdateStatus = (notificationState: SummarizedNotificationState): void => {
-        // XXX: why don't we read from this.state.globalNotificationCount in the render methods?
-        this.globalNotificationState = notificationState;
-        this.setState({
-            globalNotificationColor: notificationState.color,
-        });
-    };
-
     protected onAction(payload: ActionPayload): void {
         if (payload.action === Action.ViewUser) {
             if (payload.member) {
@@ -246,11 +230,6 @@ export default class LegacyRoomHeaderButtons extends HeaderButtons<IProps> {
         }
     };
 
-    private onNotificationsClicked = (): void => {
-        // This toggles for us, if needed
-        this.setPhase(RightPanelPhases.NotificationPanel);
-    };
-
     private onPinnedMessagesClicked = (): void => {
         // This toggles for us, if needed
         this.setPhase(RightPanelPhases.PinnedMessages);
@@ -309,21 +288,6 @@ export default class LegacyRoomHeaderButtons extends HeaderButtons<IProps> {
                 <UnreadIndicator color={this.state.threadNotificationColor} />
             </HeaderButton>,
         );
-        rightPanelPhaseButtons.set(
-            RightPanelPhases.NotificationPanel,
-            <HeaderButton
-                key="notifsButton"
-                name="notifsButton"
-                title={_t("Notifications")}
-                isHighlighted={this.isPhase(RightPanelPhases.NotificationPanel)}
-                onClick={this.onNotificationsClicked}
-                isUnread={this.globalNotificationState.color === NotificationColor.Red}
-            >
-                {this.globalNotificationState.color === NotificationColor.Red ? (
-                    <UnreadIndicator color={this.globalNotificationState.color} />
-                ) : null}
-            </HeaderButton>,
-        );
         rightPanelPhaseButtons.set(
             RightPanelPhases.RoomSummary,
             <HeaderButton

src/components/views/spaces/NotificationPanelButton.tsx

@@ -0,0 +1,49 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+
+import { _t } from "../../../languageHandler";
+import TooltipTarget from "../elements/TooltipTarget";
+import { Alignment } from "../elements/Tooltip";
+import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
+import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
+import { UnreadIndicator } from "../right_panel/LegacyRoomHeaderButtons";
+import { NotificationColor } from "../../../stores/notifications/NotificationColor";
+import { useGlobalNotificationState } from "../../../hooks/useGlobalNotification";
+import { Icon as NotificationIcon } from "../../../../res/img/element-icons/notifications.svg";
+
+export const NotificationPanelButton: React.FC = () => {
+    const summarizedNotificationState = useGlobalNotificationState();
+    return (
+        <TooltipTarget label={_t("Notifications")} alignment={Alignment.Right}>
+            <div
+                className="mx_SpacePanel_button"
+                title={_t("Notifications")}
+                onClick={() => {
+                    RightPanelStore.instance.setCard({ phase: RightPanelPhases.NotificationPanel });
+                }}
+                role="button"
+                aria-label={_t("Notifications")}
+            >
+                <NotificationIcon />
+                {summarizedNotificationState.color === NotificationColor.Red ? (
+                    <UnreadIndicator color={summarizedNotificationState.color} />
+                ) : null}
+            </div>
+        </TooltipTarget>
+    );
+};

src/components/views/spaces/QuickSettingsButton.tsx

@@ -39,7 +39,8 @@ import { SdkContextClass } from "../../../contexts/SDKContext";
 
 const QuickSettingsButton: React.FC<{
     isPanelCollapsed: boolean;
-}> = ({ isPanelCollapsed = false }) => {
+    className?: string;
+}> = ({ isPanelCollapsed = false, className = "" }) => {
     const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu<HTMLDivElement>();
 
     const { [MetaSpace.Favourites]: favouritesEnabled, [MetaSpace.People]: peopleEnabled } =
@@ -131,7 +132,7 @@ const QuickSettingsButton: React.FC<{
     return (
         <>
             <AccessibleTooltipButton
-                className={classNames("mx_QuickSettingsButton", { expanded: !isPanelCollapsed })}
+                className={classNames("mx_QuickSettingsButton", { expanded: !isPanelCollapsed }, className)}
                 onClick={openMenu}
                 title={_t("Quick settings")}
                 inputRef={handle}

src/components/views/spaces/SpacePanel.tsx

@@ -60,7 +60,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import { SettingLevel } from "../../../settings/SettingLevel";
 import UIStore from "../../../stores/UIStore";
 import QuickSettingsButton from "./QuickSettingsButton";
-import { useSettingValue } from "../../../hooks/useSettings";
+import { useFeatureEnabled, useSettingValue } from "../../../hooks/useSettings";
 import UserMenu from "../../structures/UserMenu";
 import IndicatorScrollbar from "../../structures/IndicatorScrollbar";
 import { IS_MAC, Key } from "../../../Keyboard";
@@ -72,6 +72,7 @@ import { NotificationState } from "../../../stores/notifications/NotificationSta
 import { ALTERNATE_KEY_NAME } from "../../../accessibility/KeyboardShortcuts";
 import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
 import { UIComponent } from "../../../settings/UIFeature";
+import { NotificationPanelButton } from "./NotificationPanelButton";
 
 const useSpaces = (): [Room[], MetaSpace[], Room[], SpaceKey] => {
     const invites = useEventEmitterState<Room[]>(SpaceStore.instance, UPDATE_INVITED_SPACES, () => {
@@ -344,6 +345,8 @@ const SpacePanel: React.FC = () => {
         }
     });
 
+    const isNotifPanelEnabled = useFeatureEnabled("feature_notifications_panel");
+
     return (
         <RovingTabIndexProvider handleHomeEnd handleUpDown={!dragging}>
             {({ onKeyDownHandler, onDragEndHandler }) => (
@@ -399,7 +402,8 @@ const SpacePanel: React.FC = () => {
                             )}
                         </Droppable>
 
-                        <QuickSettingsButton isPanelCollapsed={isPanelCollapsed} />
+                        {isNotifPanelEnabled && <NotificationPanelButton />}
+                        <QuickSettingsButton className="mx_SpacePanel_button" isPanelCollapsed={isPanelCollapsed} />
                     </div>
                 </DragDropContext>
             )}