Dim categories hidden by their groups (#2582)

* Dim categories hidden by their groups

* Dim hidden cats on mobile view

* Do not show hide/show menu on mobile for categories in hidden groups

* Rename catGroup to categoryGroup

* Fix lint issue

* Hide menu line

* Pass in categoryGroup instead of isHidden

* avoid need for extra local

* fix lint issues

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}

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}

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={

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',
                 },

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)

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,

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',

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;

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.