From f6be0c8439daf5aeb74349abeb19465d3f30f282 Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Wed, 2 Sep 2026 22:58:44 +0200
Subject: [PATCH] fix(purchase): one control language in the purchase dialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 `&times;` 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>
---
 src/ui/components/BulkLines.tsx      | 15 +++--
 src/ui/components/PlanEditor.tsx     |  4 +-
 src/ui/components/PurchaseDialog.tsx | 86 +++++++++++++++++-----------
 src/ui/components/SplitEditor.tsx    | 42 ++++++++------
 4 files changed, 89 insertions(+), 58 deletions(-)

diff --git a/src/ui/components/BulkLines.tsx b/src/ui/components/BulkLines.tsx
index 66098a8..8a18b02 100644
--- a/src/ui/components/BulkLines.tsx
+++ b/src/ui/components/BulkLines.tsx
@@ -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>
diff --git a/src/ui/components/PlanEditor.tsx b/src/ui/components/PlanEditor.tsx
index 107f09b..2753c3e 100644
--- a/src/ui/components/PlanEditor.tsx
+++ b/src/ui/components/PlanEditor.tsx
@@ -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>
diff --git a/src/ui/components/PurchaseDialog.tsx b/src/ui/components/PurchaseDialog.tsx
index dd47c43..d924217 100644
--- a/src/ui/components/PurchaseDialog.tsx
+++ b/src/ui/components/PurchaseDialog.tsx
@@ -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>
+  );
+}
diff --git a/src/ui/components/SplitEditor.tsx b/src/ui/components/SplitEditor.tsx
index 8ee36c3..b99dbec 100644
--- a/src/ui/components/SplitEditor.tsx
+++ b/src/ui/components/SplitEditor.tsx
@@ -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({