🚸 Improve style and UX

src/app/components/home-navbar/home-navbar.component.html

@@ -62,14 +62,14 @@
           <a
             class="block text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
           >
-            <span class="space-x-2 py-2">
+            <span class="space-x-2">
               <app-login-page></app-login-page>
             </span>
           </a>
         </li>
         <li class="flex items-center space-x-2">
           <a
-            class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
+            class="block text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
           >
             <span>
               <app-register-page></app-register-page>

src/app/components/leaflet-map/leaflet-map.component.html

@@ -3,17 +3,17 @@
 </div>
 
 <div
-  class="floating-filters text-center absolute top-20 right-4 flex flex-col space-y-2 z-10 mt-2 bg-white p-3 rounded-xl shadow-lg dark:bg-gray-900 dark:text-white"
+  class="floating-filters text-center absolute top-[86px] right-[14px] flex flex-col space-y-2 z-10 bg-white p-3 rounded-xl shadow-lg dark:bg-gray-900 dark:text-white"
 >
   <div
-    class="filters flex flex-col md:flex-row items-start justify-start gap-4"
+    class="filters flex md:items-center flex-col md:flex-row align-top justify-start gap-4"
   >
-    <label>
+    <label class="flex items-center space-x-2">
       Pays :
       <select
         [(ngModel)]="selectedCountry"
         (change)="onCountryChange(selectedCountry)"
-        class="bg-white dark:bg-gray-900 dark:text-white"
+        class="bg-white dark:bg-gray-900 dark:text-white ml-2"
       >
         <option value="">Tous</option>
         <option *ngFor="let country of availableCountries" [value]="country">
@@ -21,17 +21,18 @@
         </option>
       </select>
     </label>
-    <span class="hidden md:inline">|</span>
+    <div class="hidden md:block h-5 border-l-2"></div>
 
     <!-- Amis taguées -->
-    <label>
+    <label class="flex items-center space-x-2">
       Amis :
       <select
         [(ngModel)]="selectedPerson"
         (change)="onPersonChange(selectedPerson)"
-        class="bg-white dark:bg-gray-900 dark:text-white"
+        class="bg-white dark:bg-gray-900 dark:text-white ml-2"
       >
-        <option value="">Tous</option>
+        <option value="__all__">Tous</option>
+        <option value="__none__">Aucun</option>
         <option *ngFor="let person of availablePersons" [value]="person">
           {{ person }}
         </option>

src/app/components/leaflet-map/leaflet-map.component.ts

@@ -24,7 +24,7 @@ export class LeafletMapComponent implements OnInit {
   availableCountries: string[] = [];
   availablePersons: string[] = [];
   selectedCountry: string = '';
-  selectedPerson: string = '';
+  selectedPerson: string = '__all__';
 
   constructor(
     private viewContainerRef: ViewContainerRef,
@@ -36,6 +36,20 @@ export class LeafletMapComponent implements OnInit {
 
   ngOnInit(): void {
     this.initializeMap();
+
+    this.route.queryParams.subscribe((params) => {
+      const pinId = params['pin'];
+      if (pinId) {
+        const marker = this.markersMap[pinId];
+        if (marker) {
+          marker.openPopup();
+          const latlng = marker.getLatLng();
+          const zoom = this.map.getZoom();
+          const offsetLat = 0.05 / Math.pow(2, zoom - 10);
+          this.map.setView(L.latLng(latlng.lat + offsetLat, latlng.lng), zoom);
+        }
+      }
+    });
   }
 
   private initializeMap(): void {
@@ -132,9 +146,13 @@ export class LeafletMapComponent implements OnInit {
       const matchesCountry = this.selectedCountry
         ? pinCountry === this.selectedCountry
         : true;
-      const matchesPerson = this.selectedPerson
+      const matchesPerson =
-        ? pin.description?.includes(`@${this.selectedPerson}`)
+        this.selectedPerson === '__all__'
-        : true;
+          ? true
+          : this.selectedPerson === '__none__'
+          ? !pin.description?.match(/@\w+/)
+          : pin.description?.includes(`@${this.selectedPerson}`);
+
       return matchesCountry && matchesPerson;
     });
 
@@ -162,17 +180,24 @@ export class LeafletMapComponent implements OnInit {
 
       this.markersMap[pin.id] = marker;
 
-      // Ouvrir automatiquement la pop-up si un ID est passé dans l'URL
+      this.route.queryParams
-      this.route.queryParams.subscribe((params) => {
+        .subscribe((params) => {
-        const pinId = params['pin']; // Récupérer l'ID du Pin depuis les paramètres de requête
+          const pinId = params['pin'];
-        if (pinId && this.markersMap[pinId]) {
+          if (pinId) {
-          this.markersMap[pinId].openPopup(); // Ouvrir la pop-up du marqueur correspondant
+            const marker = this.markersMap[pinId];
-          const latlng = this.markersMap[pinId].getLatLng();
+            if (marker) {
+              marker.openPopup();
+              const latlng = marker.getLatLng();
               const zoom = this.map.getZoom();
               const offsetLat = 0.05 / Math.pow(2, zoom - 10);
-          this.map.setView(L.latLng(latlng.lat + offsetLat, latlng.lng), zoom);
+              this.map.setView(
+                L.latLng(latlng.lat + offsetLat, latlng.lng),
+                zoom
+              );
             }
-      });
+          }
+        })
+        .unsubscribe();
     });
   }
 

src/app/services/local-storage/local-storage.service.ts

@@ -1,4 +1,6 @@
 import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { ModalService } from '../modal/modal.service';
 
 @Injectable({
   providedIn: 'root',
@@ -6,7 +8,10 @@ import { Injectable } from '@angular/core';
 export class LocalStorageService {
   private readonly AUTH_TOKEN_KEY = 'auth_token';
 
-  constructor() {}
+  constructor(
+    private router: Router,
+    private loginModalService: ModalService
+  ) {}
 
   setToken(token: string): void {
     localStorage.setItem(this.AUTH_TOKEN_KEY, token);
@@ -20,6 +25,9 @@ export class LocalStorageService {
       const expirationDate = new Date(payload.exp * 1000);
       if (expirationDate < new Date()) {
         this.removeToken(); // Remove expired token
+        this.router.navigate(['/']).then(() => {
+          this.loginModalService.openModal(); // Open login modal
+        });
         return null;
       }
     }

src/styles.css

@@ -1,3 +1,12 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Exemple avec Tailwind @apply */
+.leaflet-control-zoom {
+  @apply !shadow-none !border-none bg-transparent;
+}
+
+.leaflet-control-zoom a {
+  @apply dark:!bg-gray-900 dark:!text-white !rounded-md m-1 dark:hover:!bg-gray-700 bg-white hover:bg-gray-200 !border-none !shadow-none;
+}