Ability to hide pinned messages (#28183)

Currently, when a room has pinned messages an annoying, impossible to
dismiss bar will be displayed over the message area. This patch
introduces the following changes:

 - add a setting to control whether the PinnedMessageBanner is displayed
   or not (keep current behaviour as default)
 - add a pin icon to the room header

Why allow hiding pinned messages? Because the banner is annoying. I, and
judging by the +1s on #28183 a few other users, found it unnecessary to
always have it in front of our eyes. The new setting allows us to make
it go away.

Why add an icon for pinned messages if you can view pinned messages from
room info? I will answer this by posing another question: why display
the banner when pinned messages can be viewed from room info? Jokes
aside, the icon makes the access quicker--the UX is exactly the same as
for threads: you can see then from room info, or by clicking their icon.

Author: marekjm

src/components/structures/RoomView.tsx

@@ -432,6 +432,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             promptAskToJoin: false,
             viewRoomOpts: { buttons: [] },
             isRoomEncrypted: null,
+            showPinnedMessageBanner: SettingsStore.getValue("showPinnedMessageBanner"),
         };
     }
 
@@ -2512,7 +2513,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                     <>
                         <Measured sensor={this.roomViewBody} onMeasurement={this.onMeasurement} />
                         {auxPanel}
-                        {pinnedMessageBanner}
+                        {this.state.showPinnedMessageBanner && (pinnedMessageBanner)}
                         <main className={timelineClasses}>
                             <FileDropTarget parent={this.roomView.current} onFileDrop={this.onFileDrop} />
                             {topUnreadMessagesBar}

src/components/views/rooms/RoomHeader/RoomHeader.tsx

@@ -12,6 +12,7 @@ import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/vi
 import VoiceCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/voice-call-solid";
 import CloseCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
 import ThreadsIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads-solid";
+import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin-solid";
 import RoomInfoIcon from "@vector-im/compound-design-tokens/assets/web/icons/info-solid";
 import NotificationsIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications-solid";
 import VerifiedIcon from "@vector-im/compound-design-tokens/assets/web/icons/verified";
@@ -345,6 +346,22 @@ export default function RoomHeader({
 
                     {showChatButton && <VideoRoomChatButton room={room} />}
 
+                    <Tooltip label={_t("right_panel|pinned_messages_button")}>
+                        <IconButton
+                            indicator={notificationLevelToIndicator(threadNotifications)}
+                            onClick={(evt) => {
+                                evt.stopPropagation();
+                                RightPanelStore.instance.showOrHidePhase(RightPanelPhases.PinnedMessages);
+                                // FIXME Track interaction with PinnedMessages
+                                // button?
+                                // PosthogTrackers.trackInteraction("WebRoomHeaderButtonsThreadsButton", evt);
+                            }}
+                            aria-label={_t("right_panel|pinned_messages_button")}
+                        >
+                            <ToggleableIcon Icon={PinIcon} phase={RightPanelPhases.PinnedMessages} />
+                        </IconButton>
+                    </Tooltip>
+
                     <Tooltip label={_t("common|threads")}>
                         <IconButton
                             indicator={notificationLevelToIndicator(threadNotifications)}

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx

@@ -153,6 +153,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
         "showTypingNotifications",
         "showRedactions",
         "showReadReceipts",
+        "showPinnedMessageBanner",
         "showJoinLeaves",
         "showDisplaynameChanges",
         "showChatEffects",

src/i18n/strings/en_EN.json

@@ -3016,6 +3016,7 @@
         "show_join_leave": "Show join/leave messages (invites/removes/bans unaffected)",
         "show_nsfw_content": "Show NSFW content",
         "show_read_receipts": "Show read receipts sent by other users",
+        "show_pinned_message_banner": "Show pinned message banner",
         "show_redaction_placeholder": "Show a placeholder for removed messages",
         "show_stickers_button": "Show stickers button",
         "show_typing_notifications": "Show typing notifications",

src/settings/Settings.tsx

@@ -235,6 +235,7 @@ export interface Settings {
     "showAvatarChanges": IBaseSetting<boolean>;
     "showDisplaynameChanges": IBaseSetting<boolean>;
     "showReadReceipts": IBaseSetting<boolean>;
+    "showPinnedMessageBanner": IBaseSetting<boolean>;
     "showTwelveHourTimestamps": IBaseSetting<boolean>;
     "alwaysShowTimestamps": IBaseSetting<boolean>;
     "userTimezone": IBaseSetting<string>;
@@ -766,6 +767,12 @@ export const SETTINGS: Settings = {
         default: true,
         invertedSettingName: "hideReadReceipts",
     },
+    "showPinnedMessageBanner": {
+        supportedLevels: LEVELS_ROOM_SETTINGS,
+        displayName: _td("settings|show_pinned_message_banner"),
+        default: true,
+        invertedSettingName: "hidePinnedMessageBanner",
+    },
     "showTwelveHourTimestamps": {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
         displayName: _td("settings|use_12_hour_format"),