From eccea273e67cea25fc7c5883bda006f787c40116 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Fri, 5 Dec 2025 00:21:07 +0800
Subject: [PATCH] make the styling consistent across all pages of the mobile
 version

---
 .../mobile/AIImageRecognitionSheet.vue        |  2 +-
 src/components/mobile/ColorSelectionSheet.vue |  3 +-
 src/components/mobile/DateSelectionSheet.vue  |  4 +--
 .../mobile/DateTimeSelectionSheet.vue         |  4 +--
 .../mobile/FiscalYearStartSelectionSheet.vue  |  4 +--
 src/components/mobile/IconSelectionSheet.vue  |  3 +-
 .../mobile/ListItemSelectionPopup.vue         | 30 +++++++++++--------
 .../mobile/ListItemSelectionSheet.vue         |  5 ++--
 src/components/mobile/MapSheet.vue            |  2 +-
 .../mobile/ScheduleFrequencySheet.vue         |  4 +--
 .../mobile/TransactionTagSelectionSheet.vue   | 18 +++++------
 .../mobile/TreeViewSelectionSheet.vue         |  7 +++--
 .../TwoColumnListItemSelectionSheet.vue       |  7 +++--
 src/styles/mobile/global.scss                 |  8 +++++
 14 files changed, 59 insertions(+), 42 deletions(-)

diff --git a/src/components/mobile/AIImageRecognitionSheet.vue b/src/components/mobile/AIImageRecognitionSheet.vue
index b3f1c72e..eb1aca17 100644
--- a/src/components/mobile/AIImageRecognitionSheet.vue
+++ b/src/components/mobile/AIImageRecognitionSheet.vue
@@ -1,7 +1,7 @@
 <template>
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler" style="height:auto"
               :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
-        <f7-toolbar>
+        <f7-toolbar class="toolbar-with-swipe-handler">
             <div class="swipe-handler"></div>
             <div class="left">
                 <f7-link icon-f7="xmark" :class="{ 'disabled': loading || recognizing }"
diff --git a/src/components/mobile/ColorSelectionSheet.vue b/src/components/mobile/ColorSelectionSheet.vue
index d3d7ae3e..67bc06e9 100644
--- a/src/components/mobile/ColorSelectionSheet.vue
+++ b/src/components/mobile/ColorSelectionSheet.vue
@@ -2,12 +2,11 @@
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler"
               :opened="show"
               @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
-        <f7-toolbar>
+        <f7-toolbar class="toolbar-with-swipe-handler">
             <div class="swipe-handler"></div>
             <div class="left">
                 <f7-link sheet-close icon-f7="xmark"></f7-link>
             </div>
-            <div class="right"></div>
         </f7-toolbar>
         <f7-page-content>
             <f7-block class="margin-vertical no-padding">
diff --git a/src/components/mobile/DateSelectionSheet.vue b/src/components/mobile/DateSelectionSheet.vue
index fd3f021a..e84499e6 100644
--- a/src/components/mobile/DateSelectionSheet.vue
+++ b/src/components/mobile/DateSelectionSheet.vue
@@ -1,7 +1,7 @@
 <template>
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler" class="date-selection-sheet" style="height:auto"
               :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
-        <f7-toolbar>
+        <f7-toolbar class="toolbar-with-swipe-handler">
             <div class="swipe-handler"></div>
             <div class="left">
                 <f7-link :text="tt('Clear')" @click="clear"></f7-link>
@@ -10,7 +10,7 @@
                 <f7-button round fill icon-f7="checkmark_alt" @click="confirm"></f7-button>
             </div>
         </f7-toolbar>
-        <f7-page-content>
+        <f7-page-content class="margin-top">
             <div class="block no-margin no-padding">
                 <date-time-picker datetime-picker-class="justify-content-center"
                                   :is-dark-mode="isDarkMode"
diff --git a/src/components/mobile/DateTimeSelectionSheet.vue b/src/components/mobile/DateTimeSelectionSheet.vue
index 256e0b6f..59a8b842 100644
--- a/src/components/mobile/DateTimeSelectionSheet.vue
+++ b/src/components/mobile/DateTimeSelectionSheet.vue
@@ -1,7 +1,7 @@
 <template>
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler" class="date-time-selection-sheet" style="height:auto"
               :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
-        <f7-toolbar>
+        <f7-toolbar class="toolbar-with-swipe-handler">
             <div class="swipe-handler"></div>
             <div class="left">
                 <f7-link :text="tt('Now')" @click="setCurrentTime"></f7-link>
@@ -11,7 +11,7 @@
                 <f7-button round fill icon-f7="checkmark_alt" @click="confirm"></f7-button>
             </div>
         </f7-toolbar>
-        <f7-page-content class="padding-bottom">
+        <f7-page-content class="margin-top">
             <div class="block no-margin no-padding">
                 <date-time-picker ref="datetimepicker"
                                   datetime-picker-class="justify-content-center"
diff --git a/src/components/mobile/FiscalYearStartSelectionSheet.vue b/src/components/mobile/FiscalYearStartSelectionSheet.vue
index 84e147d7..20762584 100644
--- a/src/components/mobile/FiscalYearStartSelectionSheet.vue
+++ b/src/components/mobile/FiscalYearStartSelectionSheet.vue
@@ -1,7 +1,7 @@
 <template>
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler" class="fiscal-year-start-selection-sheet" style="height:auto"
               :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
-        <f7-toolbar>
+        <f7-toolbar class="toolbar-with-swipe-handler">
             <div class="swipe-handler"></div>
             <div class="left">
                 <f7-link :text="tt('Reset')" @click="reset"></f7-link>
@@ -10,7 +10,7 @@
                 <f7-button round fill icon-f7="checkmark_alt" @click="confirm"></f7-button>
             </div>
         </f7-toolbar>
-        <f7-page-content>
+        <f7-page-content class="margin-top">
             <div class="block no-margin no-padding">
                 <date-time-picker datetime-picker-class="justify-content-center"
                                   :is-dark-mode="isDarkMode"
diff --git a/src/components/mobile/IconSelectionSheet.vue b/src/components/mobile/IconSelectionSheet.vue
index 88c50304..a89e9f6d 100644
--- a/src/components/mobile/IconSelectionSheet.vue
+++ b/src/components/mobile/IconSelectionSheet.vue
@@ -2,12 +2,11 @@
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler"
               :class="heightClass" :opened="show"
               @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
-        <f7-toolbar>
+        <f7-toolbar class="toolbar-with-swipe-handler">
             <div class="swipe-handler"></div>
             <div class="left">
                 <f7-link sheet-close icon-f7="xmark"></f7-link>
             </div>
-            <div class="right"></div>
         </f7-toolbar>
         <f7-page-content>
             <f7-block class="margin-vertical no-padding">
diff --git a/src/components/mobile/ListItemSelectionPopup.vue b/src/components/mobile/ListItemSelectionPopup.vue
index 627e63c6..e0a0e023 100644
--- a/src/components/mobile/ListItemSelectionPopup.vue
+++ b/src/components/mobile/ListItemSelectionPopup.vue
@@ -5,7 +5,21 @@
                 <f7-nav-left>
                     <f7-link popup-close icon-f7="xmark"></f7-link>
                 </f7-nav-left>
-                <f7-nav-title :title="title" v-if="title"></f7-nav-title>
+
+                <f7-searchbar ref="searchbar" custom-searchs
+                              :value="filterContent"
+                              :placeholder="filterPlaceholder"
+                              :disable-button="false"
+                              @input="filterContent = $event.target.value"
+                              @click:clear="filterContent = ''; showSearchbar = false"
+                              v-if="enableFilter && showSearchbar">
+                </f7-searchbar>
+
+                <f7-nav-title :title="title" v-if="title && !showSearchbar"></f7-nav-title>
+
+                <f7-nav-right v-if="enableFilter && !showSearchbar">
+                    <f7-link icon-f7="search" @click="showSearchbar = true"></f7-link>
+                </f7-nav-right>
             </f7-navbar>
 
             <f7-block class="no-margin no-padding">
@@ -32,16 +46,6 @@
                                   :title="filterNoItemsText"></f7-list-item>
                 </f7-list>
             </f7-block>
-
-            <f7-toolbar bottom>
-                <f7-searchbar ref="searchbar" custom-searchs
-                              :value="filterContent"
-                              :placeholder="filterPlaceholder"
-                              :disable-button="false"
-                              v-if="enableFilter"
-                              @input="filterContent = $event.target.value">
-                </f7-searchbar>
-            </f7-toolbar>
         </f7-page>
     </f7-popup>
 </template>
@@ -86,6 +90,7 @@ const searchbar = useTemplateRef<Searchbar.Searchbar>('searchbar');
 
 const currentValue = ref<unknown>(props.modelValue);
 const filterContent = ref<string>('');
+const showSearchbar = ref<boolean>(false);
 
 const filteredItems = computed<unknown[]>(() => {
     const finalItems: unknown[] = [];
@@ -181,12 +186,13 @@ function onItemClicked(item: unknown, index: number): void {
 
 function onPopupOpen(event: { $el: Framework7Dom }): void {
     currentValue.value = props.modelValue;
-    scrollToSelectedItem(event.$el, '.page-content', 'li.list-item-selected', true);
+    scrollToSelectedItem(event.$el, '.page-content', 'li.list-item-selected', false);
 }
 
 function onPopupClosed(): void {
     close();
     filterContent.value = '';
+    showSearchbar.value = false;
     searchbar.value?.clear();
 }
 </script>
diff --git a/src/components/mobile/ListItemSelectionSheet.vue b/src/components/mobile/ListItemSelectionSheet.vue
index a0b45ab0..87e0ca45 100644
--- a/src/components/mobile/ListItemSelectionSheet.vue
+++ b/src/components/mobile/ListItemSelectionSheet.vue
@@ -2,14 +2,13 @@
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler"
               :class="heightClass" :opened="show"
               @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
-        <f7-toolbar>
+        <f7-toolbar class="toolbar-with-swipe-handler">
             <div class="swipe-handler"></div>
             <div class="left">
                 <f7-link sheet-close icon-f7="xmark"></f7-link>
             </div>
-            <div class="right"></div>
         </f7-toolbar>
-        <f7-page-content>
+        <f7-page-content class="margin-top">
             <f7-list dividers class="no-margin-vertical">
                 <f7-list-item link="#" no-chevron
                               :title="ti((titleField ? (item as Record<string, unknown>)[titleField] : item) as string, !!titleI18n)"
diff --git a/src/components/mobile/MapSheet.vue b/src/components/mobile/MapSheet.vue
index 28ae783d..c7a3dfd9 100644
--- a/src/components/mobile/MapSheet.vue
+++ b/src/components/mobile/MapSheet.vue
@@ -1,7 +1,7 @@
 <template>
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler" class="map-sheet" style="height:auto"
               :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
-        <f7-toolbar>
+        <f7-toolbar class="toolbar-with-swipe-handler">
             <div class="swipe-handler"></div>
             <div class="left">
                 <f7-link icon-f7="minus" :class="{ 'disabled': !map?.allowZoomOut() }" @click="map?.zoomOut()"></f7-link>
diff --git a/src/components/mobile/ScheduleFrequencySheet.vue b/src/components/mobile/ScheduleFrequencySheet.vue
index 8c833bb3..ef0de020 100644
--- a/src/components/mobile/ScheduleFrequencySheet.vue
+++ b/src/components/mobile/ScheduleFrequencySheet.vue
@@ -1,7 +1,7 @@
 <template>
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler"
               style="height: auto" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
-        <f7-toolbar>
+        <f7-toolbar class="toolbar-with-swipe-handler">
             <div class="swipe-handler"></div>
             <div class="left">
                 <f7-link sheet-close icon-f7="xmark"></f7-link>
@@ -10,7 +10,7 @@
                 <f7-button round fill icon-f7="checkmark_alt" @click="save"></f7-button>
             </div>
         </f7-toolbar>
-        <f7-page-content>
+        <f7-page-content class="margin-top">
             <div class="grid grid-cols-2 grid-gap">
                 <div>
                     <div class="schedule-frequency-type-container">
diff --git a/src/components/mobile/TransactionTagSelectionSheet.vue b/src/components/mobile/TransactionTagSelectionSheet.vue
index 893e3c25..65634bc8 100644
--- a/src/components/mobile/TransactionTagSelectionSheet.vue
+++ b/src/components/mobile/TransactionTagSelectionSheet.vue
@@ -2,19 +2,11 @@
     <f7-sheet ref="sheet" swipe-to-close swipe-handler=".swipe-handler"
               style="height: auto" :opened="show"
               @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
-        <f7-toolbar>
+        <f7-toolbar class="toolbar-with-swipe-handler">
             <div class="swipe-handler"></div>
             <div class="left">
                 <f7-link sheet-close icon-f7="xmark"></f7-link>
             </div>
-            <div class="right">
-                <f7-button round fill icon-f7="checkmark_alt" @click="save"
-                           v-if="allTags && allTags.length && !noAvailableTag"></f7-button>
-                <f7-link icon-f7="plus" :class="{'disabled': newTag}" @click="addNewTag"
-                         v-if="!allTags || !allTags.length || noAvailableTag"></f7-link>
-            </div>
-        </f7-toolbar>
-        <f7-page-content :class="heightClass">
             <f7-searchbar ref="searchbar" custom-searchs
                           :value="filterContent"
                           :placeholder="tt('Find tag')"
@@ -23,6 +15,14 @@
                           @input="filterContent = $event.target.value"
                           @focus="onSearchBarFocus">
             </f7-searchbar>
+            <div class="right">
+                <f7-button round fill icon-f7="checkmark_alt" @click="save"
+                           v-if="allTags && allTags.length && !noAvailableTag"></f7-button>
+                <f7-link icon-f7="plus" :class="{'disabled': newTag}" @click="addNewTag"
+                         v-if="!allTags || !allTags.length || noAvailableTag"></f7-link>
+            </div>
+        </f7-toolbar>
+        <f7-page-content :class="'margin-top ' + heightClass">
             <f7-list class="no-margin-top no-margin-bottom" v-if="(!allTags || !allTags.length || noAvailableTag) && !newTag">
                 <f7-list-item :title="tt('No available tag')"></f7-list-item>
             </f7-list>
diff --git a/src/components/mobile/TreeViewSelectionSheet.vue b/src/components/mobile/TreeViewSelectionSheet.vue
index e446db33..257cb6a4 100644
--- a/src/components/mobile/TreeViewSelectionSheet.vue
+++ b/src/components/mobile/TreeViewSelectionSheet.vue
@@ -1,9 +1,12 @@
 <template>
     <f7-sheet ref="sheet" swipe-to-close swipe-handler=".swipe-handler"
               style="height: auto" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
-        <f7-toolbar>
+        <f7-toolbar class="toolbar-with-swipe-handler">
             <div class="swipe-handler"></div>
-            <f7-searchbar ref="searchbar" class="margin-top" custom-searchs
+            <div class="left">
+                <f7-link sheet-close icon-f7="xmark"></f7-link>
+            </div>
+            <f7-searchbar ref="searchbar" custom-searchs
                           :value="filterContent"
                           :placeholder="filterPlaceholder"
                           :disable-button="false"
diff --git a/src/components/mobile/TwoColumnListItemSelectionSheet.vue b/src/components/mobile/TwoColumnListItemSelectionSheet.vue
index b7ca7320..b3799cba 100644
--- a/src/components/mobile/TwoColumnListItemSelectionSheet.vue
+++ b/src/components/mobile/TwoColumnListItemSelectionSheet.vue
@@ -1,9 +1,12 @@
 <template>
     <f7-sheet ref="sheet" swipe-to-close swipe-handler=".swipe-handler"
               style="height: auto" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
-        <f7-toolbar>
+        <f7-toolbar class="toolbar-with-swipe-handler">
             <div class="swipe-handler"></div>
-            <f7-searchbar ref="searchbar" class="margin-top" custom-searchs
+            <div class="left">
+                <f7-link sheet-close icon-f7="xmark"></f7-link>
+            </div>
+            <f7-searchbar ref="searchbar" custom-searchs
                           :value="filterContent"
                           :placeholder="filterPlaceholder"
                           :disable-button="false"
diff --git a/src/styles/mobile/global.scss b/src/styles/mobile/global.scss
index f847bb4e..e7490b97 100644
--- a/src/styles/mobile/global.scss
+++ b/src/styles/mobile/global.scss
@@ -621,6 +621,14 @@ html[dir="rtl"] .icon.las .badge.right-bottom-icon {
     background: #666
 }
 
+.toolbar-with-swipe-handler > .toolbar-inner {
+    > div.left,
+    > div.right,
+    > form.searchbar {
+        margin-top: var(--f7-typography-margin) !important;
+    }
+}
+
 /** list-item-with-multi-item for framework7 **/
 .list-item-with-multi-item .item-content,
 .list-item-with-multi-item .item-inner {