diff --git a/packages/desktop-client/src/components/Modals.tsx b/packages/desktop-client/src/components/Modals.tsx
index 2953f58e4a03cf21dba2ead2a7e161c9623dace5..95e0713602f7b90a0f5da55b77169b8decf0d230 100644
--- a/packages/desktop-client/src/components/Modals.tsx
+++ b/packages/desktop-client/src/components/Modals.tsx
@@ -429,6 +429,7 @@ export function Modals() {
key={name}
modalProps={modalProps}
categoryId={options.categoryId}
+ categoryGroup={options.categoryGroup}
onSave={options.onSave}
onEditNotes={options.onEditNotes}
onDelete={options.onDelete}
diff --git a/packages/desktop-client/src/components/budget/BudgetCategories.jsx b/packages/desktop-client/src/components/budget/BudgetCategories.jsx
index fd708f3824fbb739b19374dbbedf59c806952c83..962697d9a9c05101857713df4eef160de3273470 100644
--- a/packages/desktop-client/src/components/budget/BudgetCategories.jsx
+++ b/packages/desktop-client/src/components/budget/BudgetCategories.jsx
@@ -66,6 +66,7 @@ export const BudgetCategories = memo(
cat => ({
type: 'expense-category',
value: cat,
+ group,
}),
),
];
@@ -250,6 +251,7 @@ export const BudgetCategories = memo(
content = (
<ExpenseCategory
cat={item.value}
+ categoryGroup={item.group}
editingCell={editingCell}
MonthComponent={dataComponents.ExpenseCategoryComponent}
dragState={dragState}
diff --git a/packages/desktop-client/src/components/budget/ExpenseCategory.tsx b/packages/desktop-client/src/components/budget/ExpenseCategory.tsx
index 16a5fa61d2c20b237f7164d92f5e6875cd09ccfe..5007b81c8d12d51d609ae28724b2b5b17dadf0e2 100644
--- a/packages/desktop-client/src/components/budget/ExpenseCategory.tsx
+++ b/packages/desktop-client/src/components/budget/ExpenseCategory.tsx
@@ -1,7 +1,10 @@
// @ts-strict-ignore
import React, { type ComponentProps } from 'react';
-import { type CategoryEntity } from 'loot-core/src/types/models';
+import {
+ type CategoryGroupEntity,
+ type CategoryEntity,
+} from 'loot-core/src/types/models';
import { theme } from '../../style';
import { View } from '../common/View';
@@ -20,6 +23,7 @@ import { SidebarCategory } from './SidebarCategory';
type ExpenseCategoryProps = {
cat: CategoryEntity;
+ categoryGroup?: CategoryGroupEntity;
editingCell: { id: string; cell: string } | null;
dragState: DragState<CategoryEntity>;
MonthComponent: ComponentProps<typeof RenderMonths>['component'];
@@ -35,6 +39,7 @@ type ExpenseCategoryProps = {
export function ExpenseCategory({
cat,
+ categoryGroup,
editingCell,
dragState,
MonthComponent,
@@ -72,7 +77,7 @@ export function ExpenseCategory({
collapsed={true}
style={{
backgroundColor: theme.tableBackground,
- opacity: cat.hidden ? 0.5 : undefined,
+ opacity: cat.hidden || categoryGroup?.hidden ? 0.5 : undefined,
}}
>
<DropHighlight pos={dropPos} offset={{ top: 1 }} />
@@ -81,6 +86,7 @@ export function ExpenseCategory({
<SidebarCategory
innerRef={dragRef}
category={cat}
+ categoryGroup={categoryGroup}
dragPreview={dragging && dragState.preview}
dragging={dragging && !dragState.preview}
editing={
diff --git a/packages/desktop-client/src/components/budget/SidebarCategory.tsx b/packages/desktop-client/src/components/budget/SidebarCategory.tsx
index 8ca35fde6b9f860dacc3ccb7bb94978d13edc3a6..f62255cf91107c1d0b68135145ae92ca67bcb2d2 100644
--- a/packages/desktop-client/src/components/budget/SidebarCategory.tsx
+++ b/packages/desktop-client/src/components/budget/SidebarCategory.tsx
@@ -1,7 +1,10 @@
// @ts-strict-ignore
import React, { type CSSProperties, type Ref, useState } from 'react';
-import { type CategoryEntity } from 'loot-core/src/types/models';
+import {
+ type CategoryGroupEntity,
+ type CategoryEntity,
+} from 'loot-core/src/types/models';
import { SvgCheveronDown } from '../../icons/v1';
import { theme } from '../../style';
@@ -15,6 +18,7 @@ import { Tooltip } from '../tooltips';
type SidebarCategoryProps = {
innerRef: Ref<HTMLDivElement>;
category: CategoryEntity;
+ categoryGroup?: CategoryGroupEntity;
dragPreview?: boolean;
dragging?: boolean;
editing: boolean;
@@ -30,6 +34,7 @@ type SidebarCategoryProps = {
export function SidebarCategory({
innerRef,
category,
+ categoryGroup,
dragPreview,
dragging,
editing,
@@ -50,7 +55,7 @@ export function SidebarCategory({
alignItems: 'center',
userSelect: 'none',
WebkitUserSelect: 'none',
- opacity: category.hidden ? 0.33 : undefined,
+ opacity: category.hidden || categoryGroup?.hidden ? 0.33 : undefined,
}}
>
<div
@@ -99,7 +104,7 @@ export function SidebarCategory({
setMenuOpen(false);
}}
items={[
- {
+ !categoryGroup?.hidden && {
name: 'toggle-visibility',
text: category.hidden ? 'Show' : 'Hide',
},
diff --git a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
index 9e1f43d21bf08e0890a66d11243e7dc977a5b487..5b8798d439c8f7950544685f88f9de17bc212190 100644
--- a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
+++ b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
@@ -227,6 +227,7 @@ function ExpenseCategoryPreview({ name, pending, style }) {
const ExpenseCategory = memo(function ExpenseCategory({
type,
category,
+ isHidden,
goal,
budgeted,
spent,
@@ -322,7 +323,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
backgroundColor: 'transparent',
borderBottomWidth: 0,
borderTopWidth: index > 0 ? 1 : 0,
- opacity: !!category.hidden ? 0.5 : undefined,
+ opacity: isHidden ? 0.5 : undefined,
...style,
}}
data-testid="row"
@@ -894,6 +895,7 @@ const ExpenseGroup = memo(function ExpenseGroup({
show3Cols={show3Cols}
type={type}
category={category}
+ isHidden={!!category.hidden || group.hidden}
goal={
type === 'report'
? reportBudget.catGoal(category.id)
diff --git a/packages/desktop-client/src/components/mobile/budget/index.tsx b/packages/desktop-client/src/components/mobile/budget/index.tsx
index 4374b7246332173b91e65772fa692585b330151e..d3c2bd2a78806f3edb1ac7a3c6ff1f757912a32a 100644
--- a/packages/desktop-client/src/components/mobile/budget/index.tsx
+++ b/packages/desktop-client/src/components/mobile/budget/index.tsx
@@ -343,9 +343,11 @@ function BudgetInner(props: BudgetInnerProps) {
const onEditCategory = id => {
const category = categories.find(c => c.id === id);
+ const categoryGroup = categoryGroups.find(g => g.id === category.cat_group);
dispatch(
pushModal('category-menu', {
categoryId: category.id,
+ categoryGroup,
onSave: onSaveCategory,
onEditNotes: onEditCategoryNotes,
onDelete: onDeleteCategory,
diff --git a/packages/desktop-client/src/components/modals/CategoryMenuModal.tsx b/packages/desktop-client/src/components/modals/CategoryMenuModal.tsx
index b88d52a0abf28a1370a3890f3cdde49ea3792992..75ffcaa1ec42a1be87ef2a6f4f32e81a0a665059 100644
--- a/packages/desktop-client/src/components/modals/CategoryMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/CategoryMenuModal.tsx
@@ -4,6 +4,7 @@ import React, { useState } from 'react';
import { useLiveQuery } from 'loot-core/src/client/query-hooks';
import { q } from 'loot-core/src/shared/query';
import {
+ type CategoryGroupEntity,
type CategoryEntity,
type NoteEntity,
} from 'loot-core/src/types/models';
@@ -23,6 +24,7 @@ import { Tooltip } from '../tooltips';
type CategoryMenuModalProps = {
modalProps: CommonModalProps;
categoryId: string;
+ categoryGroup?: CategoryGroupEntity;
onSave: (category: CategoryEntity) => void;
onEditNotes: (id: string) => void;
onDelete: (categoryId: string) => void;
@@ -32,6 +34,7 @@ type CategoryMenuModalProps = {
export function CategoryMenuModal({
modalProps,
categoryId,
+ categoryGroup,
onSave,
onEditNotes,
onDelete,
@@ -102,6 +105,7 @@ export function CategoryMenuModal({
leftHeaderContent={
<AdditionalCategoryMenu
category={category}
+ categoryGroup={categoryGroup}
onDelete={_onDelete}
onToggleVisibility={_onToggleVisibility}
/>
@@ -152,7 +156,12 @@ export function CategoryMenuModal({
);
}
-function AdditionalCategoryMenu({ category, onDelete, onToggleVisibility }) {
+function AdditionalCategoryMenu({
+ category,
+ categoryGroup,
+ onDelete,
+ onToggleVisibility,
+}) {
const [menuOpen, setMenuOpen] = useState(false);
const itemStyle: CSSProperties = {
...styles.mediumText,
@@ -184,13 +193,13 @@ function AdditionalCategoryMenu({ category, onDelete, onToggleVisibility }) {
<Menu
getItemStyle={() => itemStyle}
items={[
- {
+ !categoryGroup?.hidden && {
name: 'toggleVisibility',
text: category.hidden ? 'Show' : 'Hide',
icon: category.hidden ? SvgViewShow : SvgViewHide,
iconSize: 16,
},
- Menu.line,
+ !categoryGroup?.hidden && Menu.line,
{
name: 'delete',
text: 'Delete',
diff --git a/packages/loot-core/src/client/state-types/modals.d.ts b/packages/loot-core/src/client/state-types/modals.d.ts
index 4d4f45f8de2e887679d22fb04aa8ff1c29da1d72..eef5b20f8074e2704ca1fd6753078122a8b4b966 100644
--- a/packages/loot-core/src/client/state-types/modals.d.ts
+++ b/packages/loot-core/src/client/state-types/modals.d.ts
@@ -143,6 +143,7 @@ type FinanceModals = {
};
'category-menu': {
categoryId: string;
+ categoryGroup?: CategoryGroupEntity;
onSave: (category: CategoryEntity) => void;
onEditNotes: (id: string) => void;
onDelete: (categoryId: string) => void;
diff --git a/upcoming-release-notes/2582.md b/upcoming-release-notes/2582.md
new file mode 100644
index 0000000000000000000000000000000000000000..f532a25656b7194343e254e2865ee7f20e8c3039
--- /dev/null
+++ b/upcoming-release-notes/2582.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [psybers]
+---
+
+Dim categories in the budget view if hidden by their category group.