From 3d2de94acfb23039a6d09386c38bd4faea23a701 Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Sun, 19 Apr 2026 11:40:50 +0100
Subject: [PATCH] fix: broken out page

---
 frontend/src/pages/out.tsx | 35 ++++++++++++++++++++---------------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/frontend/src/pages/out.tsx b/frontend/src/pages/out.tsx
index f8004dd..d09d8db 100644
--- a/frontend/src/pages/out.tsx
+++ b/frontend/src/pages/out.tsx
@@ -1,33 +1,38 @@
 import { Icon } from "@iconify/react";
-import { Link, useNavigate, useSearchParams } from "react-router";
+import { Link, Navigate, useSearchParams } from "react-router";
 
 export default function LinkOutPage() {
-	const navigate = useNavigate();
 	const [searchParams] = useSearchParams();
 	const url = searchParams.get("url");
 
-	if (!url) {
-		navigate("/");
-		return null;
-	}
+	if (!url) return <Navigate to={"/"} replace />;
 
 	let parsed: URL;
 	try {
 		parsed = new URL(url);
 	} catch {
-		navigate("/"); // redirect if URL is invalid
-		return null;
+		return <Navigate to={"/"} replace />; // redirect if URL is invalid
 	}
 
-	if (!["http:", "https:"].includes(parsed.protocol)) {
-		navigate("/");
-		return null;
-	}
+	if (!["http:", "https:"].includes(parsed.protocol)) return <Navigate to={"/"} replace />;
 
 	const isSafe = Array.from(SAFE_LINKS).some((domain) => parsed.hostname === domain || parsed.hostname.endsWith(`.${domain}`));
 	if (isSafe) {
-		navigate(url);
-		return null;
+		window.location.replace(url);
+		return (
+			<div className="grow flex items-center justify-center">
+				<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg py-8 px-6 max-w-md w-full text-center flex flex-col items-center">
+					<h2 className="text-3xl font-black flex items-center gap-4 mb-1">
+						<Icon icon="svg-spinners:180-ring-with-bg" className="text-3xl" />
+						Redirecting...
+					</h2>
+
+					<div className="bg-zinc-100 border border-zinc-300 rounded-md p-2 wrap-break-word w-full mt-4">
+						<code className="font-mono text-sm">{url}</code>
+					</div>
+				</div>
+			</div>
+		);
 	}
 
 	return (
@@ -39,7 +44,7 @@ export default function LinkOutPage() {
 				</h2>
 				<p>You're attempting to leave TomodachiShare island! The destination website is potentially dangerous.</p>
 
-				<div className="bg-zinc-100 border border-zinc-300 rounded-md p-2 break-all w-full mt-4">
+				<div className="bg-zinc-100 border border-zinc-300 rounded-md p-2 wrap-break-word w-full mt-4">
 					<code className="font-mono text-sm">{url}</code>
 				</div>