v0.4.0 - view mode fixes

.github/workflows/beta-release.yml

@@ -9,6 +9,8 @@ on:
     paths-ignore:
       - '.github/workflows/**'
       - '**/*.md'
+      - '*.md'
+      - '.gitignore'
 
 permissions:
   contents: write
@@ -72,11 +74,11 @@ jobs:
         run: npm run build:${{ matrix.target }}
         env:
           CSC_IDENTITY_AUTO_DISCOVERY: false
-          FEEDBACK_FORM_URL: ${{ secrets.FEEDBACK_FORM_URL }}
-          FEEDBACK_FORM_ENTRY_EMAIL: ${{ secrets.FEEDBACK_FORM_ENTRY_EMAIL }}
-          FEEDBACK_FORM_ENTRY_CATEGORY: ${{ secrets.FEEDBACK_FORM_ENTRY_CATEGORY }}
-          FEEDBACK_FORM_ENTRY_SUBJECT: ${{ secrets.FEEDBACK_FORM_ENTRY_SUBJECT }}
-          FEEDBACK_FORM_ENTRY_DETAILS: ${{ secrets.FEEDBACK_FORM_ENTRY_DETAILS }}
+          FEEDBACK_FORM_URL: ${{ vars.FEEDBACK_FORM_URL }}
+          FEEDBACK_FORM_ENTRY_EMAIL: ${{ vars.FEEDBACK_FORM_ENTRY_EMAIL }}
+          FEEDBACK_FORM_ENTRY_CATEGORY: ${{ vars.FEEDBACK_FORM_ENTRY_CATEGORY }}
+          FEEDBACK_FORM_ENTRY_SUBJECT: ${{ vars.FEEDBACK_FORM_ENTRY_SUBJECT }}
+          FEEDBACK_FORM_ENTRY_DETAILS: ${{ vars.FEEDBACK_FORM_ENTRY_DETAILS }}
 
       - name: Upload beta artifacts
         uses: actions/upload-artifact@v4

.github/workflows/build.yml

@@ -11,6 +11,8 @@ on:
     paths-ignore:
       - '.github/workflows/**'
       - '**/*.md'
+      - '*.md'
+      - '.gitignore'
 
 jobs:
   build:

.github/workflows/release.yml

@@ -9,6 +9,8 @@ on:
     paths-ignore:
       - '.github/workflows/**'
       - '**/*.md'
+      - '*.md'
+      - '.gitignore'
 
 permissions:
   contents: write

.github/workflows/test.yml

@@ -11,6 +11,8 @@ on:
     paths-ignore:
       - '.github/workflows/**'
       - '**/*.md'
+      - '*.md'
+      - '.gitignore'
 
 jobs:
   test:

.github/workflows/validate-version.yml

@@ -9,6 +9,8 @@ on:
     paths-ignore:
       - '.github/workflows/**'
       - '**/*.md'
+      - '*.md'
+      - '.gitignore'
 
 jobs:
   check-version:

src/components/PlanDashboard/PlanDashboard.tsx

@@ -22,13 +22,15 @@ import SettingsModal from '../modals/SettingsModal';
 import AccountsModal from '../modals/AccountsModal';
 import ExportModal from '../modals/ExportModal';
 import FeedbackModal from '../modals/FeedbackModal';
+import ViewModeSettingsModal from '../modals/ViewModeSettingsModal';
 import { PlanTabs, TabManagementModal } from './PlanTabs';
 import PlanSearchOverlay from './PlanSearchOverlay';
 import PlanHistoryOverlay from './PlanHistoryOverlay';
 import { Toast, Modal, Button, ConfirmDialog, ErrorDialog, FileRelinkModal, FormGroup, EncryptionConfigPanel, Dropdown, ViewModeSelector } from '../_shared';
 import { initializeTabConfigs, getVisibleTabs, getHiddenTabs, toggleTabVisibility, reorderTabs, normalizeLegacyTabId } from '../../utils/tabManagement';
 import { getPayFrequencyViewMode } from '../../utils/payPeriod';
 import { sanitizeFavoriteViewModes } from '../../utils/viewModePreferences';
+import type { SelectableViewMode } from '../../types/viewMode';
 import { useGlobalKeyboardShortcuts } from '../../hooks';
 import type { SearchResult } from '../../utils/planSearch';
 import { getActionHandler, type SearchActionContext } from '../../utils/searchRegistry';
@@ -95,9 +97,8 @@ const isElementVisibleInContainer = (element: HTMLElement, container: HTMLElemen
   );
 };
 
-const getFirstVisibleFavoriteMode = (): ViewMode => {
-  const favorites = sanitizeFavoriteViewModes(FileStorageService.getAppSettings().viewModeFavorites);
-  return favorites[0];
+const getFirstVisibleFavoriteMode = (favorites: SelectableViewMode[]): ViewMode => {
+  return favorites[0] as ViewMode;
 };
 
 const isEditableTarget = (target: EventTarget | null): boolean => {
@@ -148,24 +149,24 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
   const [shouldScrollToRetirement, setShouldScrollToRetirement] = useState(false);
   const [pendingTabScroll, setPendingTabScroll] = useState<{ tab: TabId; position: TabScrollPosition } | null>(null);
   const [displayMode, setDisplayMode] = useState<ViewMode>(() => {
+    const favorites = sanitizeFavoriteViewModes(budgetData?.settings?.viewModeFavorites);
     if (budgetData?.settings?.displayMode) {
-      return sanitizeFavoriteViewModes(FileStorageService.getAppSettings().viewModeFavorites).includes(
-        budgetData.settings.displayMode as never,
-      )
+      return favorites.includes(budgetData.settings.displayMode as never)
         ? budgetData.settings.displayMode
-        : getFirstVisibleFavoriteMode();
+        : getFirstVisibleFavoriteMode(favorites);
     }
 
     const cadenceMode = getPayFrequencyViewMode(budgetData?.paySettings?.payFrequency ?? 'bi-weekly');
-    return sanitizeFavoriteViewModes(FileStorageService.getAppSettings().viewModeFavorites).includes(cadenceMode as never)
+    return favorites.includes(cadenceMode as never)
       ? cadenceMode
-      : getFirstVisibleFavoriteMode();
+      : getFirstVisibleFavoriteMode(favorites);
   });
   const [showCopyModal, setShowCopyModal] = useState(false);
   const [newYear, setNewYear] = useState('');
   const [copyYearError, setCopyYearError] = useState<string | null>(null);
   const [showSettings, setShowSettings] = useState(false);
   const [settingsInitialSection, setSettingsInitialSection] = useState<string | undefined>(undefined);
+  const [showViewModeSettings, setShowViewModeSettings] = useState(false);
   const [pendingPaySettingsFieldHighlight, setPendingPaySettingsFieldHighlight] = useState<string | undefined>(undefined);
   const [paySettingsSearchRequestKey, setPaySettingsSearchRequestKey] = useState(0);
   const [pendingBillsSearchAction, setPendingBillsSearchAction] = useState<
@@ -342,7 +343,6 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
 
     const normalizedViewMode = normalizeLegacyTabId(viewMode);
     if (normalizedViewMode && VALID_TABS.includes(normalizedViewMode)) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect
       setActiveTab(normalizedViewMode);
       initializedTabContextRef.current = tabRestoreContext;
       return;
@@ -433,6 +433,21 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
     historyStateKeyRef.current = nextHistoryKey;
   }, [activeTab, budgetData?.id, budgetData?.settings?.filePath, viewMode]);
 
+  useEffect(() => {
+    const handleViewModeAutoSwitched = (event: Event) => {
+      const customEvent = event as CustomEvent<{ message?: string }>;
+      setStatusToast({
+        message: customEvent.detail?.message ?? 'View mode switched to match your pay frequency.',
+        type: 'success',
+      });
+    };
+
+    window.addEventListener(APP_CUSTOM_EVENTS.viewModeAutoSwitched, handleViewModeAutoSwitched as EventListener);
+    return () => {
+      window.removeEventListener(APP_CUSTOM_EVENTS.viewModeAutoSwitched, handleViewModeAutoSwitched as EventListener);
+    };
+  }, []);
+
   useEffect(() => {
     if (viewMode || typeof window === 'undefined') return;
 
@@ -456,44 +471,39 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
   // Initialize tab position and display mode from budget settings
   useEffect(() => {
     if (budgetData?.settings?.tabPosition) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect
       setTabPosition(budgetData.settings.tabPosition);
     }
     if (budgetData?.settings?.tabDisplayMode) {
       setTabDisplayMode(budgetData.settings.tabDisplayMode);
     }
     if (budgetData?.settings?.displayMode) {
-      const favorites = sanitizeFavoriteViewModes(FileStorageService.getAppSettings().viewModeFavorites);
+      const favorites = sanitizeFavoriteViewModes(budgetData.settings.viewModeFavorites);
       setDisplayMode(
         favorites.includes(budgetData.settings.displayMode as never)
           ? budgetData.settings.displayMode
           : favorites[0],
       );
     } else if (budgetData?.paySettings?.payFrequency) {
-      const favorites = sanitizeFavoriteViewModes(FileStorageService.getAppSettings().viewModeFavorites);
+      const favorites = sanitizeFavoriteViewModes(budgetData.settings?.viewModeFavorites);
       const cadenceMode = getPayFrequencyViewMode(budgetData.paySettings.payFrequency);
       setDisplayMode(favorites.includes(cadenceMode as never) ? cadenceMode : favorites[0]);
     }
   }, [
     budgetData?.settings?.tabDisplayMode,
     budgetData?.settings?.tabPosition,
     budgetData?.settings?.displayMode,
+    budgetData?.settings?.viewModeFavorites,
     budgetData?.paySettings?.payFrequency,
   ]);
 
+  // When plan-specific favorites change, ensure displayMode is still in the list
   useEffect(() => {
-    const handleViewModeFavoritesChanged = () => {
-      const favorites = sanitizeFavoriteViewModes(FileStorageService.getAppSettings().viewModeFavorites);
-      if (!favorites.includes(displayMode as never)) {
-        setDisplayMode(favorites[0]);
-      }
-    };
-
-    window.addEventListener(APP_CUSTOM_EVENTS.viewModeFavoritesChanged, handleViewModeFavoritesChanged);
-    return () => {
-      window.removeEventListener(APP_CUSTOM_EVENTS.viewModeFavoritesChanged, handleViewModeFavoritesChanged);
-    };
-  }, [displayMode]);
+    const favorites = sanitizeFavoriteViewModes(budgetData?.settings?.viewModeFavorites);
+    if (!favorites.includes(displayMode as never)) {
+      setDisplayMode(favorites[0]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [budgetData?.settings?.viewModeFavorites]);
 
   // Handle tab position changes
   const handleTabPositionChange = useCallback((newPosition: TabPosition) => {
@@ -870,7 +880,6 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
         planLoadingStartRef.current = Date.now();
       }
 
-      // eslint-disable-next-line react-hooks/set-state-in-effect
       setShowPlanLoadingScreen(true);
       return;
     }
@@ -1165,16 +1174,27 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
       } else if (action.type === 'open-settings') {
         setSettingsInitialSection(action.sectionId);
         setShowSettings(true);
+      } else if (action.type === 'open-view-mode-settings') {
+        setShowViewModeSettings(true);
       }
     },
     [openTabFromLink, selectTab, setPendingBillsSearchAction, setPendingBillsSearchTargetId, setBillsSearchRequestKey, setPendingLoansSearchAction, setPendingLoansSearchTargetId, setLoansSearchRequestKey, setPendingSavingsSearchAction, setPendingSavingsSearchTargetId, setSavingsSearchRequestKey, setTaxSearchOpenSettingsRequestKey, setShowAccountsModal, setShowSettings, setSettingsInitialSection, setScrollToAccountId, setPendingPaySettingsFieldHighlight, setPaySettingsSearchRequestKey],
   );
 
   const handleOpenViewModeSettings = useCallback(() => {
-    setSettingsInitialSection('app-data-reset');
-    setShowSettings(true);
+    setShowViewModeSettings(true);
   }, []);
 
+  const handleViewModeFavoritesChange = useCallback((newFavorites: SelectableViewMode[]) => {
+    if (!budgetData) return;
+    updateBudgetData({
+      settings: {
+        ...budgetData.settings,
+        viewModeFavorites: newFavorites,
+      },
+    });
+  }, [budgetData, updateBudgetData]);
+
   const handleOpenObjectHistory = useCallback((target: AuditHistoryTarget) => {
     setHistoryTarget(target);
   }, []);
@@ -1632,6 +1652,7 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
           <ViewModeSelector
             mode={displayMode}
             onChange={handleDisplayModeChange}
+            favorites={sanitizeFavoriteViewModes(budgetData.settings.viewModeFavorites)}
             payCadenceMode={getPayFrequencyViewMode(budgetData.paySettings.payFrequency)}
             onOpenViewModeSettings={handleOpenViewModeSettings}
             disabled={activeTab === 'metrics'}
@@ -1949,6 +1970,13 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
         }}
       />
 
+      <ViewModeSettingsModal
+        isOpen={showViewModeSettings}
+        onClose={() => setShowViewModeSettings(false)}
+        favorites={sanitizeFavoriteViewModes(budgetData.settings.viewModeFavorites)}
+        onChange={handleViewModeFavoritesChange}
+      />
+
       {/* Edit Plan Metadata Modal */}
       <Modal
         isOpen={showPlanEditModal}

src/components/_shared/layout/ViewModeSelector/ViewModeSelector.css

@@ -12,6 +12,7 @@
   padding: 0.25rem;
   border-radius: 8px;
   overflow: visible;
+  border: 2px solid var(--border-header-soft);
 }
 
 .view-mode-selector button {

src/components/_shared/layout/ViewModeSelector/ViewModeSelector.tsx

@@ -1,7 +1,6 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { Settings } from 'lucide-react';
-import { APP_CUSTOM_EVENTS } from '../../../../constants/events';
-import { FileStorageService } from '../../../../services/fileStorage';
+import type { SelectableViewMode } from '../../../../types/viewMode';
 import type { ViewMode } from '../../../../types/viewMode';
 import { buildViewModeSelectorOptions, sanitizeFavoriteViewModes } from '../../../../utils/viewModePreferences';
 import { getDisplayModeLabel } from '../../../../utils/payPeriod';
@@ -16,6 +15,8 @@ interface ViewModeSelectorProps<T extends string = ViewMode> {
   mode: T;
   onChange: (mode: T) => void;
   options?: ViewModeOption<T>[];
+  /** Plan-specific favorites; when provided, skips internal app-settings reads. */
+  favorites?: SelectableViewMode[];
   payCadenceMode?: T;
   payCadenceLabel?: string;
   onOpenViewModeSettings?: () => void;
@@ -26,29 +27,13 @@ const ViewModeSelector = <T extends string = ViewMode,>({
   mode,
   onChange,
   options,
+  favorites: favoritesProp,
   payCadenceMode,
   payCadenceLabel = 'Your Pay Frequency',
   onOpenViewModeSettings,
   disabled = false,
 }: ViewModeSelectorProps<T>) => {
-  const [favoriteModes, setFavoriteModes] = useState(() =>
-    sanitizeFavoriteViewModes(FileStorageService.getAppSettings().viewModeFavorites),
-  );
-
-  useEffect(() => {
-    if (options) return;
-
-    const handleFavoritesChanged = () => {
-      setFavoriteModes(
-        sanitizeFavoriteViewModes(FileStorageService.getAppSettings().viewModeFavorites),
-      );
-    };
-
-    window.addEventListener(APP_CUSTOM_EVENTS.viewModeFavoritesChanged, handleFavoritesChanged);
-    return () => {
-      window.removeEventListener(APP_CUSTOM_EVENTS.viewModeFavoritesChanged, handleFavoritesChanged);
-    };
-  }, [options]);
+  const favoriteModes = favoritesProp ?? sanitizeFavoriteViewModes(undefined);
 
   const resolvedOptions = useMemo(() => {
     if (options) {
@@ -59,7 +44,10 @@ const ViewModeSelector = <T extends string = ViewMode,>({
   }, [options, favoriteModes, payCadenceMode]);
 
   const optionsWithCadence = useMemo(() => {
-    if (!payCadenceMode || options) {
+    // Only auto-add cadence tab when the user has not explicitly configured
+    // favorites (favouritesProp absent). When plan-specific favorites are
+    // provided, the user's checkbox selection is the authoritative list.
+    if (!payCadenceMode || options || favoritesProp !== undefined) {
       return resolvedOptions;
     }
 
@@ -74,7 +62,7 @@ const ViewModeSelector = <T extends string = ViewMode,>({
       } as ViewModeOption<T>,
       ...resolvedOptions,
     ];
-  }, [payCadenceMode, options, resolvedOptions]);
+  }, [payCadenceMode, options, favoritesProp, resolvedOptions]);
 
   return (
     <div className="view-mode-selector-wrap">

src/components/modals/PaySettingsModal/PaySettingsModal.tsx

@@ -3,12 +3,15 @@ import { useBudget } from '../../../contexts/BudgetContext';
 import { useAppDialogs } from '../../../hooks';
 import type { BudgetData } from '../../../types/budget';
 import type { PayFrequency } from '../../../types/frequencies';
+import type { SelectableViewMode } from '../../../types/viewMode';
 import type { PaySettings } from '../../../types/payroll';
 import type { AuditHistoryTarget } from '../../../types/audit';
 import { convertBudgetAmounts } from '../../../services/budgetCurrencyConversion';
 import { CURRENCIES, getCurrencySymbol } from '../../../utils/currency';
-import { getPaychecksPerYear } from '../../../utils/payPeriod';
+import { getDisplayModeLabel, getPaychecksPerYear, getPayFrequencyViewMode } from '../../../utils/payPeriod';
 import { normalizeStoredAllocationAmount } from '../../../utils/allocationEditor';
+import { sanitizeFavoriteViewModes, syncFavoritesForCadence } from '../../../utils/viewModePreferences';
+import { APP_CUSTOM_EVENTS } from '../../../constants/events';
 import { formatSuggestedLeftover, getSuggestedLeftoverPerPaycheck } from '../../../utils/paySuggestions';
 import { Modal, Button, ErrorDialog, Dropdown, FormGroup, InputWithPrefix, FormattedNumberInput, RadioGroup } from '../../_shared';
 import '../../_shared/payEditorShared.css';
@@ -248,6 +251,30 @@ const PaySettingsModal: React.FC<PaySettingsModalProps> = ({ isOpen, onClose, se
       };
     }
 
+    // Sync view mode selector favorites when pay frequency changes so the new
+    // cadence tab appears at its canonical position in this plan's selector.
+    if (editPayFrequency !== budgetData.paySettings.payFrequency) {
+      const cadenceMode = getPayFrequencyViewMode(editPayFrequency) as SelectableViewMode;
+      const existingFavorites = sanitizeFavoriteViewModes(updatedBudget.settings.viewModeFavorites);
+      const newFavorites = syncFavoritesForCadence(existingFavorites, cadenceMode);
+      updatedBudget = {
+        ...updatedBudget,
+        settings: {
+          ...updatedBudget.settings,
+          displayMode: cadenceMode,
+          viewModeFavorites: newFavorites ?? existingFavorites,
+        },
+      };
+
+      window.dispatchEvent(
+        new CustomEvent(APP_CUSTOM_EVENTS.viewModeAutoSwitched, {
+          detail: {
+            message: `View mode switched to ${getDisplayModeLabel(cadenceMode)}`,
+          },
+        }),
+      );
+    }
+
     updateBudgetData(updatedBudget);
 
     setFieldErrors({});