Refactor with zulstand and components (#3)

* refactor with zustand and components

* fix speech bubbles in layout plan

Author: kstonekuan

package.json

@@ -21,12 +21,13 @@
 		"pino": "9.9.5",
 		"pino-pretty": "13.1.1",
 		"react": "19.1.1",
-		"react-dom": "19.1.1"
+		"react-dom": "19.1.1",
+		"zustand": "5.0.8"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "2.2.4",
 		"@tailwindcss/postcss": "4.1.13",
-		"@types/node": "24.4.0",
+		"@types/node": "24.5.0",
 		"@types/react": "19.1.13",
 		"@types/react-dom": "19.1.9",
 		"knip": "5.63.1",

pnpm-lock.yaml

@@ -0,0 +1,117 @@
+import { type NextRequest, NextResponse } from "next/server";
+
+interface RedditPost {
+	title: string;
+	selftext: string;
+	author: string;
+	subreddit: string;
+	url: string;
+	permalink: string;
+}
+
+interface RedditApiResponse {
+	data: {
+		children: Array<{
+			data: RedditPost;
+		}>;
+	};
+}
+
+interface RedditPostContent {
+	title: string;
+	body: string;
+	author: string;
+	subreddit: string;
+	url: string;
+}
+
+export async function GET(request: NextRequest) {
+	try {
+		const { searchParams } = new URL(request.url);
+		const redditPath = searchParams.get("path");
+
+		if (!redditPath) {
+			return NextResponse.json(
+				{ error: "Reddit path parameter is required" },
+				{ status: 400 },
+			);
+		}
+
+		// Extract subreddit and post ID from path like /r/subreddit/comments/postid/title
+		const pathMatch = redditPath.match(/^\/r\/([^/]+)\/comments\/([^/]+)/);
+		if (!pathMatch) {
+			return NextResponse.json(
+				{ error: "Invalid Reddit URL format" },
+				{ status: 400 },
+			);
+		}
+
+		const [, subreddit, postId] = pathMatch;
+		const apiUrl = `https://www.reddit.com/r/${subreddit}/comments/${postId}.json`;
+
+		const response = await fetch(apiUrl, {
+			headers: {
+				"User-Agent": "story-to-manga/1.0",
+			},
+		});
+
+		if (!response.ok) {
+			if (response.status === 404) {
+				return NextResponse.json(
+					{ error: "Reddit post not found" },
+					{ status: 404 },
+				);
+			}
+			if (response.status === 403) {
+				return NextResponse.json(
+					{ error: "Reddit post is private or restricted" },
+					{ status: 403 },
+				);
+			}
+			return NextResponse.json(
+				{ error: `Failed to fetch Reddit post: ${response.status}` },
+				{ status: response.status },
+			);
+		}
+
+		const data: RedditApiResponse[] = await response.json();
+
+		if (!data || !Array.isArray(data) || data.length === 0) {
+			return NextResponse.json(
+				{ error: "Invalid Reddit API response format" },
+				{ status: 500 },
+			);
+		}
+
+		const postData = data[0]?.data?.children?.[0]?.data;
+		if (!postData) {
+			return NextResponse.json(
+				{ error: "No post data found in Reddit response" },
+				{ status: 500 },
+			);
+		}
+
+		const redditPostContent: RedditPostContent = {
+			title: postData.title || "",
+			body: postData.selftext || "",
+			author: postData.author || "",
+			subreddit: postData.subreddit || "",
+			url: `https://www.reddit.com${postData.permalink}`,
+		};
+
+		return NextResponse.json({
+			success: true,
+			post: redditPostContent,
+		});
+	} catch (error) {
+		console.error("Reddit proxy error:", error);
+		return NextResponse.json(
+			{
+				error: `Network error while fetching Reddit post: ${
+					error instanceof Error ? error.message : "Unknown error"
+				}`,
+			},
+			{ status: 500 },
+		);
+	}
+}