From 4de9711a312b9ad291b5c54cf6c5a57ba7199190 Mon Sep 17 00:00:00 2001
From: Martin Guillon <dev@akylas.fr>
Date: Thu, 29 Oct 2026 09:37:29 +0100
Subject: [PATCH 1/4] feat(ui): use the primary button of the design system in
 the card sheets

The add button of the create card and extra field sheets is the primary button: a 44 tall
glass capsule on iOS, a 40 tall filled pill on Android. The delete buttons of the card edit
sheet use the error color.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 app/app.android.scss                           | 5 +++++
 app/app.ios.scss                               | 5 +++++
 app/components/view/CardEditSheet.svelte       | 4 ++--
 app/components/widgets/CreateCard.svelte       | 2 +-
 app/components/widgets/ExtraFieldPicker.svelte | 2 +-
 5 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/app/app.android.scss b/app/app.android.scss
index b10ec458..5976d154 100644
--- a/app/app.android.scss
+++ b/app/app.android.scss
@@ -2,3 +2,8 @@
 checkbox {
     margin-right: 0;
 }
+
+// the primary button is a 40 tall pill
+button[variant='contained'] {
+    height: 40;
+}
diff --git a/app/app.ios.scss b/app/app.ios.scss
index c1ca6c25..33d2cc61 100644
--- a/app/app.ios.scss
+++ b/app/app.ios.scss
@@ -74,3 +74,8 @@ textfield[variant='none'] {
     font-size: 30;
     font-weight: 700;
 }
+
+// the primary button is a 44 tall capsule
+button[variant='prominentGlass'] {
+    height: 44;
+}
diff --git a/app/components/view/CardEditSheet.svelte b/app/components/view/CardEditSheet.svelte
index 3717c63b..5f2621a6 100644
--- a/app/components/view/CardEditSheet.svelte
+++ b/app/components/view/CardEditSheet.svelte
@@ -190,13 +190,13 @@
         <Template key="code" let:item>
             <gridlayout columns="*,auto" margin="2 16 2 16">
                 <textfield error={item.code.error} hint={lc('barcode')} text={item.code.text} variant={__IOS__ ? 'none' : 'filled'} on:textChange={(e) => onCodeText(item.code, e.value, e.object)} />
-                <uibutton col={1} variant="text" {...{ src: appIcon('delete') }} on:tap={() => removeCode(item.code)} />
+                <uibutton col={1} color={colorError} variant="text" {...{ src: appIcon('delete') }} on:tap={() => removeCode(item.code)} />
             </gridlayout>
         </Template>
 
         <Template key="field" let:item>
             <ListItemAutoSize fontSize={17} item={{ title: item.field.name, subtitle: formatValue(item.field.extra) }} on:tap={() => editField(item.field)}>
-                <uibutton col={1} variant="text" {...{ src: appIcon('delete') }} on:tap={() => removeField(item.field)} />
+                <uibutton col={1} color={colorError} variant="text" {...{ src: appIcon('delete') }} on:tap={() => removeField(item.field)} />
             </ListItemAutoSize>
         </Template>
 
diff --git a/app/components/widgets/CreateCard.svelte b/app/components/widgets/CreateCard.svelte
index 52b96c6b..918a4e4b 100644
--- a/app/components/widgets/CreateCard.svelte
+++ b/app/components/widgets/CreateCard.svelte
@@ -101,5 +101,5 @@
         visibility={code?.length && !validCode ? 'visible' : 'collapse'}
     />
 
-    <uibutton colSpan={2} horizontalAlignment="right" isEnabled={name?.length > 0} row={5} text={lc('add')} variant="text" on:tap={add} />
+    <uibutton colSpan={2} horizontalAlignment="right" isEnabled={name?.length > 0} row={5} text={lc('add')} variant={__IOS__ ? 'prominentGlass' : 'contained'} on:tap={add} />
 </gesturerootview>
diff --git a/app/components/widgets/ExtraFieldPicker.svelte b/app/components/widgets/ExtraFieldPicker.svelte
index 5a5a7702..7407659b 100644
--- a/app/components/widgets/ExtraFieldPicker.svelte
+++ b/app/components/widgets/ExtraFieldPicker.svelte
@@ -143,5 +143,5 @@
         on:tap={(e) => selectDate(e)}
     />
 
-    <uibutton horizontalAlignment="right" row={4} text={editing ? lc('edit') : lc('add')} variant="text" on:tap={add} />
+    <uibutton horizontalAlignment="right" row={4} text={editing ? lc('edit') : lc('add')} variant={__IOS__ ? 'prominentGlass' : 'contained'} on:tap={add} />
 </gesturerootview>

From 3e13781dc25e440d96e761ed399f1141c2dde8c8 Mon Sep 17 00:00:00 2001
From: Martin Guillon <dev@akylas.fr>
Date: Thu, 29 Oct 2026 09:42:15 +0100
Subject: [PATCH 2/4] feat(ui): give the card sheets the header of the design
 system

A shared sheet header: iOS has a glass Cancel pill, the centered title and a prominent
action; Android a close icon, the title and a text action. The create card, extra field and
card edit sheets use it, so their add button leaves the bottom of the sheet, and the color
of a new card moves to its own row.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 app/components/common/SheetHeader.svelte      | 26 +++++++++
 app/components/view/CardEditSheet.svelte      |  7 +--
 app/components/widgets/CreateCard.svelte      | 57 ++++++++++++-------
 .../widgets/ExtraFieldPicker.svelte           | 49 ++++++++--------
 4 files changed, 89 insertions(+), 50 deletions(-)
 create mode 100644 app/components/common/SheetHeader.svelte

diff --git a/app/components/common/SheetHeader.svelte b/app/components/common/SheetHeader.svelte
new file mode 100644
index 00000000..bba87616
--- /dev/null
+++ b/app/components/common/SheetHeader.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { lc } from '@nativescript-community/l';
+    import { appIcon } from '~/utils/appIcons';
+    import { colors } from '~/variables';
+
+    export let title: string;
+    export let doneText: string;
+    export let doneEnabled = true;
+    export let onCancel: () => void;
+    export let onDone: () => void;
+    let { colorOnSurface } = $colors;
+    $: ({ colorOnSurface } = $colors);
+</script>
+
+<!-- iOS: a glass Cancel pill, the title centered and a prominent Done. Android: a close icon, the title and a Save text button -->
+<gridlayout columns="auto,*,auto" padding="12 16 8 16" {...$$restProps}>
+    {#if __IOS__}
+        <uibutton accessibilityLabel={lc('cancel')} text={lc('cancel')} variant="glass" on:tap={onCancel} />
+        <label col={1} color={colorOnSurface} fontSize={17} fontWeight="bold" text={title} textAlignment="center" verticalAlignment="center" />
+        <uibutton col={2} isEnabled={doneEnabled} text={doneText} variant="prominentGlass" on:tap={onDone} />
+    {:else}
+        <uibutton accessibilityLabel={lc('cancel')} variant="text" {...{ src: appIcon('close') }} on:tap={onCancel} />
+        <label col={1} color={colorOnSurface} fontSize={22} marginLeft={8} text={title} verticalAlignment="center" />
+        <uibutton col={2} isEnabled={doneEnabled} text={doneText} variant="text" on:tap={onDone} />
+    {/if}
+</gridlayout>
diff --git a/app/components/view/CardEditSheet.svelte b/app/components/view/CardEditSheet.svelte
index 5f2621a6..2aab2342 100644
--- a/app/components/view/CardEditSheet.svelte
+++ b/app/components/view/CardEditSheet.svelte
@@ -2,6 +2,7 @@
     import { lc } from '@nativescript-community/l';
     import { Template } from '@nativescript-community/svelte-native/components';
     import { TextField } from '@nativescript-community/ui-textfield';
+    import SheetHeader from '~/components/common/SheetHeader.svelte';
     import { showBottomSheet } from '@nativescript-community/ui-bottomsheet/svelte';
     import { showError } from '@shared/utils/showError';
     import dayjs from 'dayjs';
@@ -166,11 +167,7 @@
 </script>
 
 <gesturerootview bind:this={rootView} backgroundColor={__IOS__ ? colorBackground : colorSurface} rows="auto,*">
-    <gridlayout columns="auto,*,auto" padding="12 16 8 16">
-        <uibutton text={lc('cancel')} variant="text" on:tap={() => close(false)} />
-        <label col={1} color={colorOnSurface} fontSize={17} fontWeight="bold" text={lc('edit')} textAlignment="center" verticalAlignment="center" />
-        <uibutton col={2} text={lc('save')} variant={__IOS__ ? 'prominentGlass' : 'contained'} on:tap={save} />
-    </gridlayout>
+    <SheetHeader doneText={lc('save')} onCancel={() => close(false)} onDone={save} title={lc('edit')} />
     <collectionview row={1} {itemTemplateSelector} items={listItems}>
         <Template key="name" let:item>
             <textfield hint={lc('name')} margin="4 16 4 16" text={name} variant={__IOS__ ? 'none' : 'filled'} on:textChange={(e) => (name = e.value)} />
diff --git a/app/components/widgets/CreateCard.svelte b/app/components/widgets/CreateCard.svelte
index 918a4e4b..7717fb19 100644
--- a/app/components/widgets/CreateCard.svelte
+++ b/app/components/widgets/CreateCard.svelte
@@ -5,6 +5,7 @@
     import { FORMATS, getBarcodeFallbackString, qrcodeService } from '~/services/qrcode';
     import { pickColor, showPopoverMenu } from '~/utils/ui';
     import { colors } from '~/variables';
+    import SheetHeader from '../common/SheetHeader.svelte';
     import SvgView from '../common/SVGView.svelte';
 </script>
 
@@ -21,6 +22,10 @@
     let validCode = true;
     const tMargin = '4 0 4 0';
 
+    function close() {
+        rootView.nativeView.bindingContext.closeCallback();
+    }
+
     async function add() {
         try {
             if (!name || !color) {
@@ -80,26 +85,34 @@
     }
 </script>
 
-<gesturerootview bind:this={rootView} columns="*,auto" padding={16} rows="auto,auto,auto,auto,auto,auto">
-    <label color={colorOnBackground} fontSize={20} fontWeight="bold" text={lc('create')} verticalAlignment="center" />
-    <stacklayout col={1} orientation="horizontal">
-        <label color={colorOnBackground} fontSize={16} text={lc('color')} verticalAlignment="center" />
-        <absolutelayout backgroundColor={color} borderColor={colorOutline} borderRadius="50%" borderWidth={2} height={40} marginLeft={10} width={40} on:tap={changeColor} />
-    </stacklayout>
-    <textfield colSpan={2} hint={lc('name')} margin={tMargin} row={1} text={name} variant="outline" on:textChange={(e) => (name = e.value)} />
-    <textfield colSpan={2} hint={lc('barcode')} margin={tMargin} row={2} text={code} variant="outline" on:textChange={onCodeTextChange} />
-    <textfield colSpan={2} editable={false} hint={lc('barcode_type')} margin={tMargin} row={3} text={codeFormat} textTransform="uppercase" variant="outline" on:tap={(e) => selectBarcodeFormat(e)} />
-    <SvgView backgroundColor="white" borderRadius={12} colSpan={2} height={100} item={{ svg }} row={4} stretch="aspectFit" visibility={code?.length ? 'visible' : 'collapse'} />
-    <label
-        colSpan={2}
-        fontSize={20}
-        fontWeight="bold"
-        row={4}
-        text={lc('invalid')}
-        textAlignment="center"
-        verticalAlignment="center"
-        visibility={code?.length && !validCode ? 'visible' : 'collapse'}
-    />
-
-    <uibutton colSpan={2} horizontalAlignment="right" isEnabled={name?.length > 0} row={5} text={lc('add')} variant={__IOS__ ? 'prominentGlass' : 'contained'} on:tap={add} />
+<gesturerootview bind:this={rootView} rows="auto,auto">
+    <SheetHeader doneEnabled={name?.length > 0} doneText={lc('add')} onCancel={close} onDone={add} title={lc('create')} />
+    <gridlayout columns="*,auto" padding="0 16 16 16" row={1} rows="auto,auto,auto,auto,auto,auto">
+        <textfield colSpan={2} hint={lc('name')} margin={tMargin} text={name} variant="outline" on:textChange={(e) => (name = e.value)} />
+        <textfield colSpan={2} hint={lc('barcode')} margin={tMargin} row={1} text={code} variant="outline" on:textChange={onCodeTextChange} />
+        <textfield
+            colSpan={2}
+            editable={false}
+            hint={lc('barcode_type')}
+            margin={tMargin}
+            row={2}
+            text={codeFormat}
+            textTransform="uppercase"
+            variant="outline"
+            on:tap={(e) => selectBarcodeFormat(e)}
+        />
+        <label color={colorOnBackground} fontSize={17} margin="8 4" row={3} text={lc('color')} verticalAlignment="center" />
+        <absolutelayout backgroundColor={color} borderColor={colorOutline} borderRadius="50%" borderWidth={2} col={1} height={40} row={3} width={40} on:tap={changeColor} />
+        <SvgView backgroundColor="white" borderRadius={12} colSpan={2} height={100} item={{ svg }} row={4} stretch="aspectFit" visibility={code?.length ? 'visible' : 'collapse'} />
+        <label
+            colSpan={2}
+            fontSize={20}
+            fontWeight="bold"
+            row={4}
+            text={lc('invalid')}
+            textAlignment="center"
+            verticalAlignment="center"
+            visibility={code?.length && !validCode ? 'visible' : 'collapse'}
+        />
+    </gridlayout>
 </gesturerootview>
diff --git a/app/components/widgets/ExtraFieldPicker.svelte b/app/components/widgets/ExtraFieldPicker.svelte
index 7407659b..3be98026 100644
--- a/app/components/widgets/ExtraFieldPicker.svelte
+++ b/app/components/widgets/ExtraFieldPicker.svelte
@@ -4,14 +4,15 @@
     import { showError } from '@shared/utils/showError';
     import dayjs from 'dayjs';
     import { formatDate } from '~/helpers/locale';
+    import SheetHeader from '~/components/common/SheetHeader.svelte';
     import { ExtraFieldType } from '~/models/OCRDocument';
     import { pickDate, showPopoverMenu } from '~/utils/ui';
     import { colors } from '~/variables';
 </script>
 
 <script lang="ts">
-    let { colorOnBackground, colorOnSurfaceVariant, colorOutlineVariant } = $colors;
-    $: ({ colorOnBackground, colorOnSurfaceVariant, colorOutlineVariant } = $colors);
+    let { colorOnSurfaceVariant, colorOutlineVariant } = $colors;
+    $: ({ colorOnSurfaceVariant, colorOutlineVariant } = $colors);
 
     export let editing = false;
     export let name = null;
@@ -91,6 +92,10 @@
         }
     }
 
+    function close() {
+        rootView.nativeView.bindingContext.closeCallback();
+    }
+
     async function add() {
         try {
             if (!currentName || (!currentValue && currentType !== ExtraFieldType.Date)) {
@@ -123,25 +128,23 @@
     }
 </script>
 
-<gesturerootview bind:this={rootView} padding={16} rows="auto,auto,auto,auto,auto">
-    <label color={colorOnBackground} fontSize={20} fontWeight="bold" marginBottom={16} text={editing ? lc('edit_extra_field') : lc('add_extra_field')} />
-    <gridlayout row={1}>
-        <textfield hint={lc('name')} margin={tMargin} paddingLeft={60} row={2} text={currentName} variant="outline" on:textChange={(e) => (currentName = e.value)} />
-        <uibutton class="icon-btn" color={colorOnSurfaceVariant} horizontalAlignment="left" text="mdi-menu-down" variant="text" verticalAlignment="middle" on:tap={selecteTemplateName} />
-    </gridlayout>
-    <textfield editable={false} hint={lc('type')} margin={tMargin} row={2} text={lc(currentType)} textTransform="uppercase" variant="outline" on:tap={(e) => selectType(e)} />
-
-    <textview
-        editable={currentType !== ExtraFieldType.Date}
-        hint={lc('value')}
-        keyboardType={getKeyboardType(currentType)}
-        margin={tMargin}
-        row={3}
-        text={currentType === ExtraFieldType.Date ? formatDate(currentTime, 'LL') : currentValue}
-        variant="outline"
-        on:textChange={(e) => (currentValue = e.value)}
-        on:tap={(e) => selectDate(e)}
-    />
-
-    <uibutton horizontalAlignment="right" row={4} text={editing ? lc('edit') : lc('add')} variant={__IOS__ ? 'prominentGlass' : 'contained'} on:tap={add} />
+<gesturerootview bind:this={rootView} rows="auto,auto">
+    <SheetHeader doneText={editing ? lc('edit') : lc('add')} onCancel={close} onDone={add} title={editing ? lc('edit_extra_field') : lc('add_extra_field')} />
+    <stacklayout padding="0 16 16 16" row={1}>
+        <gridlayout>
+            <textfield hint={lc('name')} margin={tMargin} paddingLeft={60} text={currentName} variant="outline" on:textChange={(e) => (currentName = e.value)} />
+            <uibutton class="icon-btn" color={colorOnSurfaceVariant} horizontalAlignment="left" text="mdi-menu-down" variant="text" verticalAlignment="middle" on:tap={selecteTemplateName} />
+        </gridlayout>
+        <textfield editable={false} hint={lc('type')} margin={tMargin} text={lc(currentType)} textTransform="uppercase" variant="outline" on:tap={(e) => selectType(e)} />
+        <textview
+            editable={currentType !== ExtraFieldType.Date}
+            hint={lc('value')}
+            keyboardType={getKeyboardType(currentType)}
+            margin={tMargin}
+            text={currentType === ExtraFieldType.Date ? formatDate(currentTime, 'LL') : currentValue}
+            variant="outline"
+            on:textChange={(e) => (currentValue = e.value)}
+            on:tap={(e) => selectDate(e)}
+        />
+    </stacklayout>
 </gesturerootview>

From 062bce319958308f3d11b698b2f2592562838160 Mon Sep 17 00:00:00 2001
From: Martin Guillon <dev@akylas.fr>
Date: Thu, 29 Oct 2026 10:19:53 +0100
Subject: [PATCH 3/4] refactor(ui): build the sheet header and the card forms
 without platform ifs

The sheet header shares its markup between platforms (buttons props picked in the script,
title styled by css). The create card and extra field sheets are a grouped form of rows
(label left, value right), each a ListItemAutoSize, like the edit sheet of the design.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 app/app.android.scss                          | 13 +++++
 app/app.common.scss                           |  7 +++
 app/app.ios.scss                              | 13 ++++-
 app/components/common/SheetHeader.svelte      | 17 +++---
 app/components/widgets/CreateCard.svelte      | 54 ++++++++-----------
 .../widgets/ExtraFieldPicker.svelte           | 43 ++++++++-------
 6 files changed, 84 insertions(+), 63 deletions(-)

diff --git a/app/app.android.scss b/app/app.android.scss
index 5976d154..f05e1253 100644
--- a/app/app.android.scss
+++ b/app/app.android.scss
@@ -7,3 +7,16 @@ checkbox {
 button[variant='contained'] {
     height: 40;
 }
+
+.sheetHeaderTitle {
+    font-size: 22;
+    margin-left: 8;
+}
+
+.cardFormGroup {
+    border-radius: 28;
+}
+
+.cardFormSheet {
+    background-color: var(--colorSurface);
+}
diff --git a/app/app.common.scss b/app/app.common.scss
index e1081fcc..7b019d32 100644
--- a/app/app.common.scss
+++ b/app/app.common.scss
@@ -320,3 +320,10 @@ textfield,
         border-width: 1;
     }
 }
+
+// the rows of a form: a label and its value, grouped
+.cardFormGroup {
+    background-color: var(--colorSurfaceContainerLow);
+    border-radius: 16;
+    margin: 0 16 16 16;
+}
diff --git a/app/app.ios.scss b/app/app.ios.scss
index 33d2cc61..9aee60dd 100644
--- a/app/app.ios.scss
+++ b/app/app.ios.scss
@@ -76,6 +76,17 @@ textfield[variant='none'] {
 }
 
 // the primary button is a 44 tall capsule
-button[variant='prominentGlass'] {
+button[variant='prominentGlass'],
+button[variant='contained'] {
     height: 44;
 }
+
+.sheetHeaderTitle {
+    font-size: 17;
+    font-weight: bold;
+    text-align: center;
+}
+
+.cardFormSheet {
+    background-color: var(--colorBackground);
+}
diff --git a/app/components/common/SheetHeader.svelte b/app/components/common/SheetHeader.svelte
index bba87616..7d775362 100644
--- a/app/components/common/SheetHeader.svelte
+++ b/app/components/common/SheetHeader.svelte
@@ -10,17 +10,14 @@
     export let onDone: () => void;
     let { colorOnSurface } = $colors;
     $: ({ colorOnSurface } = $colors);
+
+    // iOS: a glass Cancel pill and a prominent action. Android: a close icon and a text action
+    const cancelProps = __IOS__ ? { text: lc('cancel'), variant: 'glass' } : { src: appIcon('close'), variant: 'text' };
+    const doneVariant = __IOS__ ? 'contained' : 'text';
 </script>
 
-<!-- iOS: a glass Cancel pill, the title centered and a prominent Done. Android: a close icon, the title and a Save text button -->
 <gridlayout columns="auto,*,auto" padding="12 16 8 16" {...$$restProps}>
-    {#if __IOS__}
-        <uibutton accessibilityLabel={lc('cancel')} text={lc('cancel')} variant="glass" on:tap={onCancel} />
-        <label col={1} color={colorOnSurface} fontSize={17} fontWeight="bold" text={title} textAlignment="center" verticalAlignment="center" />
-        <uibutton col={2} isEnabled={doneEnabled} text={doneText} variant="prominentGlass" on:tap={onDone} />
-    {:else}
-        <uibutton accessibilityLabel={lc('cancel')} variant="text" {...{ src: appIcon('close') }} on:tap={onCancel} />
-        <label col={1} color={colorOnSurface} fontSize={22} marginLeft={8} text={title} verticalAlignment="center" />
-        <uibutton col={2} isEnabled={doneEnabled} text={doneText} variant="text" on:tap={onDone} />
-    {/if}
+    <uibutton accessibilityLabel={lc('cancel')} {...cancelProps} on:tap={onCancel} />
+    <label class="sheetHeaderTitle" col={1} color={colorOnSurface} text={title} verticalAlignment="center" />
+    <uibutton col={2} isEnabled={doneEnabled} text={doneText} variant={doneVariant} on:tap={onDone} />
 </gridlayout>
diff --git a/app/components/widgets/CreateCard.svelte b/app/components/widgets/CreateCard.svelte
index 7717fb19..5846ba6b 100644
--- a/app/components/widgets/CreateCard.svelte
+++ b/app/components/widgets/CreateCard.svelte
@@ -5,13 +5,14 @@
     import { FORMATS, getBarcodeFallbackString, qrcodeService } from '~/services/qrcode';
     import { pickColor, showPopoverMenu } from '~/utils/ui';
     import { colors } from '~/variables';
+    import ListItemAutoSize from '@shared/components/ListItemAutoSize.svelte';
     import SheetHeader from '../common/SheetHeader.svelte';
     import SvgView from '../common/SVGView.svelte';
 </script>
 
 <script lang="ts">
-    let { colorOnBackground, colorOutline, colorPrimary } = $colors;
-    $: ({ colorOnBackground, colorOutline, colorPrimary } = $colors);
+    let { colorOutline, colorPrimary } = $colors;
+    $: ({ colorOutline, colorPrimary } = $colors);
 
     export let name = null;
     export let color = colorPrimary;
@@ -20,7 +21,6 @@
     let rootView;
     let svg: string;
     let validCode = true;
-    const tMargin = '4 0 4 0';
 
     function close() {
         rootView.nativeView.bindingContext.closeCallback();
@@ -85,34 +85,24 @@
     }
 </script>
 
-<gesturerootview bind:this={rootView} rows="auto,auto">
+<gesturerootview bind:this={rootView} class="cardFormSheet" rows="auto,auto">
     <SheetHeader doneEnabled={name?.length > 0} doneText={lc('add')} onCancel={close} onDone={add} title={lc('create')} />
-    <gridlayout columns="*,auto" padding="0 16 16 16" row={1} rows="auto,auto,auto,auto,auto,auto">
-        <textfield colSpan={2} hint={lc('name')} margin={tMargin} text={name} variant="outline" on:textChange={(e) => (name = e.value)} />
-        <textfield colSpan={2} hint={lc('barcode')} margin={tMargin} row={1} text={code} variant="outline" on:textChange={onCodeTextChange} />
-        <textfield
-            colSpan={2}
-            editable={false}
-            hint={lc('barcode_type')}
-            margin={tMargin}
-            row={2}
-            text={codeFormat}
-            textTransform="uppercase"
-            variant="outline"
-            on:tap={(e) => selectBarcodeFormat(e)}
-        />
-        <label color={colorOnBackground} fontSize={17} margin="8 4" row={3} text={lc('color')} verticalAlignment="center" />
-        <absolutelayout backgroundColor={color} borderColor={colorOutline} borderRadius="50%" borderWidth={2} col={1} height={40} row={3} width={40} on:tap={changeColor} />
-        <SvgView backgroundColor="white" borderRadius={12} colSpan={2} height={100} item={{ svg }} row={4} stretch="aspectFit" visibility={code?.length ? 'visible' : 'collapse'} />
-        <label
-            colSpan={2}
-            fontSize={20}
-            fontWeight="bold"
-            row={4}
-            text={lc('invalid')}
-            textAlignment="center"
-            verticalAlignment="center"
-            visibility={code?.length && !validCode ? 'visible' : 'collapse'}
-        />
-    </gridlayout>
+    <stacklayout row={1}>
+        <stacklayout class="cardFormGroup">
+            <ListItemAutoSize columns="auto,*" fontSize={17} item={{ title: lc('name') }} showBottomLine={true}>
+                <textfield col={1} floating={false} hint={lc('name')} text={name} textAlignment="right" variant="none" verticalAlignment="center" on:textChange={(e) => (name = e.value)} />
+            </ListItemAutoSize>
+            <ListItemAutoSize columns="auto,*" fontSize={17} item={{ title: lc('barcode') }} showBottomLine={true}>
+                <textfield col={1} floating={false} hint={lc('barcode')} text={code} textAlignment="right" variant="none" verticalAlignment="center" on:textChange={onCodeTextChange} />
+            </ListItemAutoSize>
+            <ListItemAutoSize fontSize={17} item={{ title: lc('barcode_type'), rightValue: codeFormat.toUpperCase() }} showBottomLine={true} on:tap={(e) => selectBarcodeFormat(e)} />
+            <ListItemAutoSize columns="*,auto" fontSize={17} item={{ title: lc('color') }} on:tap={changeColor}>
+                <absolutelayout backgroundColor={color} borderColor={colorOutline} borderRadius="50%" borderWidth={2} col={1} height={36} width={36} />
+            </ListItemAutoSize>
+        </stacklayout>
+        <gridlayout height={100} margin="0 16 16 16" visibility={code?.length ? 'visible' : 'collapse'}>
+            <SvgView backgroundColor="white" borderRadius={12} item={{ svg }} stretch="aspectFit" />
+            <label fontSize={20} fontWeight="bold" text={lc('invalid')} textAlignment="center" verticalAlignment="center" visibility={!validCode ? 'visible' : 'collapse'} />
+        </gridlayout>
+    </stacklayout>
 </gesturerootview>
diff --git a/app/components/widgets/ExtraFieldPicker.svelte b/app/components/widgets/ExtraFieldPicker.svelte
index 3be98026..a6f2ba8e 100644
--- a/app/components/widgets/ExtraFieldPicker.svelte
+++ b/app/components/widgets/ExtraFieldPicker.svelte
@@ -4,6 +4,7 @@
     import { showError } from '@shared/utils/showError';
     import dayjs from 'dayjs';
     import { formatDate } from '~/helpers/locale';
+    import ListItemAutoSize from '@shared/components/ListItemAutoSize.svelte';
     import SheetHeader from '~/components/common/SheetHeader.svelte';
     import { ExtraFieldType } from '~/models/OCRDocument';
     import { pickDate, showPopoverMenu } from '~/utils/ui';
@@ -11,8 +12,8 @@
 </script>
 
 <script lang="ts">
-    let { colorOnSurfaceVariant, colorOutlineVariant } = $colors;
-    $: ({ colorOnSurfaceVariant, colorOutlineVariant } = $colors);
+    let { colorOnSurfaceVariant } = $colors;
+    $: ({ colorOnSurfaceVariant } = $colors);
 
     export let editing = false;
     export let name = null;
@@ -23,7 +24,6 @@
     let currentName = name;
     let currentType = type;
     let rootView;
-    const tMargin = '4 0 4 0';
 
     async function selectDate(e) {
         try {
@@ -128,23 +128,26 @@
     }
 </script>
 
-<gesturerootview bind:this={rootView} rows="auto,auto">
+<gesturerootview bind:this={rootView} class="cardFormSheet" rows="auto,auto">
     <SheetHeader doneText={editing ? lc('edit') : lc('add')} onCancel={close} onDone={add} title={editing ? lc('edit_extra_field') : lc('add_extra_field')} />
-    <stacklayout padding="0 16 16 16" row={1}>
-        <gridlayout>
-            <textfield hint={lc('name')} margin={tMargin} paddingLeft={60} text={currentName} variant="outline" on:textChange={(e) => (currentName = e.value)} />
-            <uibutton class="icon-btn" color={colorOnSurfaceVariant} horizontalAlignment="left" text="mdi-menu-down" variant="text" verticalAlignment="middle" on:tap={selecteTemplateName} />
-        </gridlayout>
-        <textfield editable={false} hint={lc('type')} margin={tMargin} text={lc(currentType)} textTransform="uppercase" variant="outline" on:tap={(e) => selectType(e)} />
-        <textview
-            editable={currentType !== ExtraFieldType.Date}
-            hint={lc('value')}
-            keyboardType={getKeyboardType(currentType)}
-            margin={tMargin}
-            text={currentType === ExtraFieldType.Date ? formatDate(currentTime, 'LL') : currentValue}
-            variant="outline"
-            on:textChange={(e) => (currentValue = e.value)}
-            on:tap={(e) => selectDate(e)}
-        />
+    <stacklayout class="cardFormGroup" row={1}>
+        <ListItemAutoSize columns="auto,*,auto" fontSize={17} item={{ title: lc('name') }} showBottomLine={true}>
+            <textfield col={1} floating={false} hint={lc('name')} text={currentName} textAlignment="right" variant="none" verticalAlignment="center" on:textChange={(e) => (currentName = e.value)} />
+            <uibutton class="icon-btn" col={2} color={colorOnSurfaceVariant} text="mdi-menu-down" variant="text" verticalAlignment="middle" on:tap={selecteTemplateName} />
+        </ListItemAutoSize>
+        <ListItemAutoSize fontSize={17} item={{ title: lc('type'), rightValue: lc(currentType) }} showBottomLine={true} on:tap={(e) => selectType(e)} />
+        <ListItemAutoSize columns="auto,*" fontSize={17} item={{ title: lc('value') }}>
+            <textview
+                col={1}
+                editable={currentType !== ExtraFieldType.Date}
+                hint={lc('value')}
+                keyboardType={getKeyboardType(currentType)}
+                text={currentType === ExtraFieldType.Date ? formatDate(currentTime, 'LL') : currentValue}
+                textAlignment="right"
+                variant="none"
+                on:textChange={(e) => (currentValue = e.value)}
+                on:tap={(e) => selectDate(e)}
+            />
+        </ListItemAutoSize>
     </stacklayout>
 </gesturerootview>

From e42213de3beb2a38a8446a9b5f4773140909b182 Mon Sep 17 00:00:00 2001
From: Martin Guillon <dev@akylas.fr>
Date: Thu, 29 Oct 2026 10:49:26 +0100
Subject: [PATCH 4/4] fix(ui): focus ring, keyboard and color row of the card
 sheets

The outlined fields take the accent while they have the focus: a css pseudo class set from
the focus and blur events on iOS, the stroke colors of the text field on Android. The sheets
with fields resize with the keyboard on Android, so the focused field stays visible. The
color row has the height of a field.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 app/app.android.scss                           | 12 ++++++++++++
 app/app.ios.scss                               | 11 +++++++++++
 app/components/list/CardsList.svelte           |  4 +++-
 app/components/view/CardEditSheet.svelte       |  2 ++
 app/components/view/CardView.svelte            |  4 +++-
 app/components/widgets/CreateCard.svelte       | 11 +++++++----
 app/components/widgets/ExtraFieldPicker.svelte |  4 +++-
 app/utils/constants.ts                         |  3 +++
 app/utils/svelte/actions.ts                    | 16 ++++++++++++++++
 9 files changed, 60 insertions(+), 7 deletions(-)
 create mode 100644 app/utils/svelte/actions.ts

diff --git a/app/app.android.scss b/app/app.android.scss
index 6434e362..100db4cd 100644
--- a/app/app.android.scss
+++ b/app/app.android.scss
@@ -27,3 +27,15 @@ button[variant='contained'] {
     border-radius: 30;
     border-width: 1;
 }
+
+// a field: 56 tall and 4 around
+.formRow {
+    height: 64;
+}
+
+// the outline takes the accent while the field has the focus
+textfield[variant='outline'] {
+    floating-color: var(--colorPrimary);
+    stroke-color: var(--colorPrimary);
+    stroke-inactive-color: var(--colorOutline);
+}
diff --git a/app/app.ios.scss b/app/app.ios.scss
index 58afa106..b4a3a327 100644
--- a/app/app.ios.scss
+++ b/app/app.ios.scss
@@ -106,3 +106,14 @@ textview[variant='outline'] {
     min-height: 84;
     padding: 12 16;
 }
+
+// a field: 48 tall and 4 around
+.formRow {
+    height: 56;
+}
+
+textfield[variant='outline']:focused,
+textview[variant='outline']:focused {
+    border-color: var(--colorPrimary);
+    border-width: 1.5;
+}
diff --git a/app/components/list/CardsList.svelte b/app/components/list/CardsList.svelte
index 38a4faf7..d1fa6ec2 100644
--- a/app/components/list/CardsList.svelte
+++ b/app/components/list/CardsList.svelte
@@ -20,7 +20,8 @@
         DEFAULT_NB_COLUMNS_LANDSCAPE,
         SETTINGS_CARD_ALWAYS_SHOW_NAME,
         SETTINGS_NB_COLUMNS,
-        SETTINGS_NB_COLUMNS_LANDSCAPE
+        SETTINGS_NB_COLUMNS_LANDSCAPE,
+        SHEET_SOFT_INPUT_MODE
     } from '~/utils/constants';
     import { appIcon } from '~/utils/appIcons';
     import { documentHasPKPassData } from '~/utils/pkpass';
@@ -82,6 +83,7 @@
             const result = await showBottomSheet({
                 parent: this,
                 view: CreateCard,
+                windowSoftInputMode: SHEET_SOFT_INPUT_MODE,
                 ignoreTopSafeArea: true
             });
             DEV_LOG && console.log('CreateCard', result);
diff --git a/app/components/view/CardEditSheet.svelte b/app/components/view/CardEditSheet.svelte
index 2aab2342..0f473c7b 100644
--- a/app/components/view/CardEditSheet.svelte
+++ b/app/components/view/CardEditSheet.svelte
@@ -10,6 +10,7 @@
     import { qrcodeService } from '~/services/qrcode';
     import { shortcutService } from '~/services/shortcuts';
     import { appIcon } from '~/utils/appIcons';
+    import { SHEET_SOFT_INPUT_MODE } from '~/utils/constants';
     import { pickColor } from '~/utils/ui';
     import { colors } from '~/variables';
     import ListItemAutoSize from '@shared/components/ListItemAutoSize.svelte';
@@ -109,6 +110,7 @@
                 parent: rootView,
                 skipCollapsedState: true,
                 view: ExtraFieldPicker,
+                windowSoftInputMode: SHEET_SOFT_INPUT_MODE,
                 props: { editing: !!field, ...(field?.extra || {}) }
             });
             if (!result) {
diff --git a/app/components/view/CardView.svelte b/app/components/view/CardView.svelte
index 48473706..446f256e 100644
--- a/app/components/view/CardView.svelte
+++ b/app/components/view/CardView.svelte
@@ -57,7 +57,8 @@
         EVENT_DOCUMENT_UPDATED,
         QRCODE_RESIZE_THRESHOLD,
         SETTINGS_DOCUMENT_NAME_FORMAT,
-        SETTINGS_FORCE_WHITE_BACKGROUND_QRCODE
+        SETTINGS_FORCE_WHITE_BACKGROUND_QRCODE,
+        SHEET_SOFT_INPUT_MODE
     } from '~/utils/constants';
     import { appIcon } from '~/utils/appIcons';
     import { optionsToMenuItems } from '~/utils/appMenu';
@@ -943,6 +944,7 @@
             const saved = await showBottomSheet({
                 parent: page,
                 view: CardEditSheet,
+                windowSoftInputMode: SHEET_SOFT_INPUT_MODE,
                 detents: [{ fraction: 0.65 }, 'large'],
                 grabber: true,
                 props: { document }
diff --git a/app/components/widgets/CreateCard.svelte b/app/components/widgets/CreateCard.svelte
index 7717fb19..9d547092 100644
--- a/app/components/widgets/CreateCard.svelte
+++ b/app/components/widgets/CreateCard.svelte
@@ -5,6 +5,7 @@
     import { FORMATS, getBarcodeFallbackString, qrcodeService } from '~/services/qrcode';
     import { pickColor, showPopoverMenu } from '~/utils/ui';
     import { colors } from '~/variables';
+    import { focusState } from '~/utils/svelte/actions';
     import SheetHeader from '../common/SheetHeader.svelte';
     import SvgView from '../common/SVGView.svelte';
 </script>
@@ -88,8 +89,8 @@
 <gesturerootview bind:this={rootView} rows="auto,auto">
     <SheetHeader doneEnabled={name?.length > 0} doneText={lc('add')} onCancel={close} onDone={add} title={lc('create')} />
     <gridlayout columns="*,auto" padding="0 16 16 16" row={1} rows="auto,auto,auto,auto,auto,auto">
-        <textfield colSpan={2} hint={lc('name')} margin={tMargin} text={name} variant="outline" on:textChange={(e) => (name = e.value)} />
-        <textfield colSpan={2} hint={lc('barcode')} margin={tMargin} row={1} text={code} variant="outline" on:textChange={onCodeTextChange} />
+        <textfield colSpan={2} hint={lc('name')} margin={tMargin} text={name} use:focusState variant="outline" on:textChange={(e) => (name = e.value)} />
+        <textfield colSpan={2} hint={lc('barcode')} margin={tMargin} row={1} text={code} use:focusState variant="outline" on:textChange={onCodeTextChange} />
         <textfield
             colSpan={2}
             editable={false}
@@ -101,8 +102,10 @@
             variant="outline"
             on:tap={(e) => selectBarcodeFormat(e)}
         />
-        <label color={colorOnBackground} fontSize={17} margin="8 4" row={3} text={lc('color')} verticalAlignment="center" />
-        <absolutelayout backgroundColor={color} borderColor={colorOutline} borderRadius="50%" borderWidth={2} col={1} height={40} row={3} width={40} on:tap={changeColor} />
+        <gridlayout class="formRow" colSpan={2} columns="*,auto" row={3} on:tap={changeColor}>
+            <label color={colorOnBackground} fontSize={17} margin="0 4" text={lc('color')} verticalAlignment="center" />
+            <absolutelayout backgroundColor={color} borderColor={colorOutline} borderRadius="50%" borderWidth={2} col={1} height={40} verticalAlignment="center" width={40} />
+        </gridlayout>
         <SvgView backgroundColor="white" borderRadius={12} colSpan={2} height={100} item={{ svg }} row={4} stretch="aspectFit" visibility={code?.length ? 'visible' : 'collapse'} />
         <label
             colSpan={2}
diff --git a/app/components/widgets/ExtraFieldPicker.svelte b/app/components/widgets/ExtraFieldPicker.svelte
index 3be98026..637d835b 100644
--- a/app/components/widgets/ExtraFieldPicker.svelte
+++ b/app/components/widgets/ExtraFieldPicker.svelte
@@ -5,6 +5,7 @@
     import dayjs from 'dayjs';
     import { formatDate } from '~/helpers/locale';
     import SheetHeader from '~/components/common/SheetHeader.svelte';
+    import { focusState } from '~/utils/svelte/actions';
     import { ExtraFieldType } from '~/models/OCRDocument';
     import { pickDate, showPopoverMenu } from '~/utils/ui';
     import { colors } from '~/variables';
@@ -132,7 +133,7 @@
     <SheetHeader doneText={editing ? lc('edit') : lc('add')} onCancel={close} onDone={add} title={editing ? lc('edit_extra_field') : lc('add_extra_field')} />
     <stacklayout padding="0 16 16 16" row={1}>
         <gridlayout>
-            <textfield hint={lc('name')} margin={tMargin} paddingLeft={60} text={currentName} variant="outline" on:textChange={(e) => (currentName = e.value)} />
+            <textfield hint={lc('name')} margin={tMargin} paddingLeft={60} text={currentName} use:focusState variant="outline" on:textChange={(e) => (currentName = e.value)} />
             <uibutton class="icon-btn" color={colorOnSurfaceVariant} horizontalAlignment="left" text="mdi-menu-down" variant="text" verticalAlignment="middle" on:tap={selecteTemplateName} />
         </gridlayout>
         <textfield editable={false} hint={lc('type')} margin={tMargin} text={lc(currentType)} textTransform="uppercase" variant="outline" on:tap={(e) => selectType(e)} />
@@ -142,6 +143,7 @@
             keyboardType={getKeyboardType(currentType)}
             margin={tMargin}
             text={currentType === ExtraFieldType.Date ? formatDate(currentTime, 'LL') : currentValue}
+            use:focusState
             variant="outline"
             on:textChange={(e) => (currentValue = e.value)}
             on:tap={(e) => selectDate(e)}
diff --git a/app/utils/constants.ts b/app/utils/constants.ts
index 81afe1a0..3a79f071 100644
--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@@ -174,3 +174,6 @@ export const DOCUMENT_DATA_FILENAME = 'data.json';
 export const DELETED_DOCUMENTS_DATA_FILENAME = 'deleted_documents.json';
 export const DELETED_FOLDERS_DATA_FILENAME = 'deleted_folders.json';
 export const VALID_MARKER_FILENAME = '.valid';
+
+// SOFT_INPUT_ADJUST_RESIZE: a sheet with fields moves up with the keyboard
+export const SHEET_SOFT_INPUT_MODE = __ANDROID__ ? 16 : undefined;
diff --git a/app/utils/svelte/actions.ts b/app/utils/svelte/actions.ts
new file mode 100644
index 00000000..6bf49cb6
--- /dev/null
+++ b/app/utils/svelte/actions.ts
@@ -0,0 +1,16 @@
+import type { NativeViewElementNode } from '@nativescript-community/svelte-native/dom';
+import type { TextBase } from '@nativescript/core';
+
+/** css has no `:focus`: the field gets the `focused` pseudo class while it has the focus */
+export function focusState(node: NativeViewElementNode<TextBase>) {
+    const onFocus = () => node.nativeView.addPseudoClass('focused');
+    const onBlur = () => node.nativeView.deletePseudoClass('focused');
+    node.addEventListener('focus', onFocus);
+    node.addEventListener('blur', onBlur);
+    return {
+        destroy() {
+            node.removeEventListener('focus', onFocus);
+            node.removeEventListener('blur', onBlur);
+        }
+    };
+}