Mock setting presence and status

This is not the final design, I am waiting for my mautrix-go PR to be merged.

pkg/hicli/json-commands.go

@@ -90,6 +90,10 @@ func (h *HiClient) handleJSONCommand(ctx context.Context, req *JSONCommand) (any
 		return unmarshalAndCall(req.Data, func(params *getProfileParams) (*mautrix.RespPresence, error) {
 			return h.Client.GetPresence(ctx, params.UserID)
 		})
+	case "set_presence":
+		return unmarshalAndCall(req.Data, func(params *mautrix.ReqPresence) (bool, error) {
+			return true, h.Client.SetPresence(ctx, params)
+		})
 	case "get_mutual_rooms":
 		return unmarshalAndCall(req.Data, func(params *getProfileParams) ([]id.RoomID, error) {
 			return h.GetMutualRooms(ctx, params.UserID)

web/src/api/rpc.ts

@@ -185,6 +185,10 @@ export default abstract class RPCClient {
 		return this.request("get_presence", { user_id })
 	}
 
+	setPresence(presence: Presence): Promise<boolean> {
+		return this.request("set_presence", { presence })
+	}
+
 	getMutualRooms(user_id: UserID): Promise<RoomID[]> {
 		return this.request("get_mutual_rooms", { user_id })
 	}

web/src/ui/rightpanel/RightPanel.css

@@ -97,6 +97,11 @@ div.right-panel-content.user {
 		word-wrap: break-word;
 	}
 
+	div.presencesetter {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+	}
+
 	div.userid, div.displayname {
 		/* Ensure names aren't too long */
 		display: -webkit-box;

web/src/ui/rightpanel/UserInfo.tsx

@@ -67,6 +67,14 @@ const UserInfo = ({ userID }: UserInfoProps) => {
 		)
 	}, [roomCtx, userID, client])
 
+	const sendNewPresence = (newPresence: Presence) => {
+		console.log("Setting new presence", newPresence)
+		client.rpc.setPresence(newPresence).then(
+			() => setPresence(newPresence),
+			err => setErrors((errors && [...errors, `${err}`] || [`${err}`])),
+		)
+	}
+
 	const displayname = member?.displayname || globalProfile?.displayname || getLocalpart(userID)
 	return <>
 		<div className="avatar-container">
@@ -101,6 +109,20 @@ const UserInfo = ({ userID }: UserInfoProps) => {
 		</>}
 		<DeviceList client={client} room={roomCtx?.store} userID={userID}/>
 		<hr/>
+		{userID === client.userID && <>
+			<h3>Set presence</h3>
+			<div className="presencesetter">
+				<button title="Set presence to online" onClick={() => sendNewPresence({...(presence || {}), "presence": "online"})} type="button">{PresenceEmojis["online"]}</button>
+				<button title="Set presence to unavailable" onClick={() => sendNewPresence({...(presence || {}), "presence": "unavailable"})} type="button">{PresenceEmojis["unavailable"]}</button>
+				<button title="Set presence to offline" onClick={() => sendNewPresence({...(presence || {}), "presence": "offline"})} type="button">{PresenceEmojis["offline"]}</button>
+			</div>
+			<div className="statussetter">
+				<form onSubmit={(e) => {e.preventDefault(); sendNewPresence({...(presence || {"presence": "offline"}), "status_msg": ((e.target as HTMLFormElement).children[0] as HTMLInputElement).value})}}>
+					<input type="text" placeholder="Status message" defaultValue={presence?.status_msg || ""}/><button title="Set status message" onClick={() => alert("Set status message")} type="submit">Set</button>
+				</form>
+			</div>
+			<hr/>
+			</>}
 		{errors?.length ? <>
 			<UserInfoError errors={errors}/>
 			<hr/>