feat(web): add mode-aware weekly rate in Deltas; remove duplicate weekly rate from Stats (#357)

* feat(web): add mode-aware weekly rate in Deltas; remove duplicate weekly rate from Stats

Co-Authored-By: Erv Walter <erv@ewal.net>

* feat(web): move weekly rate above deltas in Deltas section

Co-Authored-By: Erv Walter <erv@ewal.net>

* test(web): add comprehensive Deltas weekly rate tests and fix matchers; ensure mt-2 mb-2 spacing and third-person wording

Co-Authored-By: Erv Walter <erv@ewal.net>

* fix(web): remove early return for empty deltas and improve spacing in Deltas component

* fix(web): update Deltas test to match new behavior showing weekly rate without deltas

The Deltas component now always displays the weekly rate even when there are no deltas,
but the test was still expecting null. Updated the test to verify:
- Weekly rate is displayed when no deltas exist
- Heading and rate text are shown
- No delta items are rendered
- Fixed text matching from "/week" to "per week" in other tests

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Erv Walter <erv@ewal.net>

Author: devin-ai-integration[bot]

apps/web/src/components/dashboard/deltas.test.tsx

@@ -1,10 +1,9 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen } from "@testing-library/react";
+import type { DashboardData } from "@/lib/dashboard/dashboard-context";
 import { LocalDate } from "@js-joda/core";
+import { render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import Deltas from "./deltas";
-import type { DashboardData } from "@/lib/dashboard/dashboard-context";
 
-// Mock the dashboard hooks
 vi.mock("@/lib/dashboard/hooks", () => ({
   useDashboardData: vi.fn(),
 }));
@@ -33,15 +32,32 @@ describe("Deltas", () => {
     } as any,
   };
 
+  const withDeltas = (overrides: Partial<DashboardData> = {}) =>
+    ({
+      ...defaultMockData,
+      deltas: [
+        { period: "week", description: "1 week ago", delta: -2 },
+        { period: "month", description: "1 month ago", delta: -5 },
+      ],
+      activeSlope: -0.1,
+      ...overrides,
+    }) as any;
+
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
-  it("returns null when no deltas", () => {
-    mockUseDashboardData.mockReturnValue(defaultMockData as any);
-
-    const { container } = render(<Deltas />);
-    expect(container.firstChild).toBeNull();
+  it("shows weekly rate but no deltas when no deltas", () => {
+    mockUseDashboardData.mockReturnValue({
+      ...defaultMockData,
+      activeSlope: -0.1,
+      isMe: true,
+    } as any);
+    render(<Deltas />);
+    expect(screen.getByText("Weight Changes Over Time")).toBeInTheDocument();
+    expect(screen.getByText(/You are losing/)).toBeInTheDocument();
+    expect(screen.getByText(/per week/)).toBeInTheDocument();
+    expect(screen.queryByText(/Since .* ago:/)).not.toBeInTheDocument();
   });
 
   it("renders weight deltas with correct intended direction", () => {
@@ -52,9 +68,7 @@ describe("Deltas", () => {
         { period: "month", description: "1 month ago", delta: -5 },
       ],
     } as any);
-
     render(<Deltas />);
-
     expect(screen.getByText("Weight Changes Over Time")).toBeInTheDocument();
     expect(screen.getByText(/Since 1 week ago:/)).toBeInTheDocument();
     expect(screen.getByText(/Since 1 month ago:/)).toBeInTheDocument();
@@ -63,39 +77,33 @@ describe("Deltas", () => {
   it("renders fat percent deltas with negative intended direction", () => {
     mockUseDashboardData.mockReturnValue({
       ...defaultMockData,
-      mode: ["fatpercent"],
+      mode: ["fatpercent", () => {}],
       deltas: [
         { period: "week", description: "1 week ago", delta: -0.5 },
         { period: "month", description: "1 month ago", delta: -1.2 },
       ],
     } as any);
-
     render(<Deltas />);
-
     expect(screen.getByText("Fat % Changes Over Time")).toBeInTheDocument();
   });
 
   it("renders fat mass deltas with negative intended direction", () => {
     mockUseDashboardData.mockReturnValue({
       ...defaultMockData,
-      mode: ["fatmass"],
+      mode: ["fatmass", () => {}],
       deltas: [{ period: "week", description: "1 week ago", delta: -2.5 }],
     } as any);
-
     render(<Deltas />);
-
     expect(screen.getByText("Fat Mass Changes Over Time")).toBeInTheDocument();
   });
 
   it("renders lean mass deltas with positive intended direction", () => {
     mockUseDashboardData.mockReturnValue({
       ...defaultMockData,
-      mode: ["leanmass"],
+      mode: ["leanmass", () => {}],
       deltas: [{ period: "week", description: "1 week ago", delta: 1.5 }],
     } as any);
-
     render(<Deltas />);
-
     expect(screen.getByText("Lean Mass Changes Over Time")).toBeInTheDocument();
   });
 
@@ -118,10 +126,7 @@ describe("Deltas", () => {
       ],
       deltas: [{ period: "week", description: "1 week ago", delta: -2 }],
     } as any);
-
     render(<Deltas />);
-
-    // Should calculate intended direction as negative (160 - 180 = -20)
     expect(screen.getByText(/Since 1 week ago:/)).toBeInTheDocument();
   });
 
@@ -135,9 +140,7 @@ describe("Deltas", () => {
       } as any,
       deltas: [{ period: "week", description: "1 week ago", delta: -2 }],
     } as any);
-
     render(<Deltas />);
-
     expect(screen.getByText(/Since 1 week ago:/)).toBeInTheDocument();
   });
 
@@ -151,10 +154,7 @@ describe("Deltas", () => {
       } as any,
       deltas: [{ period: "week", description: "1 week ago", delta: -0.9 }],
     } as any);
-
     render(<Deltas />);
-
-    // formatMeasurement should be called with metric: true
     expect(screen.getByText(/Since 1 week ago:/)).toBeInTheDocument();
   });
 
@@ -168,14 +168,85 @@ describe("Deltas", () => {
         { period: "year", description: "1 year ago", delta: -30 },
       ],
     } as any);
-
     render(<Deltas />);
-
     const deltas = screen.getAllByText(/Since .* ago:/);
     expect(deltas).toHaveLength(4);
     expect(deltas[0]).toHaveTextContent("Since 1 week ago:");
     expect(deltas[1]).toHaveTextContent("Since 1 month ago:");
     expect(deltas[2]).toHaveTextContent("Since 3 months ago:");
     expect(deltas[3]).toHaveTextContent("Since 1 year ago:");
   });
+
+  it("shows weekly rate sentence for weight", () => {
+    mockUseDashboardData.mockReturnValue(
+      withDeltas({
+        mode: ["weight", () => {}],
+        isMe: true,
+        activeSlope: -0.1,
+        profile: { ...(defaultMockData.profile as any), useMetric: false } as any,
+      }) as any,
+    );
+    render(<Deltas />);
+    expect(screen.getByText(/You are losing/)).toBeInTheDocument();
+    expect(screen.getByText("0.7 lb")).toBeInTheDocument();
+    expect(screen.getAllByText((content) => content.includes("per week")).length).toBeGreaterThan(0);
+  });
+
+  it("shows weekly rate sentence for fat percent", () => {
+    mockUseDashboardData.mockReturnValue(
+      withDeltas({
+        mode: ["fatpercent", () => {}],
+        isMe: true,
+        activeSlope: 0.02,
+        profile: { ...(defaultMockData.profile as any), useMetric: false } as any,
+      }) as any,
+    );
+    render(<Deltas />);
+    expect(screen.getByText(/You are gaining/)).toBeInTheDocument();
+    expect(screen.getByText((_, node) => !!node && node.tagName === "STRONG" && /%$/.test(node.textContent || ""))).toBeInTheDocument();
+    expect(screen.getAllByText((content) => content.includes("per week")).length).toBeGreaterThan(0);
+    expect(screen.getByText(/of body fat/)).toBeInTheDocument();
+  });
+
+  it("shows weekly rate sentence for fat mass (metric)", () => {
+    mockUseDashboardData.mockReturnValue(
+      withDeltas({
+        mode: ["fatmass", () => {}],
+        isMe: true,
+        activeSlope: -0.05,
+        profile: { ...(defaultMockData.profile as any), useMetric: true } as any,
+      }) as any,
+    );
+    render(<Deltas />);
+    expect(screen.getByText(/You are losing/)).toBeInTheDocument();
+    expect(screen.getByText((_, node) => !!node && node.tagName === "STRONG" && /kg$/.test(node.textContent || ""))).toBeInTheDocument();
+    expect(screen.getAllByText((content) => content.includes("per week")).length).toBeGreaterThan(0);
+    expect(screen.getByText(/of fat mass/)).toBeInTheDocument();
+  });
+
+  it("shows weekly rate sentence for lean mass (metric)", () => {
+    mockUseDashboardData.mockReturnValue(
+      withDeltas({
+        mode: ["leanmass", () => {}],
+        isMe: true,
+        activeSlope: 0.03,
+        profile: { ...(defaultMockData.profile as any), useMetric: true } as any,
+      }) as any,
+    );
+    render(<Deltas />);
+    expect(screen.getByText(/You are gaining/)).toBeInTheDocument();
+    expect(screen.getByText(/of lean mass/)).toBeInTheDocument();
+  });
+
+  it("uses third-person wording when not viewing own profile", () => {
+    mockUseDashboardData.mockReturnValue(
+      withDeltas({
+        isMe: false,
+        activeSlope: -0.1,
+        profile: { ...(defaultMockData.profile as any), firstName: "Test", useMetric: false } as any,
+      }) as any,
+    );
+    render(<Deltas />);
+    expect(screen.getByText(/Test is losing/)).toBeInTheDocument();
+  });
 });

apps/web/src/components/dashboard/deltas.tsx

@@ -1,21 +1,20 @@
+import { Heading } from "@/components/common/heading";
 import { Modes } from "@/lib/core/interfaces";
 import { formatMeasurement } from "@/lib/core/numbers";
 import { useDashboardData } from "@/lib/dashboard/hooks";
-import { Heading } from "@/components/common/heading";
+import { cn } from "@/lib/utils";
 import ChangeArrow from "./change-arrow";
 
 const Deltas = () => {
   const {
     deltas,
     mode: [mode],
     dataPoints,
-    profile: { useMetric, plannedPoundsPerWeek, goalWeight },
+    activeSlope,
+    profile: { useMetric, plannedPoundsPerWeek, goalWeight, firstName },
+    isMe,
   } = useDashboardData();
 
-  if (deltas.length === 0) {
-    return null;
-  }
-
   const last = dataPoints[dataPoints.length - 1];
   let intendedDirection: number;
   if (mode === "weight") {
@@ -26,11 +25,27 @@ const Deltas = () => {
     intendedDirection = 1;
   }
 
+  const weeklyRate = activeSlope * 7;
+  const isGaining = weeklyRate > 0;
+  const absFormatted = formatMeasurement(Math.abs(weeklyRate), { type: mode, metric: useMetric, units: true, sign: false });
+  let nounPhrase = "";
+  if (mode === "fatpercent") {
+    nounPhrase = " of body fat";
+  } else if (mode === "fatmass") {
+    nounPhrase = " of fat mass";
+  } else if (mode === "leanmass") {
+    nounPhrase = " of lean mass";
+  }
+  const verb = isGaining ? "gaining" : "losing";
+
   return (
     <div>
       <Heading level={3} className="mb-3">
         {Modes[mode]} Changes Over Time
       </Heading>
+      <div className={cn("mt-2", deltas.length > 0 ? "mb-4" : "mb-0")}>
+        {isMe ? "You are" : `${firstName} is`} {verb} <strong>{absFormatted}</strong> {nounPhrase} per week
+      </div>
       <div className="space-y-1">
         {deltas.map((d) => (
           <div key={d.period}>

apps/web/src/components/dashboard/stats.test.tsx

@@ -53,9 +53,8 @@ describe("Stats", () => {
 
       render(<Stats />);
 
-      expect(screen.getByText(/You are losing/)).toBeInTheDocument();
-      expect(screen.getByText("1.4 lb/week")).toBeInTheDocument(); // 0.2 * 7
-      expect(screen.getByText(/of total weight/)).toBeInTheDocument();
+      // Weekly rate sentence removed from Stats; ensure component renders basic stats
+      expect(screen.getByText(/Overall Weight Statistics/)).toBeInTheDocument();
     });
 
     it("displays gaining weight stats", () => {
@@ -66,8 +65,8 @@ describe("Stats", () => {
 
       render(<Stats />);
 
-      expect(screen.getByText(/You are gaining/)).toBeInTheDocument();
-      expect(screen.getByText("1.1 lb/week")).toBeInTheDocument(); // 0.15 * 7, rounded
+      // Weekly rate sentence removed from Stats; ensure component renders basic stats
+      expect(screen.getByText(/Overall Weight Statistics/)).toBeInTheDocument();
     });
 
     it("displays metric units when enabled", () => {
@@ -82,7 +81,8 @@ describe("Stats", () => {
 
       render(<Stats />);
 
-      expect(screen.getByText("0.6 kg/week")).toBeInTheDocument(); // 0.09 * 7
+      // Weekly rate sentence removed from Stats; ensure component renders basic stats
+      expect(screen.getByText(/Overall Weight Statistics/)).toBeInTheDocument();
     });
 
     it("uses third person when not viewing own profile", () => {
@@ -93,7 +93,6 @@ describe("Stats", () => {
 
       render(<Stats />);
 
-      expect(screen.getByText(/Test is losing/)).toBeInTheDocument();
       expect(screen.getByText(/They have been tracking their weight/)).toBeInTheDocument();
     });
   });
@@ -363,8 +362,8 @@ describe("Stats", () => {
 
       render(<Stats />);
 
-      expect(screen.getByText(/You are losing/)).toBeInTheDocument();
-      expect(screen.getByText("0.0 lb/week")).toBeInTheDocument();
+      // Weekly rate sentence removed from Stats; ensure component renders basic stats
+      expect(screen.getByText(/Overall Weight Statistics/)).toBeInTheDocument();
     });
 
     it("handles single measurement", () => {
@@ -398,7 +397,6 @@ describe("Stats", () => {
       expect(screen.queryByText(/will reach your goal (on|in)\/around/)).not.toBeInTheDocument();
 
       // Should still show basic stats
-      expect(screen.getByText(/You are losing/)).toBeInTheDocument();
       expect(screen.getByText(/to lose to reach your goal/)).toBeInTheDocument();
     });
   });

apps/web/src/components/dashboard/stats.tsx

@@ -9,7 +9,7 @@ const Stats = () => {
   const {
     weightSlope,
     measurements,
-    profile: { useMetric, goalWeight, showCalories, plannedPoundsPerWeek, firstName },
+    profile: { useMetric, goalWeight, showCalories, plannedPoundsPerWeek },
     isMe,
   } = useDashboardData();
 
@@ -34,10 +34,6 @@ const Stats = () => {
         Overall Weight Statistics
       </Heading>
       <ul className="space-y-1">
-        <li>
-          {isMe ? "You are" : `${firstName} is`} {weightSlope > 0 ? "gaining" : "losing"} <strong>{formatWeight(Math.abs(gainPerWeek), useMetric)}/week</strong>{" "}
-          of total weight.{" "}
-        </li>
         <li className="mt-4">
           {isMe ? "You have" : "They have"} been tracking {isMe ? "your" : "their"} weight for <strong>{duration}</strong>.
         </li>