wip: use pinia

app/components/map/clusters.client.vue

@@ -55,7 +55,9 @@ async function clusterClick(e: FeatureCollection) {
     }
     new Popup()
         .setLngLat(coordinates)
-        .setHTML(`This cluster contains ${data.features.length} stops`)
+        .setHTML(
+            `Cluster code : ${feature.properties.code}<br/>This cluster contains ${data.features.length} stops`,
+        )
         .addTo(map.map);
 }
 

app/components/map/map.client.vue

@@ -13,24 +13,6 @@
             />
         </MglMap>
     </ClientOnly>
-
-    <div v-if="routesRequest.data.value" id="lineSelector">
-        <div
-            v-for="route of routesRequest.data.value"
-            :key="route.id"
-            :class="{
-                selected: selectedRoutes.includes(route.id),
-                lineLabel: true,
-            }"
-            :style="{
-                background: '#' + route.color,
-                color: '#' + route.textColor,
-            }"
-            @click="selectRoute(route.id)"
-        >
-            {{ route.type }} : {{ route.shortName }}
-        </div>
-    </div>
 </template>
 
 <script setup lang="ts">
@@ -69,28 +51,6 @@ const transport_lines = computed(() => linesRequest.data.value?.features ?? []);
 
 const routesRequest = await useFetch<Route[]>("/routes.json");
 
-// Selected routes with lines
-const routeWithLines = computed(() => {
-    const shownLines: { route: Route; line: Feature<MultiLineString> }[] = [];
-    for (const routeId of selectedRoutes.value) {
-        const route = routesRequest.data.value?.find((r) => r.id == routeId);
-        if (!route) {
-            continue;
-        }
-        const line = transport_lines.value.find(
-            (f) => routeId == f.properties?.id.replace("_", ":"),
-        );
-        if (!line) {
-            continue;
-        }
-        shownLines.push({
-            route,
-            line,
-        });
-    }
-    return shownLines;
-});
-
 async function selectRoute(routeId: string) {
     if (!map.map) {
         console.error("Map is not yet initialized ! aborting");

app/components/sidebar.vue/container.vue

@@ -0,0 +1,19 @@
+<template>
+    <div v-if="routesRequest.data.value" id="lineSelector">
+        <div
+            v-for="route of routesRequest.data.value"
+            :key="route.id"
+            :class="{
+                selected: selectedRoutes.includes(route.id),
+                lineLabel: true,
+            }"
+            :style="{
+                background: '#' + route.color,
+                color: '#' + route.textColor,
+            }"
+            @click="selectRoute(route.id)"
+        >
+            {{ route.type }} : {{ route.shortName }}
+        </div>
+    </div>
+</template>

app/pages/map.vue

@@ -1,3 +1,6 @@
 <template>
-    <Map />
+    <main>
+        <SidebarContainer />
+        <Map />
+    </main>
 </template>

app/stores/mreso.ts

@@ -0,0 +1,46 @@
+import type { Feature, FeatureCollection, MultiLineString, Point } from "geojson";
+
+export const useMresoStore = defineStore("mresoStore", {
+  state: () => ({
+    routes: [] as Route[],
+    lines: {} as FeatureCollection<MultiLineString>,
+    clusters: {} as FeatureCollection<Point>,
+    stops: {} as FeatureCollection<Point>,
+    selectedRoutesId: [] as string[]
+  }),
+  actions: {
+    async fetch() {
+      // const infos = await $fetch("https://api.nuxt.com/modules/pinia");
+
+      // this.name = infos.name;
+      // this.description = infos.description;
+    },
+  },
+  getters: {
+    routesById(state) {
+      return Object.fromEntries(state.routes.map((r)=>[r.id, r]))
+    },
+    linesById(state) {
+      return Object.fromEntries(state.lines.features.map((l)=>[l.properties!.id, l]))
+    },
+    shownLines() {
+      const shownLines: { route: Route; line: Feature<MultiLineString> }[] = [];
+      for (const routeId of this.selectedRoutesId) {
+        const route = this.routesById[routeId];
+        if (!route) {
+          continue;
+        }
+        const line = this.linesById[routeId.replace(":","_")]
+        if (!line) {
+          continue;
+        }
+        shownLines.push({
+          route,
+          line,
+        });
+      }
+      return shownLines;
+    },
+    }
+  }
+});

nuxt.config.ts

@@ -2,11 +2,11 @@
 export default defineNuxtConfig({
   compatibilityDate: "2025-07-15",
   devtools: { enabled: true },
-  modules: ["@nuxt/eslint", "nuxt-maplibre"],
+  modules: ["@nuxt/eslint", "nuxt-maplibre", "@pinia/nuxt"],
   vite: {
     optimizeDeps: {
       // noDiscovery: true,
       // include: ["maplibre-gl"],
     },
   },
-});
+});

package-lock.json

@@ -8,10 +8,12 @@
       "hasInstallScript": true,
       "dependencies": {
         "@nuxt/eslint": "^1.16.0",
+        "@pinia/nuxt": "^0.11.3",
         "@types/geojson": "^7946.0.16",
         "eslint": "^10.6.0",
         "nuxt": "^4.4.8",
         "nuxt-maplibre": "^1.2.2",
+        "pinia": "^3.0.4",
         "vue": "^3.5.38",
         "vue-router": "^5.1.0"
       }
@@ -3471,6 +3473,21 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/@pinia/nuxt": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.11.3.tgz",
+      "integrity": "sha512-7WVNHpWx4qAEzOlnyrRC88kYrwnlR/PrThWT0XI1dSNyUAXu/KBv9oR37uCgYkZroqP5jn8DfzbkNF3BtKvE9w==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "pinia": "^3.0.4"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -6231,6 +6248,21 @@
       "integrity": "sha512-UaXxwISYJPTr9hwQxMFYZ7kNhSXboMXP+Z3TRX6f1/NyaGPfuNUZOWP1pUEb75B2HjfklIYLVRfWiFZJyC6Npg==",
       "license": "MIT"
     },
+    "node_modules/copy-anything": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-4.0.5.tgz",
+      "integrity": "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==",
+      "license": "MIT",
+      "dependencies": {
+        "is-what": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/core-js-compat": {
       "version": "3.49.0",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.49.0.tgz",
@@ -8485,6 +8517,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-what": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-5.5.0.tgz",
+      "integrity": "sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/is-wsl": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-3.1.1.tgz",
@@ -9324,6 +9368,12 @@
         "node": ">= 18"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "license": "MIT"
+    },
     "node_modules/mlly": {
       "version": "1.8.2",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.2.tgz",
@@ -10574,6 +10624,81 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pinia": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.4.tgz",
+      "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^7.7.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.5.0",
+        "vue": "^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-api": {
+      "version": "7.7.10",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.10.tgz",
+      "integrity": "sha512-KxtEpUOOpFz/qOGRrAwA36QF7DqIA+FXgCYit9mk9wjbaZt0sXOFz81ElOZtKA4HbWHUdwNjZHBFsFFyp5BZiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.10"
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-kit": {
+      "version": "7.7.10",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.10.tgz",
+      "integrity": "sha512-3WNi2Kq4tbpVbmhml7RiphmAt0279oh3fKNeWMQIrltfX8Q91b4i5PL8DtyNKdwmcsGrV4fg+erwWOmD05CLIw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^7.7.10",
+        "birpc": "^2.3.0",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-shared": {
+      "version": "7.7.10",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.10.tgz",
+      "integrity": "sha512-wOPslzB8vTvpxwdaOcR2qAbwmuSP0L+rhpoC6Cf56V3Jip+HWb7PQQXOUPgBNQARpXsbQX/+mvi8kKucmBGRwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
+    "node_modules/pinia/node_modules/birpc": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.9.0.tgz",
+      "integrity": "sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/pinia/node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+      "license": "MIT"
+    },
+    "node_modules/pinia/node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+      "license": "MIT"
+    },
     "node_modules/pkg-types": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.1.tgz",
@@ -11422,6 +11547,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "license": "MIT"
+    },
     "node_modules/rolldown": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.1.4.tgz",
@@ -11882,6 +12013,15 @@
       "integrity": "sha512-CWLcCCH7VLu13TgOH+r8p1O/Znwhqv/dbb6lqWy67G+pT1kHmeD/+V36AVb/vq8QMIQwVShJ6Ssl5FPh0fuSdw==",
       "license": "CC0-1.0"
     },
+    "node_modules/speakingurl": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
+      "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/srvx": {
       "version": "0.11.21",
       "resolved": "https://registry.npmjs.org/srvx/-/srvx-0.11.21.tgz",
@@ -12104,6 +12244,18 @@
         "postcss": "^8.5.15"
       }
     },
+    "node_modules/superjson": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.6.tgz",
+      "integrity": "sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==",
+      "license": "MIT",
+      "dependencies": {
+        "copy-anything": "^4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/supports-color": {
       "version": "10.2.2",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-10.2.2.tgz",

package.json

@@ -11,10 +11,12 @@
   },
   "dependencies": {
     "@nuxt/eslint": "^1.16.0",
+    "@pinia/nuxt": "^0.11.3",
     "@types/geojson": "^7946.0.16",
     "eslint": "^10.6.0",
     "nuxt": "^4.4.8",
     "nuxt-maplibre": "^1.2.2",
+    "pinia": "^3.0.4",
     "vue": "^3.5.38",
     "vue-router": "^5.1.0"
   }