Merge pull request #41 from T-DAT-902-Homepedia/feat/carte-basemap-picker

feat(webapp): basemap picker, landing copy fixes and tricolor brand accent

Author: glopez-dev

docker/dev/Dockerfile

@@ -22,5 +22,11 @@ WORKDIR /app
 
 EXPOSE 5173
 
-# Symlink node_modules dans /app après le bind mount, puis lancer vite
-CMD ["sh", "-c", "ln -sf /deps/node_modules /app/node_modules && npm run dev -- --host 0.0.0.0"]
+# Symlink node_modules dans /app après le bind mount, puis lancer vite.
+# UNIQUEMENT si absent : quand l'hôte fournit déjà node_modules via le bind
+# mount, `ln -sf` créait node_modules/node_modules -> /deps/node_modules, que
+# la résolution Node (remontée de dossiers) emprunte depuis l'intérieur de
+# node_modules — react-dom résolvait react dans /deps pendant que l'app le
+# résolvait dans /app : deux copies de React dans le bundle de l'optimiseur
+# Vite, « Invalid hook call » sur toutes les pages au premier re-bundle.
+CMD ["sh", "-c", "[ -e /app/node_modules ] || ln -s /deps/node_modules /app/node_modules; npm run dev -- --host 0.0.0.0"]

src/components/france-outline.tsx

@@ -12,17 +12,19 @@ const FRANCE_PATH =
 // Positions viewBox des grandes villes, mêmes projection et normalisation que
 // FRANCE_PATH. Délais irréguliers pour éviter un clignotement synchrone.
 // pop = population communale (INSEE, ordre de grandeur 2021).
+// `red` : accent tricolore de marque sur 3 points répartis sans motif
+// géographique lisible (Paris, le plus gros, garde la couleur dominante).
 const CITY_DOTS = [
   { name: "Paris", x: 498, y: 226, delay: "0s", pop: 2_133_000 },
   { name: "Lyon", x: 671, y: 539, delay: "1.3s", pop: 522_000 },
   { name: "Marseille", x: 708, y: 789, delay: "0.5s", pop: 870_000 },
   { name: "Toulouse", x: 435, y: 757, delay: "1.9s", pop: 504_000 },
-  { name: "Bordeaux", x: 294, y: 633, delay: "0.9s", pop: 260_000 },
+  { name: "Bordeaux", x: 294, y: 633, delay: "0.9s", pop: 260_000, red: true },
   { name: "Nantes", x: 226, y: 392, delay: "2.3s", pop: 320_000 },
-  { name: "Lille", x: 547, y: 47, delay: "1.6s", pop: 236_000 },
+  { name: "Lille", x: 547, y: 47, delay: "1.6s", pop: 236_000, red: true },
   { name: "Strasbourg", x: 874, y: 255, delay: "0.7s", pop: 290_000 },
   { name: "Rennes", x: 217, y: 301, delay: "1.1s", pop: 225_000 },
-  { name: "Nice", x: 840, y: 747, delay: "2.6s", pop: 348_000 },
+  { name: "Nice", x: 840, y: 747, delay: "2.6s", pop: 348_000, red: true },
   { name: "Ajaccio", x: 943, y: 928, delay: "2.1s", pop: 73_000 },
 ]
 
@@ -53,7 +55,7 @@ export function FranceOutline(props: SVGProps<SVGSVGElement>) {
         vectorEffect="non-scaling-stroke"
       />
       {CITY_DOTS.map((city) => (
-        <g key={city.name}>
+        <g key={city.name} className={city.red ? "text-brand-red" : undefined}>
           <circle
             cx={city.x}
             cy={city.y}

src/components/map-top-bar.tsx

@@ -3,6 +3,7 @@ import { Link, useLocation, useNavigate } from "react-router-dom"
 
 import { SearchCommand, SearchTrigger } from "@/components/search-command"
 import { ThemeToggle } from "@/components/theme-toggle"
+import { TricolorMark } from "@/components/tricolor-mark"
 import { useSearchShortcut } from "@/hooks/useSearchShortcut"
 import { NAV } from "@/lib/nav"
 import type { SearchEntry } from "@/lib/search"
@@ -33,9 +34,12 @@ export function MapTopBar({
         <div className="flex items-center gap-2 px-3 py-2 sm:gap-4 sm:px-4">
           <Link
             to="/"
-            className="font-display text-base font-bold tracking-tight sm:text-lg"
+            className="inline-flex items-center gap-1.5 font-display text-base font-bold tracking-tight sm:text-lg"
           >
-            Homepedia<span className="text-accent">.</span>
+            <TricolorMark />
+            <span>
+              Homepedia<span className="text-accent">.</span>
+            </span>
           </Link>
           <nav className="flex items-center gap-0.5 overflow-x-auto text-sm">
             {NAV.map((item) => (

src/components/page-shell.tsx

@@ -4,6 +4,7 @@ import { Menu, X } from "lucide-react"
 
 import { SearchCommand, SearchTrigger } from "@/components/search-command"
 import { ThemeToggle } from "@/components/theme-toggle"
+import { TricolorMark } from "@/components/tricolor-mark"
 import { Button } from "@/components/ui/button"
 import { useSearchShortcut } from "@/hooks/useSearchShortcut"
 import { NAV } from "@/lib/nav"
@@ -59,8 +60,14 @@ export function PageShell({
           >
             {menuOpen ? <X className="size-4" /> : <Menu className="size-4" />}
           </Button>
-          <Link to="/" className="font-display text-lg font-bold tracking-tight">
-            Homepedia<span className="text-accent">.</span>
+          <Link
+            to="/"
+            className="inline-flex items-center gap-2 font-display text-lg font-bold tracking-tight"
+          >
+            <TricolorMark />
+            <span>
+              Homepedia<span className="text-accent">.</span>
+            </span>
           </Link>
           <nav className="hidden items-center gap-1 text-sm md:flex">
             {NAV.map((item) => navLink(item))}

src/components/score-sidebar.tsx

@@ -8,6 +8,7 @@ import {
   DivergingLegend,
   QuantileLegend,
 } from "@/components/map-legend"
+import { BASEMAP_KEYS, BASEMAP_LABELS, type Basemap } from "@/lib/basemaps"
 import { cn } from "@/lib/utils"
 import {
   DIMENSIONS,
@@ -18,15 +19,6 @@ import {
 } from "@/lib/score"
 import type { makeBivariateScale, MetricScale } from "@/lib/scoreColors"
 
-export type Basemap = "clair" | "sombre" | "satellite" | "couleur"
-export const BASEMAP_LABELS: Record<Basemap, string> = {
-  clair: "Clair",
-  sombre: "Sombre",
-  satellite: "Satellite",
-  couleur: "Couleur",
-}
-const BASEMAP_KEYS = Object.keys(BASEMAP_LABELS) as Basemap[]
-
 export type MapView = { center: [number, number]; zoom: number }
 
 // Points de recentrage : France métropolitaine + les 5 DROM (éloignés, non

src/components/tricolor-mark.tsx

@@ -0,0 +1,24 @@
+import { cn } from "@/lib/utils"
+
+/**
+ * Bloc tricolore de la marque : trois bandes verticales bleu/blanc/rouge
+ * cerclées d'une hairline (sans elle, la bande blanche disparaît sur le fond
+ * paper). Dimensionné en em : suit le corps du texte parent, pas de prop de
+ * taille. Purement décoratif — le rouge est ici un accent de marque, jamais
+ * un état ni une donnée (cf. doctrine --brand-red, index.css).
+ */
+export function TricolorMark({ className }: { className?: string }) {
+  return (
+    <span
+      aria-hidden
+      className={cn(
+        "inline-flex shrink-0 self-center overflow-hidden rounded-[0.15em] ring-1 ring-border",
+        className,
+      )}
+    >
+      <span className="h-[0.65em] w-[0.28em] bg-accent" />
+      <span className="h-[0.65em] w-[0.28em] bg-white dark:bg-paper" />
+      <span className="h-[0.65em] w-[0.28em] bg-brand-red" />
+    </span>
+  )
+}

src/index.css

@@ -32,6 +32,12 @@
     --destructive: oklch(0.62 0.235 25);
     --destructive-foreground: oklch(1 0 0);
 
+    /* Rouge tricolore : accent de MARQUE décoratif (logo, hero landing) —
+       jamais un état interactif ni une donnée (le rouge YlOrRd des cartes
+       signifie « cher », --destructive signifie erreur/baisse). Carmin
+       (teinte 20) pour rester distinct du rouge erreur (teinte 25). */
+    --brand-red: oklch(0.50 0.21 20);
+
     --border: oklch(0.91 0.008 80);
     --input: oklch(0.91 0.008 80);
     --ring: oklch(0.47 0.245 265);
@@ -77,6 +83,9 @@
     --destructive: oklch(0.67 0.22 25);
     --destructive-foreground: oklch(1 0 0);
 
+    /* Éclairci pour rester lisible (AA) sur le bleu nuit. */
+    --brand-red: oklch(0.63 0.20 18);
+
     --border: oklch(1 0 0 / 10%);
     --input: oklch(1 0 0 / 15%);
     --ring: oklch(0.47 0.245 265);
@@ -142,6 +151,7 @@
     --color-ink: oklch(0.10 0.015 265);
     --color-paper: oklch(0.966 0.008 80);
     --color-blue: oklch(0.47 0.245 265);
+    --color-brand-red: var(--brand-red);
     --color-blue-light: oklch(0.96 0.022 265);
     --color-green: oklch(0.74 0.16 165);
     --color-warm: oklch(0.73 0.165 55);

src/lib/basemaps.ts

@@ -0,0 +1,83 @@
+// Source UNIQUE des fonds de carte : /map et /carte proposent les mêmes fonds
+// avec les mêmes clés (le paramètre d'URL `fond=` circule entre les deux pages
+// via les liens croisés).
+//
+// - Vecteur Carto (schéma OpenMapTiles) : clair (Positron), sombre (Dark
+//   Matter), couleur (Voyager) — labels repassés en FR par syncBasemapStyle.
+// - Satellite : imagerie aérienne Esri (raster, sans clé ni labels).
+
+import type { Map as MaplibreMap, StyleSpecification } from "maplibre-gl"
+
+export type Basemap = "clair" | "sombre" | "satellite" | "couleur"
+
+export const BASEMAP_LABELS: Record<Basemap, string> = {
+  clair: "Clair",
+  sombre: "Sombre",
+  satellite: "Satellite",
+  couleur: "Couleur",
+}
+
+export const BASEMAP_KEYS = Object.keys(BASEMAP_LABELS) as Basemap[]
+
+export const isBasemap = (v: string | null): v is Basemap =>
+  v != null && v in BASEMAP_LABELS
+
+// Imagerie aérienne Esri (raster, sans clé) pour le fond « Satellite ».
+const SATELLITE_STYLE: StyleSpecification = {
+  version: 8,
+  glyphs:
+    "https://basemaps.cartocdn.com/gl/positron-gl-style/{fontstack}/{range}.pbf",
+  sources: {
+    "esri-imagery": {
+      type: "raster",
+      tiles: [
+        "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+      ],
+      tileSize: 256,
+      attribution:
+        "Tuiles © Esri — Source : Esri, Maxar, Earthstar Geographics, GIS User Community",
+    },
+  },
+  layers: [{ id: "esri-imagery", type: "raster", source: "esri-imagery" }],
+}
+
+export const BASEMAP_STYLES: Record<Basemap, string | StyleSpecification> = {
+  clair: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
+  sombre: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
+  couleur: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json",
+  satellite: SATELLITE_STYLE,
+}
+
+// Libellés en français : on remplace le champ texte des calques de symboles par
+// le nom FR de la tuile vectorielle (fallback latin puis nom par défaut).
+const FR_LABEL = [
+  "coalesce",
+  ["get", "name:fr"],
+  ["get", "name:latin"],
+  ["get", "name"],
+]
+
+/** À appeler sur chaque styledata — chargement initial OU changement de fond :
+ *  repasse les labels en français et renvoie l'id du 1er calque de symboles
+ *  (le beforeId sous lequel glisser les couches deck pour garder les labels
+ *  au-dessus). Le satellite (raster, sans symbole) court-circuite : pas de FR,
+ *  renvoie undefined (couches au-dessus du fond). */
+export function syncBasemapStyle(map: MaplibreMap): string | undefined {
+  const styleLayers = map.getStyle()?.layers ?? []
+  const symbols = styleLayers.filter((l) => l.type === "symbol")
+  if (symbols.length === 0) return undefined
+  const fr = JSON.stringify(FR_LABEL)
+  // Idempotent : on ne réécrit que si un libellé n'est pas déjà en FR, sinon
+  // nos setLayoutProperty re-déclencheraient styledata en boucle.
+  const needsFr = symbols.some((l) => {
+    const tf = map.getLayoutProperty(l.id, "text-field")
+    return tf != null && JSON.stringify(tf) !== fr
+  })
+  if (needsFr) {
+    for (const layer of symbols) {
+      if (map.getLayoutProperty(layer.id, "text-field") == null) continue
+      map.setLayoutProperty(layer.id, "text-field", FR_LABEL)
+    }
+  }
+  return symbols[0]?.id
+}

src/pages/dvf-map.tsx

@@ -11,6 +11,14 @@ import { Link, useNavigate, useSearchParams } from "react-router-dom"
 import { Button } from "@/components/ui/button"
 import { DeckOverlay } from "@/components/deck-overlay"
 import { MapTopBar } from "@/components/map-top-bar"
+import {
+  BASEMAP_KEYS,
+  BASEMAP_LABELS,
+  BASEMAP_STYLES,
+  isBasemap,
+  syncBasemapStyle,
+  type Basemap,
+} from "@/lib/basemaps"
 import { useChoropleth } from "@/hooks/useChoropleth"
 import {
   HIGH_ZOOM_THRESHOLD,
@@ -72,7 +80,7 @@ const POINTS_ZOOM = 11
 const HEAT_PRICE_DOMAIN: [number, number] = [1500, 6000]
 
 // --- État dans l'URL (partage/refresh, audit N4) ----------------------------
-// v=lat,lng,zoom ; repr= ; type= ; poids= ; iso=1
+// v=lat,lng,zoom ; repr= ; type= ; poids= ; iso=1 ; fond= (commun avec /map)
 
 function parseViewParam(v: string | null): MapViewState | null {
   if (!v) return null
@@ -119,6 +127,10 @@ export default function DvfMap() {
     params.get("poids") === "ventes" ? "ventes" : "prix",
   )
   const [contours, setContours] = useState(() => params.get("iso") === "1")
+  const [basemap, setBasemap] = useState<Basemap>(() => {
+    const f = params.get("fond")
+    return isBasemap(f) ? f : "clair"
+  })
 
   // Filtres du store initialisés depuis l'URL (une fois, au montage).
   useEffect(() => {
@@ -151,8 +163,9 @@ export default function DvfMap() {
       if (heatWeight !== "prix") next.set("poids", heatWeight)
       if (contours) next.set("iso", "1")
     }
+    if (basemap !== "clair") next.set("fond", basemap)
     setParams(next, { replace: true })
-  }, [debouncedView, representation, typeLocal, heatWeight, contours, setParams])
+  }, [debouncedView, representation, typeLocal, heatWeight, contours, basemap, setParams])
 
   // Dézoom manuel : le fil d'Ariane se tronque au niveau réellement visible.
   useEffect(() => {
@@ -452,12 +465,16 @@ export default function DvfMap() {
     fillBeforeId,
   ])
 
-  // Au (re)chargement du style, mémorise le 1er calque de symboles : c'est le
-  // beforeId sous lequel glisser les couches deck (labels au-dessus). Idempotent
-  // (même id -> pas de re-render), style Positron unique sur cette page.
-  const onStyleData = (map: MaplibreMap) => {
-    const symbol = (map.getStyle()?.layers ?? []).find((l) => l.type === "symbol")
-    setFillBeforeId(symbol?.id)
+  // À chaque (re)chargement de style — initial OU changement de fond — labels FR
+  // + mémorisation du 1er calque de symboles (beforeId), cf. lib/basemaps.
+  const onStyleData = (map: MaplibreMap) => setFillBeforeId(syncBasemapStyle(map))
+
+  // Changement de fond : détacher le beforeId dans le même commit — l'ancien id
+  // n'existe pas (encore) dans le style suivant, deck ré-ajouterait les couches
+  // sous un calque fantôme ; le styledata du nouveau style le re-fournit.
+  const changeBasemap = (b: Basemap) => {
+    setFillBeforeId(undefined)
+    setBasemap(b)
   }
 
   // Remplace le getCursor de DeckGL : pointer au survol d'une entité pickable,
@@ -476,7 +493,9 @@ export default function DvfMap() {
       <MapTopBar
         extra={
           <Button variant="ghost" size="sm" asChild className="max-md:hidden">
-            <Link to={`/map?v=${viewParam(debouncedView)}`}>
+            <Link
+              to={`/map?v=${viewParam(debouncedView)}${basemap !== "clair" ? `&fond=${basemap}` : ""}`}
+            >
               Voir en qualité de vie
             </Link>
           </Button>
@@ -485,7 +504,10 @@ export default function DvfMap() {
       <Map
         ref={mapRef}
         initialViewState={initialView}
-        mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
+        mapStyle={BASEMAP_STYLES[basemap]}
+        // Rechargement complet au changement de fond (les styles Carto partagent
+        // les mêmes ids ; le diff laisserait des libellés anglais résiduels).
+        styleDiffing={false}
         onMove={(e) => setViewState(e.viewState)}
         onStyleData={(e) => onStyleData(e.target)}
         style={{ width: "100%", height: "100%" }}
@@ -594,6 +616,25 @@ export default function DvfMap() {
           </div>
         )}
 
+        {/* Fond de carte (fond= dans l'URL, commun avec /map). */}
+        <div className="mt-2 flex flex-wrap items-center gap-1.5 border-t pt-2 text-xs">
+          <span className="text-muted-foreground">Fond</span>
+          {BASEMAP_KEYS.map((b) => (
+            <button
+              key={b}
+              type="button"
+              onClick={() => changeBasemap(b)}
+              className={
+                b === basemap
+                  ? "rounded border border-accent bg-accent/10 px-2 py-0.5 font-semibold text-accent"
+                  : "rounded border border-input px-2 py-0.5 text-muted-foreground hover:bg-muted"
+              }
+            >
+              {BASEMAP_LABELS[b]}
+            </button>
+          ))}
+        </div>
+
         {!heat && mesh !== "communes" && (
           <p className="mt-2 max-w-52 text-xs text-muted-foreground">
             Cliquez sur une {mesh === "regions" ? "région" : "département"} pour