Merge pull request #543 from sumnerevans/render-typing-notifications

web/typing: render typing notifications below composer

web/src/api/client.ts

@@ -116,6 +116,8 @@ export default class Client {
 			this.store.applySendComplete(ev.data)
 		} else if (ev.command === "image_auth_token") {
 			this.store.imageAuthToken = ev.data
+		} else if (ev.command === "typing") {
+			this.store.applyTyping(ev.data)
 		}
 	}
 

web/src/api/statestore/hooks.ts

@@ -27,6 +27,10 @@ export function useRoomTimeline(room: RoomStateStore): (MemDBEvent | null)[] {
 	)
 }
 
+export function useRoomTyping(room: RoomStateStore): string[] {
+	return useSyncExternalStore(room.typingSub.subscribe, () => room.typing)
+}
+
 export function useRoomState(
 	room?: RoomStateStore, type?: EventType, stateKey: string | undefined = "",
 ): MemDBEvent | null {

web/src/api/statestore/main.ts

@@ -32,6 +32,7 @@ import {
 	SendCompleteData,
 	SyncCompleteData,
 	SyncRoom,
+	TypingEventData,
 	UnknownEventContent,
 	UserID,
 	roomStateGUIDToString,
@@ -382,6 +383,15 @@ export class StateStore {
 		}
 	}
 
+	applyTyping(typing: TypingEventData) {
+		const room = this.rooms.get(typing.room_id)
+		if (!room) {
+			// TODO log or something?
+			return
+		}
+		room.applyTyping(typing.user_ids)
+	}
+
 	doGarbageCollection() {
 		const maxLastOpened = Date.now() - window.gcSettings.lastOpenedCutoff
 		let deletedEvents = 0

web/src/api/statestore/room.ts

@@ -90,10 +90,12 @@ export class RoomStateStore {
 	timelineCache: (MemDBEvent | null)[] = []
 	state: Map<EventType, Map<string, EventRowID>> = new Map()
 	stateLoaded = false
+	typing: UserID[] = []
 	fullMembersLoaded = false
 	readonly eventsByRowID: Map<EventRowID, MemDBEvent> = new Map()
 	readonly eventsByID: Map<EventID, MemDBEvent> = new Map()
 	readonly timelineSub = new Subscribable()
+	readonly typingSub = new Subscribable()
 	readonly stateSubs = new MultiSubscribable()
 	readonly eventSubs = new MultiSubscribable()
 	readonly requestedEvents: Set<EventID> = new Set()
@@ -418,6 +420,11 @@ export class RoomStateStore {
 		}
 	}
 
+	applyTyping(users: string[]) {
+		this.typing = users
+		this.typingSub.notify()
+	}
+
 	doGarbageCollection() {
 		const memberEventsToKeep = new Set<UserID>()
 		const eventsToKeep = new Set<EventRowID>()

web/src/index.css

@@ -27,6 +27,8 @@
 	--button-hover-color: rgba(0, 0, 0, .2);
 	--light-hover-color: rgba(0, 0, 0, .1);
 
+	--composer-background-color: #f0f0f0;
+
 	--timeline-hover-bg-color: #eee;
 	--timeline-highlight-bg-color: rgba(255, 255, 0, .1);
 	--timeline-highlight-hover-bg-color: #eec;
@@ -42,7 +44,7 @@
 	--room-list-entry-selected-color: rgba(0, 0, 0, 0.125);
 
 	--dimmed-overlay-background-color: rgba(0, 0, 0, .75);
-	--modal-box-shadow-color: rgba(0, 0, 0, 0.15);
+	--modal-box-shadow-color: rgba(0, 0, 0, 0.1);
 
 	--emoji-selected-border-color: #cec;
 
@@ -79,6 +81,11 @@
 	--timeline-message-gap-small-event: 0;
 	--timeline-sender-name-timestamp-gap: .25rem;
 	--timeline-sender-name-content-gap: 0;
+	--timeline-horizontal-padding: 1.5rem;
+
+	@media screen and (max-width: 45rem) {
+		--timeline-horizontal-padding: .5rem;
+	}
 
 	@media (prefers-color-scheme: dark) {
 		color-scheme: dark;
@@ -103,6 +110,8 @@
 		--button-hover-color: rgba(255, 255, 255, .2);
 		--light-hover-color: rgba(255, 255, 255, .1);
 
+		--composer-background-color: #0a0a0a;
+
 		--timeline-hover-bg-color: #111;
 		--timeline-highlight-bg-color: rgba(255, 255, 0, .1);
 		--timeline-highlight-hover-bg-color: #331;
@@ -115,7 +124,7 @@
 		--room-list-entry-hover-color: rgba(255, 255, 255, 0.075);
 		--room-list-entry-selected-color: rgba(255, 255, 255, 0.125);
 
-		--modal-box-shadow-color: rgba(255, 255, 255, 0.1);
+		--modal-box-shadow-color: rgba(255, 255, 255, 0.04);
 
 		--emoji-selected-border-color: #131;
 

web/src/ui/MainScreen.css

@@ -16,7 +16,7 @@ main.matrix-main {
 			/ var(--room-list-width) 0   1fr      0   var(--right-panel-width);
 	}
 
-	@media screen and (max-width: 750px) {
+	@media screen and (max-width: 45rem) {
 		&.right-panel-open {
 			grid-template: "rightpanel" 1fr / 1fr;
 			> div.room-list-wrapper {

web/src/ui/composer/Autocompleter.css

@@ -5,9 +5,11 @@ div.autocompletions-wrapper {
 
 div.autocompletions {
 	position: absolute;
-	bottom: 0;
+	bottom: 1.25rem;
-	border-top: 1px solid var(--border-color);
+	left: var(--timeline-horizontal-padding);
-	border-right: 1px solid var(--border-color);
+	border: 1px solid var(--border-color);
+	border-radius: 0.5rem;
+	box-shadow: 0 0 1rem var(--modal-box-shadow-color);
 	background-color: var(--background-color);
 	padding: .5rem;
 	max-height: 20rem;

web/src/ui/composer/MessageComposer.css

@@ -1,9 +1,14 @@
 div.message-composer {
-	border-top: 1px solid var(--border-color);
+	margin: -1rem var(--timeline-horizontal-padding) 0;
+	background-color: var(--composer-background-color);
+	border: 1px solid var(--border-color);
+	border-radius: 0.5rem;
 	overflow: hidden;
 	grid-area: input;
 	/* WebKit/Safari requires this hack for some reason, works fine without in other browsers */
 	min-height: 2.25rem;
+	z-index: 999;
+	box-shadow: 0 0 1rem var(--modal-box-shadow-color);
 
 	blockquote.reply-body > pre {
 		text-wrap: auto !important;
@@ -38,7 +43,7 @@ div.message-composer {
 
 	> div.composer-media, > div.composer-location {
 		display: flex;
-		padding: .5rem;
+		padding: .5rem .5rem 0;
 		justify-content: space-between;
 
 		> button {

web/src/ui/composer/MessageComposer.tsx

@@ -374,11 +374,17 @@ const MessageComposer = () => {
 		// checking scrollHeight seems to be the only reliable way to get the size of the text.
 		textInput.current.rows = 1
 		const newTextRows = Math.min((textInput.current.scrollHeight - 16) / 20, MAX_TEXTAREA_ROWS)
+		if (newTextRows === MAX_TEXTAREA_ROWS) {
+			textInput.current.style.overflowY = "auto"
+		} else {
+			// There's a weird 1px scroll when using line-height, so set overflow to hidden when it's not needed
+			textInput.current.style.overflowY = "hidden"
+		}
 		textInput.current.rows = newTextRows
 		textRows.current = newTextRows
 		// This has to be called unconditionally, because setting rows = 1 messes up the scroll state otherwise
 		roomCtx.scrollToBottom()
-	}, [state, roomCtx])
+	}, [state.text, roomCtx])
 	// Saving to localStorage could be done in the reducer, but that's not very proper, so do it in an effect.
 	useEffect(() => {
 		roomCtx.isEditing.emit(editing !== null)

web/src/ui/composer/TypingNotifications.css

@@ -0,0 +1,19 @@
+div.typing-notifications {
+	grid-area: typing;
+	height: 1.5rem;
+	margin: 0 var(--timeline-horizontal-padding);
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+	font-size: 0.9rem;
+
+	> div.avatars {
+		display: flex;
+		align-items: center;
+		margin-left: 0.35rem;
+
+		> img {
+			margin-left: -0.35rem;
+		}
+	}
+}

web/src/ui/composer/TypingNotifications.tsx

@@ -0,0 +1,71 @@
+// gomuks - A Matrix client written in Go.
+// Copyright (C) 2024 Sumner Evans
+//
+// 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 { JSX, use } from "react"
+import { PulseLoader } from "react-spinners"
+import { getAvatarURL } from "@/api/media.ts"
+import { useRoomTyping } from "@/api/statestore"
+import { MemberEventContent } from "@/api/types/mxtypes.ts"
+import { humanJoinReact } from "@/util/reactjoin.tsx"
+import ClientContext from "../ClientContext.ts"
+import { useRoomContext } from "../roomview/roomcontext.ts"
+import "./TypingNotifications.css"
+
+const TypingNotifications = () => {
+	const roomCtx = useRoomContext()
+	const client = use(ClientContext)!
+	const room = roomCtx.store
+	const typing = useRoomTyping(room).filter(u => u !== client.userID)
+	let loader: JSX.Element | null = null
+	if (typing.length > 0) {
+		loader = <PulseLoader speedMultiplier={0.5} size={5} color="var(--primary-color)" />
+	}
+	const avatars: JSX.Element[] = []
+	const memberNames: string[] = []
+	for (let i = 0; i < 5 && i < typing.length; i++) {
+		const sender = typing[i]
+		const memberEvt = room.getStateEvent("m.room.member", sender)
+		const member = (memberEvt?.content ?? null) as MemberEventContent | null
+		if (!memberEvt) {
+			use(ClientContext)?.requestMemberEvent(room, sender)
+		}
+		avatars.push(<img
+			className="small avatar"
+			loading="lazy"
+			src={getAvatarURL(sender, member)}
+			alt=""
+		/>)
+		memberNames.push(member?.displayname ?? sender)
+	}
+
+	let description: JSX.Element | null = null
+	if (typing.length > 4) {
+		description = <div>{typing.length} users are typing</div>
+	} else if (typing.length > 0) {
+		description = <div>
+			{humanJoinReact(memberNames)}
+			{typing.length === 1 ? " is " : " are "}
+			typing
+		</div>
+	}
+
+	return <div className={typing.length ? "typing-notifications" : "typing-notifications empty"}>
+		<div className="avatars">{avatars}</div>
+		{description}
+		{loader}
+	</div>
+}
+
+export default TypingNotifications

web/src/ui/roomview/RoomView.css

@@ -9,6 +9,7 @@ div.room-view {
 		"messageview" 1fr
 		"autocomplete" 0
 		"input" auto
+		"typing" auto
 		/ 1fr;
 	contain: strict;
 }

web/src/ui/roomview/RoomView.tsx

@@ -16,6 +16,7 @@
 import { JSX, useRef } from "react"
 import { RoomStateStore } from "@/api/statestore"
 import MessageComposer from "../composer/MessageComposer.tsx"
+import TypingNotifications from "../composer/TypingNotifications.tsx"
 import RightPanel, { RightPanelProps } from "../rightpanel/RightPanel.tsx"
 import TimelineView from "../timeline/TimelineView.tsx"
 import RoomViewHeader from "./RoomViewHeader.tsx"
@@ -38,6 +39,7 @@ const RoomView = ({ room, rightPanelResizeHandle, rightPanel }: RoomViewProps) =
 			<RoomViewHeader room={room}/>
 			<TimelineView/>
 			<MessageComposer/>
+			<TypingNotifications/>
 		</div>
 		{rightPanelResizeHandle}
 		{rightPanel && <RightPanel {...rightPanel}/>}

web/src/ui/timeline/ReplyBody.css

@@ -22,6 +22,10 @@ blockquote.reply-body {
 		}
 	}
 
+	&.composer {
+		margin: .5rem .5rem 0;
+	}
+
 	&:hover, &.composer {
 		> div.message-text {
 			color: var(--text-color);

web/src/ui/timeline/TimelineEvent.css

@@ -1,14 +1,16 @@
 div.timeline-event {
 	width: 100%;
 	max-width: 100%;
+	box-sizing: border-box;
+	padding: 0 var(--timeline-horizontal-padding);
 	display: grid;
-	margin-top: var(--timeline-message-gap);
 	grid-template:
 		"cmc                          cmc                        cmc      cmc"    0
 		"avatar                       gap                        sender   sender" auto
 		"avatar                       gap                        content  status" auto
 		/ var(--timeline-avatar-size) var(--timeline-avatar-gap) 1fr      2rem;
 	contain: layout;
+	margin-top: var(--timeline-message-gap);
 
 	&.highlight {
 		background-color: var(--timeline-highlight-bg-color);
@@ -209,6 +211,7 @@ div.date-separator {
 	display: flex;
 	align-items: center;
 	gap: .5rem;
+	padding: calc(var(--timeline-message-gap)/2) 0;
 
 	> hr {
 		flex: 1;

web/src/ui/timeline/TimelineView.css

@@ -1,5 +1,5 @@
 div.timeline-view {
-	padding: 1rem;
+	padding: 1rem 0 2rem 0;
 	overflow-y: scroll;
 
 	display: flex;