From 0b424e59bf0f85616a9ddbaedc7cea182fae7416 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Sat, 28 Dec 2024 17:19:33 +0200
Subject: [PATCH] web/roomlist: add bidi isolate for sender names

---
 web/src/ui/roomlist/Entry.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/web/src/ui/roomlist/Entry.tsx b/web/src/ui/roomlist/Entry.tsx
index efe235a..c26f2fa 100644
--- a/web/src/ui/roomlist/Entry.tsx
+++ b/web/src/ui/roomlist/Entry.tsx
@@ -13,7 +13,7 @@
 //
 // 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 { memo, use } from "react"
+import { JSX, memo, use } from "react"
 import { getRoomAvatarURL } from "@/api/media.ts"
 import type { RoomListEntry } from "@/api/statestore"
 import type { MemDBEvent, MemberEventContent } from "@/api/types"
@@ -28,9 +28,9 @@ export interface RoomListEntryProps {
 	hidden: boolean
 }
 
-function getPreviewText(evt?: MemDBEvent, senderMemberEvt?: MemDBEvent | null): [string, string] {
+function getPreviewText(evt?: MemDBEvent, senderMemberEvt?: MemDBEvent | null): [string, JSX.Element | null] {
 	if (!evt) {
-		return ["", ""]
+		return ["", null]
 	}
 	if ((evt.type === "m.room.message" || evt.type === "m.sticker") && typeof evt.content.body === "string") {
 		// eslint-disable-next-line react-hooks/rules-of-hooks
@@ -44,10 +44,14 @@ function getPreviewText(evt?: MemDBEvent, senderMemberEvt?: MemDBEvent | null):
 		}
 		return [
 			`${displayname}: ${evt.content.body}`,
-			`${displayname.length > 16 ? displayname.slice(0, 12) + "…" : displayname}: ${previewText}`,
+			<>
+				<span style={{ unicodeBidi: "isolate" }}>
+					{displayname.length > 16 ? displayname.slice(0, 12) + "…" : displayname}
+				</span>: {previewText}
+			</>,
 		]
 	}
-	return ["", ""]
+	return ["", null]
 }
 
 function renderEntry(room: RoomListEntry) {