fix(purchase): one control language in the purchase dialog

Adopts NativeSelect for the three date/post/currency selects and the split editor's post picker, and Segmented for the one/many and percentages/amounts switches. The currency select now matches the Total input beside it exactly: same height, radius, border and text indent. The rest is hit areas and edges: - "set exact date" / "use the month only" were bare buttons with no padding at all — a 15px target under a 36px field, unhittable on a phone. Now a 24px box, with a negative margin so the text still lines up with the field's left edge. - The split row's `remove` and the plan's `remove plan` ran past the dialog's right padding; both now end on it. - The bulk-entry remove was a `×` glyph in a 20px box. It uses lucide's X, the icon family the dialog's own close button already uses. - The split editor's post select gains `min-w-0` via NativeSelect, so `flex-1` can shrink below the widest option — the actual cause of the dialog padding bug fixed in the previous commit. - The "rounding" radio label gets a real vertical hit area. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-02 22:58:44 +02:00
parent 85ba899059
commit f6be0c8439
4 changed files with 89 additions and 58 deletions
@@ -1,6 +1,8 @@
 import { useRef } from "react";
+import { XIcon } from "lucide-react";
 import { useDataset } from "../hooks/useDataset.ts";
 import { digitsFor } from "../../domain/currencies.ts";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { formatMoney } from "../format.ts";
@@ -113,15 +115,20 @@ export function BulkLines({ draft, onChange }: Props) {
              }}
            />

-            <button
+            {/* Was a bare `&times;` in a 20px-wide box: a text glyph doing an
+                icon's job, at a size nothing could hit. lucide's X is the icon
+                family the dialog's own close button already uses. */}
+            <Button
              type="button"
              tabIndex={-1}
+              variant="ghost"
+              size="icon-xs"
              aria-label={`Remove line ${index + 1}`}
-              className="w-5 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 hover:text-[var(--overspend)]"
+              className="shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 hover:text-overspend"
              onClick={() => removeLine(index)}
            >
-              &times;
-            </button>
+              <XIcon />
+            </Button>
          </div>
        ))}
      </div>
@@ -61,7 +61,7 @@ export function PlanEditor({ draft, onChange }: Props) {
  }

  return (
-    <fieldset className="space-y-3 rounded border p-3">
+    <fieldset className="space-y-3 rounded-md border border-budget-rule p-3">
      <div className="flex items-center justify-between">
        <Label>Finance plan</Label>
        <div className="flex items-center gap-2 text-xs">
@@ -79,7 +79,7 @@ export function PlanEditor({ draft, onChange }: Props) {
              }
            }}
          />
-          <Button type="button" size="sm" variant="ghost" onClick={() => onChange(withoutPlan(draft))}>
+          <Button type="button" size="xs" variant="ghost" className="-mr-2" onClick={() => onChange(withoutPlan(draft))}>
            remove plan
          </Button>
        </div>
@@ -9,7 +9,9 @@ import {
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { NativeSelect } from "@/components/ui/native-select";
 import { Label } from "@/components/ui/label";
+import { Segmented } from "./Segmented.tsx";
 import { SplitEditor } from "./SplitEditor.tsx";
 import { PlanEditor } from "./PlanEditor.tsx";
 import { BulkLines } from "./BulkLines.tsx";
@@ -108,19 +110,15 @@ export function PurchaseDialog({ monthId, purchase, trigger }: Props) {
        </DialogHeader>

        {!purchase && (
-          <div className="flex gap-1">
-            {(["one", "many"] as const).map((option) => (
-              <Button
-                key={option}
-                type="button"
-                size="sm"
-                variant={mode === option ? "default" : "outline"}
-                onClick={() => setMode(option)}
-              >
-                {option === "one" ? "One purchase" : "Many lines"}
-              </Button>
-            ))}
-          </div>
+          <Segmented
+            label="How many purchases to add"
+            value={mode}
+            onChange={setMode}
+            options={[
+              { value: "one", label: "One purchase" },
+              { value: "many", label: "Many lines" },
+            ]}
+          />
        )}

        <div className="space-y-4">
@@ -142,9 +140,7 @@ export function PurchaseDialog({ monthId, purchase, trigger }: Props) {
                      setBulk((b) => ({ ...b, date }));
                    }}
                  />
-                  <button
-                    type="button"
-                    className="text-xs text-muted-foreground underline"
+                  <DateModeToggle
                    onClick={() =>
                      setBulk((b) => ({
                        ...b,
@@ -153,13 +149,12 @@ export function PurchaseDialog({ monthId, purchase, trigger }: Props) {
                    }
                  >
                    {bulk.date.length > 7 ? "use the month only" : "set exact date"}
-                  </button>
+                  </DateModeToggle>
                </div>
                <div className="space-y-1">
                  <Label htmlFor="bulk-post">Post</Label>
-                  <select
+                  <NativeSelect
                    id="bulk-post"
-                    className="h-9 w-full rounded border bg-background px-2 text-sm"
                    value={bulk.postId}
                    onChange={(event) => {
                      const postId = event.target.value;
@@ -172,13 +167,12 @@ export function PurchaseDialog({ monthId, purchase, trigger }: Props) {
                        {post.name}
                      </option>
                    ))}
-                  </select>
+                  </NativeSelect>
                </div>
                <div className="space-y-1">
                  <Label htmlFor="bulk-currency">Currency</Label>
-                  <select
+                  <NativeSelect
                    id="bulk-currency"
-                    className="h-9 w-full rounded border bg-background px-2 text-sm"
                    value={bulk.currency}
                    onChange={(event) => {
                      const currency = event.target.value as typeof bulk.currency;
@@ -190,7 +184,7 @@ export function PurchaseDialog({ monthId, purchase, trigger }: Props) {
                        {currency}
                      </option>
                    ))}
-                  </select>
+                  </NativeSelect>
                </div>
              </div>

@@ -220,24 +214,20 @@ export function PurchaseDialog({ monthId, purchase, trigger }: Props) {
                      setDraft((d) => ({ ...d, date }));
                    }}
                  />
-                  <button
-                    type="button"
-                    className="text-xs text-muted-foreground underline"
+                  <DateModeToggle
                    onClick={() => setDraft((d) => ({ ...d, date: d.date.slice(0, 7) }))}
                  >
                    use the month only
-                  </button>
+                  </DateModeToggle>
                </>
              ) : (
                <>
                  <Input id="purchase-date" value={draft.date} readOnly className="font-money" />
-                  <button
-                    type="button"
-                    className="text-xs text-muted-foreground underline"
+                  <DateModeToggle
                    onClick={() => setDraft((d) => ({ ...d, date: `${d.date}-01` }))}
                  >
                    set exact date
-                  </button>
+                  </DateModeToggle>
                </>
              )}
            </div>
@@ -275,9 +265,8 @@ export function PurchaseDialog({ monthId, purchase, trigger }: Props) {
            </div>
            <div className="space-y-1">
              <Label htmlFor="purchase-currency">Currency</Label>
-              <select
+              <NativeSelect
                id="purchase-currency"
-                className="h-9 w-full rounded border bg-background px-2 text-sm"
                value={draft.currency}
                onChange={(event) =>
                  setDraft({ ...draft, currency: event.target.value as typeof draft.currency })
@@ -288,7 +277,7 @@ export function PurchaseDialog({ monthId, purchase, trigger }: Props) {
                    {currency}
                  </option>
                ))}
-              </select>
+              </NativeSelect>
            </div>
          </div>

@@ -346,3 +335,32 @@ export function PurchaseDialog({ monthId, purchase, trigger }: Props) {
    </Dialog>
  );
 }
+
+/**
+ * "set exact date" / "use the month only", under the date field.
+ *
+ * Was a bare `<button>` with no padding at all: a 15px-tall hit target under a
+ * 36px field, which is under the 24px minimum and impossible to hit on a
+ * phone. `size="xs"` gives it a real 24px box, and the negative left margin
+ * cancels the button's own padding so the text still lines up with the field's
+ * left edge rather than sitting 8px in from it.
+ */
+function DateModeToggle({
+  onClick,
+  children,
+}: {
+  onClick: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="xs"
+      className="-ml-2 font-normal text-muted-foreground underline decoration-dotted underline-offset-2"
+      onClick={onClick}
+    >
+      {children}
+    </Button>
+  );
+}
@@ -2,7 +2,9 @@ import { Button } from "@/components/ui/button";
 import { useDataset } from "../hooks/useDataset.ts";
 import { digitsFor } from "../../domain/currencies.ts";
 import { Input } from "@/components/ui/input";
+import { NativeSelect } from "@/components/ui/native-select";
 import { Label } from "@/components/ui/label";
+import { Segmented } from "./Segmented.tsx";
 import { formatAmount } from "../format.ts";
 import type { PurchaseDraft, SplitDraft } from "../purchaseForm.ts";
 import { splitBalance } from "../purchaseForm.ts";
@@ -39,25 +41,24 @@ export function SplitEditor({ draft, posts, onChange }: Props) {
    <fieldset className="space-y-3">
      <div className="flex items-center justify-between">
        <Label>Split across posts</Label>
-        <div className="flex gap-1 text-xs">
-          {(["percent", "fixed"] as const).map((mode) => (
-            <Button
-              key={mode}
-              type="button"
-              size="sm"
-              variant={draft.splitMode === mode ? "default" : "outline"}
-              onClick={() => onChange({ ...draft, splitMode: mode })}
-            >
-              {mode === "percent" ? "Percentages" : "Amounts"}
-            </Button>
-          ))}
-        </div>
+        <Segmented
+          label="Split by"
+          value={draft.splitMode}
+          onChange={(splitMode) => onChange({ ...draft, splitMode })}
+          options={[
+            { value: "percent", label: "Percentages" },
+            { value: "fixed", label: "Amounts" },
+          ]}
+        />
      </div>

      {draft.splits.map((split, index) => (
        <div key={index} className="flex items-center gap-2">
-          <select
-            className="h-9 flex-1 rounded border bg-background px-2 text-sm"
+          {/* `min-w-0` comes from NativeSelect. Without it `flex-1` could not
+              shrink below the widest option, and this row's min-content width
+              was what pushed the whole dialog past its own padding. */}
+          <NativeSelect
+            className="flex-1"
            value={split.postId}
            onChange={(event) => updateSplit(index, { postId: event.target.value })}
          >
@@ -67,7 +68,7 @@ export function SplitEditor({ draft, posts, onChange }: Props) {
                {post.name}
              </option>
            ))}
-          </select>
+          </NativeSelect>

          <Input
            type="number"
@@ -80,10 +81,14 @@ export function SplitEditor({ draft, posts, onChange }: Props) {
          />
          <span className="w-10 text-xs text-muted-foreground">{unit}</span>

-          <label className="flex items-center gap-1 text-xs" title="This post absorbs rounding">
+          <label
+            className="flex shrink-0 items-center gap-1.5 rounded-md py-1.5 text-xs"
+            title="This post absorbs rounding"
+          >
            <input
              type="radio"
              name="absorber"
+              className="size-3.5"
              checked={split.absorbsRemainder}
              onChange={() => setAbsorber(index)}
            />
@@ -92,8 +97,9 @@ export function SplitEditor({ draft, posts, onChange }: Props) {

          <Button
            type="button"
-            size="sm"
+            size="xs"
            variant="ghost"
+            className="-mr-2 shrink-0"
            disabled={draft.splits.length === 1}
            onClick={() =>
              onChange({