全体のリファクタ

web/app/routes/resources+/LoginDialog.tsx → web/app/components/LoginDialog.tsx

@@ -7,7 +7,7 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "~/components/ui/dialog";
-import { GoogleForm } from "./google-form";
+import { GoogleForm } from "../routes/resources+/google-form";
 
 interface LoginDialogProps {
 	isOpen: boolean;

web/app/routes/reader.$/components/AddTranslationForm.tsx

@@ -4,9 +4,9 @@ import { getZodConstraint } from "@conform-to/zod";
 import { useFetcher } from "@remix-run/react";
 import { Save } from "lucide-react";
 import { useState } from "react";
+import { LoginDialog } from "~/components/LoginDialog";
 import { Button } from "~/components/ui/button";
 import { Textarea } from "~/components/ui/textarea";
-import { LoginDialog } from "~/routes/resources+/LoginDialog";
 import type { action } from "../route";
 import { addTranslationSchema } from "../types";
 

web/app/routes/reader.$/components/VoteButtons.tsx

@@ -3,7 +3,7 @@ import { parseWithZod } from "@conform-to/zod";
 import { useFetcher } from "@remix-run/react";
 import { memo, useMemo } from "react";
 import { useState } from "react";
-import { LoginDialog } from "~/routes/resources+/LoginDialog";
+import { LoginDialog } from "~/components/LoginDialog";
 import { cn } from "~/utils/cn";
 import type { TranslationWithVote } from "../types";
 import { voteSchema } from "../types";

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

@@ -78,15 +78,14 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 };
 
 export default function ReaderView() {
-	const { encodedUrl } = useParams();
-	const { targetLanguage, pageData, safeUser } =
-		useTypedLoaderData<typeof loader>();
+	const { "*": urlParam } = useParams();
+	const { pageData, safeUser } = useTypedLoaderData<typeof loader>();
 
 	if (!pageData) {
 		return <div>Loading...</div>;
 	}
 
-	const originalUrl = encodedUrl ? decodeURIComponent(encodedUrl) : "";
+	const originalUrl = urlParam ? decodeURIComponent(urlParam) : "";
 
 	return (
 		<div>

web/app/routes/resources+/functions/mutations.server.ts

@@ -0,0 +1,11 @@
+import { prisma } from "~/utils/prisma";
+
+export const updateGeminiApiKey = async (
+	userId: number,
+	geminiApiKey: string,
+) => {
+	await prisma.user.update({
+		where: { id: userId },
+		data: { geminiApiKey },
+	});
+};

web/app/routes/translate/components/GeminiApiKeyForm.tsx → web/app/routes/resources+/gemini-api-key-form.tsx

@@ -1,22 +1,53 @@
 import { useForm } from "@conform-to/react";
 import { getFormProps, getInputProps } from "@conform-to/react";
 import { getZodConstraint, parseWithZod } from "@conform-to/zod";
-import { Form, useActionData } from "@remix-run/react";
+import type { ActionFunctionArgs } from "@remix-run/node";
 import { Link } from "@remix-run/react";
 import { useNavigation } from "@remix-run/react";
+import { useFetcher } from "@remix-run/react";
 import { Save } from "lucide-react";
 import { ExternalLink, Key } from "lucide-react";
 import { TriangleAlert } from "lucide-react";
+import { z } from "zod";
 import { LoadingSpinner } from "~/components/LoadingSpinner";
 import { Alert, AlertDescription } from "~/components/ui/alert";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import { Input } from "~/components/ui/input";
-import type { action } from "../route";
-import { geminiApiKeySchema } from "../types";
+import { validateGeminiApiKey } from "~/feature/translate/utils/gemini";
+import { authenticator } from "~/utils/auth.server";
+import { updateGeminiApiKey } from "./functions/mutations.server";
+
+export const geminiApiKeySchema = z.object({
+	geminiApiKey: z.string().min(1, "API key is required"),
+});
+
+export async function action({ request }: ActionFunctionArgs) {
+	const safeUser = await authenticator.isAuthenticated(request, {
+		failureRedirect: "/",
+	});
+	const submission = parseWithZod(await request.formData(), {
+		schema: geminiApiKeySchema,
+	});
+	if (submission.status !== "success") {
+		return { lastResult: submission.reply() };
+	}
+
+	const isValid = await validateGeminiApiKey(submission.value.geminiApiKey);
+	if (!isValid) {
+		return {
+			lastResult: submission.reply({
+				formErrors: ["Gemini API key validation failed"],
+			}),
+		};
+	}
+	await updateGeminiApiKey(safeUser.id, submission.value.geminiApiKey);
+	return { lastResult: submission.reply({ resetForm: true }) };
+}
 
 export function GeminiApiKeyForm() {
-	const actionData = useActionData<typeof action>();
+	const fetcher = useFetcher<typeof action>();
+	const actionData = fetcher.data;
 	const navigation = useNavigation();
 	const [form, { geminiApiKey }] = useForm({
 		id: "gemini-api-key-form",
@@ -71,7 +102,11 @@ export function GeminiApiKeyForm() {
 						</AlertDescription>
 					</div>
 				</Alert>
-				<Form method="post" {...getFormProps(form)}>
+				<fetcher.Form
+					method="post"
+					action="/resources/gemini-api-key-form"
+					{...getFormProps(form)}
+				>
 					<div className="flex items-center">
 						<div className="w-full">
 							<Input
@@ -85,8 +120,6 @@ export function GeminiApiKeyForm() {
 						</div>
 						<Button
 							type="submit"
-							name="intent"
-							value="saveGeminiApiKey"
 							size="icon"
 							disabled={navigation.state === "submitting"}
 						>
@@ -107,7 +140,7 @@ export function GeminiApiKeyForm() {
 					{form.errors && (
 						<p className="text-red-500 text-center mt-2">{form.errors}</p>
 					)}
-				</Form>
+				</fetcher.Form>
 			</CardContent>
 		</Card>
 	);

web/app/routes/resources+/google-form.tsx

@@ -4,13 +4,14 @@ import { FcGoogle } from "react-icons/fc";
 import { Button } from "~/components/ui/button";
 import { authenticator } from "~/utils/auth.server";
 
-export const action = async ({ request }: ActionFunctionArgs) => {
+export async function action({ request }: ActionFunctionArgs) {
 	return authenticator.authenticate("google", request, {
 		successRedirect: "/api/auth/callback/google",
 		failureRedirect: "/login",
 	});
-};
-export const GoogleForm = ({ redirectTo }: { redirectTo: string }) => {
+}
+
+export function GoogleForm({ redirectTo }: { redirectTo: string }) {
 	const fetcher = useFetcher();
 	return (
 		<fetcher.Form
@@ -31,4 +32,4 @@ export const GoogleForm = ({ redirectTo }: { redirectTo: string }) => {
 			</Button>
 		</fetcher.Form>
 	);
-};
+}

web/app/routes/translate/components/URLTranslationForm.tsx

@@ -8,9 +8,9 @@ import { LoadingSpinner } from "~/components/LoadingSpinner";
 import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
+import { AIModelSelector } from "../../../feature/translate/components/AIModelSelector";
 import type { action } from "../route";
 import { urlTranslationSchema } from "../types";
-import { AIModelSelector } from "./AIModelSelector";
 
 export function URLTranslationForm() {
 	const navigation = useNavigation();

web/app/routes/translate/route.tsx

@@ -5,14 +5,12 @@ import { useEffect } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 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 { GeminiApiKeyForm } from "../resources+/gemini-api-key-form";
 import { URLTranslationForm } from "./components/URLTranslationForm";
 import { UserAITranslationStatus } from "./components/UserAITranslationStatus";
-import { updateGeminiApiKey } from "./functions/mutations.server";
 import {
 	getDbUser,
 	listUserAiTranslationInfo,
@@ -51,19 +49,6 @@ export async function action({ request }: ActionFunctionArgs) {
 	const intent = submission.value.intent;
 
 	switch (submission.value.intent) {
-		case "saveGeminiApiKey": {
-			const isValid = await validateGeminiApiKey(submission.value.geminiApiKey);
-			if (!isValid) {
-				return {
-					intent,
-					lastResult: submission.reply({
-						formErrors: ["Gemini API key validation failed"],
-					}),
-				};
-			}
-			await updateGeminiApiKey(safeUser.id, submission.value.geminiApiKey);
-			return { intent, lastResult: submission.reply({ resetForm: true }) };
-		}
 		case "translateUrl": {
 			const dbUser = await getDbUser(safeUser.id);
 			if (!dbUser?.geminiApiKey) {