use primary color & icon as default when creating secondary category

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;
     }