fix: resolve merge conflict, eliminate hydration warnings, fix high-D…

[riyapetle]

Overview

This PR addresses critical build errors, React hydration warnings from third-party script interference, and visual rendering quality issues on high-DPI displays. All changes are minimal, focused, and maintain backward compatibility.

Changes Made

1. Fixed Supabase Merge Conflict (src/lib/supabase.ts)

• Issue: Unresolved merge conflict with duplicate function definitions and git branch markers ("fix-settings-api-500" and "main")
• Impact: Prevented app from building/running
• Solution: Removed duplicate getUserByUsername() and updateUserPublicFlag() function definitions, kept single clean implementation
• Verification: Build now completes successfully

2. Eliminated React Hydration Warnings (5 components)

• Root Cause: Third-party script (likely form processing library) injecting fdprocessedid attribute on buttons at runtime, causing server render ≠ client render mismatch
• Solution: Added suppressHydrationWarning attribute to affected button elements
• Components Fixed:
  • src/components/KeyboardShortcuts.tsx - collapse button
  • src/components/NotificationBell.tsx - notification bell button
  • src/components/ExportButton.tsx - CSV and PDF export buttons (2 buttons)
  • src/components/WeeklySummaryCard.tsx - collapse toggle button
  • src/components/SignOutButton.tsx - sign-out button
• Impact: Console no longer shows "Extra attributes from server: fdprocessedid" warnings
• Pattern Applied: <button suppressHydrationWarning {...otherProps} />

3. Fixed Missing React Key Props (src/components/PRReviewTrendChart.tsx)

• Issue: Recharts custom dot component rendering SVG circles without key prop
• Impact: React missing key warning in console
• Solution: Added key={dot-${props.index}} to both null and valid data circle elements for proper list reconciliation
• Why: React requires keys to identify which items have changed when rendering lists

4. Refactored Language Breakdown Indicators for High-DPI Displays (src/components/LanguageBreakdown.tsx)

• Issue: Language color dots used fixed-pixel CSS (h-3 w-3 = 12px) that doesn't scale with device pixel ratio, appearing blurry on Retina/2x/3x DPI displays
• Root Cause: CSS pixels don't automatically crisp up on high-DPI screens; vector graphics needed
• Solution:
  • Created new LanguageDot component that renders SVG: <svg viewBox="0 0 8 8"><circle cx="4" cy="4" r="4" fill={color} /></svg>
  • Replaced all fixed-pixel CSS dots with this SVG component
  • Old implementation: <span className="h-3 w-3 rounded-full" style={{backgroundColor}} />
  • New implementation: <LanguageDot color={color} label={label} />
• Benefits:
  • SVG automatically scales infinitely without quality loss
  • Crisp rendering at any DPI (1x, 2x Retina, 3x)
  • Maintains consistent visual style across all devices
• Verification: Language indicators now render sharp on high-DPI/Retina displays

Files Modified

1. src/lib/supabase.ts - Merge conflict resolution
2. src/components/KeyboardShortcuts.tsx - Hydration warning fix
3. src/components/NotificationBell.tsx - Hydration warning fix
4. src/components/ExportButton.tsx - Hydration warning fix (2 buttons)
5. src/components/WeeklySummaryCard.tsx - Hydration warning fix
6. src/components/SignOutButton.tsx - Hydration warning fix
7. src/components/PRReviewTrendChart.tsx - Missing key prop fix
8. src/components/LanguageBreakdown.tsx - High-DPI SVG refactor

Testing Checklist

• Build completes without errors
• Dashboard loads without React hydration warnings
• Console shows no "Extra attributes from server" messages
• Language Breakdown widget displays with crisp indicator dots on Retina displays
• Export buttons (CSV/PDF) functional
• Keyboard shortcuts modal functional
• Notification bell displays correctly
• Sign-out button functional
• PR Review Trend chart renders without key warnings

Browser Console Output After Fix

✅ Clean console output (expected messages only):

• React DevTools suggestion (informational)
• Vercel Analytics debug messages
• Expected API 404 for /api/metrics/coding-time (WakaTime not configured - not a bug)
• Expected API 500 for notifications/github-accounts (incomplete Supabase setup - not a bug)
• NO hydration warnings ✓
• NO missing key warnings ✓

[vercel]

Someone is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

• level:beginner — 20 pts
• level:intermediate — 35 pts
• level:advanced — 55 pts
• level:critical — 80 pts

Quality (optional):

• quality:clean — ×1.2 multiplier
• quality:exceptional — ×1.5 multiplier

Validation (required to score):

• gssoc:approved — counts for points
• gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

[github-actions]

Thanks for your first PR on DevTrack! 🎉

A maintainer will review it within 48 hours. While you wait:

• Make sure CI is passing (type-check + lint)
• Double-check the PR description is filled out and the issue is linked
• Feel free to ask questions in Discussions if you need help

If you find DevTrack useful, a ⭐ star on the repo is always appreciated — it helps the project grow and attract more contributors!

[Priyanshu-byte-coder]

Merge conflict with main. Rebase to unblock:

git fetch origin && git rebase origin/main
git push --force-with-lease

[Priyanshu-byte-coder]

This PR has merge conflicts with main after recent merges. Please rebase:

git fetch upstream
git rebase upstream/main

Resolve conflicts and force-push.