From b4c31fc9d0d883c7df42d0185cadc36996a9e17d Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Mon, 6 Apr 2026 23:31:49 +0800
Subject: [PATCH] improve action button rendering performance on desktop
 version (#547)

---
 src/views/desktop/categories/ListPage.vue     |  78 +++----
 src/views/desktop/exchangerates/ListPage.vue  |  56 ++---
 .../ExplorerChangeDisplayOrderDialog.vue      |  42 ++--
 src/views/desktop/tags/ListPage.vue           | 215 ++++++++++--------
 src/views/desktop/templates/ListPage.vue      |  84 ++++---
 5 files changed, 236 insertions(+), 239 deletions(-)

diff --git a/src/views/desktop/categories/ListPage.vue b/src/views/desktop/categories/ListPage.vue
index 6d5a995d..7a6e61f7 100644
--- a/src/views/desktop/categories/ListPage.vue
+++ b/src/views/desktop/categories/ListPage.vue
@@ -115,7 +115,8 @@
                                                         v-model="categories"
                                                         @change="onMove">
                                             <template #item="{ element }">
-                                                <tr class="transaction-category-table-row text-sm" v-if="showHidden || !element.hidden">
+                                                <tr class="transaction-category-table-row text-sm" v-if="showHidden || !element.hidden"
+                                                    @mouseenter="hoveredCategoryId = element.id" @mouseleave="hoveredCategoryId = ''">
                                                     <td>
                                                         <div class="d-flex align-center">
                                                             <div class="d-flex align-center" :class="{ 'cursor-pointer': isCategorySupportSwitch(element) }"
@@ -131,42 +132,42 @@
 
                                                             <v-spacer/>
 
-                                                            <v-btn class="px-2 ms-2" color="default"
-                                                                   density="comfortable" variant="text"
-                                                                   :class="{ 'd-none': loading, 'hover-display': !loading }"
-                                                                   :prepend-icon="element.hidden ? mdiEyeOutline : mdiEyeOffOutline"
-                                                                   :loading="categoryHiding[element.id]"
-                                                                   :disabled="loading || updating"
-                                                                   @click="hide(element, !element.hidden)">
-                                                                <template #loader>
-                                                                    <v-progress-circular indeterminate size="20" width="2"/>
-                                                                </template>
-                                                                {{ element.hidden ? tt('Show') : tt('Hide') }}
-                                                            </v-btn>
-                                                            <v-btn class="px-2" color="default"
-                                                                   density="comfortable" variant="text"
-                                                                   :class="{ 'd-none': loading, 'hover-display': !loading }"
-                                                                   :prepend-icon="mdiPencilOutline"
-                                                                   :disabled="loading || updating"
-                                                                   @click="edit(element)">
-                                                                {{ tt('Edit') }}
-                                                            </v-btn>
-                                                            <v-btn class="px-2" color="default"
-                                                                   density="comfortable" variant="text"
-                                                                   :class="{ 'd-none': loading, 'hover-display': !loading }"
-                                                                   :prepend-icon="mdiDeleteOutline"
-                                                                   :loading="categoryRemoving[element.id]"
-                                                                   :disabled="loading || updating"
-                                                                   @click="remove(element)">
-                                                                <template #loader>
-                                                                    <v-progress-circular indeterminate size="20" width="2"/>
-                                                                </template>
-                                                                {{ tt('Delete') }}
-                                                            </v-btn>
+                                                            <template v-if="hoveredCategoryId === element.id && !loading">
+                                                                <v-btn class="px-2 ms-2" color="default"
+                                                                       density="comfortable" variant="text"
+                                                                       :prepend-icon="element.hidden ? mdiEyeOutline : mdiEyeOffOutline"
+                                                                       :loading="categoryHiding[element.id]"
+                                                                       :disabled="loading || updating"
+                                                                       @click="hide(element, !element.hidden)">
+                                                                    <template #loader>
+                                                                        <v-progress-circular indeterminate size="20" width="2"/>
+                                                                    </template>
+                                                                    {{ element.hidden ? tt('Show') : tt('Hide') }}
+                                                                </v-btn>
+                                                                <v-btn class="px-2" color="default"
+                                                                       density="comfortable" variant="text"
+                                                                       :prepend-icon="mdiPencilOutline"
+                                                                       :disabled="loading || updating"
+                                                                       @click="edit(element)">
+                                                                    {{ tt('Edit') }}
+                                                                </v-btn>
+                                                                <v-btn class="px-2" color="default"
+                                                                       density="comfortable" variant="text"
+                                                                       :prepend-icon="mdiDeleteOutline"
+                                                                       :loading="categoryRemoving[element.id]"
+                                                                       :disabled="loading || updating"
+                                                                       @click="remove(element)">
+                                                                    <template #loader>
+                                                                        <v-progress-circular indeterminate size="20" width="2"/>
+                                                                    </template>
+                                                                    {{ tt('Delete') }}
+                                                                </v-btn>
+                                                            </template>
+
                                                             <span class="ms-2">
                                                                 <v-icon :class="!loading && !updating && availableCategoryCount > 1 ? 'drag-handle' : 'disabled'"
                                                                         :icon="mdiDrag"/>
-                                                                <v-tooltip activator="parent" v-if="!loading && !updating && availableCategoryCount > 1">{{ tt('Drag to Reorder') }}</v-tooltip>
+                                                                <v-tooltip activator="parent" v-if="!loading && !updating && availableCategoryCount > 1 && hoveredCategoryId === element.id">{{ tt('Drag to Reorder') }}</v-tooltip>
                                                             </span>
                                                         </div>
                                                     </td>
@@ -245,6 +246,7 @@ const editDialog = useTemplateRef<EditDialogType>('editDialog');
 const activeCategoryType = ref<CategoryType>(CategoryType.Expense);
 const activeTab = ref<string>('categoryPage');
 const updating = ref<boolean>(false);
+const hoveredCategoryId = ref<string>('');
 const categoryHiding = ref<Record<string, boolean>>({});
 const categoryRemoving = ref<Record<string, boolean>>({});
 const displayOrderModified = ref<boolean>(false);
@@ -496,14 +498,6 @@ reload(false);
 </script>
 
 <style>
-.transaction-category-table tr.transaction-category-table-row .hover-display {
-    display: none;
-}
-
-.transaction-category-table tr.transaction-category-table-row:hover .hover-display {
-    display: grid;
-}
-
 .transaction-category-table .transaction-category-comment {
     font-size: 0.8rem;
     color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity)) !important;
diff --git a/src/views/desktop/exchangerates/ListPage.vue b/src/views/desktop/exchangerates/ListPage.vue
index 10a5b299..a612c103 100644
--- a/src/views/desktop/exchangerates/ListPage.vue
+++ b/src/views/desktop/exchangerates/ListPage.vue
@@ -106,7 +106,8 @@
                                         </tr>
 
                                         <tr class="exchange-rates-table-row-data" :key="exchangeRate.currencyCode"
-                                            v-for="exchangeRate in availableExchangeRates">
+                                            v-for="exchangeRate in availableExchangeRates"
+                                            @mouseenter="hoveredCurrency = exchangeRate.currencyCode" @mouseleave="hoveredCurrency = ''">
                                             <td>
                                                 <div class="d-flex align-center">
                                                     <span class="text-sm">{{ exchangeRate.currencyDisplayName }}</span>
@@ -114,26 +115,27 @@
 
                                                     <v-spacer/>
 
-                                                    <v-btn class="px-2 ms-2" color="default"
-                                                           density="comfortable" variant="text"
-                                                           :class="{ 'd-none': loading, 'hover-display': !loading }"
-                                                           v-if="exchangeRate.currencyCode !== baseCurrency"
-                                                           @click="setAsBaseline(exchangeRate.currencyCode, getFinalConvertedAmount(exchangeRate, false))">
-                                                        {{ tt('Set as Base') }}
-                                                    </v-btn>
-                                                    <v-btn class="px-2" color="default"
-                                                           density="comfortable" variant="text"
-                                                           :class="{ 'd-none': loading, 'hover-display': !loading }"
-                                                           :prepend-icon="mdiDeleteOutline"
-                                                           :loading="customExchangeRateRemoving[exchangeRate.currencyCode]"
-                                                           :disabled="loading || updating"
-                                                           v-if="exchangeRate.currencyCode !== defaultCurrency && isUserCustomExchangeRates"
-                                                           @click="remove(exchangeRate.currencyCode)">
-                                                        <template #loader>
-                                                            <v-progress-circular indeterminate size="20" width="2"/>
-                                                        </template>
-                                                        {{ tt('Delete') }}
-                                                    </v-btn>
+                                                    <template v-if="hoveredCurrency === exchangeRate.currencyCode && !loading">
+                                                        <v-btn class="px-2 ms-2" color="default"
+                                                               density="comfortable" variant="text"
+                                                               v-if="exchangeRate.currencyCode !== baseCurrency"
+                                                               @click="setAsBaseline(exchangeRate.currencyCode, getFinalConvertedAmount(exchangeRate, false))">
+                                                            {{ tt('Set as Base') }}
+                                                        </v-btn>
+                                                        <v-btn class="px-2" color="default"
+                                                               density="comfortable" variant="text"
+                                                               :prepend-icon="mdiDeleteOutline"
+                                                               :loading="customExchangeRateRemoving[exchangeRate.currencyCode]"
+                                                               :disabled="loading || updating"
+                                                               v-if="exchangeRate.currencyCode !== defaultCurrency && isUserCustomExchangeRates"
+                                                               @click="remove(exchangeRate.currencyCode)">
+                                                            <template #loader>
+                                                                <v-progress-circular indeterminate size="20" width="2"/>
+                                                            </template>
+                                                            {{ tt('Delete') }}
+                                                        </v-btn>
+                                                    </template>
+
                                                     <span class="ms-3">{{ getFinalConvertedAmount(exchangeRate, true) }}</span>
                                                 </div>
                                             </td>
@@ -208,6 +210,7 @@ const updateDialog = useTemplateRef<UpdateDialogType>('updateDialog');
 const activeTab = ref<string>('exchangeRatesPage');
 const loading = ref<boolean>(true);
 const updating = ref<boolean>(false);
+const hoveredCurrency = ref<string>('');
 const customExchangeRateRemoving = ref<Record<string, boolean>>({});
 const alwaysShowNav = ref<boolean>(mdAndUp.value);
 const showNav = ref<boolean>(mdAndUp.value);
@@ -332,14 +335,3 @@ watch(mdAndUp, (newValue) => {
 
 reload(false);
 </script>
-
-<style>
-.exchange-rates-table tr.exchange-rates-table-row-data .hover-display {
-    display: none;
-}
-
-.exchange-rates-table tr.exchange-rates-table-row-data:hover .hover-display {
-    display: grid;
-}
-
-</style>
diff --git a/src/views/desktop/insights/dialogs/ExplorerChangeDisplayOrderDialog.vue b/src/views/desktop/insights/dialogs/ExplorerChangeDisplayOrderDialog.vue
index f4112453..806b2a2a 100644
--- a/src/views/desktop/insights/dialogs/ExplorerChangeDisplayOrderDialog.vue
+++ b/src/views/desktop/insights/dialogs/ExplorerChangeDisplayOrderDialog.vue
@@ -59,7 +59,8 @@
                                     v-model="allExplorers"
                                     @change="onMove">
                         <template #item="{ element }">
-                            <tr class="explorers-table-row text-sm" v-if="showHidden || !element.hidden">
+                            <tr class="explorers-table-row text-sm" v-if="showHidden || !element.hidden"
+                                @mouseenter="hoveredExplorerId = element.id" @mouseleave="hoveredExplorerId = ''">
                                 <td>
                                     <div class="d-flex align-center">
                                         <div class="d-flex align-center">
@@ -68,22 +69,24 @@
 
                                         <v-spacer/>
 
-                                        <v-btn class="px-2 ms-2" color="default"
-                                               density="compact" variant="text"
-                                               :class="{ 'd-none': loading, 'hover-display': !loading }"
-                                               :prepend-icon="element.hidden ? mdiEyeOutline : mdiEyeOffOutline"
-                                               :loading="explorerHiding[element.id]"
-                                               :disabled="loading || updating"
-                                               @click="hide(element, !element.hidden)">
-                                            <template #loader>
-                                                <v-progress-circular indeterminate size="20" width="2"/>
-                                            </template>
-                                            {{ element.hidden ? tt('Show') : tt('Hide') }}
-                                        </v-btn>
+                                        <template v-if="hoveredExplorerId === element.id && !loading">
+                                            <v-btn class="px-2 ms-2" color="default"
+                                                   density="compact" variant="text"
+                                                   :prepend-icon="element.hidden ? mdiEyeOutline : mdiEyeOffOutline"
+                                                   :loading="explorerHiding[element.id]"
+                                                   :disabled="loading || updating"
+                                                   @click="hide(element, !element.hidden)">
+                                                <template #loader>
+                                                    <v-progress-circular indeterminate size="20" width="2"/>
+                                                </template>
+                                                {{ element.hidden ? tt('Show') : tt('Hide') }}
+                                            </v-btn>
+                                        </template>
+
                                         <span class="ms-2">
                                             <v-icon :class="!loading && !updating && !noAvailableExplorer ? 'drag-handle' : 'disabled'"
                                                     :icon="mdiDrag"/>
-                                            <v-tooltip activator="parent" v-if="!loading && !updating && !noAvailableExplorer">{{ tt('Drag to Reorder') }}</v-tooltip>
+                                            <v-tooltip activator="parent" v-if="!loading && !updating && !noAvailableExplorer && hoveredExplorerId === element.id">{{ tt('Drag to Reorder') }}</v-tooltip>
                                         </span>
                                     </div>
                                 </td>
@@ -137,6 +140,7 @@ const snackbar = useTemplateRef<SnackBarType>('snackbar');
 const showState = ref<boolean>(false);
 const loading = ref<boolean>(true);
 const updating = ref<boolean>(false);
+const hoveredExplorerId = ref<string>('');
 const explorerHiding = ref<Record<string, boolean>>({});
 const displayOrderModified = ref<boolean>(false);
 const showHidden = ref<boolean>(false);
@@ -274,13 +278,3 @@ defineExpose({
     open
 });
 </script>
-
-<style>
-.explorers-table tr.explorers-table-row .hover-display {
-    display: none;
-}
-
-.explorers-table tr.explorers-table-row:hover .hover-display {
-    display: inline-grid;
-}
-</style>
diff --git a/src/views/desktop/tags/ListPage.vue b/src/views/desktop/tags/ListPage.vue
index 73190f06..825c49f0 100644
--- a/src/views/desktop/tags/ListPage.vue
+++ b/src/views/desktop/tags/ListPage.vue
@@ -141,7 +141,8 @@
                                                         v-model="tags"
                                                         @change="onMove">
                                             <template #item="{ element }">
-                                                <tr class="transaction-tags-table-row-tag text-sm" v-if="showHidden || !element.hidden">
+                                                <tr class="transaction-tags-table-row-tag text-sm" v-if="showHidden || !element.hidden"
+                                                    @mouseenter="hoveredTagId = element.id" @mouseleave="hoveredTagId = ''">
                                                     <td>
                                                         <div class="d-flex align-center">
                                                             <div class="d-flex align-center" v-if="editingTag.id !== element.id">
@@ -174,95 +175,82 @@
 
                                                             <v-spacer/>
 
-                                                            <v-btn class="px-2 ms-2" color="default"
-                                                                   density="comfortable" variant="text"
-                                                                   :class="{ 'd-none': loading, 'hover-display': !loading }"
-                                                                   :prepend-icon="element.hidden ? mdiEyeOutline : mdiEyeOffOutline"
-                                                                   :loading="tagHiding[element.id]"
-                                                                   :disabled="loading || updating"
-                                                                   v-if="editingTag.id !== element.id"
-                                                                   @click="hide(element, !element.hidden)">
-                                                                <template #loader>
-                                                                    <v-progress-circular indeterminate size="20" width="2"/>
-                                                                </template>
-                                                                {{ element.hidden ? tt('Show') : tt('Hide') }}
-                                                            </v-btn>
-                                                            <v-btn class="px-2" color="default"
-                                                                   density="comfortable" variant="text"
-                                                                   :class="{ 'd-none': loading, 'hover-display': !loading }"
-                                                                   :prepend-icon="mdiFolderMoveOutline"
-                                                                   :loading="tagMoving[element.id]"
-                                                                   :disabled="loading || updating || allTagGroupsWithDefault.length < 2"
-                                                                   v-if="editingTag.id !== element.id">
-                                                                <template #loader>
-                                                                    <v-progress-circular indeterminate size="20" width="2"/>
-                                                                </template>
-                                                                {{ tt('Move') }}
-                                                                <v-menu activator="parent" max-height="500">
-                                                                    <v-list>
-                                                                        <v-list-subheader :title="tt('Move to...')"/>
-                                                                        <template :key="tagGroup.id" v-for="tagGroup in allTagGroupsWithDefault">
-                                                                            <v-list-item class="text-sm" density="compact"
-                                                                                         :value="tagGroup.id" v-if="activeTagGroupId !== tagGroup.id">
-                                                                                <v-list-item-title class="cursor-pointer"
-                                                                                                   @click="moveTagToGroup(element, tagGroup.id)">
-                                                                                    <div class="d-flex align-center">
-                                                                                        <span class="text-sm ms-3">{{ tagGroup.name }}</span>
-                                                                                    </div>
-                                                                                </v-list-item-title>
-                                                                            </v-list-item>
-                                                                        </template>
-                                                                    </v-list>
-                                                                </v-menu>
-                                                            </v-btn>
-                                                            <v-btn class="px-2" color="default"
-                                                                   density="comfortable" variant="text"
-                                                                   :class="{ 'd-none': loading, 'hover-display': !loading }"
-                                                                   :prepend-icon="mdiPencilOutline"
-                                                                   :loading="tagUpdating[element.id]"
-                                                                   :disabled="loading || updating"
-                                                                   v-if="editingTag.id !== element.id"
-                                                                   @click="edit(element)">
-                                                                <template #loader>
-                                                                    <v-progress-circular indeterminate size="20" width="2"/>
-                                                                </template>
-                                                                {{ tt('Edit') }}
-                                                            </v-btn>
-                                                            <v-btn class="px-2" color="default"
-                                                                   density="comfortable" variant="text"
-                                                                   :class="{ 'd-none': loading, 'hover-display': !loading }"
-                                                                   :prepend-icon="mdiDeleteOutline"
-                                                                   :loading="tagRemoving[element.id]"
-                                                                   :disabled="loading || updating"
-                                                                   v-if="editingTag.id !== element.id"
-                                                                   @click="remove(element)">
-                                                                <template #loader>
-                                                                    <v-progress-circular indeterminate size="20" width="2"/>
-                                                                </template>
-                                                                {{ tt('Delete') }}
-                                                            </v-btn>
-                                                            <v-btn class="px-2"
-                                                                   density="comfortable" variant="text"
-                                                                   :prepend-icon="mdiCheck"
-                                                                   :loading="tagUpdating[element.id]"
-                                                                   :disabled="loading || updating || !isTagModified(element)"
-                                                                   v-if="editingTag.id === element.id" @click="save(editingTag)">
-                                                                <template #loader>
-                                                                    <v-progress-circular indeterminate size="20" width="2"/>
-                                                                </template>
-                                                                {{ tt('Save') }}
-                                                            </v-btn>
-                                                            <v-btn class="px-2" color="default"
-                                                                   density="comfortable" variant="text"
-                                                                   :prepend-icon="mdiClose"
-                                                                   :disabled="loading || updating"
-                                                                   v-if="editingTag.id === element.id" @click="cancelSave(editingTag)">
-                                                                {{ tt('Cancel') }}
-                                                            </v-btn>
+                                                            <template v-if="hoveredTagId === element.id && !loading">
+                                                                <v-btn class="px-2 ms-2" color="default"
+                                                                       density="comfortable" variant="text"
+                                                                       :prepend-icon="element.hidden ? mdiEyeOutline : mdiEyeOffOutline"
+                                                                       :loading="tagHiding[element.id]"
+                                                                       :disabled="loading || updating"
+                                                                       v-if="editingTag.id !== element.id"
+                                                                       @click="hide(element, !element.hidden)">
+                                                                    <template #loader>
+                                                                        <v-progress-circular indeterminate size="20" width="2"/>
+                                                                    </template>
+                                                                    {{ element.hidden ? tt('Show') : tt('Hide') }}
+                                                                </v-btn>
+                                                                <v-btn class="px-2" color="default"
+                                                                       density="comfortable" variant="text"
+                                                                       :prepend-icon="mdiFolderMoveOutline"
+                                                                       :loading="tagMoving[element.id]"
+                                                                       :disabled="loading || updating || allTagGroupsWithDefault.length < 2"
+                                                                       v-if="editingTag.id !== element.id"
+                                                                       @click="showMoveTagDialog(element)">
+                                                                    <template #loader>
+                                                                        <v-progress-circular indeterminate size="20" width="2"/>
+                                                                    </template>
+                                                                    {{ tt('Move') }}
+                                                                </v-btn>
+                                                                <v-btn class="px-2" color="default"
+                                                                       density="comfortable" variant="text"
+                                                                       :prepend-icon="mdiPencilOutline"
+                                                                       :loading="tagUpdating[element.id]"
+                                                                       :disabled="loading || updating"
+                                                                       v-if="editingTag.id !== element.id"
+                                                                       @click="edit(element)">
+                                                                    <template #loader>
+                                                                        <v-progress-circular indeterminate size="20" width="2"/>
+                                                                    </template>
+                                                                    {{ tt('Edit') }}
+                                                                </v-btn>
+                                                                <v-btn class="px-2" color="default"
+                                                                       density="comfortable" variant="text"
+                                                                       :prepend-icon="mdiDeleteOutline"
+                                                                       :loading="tagRemoving[element.id]"
+                                                                       :disabled="loading || updating"
+                                                                       v-if="editingTag.id !== element.id"
+                                                                       @click="remove(element)">
+                                                                    <template #loader>
+                                                                        <v-progress-circular indeterminate size="20" width="2"/>
+                                                                    </template>
+                                                                    {{ tt('Delete') }}
+                                                                </v-btn>
+                                                            </template>
+
+                                                            <template v-if="editingTag.id === element.id">
+                                                                <v-btn class="px-2"
+                                                                       density="comfortable" variant="text"
+                                                                       :prepend-icon="mdiCheck"
+                                                                       :loading="tagUpdating[element.id]"
+                                                                       :disabled="loading || updating || !isTagModified(element)"
+                                                                       @click="save(editingTag)">
+                                                                    <template #loader>
+                                                                        <v-progress-circular indeterminate size="20" width="2"/>
+                                                                    </template>
+                                                                    {{ tt('Save') }}
+                                                                </v-btn>
+                                                                <v-btn class="px-2" color="default"
+                                                                       density="comfortable" variant="text"
+                                                                       :prepend-icon="mdiClose"
+                                                                       :disabled="loading || updating"
+                                                                       @click="cancelSave(editingTag)">
+                                                                    {{ tt('Cancel') }}
+                                                                </v-btn>
+                                                            </template>
+
                                                             <span class="ms-2">
                                                                 <v-icon :class="!loading && !updating && !hasEditingTag && availableTagCount > 1 ? 'drag-handle' : 'disabled'"
                                                                         :icon="mdiDrag"/>
-                                                                <v-tooltip activator="parent" v-if="!loading && !updating && !hasEditingTag && availableTagCount > 1">{{ tt('Drag to Reorder') }}</v-tooltip>
+                                                                <v-tooltip activator="parent" v-if="!loading && !updating && !hasEditingTag && availableTagCount > 1 && hoveredTagId === element.id">{{ tt('Drag to Reorder') }}</v-tooltip>
                                                             </span>
                                                         </div>
                                                     </td>
@@ -319,6 +307,32 @@
         </v-col>
     </v-row>
 
+    <v-dialog width="640" v-model="showTagMoveToDialog">
+        <v-card class="pa-sm-1 pa-md-2">
+            <template #title>
+                <div class="d-flex align-center">
+                    <h4 class="text-h4">{{ tt('Move to...') }}</h4>
+                </div>
+            </template>
+            <v-card-text class="d-flex flex-column flex-md-row flex-grow-1 overflow-y-auto">
+                <v-table hover density="comfortable" class="w-100 table-striped">
+                    <tbody>
+                    <tr class="text-sm cursor-pointer" :key="tagGroup.id" v-for="tagGroup in allTagGroupsWithDefault" v-show="activeTagGroupId !== tagGroup.id">
+                        <td @click="moveTagToGroup(currentMovingTag, tagGroup.id)">
+                            <span>{{ tagGroup.name }}</span>
+                        </td>
+                    </tr>
+                    </tbody>
+                </v-table>
+            </v-card-text>
+            <v-card-text class="overflow-y-visible">
+                <div class="w-100 d-flex justify-center flex-wrap mt-sm-1 mt-md-2 gap-4">
+                    <v-btn color="secondary" variant="tonal" :disabled="loading || updating" @click="showTagMoveToDialog = false">{{ tt('Close') }}</v-btn>
+                </div>
+            </v-card-text>
+        </v-card>
+    </v-dialog>
+
     <tag-group-change-display-order-dialog ref="tagGroupChangeDisplayOrderDialog" />
 
     <rename-dialog ref="renameDialog"
@@ -407,10 +421,14 @@ const updating = ref<boolean>(false);
 const activeTab = ref<string>('tagListPage');
 const alwaysShowNav = ref<boolean>(display.mdAndUp.value);
 const showNav = ref<boolean>(display.mdAndUp.value);
+const hoveredTagId = ref<string>('');
 const tagUpdating = ref<Record<string, boolean>>({});
 const tagHiding = ref<Record<string, boolean>>({});
 const tagMoving = ref<Record<string, boolean>>({});
 const tagRemoving = ref<Record<string, boolean>>({});
+const currentMovingTag = ref<TransactionTag | null>(null);
+const currentMoveTargetGroupId = ref<string>(DEFAULT_TAG_GROUP_ID);
+const showTagMoveToDialog = ref<boolean>(false);
 
 const totalAvailableTagsCount = computed<number>(() => transactionTagsStore.allAvailableTagsCount);
 const displayTotalAvailableTagsCount = computed<string>(() => formatNumberToLocalizedNumerals(transactionTagsStore.allAvailableTagsCount));
@@ -543,7 +561,18 @@ function removeTagGroup(): void {
     });
 }
 
-function moveTagToGroup(tag: TransactionTag, targetTagGroupId: string): void {
+function showMoveTagDialog(tag: TransactionTag): void {
+    currentMovingTag.value = tag;
+    currentMoveTargetGroupId.value = tag.groupId || DEFAULT_TAG_GROUP_ID;
+    showTagMoveToDialog.value = true;
+}
+
+function moveTagToGroup(tag: TransactionTag | null, targetTagGroupId: string): void {
+    if (!tag) {
+        snackbar.value?.showMessage('Unable to move tag');
+        return;
+    }
+
     updating.value = true;
     tagMoving.value[tag.id] = true;
 
@@ -563,6 +592,8 @@ function moveTagToGroup(tag: TransactionTag, targetTagGroupId: string): void {
             snackbar.value?.showError(error);
         }
     });
+
+    showTagMoveToDialog.value = false;
 }
 
 function save(tag: TransactionTag): void {
@@ -717,14 +748,6 @@ watch(() => display.mdAndUp.value, (newValue) => {
     font-size: 1rem;
 }
 
-.transaction-tags-table tr.transaction-tags-table-row-tag .hover-display {
-    display: none;
-}
-
-.transaction-tags-table tr.transaction-tags-table-row-tag:hover .hover-display {
-    display: inline-grid;
-}
-
 .transaction-tags-table tr:not(:last-child) > td > div {
     padding-bottom: 1px;
 }
diff --git a/src/views/desktop/templates/ListPage.vue b/src/views/desktop/templates/ListPage.vue
index 1b11e1cf..0a0b19b3 100644
--- a/src/views/desktop/templates/ListPage.vue
+++ b/src/views/desktop/templates/ListPage.vue
@@ -74,7 +74,8 @@
                                     v-model="templates"
                                     @change="onMove">
                         <template #item="{ element }">
-                            <tr class="transaction-templates-table-row text-sm" v-if="showHidden || !element.hidden">
+                            <tr class="transaction-templates-table-row text-sm" v-if="showHidden || !element.hidden"
+                                @mouseenter="hoveredTemplateId = element.id" @mouseleave="hoveredTemplateId = ''">
                                 <td>
                                     <div class="d-flex align-center">
                                         <div class="d-flex align-center">
@@ -89,45 +90,45 @@
 
                                         <v-spacer/>
 
-                                        <v-btn class="px-2 ms-2" color="default"
-                                               density="comfortable" variant="text"
-                                               :class="{ 'd-none': loading, 'hover-display': !loading }"
-                                               :prepend-icon="element.hidden ? mdiEyeOutline : mdiEyeOffOutline"
-                                               :loading="templateHiding[element.id]"
-                                               :disabled="loading || updating"
-                                               @click="hide(element, !element.hidden)">
-                                            <template #loader>
-                                                <v-progress-circular indeterminate size="20" width="2"/>
-                                            </template>
-                                            {{ element.hidden ? tt('Show') : tt('Hide') }}
-                                        </v-btn>
-                                        <v-btn class="px-2" color="default"
-                                               density="comfortable" variant="text"
-                                               :class="{ 'd-none': loading, 'hover-display': !loading }"
-                                               :prepend-icon="mdiPencilOutline"
-                                               :disabled="loading || updating"
-                                               @click="edit(element)">
-                                            <template #loader>
-                                                <v-progress-circular indeterminate size="20" width="2"/>
-                                            </template>
-                                            {{ tt('Edit') }}
-                                        </v-btn>
-                                        <v-btn class="px-2" color="default"
-                                               density="comfortable" variant="text"
-                                               :class="{ 'd-none': loading, 'hover-display': !loading }"
-                                               :prepend-icon="mdiDeleteOutline"
-                                               :loading="templateRemoving[element.id]"
-                                               :disabled="loading || updating"
-                                               @click="remove(element)">
-                                            <template #loader>
-                                                <v-progress-circular indeterminate size="20" width="2"/>
-                                            </template>
-                                            {{ tt('Delete') }}
-                                        </v-btn>
+                                        <template v-if="hoveredTemplateId === element.id && !loading">
+                                            <v-btn class="px-2 ms-2" color="default"
+                                                   density="comfortable" variant="text"
+                                                   :prepend-icon="element.hidden ? mdiEyeOutline : mdiEyeOffOutline"
+                                                   :loading="templateHiding[element.id]"
+                                                   :disabled="loading || updating"
+                                                   @click="hide(element, !element.hidden)">
+                                                <template #loader>
+                                                    <v-progress-circular indeterminate size="20" width="2"/>
+                                                </template>
+                                                {{ element.hidden ? tt('Show') : tt('Hide') }}
+                                            </v-btn>
+                                            <v-btn class="px-2" color="default"
+                                                   density="comfortable" variant="text"
+                                                   :prepend-icon="mdiPencilOutline"
+                                                   :disabled="loading || updating"
+                                                   @click="edit(element)">
+                                                <template #loader>
+                                                    <v-progress-circular indeterminate size="20" width="2"/>
+                                                </template>
+                                                {{ tt('Edit') }}
+                                            </v-btn>
+                                            <v-btn class="px-2" color="default"
+                                                   density="comfortable" variant="text"
+                                                   :prepend-icon="mdiDeleteOutline"
+                                                   :loading="templateRemoving[element.id]"
+                                                   :disabled="loading || updating"
+                                                   @click="remove(element)">
+                                                <template #loader>
+                                                    <v-progress-circular indeterminate size="20" width="2"/>
+                                                </template>
+                                                {{ tt('Delete') }}
+                                            </v-btn>
+                                        </template>
+
                                         <span class="ms-2">
                                             <v-icon :class="!loading && !updating && availableTemplateCount > 1 ? 'drag-handle' : 'disabled'"
                                                     :icon="mdiDrag"/>
-                                            <v-tooltip activator="parent" v-if="!loading && !updating && availableTemplateCount > 1">{{ tt('Drag to Reorder') }}</v-tooltip>
+                                            <v-tooltip activator="parent" v-if="!loading && !updating && availableTemplateCount > 1 && hoveredTemplateId === element.id">{{ tt('Drag to Reorder') }}</v-tooltip>
                                         </span>
                                     </div>
                                 </td>
@@ -196,6 +197,7 @@ const editDialog = useTemplateRef<EditDialogType>('editDialog');
 const templateType = ref<number>(TemplateType.Normal.type);
 const loading = ref<boolean>(true);
 const updating = ref<boolean>(false);
+const hoveredTemplateId = ref<string>('');
 const templateHiding = ref<Record<string, boolean>>({});
 const templateRemoving = ref<Record<string, boolean>>({});
 const displayOrderModified = ref<boolean>(false);
@@ -366,14 +368,6 @@ init();
 </script>
 
 <style>
-.transaction-templates-table tr.transaction-templates-table-row .hover-display {
-    display: none;
-}
-
-.transaction-templates-table tr.transaction-templates-table-row:hover .hover-display {
-    display: inline-grid;
-}
-
 .transaction-templates-table tr:not(:last-child) > td > div {
     padding-bottom: 1px;
 }