web/settings: add support for leaving rooms

This commit is contained in:
Tulir Asokan 2024-12-20 16:31:35 +02:00
parent da7eb6c583
commit 252a7bcbd1
2 changed files with 23 additions and 0 deletions

View file

@ -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);

View file

@ -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>