changegemini key

web/app/routes/$userName+/edit/route.tsx

@@ -6,17 +6,20 @@ import {
 } from "@conform-to/react";
 import { getZodConstraint, parseWithZod } from "@conform-to/zod";
 import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
-import { redirect } from "@remix-run/node";
 import { Form } from "@remix-run/react";
+import { Link } from "@remix-run/react";
+import { useNavigation } from "@remix-run/react";
+import { ArrowLeft } from "lucide-react";
+import { useState } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
 import { Label } from "~/components/ui/label";
+import { GeminiApiKeyDialog } from "~/routes/resources+/gemini-api-key-dialog";
 import { authenticator, sanitizeUser } from "~/utils/auth.server";
 import { commitSession, getSession } from "~/utils/session.server";
 import { updateUser } from "./functions/mutations.server";
-
 const schema = z.object({
 	displayName: z
 		.string()
@@ -54,17 +57,15 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 	});
 	const session = await getSession(request.headers.get("Cookie"));
 	session.set("user", sanitizeUser(updatedUser));
-
-	return redirect(`/${currentUser.userName}`, {
-		headers: {
-			"Set-Cookie": await commitSession(session),
-		},
-	});
+	await commitSession(session);
+	return null;
 };
 
 export default function EditProfile() {
 	const { currentUser } = useTypedLoaderData<typeof loader>();
-
+	const [isGeminiApiKeyDialogOpen, setIsGeminiApiKeyDialogOpen] =
+		useState(false);
+	const navigation = useNavigation();
 	const [form, { displayName, profile }] = useForm({
 		id: "edit-profile-form",
 		constraint: getZodConstraint(schema),
@@ -80,27 +81,51 @@ export default function EditProfile() {
 	});
 	return (
 		<div className="container mx-auto mt-10">
-			<h1 className="text-3xl font-bold mb-6">Edit Profile</h1>
-			<Form method="post" {...getFormProps(form)} className="space-y-4">
-				<div>
-					<Label htmlFor={displayName.id}>Display Name</Label>
-					<Input {...getInputProps(displayName, { type: "text" })} />
-					<div id={displayName.errorId} className="text-red-500 text-sm mt-1">
-						{displayName.errors}
+			<Link to={`/${currentUser.userName}`}>
+				<ArrowLeft className="w-6 h-6 mb-10" />
+			</Link>
+			<div className="rounded-xl border p-4 shadow-md">
+				<h1 className="text-3xl font-bold mb-6">Edit Profile</h1>
+				<Form method="post" {...getFormProps(form)} className="space-y-4">
+					<div>
+						<Label htmlFor={displayName.id}>Display Name</Label>
+						<Input {...getInputProps(displayName, { type: "text" })} />
+						<div id={displayName.errorId} className="text-red-500 text-sm mt-1">
+							{displayName.errors}
+						</div>
 					</div>
-				</div>
-				<div>
-					<Label htmlFor={profile.id}>Profile</Label>
-					<textarea
-						{...getTextareaProps(profile)}
-						className="w-full h-32 px-3 py-2  border rounded-lg focus:outline-none"
-					/>
-					<div id={profile.errorId} className="text-red-500 text-sm mt-1">
-						{profile.errors}
+					<div>
+						<Label htmlFor={profile.id}>Profile</Label>
+						<textarea
+							{...getTextareaProps(profile)}
+							className="w-full h-32 px-3 py-2  border rounded-lg focus:outline-none"
+						/>
+						<div id={profile.errorId} className="text-red-500 text-sm mt-1">
+							{profile.errors}
+						</div>
 					</div>
-				</div>
-				<Button type="submit">Save Changes</Button>
-			</Form>
+					<Button
+						type="submit"
+						className="w-full"
+						disabled={navigation.state === "submitting"}
+					>
+						Save
+					</Button>
+				</Form>
+			</div>
+			<div className="mt-16 rounded-xl border p-4 shadow-md">
+				<h1 className="text-3xl font-bold mb-6">Change Gemini API Key</h1>
+				<Button
+					className="w-full"
+					onClick={() => setIsGeminiApiKeyDialogOpen(true)}
+				>
+					Change Gemini API Key
+				</Button>
+				<GeminiApiKeyDialog
+					isOpen={isGeminiApiKeyDialogOpen}
+					onOpenChange={setIsGeminiApiKeyDialogOpen}
+				/>
+			</div>
 		</div>
 	);
 }

web/app/routes/$userName+/page+/$slug+/edit/_edit.tsx

@@ -86,6 +86,7 @@ export const action: ActionFunction = async ({ request, params }) => {
 		numberedContent,
 		sourceTextsIdWithNumber,
 	);
+	console.log("contentWithSourceTextId", contentWithSourceTextId);
 	await createOrUpdatePage(
 		currentUser.id,
 		slug,

web/app/routes/resources+/footer.tsx

@@ -3,7 +3,7 @@ import type { ActionFunctionArgs } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
 import { Link } from "@remix-run/react";
 import { Form } from "@remix-run/react";
-import { LogIn, LogOut } from "lucide-react";
+import { Home, LogIn, LogOut } from "lucide-react";
 import { Button } from "~/components/ui/button";
 import type { SanitizedUser } from "~/types";
 import { authenticator } from "~/utils/auth.server";
@@ -51,7 +51,10 @@ export function Footer({ currentUser }: FooterProps) {
 							{currentUser && (
 								<>
 									<Link to={`/${currentUser.userName}`}>
-										<Button variant="outline">{currentUser.userName}</Button>
+										<Button variant="outline">
+											<Home className="w-4 h-4 mr-2" />
+											{currentUser.userName}
+										</Button>
 									</Link>
 									<Form method="post" action="/resources/footer">
 										<Button

web/app/routes/translator/route.tsx

@@ -4,7 +4,9 @@ import { useRevalidator } from "@remix-run/react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { getTranslateUserQueue } from "~/features/translate/translate-user-queue";
 import { createOrUpdateSourceTexts } from "~/routes/$userName+/page+/$slug+/edit/functions/mutations.server";
+import { createOrUpdatePage } from "~/routes/$userName+/page+/$slug+/edit/functions/mutations.server";
 import { addNumbersToContent } from "~/routes/$userName+/page+/$slug+/edit/utils/addNumbersToContent";
+import { addSourceTextIdToContent } from "~/routes/$userName+/page+/$slug+/edit/utils/addSourceTextIdToContent";
 import { extractArticle } from "~/routes/$userName+/page+/$slug+/edit/utils/extractArticle";
 import { extractNumberedElements } from "~/routes/$userName+/page+/$slug+/edit/utils/extractNumberedElements";
 import { getNonSanitizedUserbyUserName } from "~/routes/functions/queries.server";
@@ -111,25 +113,38 @@ export async function action({ request }: ActionFunctionArgs) {
 
 				const { content, title } = extractArticle(html);
 				const numberedContent = addNumbersToContent(content);
-				const page = await getOrCreatePage(
+				const numberedElements = await extractNumberedElements(
+					numberedContent,
+					title,
+					null,
+				);
+				const page = await createOrUpdatePage(
 					nonSanitizedUser.id,
 					fileSlug,
 					title,
 					numberedContent,
 				);
+				const sourceTextsIdWithNumber = await createOrUpdateSourceTexts(
+					numberedElements,
+					page.id,
+				);
+				const contentWithSourceTextId = addSourceTextIdToContent(
+					numberedContent,
+					sourceTextsIdWithNumber,
+				);
+				await createOrUpdatePage(
+					currentUser.id,
+					fileSlug,
+					title,
+					contentWithSourceTextId,
+				);
 				const userAITranslationInfo = await createUserAITranslationInfo(
 					nonSanitizedUser.id,
 					page.id,
 					submission.value.aiModel,
 					targetLanguage,
 				);
 
-				const numberedElements = await extractNumberedElements(
-					numberedContent,
-					title,
-					null,
-				);
-				await createOrUpdateSourceTexts(numberedElements, page.id);
 				await queue.add(`translate-${nonSanitizedUser.id}`, {
 					userAITranslationInfoId: userAITranslationInfo.id,
 					geminiApiKey: geminiApiKey,