web/intl: replace homegrown join functions with Intl

web/package.json

@@ -19,11 +19,13 @@
 		"react": "^19.0.0",
 		"react-blurhash": "^0.3.0",
 		"react-dom": "^19.0.0",
+		"react-intl": "^7.0.2",
 		"react-spinners": "^0.15.0",
 		"unhomoglyph": "^1.0.6"
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.11.1",
+		"@swc/plugin-formatjs": "^2.0.1",
 		"@types/katex": "^0.16.7",
 		"@types/leaflet": "^1.9.14",
 		"@types/react": "^19.0.0",

web/src/App.tsx

@@ -14,6 +14,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 { useEffect, useLayoutEffect, useMemo } from "react"
+import { IntlProvider } from "react-intl"
 import { ScaleLoader } from "react-spinners"
 import Client from "./api/client.ts"
 import RPCClient from "./api/rpc.ts"
@@ -84,10 +85,12 @@ function App() {
 		return <VerificationScreen client={client} clientState={clientState}/>
 	} else {
 		return <ClientContext value={client}>
-			<LightboxWrapper>
-				<MainScreen/>
-			</LightboxWrapper>
-			{errorOverlay}
+			<IntlProvider locale="en">
+				<LightboxWrapper>
+					<MainScreen/>
+				</LightboxWrapper>
+				{errorOverlay}
+			</IntlProvider>
 		</ClientContext>
 	}
 }

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

@@ -14,14 +14,14 @@
 // 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 { Fragment, JSX } from "react"
+import { FormattedList } from "react-intl"
 import { ACLEventContent } from "@/api/types"
 import { listDiff } from "@/util/diff.ts"
-import { humanJoinReact, joinReact } from "@/util/reactjoin.tsx"
 import { ensureArray, ensureStringArray } from "@/util/validation.ts"
 import EventContentProps from "./props.ts"
 
-function joinServers(arr: string[]): JSX.Element[] {
-	return humanJoinReact(arr.map(item => <code className="server-name">{item}</code>))
+function joinServers(arr: string[]): JSX.Element {
+	return <FormattedList type="conjunction" value={(arr.map(item => <code className="server-name">{item}</code>))}/>
 }
 
 function makeACLChangeString(
@@ -47,7 +47,7 @@ function makeACLChangeString(
 			<>Participating from a server using an IP literal hostname is now {newAllowIP ? "allowed" : "banned"}.</>,
 		)
 	}
-	return joinReact(parts)
+	return <FormattedList type="conjunction" value={parts}/>
 }
 
 const ACLBody = ({ event, sender }: EventContentProps) => {
@@ -68,9 +68,9 @@ const ACLBody = ({ event, sender }: EventContentProps) => {
 	}
 	let changeString = makeACLChangeString(addedAllow, removedAllow, addedDeny, removedDeny, prevAllowIP, newAllowIP)
 	if (ensureArray(content.allow).length === 0) {
-		changeString = [<Fragment key="yay">
+		changeString = <Fragment key="yay">
 			🎉 All servers are banned from participating! This room can no longer be used.
-		</Fragment>]
+		</Fragment>
 	}
 	return <div className="acl-body">
 		{sender?.content.displayname ?? event.sender} changed the server ACLs: {changeString}

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

@@ -13,30 +13,35 @@
 //
 // 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 { IntlShape, useIntl } from "react-intl"
 import { PinnedEventsContent } from "@/api/types"
 import { listDiff } from "@/util/diff.ts"
-import { humanJoin } from "@/util/join.ts"
 import EventContentProps from "./props.ts"
 
-function renderPinChanges(content: PinnedEventsContent, prevContent?: PinnedEventsContent): string {
+function renderPinChanges(intl: IntlShape, content: PinnedEventsContent, prevContent?: PinnedEventsContent): string {
+	const list = (items: ReadonlyArray<string>) => intl.formatList(items, { type: "conjunction" })
 	const [added, removed] = listDiff(content.pinned ?? [], prevContent?.pinned ?? [])
-	if (added.length) {
+	if (added.length || removed.length) {
+		const items = []
+		if (added.length) {
+			items.push(`pinned ${list(added)}`)
+		}
 		if (removed.length) {
-			return `pinned ${humanJoin(added)} and unpinned ${humanJoin(removed)}`
+			items.push(`unpinned ${list(removed)}`)
 		}
-		return `pinned ${humanJoin(added)}`
-	} else if (removed.length) {
-		return `unpinned ${humanJoin(removed)}`
+		return list(items)
 	} else {
 		return "sent a no-op pin event"
 	}
 }
 
 const PinnedEventsBody = ({ event, sender }: EventContentProps) => {
+
+	const intl = useIntl()
 	const content = event.content as PinnedEventsContent
 	const prevContent = event.unsigned.prev_content as PinnedEventsContent | undefined
 	return <div className="pinned-events-body">
-		{sender?.content.displayname ?? event.sender} {renderPinChanges(content, prevContent)}
+		{sender?.content.displayname ?? event.sender} {renderPinChanges(intl, content, prevContent)}
 	</div>
 }
 

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

@@ -13,9 +13,9 @@
 //
 // 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 { FormattedList } from "react-intl"
 import { PowerLevelEventContent } from "@/api/types"
 import { objectDiff } from "@/util/diff.ts"
-import { humanJoin } from "@/util/join.ts"
 import EventContentProps from "./props.ts"
 
 function intDiff(messageParts: TemplateStringsArray, oldVal: number, newVal: number): string | null {
@@ -68,7 +68,8 @@ const PowerLevelBody = ({ event, sender }: EventContentProps) => {
 	const content = event.content as PowerLevelEventContent
 	const prevContent = event.unsigned.prev_content as PowerLevelEventContent | undefined
 	return <div className="power-level-body">
-		{sender?.content.displayname ?? event.sender} {humanJoin(renderPowerLevels(content, prevContent))}
+		{sender?.content.displayname ?? event.sender}
+		<FormattedList type="conjunction" value={renderPowerLevels(content, prevContent)}/>
 	</div>
 }