Merge branch 'master' into matiss/fix-2711

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

@@ -14,6 +14,7 @@ import { useSyncServerStatus } from '../hooks/useSyncServerStatus';
 import { ModalTitle } from './common/Modal';
 import { AccountAutocompleteModal } from './modals/AccountAutocompleteModal';
 import { AccountMenuModal } from './modals/AccountMenuModal';
+import { BudgetListModal } from './modals/BudgetListModal';
 import { BudgetPageMenuModal } from './modals/BudgetPageMenuModal';
 import { CategoryAutocompleteModal } from './modals/CategoryAutocompleteModal';
 import { CategoryGroupMenuModal } from './modals/CategoryGroupMenuModal';
@@ -609,6 +610,7 @@ export function Modals() {
               modalProps={modalProps}
               onAddCategoryGroup={options.onAddCategoryGroup}
               onToggleHiddenCategories={options.onToggleHiddenCategories}
+              onSwitchBudgetFile={options.onSwitchBudgetFile}
               onSwitchBudgetType={options.onSwitchBudgetType}
             />
           );
@@ -643,6 +645,9 @@ export function Modals() {
             </NamespaceContext.Provider>
           );
 
+        case 'budget-list':
+          return <BudgetListModal key={name} modalProps={modalProps} />;
+
         default:
           console.error('Unknown modal:', name);
           return null;

packages/desktop-client/src/components/accounts/Account.jsx

@@ -448,7 +448,7 @@ class AccountInternal extends PureComponent {
         filters: [
           {
             name: 'Financial Files',
-            extensions: ['qif', 'ofx', 'qfx', 'csv', 'tsv'],
+            extensions: ['qif', 'ofx', 'qfx', 'csv', 'tsv', 'xml'],
           },
         ],
       });

packages/desktop-client/src/components/filters/FiltersButton.tsx

@@ -1,15 +1,12 @@
 import React from 'react';
 
-import { SvgSettingsSliderAlternate } from '../../icons/v2';
+import { SvgFilter } from '../../icons/v1/Filter';
 import { Button } from '../common/Button';
 
 export function FiltersButton({ onClick }: { onClick: () => void }) {
   return (
     <Button type="bare" onClick={onClick} title="Filters">
-      <SvgSettingsSliderAlternate
-        style={{ width: 16, height: 16, marginRight: 5 }}
-      />{' '}
-      Filter
+      <SvgFilter style={{ width: 12, height: 12, marginRight: 5 }} /> Filter
     </Button>
   );
 }

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

@@ -2,6 +2,8 @@ import React, { useState, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import {
+  closeAndDownloadBudget,
+  closeAndLoadBudget,
   createBudget,
   downloadBudget,
   getUserData,
@@ -11,6 +13,8 @@ import {
 } from 'loot-core/client/actions';
 import { isNonProductionEnvironment } from 'loot-core/src/shared/environment';
 
+import { useInitialMount } from '../../hooks/useInitialMount';
+import { useLocalPref } from '../../hooks/useLocalPref';
 import { AnimatedLoading } from '../../icons/AnimatedLoading';
 import {
   SvgCloudCheck,
@@ -59,11 +63,27 @@ function FileMenu({ onDelete, onClose }) {
   }
 
   const items = [{ name: 'delete', text: 'Delete' }];
+  const { isNarrowWidth } = useResponsive();
+
+  const defaultMenuItemStyle = isNarrowWidth
+    ? {
+        ...styles.mobileMenuItem,
+        color: theme.menuItemText,
+        borderRadius: 0,
+        borderTop: `1px solid ${theme.pillBorder}`,
+      }
+    : {};
 
-  return <Menu onMenuSelect={onMenuSelect} items={items} />;
+  return (
+    <Menu
+      getItemStyle={() => defaultMenuItemStyle}
+      onMenuSelect={onMenuSelect}
+      items={items}
+    />
+  );
 }
 
-function DetailButton({ state, onDelete }) {
+function FileMenuButton({ state, onDelete }) {
   const [menuOpen, setMenuOpen] = useState(false);
 
   return (
@@ -143,7 +163,7 @@ function FileState({ file }) {
   );
 }
 
-function File({ file, onSelect, onDelete }) {
+function File({ file, quickSwitchMode, onSelect, onDelete }) {
   const selecting = useRef(false);
 
   async function _onSelect(file) {
@@ -198,13 +218,15 @@ function File({ file, onSelect, onDelete }) {
           />
         )}
 
-        <DetailButton state={file.state} onDelete={() => onDelete(file)} />
+        {!quickSwitchMode && (
+          <FileMenuButton state={file.state} onDelete={() => onDelete(file)} />
+        )}
       </View>
     </View>
   );
 }
 
-function BudgetTable({ files, onSelect, onDelete }) {
+function BudgetFiles({ files, quickSwitchMode, onSelect, onDelete }) {
   return (
     <View
       style={{
@@ -217,19 +239,32 @@ function BudgetTable({ files, onSelect, onDelete }) {
         '& *': { userSelect: 'none' },
       }}
     >
-      {files.map(file => (
-        <File
-          key={file.id || file.cloudFileId}
-          file={file}
-          onSelect={onSelect}
-          onDelete={onDelete}
-        />
-      ))}
+      {!files || files.length === 0 ? (
+        <Text
+          style={{
+            ...styles.mediumText,
+            textAlign: 'center',
+            color: theme.pageTextSubdued,
+          }}
+        >
+          No budget files
+        </Text>
+      ) : (
+        files.map(file => (
+          <File
+            key={file.id || file.cloudFileId}
+            file={file}
+            quickSwitchMode={quickSwitchMode}
+            onSelect={onSelect}
+            onDelete={onDelete}
+          />
+        ))
+      )}
     </View>
   );
 }
 
-function RefreshButton({ onRefresh }) {
+function RefreshButton({ style, onRefresh }) {
   const [loading, setLoading] = useState(false);
 
   async function _onRefresh() {
@@ -244,17 +279,42 @@ function RefreshButton({ onRefresh }) {
     <Button
       type="bare"
       aria-label="Refresh"
-      style={{ padding: 10, marginRight: 5 }}
+      style={{ padding: 10, ...style }}
       onClick={_onRefresh}
     >
       <Icon style={{ width: 18, height: 18 }} />
     </Button>
   );
 }
 
-export function BudgetList() {
-  const files = useSelector(state => state.budgets.allFiles || []);
+function BudgetListHeader({ quickSwitchMode, onRefresh }) {
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        margin: 20,
+      }}
+    >
+      <Text
+        style={{
+          ...styles.veryLargeText,
+        }}
+      >
+        Files
+      </Text>
+      {!quickSwitchMode && <RefreshButton onRefresh={onRefresh} />}
+    </View>
+  );
+}
+
+export function BudgetList({ showHeader = true, quickSwitchMode = false }) {
   const dispatch = useDispatch();
+  const allFiles = useSelector(state => state.budgets.allFiles || []);
+  const [id] = useLocalPref('id');
+
+  const files = id ? allFiles.filter(f => f.id !== id) : allFiles;
+
   const [creating, setCreating] = useState(false);
   const { isNarrowWidth } = useResponsive();
   const narrowButtonStyle = isNarrowWidth
@@ -270,87 +330,107 @@ export function BudgetList() {
     }
   };
 
+  const refresh = () => {
+    dispatch(getUserData());
+    dispatch(loadAllFiles());
+  };
+
+  const initialMount = useInitialMount();
+  if (initialMount && quickSwitchMode) {
+    refresh();
+  }
+
   return (
     <View
       style={{
         flex: 1,
         justifyContent: 'center',
-        marginInline: -20,
-        marginTop: 20,
-        width: '100vw',
+        ...(!quickSwitchMode && {
+          marginTop: 20,
+          width: '100vw',
+        }),
         [`@media (min-width: ${tokens.breakpoint_small})`]: {
           maxWidth: tokens.breakpoint_small,
           width: '100%',
         },
       }}
     >
-      <View>
-        <Text style={{ ...styles.veryLargeText, margin: 20 }}>Files</Text>
-        <View
-          style={{
-            position: 'absolute',
-            right: 0,
-            top: 0,
-            bottom: 0,
-            justifyContent: 'center',
-            marginRight: 5,
-          }}
-        >
-          <RefreshButton
-            onRefresh={() => {
-              dispatch(getUserData());
-              dispatch(loadAllFiles());
-            }}
-          />
-        </View>
-      </View>
-      <BudgetTable
+      {showHeader && (
+        <BudgetListHeader
+          quickSwitchMode={quickSwitchMode}
+          onRefresh={refresh}
+        />
+      )}
+      <BudgetFiles
         files={files}
+        quickSwitchMode={quickSwitchMode}
         onSelect={file => {
-          if (file.state === 'remote') {
-            dispatch(downloadBudget(file.cloudFileId));
-          } else {
-            dispatch(loadBudget(file.id, `Loading ${file.name}...`));
+          if (!id) {
+            if (file.state === 'remote') {
+              dispatch(downloadBudget(file.cloudFileId));
+            } else {
+              dispatch(loadBudget(file.id));
+            }
+          } else if (file.id !== id) {
+            if (file.state === 'remote') {
+              dispatch(closeAndDownloadBudget(file.cloudFileId));
+            } else {
+              dispatch(closeAndLoadBudget(file.id));
+            }
           }
         }}
         onDelete={file => dispatch(pushModal('delete-budget', { file }))}
       />
-      <View
-        style={{
-          flexDirection: 'row',
-          justifyContent: 'flex-end',
-          padding: 25,
-          gap: 15,
-        }}
-      >
-        <Button
-          type="bare"
+      {!quickSwitchMode && (
+        <View
           style={{
-            ...narrowButtonStyle,
-            color: theme.pageTextLight,
-          }}
-          onClick={() => {
-            dispatch(pushModal('import'));
+            flexDirection: 'row',
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+            padding: 25,
           }}
         >
-          Import file
-        </Button>
-
-        <Button type="primary" onClick={onCreate} style={narrowButtonStyle}>
-          Create new file
-        </Button>
+          <Button
+            type="bare"
+            style={{
+              ...narrowButtonStyle,
+              marginLeft: 10,
+              color: theme.pageTextLight,
+            }}
+            onClick={e => {
+              e.preventDefault();
+              dispatch(pushModal('import'));
+            }}
+          >
+            Import file
+          </Button>
 
-        {isNonProductionEnvironment() && (
           <Button
             type="primary"
-            isSubmit={false}
-            onClick={() => onCreate({ testMode: true })}
-            style={narrowButtonStyle}
+            onClick={onCreate}
+            style={{
+              ...narrowButtonStyle,
+              marginLeft: 10,
+            }}
           >
-            Create test file
+            Create new file
           </Button>
-        )}
-      </View>
+
+          {isNonProductionEnvironment() && (
+            <Button
+              type="primary"
+              isSubmit={false}
+              onClick={() => onCreate({ testMode: true })}
+              style={{
+                ...narrowButtonStyle,
+                marginLeft: 10,
+              }}
+            >
+              Create test file
+            </Button>
+          )}
+        </View>
+      )}
     </View>
   );
 }

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

@@ -388,6 +388,10 @@ function BudgetInner(props: BudgetInnerProps) {
     );
   };
 
+  const onSwitchBudgetFile = () => {
+    dispatch(pushModal('budget-list'));
+  };
+
   const onOpenBudgetMonthMenu = month => {
     dispatch(
       pushModal(`${budgetType}-budget-month-menu`, {
@@ -403,6 +407,7 @@ function BudgetInner(props: BudgetInnerProps) {
       pushModal('budget-page-menu', {
         onAddCategoryGroup: onOpenNewCategoryGroupModal,
         onToggleHiddenCategories,
+        onSwitchBudgetFile,
         onSwitchBudgetType: onOpenSwitchBudgetTypeModal,
       }),
     );