From 1dccba8d965d309644515f3b945f731d7bfd7e73 Mon Sep 17 00:00:00 2001
From: Ulas <ulas@kalayci.cloud>
Date: Sun, 5 Apr 2026 01:39:01 +0200
Subject: [PATCH] fix(ux): add inputmode and autocomplete attributes for mobile
 UX

- inputmode=decimal on budget amount input for correct decimal keyboard
- inputmode=numeric on rrule interval input for numeric keyboard
- autocomplete attributes on contacts form (name, tel, email, street-address)
---
 public/pages/budget.js   | 2 +-
 public/pages/contacts.js | 8 ++++----
 public/rrule-ui.js       | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/public/pages/budget.js b/public/pages/budget.js
index 636b8e2..f819afd 100644
--- a/public/pages/budget.js
+++ b/public/pages/budget.js
@@ -362,7 +362,7 @@ function openBudgetModal({ mode, entry = null }) {
       <label class="form-label" for="bm-amount">${t('budget.amountLabel')}</label>
       <input type="number" class="form-input" id="bm-amount"
              placeholder="${t('budget.amountPlaceholder')}" step="0.01" min="0"
-             value="${absAmount}">
+             inputmode="decimal" value="${absAmount}">
     </div>
 
     <div class="form-group">
diff --git a/public/pages/contacts.js b/public/pages/contacts.js
index 1030b80..f15831b 100644
--- a/public/pages/contacts.js
+++ b/public/pages/contacts.js
@@ -263,7 +263,7 @@ function openContactModal({ mode, contact = null }) {
   const content = `
     <div class="form-group">
       <label class="form-label" for="cm-name">${t('contacts.nameLabel')}</label>
-      <input type="text" class="form-input" id="cm-name" placeholder="${t('contacts.namePlaceholder')}" value="${v('name')}">
+      <input type="text" class="form-input" id="cm-name" placeholder="${t('contacts.namePlaceholder')}" value="${v('name')}" autocomplete="name">
     </div>
     <div class="form-group">
       <label class="form-label" for="cm-category">${t('contacts.categoryLabel')}</label>
@@ -271,15 +271,15 @@ function openContactModal({ mode, contact = null }) {
     </div>
     <div class="form-group">
       <label class="form-label" for="cm-phone">${t('contacts.phoneLabel')}</label>
-      <input type="tel" class="form-input" id="cm-phone" placeholder="${t('contacts.phonePlaceholder')}" value="${v('phone')}">
+      <input type="tel" class="form-input" id="cm-phone" placeholder="${t('contacts.phonePlaceholder')}" value="${v('phone')}" autocomplete="tel">
     </div>
     <div class="form-group">
       <label class="form-label" for="cm-email">${t('contacts.emailLabel')}</label>
-      <input type="email" class="form-input" id="cm-email" placeholder="${t('contacts.emailPlaceholder')}" value="${v('email')}">
+      <input type="email" class="form-input" id="cm-email" placeholder="${t('contacts.emailPlaceholder')}" value="${v('email')}" autocomplete="email">
     </div>
     <div class="form-group">
       <label class="form-label" for="cm-address">${t('contacts.addressLabel')}</label>
-      <input type="text" class="form-input" id="cm-address" placeholder="${t('contacts.addressPlaceholder')}" value="${v('address')}">
+      <input type="text" class="form-input" id="cm-address" placeholder="${t('contacts.addressPlaceholder')}" value="${v('address')}" autocomplete="street-address">
     </div>
     <div class="form-group">
       <label class="form-label" for="cm-notes">${t('contacts.notesLabel')}</label>
diff --git a/public/rrule-ui.js b/public/rrule-ui.js
index 2f6a8cf..93a512b 100644
--- a/public/rrule-ui.js
+++ b/public/rrule-ui.js
@@ -100,7 +100,7 @@ export function renderRRuleFields(prefix, existingRule) {
             <label class="label form-label" for="${prefix}-rrule-interval">Alle</label>
             <div class="rrule-interval-wrap">
               <input class="input form-input" type="number" id="${prefix}-rrule-interval"
-                     min="1" max="99" value="${parsed.interval}" style="width:64px;text-align:center">
+                     min="1" max="99" value="${parsed.interval}" inputmode="numeric" style="width:64px;text-align:center">
               <span class="rrule-interval-unit" id="${prefix}-rrule-unit">${unitLabel(parsed.freq, parsed.interval)}</span>
             </div>
           </div>