fix(rules): review and harden rule-history editing

src/ui/components/RuleHistory.tsx

@@ -27,12 +27,13 @@ const MONTH_ID = /^\d{4}-(0[1-9]|1[0-2])$/;
  * so rather than letting it look like an append.
  */
 export function RuleHistory({ post }: Props) {
-  const { mutate } = useMutate();
+  const { mutate, error, clearError } = useMutate();
   const [from, setFrom] = useState<string>(currentMonth);
   const [kind, setKind] = useState<Rule["kind"]>("percentOfIncome");
   // Held as text, not a number, so the field can be cleared and can hold a
   // half-typed "12." mid-entry. Parsed once, on submit.
   const [value, setValue] = useState<string>("");
+  const versions = [...post.rules].sort((a, b) => a.from.localeCompare(b.from));
 
   const replaces = post.rules.some((v) => v.from === from);
   const monthOk = MONTH_ID.test(from);
@@ -44,7 +45,8 @@ export function RuleHistory({ post }: Props) {
       kind === "fixed"
         ? { kind: "fixed", amount: { amount, currency: post.currency } }
         : { kind: "percentOfIncome", percent: amount };
-    mutate((draft) => setRuleFrom(draft, post.id, from, rule));
+    clearError();
+    void mutate((draft) => setRuleFrom(draft, post.id, from, rule));
   }
 
   return (
@@ -64,7 +66,7 @@ export function RuleHistory({ post }: Props) {
             </tr>
           </thead>
           <tbody>
-            {post.rules.map((version) => (
+            {versions.map((version) => (
               <tr key={version.from} className="border-t">
                 <td className="py-1 font-money">{version.from}</td>
                 <td className="py-1">
@@ -76,9 +78,10 @@ export function RuleHistory({ post }: Props) {
                   <Button
                     size="sm"
                     variant="ghost"
-                    onClick={() =>
-                      mutate((draft) => removeRuleFrom(draft, post.id, version.from))
-                    }
+                    onClick={() => {
+                      clearError();
+                      void mutate((draft) => removeRuleFrom(draft, post.id, version.from));
+                    }}
                   >
                     remove
                   </Button>
@@ -137,6 +140,7 @@ export function RuleHistory({ post }: Props) {
           </span>
         )}
       </div>
+      {error && <p role="alert" className="text-sm text-destructive">Could not save: {error}</p>}
     </div>
   );
 }