Make the UserMenu echo the current community name

res/css/structures/_UserMenu.scss

@@ -19,6 +19,30 @@ limitations under the License.
     // to make the menu button sort of aligned with the explore button below
     padding-right: 6px;
 
+    &.mx_UserMenu_prototype {
+        // The margin & padding combination between here and the ::after is to
+        // align the border line with the tag panel.
+        margin-bottom: 6px;
+
+        padding-right: 0; // make the right edge line up with the explore button
+
+        .mx_UserMenu_headerButtons {
+            // considering we've eliminated right padding on the menu itself, we need to
+            // push the chevron in slightly (roughly lining up with the center of the
+            // plus buttons)
+            margin-right: 2px;
+        }
+
+        // we cheat opacity on the theme colour with an after selector here
+        &::after {
+            content: '';
+            border-bottom: 1px solid $roomsublist-divider-color;
+            opacity: 0.2;
+            display: block;
+            padding-top: 8px;
+        }
+    }
+
     .mx_UserMenu_headerButtons {
         width: 16px;
         height: 16px;
@@ -56,6 +80,28 @@ limitations under the License.
             }
         }
 
+        .mx_UserMenu_doubleName {
+            flex: 1;
+            min-width: 0; // make flexbox aware that it can crush this to a tiny width
+
+            .mx_UserMenu_userName,
+            .mx_UserMenu_subUserName {
+                display: block;
+            }
+
+            .mx_UserMenu_subUserName {
+                color: $muted-fg-color;
+                font-size: $font-13px;
+                line-height: $font-18px;
+                flex: 1;
+
+                // Ellipsize any text overflow
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+            }
+        }
+
         .mx_UserMenu_userName {
             font-weight: 600;
             font-size: $font-15px;

src/components/structures/UserMenu.tsx

@@ -42,6 +42,9 @@ import IconizedContextMenu, {
     IconizedContextMenuOption,
     IconizedContextMenuOptionList
 } from "../views/context_menus/IconizedContextMenu";
+import { CommunityPrototypeStore } from "../../stores/CommunityPrototypeStore";
+import * as fbEmitter from "fbemitter";
+import TagOrderStore from "../../stores/TagOrderStore";
 
 interface IProps {
     isMinimized: boolean;
@@ -58,6 +61,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
     private dispatcherRef: string;
     private themeWatcherRef: string;
     private buttonRef: React.RefObject<HTMLButtonElement> = createRef();
+    private tagStoreRef: fbEmitter.EventSubscription;
 
     constructor(props: IProps) {
         super(props);
@@ -77,14 +81,20 @@ export default class UserMenu extends React.Component<IProps, IState> {
     public componentDidMount() {
         this.dispatcherRef = defaultDispatcher.register(this.onAction);
         this.themeWatcherRef = SettingsStore.watchSetting("theme", null, this.onThemeChanged);
+        this.tagStoreRef = TagOrderStore.addListener(this.onTagStoreUpdate);
     }
 
     public componentWillUnmount() {
         if (this.themeWatcherRef) SettingsStore.unwatchSetting(this.themeWatcherRef);
         if (this.dispatcherRef) defaultDispatcher.unregister(this.dispatcherRef);
         OwnProfileStore.instance.off(UPDATE_EVENT, this.onProfileUpdate);
+        this.tagStoreRef.remove();
     }
 
+    private onTagStoreUpdate = () => {
+        this.forceUpdate(); // we don't have anything useful in state to update
+    };
+
     private isUserOnDarkTheme(): boolean {
         const theme = SettingsStore.getValue("theme");
         if (theme.startsWith("custom-")) {
@@ -298,12 +308,34 @@ export default class UserMenu extends React.Component<IProps, IState> {
         const displayName = OwnProfileStore.instance.displayName || MatrixClientPeg.get().getUserId();
         const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize);
 
+        const prototypeCommunityName = CommunityPrototypeStore.instance.getSelectedCommunityName();
+
+        let isPrototype = false;
+        let menuName = _t("User menu");
         let name = <span className="mx_UserMenu_userName">{displayName}</span>;
         let buttons = (
             <span className="mx_UserMenu_headerButtons">
                 {/* masked image in CSS */}
             </span>
         );
+        if (prototypeCommunityName) {
+            name = (
+                <div className="mx_UserMenu_doubleName">
+                    <span className="mx_UserMenu_userName">{prototypeCommunityName}</span>
+                    <span className="mx_UserMenu_subUserName">{displayName}</span>
+                </div>
+            );
+            menuName = _t("Community and user menu");
+            isPrototype = true;
+        } else if (SettingsStore.getValue("feature_communities_v2_prototypes")) {
+            name = (
+                <div className="mx_UserMenu_doubleName">
+                    <span className="mx_UserMenu_userName">{_t("Home")}</span>
+                    <span className="mx_UserMenu_subUserName">{displayName}</span>
+                </div>
+            );
+            isPrototype = true;
+        }
         if (this.props.isMinimized) {
             name = null;
             buttons = null;
@@ -312,6 +344,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
         const classes = classNames({
             'mx_UserMenu': true,
             'mx_UserMenu_minimized': this.props.isMinimized,
+            'mx_UserMenu_prototype': isPrototype,
         });
 
         return (
@@ -320,7 +353,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
                     className={classes}
                     onClick={this.onOpenMenuClick}
                     inputRef={this.buttonRef}
-                    label={_t("User menu")}
+                    label={menuName}
                     isExpanded={!!this.state.contextMenuPosition}
                     onContextMenu={this.onContextMenu}
                 >

src/i18n/strings/en_EN.json

@@ -2129,6 +2129,7 @@
     "All settings": "All settings",
     "Feedback": "Feedback",
     "User menu": "User menu",
+    "Community and user menu": "Community and user menu",
     "Could not load user profile": "Could not load user profile",
     "Verify this login": "Verify this login",
     "Session verified": "Session verified",