feat(firewall): traffic rules editor with visual policy list

app/src/components/Shell.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import type { LucideIcon } from "lucide-react";
-import { Activity, ArrowLeftRight, Blocks, ChartColumn, ChartPie, Download, EyeOff, Forward, Globe, HardDrive, Info, LayoutDashboard, LogOut, Menu, Network, Radar, Server, Settings, ShieldBan, Smartphone, Wifi, Wrench } from "lucide-react";
+import { Activity, ArrowLeftRight, Blocks, ChartColumn, ChartPie, Download, EyeOff, Forward, Globe, HardDrive, Info, LayoutDashboard, LogOut, Menu, Network, Radar, Server, Settings, ShieldAlert, ShieldBan, Smartphone, Wifi, Wrench } from "lucide-react";
 import { api, disableDemo, isDemo } from "../api";
 import type { Board, DDNSProbe, DriftProbe, EthPort, FwdProbe, GuestProbe, IoTProbe, IPv6Probe, MultiWanProbe, OVPNProbe, PhysPortsProbe, SelfUpdateCheck, SQMProbe, StorageProbe, SystemInfo, TSProbe, UsteerAP, UpdateCheck, WanStatus, WGProbe, WirelessRadio } from "../types";
 import { useHealthScore } from "../hooks/useHealthScore";
@@ -16,6 +16,7 @@ import { ClientsPage } from "../pages/Clients";
 import { L2ClientsPage } from "../pages/L2Clients";
 import { WifiPage } from "../pages/Wifi";
 import { InternetPage } from "../pages/Internet";
+import { TrafficRulesPage } from "../pages/TrafficRules";
 import { Services } from "../pages/Services";
 import { Ports } from "../pages/Ports";
 import { System } from "../pages/System";
@@ -26,7 +27,7 @@ import { StoragePage } from "../pages/Storage";
 import { AboutPage } from "../pages/About";
 import { SelfUpdateDialog } from "../components/system/SelfUpdateDialog";
 
-export type Page = "overview" | "internet" | "wan" | "clients" | "coverage" | "wifi" | "lan" | "services" | "traffic" | "banip" | "upnp" | "ports" | "forwards" | "tools" | "diagnostics" | "fleet" | "storage" | "system" | "dpi" | "about";
+export type Page = "overview" | "internet" | "wan" | "clients" | "coverage" | "wifi" | "lan" | "services" | "traffic" | "trafficrules" | "banip" | "upnp" | "ports" | "forwards" | "tools" | "diagnostics" | "fleet" | "storage" | "system" | "dpi" | "about";
 
 const NAV_ICONS: Record<Page, LucideIcon> = {
   overview: LayoutDashboard,
@@ -38,6 +39,7 @@ const NAV_ICONS: Record<Page, LucideIcon> = {
   lan: Network,
   services: Blocks,
   traffic: ChartPie,
+  trafficrules: ShieldAlert,
   banip: ShieldBan,
   upnp: ArrowLeftRight,
   ports: ArrowLeftRight,
@@ -66,7 +68,7 @@ const ROLE_BADGE: Record<"router" | "ap" | "switch", { labelKey: string; cls: st
 const NAV_GROUPS: { group: string | null; items: Page[] }[] = [
   { group: null, items: ["overview"] },
   { group: "nav.group.yourNetwork", items: ["clients", "coverage", "traffic"] },
-  { group: "nav.group.connection", items: ["internet", "wifi", "lan", "ports"] },
+  { group: "nav.group.connection", items: ["internet", "wifi", "lan", "ports", "trafficrules"] },
   { group: "nav.group.services", items: ["services"] },
   { group: "nav.group.system", items: ["diagnostics", "storage", "fleet", "system", "about"] },
 ];
@@ -221,7 +223,7 @@ function ShellInner({ onLogout }: { onLogout: () => void }) {
     if (!modeReady) return id === "overview" ? null : "loading";
     // La línea de salida y todo lo que cuelga de ella (reenvío de puertos,
     // DPI, banIP) solo aplica a la puerta de enlace.
-    if ((id === "internet" || id === "wan" || id === "forwards" || id === "dpi" || id === "banip" || id === "upnp") && !isRouter) return "gatewayOnly";
+    if ((id === "internet" || id === "wan" || id === "forwards" || id === "dpi" || id === "banip" || id === "upnp" || id === "trafficrules") && !isRouter) return "gatewayOnly";
     // Red local (DHCP/DNS/reservas): sin dnsmasq la página quedaría vacía
     // (p. ej. un switch gestionado), así que la entrada no se ofrece.
     if (id === "lan" && !mode?.dnsmasq_on) return "noDnsmasq";
@@ -443,6 +445,7 @@ function ShellInner({ onLogout }: { onLogout: () => void }) {
         <InternetPage mwan={mwan} onMwanChange={setMwan} fwd={fwd} onFwdChange={setFwd} />
       )}
       {activePage === "coverage" && <CoveragePage aps={usteerAps} error={usteerError} />}
+      {activePage === "trafficrules" && <TrafficRulesPage />}
       {activePage === "wifi" && (
         <WifiPage iot={iot} onIotChange={setIot} guest={guest} onGuestChange={setGuest} />
       )}