show reddit errors in modal

Author: kstonekuan

src/app/layout.tsx

@@ -7,12 +7,10 @@ import "./globals.css";
 export const metadata: Metadata = {
 	metadataBase: new URL("https://storytomanga.com"),
 	title: "Story to Manga Machine",
-	description:
-			"Transform stories into manga and comic pages with IA",
+	description: "Transform stories into manga and comic pages with AI",
 	openGraph: {
 		title: "Story to Manga",
-		description:
-			"Transform stories into manga and comic pages with IA",
+		description: "Transform stories into manga and comic pages with AI",
 		url: "https://storytomanga.com",
 		images: [
 			{
@@ -27,8 +25,7 @@ export const metadata: Metadata = {
 	twitter: {
 		card: "summary_large_image",
 		title: "Story to Manga",
-		description:
-			"Transform stories into manga and comic pages with IA",
+		description: "Transform stories into manga and comic pages with AI",
 		images: ["/og-image.png"],
 	},
 };

src/app/page.tsx

@@ -104,7 +104,6 @@ export default function Home() {
 		setGeneratedPanels,
 		setFailedStep,
 		setFailedPanel,
-		showError,
 		clearResults,
 		setOpenAccordions,
 		toggleGenerationAccordion,
@@ -132,6 +131,7 @@ export default function Home() {
 		openImageModal,
 		closeImageModal,
 		setShowConfirmClearModal,
+		showError,
 		closeErrorModal,
 		setIsLoadingState,
 		setIsSavingState,
@@ -250,6 +250,7 @@ export default function Home() {
 		setIsLoadingReddit,
 		setCurrentStepText,
 		setStory,
+		showError,
 		style,
 		uploadedCharacterReferences,
 		uploadedSettingReferences,

src/hooks/useRedditIntegration.ts

@@ -17,6 +17,7 @@ interface UseRedditIntegrationProps {
 	setIsLoadingReddit: (loading: boolean) => void;
 	setCurrentStepText: (text: string) => void;
 	setStory: (story: string) => void;
+	showError: (message: string) => void;
 	style: ComicStyle;
 	uploadedCharacterReferences: UploadedCharacterReference[];
 	uploadedSettingReferences: UploadedSettingReference[];
@@ -35,6 +36,7 @@ export function useRedditIntegration(props: UseRedditIntegrationProps) {
 		setIsLoadingReddit,
 		setCurrentStepText,
 		setStory,
+		showError,
 		style,
 		uploadedCharacterReferences,
 		uploadedSettingReferences,
@@ -82,16 +84,13 @@ export function useRedditIntegration(props: UseRedditIntegrationProps) {
 					errorMessage = error.message;
 				}
 
-				// Show error in the current step text
-				setCurrentStepText(`Error: ${errorMessage}`);
+				// Show error in a modal
+				showError(errorMessage);
 
 				trackError("reddit_loading", errorMessage);
 
-				// Clear error after a few seconds
-				setTimeout(() => {
-					setCurrentStepText("");
-					setIsLoadingReddit(false);
-				}, 3000);
+				setIsLoadingReddit(false);
+				setCurrentStepText("");
 
 				return;
 			}
@@ -107,6 +106,7 @@ export function useRedditIntegration(props: UseRedditIntegrationProps) {
 		setIsLoadingReddit,
 		setCurrentStepText,
 		setStory,
+		showError,
 		style,
 		uploadedCharacterReferences,
 		uploadedSettingReferences,