Sync list to map (#42)

app/[lang]/tournois/SearchBar.tsx

@@ -8,7 +8,7 @@ const SearchBar = () => {
   const [searchString, setSearchString] = useAtom(searchStringAtom);
 
   return (
-    <div className="bg-white p-3 dark:bg-gray-800">
+    <div className="bg-white dark:bg-gray-800">
       <label htmlFor="table-search" className="sr-only">
         {t("searchLabel")}
       </label>

app/[lang]/tournois/TournamentMap.tsx

@@ -7,18 +7,28 @@ import {
   TileLayer,
   LayersControl,
   LayerGroup,
+  useMapEvent,
 } from "react-leaflet";
-import { useAtomValue } from "jotai";
+import { useAtomValue, useSetAtom } from "jotai";
 
 import "leaflet/dist/leaflet.css";
 import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
 import "leaflet-defaulticon-compatibility";
 
-import { tournamentsAtom } from "@/app/atoms";
+import { tournamentsAtom, mapBoundsAtom } from "@/app/atoms";
 
 import Legend from "./Legend";
 import { TournamentMarker } from "./TournamentMarker";
 
+const MapEvents = () => {
+  const setMapBounds = useSetAtom(mapBoundsAtom);
+  const map = useMapEvent("moveend", () => {
+    setMapBounds(map.getBounds());
+  });
+
+  return null;
+};
+
 export default function TournamentMap() {
   const tournaments = useAtomValue(tournamentsAtom);
   const center: LatLngLiteral = { lat: 47.0844, lng: 2.3964 };
@@ -68,6 +78,7 @@ export default function TournamentMap() {
           height: "100%",
         }}
       >
+        <MapEvents />
         <TileLayer
           attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

app/[lang]/tournois/TournamentTable.tsx

@@ -1,11 +1,12 @@
 "use client";
 
 import { useTranslations } from "next-intl";
-import { useAtomValue, useSetAtom } from "jotai";
+import { useAtomValue, useSetAtom, useAtom } from "jotai";
 import { twMerge } from "tailwind-merge";
 
 import {
   filteredTournamentsAtom,
+  syncVisibleAtom,
   hoveredMapTournamentIdAtom,
   debouncedHoveredMapTournamentIdAtom,
   debouncedHoveredListTournamentIdAtom,
@@ -19,6 +20,7 @@ export default function TournamentTable() {
   const t = useTranslations("Tournaments");
 
   const filteredTournaments = useAtomValue(filteredTournamentsAtom);
+  const [syncVisible, setSyncVisible] = useAtom(syncVisibleAtom);
   const hoveredMapTournamentId = useAtomValue(hoveredMapTournamentIdAtom);
   const debouncedHoveredMapTournamentId = useAtomValue(
     debouncedHoveredMapTournamentIdAtom
@@ -42,12 +44,22 @@ export default function TournamentTable() {
       id="tournament-table"
       data-test="tournament-table-div"
     >
-      <div className="z-10 flex">
+      <div className="z-10 flex w-full flex-wrap items-center justify-between gap-3 p-3">
         <SearchBar />
-        <div>
-          <ScrollToTopButton />
+        <div className="text-gray-900 dark:text-white">
+          <label>
+            <input
+              type="checkbox"
+              checked={syncVisible}
+              onChange={() => setSyncVisible(!syncVisible)}
+            />{" "}
+            {t("syncWithMapCheckbox")}
+          </label>
         </div>
       </div>
+
+      <ScrollToTopButton />
+
       <table
         className="relative w-full table-fixed text-center text-xs"
         data-test="tournament-table"