diff --git a/web/src/components/AppShell.tsx b/web/src/components/AppShell.tsx index 4e013eb..87a5b64 100644 --- a/web/src/components/AppShell.tsx +++ b/web/src/components/AppShell.tsx @@ -26,6 +26,9 @@ function cleanPath(path: string): string { function getActiveNav(items: NavItem[], locale: string, pathname?: string): string { const path = cleanPath(pathname ?? (typeof window === 'undefined' ? '' : window.location.pathname)); + // Profile page and settings sub-pages are part of settings + if (path === `/${locale}/profile`) return 'settings'; + if (path.startsWith(`/${locale}/settings`)) return 'settings'; for (const item of items) { if (item.sub) { for (const sub of item.sub) { diff --git a/web/src/components/DashboardApp.tsx b/web/src/components/DashboardApp.tsx index 7d9fc92..8653b7d 100644 --- a/web/src/components/DashboardApp.tsx +++ b/web/src/components/DashboardApp.tsx @@ -9,6 +9,8 @@ import HistoryFollowUpPage from './HistoryFollowUpPage'; import NotificationPage from './NotificationPage'; import ProfileDetailPage from './ProfileDetailPage'; import SettingsPage from './SettingsPage'; +import GeneralSettingsPage from './GeneralSettingsPage'; +import FeedbackPage from './FeedbackPage'; import ManualDivinationPage from './ManualDivinationPage'; import AutoDivinationPage from './AutoDivinationPage'; import { getNavConfig } from './navConfig'; @@ -26,6 +28,8 @@ interface DashboardAppProps { profile: TranslationMap; settings: TranslationMap; divination: TranslationMap; + general: TranslationMap; + feedback: TranslationMap; }; } @@ -36,6 +40,8 @@ const APP_PATHS = [ '/notifications', '/profile', '/settings', + '/settings/general', + '/settings/feedback', '/divination/manual', '/divination/auto', ]; @@ -87,6 +93,8 @@ function DashboardRoutes({ locale, translations }: DashboardAppProps) { } /> } /> } /> + } /> + } /> } /> } /> } /> diff --git a/web/src/components/DashboardAppPage.astro b/web/src/components/DashboardAppPage.astro index c0500b5..4b9b6e2 100644 --- a/web/src/components/DashboardAppPage.astro +++ b/web/src/components/DashboardAppPage.astro @@ -17,6 +17,8 @@ const translations = { profile: t(locale, 'profile'), settings: t(locale, 'settings'), divination: t(locale, 'divination'), + general: t(locale, 'general'), + feedback: t(locale, 'feedback'), }; --- diff --git a/web/src/components/FeedbackPage.tsx b/web/src/components/FeedbackPage.tsx new file mode 100644 index 0000000..0634947 --- /dev/null +++ b/web/src/components/FeedbackPage.tsx @@ -0,0 +1,214 @@ +import { useState, useRef } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { authFetch } from '../lib/auth'; +import { API_ROUTES } from '../lib/api-routes'; +import { apiUrl, jsonHeaders } from '../lib/api-client'; + +interface Props { + locale: string; + feedback: { title: string; typeLabel: string; typeBug: string; typeSuggestion: string; typeOther: string; contentLabel: string; contentPlaceholder: string; imagesLabel: string; anonymousLabel: string; anonymousHint: string; submitBtn: string; submitting: string; success: string; error: string; contentRequired: string; contentTooLong: string; tooManyImages: string; imageTooLarge: string }; +} + +type FeedbackType = 'bug' | 'suggestion' | 'other'; + +const MAX_IMAGES = 3; +const MAX_CONTENT_SIZE = 500; +const MAX_IMAGE_SIZE = 5 * 1024 * 1024; + +export default function FeedbackPage({ locale, feedback: f }: Props) { + const navigate = useNavigate(); + const [selectedType, setSelectedType] = useState('bug'); + const [content, setContent] = useState(''); + const [images, setImages] = useState([]); + const [isAnonymous, setIsAnonymous] = useState(false); + const [submitting, setSubmitting] = useState(false); + const [toast, setToast] = useState<{ type: 'success' | 'error'; message: string } | null>(null); + const fileInputRef = useRef(null); + + const typeOptions: { value: FeedbackType; label: string }[] = [ + { value: 'bug', label: f.typeBug }, + { value: 'suggestion', label: f.typeSuggestion }, + { value: 'other', label: f.typeOther }, + ]; + + const handleImagePick = async (e: React.ChangeEvent) => { + const file = e.target.files?.[0]; + if (!file) return; + + if (images.length >= MAX_IMAGES) { + setToast({ type: 'error', message: f.tooManyImages }); + return; + } + + if (file.size > MAX_IMAGE_SIZE) { + setToast({ type: 'error', message: f.imageTooLarge }); + return; + } + + setImages([...images, file]); + if (fileInputRef.current) fileInputRef.current.value = ''; + }; + + const handleRemoveImage = (index: number) => { + setImages(images.filter((_, i) => i !== index)); + }; + + const handleSubmit = async () => { + const trimmedContent = content.trim(); + if (!trimmedContent) { + setToast({ type: 'error', message: f.contentRequired }); + return; + } + if (trimmedContent.length > MAX_CONTENT_SIZE) { + setToast({ type: 'error', message: f.contentTooLong }); + return; + } + + setSubmitting(true); + setToast(null); + + try { + const formData = new FormData(); + formData.append('feedback_type', selectedType); + formData.append('content', trimmedContent); + formData.append('device_info', JSON.stringify({ platform: 'web', model: navigator.userAgent })); + formData.append('app_version', '1.0.0'); + formData.append('os_version', navigator.platform); + + for (const image of images) { + formData.append('images', image); + } + + if (isAnonymous) { + // Anonymous submission - no auth header + const res = await fetch(apiUrl(API_ROUTES.feedback.submit), { + method: 'POST', + body: formData, + }); + if (!res.ok) { + throw new Error('Submit failed'); + } + } else { + // Authenticated submission + await authFetch(API_ROUTES.feedback.submit, { + method: 'POST', + body: formData, + }); + } + + setToast({ type: 'success', message: f.success }); + setTimeout(() => navigate(-1), 1500); + } catch { + setToast({ type: 'error', message: f.error }); + } finally { + setSubmitting(false); + } + }; + + return ( +
+ {/* Page Header */} +
+ +

{f.title}

+
+ + {/* Toast */} + {toast && ( +
+ {toast.message} +
+ )} + + {/* Feedback Type */} +
+

{f.typeLabel}

+
+ {typeOptions.map((opt) => ( + + ))} +
+
+ + {/* Content */} +
+

{f.contentLabel}

+