add bug report / feature request feature

Author: victorhuangwq

.env.local.example

@@ -10,4 +10,14 @@ GOOGLE_AI_TEXT_API_KEY=your_google_ai_text_api_key_here
 # Google Analytics Measurement ID
 # Get this from your Google Analytics 4 property settings
 # Format: G-XXXXXXXXXX
-NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX
+NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX
+
+# GitHub Personal Access Token for creating issues via repository dispatch
+# Required scope: public_repo (or repo for private repositories)
+# Get your PAT from https://github.com/settings/tokens
+GITHUB_PAT=ghp_xxxxxxxxxxxxxxxxxxxx
+
+# Optional: Override the default GitHub repository owner and name
+# Defaults to 'victorhuangwq' and 'story-to-manga' if not specified
+# GITHUB_OWNER=victorhuangwq
+# GITHUB_REPO=story-to-manga

.github/workflows/create-issue.yml

@@ -0,0 +1,40 @@
+name: Create Issue from User Report
+
+on:
+  repository_dispatch:
+    types: [create-issue]
+
+jobs:
+  create-issue:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Create Issue
+        uses: actions/github-script@v8
+        with:
+          script: |
+            const { type, description, user_agent, timestamp } = context.payload.client_payload;
+
+            const title = `[${type === 'bug' ? 'Bug Report' : 'Feature Request'}] User submitted report`;
+
+            const labels = type === 'bug' ? ['bug', 'user-reported'] : ['enhancement', 'user-reported'];
+
+            const body = `## Type
+            ${type === 'bug' ? '🐛 Bug Report' : '✨ Feature Request'}
+
+            ## Description
+            ${description}
+
+            ## Metadata
+            - **Submitted at:** ${timestamp}
+            - **User Agent:** ${user_agent}
+
+            ---
+            *This issue was automatically created from a user submission via the web form.*`;
+
+            await github.rest.issues.create({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              title: title,
+              body: body,
+              labels: labels
+            });

package-lock.json

@@ -0,0 +1,68 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { type, description, userAgent } = body;
+
+    if (!type || !description) {
+      return NextResponse.json(
+        { error: 'Type and description are required' },
+        { status: 400 }
+      );
+    }
+
+    const githubToken = process.env.GITHUB_PAT;
+    const githubOwner = process.env.GITHUB_OWNER || 'victorhuangwq';
+    const githubRepo = process.env.GITHUB_REPO || 'story-to-manga';
+
+    if (!githubToken) {
+      console.error('GitHub PAT not configured');
+      return NextResponse.json(
+        { error: 'Issue reporting not configured' },
+        { status: 500 }
+      );
+    }
+
+    const response = await fetch(
+      `https://api.github.com/repos/${githubOwner}/${githubRepo}/dispatches`,
+      {
+        method: 'POST',
+        headers: {
+          Accept: 'application/vnd.github.v3+json',
+          Authorization: `Bearer ${githubToken}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          event_type: 'create-issue',
+          client_payload: {
+            type,
+            description,
+            user_agent: userAgent || 'Unknown',
+            timestamp: new Date().toISOString(),
+          },
+        }),
+      }
+    );
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error('GitHub API error:', response.status, errorText);
+      return NextResponse.json(
+        { error: 'Failed to submit issue' },
+        { status: response.status }
+      );
+    }
+
+    return NextResponse.json(
+      { success: true, message: 'Issue submitted successfully' },
+      { status: 200 }
+    );
+  } catch (error) {
+    console.error('Error submitting issue:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}

src/app/api/report-issue/route.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useId, useRef } from "react";
+import { useCallback, useId, useRef, useState } from "react";
 import AccordionSection from "@/components/AccordionSection";
 import CharacterCard from "@/components/CharacterCard";
 import CollapsibleSection from "@/components/CollapsibleSection";
@@ -9,6 +9,7 @@ import ImageUpload from "@/components/ImageUpload";
 import PanelCard from "@/components/PanelCard";
 import RerunButton from "@/components/RerunButton";
 import ShareableComicLayout from "@/components/ShareableComicLayout";
+import ReportIssueModal from "@/components/ReportIssueModal";
 import { useAppInitialization } from "@/hooks/useAppInitialization";
 import { useAutoSave } from "@/hooks/useAutoSave";
 import { useModalEscape } from "@/hooks/useEscapeKey";
@@ -62,6 +63,9 @@ export default function Home() {
 	const comicRadioId = useId();
 	const storyTextareaId = useId();
 	const analysisHeadingId = useId();
+
+	// State for report issue modal
+	const [isReportModalOpen, setIsReportModalOpen] = useState(false);
 	const charactersHeadingId = useId();
 	const layoutHeadingId = useId();
 	const panelsHeadingId = useId();
@@ -1147,10 +1151,9 @@ export default function Home() {
 			</div>
 
 			{/* Floating Report Issue Button */}
-			<a
-				href="https://github.com/victorhuangwq/story-to-manga/issues/new"
-				target="_blank"
-				rel="noopener noreferrer"
+			<button
+				type="button"
+				onClick={() => setIsReportModalOpen(true)}
 				className="floating-report-btn"
 				title="Report an issue"
 			>
@@ -1159,7 +1162,13 @@ export default function Home() {
 					<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15h2v-6h-2v6zm0-8h2V7h-2v2z" />
 				</svg>
 				Report Issue
-			</a>
+			</button>
+
+			{/* Report Issue Modal */}
+			<ReportIssueModal
+				isOpen={isReportModalOpen}
+				onClose={() => setIsReportModalOpen(false)}
+			/>
 
 			{/* Image Modal */}
 			{modalImage && (