Implement a "Copy my layout to the room" button

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -186,9 +186,18 @@ const AppsSection: React.FC<IAppsSectionProps> = ({ room }) => {
         }
     };
 
+    let copyLayoutBtn = null;
+    if (apps.length > 0 && WidgetLayoutStore.instance.canCopyLayoutToRoom(room)) {
+        copyLayoutBtn = (
+            <AccessibleButton kind="link" onClick={() => WidgetLayoutStore.instance.copyLayoutToRoom(room)}>
+                { _t("Set my room layout for everyone") }
+            </AccessibleButton>
+        );
+    }
+
     return <Group className="mx_RoomSummaryCard_appsGroup" title={_t("Widgets")}>
         { apps.map(app => <AppRow key={app.id} app={app} room={room} />) }
-
+        { copyLayoutBtn }
         <AccessibleButton kind="link" onClick={onManageIntegrations}>
             { apps.length > 0 ? _t("Edit widgets, bridges & bots") : _t("Add widgets, bridges & bots") }
         </AccessibleButton>

src/i18n/strings/en_EN.json

@@ -1636,6 +1636,7 @@
     "Unpin": "Unpin",
     "Unpin a widget to view it in this panel": "Unpin a widget to view it in this panel",
     "Options": "Options",
+    "Set my room layout for everyone": "Set my room layout for everyone",
     "Widgets": "Widgets",
     "Edit widgets, bridges & bots": "Edit widgets, bridges & bots",
     "Add widgets, bridges & bots": "Add widgets, bridges & bots",

src/stores/widgets/WidgetLayoutStore.ts

@@ -409,6 +409,32 @@ export class WidgetLayoutStore extends ReadyWatchingStore {
         this.updateUserLayout(room, {[widget.id]:{container: toContainer}});
     }
 
+    public canCopyLayoutToRoom(room: Room): boolean {
+        if (!this.matrixClient) return false; // not ready yet
+        return room.currentState.maySendStateEvent(WIDGET_LAYOUT_EVENT_TYPE, this.matrixClient.getUserId());
+    }
+
+    public copyLayoutToRoom(room: Room) {
+        const allWidgets = this.getAllWidgets(room);
+        const evContent: ILayoutStateEvent = {widgets: {}};
+        for (const [widget, container] of allWidgets) {
+            evContent.widgets[widget.id] = {container};
+            if (container === Container.Top) {
+                const containerWidgets = this.getContainerWidgets(room, container);
+                const idx = containerWidgets.findIndex(w => w.id === widget.id);
+                const widths = this.byRoom[room.roomId]?.[container]?.distributions;
+                const height = this.byRoom[room.roomId]?.[container]?.height;
+                evContent.widgets[widget.id] = {
+                    ...evContent.widgets[widget.id],
+                    height: height ? Math.round(height) : null,
+                    width: widths[idx] ? Math.round(widths[idx]) : null,
+                    index: idx,
+                };
+            }
+        }
+        this.matrixClient.sendStateEvent(room.roomId, WIDGET_LAYOUT_EVENT_TYPE, evContent, "");
+    }
+
     private getAllWidgets(room: Room): [IApp, Container][] {
         const containers = this.byRoom[room.roomId];
         if (!containers) return [];