feat: add app section visibility settings

components/layout/app-shell.tsx

@@ -3,16 +3,27 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { CloudSun, Droplets, Settings, TriangleAlert } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import { isAppNavItemVisible } from "@/lib/app-sections";
 import { NAV_ITEMS } from "@/lib/constants";
 import { cn } from "@/lib/utils";
 import { InstallPWAButton } from "@/components/ui/install-pwa-button";
 import { useI18n } from "@/lib/i18n";
+import { useWeatherStore } from "@/lib/store";
 
-const icons = [CloudSun, TriangleAlert, Droplets, Settings];
+const iconsByHref: Record<string, LucideIcon> = {
+  "/": CloudSun,
+  "/warnings": TriangleAlert,
+  "/hydro": Droplets,
+  "/settings": Settings,
+};
 
 export function AppShell({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
   const { t } = useI18n();
+  const appSections = useWeatherStore((state) => state.appSections);
+  const visibleNavItems = NAV_ITEMS.filter((item) => isAppNavItemVisible(item.href, appSections));
+
   return (
     <div className="min-h-screen overflow-x-hidden bg-background">
       <header className="app-header-safe sticky top-0 z-40 border-b border-border/70 bg-surface">
@@ -21,7 +32,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
             wtr<span className="text-accent">.</span>
           </Link>
           <nav aria-label={t("nav.main")} className="hidden items-center gap-1 md:flex">
-            {NAV_ITEMS.map((item) => {
+            {visibleNavItems.map((item) => {
               const active = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
               return (
                 <Link key={item.href} href={item.href} className={cn("rounded-control px-4 py-2 text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent", active ? "bg-foreground text-background shadow-soft" : "text-muted hover:bg-surface-muted/70")}>
@@ -37,8 +48,8 @@ export function AppShell({ children }: { children: React.ReactNode }) {
       </header>
       <main className="app-main-safe mx-auto max-w-7xl px-4 pt-5 sm:px-6 sm:pt-8 lg:px-8">{children}</main>
       <nav aria-label={t("nav.mobile")} className="mobile-nav-safe fixed z-50 flex justify-around rounded-panel border border-border/70 bg-surface p-1.5 shadow-card md:hidden">
-        {NAV_ITEMS.map((item, index) => {
-          const Icon = icons[index];
+        {visibleNavItems.map((item) => {
+          const Icon = iconsByHref[item.href] ?? CloudSun;
           const active = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
           return (
             <Link key={item.href} href={item.href} className={cn("flex min-w-0 flex-1 flex-col items-center gap-1 rounded-card px-2 py-2 text-[0.68rem] font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent", active ? "bg-foreground text-background" : "text-muted")}>

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">

docs/architecture.md

@@ -22,7 +22,7 @@ Najważniejsze widoki:
 - `/` - dashboard pogody, wyszukiwarka lokalizacji, hero, prognoza, briefy i ostrzeżenia regionalne,
 - `/warnings` - pełny widok ostrzeżeń meteo i hydro,
 - `/hydro` - stacje hydrologiczne,
-- `/settings` - język, motyw, widoczność sekcji dashboardu, lokalizacja powiadomień i Web Push,
+- `/settings` - język, motyw, widoczność sekcji aplikacji i dashboardu, lokalizacja powiadomień i Web Push,
 - `/station/[id]` - szczegóły stacji,
 - `/offline` - fallback offline.
 
@@ -43,7 +43,8 @@ Zustand w `lib/store.ts` przechowuje trwałe preferencje użytkownika w `localSt
 - wybraną stację albo lokalizację,
 - ustawienia powiadomień,
 - tryb wyboru województwa dla alertów,
-- widoczność opcjonalnych sekcji dashboardu.
+- widoczność opcjonalnych sekcji dashboardu,
+- widoczność opcjonalnych sekcji aplikacji w nawigacji.
 
 Język interfejsu jest przechowywany osobno w `localStorage` pod kluczem `wtr:language`.
 

lib/app-sections.ts

@@ -0,0 +1,46 @@
+import type { TranslationKey } from "@/lib/i18n";
+
+export const APP_SECTION_SETTINGS = [
+  {
+    id: "warnings",
+    href: "/warnings",
+    titleKey: "settings.appSections.warnings.title",
+    descriptionKey: "settings.appSections.warnings.description",
+    defaultVisible: true,
+  },
+  {
+    id: "hydro",
+    href: "/hydro",
+    titleKey: "settings.appSections.hydro.title",
+    descriptionKey: "settings.appSections.hydro.description",
+    defaultVisible: false,
+  },
+] as const satisfies ReadonlyArray<{
+  id: string;
+  href: string;
+  titleKey: TranslationKey;
+  descriptionKey: TranslationKey;
+  defaultVisible: boolean;
+}>;
+
+export type AppSectionId = typeof APP_SECTION_SETTINGS[number]["id"];
+
+export type AppSectionVisibility = Record<AppSectionId, boolean>;
+
+export const DEFAULT_APP_SECTION_VISIBILITY = APP_SECTION_SETTINGS.reduce((visibility, section) => ({
+  ...visibility,
+  [section.id]: section.defaultVisible,
+}), {} as AppSectionVisibility);
+
+export function normalizeAppSectionVisibility(value: unknown): AppSectionVisibility {
+  const stored = value && typeof value === "object" ? value as Partial<Record<AppSectionId, unknown>> : {};
+  return APP_SECTION_SETTINGS.reduce((visibility, section) => ({
+    ...visibility,
+    [section.id]: typeof stored[section.id] === "boolean" ? stored[section.id] : section.defaultVisible,
+  }), {} as AppSectionVisibility);
+}
+
+export function isAppNavItemVisible(href: string, visibility: AppSectionVisibility) {
+  const section = APP_SECTION_SETTINGS.find((candidate) => candidate.href === href);
+  return section ? visibility[section.id] : true;
+}

lib/i18n.tsx

@@ -32,6 +32,12 @@ const translations = {
     "settings.dashboardSections.weatherBrief.description": "Pokazuje deterministyczne podsumowanie dnia i krótką prognozę na jutro.",
     "settings.dashboardSections.featuredStations.title": "Szybki wybór",
     "settings.dashboardSections.featuredStations.description": "Pokazuje listę popularnych lokalizacji na dole strony głównej.",
+    "settings.appSections.title": "Sekcje aplikacji",
+    "settings.appSections.description": "Wybierz, które dodatkowe widoki mają być widoczne w nawigacji.",
+    "settings.appSections.warnings.title": "Ostrzeżenia",
+    "settings.appSections.warnings.description": "Pokazuje widok oficjalnych ostrzeżeń IMGW w głównej nawigacji.",
+    "settings.appSections.hydro.title": "Hydro",
+    "settings.appSections.hydro.description": "Pokazuje widok monitoringu hydrologicznego IMGW w głównej nawigacji.",
     "settings.units.temperature.title": "Jednostka temperatury",
     "settings.units.temperature.description": "Stosowana w prognozie, briefach, powiadomieniach i bieżących pomiarach na tym urządzeniu.",
     "settings.units.temperature.label": "Wybierz jednostkę temperatury",
@@ -295,6 +301,12 @@ const translations = {
     "settings.dashboardSections.weatherBrief.description": "Shows the deterministic daily summary and a short forecast for tomorrow.",
     "settings.dashboardSections.featuredStations.title": "Quick select",
     "settings.dashboardSections.featuredStations.description": "Shows the popular locations list at the bottom of the home screen.",
+    "settings.appSections.title": "App sections",
+    "settings.appSections.description": "Choose which additional views are visible in navigation.",
+    "settings.appSections.warnings.title": "Warnings",
+    "settings.appSections.warnings.description": "Shows the official IMGW warnings view in main navigation.",
+    "settings.appSections.hydro.title": "Hydro",
+    "settings.appSections.hydro.description": "Shows the IMGW hydrological monitoring view in main navigation.",
     "settings.units.temperature.title": "Temperature unit",
     "settings.units.temperature.description": "Used in forecasts, briefs, notifications and current readings on this device.",
     "settings.units.temperature.label": "Choose temperature unit",

lib/store.ts

@@ -5,6 +5,7 @@ import { persist } from "zustand/middleware";
 import type { SelectedLocation } from "@/types/location";
 import type { Province } from "@/types/province";
 import type { TemperatureUnit, WindSpeedUnit } from "@/types/units";
+import { DEFAULT_APP_SECTION_VISIBILITY, normalizeAppSectionVisibility, type AppSectionId, type AppSectionVisibility } from "@/lib/app-sections";
 import { DEFAULT_DASHBOARD_SECTION_VISIBILITY, normalizeDashboardSectionVisibility, type DashboardSectionId, type DashboardSectionVisibility } from "@/lib/dashboard-sections";
 import { DEFAULT_TEMPERATURE_UNIT, DEFAULT_WIND_SPEED_UNIT } from "@/lib/weather-utils";
 import type { WeatherRegion } from "@/types/weather-region";
@@ -24,6 +25,7 @@ interface WeatherStore {
   temperatureUnit: TemperatureUnit;
   windSpeedUnit: WindSpeedUnit;
   dashboardSections: DashboardSectionVisibility;
+  appSections: AppSectionVisibility;
   toggleFavorite: (id: string) => void;
   selectStation: (id: string) => void;
   selectLocation: (location: SelectedLocation) => void;
@@ -35,6 +37,7 @@ interface WeatherStore {
   setTemperatureUnit: (unit: TemperatureUnit) => void;
   setWindSpeedUnit: (unit: WindSpeedUnit) => void;
   setDashboardSectionVisible: (section: DashboardSectionId, visible: boolean) => void;
+  setAppSectionVisible: (section: AppSectionId, visible: boolean) => void;
 }
 
 export const useWeatherStore = create<WeatherStore>()(
@@ -51,6 +54,7 @@ export const useWeatherStore = create<WeatherStore>()(
       temperatureUnit: DEFAULT_TEMPERATURE_UNIT,
       windSpeedUnit: DEFAULT_WIND_SPEED_UNIT,
       dashboardSections: DEFAULT_DASHBOARD_SECTION_VISIBILITY,
+      appSections: DEFAULT_APP_SECTION_VISIBILITY,
       toggleFavorite: (id) =>
         set((state) => ({
           favorites: state.favorites.includes(id)
@@ -69,6 +73,9 @@ export const useWeatherStore = create<WeatherStore>()(
       setDashboardSectionVisible: (section, visible) => set((state) => ({
         dashboardSections: { ...state.dashboardSections, [section]: visible },
       })),
+      setAppSectionVisible: (section, visible) => set((state) => ({
+        appSections: { ...state.appSections, [section]: visible },
+      })),
     }),
     {
       name: "wtr:preferences",
@@ -77,12 +84,14 @@ export const useWeatherStore = create<WeatherStore>()(
         const location = state?.selectedLocation as (Partial<SelectedLocation> & { region?: WeatherRegion }) | null | undefined;
         if (!state) return persisted;
         const dashboardSections = normalizeDashboardSectionVisibility(state.dashboardSections);
-        if (!location) return { ...state, dashboardSections };
+        const appSections = normalizeAppSectionVisibility(state.appSections);
+        if (!location) return { ...state, dashboardSections, appSections };
         const countryCode = location.countryCode ?? (location.province ? "PL" : null);
         const region = location.region ?? getWeatherRegionForCountryCode(countryCode);
         return {
           ...state,
           dashboardSections,
+          appSections,
           selectedLocation: {
             ...location,
             country: location.country ?? (countryCode === "PL" ? "Polska" : null),