chore : move all to root

nest-front/src/pages/public/BugDetailPage.tsx

@@ -0,0 +1,347 @@
+import { useState, useCallback, useMemo } from 'react';
+import { Link, Navigate, useParams } from 'react-router-dom';
+import { MOCK_BUGS, MOCK_BUG_COMMENTS } from '../../data/mockData';
+import { useAuth } from '../../contexts/AuthContext';
+import { formatDate, formatDateTime } from '../../utils/format';
+import type { BugComment, BugReport, BugSeverity, BugStatus } from '../../types';
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+
+function StatusBadge({ status }: { status: BugStatus }) {
+  const map: Record<BugStatus, string> = {
+    open: 'badge-open', in_progress: 'badge-progress', resolved: 'badge-resolved', closed: 'badge-closed',
+  };
+  const labels: Record<BugStatus, string> = {
+    open: 'Open', in_progress: 'In Progress', resolved: 'Resolved', closed: 'Closed',
+  };
+  return <span className={`badge ${map[status]}`}>{labels[status]}</span>;
+}
+
+function SeverityBadge({ severity }: { severity: BugSeverity }) {
+  const map: Record<BugSeverity, string> = {
+    low: 'badge-low', medium: 'badge-medium', high: 'badge-high', critical: 'badge-critical',
+  };
+  return <span className={`badge ${map[severity]}`}>{severity}</span>;
+}
+
+// ── Comment component ──────────────────────────────────────────────────────────
+
+function CommentItem({ comment }: { comment: BugComment }) {
+  return (
+    <div
+      style={{
+        background: 'var(--color-surface)',
+        border: '1px solid var(--color-border)',
+        padding: '0.9rem 1.1rem',
+        marginBottom: '0.5rem',
+      }}
+    >
+      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem', gap: '1rem', flexWrap: 'wrap' }}>
+        <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-cyan)', fontSize: '0.78rem' }}>
+          {comment.authorName}
+        </span>
+        <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.7rem', flexShrink: 0 }}>
+          {formatDateTime(comment.createdAt)}
+        </span>
+      </div>
+      <div style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-dim)', fontSize: '0.83rem', lineHeight: 1.75 }}>
+        {comment.content}
+      </div>
+    </div>
+  );
+}
+
+// ── Bug Detail Page ────────────────────────────────────────────────────────────
+
+export default function BugDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const { user, isAuthenticated } = useAuth();
+
+  // Local state — mirrors the global bug list in memory
+  const [bugs, setBugs] = useState<BugReport[]>(MOCK_BUGS);
+  const [comments, setComments] = useState<BugComment[]>(MOCK_BUG_COMMENTS);
+  const [newComment, setNewComment] = useState('');
+  const [commentError, setCommentError] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  const bug = useMemo(() => bugs.find((b) => b.id === id), [bugs, id]);
+
+  const bugComments = useMemo(
+    () => comments.filter((c) => c.bugReportId === id).sort((a, b) => a.createdAt.localeCompare(b.createdAt)),
+    [comments, id]
+  );
+
+  // "I have this too" logic
+  const alreadyVoted = useMemo(
+    () => !!user && !!bug && bug.meTooBugs.includes(user.id),
+    [user, bug]
+  );
+  const isOwnReport = useMemo(
+    () => !!user && !!bug && bug.submittedById === user.id,
+    [user, bug]
+  );
+
+  const handleMeToo = useCallback(() => {
+    if (!user || !bug || alreadyVoted || isOwnReport) return;
+    setBugs((prev) =>
+      prev.map((b) =>
+        b.id === bug.id ? { ...b, meTooBugs: [...b.meTooBugs, user.id] } : b
+      )
+    );
+  }, [user, bug, alreadyVoted, isOwnReport]);
+
+  const handleComment = useCallback(async () => {
+    if (!user) return;
+    if (!newComment.trim()) { setCommentError('Comment cannot be empty.'); return; }
+    if (newComment.trim().length < 5) { setCommentError('Comment must be at least 5 characters.'); return; }
+
+    setCommentError('');
+    setSubmitting(true);
+    await new Promise((r) => setTimeout(r, 250));
+
+    const comment: BugComment = {
+      id: `bc${Date.now()}`,
+      bugReportId: id!,
+      authorId: user.id,
+      authorName: user.username,
+      content: newComment.trim(),
+      createdAt: new Date().toISOString(),
+    };
+    setComments((prev) => [...prev, comment]);
+    setNewComment('');
+    setSubmitting(false);
+  }, [user, newComment, id]);
+
+  if (!bug) {
+    return <Navigate to="/bugs" replace />;
+  }
+
+  const metooCount = bug.meTooBugs.length;
+
+  return (
+    <div style={{ maxWidth: '860px', margin: '0 auto', padding: '3rem 1.5rem' }}>
+      {/* Breadcrumb */}
+      <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.72rem', color: 'var(--color-text-muted)', marginBottom: '1.5rem' }}>
+        <Link to="/bugs" style={{ color: 'var(--color-cyan)' }}>Bug Reports</Link>
+        {' '}&gt;{' '}
+        <span style={{ color: 'var(--color-text-dim)' }}>{bug.uniqueCode}</span>
+      </div>
+
+      {/* Header */}
+      <div className="crt-box" style={{ padding: '1.75rem', marginBottom: '1rem' }}>
+        {/* Badges */}
+        <div style={{ display: 'flex', gap: '0.4rem', flexWrap: 'wrap', alignItems: 'center', marginBottom: '0.75rem' }}>
+          <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.72rem' }}>
+            {bug.uniqueCode}
+          </span>
+          <StatusBadge status={bug.status} />
+          <SeverityBadge severity={bug.severity} />
+        </div>
+
+        {/* Title */}
+        <h1
+          style={{
+            fontFamily: 'var(--font-heading)',
+            color: 'var(--color-text)',
+            fontSize: 'clamp(1.4rem, 4vw, 2rem)',
+            marginBottom: '1.25rem',
+          }}
+        >
+          {bug.title}
+        </h1>
+
+        {/* Meta grid */}
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))', gap: '0.6rem', marginBottom: '1.5rem' }}>
+          {[
+            { label: 'Submitted by', value: bug.submittedByName },
+            { label: 'Date', value: formatDate(bug.createdAt) },
+            { label: 'Game Version', value: `v${bug.gameVersion}` },
+            { label: 'Assigned to', value: bug.assignedToName ?? 'Unassigned' },
+          ].map(({ label, value }) => (
+            <div
+              key={label}
+              style={{
+                background: 'var(--color-surface-alt)',
+                border: '1px solid var(--color-border)',
+                padding: '0.55rem 0.7rem',
+              }}
+            >
+              <div style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.62rem', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: '0.2rem' }}>
+                {label}
+              </div>
+              <div style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-dim)', fontSize: '0.8rem' }}>{value}</div>
+            </div>
+          ))}
+        </div>
+
+        {/* Description */}
+        <div style={{ marginBottom: '1.25rem' }}>
+          <div className="section-label" style={{ marginBottom: '0.4rem' }}>Description</div>
+          <div
+            style={{
+              background: 'var(--color-surface-alt)',
+              border: '1px solid var(--color-border)',
+              padding: '0.9rem 1rem',
+              fontFamily: 'var(--font-mono)',
+              color: 'var(--color-text-dim)',
+              fontSize: '0.83rem',
+              lineHeight: 1.8,
+              whiteSpace: 'pre-wrap',
+              borderRadius: '6px',
+            }}
+          >
+            {bug.description}
+          </div>
+        </div>
+
+        {/* Steps to reproduce */}
+        <div style={{ marginBottom: '1.5rem' }}>
+          <div className="section-label" style={{ marginBottom: '0.4rem' }}>Steps to Reproduce</div>
+          <div
+            style={{
+              background: 'var(--color-surface-alt)',
+              border: '1px solid var(--color-border)',
+              padding: '0.9rem 1rem',
+              fontFamily: 'var(--font-mono)',
+              color: 'var(--color-text-dim)',
+              fontSize: '0.83rem',
+              lineHeight: 1.8,
+              whiteSpace: 'pre-wrap',
+              borderRadius: '6px',
+            }}
+          >
+            {bug.stepsToReproduce}
+          </div>
+        </div>
+
+        {/* "I have this too" section */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '1rem',
+            flexWrap: 'wrap',
+            padding: '0.9rem 1rem',
+            background: 'rgba(5,150,105,0.05)',
+            border: '1px solid rgba(5,150,105,0.2)',
+            borderRadius: '6px',
+          }}
+        >
+          {/* Count */}
+          <div style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-green)', fontSize: '0.82rem' }}>
+            <span style={{ fontSize: '1.1rem' }}>{metooCount}</span>{' '}
+            {metooCount === 1 ? 'user has' : 'users have'} this issue
+          </div>
+
+          {/* Button logic */}
+          {!isAuthenticated ? (
+            <div style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.78rem' }}>
+              <Link to="/login">Login</Link> to confirm you have this issue
+            </div>
+          ) : isOwnReport ? (
+            <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.78rem' }}>
+              (this is your report)
+            </span>
+          ) : alreadyVoted ? (
+            <div
+              style={{
+                fontFamily: 'var(--font-mono)',
+                fontSize: '0.78rem',
+                color: 'var(--color-green)',
+                border: '1px solid var(--color-green)',
+                padding: '0.25rem 0.75rem',
+                background: 'rgba(5,150,105,0.08)',
+                cursor: 'default',
+                borderRadius: '4px',
+              }}
+            >
+              &#10003; You reported this too
+            </div>
+          ) : (
+            <button
+              className="btn-terminal"
+              onClick={handleMeToo}
+              style={{ fontSize: '0.78rem', padding: '0.3rem 0.9rem' }}
+            >
+              &#9654; I have this too
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Comments section */}
+      <div style={{ marginTop: '2rem' }}>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.75rem',
+            borderBottom: '2px solid var(--color-border)',
+            paddingBottom: '0.5rem',
+            marginBottom: '1rem',
+          }}
+        >
+          <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-cyan)', fontSize: '0.72rem', letterSpacing: '0.15em', textTransform: 'uppercase' }}>
+            Discussion
+          </span>
+          <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.65rem', border: '1px solid var(--color-border)', padding: '0.05rem 0.4rem' }}>
+            {bugComments.length}
+          </span>
+        </div>
+
+        {/* Comment list */}
+        {bugComments.length === 0 ? (
+          <div style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.8rem', padding: '1rem 0' }}>
+            No comments yet. Be the first to comment.
+          </div>
+        ) : (
+          bugComments.map((comment) => (
+            <CommentItem key={comment.id} comment={comment} />
+          ))
+        )}
+
+        {/* Add comment */}
+        <div style={{ marginTop: '1.25rem' }}>
+          {isAuthenticated ? (
+            <div className="crt-box" style={{ padding: '1.25rem' }}>
+              <div className="section-label" style={{ marginBottom: '0.6rem' }}>Add a Comment</div>
+              <textarea
+                className={`input-terminal${commentError ? ' error' : ''}`}
+                rows={4}
+                placeholder="Write your comment..."
+                value={newComment}
+                onChange={(e) => { setNewComment(e.target.value); setCommentError(''); }}
+                style={{ resize: 'vertical', marginBottom: '0.6rem' }}
+                disabled={submitting}
+                aria-label="Comment text"
+              />
+              {commentError && (
+                <div style={{ color: 'var(--color-red)', fontFamily: 'var(--font-mono)', fontSize: '0.72rem', marginBottom: '0.6rem' }}>
+                  {commentError}
+                </div>
+              )}
+              <button
+                className="btn-terminal"
+                onClick={handleComment}
+                disabled={submitting}
+                style={{ opacity: submitting ? 0.6 : 1 }}
+              >
+                {submitting ? 'Posting...' : '&#9654; Post Comment'}
+              </button>
+            </div>
+          ) : (
+            <div className="crt-box" style={{ padding: '1.25rem', textAlign: 'center' }}>
+              <p style={{ color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)', fontSize: '0.82rem', marginBottom: '0.75rem' }}>
+                You must be logged in to comment.
+              </p>
+              <div style={{ display: 'flex', gap: '0.6rem', justifyContent: 'center' }}>
+                <Link to="/login" className="btn-terminal">Login</Link>
+                <Link to="/register" className="btn-terminal btn-amber">Register</Link>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}