chore: add review reports

src/App.tsx

@@ -8,6 +8,7 @@ import RegisterPage from './pages/auth/RegisterPage';
 import VerifyEmailPage from './pages/auth/VerifyEmailPage';
 import CheckEmailPage from './pages/auth/CheckEmailPage';
 import ProfilePage from './pages/ProfilePage';
+import AuthorProfilePage from './pages/AuthorProfilePage';
 import SearchResultsPage from './pages/SearchResultsPage';
 import DashboardOverview from './pages/dashboard/DashboardOverview';
 import DashboardAudience from './pages/dashboard/DashboardAudience';
@@ -113,6 +114,7 @@ const App = () => (
         <Route path="/" element={<MainLayout />}>
           <Route index element={<Home />} />
           <Route path="plugin/:id" element={<PluginDetail />} />
+          <Route path="profile/:username" element={<AuthorProfilePage />} />
           <Route path="search" element={<SearchResultsPage />} />
           <Route path="terms" element={<TermsOfServicePage />} />
           <Route path="privacy" element={<PrivacyPolicyPage />} />

src/pages/AuthorProfilePage.tsx

@@ -0,0 +1,368 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import api from '../api';
+import { useTranslation } from 'react-i18next';
+import SEO from '../components/SEO';
+
+const AuthorProfilePage = () => {
+  const { username } = useParams();
+  const { t, i18n } = useTranslation();
+  const [author, setAuthor] = useState<any>(null);
+  const [plugins, setPlugins] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setLoading(true);
+    setError(null);
+    
+    // Fetch author public info
+    api.get(`/user/public/${username}`)
+      .then(res => {
+        setAuthor(res.data);
+        // Fetch author plugins
+        return api.get('/plugins', { params: { dev_name: username, sort: 'newest' } });
+      })
+      .then(res => {
+        setPlugins(Array.isArray(res.data) ? res.data : []);
+      })
+      .catch(err => {
+        console.error('Fetch error:', err);
+        setError('User not found or failed to load plugins.');
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [username]);
+
+  const getDescription = (translatedStr: string) => {
+    try {
+      const data = JSON.parse(translatedStr);
+      const currentLang = i18n.language.split('-')[0];
+      return data[currentLang] || data.en || Object.values(data)[0] || 'No description available.';
+    } catch {
+      return 'No description available.';
+    }
+  };
+
+  const getAccentColor = (name: string) => {
+    const colors = [
+      '#4f7eff', '#ff6b6b', '#ffd166', '#06d6a0',
+      '#a855f7', '#f97316', '#06b6d4', '#ec4899',
+    ];
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
+    return colors[Math.abs(hash) % colors.length];
+  };
+
+  const getEffectivePrice = (plugin: any): { display: string; isSale: boolean; originalDisplay: string } => {
+    const base = plugin.price_cents ?? 0;
+    const saleActive = plugin.sale_active && plugin.sale_discount_percent > 0;
+    if (saleActive) {
+      const saleCents = Math.round(base * (1 - plugin.sale_discount_percent / 100));
+      return {
+        display: `€${(saleCents / 100).toFixed(2)}`,
+        isSale: true,
+        originalDisplay: `€${(base / 100).toFixed(2)}`,
+      };
+    }
+    return {
+      display: `€${(base / 100).toFixed(2)}`,
+      isSale: false,
+      originalDisplay: '',
+    };
+  };
+
+  if (loading) return <div className="container"><h2>LOADING...</h2></div>;
+  if (error || !author) return <div className="container"><h2>{error || 'User not found'}</h2></div>;
+
+  return (
+    <div className="container">
+      <SEO 
+        title={`${author.username}'s Profile`} 
+        description={`Check out all Minecraft plugins created by ${author.username} on Pumpkin Market.`} 
+      />
+      
+      <div className="profile-header-v2" style={{
+        background: 'var(--mp-surface, #16191f)',
+        padding: '3rem 2rem',
+        borderRadius: '16px',
+        marginBottom: '3rem',
+        border: '1px solid var(--mp-border, rgba(255,255,255,0.07))',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '2rem'
+      }}>
+        <div className="author-avatar-large" style={{
+          width: '100px',
+          height: '100px',
+          borderRadius: '50%',
+          background: `linear-gradient(135deg, ${getAccentColor(author.username)} 0%, #0d0f12 100%)`,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: '3rem',
+          fontWeight: 'bold',
+          color: 'white'
+        }}>
+          {author.username.charAt(0).toUpperCase()}
+        </div>
+        <div>
+          <h1 style={{ margin: 0, fontSize: '2.5rem' }}>{author.username}</h1>
+          <p style={{ color: 'var(--mp-text-3, #5a6070)', margin: '0.5rem 0 0' }}>
+            Member since {new Date(author.created_at).toLocaleDateString(undefined, { year: 'numeric', month: 'long' })}
+          </p>
+          <div style={{ marginTop: '1rem', display: 'flex', gap: '1rem' }}>
+            <div className="stat-pill" style={{
+              background: 'rgba(255,255,255,0.05)',
+              padding: '0.4rem 1rem',
+              borderRadius: '20px',
+              fontSize: '0.85rem',
+              border: '1px solid rgba(255,255,255,0.1)'
+            }}>
+              <strong>{plugins.length}</strong> Plugins Published
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <h2 style={{ marginBottom: '1.5rem' }}>Plugins by {author.username}</h2>
+      
+      <div className="home-plugin-grid">
+        {plugins.map((plugin) => {
+          const accent = getAccentColor(plugin.name);
+          const desc = getDescription(plugin.translated_descriptions);
+          const initial = plugin.name.charAt(0).toUpperCase();
+          const priceInfo = getEffectivePrice(plugin);
+          const isSale = plugin.type === 'paid' && priceInfo.isSale;
+          const imageUrl = plugin.preview_path;
+
+          return (
+            <Link to={`/plugin/${plugin.id}`} key={plugin.id} className="plugin-card-link">
+              <div className="plugin-card-v2">
+                <div className="pcv2-preview">
+                  {imageUrl ? (
+                    <img className="pcv2-preview-img" src={imageUrl} alt={plugin.name} />
+                  ) : (
+                    <div className="pcv2-preview-fallback" style={{ background: `linear-gradient(135deg, ${accent}22 0%, #0d0f12 100%)` }}>
+                      <span style={{ color: accent }}>{initial}</span>
+                    </div>
+                  )}
+                  <div className="pcv2-preview-fade" />
+                  <span className="pcv2-category-badge">{plugin.category}</span>
+                  {plugin.type === 'free' ? (
+                    <span className="pcv2-price-badge free">Free</span>
+                  ) : isSale ? (
+                    <span className="pcv2-price-badge sale">
+                      <span className="pcv2-price-original">{priceInfo.originalDisplay}</span>
+                      {priceInfo.display}
+                      <span className="pcv2-sale-pct">-{plugin.sale_discount_percent}%</span>
+                    </span>
+                  ) : (
+                    <span className="pcv2-price-badge paid">{priceInfo.display}</span>
+                  )}
+                </div>
+                <div className="pcv2-info">
+                  <p className="pcv2-name">{plugin.name}</p>
+                  <p className="pcv2-dev">by {plugin.dev_name}</p>
+                  <p className="pcv2-desc">{desc}</p>
+                  <div className="pcv2-footer">
+                    <span className="pcv2-stat">
+                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
+                      </svg>
+                      {(plugin.downloads ?? 0).toLocaleString()}
+                    </span>
+                    {plugin.version && (
+                      <span className="pcv2-stat" style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono, monospace)', fontSize: '0.65rem' }}>
+                        v{plugin.version}
+                      </span>
+                    )}
+                  </div>
+                </div>
+                {isSale && (
+                  <div className="pcv2-sale-strip">🔥 Sale — {plugin.sale_discount_percent}% off</div>
+                )}
+                <div className="pcv2-accent-bar" style={{ background: `linear-gradient(90deg, ${isSale ? '#ff6b6b' : accent}, transparent)` }} />
+              </div>
+            </Link>
+          );
+        })}
+
+        {plugins.length === 0 && (
+          <div className="empty-state">
+            <p>This author hasn't published any plugins yet.</p>
+          </div>
+        )}
+      </div>
+
+      <style>{`
+        .home-plugin-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+          gap: 1.25rem;
+          padding: 0 0 4rem;
+        }
+        .plugin-card-link { text-decoration: none; display: block; }
+        .plugin-card-v2 {
+          position: relative;
+          border-radius: 10px;
+          overflow: hidden;
+          background: var(--mp-surface, #16191f);
+          border: 1px solid var(--mp-border, rgba(255,255,255,0.07));
+          cursor: pointer;
+          transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+          will-change: transform;
+        }
+        .plugin-card-v2:hover {
+          transform: translateY(-3px);
+          box-shadow: 0 16px 40px rgba(0,0,0,0.45);
+          border-color: rgba(255,255,255,0.14);
+        }
+        .pcv2-preview {
+          position: relative;
+          width: 100%;
+          aspect-ratio: 16 / 9;
+          overflow: hidden;
+          background: var(--mp-bg, #0d0f12);
+        }
+        .pcv2-preview-img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          display: block;
+          transition: transform 0.35s ease;
+        }
+        .plugin-card-v2:hover .pcv2-preview-img { transform: scale(1.04); }
+        .pcv2-preview-fallback {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 2.8rem;
+          font-weight: 800;
+          letter-spacing: -0.04em;
+          color: rgba(255,255,255,0.9);
+          font-family: var(--font-display, system-ui);
+          user-select: none;
+        }
+        .pcv2-preview-fade {
+          position: absolute;
+          inset: 0;
+          background: linear-gradient(to bottom, transparent 30%, rgba(13,15,18,0.55) 65%, rgba(13,15,18,0.96) 100%);
+          pointer-events: none;
+        }
+        .pcv2-category-badge {
+          position: absolute;
+          top: 10px; left: 10px;
+          font-size: 0.62rem;
+          font-weight: 700;
+          letter-spacing: 0.07em;
+          text-transform: uppercase;
+          background: rgba(13,15,18,0.72);
+          backdrop-filter: blur(6px);
+          border: 1px solid rgba(255,255,255,0.1);
+          color: rgba(255,255,255,0.75);
+          padding: 0.2rem 0.5rem;
+          border-radius: 4px;
+        }
+        .pcv2-price-badge {
+          position: absolute;
+          top: 10px; right: 10px;
+          font-size: 0.7rem;
+          font-weight: 700;
+          padding: 0.2rem 0.55rem;
+          border-radius: 4px;
+          backdrop-filter: blur(6px);
+          display: flex;
+          align-items: center;
+          gap: 0.35rem;
+        }
+        .pcv2-price-badge.free {
+          background: rgba(6,214,160,0.18);
+          border: 1px solid rgba(6,214,160,0.35);
+          color: #06d6a0;
+        }
+        .pcv2-price-badge.paid {
+          background: rgba(255,209,102,0.16);
+          border: 1px solid rgba(255,209,102,0.35);
+          color: #ffd166;
+        }
+        .pcv2-price-badge.sale {
+          background: rgba(255,107,107,0.18);
+          border: 1px solid rgba(255,107,107,0.4);
+          color: #ff6b6b;
+        }
+        .pcv2-price-original {
+          text-decoration: line-through;
+          opacity: 0.55;
+          font-weight: 500;
+        }
+        .pcv2-sale-pct {
+          font-size: 0.58rem;
+          font-weight: 800;
+          background: rgba(255,107,107,0.25);
+          border-radius: 3px;
+          padding: 1px 4px;
+          letter-spacing: 0.04em;
+        }
+        .pcv2-info { padding: 0.85rem 1rem 1rem; }
+        .pcv2-name {
+          font-size: 0.95rem;
+          font-weight: 700;
+          color: var(--mp-text-1, #f0f0f0);
+          margin: 0 0 0.15rem;
+          font-family: var(--font-display, system-ui);
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .pcv2-dev { font-size: 0.72rem; color: var(--mp-text-3, #5a6070); margin: 0 0 0.55rem; }
+        .pcv2-desc {
+          font-size: 0.77rem;
+          color: var(--mp-text-2, #8b909a);
+          line-height: 1.55;
+          margin: 0 0 0.75rem;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+        .pcv2-footer {
+          display: flex;
+          align-items: center;
+          gap: 0.9rem;
+          padding-top: 0.65rem;
+          border-top: 1px solid var(--mp-border, rgba(255,255,255,0.06));
+        }
+        .pcv2-stat {
+          display: flex; align-items: center; gap: 0.3rem;
+          font-size: 0.7rem; color: var(--mp-text-3, #5a6070);
+        }
+        .pcv2-stat svg { opacity: 0.6; }
+        .pcv2-accent-bar {
+          position: absolute; bottom: 0; left: 0; right: 0;
+          height: 2px; opacity: 0;
+          transition: opacity 0.2s ease;
+        }
+        .plugin-card-v2:hover .pcv2-accent-bar { opacity: 1; }
+        .pcv2-sale-strip {
+          background: linear-gradient(90deg, rgba(255,107,107,0.15), rgba(255,107,107,0.05));
+          border-top: 1px solid rgba(255,107,107,0.2);
+          padding: 0.3rem 1rem;
+          font-size: 0.65rem;
+          font-weight: 700;
+          color: #ff6b6b;
+          letter-spacing: 0.06em;
+          text-transform: uppercase;
+          display: flex;
+          align-items: center;
+          gap: 0.4rem;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default AuthorProfilePage;

src/pages/PluginDetail.tsx

@@ -17,6 +17,13 @@ const REPORT_REASONS = [
   'Other',
 ];
 
+const REVIEW_REPORT_REASONS = [
+  'Inappropriate language',
+  'Spam or advertising',
+  'Hate speech or harassment',
+  'Off-topic or irrelevant',
+  'Other',
+];
 const MAX_REVIEW_LENGTH = 2000;
 
 const StarRating = ({ rating, max = 5, onRate }: { rating: number; max?: number; onRate?: (n: number) => void }) => (
@@ -76,7 +83,7 @@ const PluginDetail = () => {
   const [lightboxIndex, setLightboxIndex] = useState<number>(0);
   const [selectedLanguage] = useState('en');
   const [currentDescription, setCurrentDescription] = useState('');
-  const [setLoading] = useState(true);
+  const [loading, setLoading] = useState(true);
 
   // Ownership
   const [ownsPlugin, setOwnsPlugin] = useState(false);
@@ -92,6 +99,13 @@ const PluginDetail = () => {
   const [reportSubmitting, setReportSubmitting] = useState(false);
   const [reportDone, setReportDone] = useState(false);
 
+  // Review Report State
+  const [reviewReportOpen, setReviewReportOpen] = useState<number | null>(null);
+  const [reviewReportSelected, setReviewReportSelected] = useState<string>('');
+  const [reviewReportCustom, setReviewReportCustom] = useState('');
+  const [reviewReportSubmitting, setReviewReportSubmitting] = useState(false);
+  const [reportedReviews, setReportedReviews] = useState<Set<number>>(new Set());
+
   // ── Detect ?payment=success and strip from URL ───────────────────────────
   useEffect(() => {
     const params = new URLSearchParams(location.search);
@@ -290,6 +304,28 @@ const PluginDetail = () => {
     setReportCustom('');
   };
 
+  const submitReviewReport = async (e: React.FormEvent, reviewId: number) => {
+    e.preventDefault();
+    const reason = reviewReportSelected === 'Other' ? reviewReportCustom.trim() : reviewReportSelected;
+    if (!reason) return;
+    setReviewReportSubmitting(true);
+    try {
+      await api.post(`/plugins/${id}/reviews/${reviewId}/report`, { reason });
+      setReportedReviews(prev => new Set(prev).add(reviewId));
+      resetReviewReport();
+    } catch {
+      alert('Failed to submit report. Please try again.');
+    } finally {
+      setReviewReportSubmitting(false);
+    }
+  };
+
+  const resetReviewReport = () => {
+    setReviewReportOpen(null);
+    setReviewReportSelected('');
+    setReviewReportCustom('');
+  };
+
   if (!plugin) return <div className="container"><h2>LOADING...</h2></div>;
 
   const formatSize = (bytes: number) => {
@@ -379,7 +415,7 @@ const PluginDetail = () => {
     </div>
     <div>
     <h1 className="plugin-title">{plugin.name}</h1>
-    <p className="dev-name">by {plugin.dev_name}</p>
+    <p className="dev-name">by <Link to={`/profile/${plugin.dev_name}`} style={{ color: 'inherit', textDecoration: 'none' }} onMouseEnter={e => (e.currentTarget.style.textDecoration = 'underline')} onMouseLeave={e => (e.currentTarget.style.textDecoration = 'none')}>{plugin.dev_name}</Link></p>
     </div>
     </div>
 
@@ -474,6 +510,63 @@ const PluginDetail = () => {
       ))}
       </div>
       <p className="review-item-body">{r.comment}</p>
+      
+      {/* Review Report Button/Form */}
+      <div style={{ marginTop: '0.75rem' }}>
+        {reportedReviews.has(r.id) ? (
+          <p style={{ fontSize: '0.75rem', color: 'var(--success)', margin: 0 }}>✓ Report submitted</p>
+        ) : reviewReportOpen === r.id ? (
+          <form onSubmit={(e) => submitReviewReport(e, r.id)} className="report-form" style={{ maxWidth: '400px' }}>
+            <label className="report-form-label">Reason for reporting this review</label>
+            <div className="report-reasons" style={{ transform: 'scale(0.9)', originX: 'left' }}>
+              {REVIEW_REPORT_REASONS.map(reason => (
+                <button
+                  key={reason}
+                  type="button"
+                  className={`report-reason-chip ${reviewReportSelected === reason ? 'selected' : ''}`}
+                  onClick={() => { setReviewReportSelected(reason); setReviewReportCustom(''); }}
+                >
+                  {reason}
+                </button>
+              ))}
+            </div>
+            {reviewReportSelected === 'Other' && (
+              <textarea
+                className="report-textarea"
+                placeholder="Describe the issue…"
+                value={reviewReportCustom}
+                onChange={e => setReviewReportCustom(e.target.value)}
+                rows={2}
+                autoFocus
+                style={{ fontSize: '0.8rem' }}
+              />
+            )}
+            <div className="report-form-actions">
+              <button type="button" className="btn-report-cancel" onClick={resetReviewReport} style={{ padding: '4px 8px', fontSize: '0.7rem' }}>
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="btn-report-submit"
+                disabled={
+                  reviewReportSubmitting ||
+                  !reviewReportSelected ||
+                  (reviewReportSelected === 'Other' && !reviewReportCustom.trim())
+                }
+                style={{ padding: '4px 8px', fontSize: '0.7rem' }}
+              >
+                {reviewReportSubmitting ? 'Sending…' : 'Submit'}
+              </button>
+            </div>
+          </form>
+        ) : (
+          user && user.username !== r.username && (
+            <button className="btn-report" onClick={() => setReviewReportOpen(r.id)} style={{ fontSize: '0.7rem' }}>
+              🚩 Report review
+            </button>
+          )
+        )}
+      </div>
       </div>
     ))}
     </div>
@@ -586,9 +679,10 @@ const PluginDetail = () => {
 
     <div className="sidebar-stats">
     <div className="stat-item"><strong>{plugin.downloads.toLocaleString()}</strong> Downloads</div>
-    <div className="stat-item"><strong>{plugin.views.toLocaleString()}</strong> Views</div>
+    {plugin.created_at && (
+      <div className="stat-item">Released: <strong>{new Date(plugin.created_at).toLocaleDateString()}</strong></div>
+    )}
     <div className="stat-item">Category: <strong>{plugin.category}</strong></div>
-
     {plugin.version && (
       <div className="stat-item">Version: <strong>{plugin.version}</strong></div>
     )}