大きく作り変えた (#167)

web/app/components/ui/command.tsx

@@ -0,0 +1,153 @@
+import type { DialogProps } from "@radix-ui/react-dialog";
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { Command as CommandPrimitive } from "cmdk";
+import * as React from "react";
+
+import { Dialog, DialogContent } from "~/components/ui/dialog";
+import { cn } from "~/utils/cn";
+
+const Command = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive
+		ref={ref}
+		className={cn(
+			"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+			className,
+		)}
+		{...props}
+	/>
+));
+Command.displayName = CommandPrimitive.displayName;
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+	return (
+		<Dialog {...props}>
+			<DialogContent className="overflow-hidden p-0">
+				<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+					{children}
+				</Command>
+			</DialogContent>
+		</Dialog>
+	);
+};
+
+const CommandInput = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Input>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+	<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+		<MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+		<CommandPrimitive.Input
+			ref={ref}
+			className={cn(
+				"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		/>
+	</div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.List
+		ref={ref}
+		className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+		{...props}
+	/>
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Empty>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+	<CommandPrimitive.Empty
+		ref={ref}
+		className="py-6 text-center text-sm"
+		{...props}
+	/>
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Group>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Group
+		ref={ref}
+		className={cn(
+			"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+			className,
+		)}
+		{...props}
+	/>
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Separator
+		ref={ref}
+		className={cn("-mx-1 h-px bg-border", className)}
+		{...props}
+	/>
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+			className,
+		)}
+		{...props}
+	/>
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+	return (
+		<span
+			className={cn(
+				"ml-auto text-xs tracking-widest text-muted-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+	Command,
+	CommandDialog,
+	CommandInput,
+	CommandList,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+	CommandShortcut,
+	CommandSeparator,
+};

web/app/components/ui/popover.tsx

@@ -0,0 +1,31 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+
+import { cn } from "~/utils/cn";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = React.forwardRef<
+	React.ElementRef<typeof PopoverPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+	<PopoverPrimitive.Portal>
+		<PopoverPrimitive.Content
+			ref={ref}
+			align={align}
+			sideOffset={sideOffset}
+			className={cn(
+				"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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}
+		/>
+	</PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

web/app/features/translate/functions/mutations.server.ts

@@ -38,24 +38,18 @@ export async function getOrCreatePageTranslationInfo(
 }
 
 export async function updateUserAITranslationInfo(
-	userId: number,
-	slug: string,
-	targetLanguage: string,
+	userAITranslationInfoId: number,
 	status: string,
 	progress: number,
 ) {
 	return await prisma.userAITranslationInfo.update({
 		where: {
-			userId_slug_targetLanguage: {
-				userId,
-				slug,
-				targetLanguage,
-			},
+			id: userAITranslationInfoId,
 		},
 		data: {
 			aiTranslationStatus: status,
 			aiTranslationProgress: progress,
-			lastTranslatedAt: new Date(),
+			createdAt: new Date(),
 		},
 	});
 }

web/app/features/translate/lib/translate.server.ts

@@ -10,14 +10,12 @@ import { extractTranslations } from "../utils/extractTranslations.server";
 import { splitNumberedElements } from "../utils/splitNumberedElements.server";
 
 export async function translate(params: TranslateJobParams) {
-	await updateUserAITranslationInfo(
-		params.userId,
-		params.slug,
-		params.targetLanguage,
-		"in_progress",
-		0,
-	);
 	try {
+		await updateUserAITranslationInfo(
+			params.userAITranslationInfoId,
+			"in_progress",
+			0,
+		);
 		const chunks = splitNumberedElements(params.numberedElements);
 		const totalChunks = chunks.length;
 		for (let i = 0; i < chunks.length; i++) {
@@ -33,26 +31,20 @@ export async function translate(params: TranslateJobParams) {
 			);
 			const progress = ((i + 1) / totalChunks) * 100;
 			await updateUserAITranslationInfo(
-				params.userId,
-				params.slug,
-				params.targetLanguage,
+				params.userAITranslationInfoId,
 				"in_progress",
 				progress,
 			);
 		}
 		await updateUserAITranslationInfo(
-			params.userId,
-			params.slug,
-			params.targetLanguage,
+			params.userAITranslationInfoId,
 			"completed",
 			100,
 		);
 	} catch (error) {
 		console.error("Background translation job failed:", error);
 		await updateUserAITranslationInfo(
-			params.userId,
-			params.slug,
-			params.targetLanguage,
+			params.userAITranslationInfoId,
 			"failed",
 			0,
 		);

web/app/features/translate/translate-user-queue.ts

@@ -2,7 +2,7 @@ import { Queue } from "~/utils/queue.server";
 import { translate } from "./lib/translate.server";
 import type { TranslateJobParams } from "./types";
 
-const QUEUE_VERSION = 4;
+const QUEUE_VERSION = 2;
 
 export const getTranslateUserQueue = (userId: number) => {
 	return Queue<TranslateJobParams>(

web/app/features/translate/types.ts

@@ -4,13 +4,13 @@ export type NumberedElement = {
 };
 
 export interface TranslateJobParams {
+	userId: number;
+	pageId: number;
+	userAITranslationInfoId: number;
 	geminiApiKey: string;
 	aiModel: string;
-	userId: number;
 	targetLanguage: string;
-	pageId: number;
 	title: string;
 	numberedContent: string;
 	numberedElements: NumberedElement[];
-	slug: string;
 }