From b7d469a06e30c83d332509e3322683713710c32f Mon Sep 17 00:00:00 2001
From: Ilia Denisov <evilcart@gmail.com>
Date: Wed, 3 Jun 2026 23:14:51 +0200
Subject: [PATCH] Stage 8 polish: keyboard-aware modals, consistent select
 pickers, required game type
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Third owner-review pass (iPhone):
- Modals (and the chat) size their backdrop to window.visualViewport, so they stay
  fully above the software keyboard (dvh alone left the sheet partly behind it).
- On the owner's call, every profile / new-game picker is a native <select> for
  consistent cross-platform behaviour: the away window returns to hour + 10-minute
  selects (which also avoids the iOS time-wheel "clear" button), alongside the offset
  timezone and the game-type / move-time / hints selects. Native time/wheel inputs
  render differently per OS and cannot be forced to match.
- New-game "play with friends" has no preselected game type — an explicit, required
  pick (empty placeholder); Send invitation stays disabled until both a type and a
  friend are chosen. A smart default (from play history / language) is TODO-6.
---
 PLAN.md                        | 23 ++++++++++-----
 ui/src/components/Modal.svelte | 37 ++++++++++++++++++++++--
 ui/src/screens/NewGame.svelte  | 14 +++++++---
 ui/src/screens/Profile.svelte  | 51 +++++++++++++++++++++-------------
 4 files changed, 93 insertions(+), 32 deletions(-)

diff --git a/PLAN.md b/PLAN.md
index dc6cfdf..db14e9a 100644
--- a/PLAN.md
+++ b/PLAN.md
@@ -594,13 +594,16 @@ Open details: deployment target/host; dashboards; load expectations.
     game, an "add to friends" item flips to a disabled "request sent"; chat send/nudge
     became ⬆️/🛎️ icons; a **finished game** drops its last-word highlight, hides Check
     word / Drop game, disables zoom, and draws an **inert footer** (greyed rack + tab
-    bar) instead of hiding it. A second **iPhone-simulator** pass then made the chat
-    and modals keyboard-aware (`dvh` sizing), returned the away window to a native
-    `<input type="time" step="600">` (the iOS wheel with 10-minute steps; the timezone
-    stays a native offset `<select>`), reserved the rack height so a finished footer
-    does not collapse, and compacted the play-with-friends form (a searchable
-    bounded-scroll friend list, native game-type / move-time / hints selects in one
-    row, a pinned invite).
+    bar) instead of hiding it. Two **iPhone-simulator** passes then made the chat and
+    modals keyboard-aware (`dvh` plus a `visualViewport` listener that sizes the modal
+    backdrop to the area above the keyboard), reserved the rack height so a finished
+    footer does not collapse, and compacted the play-with-friends form (a searchable
+    bounded-scroll friend list, a pinned invite, and an explicit, **required game
+    type** — a smart default is TODO-6). On the owner's call, **every profile / new-game
+    picker is a native `<select>`** (the away window as hour + 10-minute selects, the
+    timezone as a UTC-offset select): native time/wheel inputs render differently per
+    OS and can't be forced to match, and a select also avoids the iOS "clear" button
+    that would empty a time field.
 
 ## Deferred TODOs (cross-stage)
 
@@ -639,3 +642,9 @@ Open details: deployment target/host; dashboards; load expectations.
   exists (Stage 9), wrap a code in a deep link and render it as a QR so a friend can
   add you by scanning rather than typing. The code semantics (12 h TTL, single use,
   one active per issuer) stay as-is; only the delivery changes.
+- **TODO-6 — smart default for the friend-game "game type" (owner's idea, Stage 8).**
+  The play-with-friends form has no preselected variant today (an empty, required
+  pick). Default it from the player's history (the variant they play most, from
+  `account_stats` or a games query), falling back to their interface language
+  (en → English, ru → Russian/Эрудит). Until then the explicit pick avoids guessing
+  wrong.
diff --git a/ui/src/components/Modal.svelte b/ui/src/components/Modal.svelte
index 7449b5e..acd189d 100644
--- a/ui/src/components/Modal.svelte
+++ b/ui/src/components/Modal.svelte
@@ -6,11 +6,38 @@
     onclose,
     children,
   }: { title?: string; onclose?: () => void; children?: Snippet } = $props();
+
+  // Track the visual viewport so the backdrop covers only the area above an open
+  // mobile keyboard: dvh alone shrinks the sheet but the fixed, layout-viewport
+  // backdrop still centres it behind the keyboard. Sizing the backdrop to
+  // visualViewport keeps the sheet (and the start of a chat) fully on screen.
+  let vh = $state(0);
+  let top = $state(0);
+  $effect(() => {
+    const vv = typeof window !== 'undefined' ? window.visualViewport : null;
+    if (!vv) return;
+    const update = () => {
+      vh = vv.height;
+      top = vv.offsetTop;
+    };
+    update();
+    vv.addEventListener('resize', update);
+    vv.addEventListener('scroll', update);
+    return () => {
+      vv.removeEventListener('resize', update);
+      vv.removeEventListener('scroll', update);
+    };
+  });
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="backdrop" onclick={() => onclose?.()}>
+<div
+  class="backdrop"
+  style:height={vh ? `${vh}px` : null}
+  style:top={vh ? `${top}px` : null}
+  onclick={() => onclose?.()}
+>
   <div class="sheet" role="dialog" aria-modal="true" tabindex="-1" onclick={(e) => e.stopPropagation()}>
     {#if title}<h2>{title}</h2>{/if}
     {@render children?.()}
@@ -20,7 +47,13 @@
 <style>
   .backdrop {
     position: fixed;
-    inset: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+    /* Base fallback; overridden inline to the visual-viewport height/top so the
+       backdrop (and the centred sheet) stay above an open mobile keyboard. */
+    height: 100dvh;
+    box-sizing: border-box;
     background: rgba(0, 0, 0, 0.45);
     display: flex;
     align-items: center;
diff --git a/ui/src/screens/NewGame.svelte b/ui/src/screens/NewGame.svelte
index f1fe527..caaca8e 100644
--- a/ui/src/screens/NewGame.svelte
+++ b/ui/src/screens/NewGame.svelte
@@ -62,7 +62,9 @@
   let friends = $state<AccountRef[]>([]);
   let selected = $state<string[]>([]);
   let friendFilter = $state('');
-  let inviteVariant = $state<Variant>('english');
+  // No default game type yet — the player must pick one (a smarter default from play
+  // history / language is TODO-6). '' renders the disabled placeholder option.
+  let inviteVariant = $state<Variant | ''>('');
   let timeoutSecs = $state(86400);
   let hints = $state(1);
 
@@ -86,7 +88,7 @@
   }
 
   async function sendInvite() {
-    if (selected.length === 0 || selected.length > 3) return;
+    if (selected.length === 0 || selected.length > 3 || !inviteVariant) return;
     try {
       await gateway.invitationCreate(selected, {
         variant: inviteVariant,
@@ -148,7 +150,8 @@
           <div class="settings-row">
             <label class="field">
               <span>{t('new.gameType')}</span>
-              <select bind:value={inviteVariant}>
+              <select bind:value={inviteVariant} class:placeholder={!inviteVariant}>
+                <option value="" disabled>—</option>
                 {#each variants as v (v.id)}<option value={v.id}>{t(v.label)}</option>{/each}
               </select>
             </label>
@@ -165,7 +168,7 @@
               </select>
             </label>
           </div>
-          <button class="invite" disabled={selected.length === 0} onclick={sendInvite}>{t('new.invite')}</button>
+          <button class="invite" disabled={selected.length === 0 || !inviteVariant} onclick={sendInvite}>{t('new.invite')}</button>
         </div>
       {/if}
     {/if}
@@ -289,6 +292,9 @@
     color: var(--text);
     border-radius: var(--radius-sm);
   }
+  .field select.placeholder {
+    color: var(--text-muted);
+  }
   .muted {
     color: var(--text-muted);
     margin: 0;
diff --git a/ui/src/screens/Profile.svelte b/ui/src/screens/Profile.svelte
index 2a01ad0..7982be8 100644
--- a/ui/src/screens/Profile.svelte
+++ b/ui/src/screens/Profile.svelte
@@ -5,6 +5,8 @@
   import { t } from '../lib/i18n/index.svelte';
   import {
     awayDurationOk,
+    awayHours,
+    awayMinutes,
     browserOffset,
     isOffsetZone,
     timezoneOffsets,
@@ -15,8 +17,12 @@
   let editing = $state(false);
   let dn = $state('');
   let tz = $state('+00:00');
-  let awayStart = $state('00:00');
-  let awayEnd = $state('07:00');
+  // Away start/end as hour + 10-minute parts, so the picker is a <select> like every
+  // other profile control (consistent native control across iOS / desktop).
+  let startH = $state('00');
+  let startM = $state('00');
+  let endH = $state('07');
+  let endM = $state('00');
   let blockChat = $state(false);
   let blockFriendRequests = $state(false);
   let emailInput = $state('');
@@ -27,21 +33,25 @@
     const b = browserOffset();
     return timezoneOffsets.includes(b) ? b : '+00:00';
   }
-  function clockOr(value: string, fallback: string): string {
-    return /^\d{2}:\d{2}$/.test(value) ? value : fallback;
+  function splitTime(hhmm: string): [string, string] {
+    const m = /^(\d{2}):(\d{2})$/.exec(hhmm);
+    if (!m) return ['00', '00'];
+    return [m[1], awayMinutes.includes(m[2]) ? m[2] : '00'];
   }
 
   function startEdit() {
     const p = app.profile!;
     dn = p.displayName;
     tz = isOffsetZone(p.timeZone) && timezoneOffsets.includes(p.timeZone) ? p.timeZone : defaultTz();
-    awayStart = clockOr(p.awayStart, '00:00');
-    awayEnd = clockOr(p.awayEnd, '07:00');
+    [startH, startM] = splitTime(p.awayStart);
+    [endH, endM] = splitTime(p.awayEnd);
     blockChat = p.blockChat;
     blockFriendRequests = p.blockFriendRequests;
     editing = true;
   }
 
+  const awayStart = $derived(`${startH}:${startM}`);
+  const awayEnd = $derived(`${endH}:${endM}`);
   const nameOk = $derived(validDisplayName(dn));
   const awayOk = $derived(awayDurationOk(awayStart, awayEnd));
   const formValid = $derived(nameOk && awayOk);
@@ -112,8 +122,16 @@
           <fieldset class="away" class:invalid={!awayOk}>
             <legend>{t('profile.awayWindow')}</legend>
             <div class="times">
-              <label><span class="tlabel">{t('profile.from')}</span><input type="time" step="600" bind:value={awayStart} /></label>
-              <label><span class="tlabel">{t('profile.to')}</span><input type="time" step="600" bind:value={awayEnd} /></label>
+              <span class="tlabel">{t('profile.from')}</span>
+              <select bind:value={startH}>{#each awayHours as h (h)}<option>{h}</option>{/each}</select>
+              <span class="colon">:</span>
+              <select bind:value={startM}>{#each awayMinutes as m (m)}<option>{m}</option>{/each}</select>
+            </div>
+            <div class="times">
+              <span class="tlabel">{t('profile.to')}</span>
+              <select bind:value={endH}>{#each awayHours as h (h)}<option>{h}</option>{/each}</select>
+              <span class="colon">:</span>
+              <select bind:value={endM}>{#each awayMinutes as m (m)}<option>{m}</option>{/each}</select>
             </div>
             <p class="muted">{t('profile.awayHint')}</p>
           </fieldset>
@@ -255,22 +273,17 @@
   }
   .times {
     display: flex;
-    gap: 12px;
-  }
-  .times label {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-  .times input {
-    width: 100%;
-    box-sizing: border-box;
+    align-items: center;
+    gap: 8px;
   }
   .tlabel {
+    min-width: 2.5em;
     color: var(--text-muted);
     font-size: 0.85rem;
   }
+  .colon {
+    font-weight: 700;
+  }
   .check {
     flex-direction: row !important;
     align-items: center;