feat: add Revolut profile tooltip and test link to UserSettingsForm

- Add tooltip under Revolut profile input explaining where to find the profile name
- Add test payment link that appears when profile name is valid (>5 chars)
- Reorder ViewLocationCard payment UI: QR code placeholder first, link below centered
- Replace hardcoded text with translation keys for better i18n support
- Add English and Croatian translations for test link and payment button

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

Co-Authored-By: Claude <noreply@anthropic.com>

app/ui/UserSettingsForm.tsx

@@ -297,6 +297,9 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
                             onChange={(e) => handleInputChange("ownerRevolutProfileName", e.target.value)}
                             disabled={pending}
                         />
+                        <label className="label">
+                            <span className="label-text-alt text-gray-500 max-w-[25rem]">{t("revolut-profile-tooltip")}</span>
+                        </label>
                         <div id="ownerRevolutProfileName-error" aria-live="polite" aria-atomic="true">
                             {errors?.ownerRevolutProfileName &&
                                 errors.ownerRevolutProfileName.map((error: string) => (
@@ -305,6 +308,17 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
                                     </p>
                                 ))}
                         </div>
+                         {
+                            !errors?.ownerRevolutProfileName && formValues.ownerRevolutProfileName.length > 5 ? (
+                            <p className="p-3 text-center">{t("revolut-profile--test-link-label")} <Link
+                                    href={`https://revolut.me/${formValues.ownerRevolutProfileName?.replace('@', '')}?amount=100&currency=${formValues.currency}`}
+                                    target="_blank"
+                                    className="text-blue-600 underline"
+                                >
+                                    {t("revolut-profile--test-link-text")}
+                                </Link></p>
+                            ) : null
+                         }
                     </div>
                     <NoteBox className="p-1 mt-1">{t("payment-additional-notes")}</NoteBox>
                 </>

app/ui/ViewLocationCard.tsx

@@ -149,19 +149,18 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettin
                     userSettings?.enableRevolutPayment && tenantPaymentMethod === "revolut" ?
                     <>
                         <p className="max-w-[25em] ml-1 mt-1 mb-1">{t("payment-info-header")}</p>
-                        <p className="ml-1">
-                            To pay via Revolut, please click the following link:{' '}
+                        <label className="label p-2 grow bg-white border border-gray-300 rounded-box justify-center">
+                            ToDo: QR Code goes here
+                        </label>
+                        <p className="text-center mt-1 mb-3">
                             <Link
                                 href={`https://revolut.me/${userSettings.ownerRevolutProfileName?.replace('@', '')}?amount=${(monthlyExpense / 100).toFixed(2)}&currency=${userSettings.currency}}`}
                                 target="_blank"
                                 className="text-blue-600 underline"
                             >
-                                Pay with Revolut
+                                {t("revolut-link-text")}
                             </Link>
                         </p>
-                        <label className="label p-2 grow bg-white border border-gray-300 rounded-box justify-center">
-                            ToDo: QR Code goes here
-                        </label>
                     </>
                     : null
                 }