Iterate to match design

res/css/views/right_panel/_WidgetCard.scss

@@ -22,4 +22,20 @@ limitations under the License.
         height: 100%;
         border: 0;
     }
+
+    &.mx_WidgetCard_noEdit {
+        .mx_AccessibleButton_kind_secondary {
+            margin: 0 12px;
+
+            &:first-child {
+                // expand the Pin to room primary action
+                flex-grow: 1;
+            }
+        }
+    }
+}
+
+.mx_WidgetCard_maxPinnedTooltip {
+    background-color: $notice-primary-color;
+    color: #ffffff;
 }

src/components/views/right_panel/WidgetCard.tsx

@@ -37,6 +37,8 @@ import IconizedContextMenu, {
 } from "../context_menus/IconizedContextMenu";
 import {AppTileActionPayload} from "../../../dispatcher/payloads/AppTileActionPayload";
 import {Capability} from "../../../widgets/WidgetApi";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import classNames from "classnames";
 
 interface IProps {
     room: Room;
@@ -134,13 +136,39 @@ const WidgetCard: React.FC<IProps> = ({ room, widgetId, onClose }) => {
         WidgetUtils.editWidget(room, app);
     };
 
-    const footer = <React.Fragment>
-        <AccessibleButton kind="secondary" onClick={onEditClick} disabled={!canModify}>
+    let editButton;
+    if (canModify) {
+        editButton = <AccessibleButton kind="secondary" onClick={onEditClick}>
             { _t("Edit") }
-        </AccessibleButton>
-        <AccessibleButton kind="secondary" onClick={onPinClick} disabled={!WidgetStore.instance.canPin(app.id)}>
+        </AccessibleButton>;
+    }
+
+    const pinButtonClasses = canModify ? "" : "mx_WidgetCard_widePinButton";
+
+    let pinButton;
+    if (WidgetStore.instance.canPin(app.id)) {
+        pinButton = <AccessibleButton
+            kind="secondary"
+            onClick={onPinClick}
+            className={pinButtonClasses}
+        >
             { _t("Pin to room") }
-        </AccessibleButton>
+        </AccessibleButton>;
+    } else {
+        pinButton = <AccessibleTooltipButton
+            title={_t("You can only pin 2 apps at a time")}
+            tooltipClassName="mx_WidgetCard_maxPinnedTooltip"
+            kind="secondary"
+            className={pinButtonClasses}
+            disabled
+        >
+            { _t("Pin to room") }
+        </AccessibleTooltipButton>;
+    }
+
+    const footer = <React.Fragment>
+        { editButton }
+        { pinButton }
         <ContextMenuButton
             kind="secondary"
             className={""}
@@ -158,7 +186,9 @@ const WidgetCard: React.FC<IProps> = ({ room, widgetId, onClose }) => {
     return <BaseCard
         header={header}
         footer={footer}
-        className="mx_WidgetCard"
+        className={classNames("mx_WidgetCard", {
+            mx_WidgetCard_noEdit: !canModify,
+        })}
         onClose={onClose}
         previousPhase={RightPanelPhases.RoomSummary}
         withoutScrollContainer

src/stores/WidgetStore.ts

@@ -23,7 +23,6 @@ import defaultDispatcher from "../dispatcher/dispatcher";
 import SettingsStore from "../settings/SettingsStore";
 import WidgetEchoStore from "../stores/WidgetEchoStore";
 import WidgetUtils from "../utils/WidgetUtils";
-import {IRRELEVANT_ROOM} from "../settings/WatchManager";
 import {SettingLevel} from "../settings/SettingLevel";
 
 interface IState {}
@@ -55,7 +54,7 @@ export default class WidgetStore extends AsyncStoreWithClient<IState> {
     private constructor() {
         super(defaultDispatcher, {});
 
-        SettingsStore.watchSetting("Widgets.pinned", IRRELEVANT_ROOM, this.onPinnedWidgetsChange);
+        SettingsStore.watchSetting("Widgets.pinned", null, this.onPinnedWidgetsChange);
         WidgetEchoStore.on("update", this.onWidgetEchoStoreUpdate);
     }