f

web/app/components/GoogleForm.tsx

@@ -4,12 +4,12 @@ import { Button } from "~/components/ui/button";
 
 export const GoogleForm = () => {
 	return (
-		<Form method="POST" className="w-full">
+		<Form method="POST" className="w-full ">
 			<Button
 				type="submit"
-				name="_action"
+				name="intent"
 				value="SignInWithGoogle"
-				variant="outline"
+				variant="secondary"
 				className="w-full"
 			>
 				<FaGoogle className="mr-2 h-4 w-4" />

web/app/components/Header.tsx

@@ -1,68 +1,62 @@
-import type { User } from "@prisma/client";
 import { Link } from "@remix-run/react";
 import { Form, useSubmit } from "@remix-run/react";
-import { TranslationLanguageSelect } from "./TranslationLanguageSelect";
-
-type UserWithoutPassword = Omit<User, "password">;
+import { LogIn, LogOut } from "lucide-react"; // Lucide アイコンをインポート
+import { ModeToggle } from "~/components/dark-mode-toggle";
+import type { SafeUser } from "../types";
+import { TargetLanguageSelect } from "./TargetLanguageSelect";
+import { Button } from "./ui/button";
 
 interface HeaderProps {
-	user: UserWithoutPassword | null;
-	language: string;
+	safeUser: SafeUser | null;
+	targetLanguage: string;
 }
 
-export function Header({ user, language }: HeaderProps) {
+export function Header({ safeUser, targetLanguage }: HeaderProps) {
 	const submit = useSubmit();
 
-	const handleLanguageChange = (newLanguage: string) => {
+	const handleTargetLanguageChange = (newTargetLanguage: string) => {
 		const formData = new FormData();
-		formData.append("language", newLanguage);
+		formData.append("targetLanguage", newTargetLanguage);
 		submit(formData, { method: "post" });
 	};
 
 	return (
-		<header className="bg-white shadow-sm">
+		<header className="shadow-sm mb-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="/">
-					<h1 className="text-3xl font-bold text-gray-900">EveEve</h1>
+					<h1 className="text-3xl font-bold ">EveEve</h1>
 				</Link>
-				<div className="flex items-center space-x-4">
-					<Form method="post">
-						<TranslationLanguageSelect
-							value={language}
-							onChange={handleLanguageChange}
-						/>
-					</Form>
-					<nav>
-						{user ? (
-							<div className="flex items-center space-x-4">
-								<span className="text-gray-700">
-									ようこそ、{user.name}さん！
-								</span>
+				<Form method="post" className="flex items-center space-x-4">
+					<TargetLanguageSelect
+						value={targetLanguage}
+						onChange={handleTargetLanguageChange}
+					/>
+					<nav className="flex items-center space-x-4">
+						<ModeToggle />
+						{safeUser ? (
+							<>
+								<span className="text-gray-700">Hello, {safeUser.name}!!</span>
 								<Link
 									to="/auth/logout"
-									className="text-blue-600 hover:text-blue-800 font-medium"
+									className="text-gray-600 hover:text-gray-800"
+									title="Logout"
 								>
-									ログアウト
+									<LogOut className="w-6 h-6" />
 								</Link>
-							</div>
+							</>
 						) : (
-							<div className="space-x-4">
-								<Link
-									to="/auth/login"
-									className="text-blue-600 hover:text-blue-800 font-medium"
-								>
-									ログイン
-								</Link>
-								<Link
-									to="/auth/signup"
-									className="text-blue-600 hover:text-blue-800 font-medium"
-								>
-									サインアップ
-								</Link>
-							</div>
+							<Button
+								type="submit"
+								name="intent"
+								value="SignInWithGoogle"
+								variant="outline"
+								size="icon"
+							>
+								<LogIn className="w-5 h-5" />
+							</Button>
 						)}
 					</nav>
-				</div>
+				</Form>
 			</div>
 		</header>
 	);

web/app/components/LoadingSpinner.tsx

@@ -0,0 +1,7 @@
+export function LoadingSpinner() {
+	return (
+		<>
+			<div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-white"></div>
+		</>
+	);
+}

web/app/components/TranslationLanguageSelect.tsx → web/app/components/TargetLanguageSelect.tsx

@@ -6,12 +6,12 @@ import {
 	SelectValue,
 } from "~/components/ui/select";
 
-type Language = {
+type TargetLanguage = {
 	code: string;
 	name: string;
 };
 
-const languages: Language[] = [
+const targetLanguages: TargetLanguage[] = [
 	{ code: "ja", name: "日本語" },
 	{ code: "en", name: "English" },
 	{ code: "zh", name: "中文" },
@@ -20,22 +20,22 @@ const languages: Language[] = [
 	{ code: "fr", name: "Français" },
 ];
 
-type TranslationLanguageSelectProps = {
+type TargetLanguageSelectProps = {
 	value: string;
 	onChange: (value: string) => void;
 };
 
-export function TranslationLanguageSelect({
+export function TargetLanguageSelect({
 	value,
 	onChange,
-}: TranslationLanguageSelectProps) {
+}: TargetLanguageSelectProps) {
 	return (
 		<Select value={value} onValueChange={onChange}>
 			<SelectTrigger className="w-[180px]">
 				<SelectValue placeholder="翻訳言語を選択" />
 			</SelectTrigger>
 			<SelectContent>
-				{languages.map((lang) => (
+				{targetLanguages.map((lang) => (
 					<SelectItem key={lang.code} value={lang.code}>
 						{lang.name}
 					</SelectItem>

web/app/components/dark-mode-toggle.tsx

@@ -0,0 +1,34 @@
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+
+import { Button } from "~/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+
+export function ModeToggle() {
+	const { setTheme } = useTheme();
+
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button variant="outline" size="icon">
+					<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+					<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+					<span className="sr-only">Toggle theme</span>
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent align="end">
+				<DropdownMenuItem onClick={() => setTheme("light")}>
+					Light
+				</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => setTheme("dark")}>
+					Dark
+				</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}

web/app/components/theme-provider.tsx

@@ -0,0 +1,6 @@
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import type { ThemeProviderProps } from "next-themes/dist/types";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+	return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

web/app/components/ui/alert.tsx

@@ -1,7 +1,7 @@
 import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "~/utils";
+import { cn } from "~/utils/cn";
 
 const alertVariants = cva(
 	"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",

web/app/components/ui/button.tsx

@@ -2,7 +2,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "~/utils";
+import { cn } from "~/utils/cn";
 
 const buttonVariants = cva(
 	"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",

web/app/components/ui/card.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "~/utils";
+import { cn } from "~/utils/cn";
 
 const Card = React.forwardRef<
 	HTMLDivElement,