working

web/src/App.svelte

@@ -2,6 +2,7 @@
   import { onMount, onDestroy } from 'svelte';
   import { wsService, connected, systemStatus } from './lib/websocket.js';
   import { api } from './lib/api.js';
+  import StatusBanner from './components/StatusBanner.svelte';
   import WebSwitch from './components/WebSwitch.svelte';
   import PowerGenius from './components/PowerGenius.svelte';
   import TunerGenius from './components/TunerGenius.svelte';
@@ -13,6 +14,8 @@
   let isConnected = false;
   let currentTime = new Date();
   let callsign = 'F4BPO'; // Default
+  let latitude = null;
+  let longitude = null;
 
   const unsubscribeStatus = systemStatus.subscribe(value => {
     status = value;
@@ -40,6 +43,10 @@
       if (config.callsign) {
         callsign = config.callsign;
       }
+      if (config.location) {
+        latitude = config.location.latitude;
+        longitude = config.location.longitude;
+      }
     } catch (err) {
       console.error('Failed to fetch config:', err);
     }
@@ -107,6 +114,16 @@
     </div>
   </header>
 
+  <!-- ✅ NOUVEAU : Bandeau de statut avec fréquence FlexRadio et alertes météo -->
+  <StatusBanner 
+    flexradio={status?.flexradio} 
+    weather={status?.weather}
+    {latitude}
+    {longitude}
+    windWarningThreshold={30}
+    gustWarningThreshold={50}
+  />
+
   <main>
     <div class="dashboard-grid">
       <div class="row">
@@ -132,12 +149,13 @@
   }
 
   header {
-    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
-    padding: 16px 24px;
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+    padding: 8px 24px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+    border-bottom: 1px solid rgba(79, 195, 247, 0.2);
     flex-wrap: wrap;
     gap: 16px;
   }
@@ -243,6 +261,7 @@
   .date {
     font-size: 12px;
     color: rgba(255, 255, 255, 0.7);
+    padding-top: 0px;
   }
 
   main {
@@ -292,4 +311,4 @@
       flex-wrap: wrap;
     }
   }
-</style>
+</style>