[WIP] Template UI and progress bar combined

packages/component-library/src/Tooltip.tsx

@@ -10,13 +10,15 @@ type TooltipProps = Partial<ComponentProps<typeof AriaTooltip>> & {
   content: ReactNode;
   triggerProps?: Partial<ComponentProps<typeof TooltipTrigger>>;
   disablePointerEvents?: boolean;
+  wrapperStyle?: React.CSSProperties;
 };
 
 export const Tooltip = ({
   children,
   content,
   triggerProps = {},
   disablePointerEvents = false,
+  wrapperStyle,
   ...props
 }: TooltipProps) => {
   const triggerRef = useRef(null);
@@ -54,7 +56,12 @@ export const Tooltip = ({
 
   return (
     <View
-      style={{ minHeight: 'auto', flexShrink: 0, maxWidth: '100%' }}
+      style={{
+        minHeight: 'auto',
+        flexShrink: 0,
+        maxWidth: '100%',
+        ...wrapperStyle,
+      }}
       ref={triggerRef}
       onMouseEnter={handlePointerEnter}
       onMouseLeave={handlePointerLeave}

packages/desktop-client/src/budget/mutations.ts

@@ -79,13 +79,12 @@ export function useCreateCategoryMutation() {
       isIncome,
       isHidden,
     }: CreateCategoryPayload) => {
-      const id = await send('category-create', {
+      return send('category-create', {
         name,
         groupId,
         isIncome,
         hidden: isHidden,
       });
-      return id;
     },
     onSuccess: () => invalidateQueries(queryClient),
     onError: error => {
@@ -304,8 +303,7 @@ export function useCreateCategoryGroupMutation() {
 
   return useMutation({
     mutationFn: async ({ name }: CreateCategoryGroupPayload) => {
-      const id = await send('category-group-create', { name });
-      return id;
+      return send('category-group-create', { name });
     },
     onSuccess: () => invalidateQueries(queryClient),
     onError: error => {
@@ -649,11 +647,20 @@ type ApplyBudgetActionPayload =
       args: {
         category: CategoryEntity['id'];
       };
+    }
+  | {
+      type: 'set-single-category-template';
+      month: string;
+      args: {
+        category: CategoryEntity['id'];
+        amount: number | null;
+      };
     };
 
 export function useBudgetActions() {
   const dispatch = useDispatch();
   const { t } = useTranslation();
+  const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async ({ month, type, args }: ApplyBudgetActionPayload) => {
@@ -778,6 +785,13 @@ export function useBudgetActions() {
             category: args.category,
           });
           return null;
+        case 'set-single-category-template':
+          await send('budget/set-single-category-template', {
+            categoryId: args.category,
+            amount: args.amount,
+          });
+          invalidateQueries(queryClient);
+          return null;
         default:
           throw new Error(`Unknown budget action type: ${type}`);
       }

packages/desktop-client/src/components/Titlebar.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { Trans, useTranslation } from 'react-i18next';
-import { Route, Routes, useLocation } from 'react-router';
+import { Route, Routes, useLocation, useMatch } from 'react-router';
 
 import { Button } from '@actual-app/components/button';
 import { useResponsive } from '@actual-app/components/hooks/useResponsive';
-import { SvgArrowLeft } from '@actual-app/components/icons/v1';
+import { SvgArrowLeft, SvgChartBar } from '@actual-app/components/icons/v1';
 import {
   SvgAlertTriangle,
   SvgNavigationMenu,
@@ -35,6 +35,7 @@ import { useSidebar } from './sidebar/SidebarProvider';
 import { ThemeSelector } from './ThemeSelector';
 
 import { sync } from '@desktop-client/app/appSlice';
+import { useFeatureFlag } from '@desktop-client/hooks/useFeatureFlag';
 import { useGlobalPref } from '@desktop-client/hooks/useGlobalPref';
 import { useIsTestEnv } from '@desktop-client/hooks/useIsTestEnv';
 import { useMetadataPref } from '@desktop-client/hooks/useMetadataPref';
@@ -106,6 +107,33 @@ function PrivacyButton({ style }: PrivacyButtonProps) {
   );
 }
 
+type StatusBarsButtonProps = {
+  style?: CSSProperties;
+};
+
+function StatusBarsButton({ style }: StatusBarsButtonProps) {
+  const { t } = useTranslation();
+  const progressBarEnabled = useFeatureFlag('goalTemplatesEnabled');
+  const [showProgressBarsPref, setShowProgressBarsPref] =
+    useGlobalPref('showProgressBars');
+  const showProgressBars = showProgressBarsPref !== false;
+
+  if (!progressBarEnabled) return null;
+
+  return (
+    <Button
+      variant="bare"
+      aria-label={
+        showProgressBars ? t('Hide status bars') : t('Show status bars')
+      }
+      onPress={() => setShowProgressBarsPref(!showProgressBars)}
+      style={style}
+    >
+      <SvgChartBar style={{ width: 15, height: 15 }} />
+    </Button>
+  );
+}
+
 type SyncButtonProps = {
   style?: CSSProperties;
   isMobile?: boolean;
@@ -279,6 +307,7 @@ export function Titlebar({ style }: TitlebarProps) {
   const serverURL = useServerURL();
   const [floatingSidebar] = useGlobalPref('floatingSidebar');
   const isTestEnv = useIsTestEnv();
+  const isBudgetPage = useMatch('/budget');
 
   return isNarrowWidth ? null : (
     <View
@@ -345,6 +374,7 @@ export function Titlebar({ style }: TitlebarProps) {
       <SpaceBetween gap={10}>
         <UncategorizedButton />
         {isDevelopmentEnvironment() && !isTestEnv && <ThemeSelector />}
+        {isBudgetPage && <StatusBarsButton />}
         <PrivacyButton />
         {serverURL ? <SyncButton /> : null}
         <LoggedInUser />

packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx

@@ -95,6 +95,8 @@ type BalanceWithCarryoverProps = Omit<
   goal: Binding<'envelope-budget' | 'tracking-budget', 'goal'>;
   budgeted: Binding<'envelope-budget' | 'tracking-budget', 'budget'>;
   longGoal: Binding<'envelope-budget' | 'tracking-budget', 'long-goal'>;
+  goalOverride?: number | null;
+  balanceColorOverride?: string | null;
   isDisabled?: boolean;
   shouldInlineGoalStatus?: boolean;
   CarryoverIndicator?: ComponentType<CarryoverIndicatorProps>;
@@ -107,6 +109,8 @@ export function BalanceWithCarryover({
   goal,
   budgeted,
   longGoal,
+  goalOverride,
+  balanceColorOverride,
   isDisabled,
   shouldInlineGoalStatus,
   CarryoverIndicator: CarryoverIndicatorComponent = CarryoverIndicator,
@@ -121,23 +125,35 @@ export function BalanceWithCarryover({
   const budgetedValue = useSheetValue(budgeted);
   const longGoalValue = useSheetValue(longGoal);
   const isGoalTemplatesEnabled = useFeatureFlag('goalTemplatesEnabled');
+  const resolvedGoalValue =
+    goalOverride != null && isGoalTemplatesEnabled ? goalOverride : goalValue;
   const getBalanceAmountStyle = useCallback(
-    (balanceValue: number) =>
-      makeBalanceAmountStyle(
+    (balanceValue: number) => {
+      if (balanceColorOverride && balanceValue >= 0) {
+        return { color: balanceColorOverride };
+      }
+      return makeBalanceAmountStyle(
         balanceValue,
-        isGoalTemplatesEnabled ? goalValue : null,
+        isGoalTemplatesEnabled ? resolvedGoalValue : null,
         longGoalValue === 1 ? balanceValue : budgetedValue,
-      ),
-    [budgetedValue, goalValue, isGoalTemplatesEnabled, longGoalValue],
+      );
+    },
+    [
+      balanceColorOverride,
+      budgetedValue,
+      resolvedGoalValue,
+      isGoalTemplatesEnabled,
+      longGoalValue,
+    ],
   );
   const format = useFormat();
 
   const getDifferenceToGoal = useCallback(
     (balanceValue: number) =>
       longGoalValue === 1
-        ? balanceValue - goalValue
-        : budgetedValue - goalValue,
-    [budgetedValue, goalValue, longGoalValue],
+        ? balanceValue - resolvedGoalValue
+        : budgetedValue - resolvedGoalValue,
+    [budgetedValue, resolvedGoalValue, longGoalValue],
   );
 
   const getDefaultClassName = useCallback(

packages/desktop-client/src/components/budget/BudgetCategories.tsx

@@ -242,9 +242,11 @@ export const BudgetCategories = memo<BudgetCategoriesProps>(
         style={{
           marginBottom: 10,
           backgroundColor: theme.budgetCurrentMonth, // match budget colors, not generic table colors.
-          overflow: 'hidden',
           boxShadow: styles.cardShadow,
           borderRadius: '0 0 4px 4px',
+          borderColor: theme.tableBorder,
+          borderBottomWidth: 1,
+          borderBottomColor: theme.tableBorder,
           flex: 1,
         }}
       >
@@ -315,6 +317,7 @@ export const BudgetCategories = memo<BudgetCategoriesProps>(
                   categoryGroup={item.group}
                   editingCell={editingCell}
                   dragState={dragState}
+                  isLast={idx === items.length - 1}
                   onEditName={onEditName}
                   onEditMonth={onEditMonth}
                   onSave={_onSaveCategory}

packages/desktop-client/src/components/budget/BudgetTable.tsx

@@ -16,6 +16,7 @@ import { BudgetSummaries } from './BudgetSummaries';
 import { BudgetTotals } from './BudgetTotals';
 import { MonthsProvider } from './MonthsContext';
 import type { MonthBounds } from './MonthsContext';
+import { TemplateGoalProvider } from './TemplateGoalContext';
 import {
   findSortDown,
   findSortUp,
@@ -26,6 +27,7 @@ import {
 import type { DropPosition } from '@desktop-client/components/sort';
 import { SchedulesProvider } from '@desktop-client/hooks/useCachedSchedules';
 import { useCategories } from '@desktop-client/hooks/useCategories';
+import { useFeatureFlag } from '@desktop-client/hooks/useFeatureFlag';
 import { useGlobalPref } from '@desktop-client/hooks/useGlobalPref';
 import { useLocalPref } from '@desktop-client/hooks/useLocalPref';
 
@@ -80,6 +82,7 @@ export function BudgetTable(props: BudgetTableProps) {
   const [showHiddenCategories, setShowHiddenCategoriesPef] = useLocalPref(
     'budget.showHiddenCategories',
   );
+  const isGoalTemplatesEnabled = useFeatureFlag('goalTemplatesEnabled');
   const [categoryExpandedStatePref] = useGlobalPref('categoryExpandedState');
   const categoryExpandedState = categoryExpandedStatePref ?? 0;
   const [editing, setEditing] = useState<{ id: string; cell: string } | null>(
@@ -172,7 +175,6 @@ export function BudgetTable(props: BudgetTableProps) {
 
         if ('isGroup' in next && next.isGroup) {
           nextIdx += dir;
-          continue;
         } else if (
           type === 'tracking' ||
           ('is_income' in next && !next.is_income)
@@ -257,52 +259,58 @@ export function BudgetTable(props: BudgetTableProps) {
         </MonthsProvider>
       </View>
 
-      <MonthsProvider
+      <TemplateGoalProvider
+        enabled={isGoalTemplatesEnabled}
         startMonth={startMonth}
         numMonths={numMonths}
-        monthBounds={monthBounds}
-        type={type}
       >
-        <BudgetTotals
-          toggleHiddenCategories={toggleHiddenCategories}
-          expandAllCategories={expandAllCategories}
-          collapseAllCategories={collapseAllCategories}
-        />
-        <View
-          style={{
-            overflowY: 'scroll',
-            overflowAnchor: 'none',
-            flex: 1,
-            paddingLeft: 5,
-            paddingRight: 5,
-          }}
+        <MonthsProvider
+          startMonth={startMonth}
+          numMonths={numMonths}
+          monthBounds={monthBounds}
+          type={type}
         >
+          <BudgetTotals
+            toggleHiddenCategories={toggleHiddenCategories}
+            expandAllCategories={expandAllCategories}
+            collapseAllCategories={collapseAllCategories}
+          />
           <View
             style={{
-              flexShrink: 0,
+              overflowY: 'scroll',
+              overflowAnchor: 'none',
+              flex: 1,
+              paddingLeft: 5,
+              paddingRight: 5,
             }}
-            onKeyDown={onKeyDown}
           >
-            <SchedulesProvider query={schedulesQuery}>
-              <BudgetCategories
-                categoryGroups={categoryGroups}
-                editingCell={editing}
-                onEditMonth={onEditMonth}
-                onEditName={onEditName}
-                onSaveCategory={onSaveCategory}
-                onSaveGroup={onSaveGroup}
-                onDeleteCategory={onDeleteCategory}
-                onDeleteGroup={onDeleteGroup}
-                onReorderCategory={_onReorderCategory}
-                onReorderGroup={_onReorderGroup}
-                onBudgetAction={onBudgetAction}
-                onShowActivity={onShowActivity}
-                onApplyBudgetTemplatesInGroup={onApplyBudgetTemplatesInGroup}
-              />
-            </SchedulesProvider>
+            <View
+              style={{
+                flexShrink: 0,
+              }}
+              onKeyDown={onKeyDown}
+            >
+              <SchedulesProvider query={schedulesQuery}>
+                <BudgetCategories
+                  categoryGroups={categoryGroups}
+                  editingCell={editing}
+                  onEditMonth={onEditMonth}
+                  onEditName={onEditName}
+                  onSaveCategory={onSaveCategory}
+                  onSaveGroup={onSaveGroup}
+                  onDeleteCategory={onDeleteCategory}
+                  onDeleteGroup={onDeleteGroup}
+                  onReorderCategory={_onReorderCategory}
+                  onReorderGroup={_onReorderGroup}
+                  onBudgetAction={onBudgetAction}
+                  onShowActivity={onShowActivity}
+                  onApplyBudgetTemplatesInGroup={onApplyBudgetTemplatesInGroup}
+                />
+              </SchedulesProvider>
+            </View>
           </View>
-        </View>
-      </MonthsProvider>
+        </MonthsProvider>
+      </TemplateGoalProvider>
     </View>
   );
 }