Improve expenses mobile layout and payment flow

apps/frontend/src/features/expenses/components/PayExpenseDialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { useForm, Controller } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -29,6 +29,7 @@ interface PayExpenseDialogProps {
 
 export function PayExpenseDialog({ expense, open, onOpenChange }: PayExpenseDialogProps) {
   const { payExpense } = useExpensesContext();
+  const amountInputRef = useRef<HTMLInputElement | null>(null);
 
   const {
     register,
@@ -43,6 +44,9 @@ export function PayExpenseDialog({ expense, open, onOpenChange }: PayExpenseDial
       paymentDate: undefined,
     },
   });
+  const { ref: amountPayedRef, ...amountPayedField } = register("amountPayed", {
+    setValueAs: (value) => Number(value),
+  });
 
   useEffect(() => {
     if (expense) {
@@ -53,6 +57,17 @@ export function PayExpenseDialog({ expense, open, onOpenChange }: PayExpenseDial
     }
   }, [expense, reset]);
 
+  useEffect(() => {
+    if (!open || !expense) return;
+
+    const frame = requestAnimationFrame(() => {
+      amountInputRef.current?.focus();
+      amountInputRef.current?.select();
+    });
+
+    return () => cancelAnimationFrame(frame);
+  }, [open, expense]);
+
   function handleClose(open: boolean) {
     onOpenChange(open);
     if (!open) reset();
@@ -90,10 +105,14 @@ export function PayExpenseDialog({ expense, open, onOpenChange }: PayExpenseDial
             </label>
             <input
               id="amountPayed"
-              type="number"
-              step="0.01"
-              min="0"
-              {...register("amountPayed", { valueAsNumber: true })}
+              type="text"
+              inputMode="numeric"
+              pattern="[0-9]*"
+              {...amountPayedField}
+              ref={(node) => {
+                amountPayedRef(node);
+                amountInputRef.current = node;
+              }}
               className="h-8 rounded-lg border border-input bg-background px-2.5 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
             />
             {errors.amountPayed && (