From 51350524469df6d6f95bcd9f38622eccc6ecc48d Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Thu, 5 Nov 2026 23:10:09 +0100
Subject: [PATCH] feat(native): fix the claim fields into one address box, add
 placeholders, shorter fields, better title

---
 client/native-shell/main.ts   |  9 ++++++++-
 client/native-shell/shell.css | 35 +++++++++++++++++++++++++++++------
 shared/src/i18n/de/native.ts  |  2 +-
 shared/src/i18n/en/native.ts  |  2 +-
 4 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/client/native-shell/main.ts b/client/native-shell/main.ts
index a6503555e..3b6d02eaa 100644
--- a/client/native-shell/main.ts
+++ b/client/native-shell/main.ts
@@ -516,6 +516,7 @@ function showClaim(plan: CloudPlan, interval: 'month' | 'year', opts: { back?: b
     autocapitalize: 'off',
     spellcheck: false,
     value: '',
+    placeholder: t('native.claim.addressLabel'),
   });
   slugInput.setAttribute('inputmode', 'url');
   slugInput.setAttribute('autocomplete', 'off');
@@ -529,7 +530,13 @@ function showClaim(plan: CloudPlan, interval: 'month' | 'year', opts: { back?: b
   );
   const slugNote = el('p', { className: 'hint' });
 
-  const emailInput = el('input', { type: 'email', value: '', autocapitalize: 'off', spellcheck: false });
+  const emailInput = el('input', {
+    type: 'email',
+    value: '',
+    autocapitalize: 'off',
+    spellcheck: false,
+    placeholder: t('native.claim.emailLabel'),
+  });
   emailInput.setAttribute('inputmode', 'email');
   emailInput.setAttribute('autocomplete', 'email');
   emailInput.setAttribute('enterkeyhint', 'go');
diff --git a/client/native-shell/shell.css b/client/native-shell/shell.css
index 7894df6b5..5a50b13aa 100644
--- a/client/native-shell/shell.css
+++ b/client/native-shell/shell.css
@@ -565,8 +565,8 @@ a.linkbtn {
 .field input {
   width: 100%;
   font: inherit;
-  font-size: 1.05rem;
-  padding: 16px 18px;
+  font-size: 1rem;
+  padding: 13px 16px;
   border-radius: var(--radius);
   border: 1px solid var(--edge);
   background: var(--surface);
@@ -884,21 +884,44 @@ a.linkbtn {
 }
 
 /* ── Claim: address + email, and the provisioning wait ───────────────────── */
+/* One rounded field holding the address input and its fixed ".liketrek.com"
+   suffix — the input itself is seamless, the box and its states live here. */
 .slug-field {
   display: flex;
   align-items: center;
-  padding-right: 14px;
+  padding-right: 16px;
+  border-radius: var(--radius);
+  border: 1px solid var(--edge);
+  background: var(--surface);
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.18),
+    inset 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
+  transition:
+    border-color 0.2s,
+    box-shadow 0.25s;
 }
 .slug-field .slug-input {
   flex: 1;
   min-width: 0;
-  text-align: right;
+  text-align: left;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.slug-field:focus-within {
+  border-color: var(--edge-strong);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 9%, transparent);
+}
+.slug-field.bad {
+  border-color: var(--danger);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent);
+  animation: shake 0.3s;
 }
 .slug-suffix {
   flex: none;
   color: var(--muted);
-  font-size: 0.98rem;
-  padding-left: 2px;
+  font-size: 0.95rem;
+  padding-left: 4px;
   user-select: none;
 }
 .hint {
diff --git a/shared/src/i18n/de/native.ts b/shared/src/i18n/de/native.ts
index 190d5d802..f71aa6b87 100644
--- a/shared/src/i18n/de/native.ts
+++ b/shared/src/i18n/de/native.ts
@@ -56,7 +56,7 @@ const native: TranslationStrings = {
   'native.plans.loadError': 'Die Tarife konnten nicht geladen werden. Prüfe deine Verbindung und versuch es erneut.',
   'native.plans.retry': 'Erneut versuchen',
   'native.plans.soon': 'In-App-Abos kommen bald. Vorerst auf der Website abschließen.',
-  'native.claim.title': 'Deine TREK einrichten',
+  'native.claim.title': 'Fast geschafft',
   'native.claim.sub': 'Wähle deine Adresse. Wir richten sie sofort ein.',
   'native.claim.addressLabel': 'Deine Adresse',
   'native.claim.taken': 'Diese Adresse ist vergeben.',
diff --git a/shared/src/i18n/en/native.ts b/shared/src/i18n/en/native.ts
index 79792c07b..aeb996ad2 100644
--- a/shared/src/i18n/en/native.ts
+++ b/shared/src/i18n/en/native.ts
@@ -55,7 +55,7 @@ const native: TranslationStrings = {
   'native.plans.loadError': 'Could not load the plans. Check your connection and try again.',
   'native.plans.retry': 'Try again',
   'native.plans.soon': 'In-app subscriptions are coming. For now, finish on the website.',
-  'native.claim.title': 'Create your TREK',
+  'native.claim.title': 'Almost there',
   'native.claim.sub': 'Choose your address. We set it up right away.',
   'native.claim.addressLabel': 'Your address',
   'native.claim.taken': 'That address is taken.',