chore: Update npm dependencies and add normalize-url package

web/app/routes/reader.$encodedUrl/components/ContentWithTranslations.tsx

@@ -7,7 +7,6 @@ import { Translation } from "./Translation";
 interface ContentWithTranslationsProps {
 	content: string;
 	sourceTextInfoWithTranslations: SourceTextInfoWithTranslations[];
-	targetLanguage: string;
 	userId: number | null;
 }
 

web/app/routes/reader.$encodedUrl/components/Translation.tsx

@@ -56,13 +56,14 @@ export function Translation({
 	return (
 		<div
 			className="relative group"
-			onMouseEnter={() => setTimeout(() => setIsHovered(true), 100)}
-			onMouseLeave={() => setIsHovered(false)}
+			onMouseEnter={() =>
+				!isHovered && setTimeout(() => setIsHovered(true), 500)
+			}
 		>
 			<div className="w-full notranslate mt-2 pt-2 border-t border-gray-200">
 				{sanitizedAndParsedText}
 			</div>
-			<div className="absolute top-0 left-0 right-0 z-10 opacity-0 invisible border bg-slate-50  dark:bg-gray-900 rounded-xl shadow-xl dark:shadow-white/10 group-hover:opacity-100 group-hover:visible transition-all duration-500 ease-in-out">
+			<div className="absolute top-0 left-0 right-0 z-10 opacity-0 invisible border bg-white dark:bg-gray-900 rounded-xl shadow-xl dark:shadow-white/10 group-hover:opacity-100 group-hover:visible transition-all duration-500 ease-in-out">
 				{isHovered && (
 					<AddAndVoteTranslations
 						bestTranslationWithVote={bestTranslationWithVote}

web/app/routes/reader.$encodedUrl/route.tsx

@@ -3,6 +3,7 @@ import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
 import { useParams } from "@remix-run/react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { Header } from "~/components/Header";
+import { normalizeAndSanitizeUrl } from "~/utils/normalize-and-sanitize-url.server";
 import { getTargetLanguage } from "~/utils/target-language.server";
 import { authenticator } from "../../utils/auth.server";
 import { ContentWithTranslations } from "./components/ContentWithTranslations";
@@ -15,15 +16,17 @@ import { actionSchema } from "./types";
 
 export const loader = async ({ params, request }: LoaderFunctionArgs) => {
 	const targetLanguage = await getTargetLanguage(request);
-
 	const { encodedUrl } = params;
+
 	if (!encodedUrl) {
 		throw new Response("Missing URL parameter", { status: 400 });
 	}
+
 	const safeUser = await authenticator.isAuthenticated(request);
 	const safeUserId = safeUser?.id;
+	const normalizedUrl = normalizeAndSanitizeUrl(encodedUrl);
 	const pageData = await fetchLatestPageVersionWithTranslations(
-		decodeURIComponent(encodedUrl),
+		normalizedUrl,
 		safeUserId ?? 0,
 		targetLanguage,
 	);
@@ -107,7 +110,6 @@ export default function ReaderView() {
 						sourceTextInfoWithTranslations={
 							pageData.sourceTextInfoWithTranslations
 						}
-						targetLanguage={targetLanguage}
 						userId={safeUser?.id ?? null}
 					/>
 				</article>

web/app/routes/translate/route.tsx

@@ -7,6 +7,7 @@ import { Header } from "~/components/Header";
 import { getTranslateUserQueue } from "~/feature/translate/translate-user-queue";
 import { validateGeminiApiKey } from "~/feature/translate/utils/gemini";
 import { authenticator } from "~/utils/auth.server";
+import { normalizeAndSanitizeUrl } from "~/utils/normalize-and-sanitize-url.server";
 import { getTargetLanguage } from "~/utils/target-language.server";
 import { GeminiApiKeyForm } from "./components/GeminiApiKeyForm";
 import { URLTranslationForm } from "./components/URLTranslationForm";
@@ -75,10 +76,11 @@ export async function action({ request }: ActionFunctionArgs) {
 				};
 			}
 			const targetLanguage = await getTargetLanguage(request);
+			const normalizedUrl = normalizeAndSanitizeUrl(submission.value.url);
 			// Start the translation job in background
 			const queue = getTranslateUserQueue(safeUser.id);
 			const job = await queue.add(`translate-${safeUser.id}`, {
-				url: submission.value.url,
+				url: normalizedUrl,
 				targetLanguage,
 				apiKey: dbUser.geminiApiKey,
 				userId: safeUser.id,
@@ -88,7 +90,7 @@ export async function action({ request }: ActionFunctionArgs) {
 			return {
 				intent,
 				lastResult: submission.reply({ resetForm: true }),
-				url: submission.value.url,
+				url: normalizedUrl,
 			};
 		}
 		default: {

web/app/utils/normalize-and-sanitize-url.server.ts

@@ -0,0 +1,15 @@
+import normalizeUrl from "normalize-url";
+
+export function normalizeAndSanitizeUrl(inputUrl: string): string {
+	let decodedUrl: string;
+	try {
+		decodedUrl = decodeURIComponent(inputUrl);
+	} catch {
+		decodedUrl = inputUrl;
+	}
+
+	return normalizeUrl(decodedUrl, {
+		stripHash: true,
+		removeQueryParameters: true,
+	});
+}

web/package.json

@@ -5,7 +5,6 @@
 	"scripts": {
 		"build": "remix vite:build",
 		"install-and-build": "bun install && bun run build",
-		"deploy": "bun run build && wrangler pages deploy",
 		"dev": "remix vite:dev",
 		"start": "remix-serve ./build/server/index.js",
 		"typecheck": "tsc",
@@ -47,6 +46,7 @@
 		"isomorphic-dompurify": "^2.13.0",
 		"lucide-react": "^0.408.0",
 		"next-themes": "^0.3.0",
+		"normalize-url": "^8.0.1",
 		"react": "^19.0.0-beta-26f2496093-20240514",
 		"react-dom": "^19.0.0-beta-26f2496093-20240514",
 		"react-icons": "^5.2.1",

web/scripts/normalize-page-urls.ts

@@ -0,0 +1,72 @@
+import { PrismaClient } from "@prisma/client";
+import { normalizeAndSanitizeUrl } from "../app/utils/normalize-and-sanitize-url.server";
+
+const prisma = new PrismaClient();
+
+async function normalizeUrls() {
+	const batchSize = 100;
+	let processedPageCount = 0;
+	let processedPageVersionCount = 0;
+
+	try {
+		// Normalize Page URLs
+		while (true) {
+			const pages = await prisma.page.findMany({
+				take: batchSize,
+				skip: processedPageCount,
+				select: { id: true, url: true },
+			});
+
+			if (pages.length === 0) break;
+
+			for (const page of pages) {
+				const normalizedUrl = normalizeAndSanitizeUrl(page.url);
+				if (normalizedUrl !== page.url) {
+					await prisma.page.update({
+						where: { id: page.id },
+						data: { url: normalizedUrl },
+					});
+					console.log(`Updated Page URL: ${page.url} -> ${normalizedUrl}`);
+				}
+			}
+
+			processedPageCount += pages.length;
+			console.log(`Processed ${processedPageCount} pages`);
+		}
+
+		// Normalize PageVersion URLs
+		while (true) {
+			const pageVersions = await prisma.pageVersion.findMany({
+				take: batchSize,
+				skip: processedPageVersionCount,
+				select: { id: true, url: true },
+			});
+
+			if (pageVersions.length === 0) break;
+
+			for (const pageVersion of pageVersions) {
+				const normalizedUrl = normalizeAndSanitizeUrl(pageVersion.url);
+				if (normalizedUrl !== pageVersion.url) {
+					await prisma.pageVersion.update({
+						where: { id: pageVersion.id },
+						data: { url: normalizedUrl },
+					});
+					console.log(
+						`Updated PageVersion URL: ${pageVersion.url} -> ${normalizedUrl}`,
+					);
+				}
+			}
+
+			processedPageVersionCount += pageVersions.length;
+			console.log(`Processed ${processedPageVersionCount} page versions`);
+		}
+
+		console.log("URL normalization complete");
+	} catch (error) {
+		console.error("Error during URL normalization:", error);
+	} finally {
+		await prisma.$disconnect();
+	}
+}
+
+normalizeUrls();