Fix code and include ?via parameters

web/src/api/statestore/room.ts

@@ -18,7 +18,7 @@ import { CustomEmojiPack, parseCustomEmojiPack } from "@/util/emoji"
 import { NonNullCachedEventDispatcher } from "@/util/eventdispatcher.ts"
 import toSearchableString from "@/util/searchablestring.ts"
 import Subscribable, { MultiSubscribable, NoDataSubscribable } from "@/util/subscribable.ts"
-import { getDisplayname } from "@/util/validation.ts"
+import { getDisplayname, getServerName } from "@/util/validation.ts"
 import {
 	ContentURI,
 	DBReceipt,
@@ -246,6 +246,35 @@ export class RoomStateStore {
 		return this.#membersCache ?? []
 	}
 
+	getViaServers(): string[] {
+		const ownServerName = getServerName(this.parent.userID)
+		const vias = [ownServerName]
+		const members = this.getMembers()
+		const memberCount = new Map<string, number>()
+		const powerLevels: PowerLevelEventContent = this.getStateEvent("m.room.power_levels", "")?.content ?? {}
+		const usersDefault = powerLevels.users_default ?? 0
+		let powerServer: string | undefined = undefined
+		for (const member of members) {
+			const serverName = getServerName(member.userID)
+			if (serverName !== ownServerName) {
+				if (!powerServer && (powerLevels?.users?.[member.userID] ?? usersDefault) > usersDefault) {
+					powerServer = serverName
+					vias.push(powerServer)
+				}
+				memberCount.set(serverName, (memberCount.get(serverName) ?? 0) + 1)
+			}
+		}
+		const servers = Array.from(memberCount.entries())
+		servers.sort(([, a], [, b]) => b - a)
+		for (const [serverName] of servers) {
+			if (serverName !== ownServerName && serverName !== powerServer) {
+				vias.push(serverName)
+				break
+			}
+		}
+		return vias
+	}
+
 	getPinnedEvents(): EventID[] {
 		const pinnedList = this.getStateEvent("m.room.pinned_events", "")?.content?.pinned
 		if (Array.isArray(pinnedList)) {

web/src/ui/timeline/menu/ShareModal.tsx

@@ -52,8 +52,8 @@ const ShareModal = ({ evt, title, confirmButton, onConfirm, generateLink }: Conf
 				</tr>
 			</tbody>
 		</table>
-		<div className="description">
-			Share: <a href={link} target="_blank" rel="noreferrer">{link}</a>
+		<div className="output-preview">
+			<span className="no-select">Preview: </span><code>{link}</code>
 		</div>
 		<div className="confirm-buttons">
 			<button type="button" onClick={closeModal}>Cancel</button>

web/src/ui/timeline/menu/index.css

@@ -101,6 +101,7 @@ div.confirm-message-modal > form {
 
 		> div.timeline-event {
 			margin: 0;
+			padding: 0;
 		}
 	}
 
@@ -118,4 +119,14 @@ div.confirm-message-modal > form {
 			padding: .5rem 1rem;
 		}
 	}
+
+	> div.output-preview {
+		> span.no-select {
+			user-select: none;
+		}
+
+		> code {
+			word-break: break-word;
+		}
+	}
 }

web/src/ui/timeline/menu/useSecondaryItems.tsx

@@ -17,11 +17,11 @@ import { use } from "react"
 import Client from "@/api/client.ts"
 import { useRoomState } from "@/api/statestore"
 import { MemDBEvent } from "@/api/types"
-import ShareModal from "@/ui/timeline/menu/ShareModal.tsx"
 import { ModalCloseContext, ModalContext } from "../../modal"
 import { RoomContext, RoomContextData } from "../../roomview/roomcontext.ts"
 import JSONView from "../../util/JSONView.tsx"
 import ConfirmWithMessageModal from "./ConfirmWithMessageModal.tsx"
+import ShareModal from "./ShareModal.tsx"
 import { getPending, getPowerLevels } from "./util.ts"
 import ViewSourceIcon from "@/icons/code.svg?react"
 import DeleteIcon from "@/icons/delete.svg?react"
@@ -42,7 +42,7 @@ export const useSecondaryItems = (
 		openModal({
 			dimmed: true,
 			boxed: true,
-			content: <JSONView data={evt} />,
+			content: <JSONView data={evt}/>,
 		})
 	}
 	const onClickReport = () => {
@@ -93,21 +93,26 @@ export const useSecondaryItems = (
 
 	const onClickShareEvent = () => {
 		const generateLink = (useMatrixTo: boolean, includeEvent: boolean) => {
-			let generatedUrl = useMatrixTo ? "https://matrix.to/#/" : "matrix:roomid/"
-			if(useMatrixTo) {
-				generatedUrl += evt.room_id
+			const isRoomIDLink = true
+			let generatedURL = useMatrixTo ? "https://matrix.to/#/" : "matrix:roomid/"
+			if (useMatrixTo) {
+				generatedURL += evt.room_id
 			} else {
-				generatedUrl += `${evt.room_id.slice(1)}`
+				generatedURL += `${evt.room_id.slice(1)}`
 			}
-			if(includeEvent) {
-				if(useMatrixTo) {
-					generatedUrl += `/${evt.event_id}`
-				}
-				else {
-					generatedUrl += `/e/${evt.event_id.slice(1)}`
+			if (includeEvent) {
+				if (useMatrixTo) {
+					generatedURL += `/${evt.event_id}`
+				} else {
+					generatedURL += `/e/${evt.event_id.slice(1)}`
 				}
 			}
-			return generatedUrl
+			if (isRoomIDLink) {
+				generatedURL += "?" + new URLSearchParams(
+					roomCtx.store.getViaServers().map(server => ["via", server]),
+				).toString()
+			}
+			return generatedURL
 		}
 		openModal({
 			dimmed: true,