[WIP] v24.10.1

packages/api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actual-app/api",
-  "version": "24.10.0",
+  "version": "24.10.1",
   "license": "MIT",
   "description": "An API for Actual",
   "engines": {

packages/desktop-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actual-app/web",
-  "version": "24.10.0",
+  "version": "24.10.1",
   "license": "MIT",
   "files": [
     "build"

packages/desktop-client/src/components/manager/BudgetList.tsx

@@ -78,24 +78,8 @@ function FileMenu({
   const { t } = useTranslation();
 
   const items = [{ name: 'delete', text: t('Delete') }];
-  const { isNarrowWidth } = useResponsive();
-
-  const defaultMenuItemStyle = isNarrowWidth
-    ? {
-        ...styles.mobileMenuItem,
-        color: theme.menuItemText,
-        borderRadius: 0,
-        borderTop: `1px solid ${theme.pillBorder}`,
-      }
-    : {};
 
-  return (
-    <Menu
-      getItemStyle={() => defaultMenuItemStyle}
-      onMenuSelect={onMenuSelect}
-      items={items}
-    />
-  );
+  return <Menu onMenuSelect={onMenuSelect} items={items} />;
 }
 
 function FileMenuButton({ onDelete }: { onDelete: () => void }) {
@@ -202,50 +186,60 @@ function FileItem({
   }
 
   return (
-    <View
-      onClick={() => _onSelect(file)}
-      title={getFileDescription(file, t) || ''}
+    <Button
+      onPress={() => _onSelect(file)}
       style={{
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
         ...styles.shadow,
         margin: 10,
         padding: '12px 15px',
-        backgroundColor: theme.buttonNormalBackground,
-        borderRadius: 6,
-        flexShrink: 0,
         cursor: 'pointer',
-        ':hover': {
-          backgroundColor: theme.menuItemBackgroundHover,
-        },
+        borderRadius: 6,
+        borderColor: 'transparent',
       }}
     >
-      <View style={{ alignItems: 'flex-start' }}>
-        <Text style={{ fontSize: 16, fontWeight: 700 }}>{file.name}</Text>
-
-        <FileState file={file} />
-      </View>
-
       <View
-        style={{ flex: '0 0 auto', flexDirection: 'row', alignItems: 'center' }}
+        style={{
+          flexDirection: 'row',
+          flex: 1,
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}
       >
-        {file.encryptKeyId && (
-          <SvgKey
-            style={{
-              width: 13,
-              height: 13,
-              marginRight: 8,
-              color: file.hasKey
-                ? theme.formLabelText
-                : theme.buttonNormalDisabledText,
-            }}
-          />
-        )}
+        <View
+          title={getFileDescription(file, t) || ''}
+          style={{ alignItems: 'flex-start' }}
+        >
+          <Text style={{ fontSize: 16, fontWeight: 700 }}>{file.name}</Text>
+
+          <FileState file={file} />
+        </View>
+
+        <View
+          style={{
+            flex: '0 0 auto',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}
+        >
+          {file.encryptKeyId && (
+            <SvgKey
+              style={{
+                width: 13,
+                height: 13,
+                marginRight: 8,
+                color: file.hasKey
+                  ? theme.formLabelText
+                  : theme.buttonNormalDisabledText,
+              }}
+            />
+          )}
 
-        {!quickSwitchMode && <FileMenuButton onDelete={() => onDelete(file)} />}
+          {!quickSwitchMode && (
+            <FileMenuButton onDelete={() => onDelete(file)} />
+          )}
+        </View>
       </View>
-    </View>
+    </Button>
   );
 }
 

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

@@ -81,7 +81,7 @@ export function EnvelopeBudgetMenuModal({
                 fontWeight: 400,
               }}
             >
-              Budget
+              Budgeted
             </Text>
             <FocusableAmountInput
               value={integerToAmount(budgeted || 0)}

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

@@ -81,7 +81,7 @@ export function TrackingBudgetMenuModal({
                 fontWeight: 400,
               }}
             >
-              Budget
+              Budgeted
             </Text>
             <FocusableAmountInput
               value={integerToAmount(budgeted || 0)}

packages/desktop-client/src/components/reports/Overview.tsx

@@ -82,16 +82,26 @@ export function Overview() {
   const isDashboardsFeatureEnabled = useFeatureFlag('dashboards');
   const spendingReportFeatureFlag = useFeatureFlag('spendingReport');
 
-  const baseLayout = widgets.map(widget => ({
-    i: widget.id,
-    w: widget.width,
-    h: widget.height,
-    minW:
-      isCustomReportWidget(widget) || widget.type === 'markdown-card' ? 2 : 3,
-    minH:
-      isCustomReportWidget(widget) || widget.type === 'markdown-card' ? 1 : 2,
-    ...widget,
-  }));
+  const baseLayout = widgets
+    .map(widget => ({
+      i: widget.id,
+      w: widget.width,
+      h: widget.height,
+      minW:
+        isCustomReportWidget(widget) || widget.type === 'markdown-card' ? 2 : 3,
+      minH:
+        isCustomReportWidget(widget) || widget.type === 'markdown-card' ? 1 : 2,
+      ...widget,
+    }))
+    .filter(item => {
+      if (isDashboardsFeatureEnabled) {
+        return true;
+      }
+      if (item.type === 'custom-report' && !customReportMap.has(item.meta.id)) {
+        return false;
+      }
+      return true;
+    });
 
   const layout =
     spendingReportFeatureFlag &&

packages/desktop-client/src/hooks/useSyncedPref.ts

@@ -1,8 +1,8 @@
 import { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 
-import { useQuery } from 'loot-core/client/query-hooks';
-import { send } from 'loot-core/platform/client/fetch';
-import { q } from 'loot-core/shared/query';
+import { saveSyncedPrefs } from 'loot-core/client/actions';
+import { type State } from 'loot-core/client/state-types';
 import { type SyncedPrefs } from 'loot-core/src/types/prefs';
 
 type SetSyncedPrefAction<K extends keyof SyncedPrefs> = (
@@ -12,21 +12,14 @@ type SetSyncedPrefAction<K extends keyof SyncedPrefs> = (
 export function useSyncedPref<K extends keyof SyncedPrefs>(
   prefName: K,
 ): [SyncedPrefs[K], SetSyncedPrefAction<K>] {
-  const { data: queryData, overrideData: setQueryData } = useQuery<
-    [{ value: string | undefined }]
-  >(
-    () => q('preferences').filter({ id: prefName }).select('value'),
-    [prefName],
-  );
-
-  const setLocalPref = useCallback<SetSyncedPrefAction<K>>(
-    newValue => {
-      const value = String(newValue);
-      setQueryData([{ value }]);
-      send('preferences/save', { id: prefName, value });
+  const dispatch = useDispatch();
+  const setPref = useCallback<SetSyncedPrefAction<K>>(
+    value => {
+      dispatch(saveSyncedPrefs({ [prefName]: value }));
     },
-    [prefName, setQueryData],
+    [prefName, dispatch],
   );
+  const pref = useSelector((state: State) => state.prefs.synced[prefName]);
 
-  return [queryData?.[0]?.value, setLocalPref];
+  return [pref, setPref];
 }

packages/desktop-client/src/hooks/useSyncedPrefs.ts

@@ -1,39 +1,22 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 
-import { useQuery } from 'loot-core/client/query-hooks';
-import { send } from 'loot-core/platform/client/fetch';
-import { q } from 'loot-core/shared/query';
+import { saveSyncedPrefs } from 'loot-core/client/actions';
+import { type State } from 'loot-core/client/state-types';
 import { type SyncedPrefs } from 'loot-core/src/types/prefs';
 
 type SetSyncedPrefsAction = (value: Partial<SyncedPrefs>) => void;
 
 /** @deprecated: please use `useSyncedPref` (singular) */
 export function useSyncedPrefs(): [SyncedPrefs, SetSyncedPrefsAction] {
-  const { data: queryData } = useQuery<{ id: string; value: string }[]>(
-    () => q('preferences').select(['id', 'value']),
-    [],
+  const dispatch = useDispatch();
+  const setPrefs = useCallback<SetSyncedPrefsAction>(
+    newValue => {
+      dispatch(saveSyncedPrefs(newValue));
+    },
+    [dispatch],
   );
-
-  const prefs = useMemo<SyncedPrefs>(
-    () =>
-      (queryData ?? []).reduce(
-        (carry, { id, value }) => ({
-          ...carry,
-          [id]: value,
-        }),
-        {},
-      ),
-    [queryData],
-  );
-
-  const setPrefs = useCallback<SetSyncedPrefsAction>(newValue => {
-    Object.entries(newValue).forEach(([id, value]) => {
-      send('preferences/save', {
-        id: id as keyof SyncedPrefs,
-        value: String(value),
-      });
-    });
-  }, []);
+  const prefs = useSelector((state: State) => state.prefs.synced);
 
   return [prefs, setPrefs];
 }

packages/desktop-electron/package.json

@@ -3,7 +3,7 @@
   "author": "Actual",
   "productName": "Actual",
   "description": "A simple and powerful personal finance system",
-  "version": "24.10.0",
+  "version": "24.10.1",
   "scripts": {
     "clean": "rm -rf dist",
     "update-client": "bin/update-client",

packages/loot-core/src/client/actions/prefs.ts

@@ -1,5 +1,9 @@
 import { send } from '../../platform/client/fetch';
-import { type GlobalPrefs, type MetadataPrefs } from '../../types/prefs';
+import {
+  type GlobalPrefs,
+  type MetadataPrefs,
+  type SyncedPrefs,
+} from '../../types/prefs';
 import * as constants from '../constants';
 
 import { closeModal } from './modals';
@@ -19,6 +23,7 @@ export function loadPrefs() {
       type: constants.SET_PREFS,
       prefs,
       globalPrefs: await send('load-global-prefs'),
+      syncedPrefs: await send('preferences/get'),
     });
 
     return prefs;
@@ -42,6 +47,7 @@ export function loadGlobalPrefs() {
       type: constants.SET_PREFS,
       prefs: getState().prefs.local,
       globalPrefs,
+      syncedPrefs: getState().prefs.synced,
     });
     return globalPrefs;
   };
@@ -60,3 +66,20 @@ export function saveGlobalPrefs(
     onSaveGlobalPrefs?.();
   };
 }
+
+export function saveSyncedPrefs(prefs: SyncedPrefs) {
+  return async (dispatch: Dispatch) => {
+    await Promise.all(
+      Object.entries(prefs).map(([prefName, value]) =>
+        send('preferences/save', {
+          id: prefName as keyof SyncedPrefs,
+          value,
+        }),
+      ),
+    );
+    dispatch({
+      type: constants.MERGE_SYNCED_PREFS,
+      syncedPrefs: prefs,
+    });
+  };
+}

packages/loot-core/src/client/actions/sync.ts

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { send } from '../../platform/client/fetch';
 import { getUploadError } from '../../shared/errors';
 
@@ -32,7 +31,6 @@ export function resetSync() {
       }
     } else {
       await dispatch(sync());
-      await dispatch(loadPrefs());
     }
   };
 }
@@ -45,8 +43,12 @@ export function sync() {
       if ('error' in result) {
         return { error: result.error };
       }
-      return {};
+
+      // Update the prefs
+      await dispatch(loadPrefs());
     }
+
+    return {};
   };
 }
 

packages/loot-core/src/client/constants.ts

@@ -10,6 +10,7 @@ export const LOAD_PAYEES = 'LOAD_PAYEES';
 export const SET_PREFS = 'SET_PREFS';
 export const MERGE_LOCAL_PREFS = 'MERGE_LOCAL_PREFS';
 export const MERGE_GLOBAL_PREFS = 'MERGE_GLOBAL_PREFS';
+export const MERGE_SYNCED_PREFS = 'MERGE_SYNCED_PREFS';
 export const SET_BUDGETS = 'SET_BUDGETS';
 export const SET_REMOTE_FILES = 'SET_REMOTE_FILES';
 export const SET_ALL_FILES = 'SET_ALL_FILES';