web/settings: add stub settings view

web/src/ui/roomview/RoomViewHeader.tsx

@@ -13,12 +13,14 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
-import { use } from "react"
+import { use, useCallback } from "react"
 import { getAvatarURL } from "@/api/media.ts"
 import { RoomStateStore } from "@/api/statestore"
 import { useEventAsState } from "@/util/eventdispatcher.ts"
 import MainScreenContext from "../MainScreenContext.ts"
 import { LightboxContext } from "../modal/Lightbox.tsx"
+import { ModalContext } from "../modal/Modal.tsx"
+import SettingsView from "../settings/SettingsView.tsx"
 import BackIcon from "@/icons/back.svg?react"
 import PeopleIcon from "@/icons/group.svg?react"
 import PinIcon from "@/icons/pin.svg?react"
@@ -34,6 +36,15 @@ const RoomViewHeader = ({ room }: RoomViewHeaderProps) => {
 	const avatarSourceID = roomMeta.lazy_load_summary?.heroes?.length === 1
 		? roomMeta.lazy_load_summary.heroes[0] : room.roomID
 	const mainScreen = use(MainScreenContext)
+	const openModal = use(ModalContext)
+	const openSettings = useCallback(() => {
+		openModal({
+			dimmed: true,
+			boxed: true,
+			innerBoxClass: "settings-view",
+			content: <SettingsView room={room} />,
+		})
+	}, [room, openModal])
 	return <div className="room-header">
 		<button className="back" onClick={mainScreen.clearActiveRoom}><BackIcon/></button>
 		<img
@@ -57,7 +68,7 @@ const RoomViewHeader = ({ room }: RoomViewHeaderProps) => {
 				onClick={mainScreen.clickRightPanelOpener}
 				title="Room Members"
 			><PeopleIcon/></button>
-			<button title="Room Settings"><SettingsIcon/></button>
+			<button title="Room Settings" onClick={openSettings}><SettingsIcon/></button>
 		</div>
 	</div>
 }

web/src/ui/settings/SettingsView.css

@@ -0,0 +1,9 @@
+div.settings-view {
+	width: min(60rem, 80vw);
+	display: flex;
+	flex-direction: column;
+
+	> h2 {
+		margin: 0;
+	}
+}

web/src/ui/settings/SettingsView.tsx

@@ -0,0 +1,32 @@
+// gomuks - A Matrix client written in Go.
+// Copyright (C) 2024 Tulir Asokan
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+import { RoomStateStore } from "@/api/statestore"
+import JSONView from "@/ui/util/JSONView.tsx"
+import "./SettingsView.css"
+
+interface SettingsViewProps {
+	room: RoomStateStore
+}
+
+const SettingsView = ({ room }: SettingsViewProps) => {
+	return <>
+		<h2>Settings</h2>
+		<code>{room.roomID}</code>
+		<JSONView data={room.preferences} />
+	</>
+}
+
+export default SettingsView