From 5feab991ec6c8153ff81cef9a6119597d7e24d02 Mon Sep 17 00:00:00 2001
From: Knee Cola <kneecola@duck.com>
Date: Wed, 31 Dec 2025 10:53:04 +0100
Subject: [PATCH] refactor: reorder language selector before email input
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Moved the language selector to appear before the email address field for better
UX flow. Users now select the notification language first, then enter the email
address that will receive notifications in that language.

Also applied right-alignment to the "new email" status indicator for consistency.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 web-app/app/ui/LocationEditForm.tsx | 29 +++++++++++++++--------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/web-app/app/ui/LocationEditForm.tsx b/web-app/app/ui/LocationEditForm.tsx
index 736ba7d..f9edc50 100644
--- a/web-app/app/ui/LocationEditForm.tsx
+++ b/web-app/app/ui/LocationEditForm.tsx
@@ -359,6 +359,20 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
                     {(formValues.billFwdEnabled || formValues.rentDueNotificationEnabled) && (
                         <fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
                             <legend className="fieldset-legend font-semibold uppercase">{t("tenant-email-legend")}</legend>
+                            <label className="label">
+                                <span className="label-text">{t("notification-language-label")}</span>
+                            </label>
+                            <select
+                                id="tenantEmailLanguage"
+                                name="tenantEmailLanguage"
+                                className="select input-bordered w-full"
+                                value={formValues.tenantEmailLanguage}
+                                onChange={(e) => handleInputChange("tenantEmailLanguage", e.target.value)}
+                            >
+                                <option value="hr">{t("notification-language-option-hr")}</option>
+                                <option value="en">{t("notification-language-option-en")}</option>
+                            </select>
+
                             <label className="label">
                                 <span className="label-text">{t("tenant-email-label")}</span>
                             </label>
@@ -414,7 +428,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
                                     )}
                                 </div>
                             ):(
-                                <div className="flex items-center gap-2 mt-2 ml-2">
+                                <div className="flex items-center justify-end gap-2 mt-2 ml-2">
                                     <PencilSquareIcon className="h-5 w-5 text-primary" />
                                     <span className="text-sm text-primary">{t("email-status.new")}</span>
                                 </div>
@@ -427,19 +441,6 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
                                         </p>
                                     ))}
                             </div>
-                        <label className="label">
-                            <span className="label-text">{t("notification-language-label")}</span>
-                        </label>
-                        <select
-                            id="tenantEmailLanguage"
-                            name="tenantEmailLanguage"
-                            className="select input-bordered w-full"
-                            value={formValues.tenantEmailLanguage}
-                            onChange={(e) => handleInputChange("tenantEmailLanguage", e.target.value)}
-                        >
-                            <option value="hr">{t("notification-language-option-hr")}</option>
-                            <option value="en">{t("notification-language-option-en")}</option>
-                        </select>
                         </fieldset>
                     )}