[FEATURE] - Implement Issue Detail view with claiming functionality

[jakharmonika364]

Is your feature request related to a problem?

When a contributor clicks on an issue from the explorer feed, they need a dedicated page to view full issue details (steps to reproduce, code snippets, discussions) and a way to claim the issue or create a git branch directly. Currently, we lack this detail layout and its associated claiming logic.

Describe the Solution

Implement the Issue Detail page at src/app/(app)/issues/[id]/page.tsx based on the new mockup.

Key Functional Requirements:

1. Dynamic Breadcrumbs & Header Actions:
   • Navigation breadcrumbs in the format: Issues / {owner}/{repo} / #{issue_number}.
   • A functional "<- Back to Issues" button that returns the user to the explorer feed.
   • A "View on GitHub" button that deep-links to the original GitHub issue.
2. Issue Metadata Header Card:
   • Displays repository name, issue status tag (OPEN/CLOSED), issue title, author details, opening timestamp, difficulty badge (EASY), and XP reward (e.g. +120 XP).
3. Left Action Sidebar:
   • + New Branch button: Clicking this button should trigger branch creation (either via API integration or opening a branch naming modal) and update the issue status to in-progress.
   • Settings, Documentation, and System Status links.
4. Structured Content Section:
   • Render markdown descriptions containing Description, Steps to Reproduce, and Expected Behavior sections.
   • Code Context Widget: Render file paths (e.g. pkg/runner/cleanup.go) and custom-designed code diff viewers highlighting "Current implementation" (red comments/changes) and "Proposed fix" (green comments/changes).
5. Issue Claiming Widget (Right Sidebar):
   • Display estimated duration (e.g., ~2 Hours) and the XP reward.
   • Claim Issue button: Clicking this button claims the issue for the active session user, updating their dashboard queue and locking the issue from other contributors.
   • Warning text: "By claiming, you commit to submitting a PR within 48 hours."
6. Discussion/Comment Section:
   • List discussion comments with user avatars, username, experience tier badges (e.g., L4), comment timestamps, and body text.

---

Design/UI Specifications:

• Theme: Consistent dark-mode grid layout (#0D0E12), thin border structures (border-zinc-800), glassmorphic panels, and neon green accents (#00FF87).
• Code Highlighting: Syntax highlighting for code preview panels matching standard IDE visual themes.
• Responsiveness: Right-hand claiming widget should float at the top/bottom on smaller viewports or merge into the central stream.

Additional Context

Please reference the attached issue detail mockup for styling guides and icon placements.

[PranavAgarkar07]

/claim

I would like to work on this issue under GSSoC 2026.