ヘッダアイコン削除

web/app/components/ui/button.tsx

@@ -54,7 +54,11 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 				disabled={isLoading}
 				{...props}
 			>
-				{isLoading ? <Loader2 className="h-6 w-6" /> : props.children}
+				{isLoading ? (
+					<Loader2 className="h-6 w-6 animate-spin" />
+				) : (
+					props.children
+				)}
 			</Comp>
 		);
 	},

web/app/routes/$userName+/page+/$slug+/components/Translation.tsx

@@ -22,7 +22,7 @@ function ToggleButton({
 	return (
 		<button
 			type="button"
-			className={`absolute top-1 right-2 p-1 ${isExpanded ? " z-20" : "z-0"}`}
+			className={`absolute -top-2 right-0 bg-gray-200 dark:bg-gray-800 rounded-xl p-1 ${isExpanded ? " z-20" : "z-0"}`}
 			onClick={onClick}
 			aria-label={label}
 			title={label}
@@ -65,7 +65,7 @@ export function Translation({
 
 	return (
 		<div className="group relative rounded-xl bg-gray-100 dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 transition-all duration-300 ease-in-out">
-			<div className="notranslate mt-2 pt-6 pb-3 px-4">
+			<div className="notranslate mt-2 py-3 px-4">
 				{sanitizedAndParsedText}
 				<ToggleButton
 					isExpanded={isExpanded}

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

@@ -1,8 +1,7 @@
 import { getFormProps, getTextareaProps, useForm } from "@conform-to/react";
 import { getZodConstraint, parseWithZod } from "@conform-to/zod";
-import { redirect } from "@remix-run/node";
 import type { ActionFunction, LoaderFunction } from "@remix-run/node";
-import { Form, useActionData, useLoaderData } from "@remix-run/react";
+import { useActionData, useLoaderData } from "@remix-run/react";
 import { useFetcher } from "@remix-run/react";
 import { z } from "zod";
 import { authenticator } from "~/utils/auth.server";
@@ -93,7 +92,7 @@ export const action: ActionFunction = async ({ request, params }) => {
 		title,
 		contentWithSourceTextId,
 	);
-	return redirect(`/${userName}/page/${slug}`);
+	return null;
 };
 
 export default function EditPage() {
@@ -114,8 +113,8 @@ export default function EditPage() {
 
 	return (
 		<div>
-			<Form method="post" {...getFormProps(form)}>
-				<EditHeader currentUser={currentUser} pageSlug={page?.slug} />
+			<fetcher.Form method="post" {...getFormProps(form)}>
+				<EditHeader currentUser={currentUser} pageSlug={page?.slug} fetcher={fetcher} />
 				<div className="w-full max-w-3xl prose dark:prose-invert prose-sm sm:prose lg:prose-lg mx-auto">
 					<div className="mt-10">
 						<h1 className="text-4xl font-bold">
@@ -141,7 +140,7 @@ export default function EditPage() {
 						))}
 					</div>
 				</div>
-			</Form>
+			</fetcher.Form>
 		</div>
 	);
 }

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

@@ -1,17 +1,31 @@
 import { Link } from "@remix-run/react";
-import { useNavigation } from "@remix-run/react";
-import { ArrowDownToLine, ArrowLeft, Loader2 } from "lucide-react";
+import { ArrowDownToLine, ArrowLeft, Loader2, Check } from "lucide-react";
 import { ModeToggle } from "~/components/dark-mode-toggle";
 import { Button } from "~/components/ui/button";
 import type { SanitizedUser } from "~/types";
+import type { Fetcher } from "@remix-run/react";
+import { useEffect, useState } from "react";
+
 interface EditHeaderProps {
 	currentUser: SanitizedUser | null;
 	pageSlug: string | null;
+	fetcher: Fetcher
 }
 
-export function EditHeader({ currentUser, pageSlug }: EditHeaderProps) {
-	const navigation = useNavigation();
-	const isLoading = navigation.state === "loading";
+export function EditHeader({ currentUser, pageSlug, fetcher }: EditHeaderProps) {
+	const isSubmitting = fetcher.state === "submitting";
+	const isLoading = fetcher.state === "loading";
+	const [showSuccess, setShowSuccess] = useState(false);
+
+
+	useEffect(() => {
+		if (fetcher.state === "loading") {
+			setShowSuccess(true);
+		} else if (fetcher.state === "idle" && showSuccess) {
+			const timer = setTimeout(() => setShowSuccess(false), 500);
+			return () => clearTimeout(timer);
+		}
+	}, [fetcher.state, showSuccess]);
 
 	return (
 		<header className="mb-10 z-10 ">
@@ -32,9 +46,21 @@ export function EditHeader({ currentUser, pageSlug }: EditHeaderProps) {
 						)}
 					</Link>
 				</Button>
-				<Button type="submit" variant="ghost">
-					<ArrowDownToLine className="w-6 h-6 mr-2" />
-					Save
+				<Button type="submit" variant="ghost" disabled={isSubmitting}>
+					{isSubmitting ? (
+						<>
+							<Loader2 className="w-6 h-6 animate-spin" />
+						</>
+					) : showSuccess ? (
+						<>
+							<Check className="w-6 h-6 " />
+						</>
+					) : (
+						<>
+							<ArrowDownToLine className="w-6 h-6 mr-2" />
+							Save
+						</>
+					)}
 				</Button>
 				<div className="flex items-center">
 					<ModeToggle />

web/app/routes/_index/index.tsx

@@ -1,12 +1,7 @@
-import type {
-	ActionFunctionArgs,
-	LoaderFunctionArgs,
-	MetaFunction,
-} from "@remix-run/node";
+import type { ActionFunctionArgs, MetaFunction } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
 import { Form } from "@remix-run/react";
 import { FaDiscord, FaGithub } from "react-icons/fa";
-import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent } from "~/components/ui/card";
 import { authenticator } from "~/utils/auth.server";
@@ -21,10 +16,6 @@ export const meta: MetaFunction = () => {
 		},
 	];
 };
-export async function loader({ request }: LoaderFunctionArgs) {
-	const currentUser = await authenticator.isAuthenticated(request);
-	return typedjson({ currentUser });
-}
 
 export async function action({ request }: ActionFunctionArgs) {
 	const user = await authenticator.authenticate("google", request);
@@ -40,8 +31,6 @@ export async function action({ request }: ActionFunctionArgs) {
 }
 
 export default function Index() {
-	const { currentUser } = useTypedLoaderData<typeof loader>();
-
 	return (
 		<div className="min-h-screen bg-gradient-to-b ">
 			<main className="container mx-auto px-4 py-20">

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

@@ -46,11 +46,7 @@ export function Footer({ currentUser }: FooterProps) {
 					<div className="flex justify-between items-center">
 						<div className="flex items-center space-x-4">
 							<Link to="/">
-								<img
-									src="/title-logo-dark.png"
-									alt="::COMPANY_NAME::"
-									className="w-32"
-								/>
+								<h1 className="text-4xl font-bold">EveEve</h1>
 							</Link>
 							{currentUser && (
 								<>

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

@@ -5,6 +5,7 @@ import { Link } from "@remix-run/react";
 import { Form } from "@remix-run/react";
 import { LogIn, Search } from "lucide-react";
 import { NewPageButton } from "~/components/NewPageButton";
+import { ModeToggle } from "~/components/dark-mode-toggle";
 import { Button } from "~/components/ui/button";
 import type { SanitizedUser } from "~/types";
 import { authenticator } from "~/utils/auth.server";
@@ -42,7 +43,7 @@ export function Header({ currentUser }: HeaderProps) {
 		<header className="shadow-sm mb-5 z-10 ">
 			<div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8 flex justify-between items-center">
 				<Link to="/">
-					<img src="/title-logo-dark.png" alt="" className="w-40" />
+					<h1 className="text-4xl font-bold">EveEve</h1>
 				</Link>
 				<div className="flex items-center">
 					<Button variant="ghost">
@@ -53,6 +54,7 @@ export function Header({ currentUser }: HeaderProps) {
 							<Search className="w-6 h-6" />
 						</Link>
 					</Button>
+					<ModeToggle />
 					{currentUser ? (
 						<NewPageButton userName={currentUser.userName} />
 					) : (