web/roomview: add explore state button to header

web/src/ui/roomview/RoomViewHeader.tsx

@@ -19,8 +19,10 @@ import { RoomStateStore } from "@/api/statestore"
 import { useEventAsState } from "@/util/eventdispatcher.ts"
 import MainScreenContext from "../MainScreenContext.ts"
 import { LightboxContext, NestableModalContext } from "../modal"
+import RoomStateExplorer from "../settings/RoomStateExplorer.tsx"
 import SettingsView from "../settings/SettingsView.tsx"
 import BackIcon from "@/icons/back.svg?react"
+import CodeIcon from "@/icons/code.svg?react"
 import PeopleIcon from "@/icons/group.svg?react"
 import PinIcon from "@/icons/pin.svg?react"
 import SettingsIcon from "@/icons/settings.svg?react"
@@ -42,6 +44,14 @@ const RoomViewHeader = ({ room }: RoomViewHeaderProps) => {
 			content: <SettingsView room={room} />,
 		})
 	}
+	const openRoomStateExplorer = () => {
+		openModal({
+			dimmed: true,
+			boxed: true,
+			innerBoxClass: "room-state-explorer-box",
+			content: <RoomStateExplorer room={room} />,
+		})
+	}
 	return <div className="room-header">
 		<button className="back" onClick={mainScreen.clearActiveRoom}><BackIcon/></button>
 		<img
@@ -71,6 +81,7 @@ const RoomViewHeader = ({ room }: RoomViewHeaderProps) => {
 				onClick={mainScreen.clickRightPanelOpener}
 				title="Room Members"
 			><PeopleIcon/></button>
+			<button title="Explore room state" onClick={openRoomStateExplorer}><CodeIcon/></button>
 			<button title="Room Settings" onClick={openSettings}><SettingsIcon/></button>
 		</div>
 	</div>