From 58da0a165a29d44b348289d13b0c9d754ff46842 Mon Sep 17 00:00:00 2001
From: Aurelie Vache <scraly@gmail.com>
Date: Thu, 23 Oct 2025 16:26:41 +0000
Subject: [PATCH 1/2] feat: add in ListView scroll to month

---
 page/src/components/ListView/ListView.jsx | 31 +++++++++++++++---
 page/src/styles/MonthNavigation.css       | 38 +++++++++++++++++++++++
 2 files changed, 65 insertions(+), 4 deletions(-)
 create mode 100644 page/src/styles/MonthNavigation.css

diff --git a/page/src/components/ListView/ListView.jsx b/page/src/components/ListView/ListView.jsx
index 55cf4d8a69..1cdd801a20 100644
--- a/page/src/components/ListView/ListView.jsx
+++ b/page/src/components/ListView/ListView.jsx
@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import 'styles/ListView.css';
+import 'styles/MonthNavigation.css';
 
 import {useYearEvents} from 'app.hooks';
 import { useFilters } from 'app.hooks';
@@ -63,12 +64,33 @@ const ListView = () => {
   });
 
   const [editEvent, setEditEvent] = React.useState(null);
+  const [activeMonth, setActiveMonth] = React.useState(null);
+  const monthRefs = useRef({});
+
+  const scrollToMonth = (month) => {
+    if (monthRefs.current[month]) {
+      monthRefs.current[month].scrollIntoView({ behavior: 'smooth' });
+      setActiveMonth(month);
+    }
+  };
 
   return (
-    <div className="listView">
+    <>
+      <div className="month-navigation">
+        {monthOrder.map(month => (
+          <button
+            key={`nav-${month}`}
+            className={`month-button ${activeMonth === month ? 'active' : ''}`}
+            onClick={() => scrollToMonth(month)}
+          >
+            {month}
+          </button>
+        ))}
+      </div>
+      <div className="listView">
       {monthOrder.map(month => (
         <React.Fragment key={month}>
-          <h1>{month}{filters.sort === 'cfp' ? ' CFP Deadlines' : ' Events'}:</h1>
+          <h1 ref={el => monthRefs.current[month] = el}>{month}{filters.sort === 'cfp' ? ' CFP Deadlines' : ' Events'}:</h1>
           {eventsByMonth[month].map((e, i) => {
             const eventId = `${e.name}-${e.date[0]}`;
             const isFav = isFavorite(eventId);
@@ -105,7 +127,8 @@ const ListView = () => {
       {editEvent && (
         <EditEventInlineForm event={editEvent} onClose={() => setEditEvent(null)} />
       )}
-    </div>
+      </div>
+    </>
   );
 };
 
diff --git a/page/src/styles/MonthNavigation.css b/page/src/styles/MonthNavigation.css
new file mode 100644
index 0000000000..6919b4403f
--- /dev/null
+++ b/page/src/styles/MonthNavigation.css
@@ -0,0 +1,38 @@
+.month-navigation {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  background: transparent;
+  position: fixed;
+  right: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+}
+
+.month-button {
+  padding: 0.25rem 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: #6b7280;
+  transition: all 0.2s;
+  text-align: right;
+  position: relative;
+}
+
+.month-button:hover {
+  color: #111827;
+}
+
+.month-button.active {
+  color: #3b82f6;
+  font-weight: 500;
+}
+
+/* Ajuster la largeur du contenu principal pour laisser de la place pour la navigation */
+.listView {
+  padding-right: 8rem;
+}
\ No newline at end of file

From 014727d0f9d3d956eda11bb0106e14b89cf43614 Mon Sep 17 00:00:00 2001
From: Aurelie Vache <scraly@gmail.com>
Date: Thu, 23 Oct 2025 16:31:48 +0000
Subject: [PATCH 2/2] feat: don't display month-navigation for mobile screen

---
 page/src/styles/MonthNavigation.css | 74 +++++++++++++++++------------
 1 file changed, 44 insertions(+), 30 deletions(-)

diff --git a/page/src/styles/MonthNavigation.css b/page/src/styles/MonthNavigation.css
index 6919b4403f..95ede8fb0f 100644
--- a/page/src/styles/MonthNavigation.css
+++ b/page/src/styles/MonthNavigation.css
@@ -1,38 +1,52 @@
 .month-navigation {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 1rem;
-  background: transparent;
-  position: fixed;
-  right: 1rem;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 10;
+  display: none; /* Caché par défaut sur mobile */
 }
 
-.month-button {
-  padding: 0.25rem 0;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  font-size: 0.875rem;
-  color: #6b7280;
-  transition: all 0.2s;
-  text-align: right;
-  position: relative;
-}
+/* Afficher la navigation uniquement sur les écrans larges (> 768px) */
+@media (min-width: 768px) {
+  .month-navigation {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 1rem;
+    background: transparent;
+    position: fixed;
+    right: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 10;
+  }
 
-.month-button:hover {
-  color: #111827;
-}
+  .month-button {
+    padding: 0.25rem 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-size: 0.875rem;
+    color: #6b7280;
+    transition: all 0.2s;
+    text-align: right;
+    position: relative;
+  }
+
+  .month-button:hover {
+    color: #111827;
+  }
+
+  .month-button.active {
+    color: #3b82f6;
+    font-weight: 500;
+  }
 
-.month-button.active {
-  color: #3b82f6;
-  font-weight: 500;
+  /* Ajuster la largeur du contenu principal pour laisser de la place pour la navigation */
+  .listView {
+    padding-right: 8rem;
+  }
 }
 
-/* Ajuster la largeur du contenu principal pour laisser de la place pour la navigation */
-.listView {
-  padding-right: 8rem;
+/* Réinitialiser le padding sur mobile */
+@media (max-width: 767px) {
+  .listView {
+    padding-right: 1rem;
+  }
 }
\ No newline at end of file