Merge pull request #339 from ipnet-mesh/feat/page-header-icons

Show section icons in page headers across all pages

Author: jinglemansweep

src/meshcore_hub/web/static/js/spa-react/components/PageHeader.test.tsx

@@ -1,16 +1,23 @@
 import { render, screen } from "@testing-library/react";
-import type { ReactNode } from "react";
+import type { ComponentType, ReactNode } from "react";
 import { describe, expect, it } from "vitest";
 
 import { AppConfigProvider } from "@/context/AppConfigContext";
 import { PageHeader } from "@/components/PageHeader";
+import { IconNodes } from "@/components/icons";
 import { makeConfig } from "@/test/makeConfig";
 import type { AppConfig } from "@/types/config";
 
-function renderHeader(config: AppConfig = makeConfig(), children?: ReactNode) {
+function renderHeader(
+  config: AppConfig = makeConfig(),
+  children?: ReactNode,
+  icon?: ComponentType<{ className?: string }>,
+) {
   return render(
     <AppConfigProvider config={config}>
-      <PageHeader title="Nodes">{children}</PageHeader>
+      <PageHeader title="Nodes" icon={icon}>
+        {children}
+      </PageHeader>
     </AppConfigProvider>,
   );
 }
@@ -41,4 +48,21 @@ describe("PageHeader", () => {
     expect(screen.getByText("EST")).toBeInTheDocument();
     expect(screen.getByText("extra badge")).toBeInTheDocument();
   });
+
+  it("renders the icon inside the heading when provided", () => {
+    renderHeader(makeConfig(), undefined, IconNodes);
+    const svg = screen
+      .getByRole("heading", { name: "Nodes" })
+      .querySelector("svg");
+    expect(svg).not.toBeNull();
+    expect(svg?.getAttribute("class")).toContain("h-8");
+    expect(svg?.getAttribute("class")).toContain("w-8");
+  });
+
+  it("renders no icon when omitted", () => {
+    renderHeader();
+    expect(
+      screen.getByRole("heading", { name: "Nodes" }).querySelector("svg"),
+    ).toBeNull();
+  });
 });

src/meshcore_hub/web/static/js/spa-react/components/PageHeader.tsx

@@ -1,18 +1,23 @@
-import type { ReactNode } from "react";
+import type { ComponentType, ReactNode } from "react";
 import { useAppConfig } from "@/context/AppConfigContext";
 
 export function PageHeader({
   title,
+  icon: Icon,
   children,
 }: {
   title: ReactNode;
+  icon?: ComponentType<{ className?: string }>;
   children?: ReactNode;
 }) {
   const config = useAppConfig();
   const tz = config.timezone || "";
   return (
     <div className="flex items-center justify-between mb-6">
-      <h1 className="text-3xl font-bold">{title}</h1>
+      <h1 className="text-3xl font-bold flex items-center gap-2">
+        {Icon && <Icon className="h-8 w-8" />}
+        {title}
+      </h1>
       <div className="flex items-center gap-2">
         {tz && tz !== "UTC" && (
           <span className="text-sm opacity-60">{tz}</span>

src/meshcore_hub/web/static/js/spa-react/pages/Advertisements.test.tsx

@@ -40,6 +40,11 @@ describe("Advertisements", () => {
     await waitFor(() => {
       expect(screen.getAllByText("AdNode").length).toBeGreaterThanOrEqual(1);
     });
+    expect(
+      screen
+        .getByRole("heading", { name: "entities.advertisements" })
+        .querySelector("svg"),
+    ).not.toBeNull();
   });
 
   it("shows an error alert on fetch failure", async () => {

src/meshcore_hub/web/static/js/spa-react/pages/Advertisements.tsx

@@ -8,6 +8,7 @@ import { qk } from "@/utils/queryKeys";
 import { useFormatDateTime } from "@/utils/format";
 import { usePageTitle } from "@/hooks/usePageTitle";
 import { useAutoRefresh } from "@/hooks/useAutoRefresh";
+import { IconAdvertisements } from "@/components/icons";
 import { Pagination } from "@/components/Pagination";
 import {
   FilterForm,
@@ -235,7 +236,7 @@ export function Advertisements() {
 
   return (
     <>
-      <PageHeader title={t("entities.advertisements")} />
+      <PageHeader title={t("entities.advertisements")} icon={IconAdvertisements} />
 
       <ListToolbar
         total={total}

src/meshcore_hub/web/static/js/spa-react/pages/Channels.test.tsx

@@ -52,6 +52,9 @@ describe("Channels", () => {
       expect(screen.getByText("Public")).toBeInTheDocument();
       expect(screen.getByText("Ops")).toBeInTheDocument();
     });
+    expect(
+      screen.getByRole("heading", { name: "entities.channels" }).querySelector("svg"),
+    ).not.toBeNull();
   });
 
   it("shows an error alert on fetch failure", async () => {

src/meshcore_hub/web/static/js/spa-react/pages/Channels.tsx

@@ -283,7 +283,7 @@ export function Channels() {
   const config = useAppConfig();
   const oidcEnabled = config.oidc_enabled;
   const isAdmin = hasRole("admin");
-  usePageTitle("channels.title");
+  usePageTitle("entities.channels");
 
   const queryClient = useQueryClient();
 
@@ -364,14 +364,7 @@ export function Channels() {
 
   return (
     <div>
-      <PageHeader
-        title={
-          <span className="flex items-center gap-2">
-            <IconChannel className="h-8 w-8" />
-            {t("channels.title")}
-          </span>
-        }
-      />
+      <PageHeader title={t("entities.channels")} icon={IconChannel} />
 
       {error && <ErrorAlert message={error} />}
 

src/meshcore_hub/web/static/js/spa-react/pages/Dashboard.test.tsx

@@ -45,6 +45,9 @@ describe("Dashboard", () => {
     await waitFor(() => {
       expect(document.querySelector(".loading-spinner")).toBeNull();
     });
+    expect(
+      screen.getByRole("heading", { name: "entities.dashboard" }).querySelector("svg"),
+    ).not.toBeNull();
   });
 
   it("shows an error on fetch failure", async () => {

src/meshcore_hub/web/static/js/spa-react/pages/Dashboard.tsx

@@ -15,6 +15,7 @@ import { RouteTypeBadge } from "@/components/RouteTypeBadge";
 import {
   IconAdvertisements,
   IconChannel,
+  IconDashboard,
   IconMessages,
   IconNodes,
   IconPackets,
@@ -428,7 +429,7 @@ export function DashboardPage() {
 
   return (
     <>
-      <PageHeader title={t("entities.dashboard")} />
+      <PageHeader title={t("entities.dashboard")} icon={IconDashboard} />
 
       {visibleChartCount > 0 && (
         <>

src/meshcore_hub/web/static/js/spa-react/pages/MapPage.test.tsx

@@ -55,6 +55,9 @@ describe("MapPage", () => {
     await waitFor(() => {
       expect(screen.getByTestId("mock-map")).toBeInTheDocument();
     });
+    expect(
+      screen.getByRole("heading", { name: "entities.map" }).querySelector("svg"),
+    ).not.toBeNull();
   });
 
   it("shows an error on fetch failure", async () => {

src/meshcore_hub/web/static/js/spa-react/pages/MapPage.tsx

@@ -26,6 +26,7 @@ import {
 import { FilterToggle, OperatorSelect } from "@/components/FilterForm";
 import { ErrorAlert, Loading } from "@/components/Alerts";
 import { PageHeader } from "@/components/PageHeader";
+import { IconMap } from "@/components/icons";
 
 const MAX_BOUNDS_RADIUS_KM = 20;
 
@@ -386,7 +387,7 @@ export function MapPage() {
 
   return (
     <div>
-      <PageHeader title={t("entities.map")}>
+      <PageHeader title={t("entities.map")} icon={IconMap}>
         <span className="badge badge-lg">{countBadgeText}</span>
         {showFilteredBadge && (
           <span className="badge badge-lg badge-ghost">