From 075359d1dbd6dc53ca82048b4d2533fa59ebf98c Mon Sep 17 00:00:00 2001
From: Richard Bergsma <richard@365devnet.eu>
Date: Sat, 7 Jun 2025 14:05:28 +0200
Subject: [PATCH] Refactor ContributionCalendar component by removing mobile
 scroll indicator

- Eliminated the scroll indicator functionality for mobile users to streamline the component.
- Retained calendar reference for future use while simplifying the rendering logic.
- Adjusted related useEffect hooks to enhance performance and maintainability.
---
 src/components/ContributionCalendar.jsx | 38 ++-----------------------
 1 file changed, 2 insertions(+), 36 deletions(-)

diff --git a/src/components/ContributionCalendar.jsx b/src/components/ContributionCalendar.jsx
index 5f63b96..74bb133 100644
--- a/src/components/ContributionCalendar.jsx
+++ b/src/components/ContributionCalendar.jsx
@@ -95,25 +95,6 @@ export default function ContributionCalendar({ data }) {
   const visibleDays = days.slice(startWeek * 7, 52 * 7);
   const visibleMonthLabels = monthLabels.filter(l => l.week >= startWeek);
 
-  // Scroll indicator for mobile
-  const [showScrollHint, setShowScrollHint] = useState(false);
-  const calendarRef = React.useRef(null);
-  useEffect(() => {
-    if (!isMobile) return;
-    const el = calendarRef.current;
-    if (!el) return;
-    const checkScroll = () => {
-      setShowScrollHint(el.scrollWidth > el.clientWidth && el.scrollLeft < 16);
-    };
-    checkScroll();
-    el.addEventListener('scroll', checkScroll);
-    window.addEventListener('resize', checkScroll);
-    return () => {
-      el.removeEventListener('scroll', checkScroll);
-      window.removeEventListener('resize', checkScroll);
-    };
-  }, [isMobile, expanded]);
-
   // When expanding to full year on mobile, scroll to the right (most recent weeks)
   useEffect(() => {
     if (!isMobile) return;
@@ -130,6 +111,8 @@ export default function ContributionCalendar({ data }) {
   // Get max count for scaling (optional, for more dynamic color)
   // const max = Math.max(...Object.values(data));
 
+  const calendarRef = React.useRef(null);
+
   return (
     <div
       style={{
@@ -154,23 +137,6 @@ export default function ContributionCalendar({ data }) {
       className="contribution-calendar"
       ref={calendarRef}
     >
-      {/* Scroll indicator for mobile */}
-      {isMobile && showScrollHint && (
-        <div style={{
-          position: 'absolute',
-          top: 8,
-          right: 16,
-          zIndex: 10,
-          background: isDark ? 'rgba(30,41,59,0.85)' : 'rgba(255,255,255,0.7)',
-          borderRadius: 8,
-          padding: '2px 8px',
-          fontSize: 12,
-          color: isDark ? '#b6c2d1' : '#555',
-          boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
-        }}>
-          <span role="img" aria-label="scroll">⬅️➡️</span> Scroll
-        </div>
-      )}
       {/* Month labels */}
       <div style={{ display: 'flex', marginBottom: 4, justifyContent: 'center' }}>
         <div style={{ width: 44 }} />