feat: allow dashboard section reordering

components/dashboard/dashboard-page.tsx

@@ -19,6 +19,11 @@ import { locateSynopStations } from "@/lib/location-utils";
 import { DashboardWarnings } from "@/components/warnings/dashboard-warnings";
 import { WeatherBriefCard } from "@/components/dashboard/weather-brief-card";
 import type { SynopStation } from "@/types/imgw";
+import {
+  normalizeDashboardSectionOrder,
+  normalizeDashboardSectionVisibility,
+  type DashboardSectionId,
+} from "@/lib/dashboard-sections";
 
 export function DashboardPage() {
   const { t } = useI18n();
@@ -26,7 +31,8 @@ export function DashboardPage() {
   const { data: positions = [] } = useMeteoStationPositions();
   const selectedStationId = useWeatherStore((state) => state.selectedStationId);
   const selectedLocation = useWeatherStore((state) => state.selectedLocation);
-  const dashboardSections = useWeatherStore((state) => state.dashboardSections);
+  const dashboardSections = normalizeDashboardSectionVisibility(useWeatherStore((state) => state.dashboardSections));
+  const dashboardSectionOrder = normalizeDashboardSectionOrder(useWeatherStore((state) => state.dashboardSectionOrder));
   const selectedStation =
     stations?.find((station) => station.id === selectedStationId) ??
     stations?.find((station) => station.name === DEFAULT_STATION_NAME) ??
@@ -73,6 +79,34 @@ export function DashboardPage() {
         }
       : selectedStation;
 
+  const renderDashboardSection = (sectionId: DashboardSectionId) => {
+    if (!dashboardSections[sectionId]) return null;
+    if (sectionId === "warnings") return <DashboardWarnings key={sectionId} />;
+    if (sectionId === "weatherBrief")
+      return (
+        <WeatherBriefCard
+          key={sectionId}
+          latitude={forecastLatitude}
+          longitude={forecastLongitude}
+          region={activeRegion}
+          locationName={forecastLocationName ?? selectedStation.name}
+        />
+      );
+    if (sectionId === "forecast")
+      return (
+        <ForecastPanel
+          key={sectionId}
+          latitude={forecastLatitude}
+          longitude={forecastLongitude}
+          region={activeRegion}
+          locationName={forecastLocationName ?? selectedStation.name}
+        />
+      );
+    if (sectionId === "favorites") return <FavoritesSection key={sectionId} stations={stations} />;
+    if (sectionId === "featuredStations") return <FeaturedStationsSection key={sectionId} stations={stations} />;
+    return null;
+  };
+
   return (
     <div className="space-y-10">
       <LocationSearch stations={stations} positions={positions} />
@@ -84,23 +118,7 @@ export function DashboardPage() {
         locationName={activeLocation?.name}
         distanceKm={activeLocation?.distanceKm}
       />
-      <DashboardWarnings />
-      {dashboardSections.weatherBrief && (
-        <WeatherBriefCard
-          latitude={forecastLatitude}
-          longitude={forecastLongitude}
-          region={activeRegion}
-          locationName={forecastLocationName ?? selectedStation.name}
-        />
-      )}
-      <ForecastPanel
-        latitude={forecastLatitude}
-        longitude={forecastLongitude}
-        region={activeRegion}
-        locationName={forecastLocationName ?? selectedStation.name}
-      />
-      <FavoritesSection stations={stations} />
-      {dashboardSections.featuredStations && <FeaturedStationsSection stations={stations} />}
+      {dashboardSectionOrder.map(renderDashboardSection)}
     </div>
   );
 }