Refactored some other component and cleanup

src/components/BikeClusterLayer.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { BikeParking } from '@/types/Bikes'
+import { LMarkerClusterGroup } from 'vue-leaflet-markercluster'
+import BikeMarker from './BikeMarker.vue'
+
+defineProps<{
+  parkings: BikeParking[]
+  group: 'covered' | 'non-covered' | 'premium'
+  visible: boolean
+  maxClusterRadius: number
+  disableClusteringAtZoom: number
+}>()
+</script>
+
+<template>
+  <LMarkerClusterGroup v-if="parkings.length > 0" :visible :max-cluster-radius :disable-clustering-at-zoom>
+    <BikeMarker v-once v-for="park in parkings" :key="park.id_parc_velo" :park :group />
+  </LMarkerClusterGroup>
+</template>

src/components/BikeMap.vue

@@ -11,11 +11,10 @@ import type { BikeParking } from '@/types/Bikes'
 import { API_BASE_URL, API_LIMIT, MAP_TILELAYER_URL, SpotAccess, SpotType } from '@/utils/const'
 import { useQuery } from '@pinia/colada'
 import { LControlZoom, LMap, LTileLayer } from '@vue-leaflet/vue-leaflet'
-import { LMarkerClusterGroup } from 'vue-leaflet-markercluster'
-import BikeMarker from './BikeMarker.vue'
 import BikeFilters from './BikeFilters.vue'
 import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
+import BikeClusterLayer from './BikeClusterLayer.vue'
 
 async function fetchAllBikeParkings(): Promise<BikeParking[]> {
   const firstPage = await fetch(`${API_BASE_URL}?limit=${API_LIMIT}`).then(r => r.json()) as ApiResponse
@@ -84,23 +83,14 @@ const { filterUncovered, filterCovered, filterKorrigo } = storeToRefs(useMap())
 
         <LTileLayer v-once :url="MAP_TILELAYER_URL" layer-type="base" />
 
-        <!-- Covered parkings: Abrité, Box individuel -->
+        <BikeClusterLayer :parkings="coveredParkings" group="covered" :visible="filterCovered" :max-cluster-radius
-        <LMarkerClusterGroup :visible="filterCovered" v-if="coveredParkings.length > 0" :max-cluster-radius
+          :disable-clustering-at-zoom />
-          :disable-clustering-at-zoom>
-          <BikeMarker v-once v-for="park in coveredParkings" :key="park.id_parc_velo" :park group="covered" />
-        </LMarkerClusterGroup>
 
-        <!-- Non-covered parkings: Non abrité -->
+        <BikeClusterLayer :parkings="nonCoveredParkings" group="non-covered" :visible="filterUncovered"
-        <LMarkerClusterGroup :visible="filterUncovered" v-if="nonCoveredParkings.length > 0" :max-cluster-radius
+          :max-cluster-radius :disable-clustering-at-zoom />
-          :disable-clustering-at-zoom>
-          <BikeMarker v-once v-for="park in nonCoveredParkings" :key="park.id_parc_velo" :park group="non-covered" />
-        </LMarkerClusterGroup>
 
-        <!-- Premium parkings: Abonnement Korrigo -->
+        <BikeClusterLayer :parkings="premiumParkings" group="premium" :visible="filterKorrigo" :max-cluster-radius
-        <LMarkerClusterGroup :visible="filterKorrigo" v-if="premiumParkings.length > 0" :max-cluster-radius
+          :disable-clustering-at-zoom />
-          :disable-clustering-at-zoom>
-          <BikeMarker v-once v-for="park in premiumParkings" :key="park.id_parc_velo" :park group="premium" />
-        </LMarkerClusterGroup>
       </LMap>
     </template>
   </main>

src/components/forms/Checkbox.vue

@@ -10,16 +10,20 @@ const checked = defineModel<boolean>()
 </script>
 
 <template>
-  <label class="flex flex-row gap-1.5 items-center text-sm cursor-pointer">
+  <label class="flex flex-row gap-1.5 items-center text-sm cursor-pointer group">
     <CheckboxRoot v-model="checked"
       class="hover:bg-stone-100 flex size-4 appearance-none items-center justify-center rounded-xs bg-foreground shadow-sm border focus-within:ring-1 cursor-pointer">
       <CheckboxIndicator class="size-full flex items-center justify-center bg-primary text-primary-foreground">
         <PhCheck :size="10" weight="bold" />
       </CheckboxIndicator>
     </CheckboxRoot>
+
     <span class="select-none">
-      <slot />
+      <span class="group-hover:underline underline-offset-2">
-      <small v-if="count">({{ count }})</small>
+        <slot />
+      </span>
+
+      <small v-if="count" class="ml-1 opacity-50">({{ count }})</small>
     </span>
   </label>
 </template>

src/pages/Home.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Map from '@/components/Map.vue';
+import BikeMap from '@/components/BikeMap.vue';
 </script>
 
 <template>
@@ -10,6 +10,6 @@ import Map from '@/components/Map.vue';
   </header>
 
   <Suspense>
-    <Map />
+    <BikeMap />
   </Suspense>
 </template>