From 252a7bcbd102bf3709bb69a9e7a5400eb06e32b3 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Fri, 20 Dec 2024 16:31:35 +0200
Subject: [PATCH] web/settings: add support for leaving rooms

---
 web/src/ui/settings/SettingsView.css |  9 +++++++++
 web/src/ui/settings/SettingsView.tsx | 14 ++++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/web/src/ui/settings/SettingsView.css b/web/src/ui/settings/SettingsView.css
index 2135a6b3..c64eda9a 100644
--- a/web/src/ui/settings/SettingsView.css
+++ b/web/src/ui/settings/SettingsView.css
@@ -13,6 +13,15 @@ div.settings-view {
 			text-overflow: ellipsis;
 			text-wrap: nowrap;
 		}
+
+		button.leave-room {
+			padding: .5rem 1rem;
+
+			&:hover, &:focus {
+				background-color: var(--error-color);
+				color: var(--inverted-text-color);
+			}
+		}
 	}
 
 	width: min(60rem, 80vw);
diff --git a/web/src/ui/settings/SettingsView.tsx b/web/src/ui/settings/SettingsView.tsx
index 1621c8d4..8ec27206 100644
--- a/web/src/ui/settings/SettingsView.tsx
+++ b/web/src/ui/settings/SettingsView.tsx
@@ -30,6 +30,7 @@ import { useEventAsState } from "@/util/eventdispatcher.ts"
 import useEvent from "@/util/useEvent.ts"
 import ClientContext from "../ClientContext.ts"
 import { LightboxContext } from "../modal/Lightbox.tsx"
+import { ModalCloseContext } from "../modal/Modal.tsx"
 import JSONView from "../util/JSONView.tsx"
 import Toggle from "../util/Toggle.tsx"
 import CloseIcon from "@/icons/close.svg?react"
@@ -294,6 +295,7 @@ const AppliedSettingsView = ({ room }: SettingsViewProps) => {
 const SettingsView = ({ room }: SettingsViewProps) => {
 	const roomMeta = useEventAsState(room.meta)
 	const client = use(ClientContext)!
+	const closeModal = use(ModalCloseContext)
 	const setPref = useCallback((context: PreferenceContext, key: keyof Preferences, value: PreferenceValueType | undefined) => {
 		if (context === PreferenceContext.Account) {
 			client.rpc.setAccountData("fi.mau.gomuks.preferences", {
@@ -327,6 +329,17 @@ const SettingsView = ({ room }: SettingsViewProps) => {
 			)
 		}
 	}, [client])
+	const onClickLeave = useCallback(() => {
+		if (window.confirm(`Really leave ${room.meta.current.name}?`)) {
+			client.rpc.leaveRoom(room.roomID).then(
+				() => {
+					console.info("Successfully left", room.roomID)
+					closeModal()
+				},
+				err => window.alert(`Failed to leave room: ${err}`),
+			)
+		}
+	}, [client, room, closeModal])
 	usePreferences(client.store, room)
 	const globalServer = client.store.serverPreferenceCache
 	const globalLocal = client.store.localPreferenceCache
@@ -346,6 +359,7 @@ const SettingsView = ({ room }: SettingsViewProps) => {
 				{roomMeta.name && <div className="room-name">{roomMeta.name}</div>}
 				<code>{room.roomID}</code>
 				<div>{roomMeta.topic}</div>
+				<button className="leave-room" onClick={onClickLeave}>Leave room</button>
 			</div>
 		</div>
 		<table>