[WIP] Add privacy filter for mobile/small screens

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

@@ -21,6 +21,7 @@ import { useAccounts } from '../hooks/useAccounts';
 import { useLocalPref } from '../hooks/useLocalPref';
 import { useMetaThemeColor } from '../hooks/useMetaThemeColor';
 import { useNavigate } from '../hooks/useNavigate';
+import { useSyncedPref } from '../hooks/useSyncedPref';
 import { useSelector, useDispatch } from '../redux';
 import { theme } from '../style';
 import { getIsOutdated, getLatestVersion } from '../util/versions';
@@ -84,12 +85,67 @@ function RouterBehaviors() {
   return null;
 }
 
+function checkForShake(isNarrowWidth, isPrivacyEnabled, setPrivacyEnabledPref) {
+  if (!isNarrowWidth) {
+    return;
+  }
+
+  let lastX = null,
+    lastY = null,
+    lastZ = null;
+  const shakeThreshold = 15;
+  let timeout = 0;
+
+  const handler = event => {
+    const { x, y, z } = event.accelerationIncludingGravity;
+    timeout = Math.max(0, timeout - event.interval);
+
+    if (timeout === 0) {
+      if (!x || !y || !z) return;
+
+      if (lastX !== null && lastY !== null && lastZ !== null) {
+        const deltaX = Math.abs(lastX - x);
+        const deltaY = Math.abs(lastY - y);
+        const deltaZ = Math.abs(lastZ - z);
+
+        if (
+          deltaX > shakeThreshold ||
+          deltaY > shakeThreshold ||
+          deltaZ > shakeThreshold
+        ) {
+          isPrivacyEnabled = !isPrivacyEnabled;
+          setPrivacyEnabledPref(String(isPrivacyEnabled));
+          timeout = 1000;
+        }
+      }
+    }
+
+    lastX = x;
+    lastY = y;
+    lastZ = z;
+  };
+
+  window.addEventListener('devicemotion', handler);
+  return () => window.removeEventListener('devicemotion', handler);
+}
+
 export function FinancesApp() {
   const { isNarrowWidth } = useResponsive();
   useMetaThemeColor(isNarrowWidth ? theme.mobileViewTheme : null);
 
   const dispatch = useDispatch();
   const { t } = useTranslation();
+  const [isPrivacyEnabledPref, setPrivacyEnabledPref] =
+    useSyncedPref('isPrivacyEnabled');
+  useEffect(
+    () =>
+      checkForShake(
+        isNarrowWidth,
+        isPrivacyEnabledPref === 'true',
+        setPrivacyEnabledPref,
+      ),
+    [isNarrowWidth, isPrivacyEnabledPref],
+  );
 
   const accounts = useAccounts();
   const accountsLoaded = useSelector(state => state.queries.accountsLoaded);

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

@@ -570,6 +570,7 @@ export function Modals() {
               onAddCategoryGroup={options.onAddCategoryGroup}
               onToggleHiddenCategories={options.onToggleHiddenCategories}
               onSwitchBudgetFile={options.onSwitchBudgetFile}
+              onTogglePrivacyMode={options.onTogglePrivacyMode}
             />
           );
 

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

@@ -10,8 +10,6 @@ import { css } from '@emotion/css';
 
 import { usePrivacyMode } from '../hooks/usePrivacyMode';
 
-import { useResponsive } from './responsive/ResponsiveProvider';
-
 type ConditionalPrivacyFilterProps = {
   children: ReactNode;
   privacyFilter?: boolean | PrivacyFilterProps;
@@ -51,11 +49,8 @@ export function PrivacyFilter({
   ...props
 }: PrivacyFilterProps) {
   const privacyMode = usePrivacyMode();
-  // Limit mobile support for now.
-  const { isNarrowWidth } = useResponsive();
   const activate =
     privacyMode &&
-    !isNarrowWidth &&
     (!activationFilters ||
       activationFilters.every(value =>
         typeof value === 'boolean' ? value : value(),

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

@@ -70,6 +70,7 @@ type PrivacyButtonProps = {
 };
 
 function PrivacyButton({ style }: PrivacyButtonProps) {
+  const { t } = useTranslation();
   const [isPrivacyEnabledPref, setPrivacyEnabledPref] =
     useSyncedPref('isPrivacyEnabled');
   const isPrivacyEnabled = String(isPrivacyEnabledPref) === 'true';
@@ -91,7 +92,9 @@ function PrivacyButton({ style }: PrivacyButtonProps) {
   return (
     <Button
       variant="bare"
-      aria-label={`${isPrivacyEnabled ? 'Disable' : 'Enable'} privacy mode`}
+      aria-label={
+        isPrivacyEnabled ? t('Disable privacy mode') : t('Enable privacy mode')
+      }
       onPress={() => setPrivacyEnabledPref(String(!isPrivacyEnabled))}
       style={style}
     >

packages/desktop-client/src/components/mobile/budget/index.tsx

@@ -436,6 +436,14 @@ export function Budget() {
     [dispatch, onSaveNotes],
   );
 
+  const [isPrivacyEnabled, setPrivacyEnabledPref] =
+    useSyncedPref('isPrivacyEnabled');
+
+  const onTogglePrivacyMode = useCallback(() => {
+    setPrivacyEnabledPref(String(isPrivacyEnabled !== 'true'));
+    dispatch(collapseModals('budget-page-menu'));
+  }, [dispatch, isPrivacyEnabled, setPrivacyEnabledPref]);
+
   const onSwitchBudgetFile = useCallback(() => {
     dispatch(pushModal('budget-list'));
   }, [dispatch]);
@@ -462,13 +470,15 @@ export function Budget() {
         onAddCategoryGroup: onOpenNewCategoryGroupModal,
         onToggleHiddenCategories,
         onSwitchBudgetFile,
+        onTogglePrivacyMode,
       }),
     );
   }, [
     dispatch,
     onOpenNewCategoryGroupModal,
     onSwitchBudgetFile,
     onToggleHiddenCategories,
+    onTogglePrivacyMode,
   ]);
 
   if (!categoryGroups || !initialized) {

packages/desktop-client/src/components/mobile/transactions/TransactionListItem.tsx

@@ -39,6 +39,7 @@ import {
 import { useSelector } from '../../../redux';
 import { theme } from '../../../style';
 import { makeAmountFullStyle } from '../../budget/util';
+import { PrivacyFilter } from '../../PrivacyFilter';
 
 import { lookupName, Status } from './TransactionEdit';
 
@@ -278,14 +279,16 @@ export function TransactionListItem({
                 )}
               </View>
               <View style={{ justifyContent: 'center' }}>
-                <Text
-                  style={{
-                    ...textStyle,
-                    ...makeAmountFullStyle(amount),
-                  }}
-                >
-                  {integerToCurrency(amount)}
-                </Text>
+                <PrivacyFilter>
+                  <Text
+                    style={{
+                      ...textStyle,
+                      ...makeAmountFullStyle(amount),
+                    }}
+                  >
+                    {integerToCurrency(amount)}
+                  </Text>
+                </PrivacyFilter>
               </View>
             </View>
           </Button>

packages/desktop-client/src/components/modals/BudgetPageMenuModal.tsx

@@ -8,6 +8,7 @@ import { Menu } from '@actual-app/components/menu';
 import { styles } from '@actual-app/components/styles';
 
 import { useLocalPref } from '../../hooks/useLocalPref';
+import { useSyncedPref } from '../../hooks/useSyncedPref';
 import { theme } from '../../style';
 import { Modal, ModalCloseButton, ModalHeader } from '../common/Modal';
 
@@ -17,6 +18,7 @@ export function BudgetPageMenuModal({
   onAddCategoryGroup,
   onToggleHiddenCategories,
   onSwitchBudgetFile,
+  onTogglePrivacyMode,
 }: BudgetPageMenuModalProps) {
   const defaultMenuItemStyle: CSSProperties = {
     ...styles.mobileMenuItem,
@@ -38,6 +40,7 @@ export function BudgetPageMenuModal({
             onAddCategoryGroup={onAddCategoryGroup}
             onToggleHiddenCategories={onToggleHiddenCategories}
             onSwitchBudgetFile={onSwitchBudgetFile}
+            onTogglePrivacyMode={onTogglePrivacyMode}
           />
         </>
       )}
@@ -52,15 +55,18 @@ type BudgetPageMenuProps = Omit<
   onAddCategoryGroup: () => void;
   onToggleHiddenCategories: () => void;
   onSwitchBudgetFile: () => void;
+  onTogglePrivacyMode: () => void;
 };
 
 function BudgetPageMenu({
   onAddCategoryGroup,
   onToggleHiddenCategories,
   onSwitchBudgetFile,
+  onTogglePrivacyMode,
   ...props
 }: BudgetPageMenuProps) {
   const [showHiddenCategories] = useLocalPref('budget.showHiddenCategories');
+  const [isPrivacyEnabled] = useSyncedPref('isPrivacyEnabled');
 
   const onMenuSelect = (name: string) => {
     switch (name) {
@@ -76,6 +82,9 @@ function BudgetPageMenu({
       case 'switch-budget-file':
         onSwitchBudgetFile?.();
         break;
+      case 'toggle-privacy-filter':
+        onTogglePrivacyMode?.();
+        break;
       default:
         throw new Error(`Unrecognized menu item: ${name}`);
     }
@@ -95,6 +104,13 @@ function BudgetPageMenu({
           name: 'toggle-hidden-categories',
           text: `${!showHiddenCategories ? t('Show hidden categories') : t('Hide hidden categories')}`,
         },
+        {
+          name: 'toggle-privacy-filter',
+          text:
+            isPrivacyEnabled === 'true'
+              ? t('Disable privacy mode')
+              : t('Enable privacy mode'),
+        },
         {
           name: 'switch-budget-file',
           text: t('Switch budget file'),

packages/loot-core/src/client/state-types/modals.d.ts

@@ -303,6 +303,7 @@ type FinanceModals = {
     onAddCategoryGroup: () => void;
     onToggleHiddenCategories: () => void;
     onSwitchBudgetFile: () => void;
+    onTogglePrivacyMode: () => void;
   };
   'envelope-budget-month-menu': {
     month: string;

upcoming-release-notes/4510.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [rugulous]
+---
+
+Enable the privacy filter option on mobile/small screen devices