Feature/translationProgress

docker-compose.yml

@@ -17,7 +17,7 @@ services:
     restart: always
     ports:
       - '6379:6379'
-    command: redis-server --save 20 1 --loglevel warning --requirepass eYVX7EwVmmxKPCDmwMtyKVge8oLd2t81
+    command: redis-server --save 20 1 --loglevel warning
     volumes:
       - redis:/data
 

web/app/components/Header.tsx

@@ -1,6 +1,6 @@
 import { Link } from "@remix-run/react";
 import { Form, useSubmit } from "@remix-run/react";
-import { LogIn, LogOut } from "lucide-react"; // Lucide アイコンをインポート
+import { LogIn, LogOut } from "lucide-react";
 import { ModeToggle } from "~/components/dark-mode-toggle";
 import type { SafeUser } from "../types";
 import { TargetLanguageSelect } from "./TargetLanguageSelect";
@@ -35,11 +35,7 @@ export function Header({ safeUser, targetLanguage }: HeaderProps) {
 						<ModeToggle />
 						{safeUser ? (
 							<>
-								<Link
-									to="/auth/logout"
-									className="text-gray-600 hover:text-gray-800"
-									title="Logout"
-								>
+								<Link to="/auth/logout" title="Logout">
 									<LogOut className="w-6 h-6" />
 								</Link>
 							</>

web/app/components/LoadingSpinner.tsx

@@ -1,7 +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>
+			<div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-white" />
 		</>
 	);
 }

web/app/components/ui/badge.tsx

@@ -1,36 +1,36 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import { type VariantProps, cva } from "class-variance-authority";
+import type * as React from "react";
 
-import { cn } from "~/utils/cn"
+import { cn } from "~/utils/cn";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
+	"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+	{
+		variants: {
+			variant: {
+				default:
+					"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+				secondary:
+					"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				destructive:
+					"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+				outline: "text-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
 
 export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+	extends React.HTMLAttributes<HTMLDivElement>,
+		VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+	return (
+		<div className={cn(badgeVariants({ variant }), className)} {...props} />
+	);
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };

web/app/components/ui/progress.tsx

@@ -1,26 +1,26 @@
-import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import * as React from "react";
 
-import { cn } from "~/utils/cn"
+import { cn } from "~/utils/cn";
 
 const Progress = React.forwardRef<
-  React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+	React.ElementRef<typeof ProgressPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
 >(({ className, value, ...props }, ref) => (
-  <ProgressPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
-      className
-    )}
-    {...props}
-  >
-    <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-    />
-  </ProgressPrimitive.Root>
-))
-Progress.displayName = ProgressPrimitive.Root.displayName
+	<ProgressPrimitive.Root
+		ref={ref}
+		className={cn(
+			"relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+			className,
+		)}
+		{...props}
+	>
+		<ProgressPrimitive.Indicator
+			className="h-full w-full flex-1 bg-primary transition-all"
+			style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+		/>
+	</ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
 
-export { Progress }
+export { Progress };

web/app/components/ui/scroll-area.tsx

@@ -1,46 +1,46 @@
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react";
 
-import { cn } from "~/utils/cn"
+import { cn } from "~/utils/cn";
 
 const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+	React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn("relative overflow-hidden", className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+	<ScrollAreaPrimitive.Root
+		ref={ref}
+		className={cn("relative overflow-hidden", className)}
+		{...props}
+	>
+		<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+			{children}
+		</ScrollAreaPrimitive.Viewport>
+		<ScrollBar />
+		<ScrollAreaPrimitive.Corner />
+	</ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
 const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+	React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
 >(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+	<ScrollAreaPrimitive.ScrollAreaScrollbar
+		ref={ref}
+		orientation={orientation}
+		className={cn(
+			"flex touch-none select-none transition-colors",
+			orientation === "vertical" &&
+				"h-full w-2.5 border-l border-l-transparent p-[1px]",
+			orientation === "horizontal" &&
+				"h-2.5 flex-col border-t border-t-transparent p-[1px]",
+			className,
+		)}
+		{...props}
+	>
+		<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+	</ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };

web/app/components/ui/tooltip.tsx

@@ -0,0 +1,28 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+
+import { cn } from "~/utils/cn";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+	React.ElementRef<typeof TooltipPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+	<TooltipPrimitive.Content
+		ref={ref}
+		sideOffset={sideOffset}
+		className={cn(
+			"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			className,
+		)}
+		{...props}
+	/>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

web/app/utils/pageService.ts → web/app/libs/pageService.ts

@@ -1,4 +1,4 @@
-import { prisma } from "./prisma";
+import { prisma } from "../utils/prisma";
 
 export async function getOrCreatePageId(url: string): Promise<number> {
 	const page = await prisma.page.upsert({

web/app/utils/pageVersionService.ts → web/app/libs/pageVersion.ts

@@ -1,5 +1,5 @@
 import { createHash } from "node:crypto";
-import { prisma } from "./prisma";
+import { prisma } from "../utils/prisma";
 
 export async function getOrCreatePageVersionId(
 	url: string,

web/app/libs/pageVersionTranslationInfo.ts

@@ -0,0 +1,22 @@
+import { prisma } from "~/utils/prisma";
+
+export async function getOrCreatePageVersionTranslationInfo(
+	pageVersionId: number,
+	targetLanguage: string,
+	translationTitle: string,
+) {
+	return await prisma.pageVersionTranslationInfo.upsert({
+		where: {
+			pageVersionId_targetLanguage: {
+				pageVersionId,
+				targetLanguage,
+			},
+		},
+		update: {}, // 既存のレコードがある場合は更新しない
+		create: {
+			pageVersionId,
+			targetLanguage,
+			translationTitle,
+		},
+	});
+}

web/app/utils/sourceTextService.ts → web/app/libs/sourceTextService.ts

@@ -1,5 +1,5 @@
 import { createHash } from "node:crypto";
-import { prisma } from "./prisma";
+import { prisma } from "../utils/prisma";
 
 export async function getOrCreateSourceTextId(
 	text: string,

web/app/libs/userAITranslationInfo.tsx

@@ -0,0 +1,57 @@
+import { prisma } from "~/utils/prisma";
+
+export async function getOrCreateUserAITranslationInfo(
+	userId: number,
+	pageVersionId: number,
+	targetLanguage: string,
+) {
+	try {
+		const userAITranslationInfo = await prisma.userAITranslationInfo.upsert({
+			where: {
+				userId_pageVersionId_targetLanguage: {
+					userId,
+					pageVersionId,
+					targetLanguage,
+				},
+			},
+			update: {
+				aiTranslationStatus: "pending",
+				aiTranslationProgress: 0,
+			},
+			create: {
+				userId,
+				pageVersionId,
+				targetLanguage,
+				aiTranslationStatus: "pending",
+				aiTranslationProgress: 0,
+			},
+		});
+		return userAITranslationInfo;
+	} catch (error) {
+		console.error("Error in getOrCreateUserAITranslationInfo:", error);
+		throw error;
+	}
+}
+
+export async function updateUserAITranslationInfo(
+	userId: number,
+	pageVersionId: number,
+	targetLanguage: string,
+	status: string,
+	progress: number,
+) {
+	return await prisma.userAITranslationInfo.update({
+		where: {
+			userId_pageVersionId_targetLanguage: {
+				userId,
+				pageVersionId,
+				targetLanguage,
+			},
+		},
+		data: {
+			aiTranslationStatus: status,
+			aiTranslationProgress: progress,
+			lastTranslatedAt: new Date(), // 明示的に更新
+		},
+	});
+}

web/app/utils/userReadHistory.ts → web/app/libs/userReadHistory.ts

@@ -1,4 +1,4 @@
-import { prisma } from "./prisma";
+import { prisma } from "../utils/prisma";
 
 export async function updateUserReadHistory(
 	userId: number,

web/app/utils/userService.ts → web/app/libs/userService.ts

@@ -1,10 +1,10 @@
-import { prisma } from "./prisma";
+import { prisma } from "../utils/prisma";
 
 export async function getOrCreateAIUser(name: string): Promise<number> {
 	const user = await prisma.user.upsert({
 		where: { email: `${name}@ai.com` },
 		update: {},
-		create: { name, email: `${name}@ai.com`, isAI: true },
+		create: { name, email: `${name}@ai.com`, isAI: true, image: "" },
 	});
 
 	return user.id;