feat: add app section visibility settings

components/settings/settings-page.tsx

@@ -9,6 +9,7 @@ import { LanguageToggle } from "@/components/ui/language-toggle";
 import { ThemeToggle } from "@/components/ui/theme-toggle";
 import { useMeteoStationPositions } from "@/hooks/use-meteo-stations";
 import { useWeatherStations } from "@/hooks/use-weather-stations";
+import { APP_SECTION_SETTINGS } from "@/lib/app-sections";
 import { DEFAULT_STATION_ID } from "@/lib/constants";
 import { DASHBOARD_SECTION_SETTINGS } from "@/lib/dashboard-sections";
 import { useI18n } from "@/lib/i18n";
@@ -133,6 +134,7 @@ export function SettingsPage() {
   const temperatureUnit = useWeatherStore((state) => state.temperatureUnit);
   const windSpeedUnit = useWeatherStore((state) => state.windSpeedUnit);
   const dashboardSections = useWeatherStore((state) => state.dashboardSections);
+  const appSections = useWeatherStore((state) => state.appSections);
   const setNotificationsEnabled = useWeatherStore((state) => state.setWarningNotificationsEnabled);
   const setMorningBriefEnabled = useWeatherStore((state) => state.setMorningBriefNotificationsEnabled);
   const setTomorrowBriefEnabled = useWeatherStore((state) => state.setTomorrowBriefNotificationsEnabled);
@@ -141,6 +143,7 @@ export function SettingsPage() {
   const setTemperatureUnit = useWeatherStore((state) => state.setTemperatureUnit);
   const setWindSpeedUnit = useWeatherStore((state) => state.setWindSpeedUnit);
   const setDashboardSectionVisible = useWeatherStore((state) => state.setDashboardSectionVisible);
+  const setAppSectionVisible = useWeatherStore((state) => state.setAppSectionVisible);
 
   const selectedStation = stations?.find((station) => station.id === selectedStationId)
     ?? stations?.find((station) => station.id === DEFAULT_STATION_ID)
@@ -463,6 +466,31 @@ export function SettingsPage() {
         </div>
       </Card>
 
+      <Card className="p-4 sm:p-5">
+        <div className="flex items-start gap-3">
+          <div className="rounded-control border border-border/70 bg-surface-muted/70 p-2 text-accent">
+            <Settings className="size-4" aria-hidden="true" />
+          </div>
+          <div>
+            <h2 className="text-sm font-semibold">{t("settings.appSections.title")}</h2>
+            <p className="mt-1 max-w-2xl text-sm leading-6 text-muted">{t("settings.appSections.description")}</p>
+          </div>
+        </div>
+
+        <div className="mt-2">
+          {APP_SECTION_SETTINGS.map((section) => (
+            <NotificationSwitchLabel
+              key={section.id}
+              icon={Settings}
+              title={t(section.titleKey)}
+              description={t(section.descriptionKey)}
+              checked={appSections[section.id]}
+              onChange={(checked) => setAppSectionVisible(section.id, checked)}
+            />
+          ))}
+        </div>
+      </Card>
+
       <Card className="p-4 sm:p-5">
         <div className="flex items-start gap-3">
           <div className="rounded-control border border-warning/30 bg-warning/10 p-2 text-warning">