Changed closed icon and added one token

public/map/icons/ghost.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+    <circle fill="#fff" cx="128" cy="128" r="128" />
+    <path fill="#45556c" transform="scale(0.6)" transform-origin="center" d="M112,116a12,12,0,1,1-12-12A12,12,0,0,1,112,116Zm44-12a12,12,0,1,0,12,12A12,12,0,0,0,156,104Zm68,16v96a8,8,0,0,1-13.07,6.19l-24.26-19.85L162.4,222.19a8,8,0,0,1-10.13,0L128,202.34l-24.27,19.85a8,8,0,0,1-10.13,0L69.33,202.34,45.07,222.19A8,8,0,0,1,32,216V120a96,96,0,0,1,192,0Zm-16,0a80,80,0,0,0-160,0v79.12l16.27-13.31a8,8,0,0,1,10.13,0l24.27,19.85,24.26-19.85a8,8,0,0,1,10.14,0l24.26,19.85,24.27-19.85a8,8,0,0,1,10.13,0L208,199.12Z"></path>
+</svg>

src/components/map/MapSidebar.vue

@@ -15,10 +15,15 @@ function handleFoodClick() {
 
 <template>
   <aside class="rounded bg-background border border-border shadow-sm">
+    <header class="py-1.5 px-2 text-[.8em] font-medium border-b border-border">
+      <h2>
+        Calques
+      </h2>
+    </header>
     <menu class="first:pt-0.5 last:pb-0.5">
       <li>
         <button
-          class="pl-2 pr-3 py-1.5 text-xs cursor-pointer flex items-start gap-1"
+          class="w-full pl-2 pr-3 py-1.5 text-xs cursor-pointer flex items-start gap-1 hover:bg-foreground/10"
           :class="{
             'text-foreground *:fill-foreground': !activeLayers.food,
             'text-emerald-600 *:fill-emerald-600': activeLayers.food
@@ -40,7 +45,7 @@ function handleFoodClick() {
       </li>
       <li>
         <button
-          class="pl-2 pr-3 py-1.5 text-xs cursor-pointer flex items-start gap-1"
+          class="pl-2 pr-3 py-1.5 text-xs cursor-pointer flex items-start gap-1 hover:bg-foreground/10"
           :class="{
             'text-foreground *:fill-foreground': !activeLayers.tokens,
             'text-emerald-600 *:fill-emerald-600': activeLayers.tokens

src/components/map/ReviewMarker.vue

@@ -5,11 +5,14 @@ import type { PointTuple } from 'leaflet';
 import { computed, ref } from 'vue';
 import { cn } from '@/lib/cn';
 
-defineProps<{
+const props = defineProps<{
   marker: ReviewMarker
 }>()
 
-const iconSize = ref<PointTuple>([38, 38])
+const normalIconSize: PointTuple = [38, 38]
+const tinyIconSize: PointTuple = [28, 28]
+
+const iconSize = ref<PointTuple>(props.marker.closed ? tinyIconSize : normalIconSize)
 const iconAnchor = computed<PointTuple>(() => [iconSize.value[0] / 2, iconSize.value[1]])
 const popupOffset = [0, iconSize.value[0] * -0.66]
 </script>
@@ -33,24 +36,28 @@ const popupOffset = [0, iconSize.value[0] * -0.66]
         { 'grayscale': marker.closed }
       )"
     >
-      <img v-if="marker.type === 'bar'" src="/map/icons/bar.svg" />
+      <img v-if="marker.closed" src="/map/icons/ghost.svg" />
-      <img v-if="marker.type === 'bakery'" src="/map/icons/bakery.svg" />
-      <img v-if="marker.type === 'tea-shop'" src="/map/icons/tea-shop.svg" />
-      <img v-if="marker.type === 'coffee-shop'" src="/map/icons/coffee-shop.svg" />
-      <img v-if="marker.type === 'ice-cream'" src="/map/icons/ice-cream.svg" />
-      <img v-if="marker.type === 'food-truck'" src="/map/icons/truck.svg" />
 
-      <template v-else-if="marker.type === 'restaurant'">
+      <template v-else>
-        <img v-if="marker.food === 'asian'" src="/map/icons/asian.svg" />
+        <img v-if="marker.type === 'bar'" src="/map/icons/bar.svg" />
-        <img v-else-if="marker.food === 'burgers'" src="/map/icons/burgers.svg" />
+        <img v-else-if="marker.type === 'bakery'" src="/map/icons/bakery.svg" />
-        <!-- <img v-else-if="marker.food === 'creperie'" src="/map/icons/creperie.svg" /> -->
+        <img v-else-if="marker.type === 'tea-shop'" src="/map/icons/tea-shop.svg" />
-        <!-- <img v-else-if="marker.food === 'eastern'" src="/map/icons/eastern.svg" /> -->
+        <img v-else-if="marker.type === 'coffee-shop'" src="/map/icons/coffee-shop.svg" />
-        <img v-else-if="marker.food === 'fast-food'" src="/map/icons/fast-food.svg" />
+        <img v-else-if="marker.type === 'ice-cream'" src="/map/icons/ice-cream.svg" />
-        <img v-else-if="marker.food === 'italian'" src="/map/icons/italian.svg" />
+        <img v-else-if="marker.type === 'food-truck'" src="/map/icons/truck.svg" />
-        <img v-else-if="marker.food === 'seafood'" src="/map/icons/seafood.svg" />
+
-        <!-- <img v-else-if="marker.food === 'street-food'" src="/map/icons/street-food.svg" /> -->
+        <template v-else-if="marker.type === 'restaurant'">
-        <img v-else-if="marker.food === 'vegetarian'" src="/map/icons/vegetarian.svg" />
+          <img v-if="marker.food === 'asian'" src="/map/icons/asian.svg" />
-        <img v-else src="/map/icons/restaurant.svg" />
+          <img v-else-if="marker.food === 'burgers'" src="/map/icons/burgers.svg" />
+          <!-- <img v-else-if="marker.food === 'creperie'" src="/map/icons/creperie.svg" /> -->
+          <!-- <img v-else-if="marker.food === 'eastern'" src="/map/icons/eastern.svg" /> -->
+          <img v-else-if="marker.food === 'fast-food'" src="/map/icons/fast-food.svg" />
+          <img v-else-if="marker.food === 'italian'" src="/map/icons/italian.svg" />
+          <img v-else-if="marker.food === 'seafood'" src="/map/icons/seafood.svg" />
+          <!-- <img v-else-if="marker.food === 'street-food'" src="/map/icons/street-food.svg" /> -->
+          <img v-else-if="marker.food === 'vegetarian'" src="/map/icons/vegetarian.svg" />
+          <img v-else src="/map/icons/restaurant.svg" />
+        </template>
       </template>
 
       <div

src/stores/parisTokens.ts

@@ -23,6 +23,10 @@ export const useParisTokensStore = defineStore('paris-tokens', () => {
       coords: [48.01889482103195, -2.1739765065268],
       title: "Brocéliande, la Porte des Secrets - Paimpont"
     },
+    {
+      coords: [48.12445665790851, -1.2151411880015635],
+      title: "Chateau de Vitré"
+    },
     {
       coords: [48.68378516188998, -3.9867849311824264],
       title: "Saint Pol de Léon",