docs: Refactor Collections page and update DocNavigation

[AnkanSaha]

Summary

This PR transforms the static Markdown-based Collections documentation into a React component (CollectionsPage). It also updates the navigation context for the EventEmitter page.

Changes

• Collections Documentation: Converted Documentation/app/docs/collections/page.tsx from raw markdown to a React functional component using Tailwind CSS.
• Content Streamlining: Removed detailed API syntax, parameters, and multiple examples, replacing them with a high-level bulleted list.
• Navigation Update: Added currentPath prop to DocNavigation in eventemitter/page.tsx to ensure correct navigation tracking.
• UI Consistency: Applied standardized Tailwind spacing and styling for section headers and code blocks.

Verification

• Verified that the /docs/collections page renders correctly in both light and dark modes.
• Confirmed that all API methods (Set & Map) are still listed, even if simplified.
• Checked DocNavigation on the EventEmitter page to ensure the path is correctly passed.

[github-actions]

🤖 Review Buddy - General Code Review

👥 Attention: @AnkanSaha

Oho @AnkanSaha! Kya baat hai! Documentation streamline karne ke chakkar mein tune toh pura gyaan hi uda diya? Bhai, 'Streamline' ka matlab content ko readable banana hota hai, use delete karke 'Lite' version banana nahi. 1000 lines ki detailed documentation ko 100 lines ka bawasir bana diya. Users kya ab sapne mein API reference dekhenge?

Tune core concepts, performance tips, aur common patterns sab 'swaha' kar diya. Ye documentation hai ya kisi sasti movie ka trailer? Tune toh wahi baat kardi ki 'Book padhne ki kya zaroorat hai, index dekh lo'.

Code Quality Score: 3/10 (Sirf isliye kyunki code compile ho jayega, par dimaag nahi chalega isse).

---

Generated by Review Buddy | Tone: roast | Language: hinglish

[github-actions]

⚡ Review Buddy - Performance Analysis

👥 Attention: @AnkanSaha

Arre bhai @AnkanSaha, performance ke naam pe tune jo ye 'string interpolation' ka tamasha kiya hai na, dekh ke rona aa raha hai.

1. Hydration ka H:
   Ye jo tu <code> block ke andar backticks use karke poora ka poora BanglaCode snippet daal raha hai, React ko ye poora string client-side pe hydrate karna padega. Documentation site hai bhai, server-side static content hona chahiye tha.
   Ab browser bechara pehle JS download karega, fir ye lambi-lambi strings parse karega. User tab tak chai pee ke aa jayega.

2. Memory Footprint:
   Tune saara data component ke andar hardcode kar diya. Agar ye documentation mdx file mein hoti, toh building time pe optimized ho jati.
   Par nahi, tujhe toh React component banake hero banna hai.
   Isse memory usage badhega kyunki har baar component render hote waqt ye saari static strings allocate honi padengi.

3. DOM Weight:
   Pehle ka markdown structure clean tha. Ab tune div, section, h1, p, ul, li ka jo jungle banaya hai, DOM tree unnecessarily heavy ho raha hai.
   Screen readers aur SEO bots ko tune confuse kar diya hai.

4. CSS Bloat:
   Tailwind ki classes max-w-4xl mx-auto px-6 py-10 space-y-8... har section mein wahi repeat ho raha hai.
   Browser ko layout calculate karne mein aur zyada time lagega.

5. Lack of Virtualization:
   Agar kal ko ye page bada hota (waise tune toh sab delete hi kar diya), toh bina virtualization ke ye page lag marega.

6. No Code Splitting:
   Ye pura code ek hi bundle mein jayega. Agar koi user sirf Set ke baare mein padhna chahta hai, use Map ka bhi poora kachra download karna padega.

7. Re-rendering Issues:
   Jodi (if) is component mein koi state hoti (jo ki nahi hai, thankfully), toh har chhoti change pe ye poora 100-line ka UI re-render hota.

8. String Concatenation in JSX:
   Backticks use karke code blocks banana slow hota hai compared to static text fragments.
   React's reconciler has to work harder to compare these large text nodes.

9. Browser Layout Thrashing:
   Large code blocks inside pre and code tags with overflow-x-auto can cause layout shifts if the container isn't sized properly before the font loads.

10. Font Rendering Performance:
    Monospace fonts for code blocks are usually separate. Loading those along with these heavy strings is a recipe for a slow First Contentful Paint (FCP).

Bhai, thoda dimaag laga. Documentation ko engine ki tarah fast hona chahiye, local train ki tarah nahi jo har station (div) pe ruke.

Recommendation:

• Use MDX for documentation.
• Stop hardcoding large text blocks inside functional components.
• Optimize the build process so static text stays static.
• Tailwind utility classes ko dry rakho, unnecessary nesting mat karo.
• Use a proper syntax highlighter library instead of raw <pre><code> tags for better performance and readability.

---

Generated by Review Buddy | Tone: roast | Language: hinglish

[github-actions]

🔐 Review Buddy - Security Audit

👥 Attention: @AnkanSaha

Security ke naam pe tune toh darwaza khula chhod diya hai, bas 'Welcome' ka board lagana baki hai.

1. XSS (Cross-Site Scripting):

   • Severity: Medium
   • Location: <code> tags using string templates.
   • Scenario: Tune code snippets ko seedha template literals ({ `` }) mein daal diya hai. Agar kal ko ye content kisi database ya user input se aata, toh tera site 'Hacked by Gunda' ban chuka hota. React sanitize karta hai, par developers ko aadat pad jati hai aise hi likhne ki.
   • Remediation: Hamesha proper sanitization library use karo ya fir static content ko separate files mein rakho.

2. Path Traversal / Info Leak:

   • Severity: Low
   • Location: DocNavigation currentPath="/docs/eventemitter".
   • Scenario: Hardcoding paths like this is a bad practice. It exposes the internal structure of your documentation folder. A malicious actor can map your entire site structure easily.
   • Remediation: Use dynamic routing or a config file to manage paths.

3. CORS and Resource Loading:

   • Scenario: Documentation sites often use CDNs for fonts/scripts. If you don't have a strict Content Security Policy (CSP), someone can inject a script that steals session tokens while users are 'learning' about Maps and Sets.
   • Remediation: Implement a strict CSP header.

4. Dependency Vulnerabilities:

   • Scenario: Tune Tailwind aur Next.js ke version update kiye bina ye change kar diya. Purane versions mein prototype pollution ke khatre ho sakte hain.
   • Remediation: Run npm audit before submitting such PRs.

5. Incomplete API Disclosure:

   • Scenario: Security documentation ka part hoti hai. Tune performance tips aur best practices delete kar di. Users ko ye pata hi nahi chalega ki set_clear memory free karne ke liye kitna zaroori hai. Memory leak bhi ek security vulnerability (DoS) ban sakti hai.

Bhai, security sirf code mein nahi, documentation ki completeness mein bhi hoti hai. Adha gyaan hamesha khatarnak hota hai.

---

Generated by Review Buddy | Tone: roast | Language: hinglish

[github-actions]

📊 Review Buddy - Code Quality & Maintainability Analysis

👥 Attention: @AnkanSaha

🎯 Overall Benchmark: 45/100 (Poor)

Arre Ankan, ye code dekh ke lag raha hai tune 'Clean Code' ki kitab ko raddi mein bech diya hai.

1. SOLID Principles ka Murder:

   • Single Responsibility Principle (SRP): Tera ye CollectionsPage component sab kuch kar raha hai. Metadata manage kar raha hai, UI render kar raha hai, code examples hold kar raha hai. Ye documentation component hai ya 'Kitchen Sink'?
   • Open/Closed Principle: Kal ko naya collection add karna hua (jaise Stack ya Queue), toh tujhe firse is badi file mein ghus ke kachra karna padega.

2. DRY (Don't Repeat Yourself):

   • Tune <li><code>...</code></li> ko manually repeat kiya hai. Kya loop chalana bhool gaya?
   • Ek array bana leta setMethods = [...] aur use .map() karke render karta. Par nahi, tujhe toh 'Copy-Paste Engineer' banna hai.

3. Naming Conventions:

   • Component ka naam CollectionsPage thik hai, par internal structure mein koi consistency nahi hai.
   • CSS classes har jagah hardcoded hain. Ek constant file mein styles rakhne se maut aati hai kya?

4. Code Smells:

   • Long Method: Tera functional component 100 lines se bada hota ja raha hai sirf static text ki wajah se.
   • Dead Code: Tune purana markdown uda diya par usme jo examples the, unka logic ab kahin nahi hai. Documentation incomplete hai toh use 'Code Smell' hi kahenge.

5. Technical Debt:

   • Tune detailed API reference uda ke temporary kaam toh kar diya, par ab future mein kisi ko wapas ye documentation likhni padegi. Tune technical debt badha diya hai.

6. Hardcoding Strings:

   • Pura content component ke andar hardcoded hai. Translation (i18n) kaise karega bhai? Bengali user aayega toh kya use English dikhayega?

7. Accessibility (a11y):

   • Section tags toh use kiye hain, par aria-label ya proper semantic hierarchy ka koi dhyan nahi hai.

8. Formatting Issues:

   • Pre-tag ke andar indentation ki aisi-taisi kar di hai. Code padhne mein user ki aankhon se khoon nikal jayega.

9. Consistency:

   • Kahin set_akar ke aage 'Size of set' likha hai, kahin set_delete ke aage 'Remove value'. Sentence structure toh thik kar le mere bhai!

10. Testing:

    • Is component ke liye koi unit test hai? Kya pata tera DocNavigation link galat path pe bhej de?

Bhai, code aise likho ki doosra developer tumhe dua de, gaali nahi. Ye jo tune 'Streamline' kiya hai, ye actually 'Sabotage' hai.

Example of how lazy you are:

// Instead of this:
<li><code>set_add(set, value)</code> - Add unique value.</li>
<li><code>set_has(set, value)</code> - Membership check.</li>

// Do this:
{setAPIs.map(api => (
  <li key={api.name}><code>{api.syntax}</code> - {api.desc}</li>
))}

Par itni mehnat karega toh Ankan kaise kehlayega?

---

Generated by Review Buddy | Tone: roast | Language: hinglish

[github-actions]

💡 Review Buddy - Best Practices & Alternative Suggestions

👥 Attention: @AnkanSaha

Bhai @AnkanSaha, thoda 'Modern Web' ke standards ko follow kar lo, kab tak 2010 wala code likhoge?

1. Loop karke Render Karo (Don't be a Robot)

Current Code:

<li><code>set_srishti(initialArray?)</code> - Create a new Set.</li>
<li><code>set_add(set, value)</code> - Add unique value.</li>

Better Alternative:

const setAPIs = [
  { name: 'set_srishti', syntax: 'set_srishti(initialArray?)', desc: 'Create a new Set.' },
  { name: 'set_add', syntax: 'set_add(set, value)', desc: 'Add unique value.' }
];
// ... inside JSX
{setAPIs.map(api => (
  <li key={api.name}><code>{api.syntax}</code> - {api.desc}</li>
))}

Why: Readable hai, maintainable hai, aur agar kal ko style change karni hai toh ek hi jagah karni hogi.

2. Template Literals vs Static Strings

Current Code:

<code className="language-banglacode">
{`// Set - unique values
dhoro mySet = set_srishti([1, 2, 3, 2, 1]);`}
</code>

Better Alternative:
Use a dedicated CodeBlock component with syntax highlighting support.
Why: Indentation issues nahi honge aur syntax highlighting auto-magically mil jayegi.

3. Prop Types / Interfaces

Current Code:
export default function CollectionsPage() { ... } (No types, no safety)
Better Alternative:
Define a proper Page component structure and maybe use TypeScript if you want to be a professional.

4. Semantic HTML

Current Code:
<div> ke andar sab kuch bhar diya.
Better Alternative:
Use <article> for the main content and <aside> for navigation.
Why: SEO aur accessibility improve hoti hai.

5. Relative Path management

Current Code:
currentPath="/docs/eventemitter"
Better Alternative:
Use usePathname from next/navigation to get the current path dynamically.
Why: Agar file move hui toh link break nahi hoga.

---

Generated by Review Buddy | Tone: roast | Language: hinglish

[github-actions]

⚠️ Review Buddy - Final Recommendation

👥 Attention: @AnkanSaha

Recommendation: REQUEST CHANGES

Changes chahiye, bhai! Abhi approve nahi kar sakte.

Reasoning:

• Significant loss of documentation depth: Removing detailed API references makes the docs less useful for beginners.
• Hardcoded UI: The list of API methods should be rendered from an array/config to follow DRY principles.
• Performance concerns: Storing large code blocks as raw strings in React components is less efficient than MDX.
• Lack of consistency: The level of detail across different documentation pages is now inconsistent.
• Indentation mess: Raw string templates in JSX are prone to formatting issues that make the code snippets hard to read on the UI.

---

📋 Review Checklist for Reviewers:

• Code changes align with the PR description
• No security vulnerabilities introduced
• Performance considerations addressed
• Code follows project conventions
• Tests are adequate (if applicable)
• Documentation updated (if needed)

🎯 Next Steps:

⚠️ Pehle suggestions address karo, phir approve karna.

Generated by Review Buddy | Tone: roast | Language: hinglish