support setting account categories hidden which has no accounts

src/views/base/settings/AppCloudSyncPageBase.ts

@@ -60,7 +60,8 @@ export const ALL_APPLICATION_CLOUD_SETTINGS: CategorizedApplicationCloudSettingI
     {
         categoryName: 'Account List Page',
         items: [
-            { settingKey: 'totalAmountExcludeAccountIds', settingName: 'Accounts Included in Total', mobile: true, desktop: true }
+            { settingKey: 'totalAmountExcludeAccountIds', settingName: 'Accounts Included in Total', mobile: true, desktop: true },
+            { settingKey: 'hideCategoriesWithoutAccounts', settingName: 'Hide Categories Without Accounts', mobile: false, desktop: true }
         ]
     },
     {

src/views/desktop/accounts/ListPage.vue

@@ -31,7 +31,8 @@
                         <v-tabs show-arrows class="account-category-tabs my-4" direction="vertical"
                                 :disabled="loading" v-model="activeAccountCategoryType">
                             <v-tab class="tab-text-truncate" :key="accountCategory.type" :value="accountCategory.type"
-                                   v-for="accountCategory in AccountCategory.values()">
+                                   v-for="accountCategory in AccountCategory.values()"
+                                   v-show="!hideAccountCategoriesWithoutAccounts || (allCategorizedAccountsMap[accountCategory.type] && allCategorizedAccountsMap[accountCategory.type]!.accounts.length > 0)">
                                 <ItemIcon icon-type="account" :icon-id="accountCategory.defaultAccountIconId" />
                                 <div class="d-flex flex-column text-truncate ms-2">
                                     <small class="text-truncate text-start smaller" v-if="!loading || allAccountCount > 0">{{ accountCategoryTotalBalance(accountCategory) }}</small>
@@ -327,6 +328,7 @@ import { useDisplay } from 'vuetify';
 import { useI18n } from '@/locales/helpers.ts';
 import { useAccountListPageBase } from '@/views/base/accounts/AccountListPageBase.ts';
 
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useAccountsStore } from '@/stores/account.ts';
 
 import { DateRange, DateRangeScene, type LocalizedDateRange, type TimeRangeAndDateType } from '@/core/datetime.ts';
@@ -382,6 +384,7 @@ const {
     accountBalance
 } = useAccountListPageBase();
 
+const settingsStore = useSettingsStore();
 const accountsStore = useAccountsStore();
 
 const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
@@ -400,6 +403,7 @@ const showNav = ref<boolean>(display.mdAndUp.value);
 const showAccountsIncludedInTotalDialog = ref<boolean>(false);
 const showCustomDateRangeDialog = ref<boolean>(false);
 
+const hideAccountCategoriesWithoutAccounts = computed<boolean>(() => settingsStore.appSettings.hideCategoriesWithoutAccounts);
 const hasAnyVisibleAccount = computed<boolean>(() => accountsStore.allVisibleAccountsCount > 0);
 const activeAccountCategory = computed<AccountCategory | undefined>(() => AccountCategory.valueOf(activeAccountCategoryType.value));
 const activeAccountCategoryTotalBalance = computed<string>(() => accountCategoryTotalBalance(activeAccountCategory.value));

src/views/desktop/app/settings/tabs/AppBasicSettingTab.vue

@@ -277,6 +277,17 @@
                                     @click="showAccountsIncludedInTotalDialog = true"
                                 />
                             </v-col>
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="displayName"
+                                    item-value="value"
+                                    persistent-placeholder
+                                    :label="tt('Hide Categories Without Accounts')"
+                                    :placeholder="tt('Hide Categories Without Accounts')"
+                                    :items="enableDisableOptions"
+                                    v-model="hideCategoriesWithoutAccounts"
+                                />
+                            </v-col>
                         </v-row>
                     </v-card-text>
                 </v-form>
@@ -421,6 +432,11 @@ const showTagInInsightsExplorerPage = computed<boolean>({
     set: (value) => settingsStore.setShowTagInInsightsExplorerPage(value)
 });
 
+const hideCategoriesWithoutAccounts = computed<boolean>({
+    get: () => settingsStore.appSettings.hideCategoriesWithoutAccounts,
+    set: (value) => settingsStore.setHideCategoriesWithoutAccounts(value)
+});
+
 function init(): void {
     loadingAccounts.value = true;