use primary color & icon as default when creating secondary category

src/views/base/categories/CategoryListPageBase.ts

@@ -0,0 +1,28 @@
+import { ref, computed } from 'vue';
+
+import type { TransactionCategory } from '@/models/transaction_category.ts';
+
+import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
+
+export function useCategoryListPageBase() {
+    const transactionCategoriesStore = useTransactionCategoriesStore();
+
+    const loading = ref<boolean>(true);
+    const primaryCategoryId = ref<string>('0');
+
+    const currentPrimaryCategory = computed<TransactionCategory | undefined>(() => {
+        if (!transactionCategoriesStore.allTransactionCategoriesMap || !transactionCategoriesStore.allTransactionCategoriesMap[primaryCategoryId.value]) {
+            return undefined;
+        }
+
+        return transactionCategoriesStore.allTransactionCategoriesMap[primaryCategoryId.value];
+    });
+
+    return {
+        // states
+        loading,
+        primaryCategoryId,
+        // computed states
+        currentPrimaryCategory
+    };
+}

src/views/desktop/categories/ListPage.vue

@@ -203,6 +203,7 @@ import { ref, computed, useTemplateRef, watch, nextTick } from 'vue';
 import { useDisplay } from 'vuetify';
 
 import { useI18n } from '@/locales/helpers.ts';
+import { useCategoryListPageBase } from '@/views/base/categories/CategoryListPageBase.ts';
 
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 
@@ -232,6 +233,7 @@ type EditDialogType = InstanceType<typeof EditDialog>;
 
 const display = useDisplay();
 const { tt } = useI18n();
+const { loading, primaryCategoryId, currentPrimaryCategory } = useCategoryListPageBase();
 
 const transactionCategoriesStore = useTransactionCategoriesStore();
 
@@ -242,8 +244,6 @@ const editDialog = useTemplateRef<EditDialogType>('editDialog');
 
 const activeCategoryType = ref<CategoryType>(CategoryType.Expense);
 const activeTab = ref<string>('categoryPage');
-const primaryCategoryId = ref<string>('0');
-const loading = ref<boolean>(true);
 const updating = ref<boolean>(false);
 const categoryHiding = ref<Record<string, boolean>>({});
 const categoryRemoving = ref<Record<string, boolean>>({});
@@ -350,7 +350,9 @@ function reload(force: boolean): void {
 function add(): void {
     editDialog.value?.open({
         type: activeCategoryType.value,
-        parentId: primaryCategoryId.value
+        parentId: primaryCategoryId.value,
+        color: currentPrimaryCategory.value?.color,
+        icon: currentPrimaryCategory.value?.icon
     }).then(result => {
         if (result && result.message) {
             snackbar.value?.showMessage(result.message);

src/views/desktop/categories/list/dialogs/EditDialog.vue

@@ -103,6 +103,7 @@ import { useCategoryEditPageBase } from '@/views/base/categories/CategoryEditPag
 
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 
+import type { ColorValue } from '@/core/color.ts';
 import { CategoryType } from '@/core/category.ts';
 import { ALL_CATEGORY_ICONS } from '@/consts/icon.ts';
 import { ALL_CATEGORY_COLORS } from '@/consts/color.ts';
@@ -147,7 +148,7 @@ const isCategoryModified = computed<boolean>(() => {
     }
 });
 
-function open(options: { id?: string; parentId?: string; type?: CategoryType; currentCategory?: TransactionCategory }): Promise<TransactionCategoryEditResponse> {
+function open(options: { id?: string; parentId?: string; type?: CategoryType; currentCategory?: TransactionCategory, color?: ColorValue, icon?: string }): Promise<TransactionCategoryEditResponse> {
     showState.value = true;
     loading.value = true;
     submitting.value = false;
@@ -193,6 +194,14 @@ function open(options: { id?: string; parentId?: string; type?: CategoryType; cu
         category.value.type = categoryType;
         category.value.parentId = options.parentId;
 
+        if (options.color) {
+            category.value.color = options.color;
+        }
+
+        if (options.icon) {
+            category.value.icon = options.icon;
+        }
+
         clientSessionId.value = generateRandomUUID();
         loading.value = false;
     }

src/views/mobile/categories/EditPage.vue

@@ -155,6 +155,7 @@ import { useCategoryEditPageBase } from '@/views/base/categories/CategoryEditPag
 
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 
+import type { ColorValue } from '@/core/color.ts';
 import { CategoryType } from '@/core/category.ts';
 import { ALL_CATEGORY_ICONS } from '@/consts/icon.ts';
 import { ALL_CATEGORY_COLORS } from '@/consts/color.ts';
@@ -230,6 +231,14 @@ function init(): void {
             return;
         }
 
+        if (query['color']) {
+            category.value.color = query['color'] as ColorValue;
+        }
+
+        if (query['icon']) {
+            category.value.icon = query['icon'];
+        }
+
         clientSessionId.value = generateRandomUUID();
         loading.value = false;
     }

src/views/mobile/categories/ListPage.vue

@@ -5,7 +5,7 @@
             <f7-nav-title :title="tt(title)"></f7-nav-title>
             <f7-nav-right class="navbar-compact-icons">
                 <f7-link icon-f7="ellipsis" :class="{ 'disabled': !categories.length }" v-if="!sortable" @click="showMoreActionSheet = true"></f7-link>
-                <f7-link :href="'/category/add?type=' + categoryType + '&parentId=' + primaryCategoryId" icon-f7="plus" v-if="!sortable"></f7-link>
+                <f7-link :href="'/category/add?type=' + categoryType + '&parentId=' + primaryCategoryId + (currentPrimaryCategory ? `&color=${currentPrimaryCategory.color}&icon=${currentPrimaryCategory.icon}` : '')" icon-f7="plus" v-if="!sortable"></f7-link>
                 <f7-link :text="tt('Done')" :class="{ 'disabled': displayOrderSaving }" @click="saveSortResult" v-else-if="sortable"></f7-link>
             </f7-nav-right>
         </f7-navbar>
@@ -92,6 +92,7 @@ import type { Router } from 'framework7/types';
 
 import { useI18n } from '@/locales/helpers.ts';
 import { useI18nUIComponents, showLoading, hideLoading, onSwipeoutDeleted } from '@/lib/ui/mobile.ts';
+import { useCategoryListPageBase } from '@/views/base/categories/CategoryListPageBase.ts';
 
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 
@@ -111,13 +112,12 @@ const props = defineProps<{
 
 const { tt } = useI18n();
 const { showAlert, showToast, routeBackOnError } = useI18nUIComponents();
+const { loading, primaryCategoryId, currentPrimaryCategory } = useCategoryListPageBase();
 
 const transactionCategoriesStore = useTransactionCategoriesStore();
 
 const hasSubCategories = ref<boolean>(false);
 const categoryType = ref<CategoryType | 0>(0);
-const primaryCategoryId = ref<string>('0');
-const loading = ref<boolean>(true);
 const loadingError = ref<unknown | null>(null);
 const showHidden = ref<boolean>(false);
 const sortable = ref<boolean>(false);