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