From e922adcfd3a92109625a717f8c07e8b3502c3fc5 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 27 Feb 2026 22:58:41 +0000
Subject: [PATCH] Extract NumberInput component with nudge buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Extracts the number input with -/+ nudge buttons from the main calculator
into a reusable NumberInput component, and uses it for the Maxes page
weight inputs (with ±5 step).

https://claude.ai/code/session_01GRvYTjGFpp5DbYqZNtfkFP
---
 src/App.tsx         | 85 +++++++++++----------------------------------
 src/NumberInput.tsx | 70 +++++++++++++++++++++++++++++++++++++
 2 files changed, 90 insertions(+), 65 deletions(-)
 create mode 100644 src/NumberInput.tsx

diff --git a/src/App.tsx b/src/App.tsx
index c851379..ec559e5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,9 +7,9 @@ import {
 import { useDeferredValue, useMemo } from "react";
 import { useMassStorage, Bar, Max, Plate } from "./plate-db";
 import MassConfig from "./MassConfig";
-import { useAutoRepeat } from "./useAutoRepeat";
 import { useWeightSet } from "./useWeightSet";
 import { numbdfined } from "./utils";
+import { NumberInput } from "./NumberInput";
 import { HiddenDeleteFieldset } from "./HiddenDeleteFieldset";
 import BarView from "./BarView";
 import { Link, Route, Routes } from "react-router";
@@ -139,19 +139,6 @@ function BarComputer({
   const weightSet = useWeightSet();
   const inWeightSet = target != null && weightSet.weights.includes(target);
 
-  const nudgeDown = useAutoRepeat(() => {
-    const nudge = activeBar?.sliderMinStep;
-    if (nudge == null) return;
-    const prev = Math.ceil((target ?? 0) / nudge) * nudge - nudge;
-    if (weightMin != null && prev >= weightMin) dispatchState({ target: prev });
-  });
-  const nudgeUp = useAutoRepeat(() => {
-    const nudge = activeBar?.sliderMinStep;
-    if (nudge == null) return;
-    const next = Math.floor((target ?? 0) / nudge) * nudge + nudge;
-    if (weightMax != null && next <= weightMax) dispatchState({ target: next });
-  });
-
   return (
     <>
       <select
@@ -204,48 +191,20 @@ function BarComputer({
             ))}
           </datalist>
           <div style={{ display: "flex", gap: "0.5rem", alignItems: "start" }}>
-            <fieldset role="group" style={{ flex: 1 }}>
-              {activeBar?.sliderMinStep != null && (
-                <>
-                  <button
-                    type="button"
-                    className="secondary"
-                    disabled={activeBar?.sliderMinStep == null}
-                    style={{ width: "auto", paddingInline: "0.5rem" }}
-                    {...nudgeDown}
-                  >
-                    -{activeBar.sliderMinStep}
-                  </button>
-                </>
-              )}
-              <input
-                id="target-number"
-                type="number"
-                placeholder="work weight"
-                value={target ?? ""}
-                min={weightMin}
-                max={weightMax}
-                step={weightStep}
-                onFocus={clear}
-                onKeyDown={onEnterBlur}
-                onBlur={scrollToTop}
-                onChange={(e) =>
-                  dispatchState({ target: numbdfined(e.target.value) })
-                }
-                aria-invalid={!validTarget}
-              />
-              {activeBar?.sliderMinStep != null && (
-                <button
-                  type="button"
-                  className="secondary"
-                  disabled={activeBar?.sliderMinStep == null}
-                  style={{ width: "auto", paddingInline: "0.5rem" }}
-                  {...nudgeUp}
-                >
-                  {activeBar.sliderMinStep}+
-                </button>
-              )}
-            </fieldset>
+            <NumberInput
+              value={target}
+              onChange={(v) => dispatchState({ target: v })}
+              step={activeBar?.sliderMinStep}
+              min={weightMin}
+              max={weightMax}
+              style={{ flex: 1 }}
+              id="target-number"
+              placeholder="work weight"
+              onFocus={clear}
+              onKeyDown={onEnterBlur}
+              onBlur={scrollToTop}
+              aria-invalid={!validTarget}
+            />
             {target != null && (
               <button
                 type="button"
@@ -447,15 +406,11 @@ function MaxEditor({
         defaultValue={max.label ?? ""}
         onChange={(e) => putMax?.({ ...max, label: e.target.value })}
       />
-      <input
-        defaultValue={max.weight ?? ""}
-        type="number"
-        onChange={(e) =>
-          putMax?.({
-            ...max,
-            weight: numbdfined(e.target.value) ?? null,
-          })
-        }
+      <NumberInput
+        value={max.weight}
+        onChange={(v) => putMax?.({ ...max, weight: v ?? null })}
+        step={5}
+        min={0}
       />
     </HiddenDeleteFieldset>
   );
diff --git a/src/NumberInput.tsx b/src/NumberInput.tsx
new file mode 100644
index 0000000..e76c9bc
--- /dev/null
+++ b/src/NumberInput.tsx
@@ -0,0 +1,70 @@
+import { useAutoRepeat } from "./useAutoRepeat";
+import { numbdfined } from "./utils";
+
+export function NumberInput({
+  value,
+  onChange,
+  step,
+  min,
+  max,
+  style,
+  ...inputProps
+}: {
+  value: number | null | undefined;
+  onChange: (value: number | undefined) => void;
+  step?: number;
+  min?: number;
+  max?: number;
+  style?: React.CSSProperties;
+} & Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "value" | "onChange" | "type" | "step" | "min" | "max" | "style"
+>) {
+  const nudgeDown = useAutoRepeat(() => {
+    if (step == null) return;
+    const prev = Math.ceil((value ?? 0) / step) * step - step;
+    if (min != null && prev < min) return;
+    onChange(prev);
+  });
+
+  const nudgeUp = useAutoRepeat(() => {
+    if (step == null) return;
+    const next = Math.floor((value ?? 0) / step) * step + step;
+    if (max != null && next > max) return;
+    onChange(next);
+  });
+
+  return (
+    <fieldset role="group" style={style}>
+      {step != null && (
+        <button
+          type="button"
+          className="secondary"
+          style={{ width: "auto", paddingInline: "0.5rem" }}
+          {...nudgeDown}
+        >
+          -{step}
+        </button>
+      )}
+      <input
+        type="number"
+        value={value ?? ""}
+        min={min}
+        max={max}
+        step={step}
+        onChange={(e) => onChange(numbdfined(e.target.value))}
+        {...inputProps}
+      />
+      {step != null && (
+        <button
+          type="button"
+          className="secondary"
+          style={{ width: "auto", paddingInline: "0.5rem" }}
+          {...nudgeUp}
+        >
+          {step}+
+        </button>
+      )}
+    </fieldset>
+  );
+}