routes doc, future, express mode thematique

frontend/src/app/pages/home/home.html

@@ -135,6 +135,19 @@ lastupdate:
   }    
   </div>
   <div class="main">
+    @if (theme()) {
+      <div class="subtheme-bar">
+        <div class="help">Thème: {{ theme() }} — Cliquez sur la carte pour définir des coordonnées puis créez un évènement du sous-thème choisi.</div>
+        <div class="chips">
+          @for (t of subthemes; track t.key) {
+            <button class="chip" [class.active]="activeSubtheme()===t.key" (click)="activeSubtheme.set(t.key)">
+              <span class="emoji">{{t.emoji}}</span>
+              <span>{{t.label}}</span>
+            </button>
+          }
+        </div>
+      </div>
+    }
     @if (!showTable) {
       <div class="map">
         <app-all-events [features]="filteredFeatures" [selected]="selected" (select)="onSelect($event)" (pickCoords)="onPickCoords($event)"></app-all-events>

frontend/src/app/pages/home/home.scss

@@ -142,3 +142,15 @@ app-edit-form{
   z-index: 1000;
   padding-bottom: 150px;
 }
+
+.subtheme-bar {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px 12px;
+  .help { font-size: 12px; color: #64748b; }
+  .chips { display: flex; gap: 6px; flex-wrap: wrap; }
+  .chip { border: 1px solid #e2e8f0; border-radius: 999px; padding: 6px 10px; background: #fff; cursor: pointer; }
+  .chip.active { background: #e3f2fd; border-color: #90caf9; }
+  .emoji { margin-right: 6px; }
+}

frontend/src/app/pages/home/home.ts

@@ -1,3 +1,4 @@
+import { Component, inject, signal } from '@angular/core';
 import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { FormsModule } from '@angular/forms';
@@ -5,6 +6,9 @@ import {Menu} from './menu/menu';
 import { AllEvents } from '../../maps/all-events/all-events';
 import { EditForm } from '../../forms/edit-form/edit-form';
 import { OedbApi } from '../../services/oedb-api';
+import { ActivatedRoute } from '@angular/router';
+import oedb from '../../../oedb-types';
+
 import { UnlocatedEvents } from '../../shared/unlocated-events/unlocated-events';
 import { OsmAuth } from '../../services/osm-auth';
 import { Osm } from '../../forms/osm/osm';
@@ -27,26 +31,30 @@ import { WhatFilterComponent } from '../../shared/what-filter/what-filter';
 export class Home implements OnInit, OnDestroy {
 
   OedbApi = inject(OedbApi);
+  route = inject(ActivatedRoute);
   private router = inject(Router);
   private osmAuth = inject(OsmAuth);
-  
+
   features: Array<any> = [];
   filteredFeatures: Array<any> = [];
   selected: any | null = null;
   showTable = false;
   showFilters = false;
   showEditForm = true;
-  
+
   // Nouvelles propriétés pour le rechargement automatique et la sélection de jours
   autoReloadEnabled = true;
   autoReloadInterval: any = null;
   daysAhead = 7; // Nombre de jours dans le futur par défaut
   isLoading = false;
-  
+
   // Propriétés pour les filtres
   searchText = '';
   selectedWhatFilter = '';
   availableWhatTypes: string[] = [];
+  theme = signal<string | null>(null);
+  subthemes: Array<{ key: string, label: string, emoji: string }> = [];
+  activeSubtheme = signal<string | null>(null);
 
   ngOnInit() {
     this.loadEvents();
@@ -62,7 +70,7 @@ export class Home implements OnInit, OnDestroy {
     //this.showTable = false;
     //this.showFilters = true;
     this.showEditForm = true;
-    
+
   }
 
   loadEvents() {
@@ -70,7 +78,7 @@ export class Home implements OnInit, OnDestroy {
     const today = new Date();
     const endDate = new Date(today);
     endDate.setDate(today.getDate() + this.daysAhead);
-    
+
     const params = {
       start: today.toISOString().split('T')[0],
       end: endDate.toISOString().split('T')[0],
@@ -120,6 +128,12 @@ export class Home implements OnInit, OnDestroy {
         whatTypes.add(feature.properties.what);
       }
     });
+
+    this.route.queryParams.subscribe(p => {
+      const t = (p?.['theme'] || '').trim();
+      this.theme.set(t || null);
+      this.buildSubthemes();
+    });
     this.availableWhatTypes = Array.from(whatTypes).sort();
   }
 
@@ -149,7 +163,7 @@ export class Home implements OnInit, OnDestroy {
 
     // Filtre par type d'événement
     if (this.selectedWhatFilter) {
-      filtered = filtered.filter(feature => 
+      filtered = filtered.filter(feature =>
         feature?.properties?.what === this.selectedWhatFilter
       );
     }
@@ -166,7 +180,6 @@ export class Home implements OnInit, OnDestroy {
   }
 
   onPickCoords(coords: [number, number]) {
-    // Autofill lat/lon in the form selection or prepare a new feature shell
     const [lon, lat] = coords;
     if (this.selected && this.selected.properties) {
       this.selected = {
@@ -175,12 +188,22 @@ export class Home implements OnInit, OnDestroy {
       };
     } else {
       const osmUsername = this.osmAuth.getUsername();
+      const whatKey = this.activeSubtheme();
+      let label = '';
+      let description = '';
+      if (whatKey) {
+        const preset = (oedb.presets.what as any)[whatKey];
+        if (preset) {
+          label = preset.label || '';
+          description = preset.description || '';
+        }
+      }
       this.selected = {
         id: null,
-        properties: { 
-          label: '', 
-          description: '', 
-          what: '', 
+        properties: {
+          label: '',
+          description: '',
+          what: whatKey || '',
           where: '',
           ...(osmUsername && { last_modified_by: osmUsername })
         },
@@ -195,7 +218,6 @@ export class Home implements OnInit, OnDestroy {
   }
 
   onCreated(_res: any) {
-    // refresh and clear selection after create
     this.selected = null;
     this.loadEvents();
   }
@@ -209,16 +231,29 @@ export class Home implements OnInit, OnDestroy {
     this.showEditForm = false;
   }
 
-  // Menu callbacks
   ngAfterViewInit() {
-    // Wire menu callbacks if needed via querySelector; left simple for now
-    // We keep logic here: toggling and downloads
+    // reserved
   }
 
   toggleView() {
     this.showTable = !this.showTable;
   }
 
+  private buildSubthemes() {
+    const t = this.theme();
+    if (!t) { this.subthemes = []; this.activeSubtheme.set(null); return; }
+    const what = oedb.presets.what as Record<string, any>;
+    const list: Array<{ key: string, label: string, emoji: string }> = [];
+    Object.keys(what).forEach(k => {
+      if (k === t || k.startsWith(`${t}.`)) {
+        list.push({ key: k, label: what[k].label || k, emoji: what[k].emoji || '' });
+      }
+    });
+    this.subthemes = list.sort((a, b) => a.key.localeCompare(b.key));
+    const exact = this.subthemes.find(s => s.key === t);
+    this.activeSubtheme.set(exact ? exact.key : (this.subthemes[0]?.key || null));
+  }
+
   downloadGeoJSON() {
     const blob = new Blob([JSON.stringify({ type: 'FeatureCollection', features: this.filteredFeatures }, null, 2)], { type: 'application/geo+json' });
     const url = URL.createObjectURL(blob);

frontend/src/app/pages/home/menu/menu.html

@@ -1,7 +1,16 @@
 <menu>
   OpenEventDatabase
- 
- <!-- 
+  <nav class="nav">
+    <a routerLink="/" class="link">Accueil</a>
+    <a routerLink="/community-upcoming" class="link">Community à venir</a>
+    <a routerLink="/events-docs" class="link">Docs événements</a>
+  </nav>
+  <a href="/demo/stats">stats</a>
+  <a href="https://source.cipherbliss.com/tykayn/oedb-backend">sources</a>
+
+  (editor)
+
+ <!--
   <div id="editor_form">
     <div id="search_input">
       <input type="text" value="" placeholder="Rechercher une catégorie d'évènement">
@@ -52,7 +61,7 @@
       <option value="point"></option>
       <option value="polyline"></option>
       <option value="bbox"></option>
-    </select> 
+    </select>
 
   </div>
 -->