web/timeline: open inline images in lightbox when clicked

web/src/App.tsx

@@ -28,7 +28,7 @@ function App() {
 	const client = useMemo(() => new Client(new WSClient("_gomuks/websocket")), [])
 	const connState = useEventAsState(client.rpc.connect)
 	const clientState = useEventAsState(client.state)
-	;((window as unknown) as { client: Client }).client = client
+	window.client = client
 	useEffect(() => {
 		Notification.requestPermission()
 			.then(permission => console.log("Notification permission:", permission))

web/src/ui/modal/Lightbox.tsx

@@ -51,6 +51,7 @@ export const LightboxWrapper = ({ children }: { children: React.ReactNode }) =>
 			setParams(params as LightboxParams)
 		}
 	}, [])
+	window.openLightbox = onOpen
 	const onClose = useCallback(() => setParams(null), [])
 	return <>
 		<LightboxContext value={onOpen}>

web/src/ui/timeline/content/TextMessageBody.tsx

@@ -16,8 +16,17 @@
 import { MessageEventContent } from "@/api/types"
 import EventContentProps from "./props.ts"
 
+function isImageElement(elem: EventTarget): elem is HTMLImageElement {
+	return (elem as HTMLImageElement).tagName === "IMG"
+}
+
 const onClickHTML = (evt: React.MouseEvent<HTMLDivElement>) => {
-	if ((evt.target as HTMLElement).closest("span.hicli-spoiler")?.classList.toggle("spoiler-revealed")) {
+	if (isImageElement(evt.target)) {
+		window.openLightbox({
+			src: evt.target.src,
+			alt: evt.target.alt,
+		})
+	} else if ((evt.target as HTMLElement).closest?.("span.hicli-spoiler")?.classList.toggle("spoiler-revealed")) {
 		// When unspoilering, don't trigger links and other clickables inside the spoiler
 		evt.preventDefault()
 	}

web/src/vite-env.d.ts

@@ -1,2 +1,11 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-svgr/client" />
+
+import type Client from "@/api/client.ts"
+
+declare global {
+	interface Window {
+		client: Client
+		openLightbox: (params: { src: string, alt: string }) => void
+	}
+}