[ListView] scroll to month

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>
+    </>
   );
 };
 

page/src/styles/MonthNavigation.css

@@ -0,0 +1,52 @@
+.month-navigation {
+  display: none; /* Caché par défaut sur mobile */
+}
+
+/* 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 {
+    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;
+  }
+}
+
+/* Réinitialiser le padding sur mobile */
+@media (max-width: 767px) {
+  .listView {
+    padding-right: 1rem;
+  }
+}