From 826cc42023614098ca3b4ccfe8321d9b22fe1413 Mon Sep 17 00:00:00 2001
From: Alberto <algonru@gmail.com>
Date: Tue, 15 Aug 2023 20:19:39 +0200
Subject: [PATCH 1/6] Smaller cashlink button with count

---
 src/components/CashlinkButton.vue          | 98 ++++++++++++++++++++++
 src/components/layouts/AddressOverview.vue | 41 ++++-----
 2 files changed, 116 insertions(+), 23 deletions(-)
 create mode 100644 src/components/CashlinkButton.vue

diff --git a/src/components/CashlinkButton.vue b/src/components/CashlinkButton.vue
new file mode 100644
index 000000000..adef42d44
--- /dev/null
+++ b/src/components/CashlinkButton.vue
@@ -0,0 +1,98 @@
+<template>
+    <button @click="$emit('toggle-unclaimed-cashlink-list')" @mousedown.prevent>
+        <div class="cashlink-button" :class="showUnclaimedCashlinkList ? 'active' : ''">
+            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="18" viewBox="0 0 12 18" fill="none">
+                <path
+                    d="M10.5 4.125C10.5 2.375 8.97692 1 7.03846 1H4.96154C3.02308
+                    1 1.5 2.375 1.5 4.125V7.875C1.5 9.625 3.02308 11 4.96154 11H5.65385"
+                    stroke-width="2" stroke-linecap="round" />
+                <path
+                    d="M1.5 13.875C1.5 15.625 3.02308 17 4.96154 17L7.03846
+                    17C8.97692 17 10.5 15.625 10.5 13.875L10.5 10.125C10.5 8.375 8.97692 7 7.03846 7L6.34615 7"
+                    stroke-width="2" stroke-linecap="round" />
+            </svg>
+        </div>
+        <div class="notification-dot">
+            <span class="text">{{ unclaimedCashlinkCount }}</span>
+        </div>
+    </button>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+
+export default defineComponent({
+    setup() {
+        return {
+        };
+    },
+    props: {
+        unclaimedCashlinkCount: {
+            type: Number,
+        },
+        showUnclaimedCashlinkList: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    components: {
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+button {
+    position: relative;
+    background: transparent;
+    border-width: 0;
+    cursor: pointer;
+}
+
+.cashlink-button {
+    width: 4rem;
+    height: 4rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 2rem;
+    background: var(--nimiq-blue-bg);
+
+    transition: background var(--attr-duration) var(--nimiq-ease);
+
+    svg {
+        stroke: white;
+    }
+}
+
+.active {
+    background: transparent;
+    border: 1.5px solid rgba(31, 35, 72, 0.16);
+
+    svg {
+        stroke: var(--nimiq-blue);
+    }
+}
+
+.notification-dot {
+    position: absolute;
+    bottom: -1rem;
+    right: 0;
+    padding: 2.5px 5px;
+    font-size: 11px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 2rem;
+    border: 0.375rem solid var(--bg-primary);
+    transition: border-color 400ms var(--nimiq-ease);
+    color: white;
+    font-family: Muli;
+    background: var(--light-blue-gradient, radial-gradient(100% 100% at 100% 100.00%, #265DD7 0%, #0582CA 100%));
+
+    .text {
+        font-size: 11px;
+        font-weight: 600;
+        line-height: 100%;
+    }
+}</style>
diff --git a/src/components/layouts/AddressOverview.vue b/src/components/layouts/AddressOverview.vue
index b476acceb..1dad4db4d 100644
--- a/src/components/layouts/AddressOverview.vue
+++ b/src/components/layouts/AddressOverview.vue
@@ -7,18 +7,13 @@
             <div class="actions-mobile flex-row">
                 <button class="reset icon-button" @click="$router.back()"><ArrowLeftIcon/></button>
                 <SearchBar v-model="searchString"/>
-                <button
+
+                <CashlinkButton
                     v-if="activeCurrency === 'nim' && unclaimedCashlinkCount"
-                    class="nq-button-s orange unclaimed-cashlinks"
-                    :class="{'active': showUnclaimedCashlinkList}"
-                    @click="showUnclaimedCashlinkList = !showUnclaimedCashlinkList"
-                    @mousedown.prevent
-                >
-                    {{ $tc(
-                        '{count} pending Cashlink | {count} pending Cashlinks',
-                        unclaimedCashlinkCount,
-                    ) }}
-                </button>
+                    :showUnclaimedCashlinkList="showUnclaimedCashlinkList"
+                    :unclaimedCashlinkCount="unclaimedCashlinkCount"
+                    @toggle-unclaimed-cashlink-list="toggleUnclaimedCashlinkList"
+                />
                 <button
                     class="reset icon-button"
                     @click="$event.currentTarget.focus() /* Required for MacOS Safari & Firefox */"
@@ -124,19 +119,12 @@
             </div>
             <div class="actions flex-row">
                 <SearchBar v-model="searchString"/>
-
-                <button
+                <CashlinkButton
                     v-if="activeCurrency === 'nim' && unclaimedCashlinkCount"
-                    class="nq-button-s orange unclaimed-cashlinks"
-                    :class="{'active': showUnclaimedCashlinkList}"
-                    @click="showUnclaimedCashlinkList = !showUnclaimedCashlinkList"
-                    @mousedown.prevent
-                >
-                    {{ $tc(
-                        '{count} pending Cashlink | {count} pending Cashlinks',
-                        unclaimedCashlinkCount,
-                    ) }}
-                </button>
+                    :showUnclaimedCashlinkList="showUnclaimedCashlinkList"
+                    :unclaimedCashlinkCount="unclaimedCashlinkCount"
+                    @toggle-unclaimed-cashlink-list="toggleUnclaimedCashlinkList"
+                />
 
                 <button class="send nq-button-pill light-blue flex-row"
                     @click="$router.push(`/send/${activeCurrency}`)" @mousedown.prevent
@@ -233,6 +221,7 @@ import UsdcTransactionList from '../UsdcTransactionList.vue';
 import MobileActionBar from '../MobileActionBar.vue';
 import RenameIcon from '../icons/AccountMenu/RenameIcon.vue';
 import RefreshIcon from '../icons/RefreshIcon.vue';
+import CashlinkButton from '../CashlinkButton.vue';
 
 import { useAccountStore } from '../../stores/Account';
 import { useAddressStore } from '../../stores/Address';
@@ -331,6 +320,10 @@ export default defineComponent({
             setPromoBoxVisible(false);
         }
 
+        function toggleUnclaimedCashlinkList() {
+            showUnclaimedCashlinkList.value = !showUnclaimedCashlinkList.value;
+        }
+
         return {
             activeCurrency,
             searchString,
@@ -352,6 +345,7 @@ export default defineComponent({
             onTransactionListScroll,
             address$,
             addressMasked,
+            toggleUnclaimedCashlinkList,
         };
     },
     components: {
@@ -375,6 +369,7 @@ export default defineComponent({
         HighFiveIcon,
         BoxedArrowUpIcon,
         UsdcIcon,
+        CashlinkButton,
     },
 });
 </script>

From a2ce7c471d9c08e0fa6a2dff92058a1e4789317f Mon Sep 17 00:00:00 2001
From: Alberto <algonru@gmail.com>
Date: Thu, 17 Aug 2023 09:42:11 +0200
Subject: [PATCH 2/6] New color for unclaimed cashlink list

---
 src/components/TransactionList.vue | 17 ++++++++++++---
 src/i18n/en.po                     | 33 +++++++++++++-----------------
 2 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/src/components/TransactionList.vue b/src/components/TransactionList.vue
index 5b2b6bbcf..28f902f3d 100644
--- a/src/components/TransactionList.vue
+++ b/src/components/TransactionList.vue
@@ -10,8 +10,11 @@
         >
             <template v-if="showUnclaimedCashlinkList" v-slot:before>
                 <div class="unclaimed-cashlink-list">
-                    <CrossCloseButton class="top-right nq-orange" @click="$emit('close-unclaimed-cashlink-list')"/>
-                    <div class="month-label nq-orange"><label>{{ $t('Pending Cashlinks') }}</label></div>
+                    <CrossCloseButton
+                        class="top-right nq-blue opacity-50"
+                        @click="$emit('close-unclaimed-cashlink-list')"
+                    />
+                    <div class="month-label nq-blue opacity-40"><label>{{ $t('Pending Cashlinks') }}</label></div>
                     <TransactionListItem
                         v-for="tx in unclaimedCashlinkTxs"
                         :transaction="tx"
@@ -472,7 +475,7 @@ export default defineComponent({
     padding: 2rem;
     position: relative;
     margin: 4rem -2rem 0;
-    box-shadow: inset 0 0 0 0.1875rem rgba(252, 135, 2, 0.4);
+    box-shadow: inset 0 0 0 0.1875rem rgba(31, 35, 72, 0.16);
 
     .cross-close-button {
         top: 1.5rem;
@@ -690,4 +693,12 @@ export default defineComponent({
         }
     }
 }
+
+.opacity-50 {
+    opacity: 0.5;
+}
+
+.opacity-40 {
+    opacity: 0.4;
+}
 </style>
diff --git a/src/i18n/en.po b/src/i18n/en.po
index e067ee878..4301da2d3 100644
--- a/src/i18n/en.po
+++ b/src/i18n/en.po
@@ -41,11 +41,6 @@ msgstr ""
 msgid "{count} Peer | {count} Peers"
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:135
-#: src/components/layouts/AddressOverview.vue:17
-msgid "{count} pending Cashlink | {count} pending Cashlinks"
-msgstr ""
-
 #: src/components/modals/overlays/QrCodeOverlay.vue:3
 msgid "{currency} Address"
 msgstr ""
@@ -279,7 +274,7 @@ msgstr ""
 msgid "All new features are exclusive to new accounts. Upgrade now, it only takes seconds."
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:187
+#: src/components/layouts/AddressOverview.vue:175
 msgid "All swaps are part of your transaction history and feature a small swap icon."
 msgstr ""
 
@@ -394,7 +389,7 @@ msgstr ""
 
 #: src/components/AddressList.vue:172
 #: src/components/layouts/AccountOverview.vue:105
-#: src/components/layouts/AddressOverview.vue:83
+#: src/components/layouts/AddressOverview.vue:78
 #: src/components/layouts/Settings.vue:119
 #: src/components/LegacyAccountNotice.vue:21
 #: src/components/modals/BtcTransactionModal.vue:116
@@ -601,7 +596,7 @@ msgstr ""
 msgid "Click on ‘Troubleshooting’ to learn more."
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:189
+#: src/components/layouts/AddressOverview.vue:177
 #: src/components/swap/SwapAnimation.vue:105
 msgid "Close"
 msgstr ""
@@ -930,8 +925,8 @@ msgstr ""
 msgid "Expired HTLC"
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:44
-#: src/components/layouts/AddressOverview.vue:75
+#: src/components/layouts/AddressOverview.vue:39
+#: src/components/layouts/AddressOverview.vue:70
 #: src/components/modals/AccountMenuModal.vue:30
 msgid "Export History"
 msgstr ""
@@ -1255,7 +1250,7 @@ msgstr ""
 msgid "Learn more here"
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:174
+#: src/components/layouts/AddressOverview.vue:162
 msgid "Let's get started! Create your Nimiq account:"
 msgstr ""
 
@@ -1599,7 +1594,7 @@ msgstr ""
 msgid "Read all about it in this {blog_post} or click below for the new wallet intro."
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:152
+#: src/components/layouts/AddressOverview.vue:140
 #: src/components/MobileActionBar.vue:4
 msgid "Receive"
 msgstr ""
@@ -1689,8 +1684,8 @@ msgstr ""
 msgid "Release Notes"
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:32
-#: src/components/layouts/AddressOverview.vue:63
+#: src/components/layouts/AddressOverview.vue:27
+#: src/components/layouts/AddressOverview.vue:58
 #: src/components/modals/AccountMenuModal.vue:16
 msgid "Rename"
 msgstr ""
@@ -1704,8 +1699,8 @@ msgstr ""
 msgid "Required"
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:38
-#: src/components/layouts/AddressOverview.vue:69
+#: src/components/layouts/AddressOverview.vue:33
+#: src/components/layouts/AddressOverview.vue:64
 msgid "Rescan"
 msgstr ""
 
@@ -1816,7 +1811,7 @@ msgstr ""
 msgid "Selling now available"
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:147
+#: src/components/layouts/AddressOverview.vue:135
 #: src/components/MobileActionBar.vue:10
 msgid "Send"
 msgstr ""
@@ -1978,7 +1973,7 @@ msgstr ""
 msgid "Show values as {currency}"
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:175
+#: src/components/layouts/AddressOverview.vue:163
 msgid "Signup"
 msgstr ""
 
@@ -2571,7 +2566,7 @@ msgstr ""
 msgid "Your payout is on its way"
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:183
+#: src/components/layouts/AddressOverview.vue:171
 msgid "Your swap was successful!"
 msgstr ""
 

From 69571ddf161f87e225e591931cc0a6f554371888 Mon Sep 17 00:00:00 2001
From: Alberto <algonru@gmail.com>
Date: Thu, 17 Aug 2023 12:45:35 +0200
Subject: [PATCH 3/6] SearchBar grow/collapse behavior Added cross button for
 closing/clearing input

---
 src/components/SearchBar.vue               | 101 ++++++++++++++++++---
 src/components/layouts/AddressOverview.vue |  41 +++++----
 src/i18n/en.po                             |  38 ++++----
 3 files changed, 127 insertions(+), 53 deletions(-)

diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index 121c1e3e2..20114b544 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -1,27 +1,28 @@
 <template>
-    <div class="search-bar" @click="$refs.searchBarInput.focus()">
+    <div
+        class="search-bar"
+        @click="$refs.searchBarInput.focus()"
+        :style="{ 'max-width': `${maxWidth}` }"
+    >
         <svg fill="none" xmlns="http://www.w3.org/2000/svg">
             <circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="2"/>
             <path d="M13.31 14.73a1 1 0 001.42-1.42l-1.42 1.42zM8.3 9.7l5.02 5.02 1.42-1.42L9.7 8.3 8.29 9.71z"
                 fill="currentColor"/>
         </svg>
-        <input
-            ref="searchBarInput"
-            type="text"
-            :value="value"
-            :placeholder="width < 50
-                ? ''
-                : width > 340
-                    ? $t('Search transactions by contact, address, etc.')
-                    : width > 150
-                        ? $t('Search transactions')
-                        : $t('Search')"
+        <input ref="searchBarInput" type="text" :value="value" :placeholder="placeholderText"
             @input="$emit('input', $event.target.value)" />
+        <CrossCloseButton
+            class="cross-close-button"
+            v-if="isInputActive"
+            @click="handleClose"
+        />
     </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted, onUnmounted } from '@vue/composition-api';
+import { defineComponent, ref, onMounted, onUnmounted, computed } from '@vue/composition-api';
+
+import CrossCloseButton from './CrossCloseButton.vue';
 
 export default defineComponent({
     name: 'search-bar',
@@ -31,12 +32,53 @@ export default defineComponent({
             default: '',
         },
     },
-    setup() {
+    setup(props, context) {
         const searchBarInput = ref<HTMLInputElement | null>(null);
         const width = ref(1000);
+        const placeholderText = ref('');
+        const isInputFocused = ref(false);
 
         let observer: ResizeObserver;
 
+        const getFontSize = (element: HTMLElement) => {
+            const style = getComputedStyle(element);
+            const fontSize = style.getPropertyValue('--body-size');
+            return fontSize;
+        };
+
+        const getTextWidth = (text: string, size: string) => {
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            if (!ctx) return 0;
+            ctx.font = size;
+            return ctx.measureText(text).width;
+        };
+
+        const maxWidth = computed(() => {
+            if (!searchBarInput.value) return '100%';
+            const fontSize = getFontSize(searchBarInput.value);
+            const textSize = getTextWidth(placeholderText.value, fontSize);
+            return isInputActive.value ? '100%' : `${textSize + 120}px`;
+        });
+
+        const handleFocus = () => {
+            isInputFocused.value = true;
+        };
+
+        const handleBlur = () => {
+            isInputFocused.value = false;
+        };
+
+        const isInputActive = computed(() => {
+            // Only collapse if not focused and no text
+            if (!isInputFocused.value && searchBarInput.value?.value === '') return false;
+            return true;
+        });
+
+        const handleClose = () => {
+            context.emit('input', '');
+        };
+
         onMounted(() => {
             if ('ResizeObserver' in window && searchBarInput.value) {
                 observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
@@ -46,22 +88,44 @@ export default defineComponent({
                             ? entry.contentBoxSize[0].inlineSize
                             : (entry.contentBoxSize as any).inlineSize)
                         : entry.contentRect.width;
+
+                    placeholderText.value = (width.value < 50
+                        ? ''
+                        : width.value > 340
+                            ? context.root.$t('Search transactions by contact, address, etc.')
+                            : width.value > 130
+                                ? context.root.$t('Search transactions')
+                                : context.root.$t('Search')) as string;
                 });
                 observer.observe(searchBarInput.value);
             }
+
+            searchBarInput.value?.addEventListener('focus', handleFocus);
+
+            searchBarInput.value?.addEventListener('blur', handleBlur);
         });
 
         onUnmounted(() => {
             if (observer && searchBarInput.value) {
                 observer.unobserve(searchBarInput.value);
             }
+
+            searchBarInput.value?.removeEventListener('focus', handleFocus);
+            searchBarInput.value?.removeEventListener('blur', handleBlur);
         });
 
         return {
             searchBarInput,
             width,
+            maxWidth,
+            placeholderText,
+            isInputActive,
+            handleClose,
         };
     },
+    components: {
+        CrossCloseButton,
+    },
 });
 </script>
 
@@ -78,7 +142,7 @@ export default defineComponent({
     padding: 0.75rem 0;
     min-width: 0;
 
-    transition: color var(--attr-duration) var(--nimiq-ease);
+    transition: color var(--attr-duration) var(--nimiq-ease), max-width var(--attr-duration) var(--nimiq-ease);
 
     &::after {
         content: '';
@@ -156,4 +220,11 @@ input {
         }
     }
 }
+
+.cross-close-button {
+    position: absolute;
+    z-index: 1;
+    right: 1.75rem;
+    cursor: pointer;
+}
 </style>
diff --git a/src/components/layouts/AddressOverview.vue b/src/components/layouts/AddressOverview.vue
index 1dad4db4d..904368cd4 100644
--- a/src/components/layouts/AddressOverview.vue
+++ b/src/components/layouts/AddressOverview.vue
@@ -119,26 +119,29 @@
             </div>
             <div class="actions flex-row">
                 <SearchBar v-model="searchString"/>
-                <CashlinkButton
-                    v-if="activeCurrency === 'nim' && unclaimedCashlinkCount"
-                    :showUnclaimedCashlinkList="showUnclaimedCashlinkList"
-                    :unclaimedCashlinkCount="unclaimedCashlinkCount"
-                    @toggle-unclaimed-cashlink-list="toggleUnclaimedCashlinkList"
-                />
 
-                <button class="send nq-button-pill light-blue flex-row"
-                    @click="$router.push(`/send/${activeCurrency}`)" @mousedown.prevent
-                    :disabled="(activeCurrency === 'nim' && (!activeAddressInfo || !activeAddressInfo.balance))
-                        || (activeCurrency === 'btc' && !btcAccountBalance)
-                        || (activeCurrency === 'usdc' && (!usdcAddressInfo || !usdcAddressInfo.balance))"
-                >
-                    <ArrowRightSmallIcon />{{ $t('Send') }}
-                </button>
-                <button class="receive nq-button-s flex-row"
-                    @click="$router.push(`/receive/${activeCurrency}`)" @mousedown.prevent
-                >
-                    <ArrowRightSmallIcon />{{ $t('Receive') }}
-                </button>
+                <div class="flex-row">
+                    <CashlinkButton
+                        v-if="activeCurrency === 'nim' && unclaimedCashlinkCount"
+                        :showUnclaimedCashlinkList="showUnclaimedCashlinkList"
+                        :unclaimedCashlinkCount="unclaimedCashlinkCount"
+                        @toggle-unclaimed-cashlink-list="toggleUnclaimedCashlinkList"
+                    />
+
+                    <button class="send nq-button-pill light-blue flex-row"
+                        @click="$router.push(`/send/${activeCurrency}`)" @mousedown.prevent
+                        :disabled="(activeCurrency === 'nim' && (!activeAddressInfo || !activeAddressInfo.balance))
+                            || (activeCurrency === 'btc' && !btcAccountBalance)
+                            || (activeCurrency === 'usdc' && (!usdcAddressInfo || !usdcAddressInfo.balance))"
+                    >
+                        <ArrowRightSmallIcon />{{ $t('Send') }}
+                    </button>
+                    <button class="receive nq-button-s flex-row"
+                        @click="$router.push(`/receive/${activeCurrency}`)" @mousedown.prevent
+                    >
+                        <ArrowRightSmallIcon />{{ $t('Receive') }}
+                    </button>
+                </div>
             </div>
             <div class="scroll-mask top"></div>
             <TransactionList
diff --git a/src/i18n/en.po b/src/i18n/en.po
index 4301da2d3..78d43a95c 100644
--- a/src/i18n/en.po
+++ b/src/i18n/en.po
@@ -274,7 +274,7 @@ msgstr ""
 msgid "All new features are exclusive to new accounts. Upgrade now, it only takes seconds."
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:175
+#: src/components/layouts/AddressOverview.vue:178
 msgid "All swaps are part of your transaction history and feature a small swap icon."
 msgstr ""
 
@@ -465,8 +465,8 @@ msgstr ""
 msgid "Buy more here in the wallet."
 msgstr ""
 
-#: src/components/TransactionList.vue:65
-#: src/components/TransactionList.vue:75
+#: src/components/TransactionList.vue:68
+#: src/components/TransactionList.vue:78
 msgid "Buy NIM"
 msgstr ""
 
@@ -596,7 +596,7 @@ msgstr ""
 msgid "Click on ‘Troubleshooting’ to learn more."
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:177
+#: src/components/layouts/AddressOverview.vue:180
 #: src/components/swap/SwapAnimation.vue:105
 msgid "Close"
 msgstr ""
@@ -629,7 +629,7 @@ msgid "Confirm account"
 msgstr ""
 
 #: src/components/BtcTransactionList.vue:54
-#: src/components/TransactionList.vue:57
+#: src/components/TransactionList.vue:60
 #: src/components/UsdcTransactionList.vue:45
 msgid "Congrats"
 msgstr ""
@@ -983,7 +983,7 @@ msgid "fees"
 msgstr ""
 
 #: src/components/BtcTransactionList.vue:38
-#: src/components/TransactionList.vue:48
+#: src/components/TransactionList.vue:51
 #: src/components/UsdcTransactionList.vue:36
 msgid "Fetching"
 msgstr ""
@@ -1218,7 +1218,7 @@ msgstr ""
 msgid "Invalid swap state, swap aborted!"
 msgstr ""
 
-#: src/components/TransactionList.vue:59
+#: src/components/TransactionList.vue:62
 msgid "Invite a friend with a {cashlink} or buy more here in the wallet."
 msgstr ""
 
@@ -1250,7 +1250,7 @@ msgstr ""
 msgid "Learn more here"
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:162
+#: src/components/layouts/AddressOverview.vue:165
 msgid "Let's get started! Create your Nimiq account:"
 msgstr ""
 
@@ -1422,7 +1422,7 @@ msgid "No request received."
 msgstr ""
 
 #: src/components/BtcTransactionList.vue:77
-#: src/components/TransactionList.vue:80
+#: src/components/TransactionList.vue:83
 #: src/components/UsdcTransactionList.vue:62
 msgid "No transactions found"
 msgstr ""
@@ -1510,7 +1510,7 @@ msgstr ""
 msgid "pending"
 msgstr ""
 
-#: src/components/TransactionList.vue:14
+#: src/components/TransactionList.vue:17
 msgid "Pending Cashlinks"
 msgstr ""
 
@@ -1594,7 +1594,7 @@ msgstr ""
 msgid "Read all about it in this {blog_post} or click below for the new wallet intro."
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:140
+#: src/components/layouts/AddressOverview.vue:142
 #: src/components/MobileActionBar.vue:4
 msgid "Receive"
 msgstr ""
@@ -1743,15 +1743,15 @@ msgid ""
 msgstr ""
 
 #: src/components/CountrySelector.vue:22
-#: src/components/SearchBar.vue:18
+#: src/components/SearchBar.vue:98
 msgid "Search"
 msgstr ""
 
-#: src/components/SearchBar.vue:17
+#: src/components/SearchBar.vue:97
 msgid "Search transactions"
 msgstr ""
 
-#: src/components/SearchBar.vue:15
+#: src/components/SearchBar.vue:95
 msgid "Search transactions by contact, address, etc."
 msgstr ""
 
@@ -1811,7 +1811,7 @@ msgstr ""
 msgid "Selling now available"
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:135
+#: src/components/layouts/AddressOverview.vue:137
 #: src/components/MobileActionBar.vue:10
 msgid "Send"
 msgstr ""
@@ -1973,7 +1973,7 @@ msgstr ""
 msgid "Show values as {currency}"
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:163
+#: src/components/layouts/AddressOverview.vue:166
 msgid "Signup"
 msgstr ""
 
@@ -2496,7 +2496,7 @@ msgid "You need a SEPA account that supports instant transactions."
 msgstr ""
 
 #: src/components/BtcTransactionList.vue:55
-#: src/components/TransactionList.vue:58
+#: src/components/TransactionList.vue:61
 #: src/components/UsdcTransactionList.vue:46
 msgid "You now own crypto!"
 msgstr ""
@@ -2566,7 +2566,7 @@ msgstr ""
 msgid "Your payout is on its way"
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:171
+#: src/components/layouts/AddressOverview.vue:174
 msgid "Your swap was successful!"
 msgstr ""
 
@@ -2575,7 +2575,7 @@ msgid "Your transaction must be SEPA Instant"
 msgstr ""
 
 #: src/components/BtcTransactionList.vue:65
-#: src/components/TransactionList.vue:72
+#: src/components/TransactionList.vue:75
 #: src/components/UsdcTransactionList.vue:55
 msgid "Your transactions will appear here"
 msgstr ""

From b02d60c38356138a0fe6fe7a04f4b656e6b24dc9 Mon Sep 17 00:00:00 2001
From: Alberto <algonru@gmail.com>
Date: Fri, 18 Aug 2023 11:40:53 +0200
Subject: [PATCH 4/6] CrossCloseButton changed DOM order to allow interactivity

---
 src/components/TransactionList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TransactionList.vue b/src/components/TransactionList.vue
index 28f902f3d..f3969fb3a 100644
--- a/src/components/TransactionList.vue
+++ b/src/components/TransactionList.vue
@@ -10,11 +10,11 @@
         >
             <template v-if="showUnclaimedCashlinkList" v-slot:before>
                 <div class="unclaimed-cashlink-list">
+                    <div class="month-label nq-blue opacity-40"><label>{{ $t('Pending Cashlinks') }}</label></div>
                     <CrossCloseButton
                         class="top-right nq-blue opacity-50"
                         @click="$emit('close-unclaimed-cashlink-list')"
                     />
-                    <div class="month-label nq-blue opacity-40"><label>{{ $t('Pending Cashlinks') }}</label></div>
                     <TransactionListItem
                         v-for="tx in unclaimedCashlinkTxs"
                         :transaction="tx"

From a1ed7b2e7228df2e5f2f0ec221626154e0d38c64 Mon Sep 17 00:00:00 2001
From: Alberto <algonru@gmail.com>
Date: Sat, 19 Aug 2023 10:54:44 +0200
Subject: [PATCH 5/6] SearchBar grow/collapse behavior Improved tablet design
 Fixed some edge cases when the input was losing focus

---
 src/components/SearchBar.vue               | 57 +++++++++++++++-------
 src/components/layouts/AddressOverview.vue | 32 +++++++-----
 src/i18n/en.po                             | 34 ++++++-------
 3 files changed, 77 insertions(+), 46 deletions(-)

diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index 20114b544..b757249c1 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -1,16 +1,23 @@
 <template>
     <div
-        class="search-bar"
+        class="search-bar cover-all"
         @click="$refs.searchBarInput.focus()"
+        @pointerdown.prevent
         :style="{ 'max-width': `${maxWidth}` }"
     >
         <svg fill="none" xmlns="http://www.w3.org/2000/svg">
-            <circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="2"/>
+            <circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="2" />
             <path d="M13.31 14.73a1 1 0 001.42-1.42l-1.42 1.42zM8.3 9.7l5.02 5.02 1.42-1.42L9.7 8.3 8.29 9.71z"
-                fill="currentColor"/>
+                fill="currentColor" />
         </svg>
-        <input ref="searchBarInput" type="text" :value="value" :placeholder="placeholderText"
-            @input="$emit('input', $event.target.value)" />
+        <input
+            ref="searchBarInput"
+            type="text" :value="value"
+            :placeholder="placeholderText"
+            @input="$emit('input', $event.target.value)"
+            @focus="handleFocus"
+            @blur="handleBlur"
+        />
         <CrossCloseButton
             class="cross-close-button"
             v-if="isInputActive"
@@ -20,7 +27,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted, onUnmounted, computed } from '@vue/composition-api';
+import { defineComponent, ref, onMounted, onUnmounted, computed, watch } from '@vue/composition-api';
 
 import CrossCloseButton from './CrossCloseButton.vue';
 
@@ -69,14 +76,18 @@ export default defineComponent({
             isInputFocused.value = false;
         };
 
+        const inputValue = computed(() => props.value);
+
         const isInputActive = computed(() => {
             // Only collapse if not focused and no text
-            if (!isInputFocused.value && searchBarInput.value?.value === '') return false;
+            if (!isInputFocused.value && inputValue.value === '') return false;
             return true;
         });
 
-        const handleClose = () => {
+        const handleClose = (e: Event) => {
             context.emit('input', '');
+            // Prevent the search bar from losing or gaining focus when not intended
+            e.stopImmediatePropagation();
         };
 
         onMounted(() => {
@@ -99,19 +110,12 @@ export default defineComponent({
                 });
                 observer.observe(searchBarInput.value);
             }
-
-            searchBarInput.value?.addEventListener('focus', handleFocus);
-
-            searchBarInput.value?.addEventListener('blur', handleBlur);
         });
 
         onUnmounted(() => {
             if (observer && searchBarInput.value) {
                 observer.unobserve(searchBarInput.value);
             }
-
-            searchBarInput.value?.removeEventListener('focus', handleFocus);
-            searchBarInput.value?.removeEventListener('blur', handleBlur);
         });
 
         return {
@@ -120,6 +124,8 @@ export default defineComponent({
             maxWidth,
             placeholderText,
             isInputActive,
+            handleFocus,
+            handleBlur,
             handleClose,
         };
     },
@@ -140,7 +146,8 @@ export default defineComponent({
     width: 100%;
     cursor: text;
     padding: 0.75rem 0;
-    min-width: 0;
+    margin-right: 1rem;
+    min-width: 5.5rem;
 
     transition: color var(--attr-duration) var(--nimiq-ease), max-width var(--attr-duration) var(--nimiq-ease);
 
@@ -213,7 +220,9 @@ input {
     }
 }
 
-@media (max-width: 700px) { // Full mobile breakpoint
+@media (max-width: 700px) {
+
+    // Full mobile breakpoint
     input {
         &::placeholder {
             font-weight: 600;
@@ -227,4 +236,18 @@ input {
     right: 1.75rem;
     cursor: pointer;
 }
+
+@media (min-width: 700px) and (max-width: 900px) {
+    .cover-all {
+        &:focus-within {
+            position: absolute;
+            z-index: 10;
+            background: var(--bg-primary);
+            box-shadow: 0 0 0 1rem var(--bg-primary);
+            border-radius: 6rem;
+
+            width: calc(100% - 5rem);
+        }
+    }
+}
 </style>
diff --git a/src/components/layouts/AddressOverview.vue b/src/components/layouts/AddressOverview.vue
index 904368cd4..92fc9a9f6 100644
--- a/src/components/layouts/AddressOverview.vue
+++ b/src/components/layouts/AddressOverview.vue
@@ -6,14 +6,16 @@
         >
             <div class="actions-mobile flex-row">
                 <button class="reset icon-button" @click="$router.back()"><ArrowLeftIcon/></button>
-                <SearchBar v-model="searchString"/>
+                <div class="flex-row justify-between w-full">
+                    <SearchBar v-model="searchString"/>
 
-                <CashlinkButton
-                    v-if="activeCurrency === 'nim' && unclaimedCashlinkCount"
-                    :showUnclaimedCashlinkList="showUnclaimedCashlinkList"
-                    :unclaimedCashlinkCount="unclaimedCashlinkCount"
-                    @toggle-unclaimed-cashlink-list="toggleUnclaimedCashlinkList"
-                />
+                    <CashlinkButton
+                        v-if="activeCurrency === 'nim' && unclaimedCashlinkCount"
+                        :showUnclaimedCashlinkList="showUnclaimedCashlinkList"
+                        :unclaimedCashlinkCount="unclaimedCashlinkCount"
+                        @toggle-unclaimed-cashlink-list="toggleUnclaimedCashlinkList"
+                    />
+                </div>
                 <button
                     class="reset icon-button"
                     @click="$event.currentTarget.focus() /* Required for MacOS Safari & Firefox */"
@@ -120,7 +122,7 @@
             <div class="actions flex-row">
                 <SearchBar v-model="searchString"/>
 
-                <div class="flex-row">
+                <div class="flex-row ml-auto">
                     <CashlinkButton
                         v-if="activeCurrency === 'nim' && unclaimedCashlinkCount"
                         :showUnclaimedCashlinkList="showUnclaimedCashlinkList"
@@ -602,6 +604,7 @@ export default defineComponent({
 
 .actions,
 .actions-mobile {
+    position: relative;
     justify-content: space-between;
     margin-bottom: 0.75rem;
     align-items: center;
@@ -718,10 +721,6 @@ export default defineComponent({
     }
 }
 
-.search-bar {
-    margin-right: 3rem;
-}
-
 .unclaimed-cashlinks {
     flex-shrink: 0;
     margin-right: 1rem;
@@ -980,4 +979,13 @@ export default defineComponent({
         }
     }
 }
+.justify-between {
+    justify-content: space-between;
+}
+.w-full {
+    width: 100%;
+}
+.ml-auto {
+    margin-left: auto;
+}
 </style>
diff --git a/src/i18n/en.po b/src/i18n/en.po
index 78d43a95c..7127ff2c4 100644
--- a/src/i18n/en.po
+++ b/src/i18n/en.po
@@ -274,7 +274,7 @@ msgstr ""
 msgid "All new features are exclusive to new accounts. Upgrade now, it only takes seconds."
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:178
+#: src/components/layouts/AddressOverview.vue:180
 msgid "All swaps are part of your transaction history and feature a small swap icon."
 msgstr ""
 
@@ -389,7 +389,7 @@ msgstr ""
 
 #: src/components/AddressList.vue:172
 #: src/components/layouts/AccountOverview.vue:105
-#: src/components/layouts/AddressOverview.vue:78
+#: src/components/layouts/AddressOverview.vue:80
 #: src/components/layouts/Settings.vue:119
 #: src/components/LegacyAccountNotice.vue:21
 #: src/components/modals/BtcTransactionModal.vue:116
@@ -596,7 +596,7 @@ msgstr ""
 msgid "Click on ‘Troubleshooting’ to learn more."
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:180
+#: src/components/layouts/AddressOverview.vue:182
 #: src/components/swap/SwapAnimation.vue:105
 msgid "Close"
 msgstr ""
@@ -925,8 +925,8 @@ msgstr ""
 msgid "Expired HTLC"
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:39
-#: src/components/layouts/AddressOverview.vue:70
+#: src/components/layouts/AddressOverview.vue:41
+#: src/components/layouts/AddressOverview.vue:72
 #: src/components/modals/AccountMenuModal.vue:30
 msgid "Export History"
 msgstr ""
@@ -1250,7 +1250,7 @@ msgstr ""
 msgid "Learn more here"
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:165
+#: src/components/layouts/AddressOverview.vue:167
 msgid "Let's get started! Create your Nimiq account:"
 msgstr ""
 
@@ -1594,7 +1594,7 @@ msgstr ""
 msgid "Read all about it in this {blog_post} or click below for the new wallet intro."
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:142
+#: src/components/layouts/AddressOverview.vue:144
 #: src/components/MobileActionBar.vue:4
 msgid "Receive"
 msgstr ""
@@ -1684,8 +1684,8 @@ msgstr ""
 msgid "Release Notes"
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:27
-#: src/components/layouts/AddressOverview.vue:58
+#: src/components/layouts/AddressOverview.vue:29
+#: src/components/layouts/AddressOverview.vue:60
 #: src/components/modals/AccountMenuModal.vue:16
 msgid "Rename"
 msgstr ""
@@ -1699,8 +1699,8 @@ msgstr ""
 msgid "Required"
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:33
-#: src/components/layouts/AddressOverview.vue:64
+#: src/components/layouts/AddressOverview.vue:35
+#: src/components/layouts/AddressOverview.vue:66
 msgid "Rescan"
 msgstr ""
 
@@ -1743,15 +1743,15 @@ msgid ""
 msgstr ""
 
 #: src/components/CountrySelector.vue:22
-#: src/components/SearchBar.vue:98
+#: src/components/SearchBar.vue:155
 msgid "Search"
 msgstr ""
 
-#: src/components/SearchBar.vue:97
+#: src/components/SearchBar.vue:154
 msgid "Search transactions"
 msgstr ""
 
-#: src/components/SearchBar.vue:95
+#: src/components/SearchBar.vue:152
 msgid "Search transactions by contact, address, etc."
 msgstr ""
 
@@ -1811,7 +1811,7 @@ msgstr ""
 msgid "Selling now available"
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:137
+#: src/components/layouts/AddressOverview.vue:139
 #: src/components/MobileActionBar.vue:10
 msgid "Send"
 msgstr ""
@@ -1973,7 +1973,7 @@ msgstr ""
 msgid "Show values as {currency}"
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:166
+#: src/components/layouts/AddressOverview.vue:168
 msgid "Signup"
 msgstr ""
 
@@ -2566,7 +2566,7 @@ msgstr ""
 msgid "Your payout is on its way"
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:174
+#: src/components/layouts/AddressOverview.vue:176
 msgid "Your swap was successful!"
 msgstr ""
 

From 9b1bcc451d45ff57b1d98bb26e77eecbdddeca5e Mon Sep 17 00:00:00 2001
From: Albermonte <14013679+Albermonte@users.noreply.github.com>
Date: Mon, 21 Aug 2023 19:12:04 +0200
Subject: [PATCH 6/6] Added opacity transition to close button

---
 src/components/SearchBar.vue | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index b757249c1..ec7c34764 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -18,16 +18,18 @@
             @focus="handleFocus"
             @blur="handleBlur"
         />
-        <CrossCloseButton
-            class="cross-close-button"
-            v-if="isInputActive"
-            @click="handleClose"
-        />
+        <transition name="fade">
+            <CrossCloseButton
+                class="cross-close-button"
+                v-if="isInputActive"
+                @click="handleClose"
+            />
+        </transition>
     </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted, onUnmounted, computed, watch } from '@vue/composition-api';
+import { defineComponent, ref, onMounted, onUnmounted, computed } from '@vue/composition-api';
 
 import CrossCloseButton from './CrossCloseButton.vue';
 
@@ -237,6 +239,10 @@ input {
     cursor: pointer;
 }
 
+.fade-enter-active, .fade-leave-active {
+    transition-duration: var(--attr-duration);
+}
+
 @media (min-width: 700px) and (max-width: 900px) {
     .cover-all {
         &:focus-within {