fix: prevent ToggleGroup deselection in single mode

ToggleGroup now implements proper radio button behavior by default,
preventing deselection and ensuring one option always remains selected.
Remove redundant protection logic from individual usages.

fix(settings): weight unit toggle now marks form as dirty
- Add shouldDirty: true to setValue calls in handleUnitChange
- Ensures Save Settings button is enabled when unit preference changes

docs: clarify commit message guidelines to prevent duplicate changelog entries

Author: ervwalter

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

@@ -20,15 +20,7 @@ const Buttons = () => {
 
   return (
     <div className="flex flex-col-reverse gap-4 md:flex-row print:hidden">
-      <ToggleGroup
-        type="single"
-        value={timeRange}
-        onValueChange={(value) => {
-          if (value && value !== "") setTimeRange(value as TimeRange);
-        }}
-        defaultValue="4w"
-        aria-label="Time Range"
-      >
+      <ToggleGroup type="single" value={timeRange} onValueChange={(value) => setTimeRange(value as TimeRange)} defaultValue="4w" aria-label="Time Range">
         <ToggleGroupItem value="4w">
           <span className="lg:hidden">4 wk</span>
           <span className="hidden lg:inline">4 weeks</span>
@@ -49,15 +41,7 @@ const Buttons = () => {
         {!isMobile && <ToggleGroupItem value="explore">Explore</ToggleGroupItem>}
       </ToggleGroup>
 
-      <ToggleGroup
-        type="single"
-        value={mode}
-        onValueChange={(value) => {
-          if (value && value !== "") setMode(value as Mode);
-        }}
-        defaultValue="weight"
-        aria-label="Mode"
-      >
+      <ToggleGroup type="single" value={mode} onValueChange={(value) => setMode(value as Mode)} defaultValue="weight" aria-label="Mode">
         <ToggleGroupItem value="weight">Weight</ToggleGroupItem>
         <ToggleGroupItem value="fatpercent">Fat %</ToggleGroupItem>
         <ToggleGroupItem value="fatmass">Fat Mass</ToggleGroupItem>

apps/web/src/components/download/view-toggle-buttons.tsx

@@ -20,15 +20,7 @@ export function ViewToggleButtons({ viewType, onViewChange, providerLinks }: Vie
   });
 
   return (
-    <ToggleGroup
-      type="single"
-      value={viewType}
-      onValueChange={(value) => {
-        if (value && value !== "") onViewChange(value);
-      }}
-      defaultValue="computed"
-      aria-label="View Type"
-    >
+    <ToggleGroup type="single" value={viewType} onValueChange={(value) => onViewChange(value)} defaultValue="computed" aria-label="View Type">
       <ToggleGroupItem value="computed">Computed Values</ToggleGroupItem>
       {sortedProviders.map((provider) => (
         <ToggleGroupItem key={provider.provider} value={provider.provider}>

apps/web/src/components/settings/settings.tsx

@@ -50,17 +50,17 @@ export function Settings() {
     }
 
     // Update the metric setting first
-    setValue("useMetric", newIsMetric);
+    setValue("useMetric", newIsMetric, { shouldDirty: true });
 
     // Convert planned pounds per week
     const currentPlan = currentValues.plannedPoundsPerWeek;
     if (currentPlan && currentPlan !== 0) {
       if (newIsMetric) {
         // Converting from lbs to kg (roughly divide by 2)
-        setValue("plannedPoundsPerWeek", currentPlan / 2);
+        setValue("plannedPoundsPerWeek", currentPlan / 2, { shouldDirty: true });
       } else {
         // Converting from kg to lbs (roughly multiply by 2)
-        setValue("plannedPoundsPerWeek", currentPlan * 2);
+        setValue("plannedPoundsPerWeek", currentPlan * 2, { shouldDirty: true });
       }
     }
 
@@ -70,11 +70,11 @@ export function Settings() {
       if (newIsMetric) {
         // Converting from lbs to kg (divide by 2.20462 and round)
         const kgValue = Math.round(currentGoalWeight / 2.20462);
-        setValue("goalWeight", kgValue);
+        setValue("goalWeight", kgValue, { shouldDirty: true });
       } else {
         // Converting from kg to lbs (multiply by 2.20462 and round)
         const lbsValue = Math.round(currentGoalWeight * 2.20462);
-        setValue("goalWeight", lbsValue);
+        setValue("goalWeight", lbsValue, { shouldDirty: true });
       }
     }
   };

apps/web/src/components/ui/toggle-group.test.tsx

@@ -6,23 +6,23 @@ import { ToggleGroup, ToggleGroupItem } from "./toggle-group";
 describe("ToggleGroup", () => {
   it("renders children correctly", () => {
     render(
-      <ToggleGroup type="single">
+      <ToggleGroup>
         <ToggleGroupItem value="a">Option A</ToggleGroupItem>
         <ToggleGroupItem value="b">Option B</ToggleGroupItem>
       </ToggleGroup>,
     );
 
-    // In single mode, buttons have role="radio"
+    // Always operates in single mode, buttons have role="radio"
     expect(screen.getByRole("radio", { name: "Option A" })).toBeInTheDocument();
     expect(screen.getByRole("radio", { name: "Option B" })).toBeInTheDocument();
   });
 
-  it("handles single selection mode", async () => {
+  it("handles selection", async () => {
     const handleValueChange = vi.fn();
     const user = userEvent.setup();
 
     render(
-      <ToggleGroup type="single" onValueChange={handleValueChange}>
+      <ToggleGroup onValueChange={handleValueChange}>
         <ToggleGroupItem value="a">Option A</ToggleGroupItem>
         <ToggleGroupItem value="b">Option B</ToggleGroupItem>
       </ToggleGroup>,
@@ -38,50 +38,27 @@ describe("ToggleGroup", () => {
     expect(handleValueChange).toHaveBeenCalledWith("b");
   });
 
-  it("allows deselection in single mode by default", async () => {
+  it("prevents deselection (radio button behavior)", async () => {
     const handleValueChange = vi.fn();
     const user = userEvent.setup();
 
     render(
-      <ToggleGroup type="single" onValueChange={handleValueChange} defaultValue="a">
+      <ToggleGroup onValueChange={handleValueChange} defaultValue="a">
         <ToggleGroupItem value="a">Option A</ToggleGroupItem>
         <ToggleGroupItem value="b">Option B</ToggleGroupItem>
       </ToggleGroup>,
     );
 
     const optionA = screen.getByRole("radio", { name: "Option A" });
 
-    // Click the already selected option to deselect it
+    // Click the already selected option - should not trigger onValueChange
     await user.click(optionA);
-    expect(handleValueChange).toHaveBeenCalledWith("");
-  });
-
-  it("handles multiple selection mode", async () => {
-    const handleValueChange = vi.fn();
-    const user = userEvent.setup();
-
-    render(
-      <ToggleGroup type="multiple" onValueChange={handleValueChange}>
-        <ToggleGroupItem value="a">Option A</ToggleGroupItem>
-        <ToggleGroupItem value="b">Option B</ToggleGroupItem>
-        <ToggleGroupItem value="c">Option C</ToggleGroupItem>
-      </ToggleGroup>,
-    );
-
-    // In multiple mode, buttons have role="button"
-    const optionA = screen.getByRole("button", { name: "Option A" });
-    const optionB = screen.getByRole("button", { name: "Option B" });
-
-    await user.click(optionA);
-    expect(handleValueChange).toHaveBeenCalledWith(["a"]);
-
-    await user.click(optionB);
-    expect(handleValueChange).toHaveBeenCalledWith(["a", "b"]);
+    expect(handleValueChange).not.toHaveBeenCalled();
   });
 
   it("applies correct styling to items", () => {
     render(
-      <ToggleGroup type="single" defaultValue="a">
+      <ToggleGroup defaultValue="a">
         <ToggleGroupItem value="a">Selected</ToggleGroupItem>
         <ToggleGroupItem value="b">Not Selected</ToggleGroupItem>
       </ToggleGroup>,
@@ -96,7 +73,7 @@ describe("ToggleGroup", () => {
 
   it("applies rounded corners correctly", () => {
     render(
-      <ToggleGroup type="single">
+      <ToggleGroup>
         <ToggleGroupItem value="a">First</ToggleGroupItem>
         <ToggleGroupItem value="b">Middle</ToggleGroupItem>
         <ToggleGroupItem value="c">Last</ToggleGroupItem>
@@ -114,7 +91,7 @@ describe("ToggleGroup", () => {
 
   it("removes duplicate borders between items", () => {
     render(
-      <ToggleGroup type="single">
+      <ToggleGroup>
         <ToggleGroupItem value="a">First</ToggleGroupItem>
         <ToggleGroupItem value="b">Second</ToggleGroupItem>
       </ToggleGroup>,
@@ -126,7 +103,7 @@ describe("ToggleGroup", () => {
 
   it("can be disabled", () => {
     render(
-      <ToggleGroup type="single" disabled>
+      <ToggleGroup disabled>
         <ToggleGroupItem value="a">Option A</ToggleGroupItem>
         <ToggleGroupItem value="b">Option B</ToggleGroupItem>
       </ToggleGroup>,
@@ -140,7 +117,7 @@ describe("ToggleGroup", () => {
 
   it("inherits variant and size from context", () => {
     render(
-      <ToggleGroup type="single" variant="outline" size="sm">
+      <ToggleGroup variant="outline" size="sm">
         <ToggleGroupItem value="a">Option A</ToggleGroupItem>
       </ToggleGroup>,
     );

apps/web/src/components/ui/toggle-group.tsx

@@ -10,19 +10,43 @@ const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariant
   variant: "default",
 });
 
-function ToggleGroup({
-  className,
-  variant = "outline",
-  size = "default",
-  children,
-  ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>) {
+type ToggleGroupProps = {
+  className?: string;
+  variant?: VariantProps<typeof toggleVariants>["variant"];
+  size?: VariantProps<typeof toggleVariants>["size"];
+  children: React.ReactNode;
+  type?: "single"; // Always single mode now
+  onValueChange?: (value: string) => void;
+  value?: string;
+  defaultValue?: string;
+  disabled?: boolean;
+  rovingFocus?: boolean;
+  loop?: boolean;
+  orientation?: "horizontal" | "vertical";
+  dir?: "ltr" | "rtl";
+} & Omit<React.ComponentProps<"div">, "onValueChange" | "value" | "defaultValue">;
+
+function ToggleGroup({ className, variant = "outline", size = "default", children, onValueChange, value, defaultValue, ...props }: ToggleGroupProps) {
+  const handleValueChange = React.useCallback(
+    (value: string) => {
+      // Prevent deselection - ignore empty values (radio button behavior)
+      if (value && value !== "") {
+        onValueChange?.(value);
+      }
+    },
+    [onValueChange],
+  );
+
   return (
     <ToggleGroupPrimitive.Root
       data-slot="toggle-group"
       data-variant={variant}
       data-size={size}
       className={cn("group/toggle-group inline-flex items-center rounded-md", className)}
+      type="single"
+      value={value}
+      defaultValue={defaultValue}
+      onValueChange={handleValueChange}
       {...props}
     >
       <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>

docs/steering/conventions.md

@@ -121,34 +121,55 @@ Follow conventional commit format with these TrendWeight-specific rules:
 - `test:` - Adding or updating tests
 - `chore:` - Maintenance tasks, dependency updates
 
-#### Multi-Topic Commits
-When a single commit spans multiple major unrelated areas, use footers to document each major topic:
+#### Single vs Multi-Topic Commits
+
+**Single Topic Commits (Preferred)**
+Most commits should focus on one specific change:
+
+```
+fix: settings form not marking dirty when weight unit changes
+
+Add shouldDirty: true to setValue calls in handleUnitChange to ensure
+the Save Settings button is enabled when unit preference changes.
+```
+
+**Multi-Topic Commits (Use Sparingly)**
+Only when you have multiple genuinely UNRELATED changes that must go together, use footers:
 
 ```
-feat: implement backend computation with UI improvements
+feat: add user authentication system
 
-Add server-side weight trend calculations and fix several frontend issues.
+Implement core authentication with JWT tokens and user registration.
 
-feat(api): add MeasurementComputationService for server-side trend calculations
-  - Implement exponentially smoothed moving average (alpha=0.1)
-  - Add ComputedMeasurement and SourceMeasurement models
-  - Update MeasurementsResponse to use computedMeasurements array
-  - Support optional includeSource parameter for raw data access
+fix(api): resolve memory leak in background sync process
+  - Dispose HttpClient instances properly
+  - Cancel long-running tasks on shutdown
 
-refactor(web): improve progress tracking system
-  - Centralize toast management in SyncProgressProvider to prevent duplicates
-  - Simplify useSyncProgress API by hiding internal functions
-  - Remove redundant useSyncProgressId hook
-  - Fix React hooks rule violations with proper useWithProgress wrapper
+docs: update deployment guide with new environment variables
+```
+
+**Critical Rules:**
+- **Main message describes ONE specific change**, not a summary of multiple changes
+- **Only use footers for additional UNRELATED changes** that deserve separate changelog entries  
+- **Never create a footer that restates the main message** - this creates duplicate changelog entries
+- **If all changes are related, group them under the main message without footers**
+
+**Bad Example (creates duplicate changelog entries):**
+```
+fix: improve form behavior
 
-fix(web): download page skeleton width now matches actual table dimensions
+Fix multiple form-related issues.
 
-docs: restructure documentation with steering documents and commit guidelines
+fix(forms): settings form not marking dirty when weight unit changes
 ```
 
-Only use footers for major topics - group related changes together rather than creating a footer for every small change. Footers can be multi-line to provide details.
+**Good Example:**
+```
+fix: settings form not marking dirty when weight unit changes
 
-**Important**: Don't create footers that simply restate the main commit message. Only use footers when you have genuinely different types of changes that deserve separate changelog entries.
+Add shouldDirty: true to setValue calls in handleUnitChange to ensure
+the Save Settings button is enabled when unit preference changes.
+```
 
 #### Rules
 - **Never use "BREAKING CHANGE"** - this is an application, not a library