Move file settings to the file management area

packages/desktop-client/src/browser-preload.browser.js

@@ -151,6 +151,8 @@ global.Actual = {
   setTheme: theme => {
     window.__actionsForMenu.saveGlobalPrefs({ theme });
   },
+
+  moveBudgetDirectory: () => {},
 };
 
 function inputFocused(e) {

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

@@ -41,7 +41,9 @@ import { HoldBufferModal } from './modals/HoldBufferModal';
 import { ImportTransactionsModal } from './modals/ImportTransactionsModal';
 import { KeyboardShortcutModal } from './modals/KeyboardShortcutModal';
 import { LoadBackupModal } from './modals/LoadBackupModal';
+import { ConfirmChangeDocumentDirModal } from './modals/manager/ConfirmChangeDocumentDir';
 import { DeleteFileModal } from './modals/manager/DeleteFileModal';
+import { FilesSettingsModal } from './modals/manager/FilesSettingsModal';
 import { ImportActualModal } from './modals/manager/ImportActualModal';
 import { ImportModal } from './modals/manager/ImportModal';
 import { ImportYNAB4Modal } from './modals/manager/ImportYNAB4Modal';
@@ -573,6 +575,16 @@ export function Modals() {
           return <DeleteFileModal key={name} file={options.file} />;
         case 'import':
           return <ImportModal key={name} />;
+        case 'files-settings':
+          return <FilesSettingsModal key={name} />;
+        case 'confirm-change-document-dir':
+          return (
+            <ConfirmChangeDocumentDirModal
+              key={name}
+              currentBudgetDirectory={options.currentBudgetDirectory}
+              newDirectory={options.newDirectory}
+            />
+          );
         case 'import-ynab4':
           return <ImportYNAB4Modal key={name} />;
         case 'import-ynab5':

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

@@ -66,9 +66,9 @@ export const Information = ({ style, children }: ScopedAlertProps) => {
       color={theme.pageTextLight}
       backgroundColor="transparent"
       style={{
-        ...style,
         boxShadow: 'none',
         padding: 5,
+        ...style,
       }}
     >
       {children}

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

@@ -12,7 +12,10 @@ import {
   loadBudget,
   pushModal,
 } from 'loot-core/client/actions';
-import { isNonProductionEnvironment } from 'loot-core/src/shared/environment';
+import {
+  isElectron,
+  isNonProductionEnvironment,
+} from 'loot-core/src/shared/environment';
 import {
   type File,
   type LocalFile,
@@ -26,6 +29,7 @@ import { AnimatedLoading } from '../../icons/AnimatedLoading';
 import {
   SvgCloudCheck,
   SvgCloudDownload,
+  SvgCog,
   SvgDotsHorizontalTriple,
   SvgFileDouble,
 } from '../../icons/v1';
@@ -324,12 +328,33 @@ function RefreshButton({
   );
 }
 
+function SettingsButton({ onOpenSettings }: { onOpenSettings: () => void }) {
+  const { t } = useTranslation();
+
+  return (
+    <View>
+      <Button
+        variant="bare"
+        aria-label={t('Settings')}
+        onPress={() => {
+          onOpenSettings();
+        }}
+        style={{ padding: 10 }}
+      >
+        <SvgCog style={{ width: 18, height: 18 }} />
+      </Button>
+    </View>
+  );
+}
+
 function BudgetListHeader({
   quickSwitchMode,
   onRefresh,
+  onOpenSettings,
 }: {
   quickSwitchMode: boolean;
   onRefresh: () => void;
+  onOpenSettings: () => void;
 }) {
   return (
     <View
@@ -346,7 +371,17 @@ function BudgetListHeader({
       >
         <Trans>Files</Trans>
       </Text>
-      {!quickSwitchMode && <RefreshButton onRefresh={onRefresh} />}
+      {!quickSwitchMode && (
+        <View
+          style={{
+            flexDirection: 'row',
+            gap: '0.2rem',
+          }}
+        >
+          <RefreshButton onRefresh={onRefresh} />
+          {isElectron() && <SettingsButton onOpenSettings={onOpenSettings} />}
+        </View>
+      )}
     </View>
   );
 }
@@ -425,6 +460,7 @@ export function BudgetList({ showHeader = true, quickSwitchMode = false }) {
         <BudgetListHeader
           quickSwitchMode={quickSwitchMode}
           onRefresh={refresh}
+          onOpenSettings={() => dispatch(pushModal('files-settings'))}
         />
       )}
       <BudgetFiles

packages/desktop-client/src/components/modals/manager/ConfirmChangeDocumentDir.tsx

@@ -0,0 +1,208 @@
+import React, { useCallback, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+
+import { addNotification } from 'loot-core/client/actions';
+
+import { useGlobalPref } from '../../../hooks/useGlobalPref';
+import { theme, styles } from '../../../style';
+import { Information } from '../../alerts';
+import { Button, ButtonWithLoading } from '../../common/Button2';
+import { Modal, ModalCloseButton, ModalHeader } from '../../common/Modal';
+import { Text } from '../../common/Text';
+import { View } from '../../common/View';
+import { Checkbox } from '../../forms';
+
+function DirectoryDisplay({ directory }: { directory: string }) {
+  return (
+    <View style={{ flexDirection: 'row', gap: '0.5rem', width: '100%' }}>
+      <Text
+        title={directory}
+        style={{
+          backgroundColor: theme.pageBackground,
+          padding: '5px 10px',
+          borderRadius: 4,
+          overflow: 'auto',
+          whiteSpace: 'nowrap',
+          width: '100%',
+          ...styles.horizontalScrollbar,
+          '::-webkit-scrollbar': {
+            height: '8px',
+          },
+        }}
+      >
+        {directory}
+      </Text>
+    </View>
+  );
+}
+
+export function ConfirmChangeDocumentDirModal({
+  currentBudgetDirectory,
+  newDirectory,
+}: {
+  currentBudgetDirectory: string;
+  newDirectory: string;
+}) {
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [moveFiles, setMoveFiles] = useState(false);
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  const restartElectronServer = useCallback(() => {
+    globalThis.window.Actual?.restartElectronServer();
+  }, []);
+
+  const [_documentDir, setDocumentDirPref] = useGlobalPref(
+    'documentDir',
+    restartElectronServer,
+  );
+
+  const moveDirectory = async (close: () => void) => {
+    setError('');
+    setLoading(true);
+    try {
+      if (moveFiles) {
+        await globalThis.window.Actual?.moveBudgetDirectory(
+          currentBudgetDirectory,
+          newDirectory,
+        );
+      }
+
+      setDocumentDirPref(newDirectory);
+
+      dispatch(
+        addNotification({
+          type: 'message',
+          message: t('Actual’s data directory successfully changed.'),
+        }),
+      );
+      close();
+    } catch (error) {
+      console.error('There was an error changing your directory', error);
+      setError(
+        t(
+          'There was an error changing your directory, please check the directory and try again.',
+        ),
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Modal name="confirm-change-document-dir">
+      {({ state: { close } }) => (
+        <>
+          <ModalHeader
+            title={t('Are you sure?')}
+            rightContent={<ModalCloseButton onPress={close} />}
+          />
+          <View
+            style={{
+              padding: 15,
+              gap: 15,
+              paddingTop: 0,
+              paddingBottom: 25,
+              maxWidth: 550,
+              lineHeight: '1.5em',
+            }}
+          >
+            <View
+              style={{
+                gap: 15,
+                backgroundColor: theme.pillBackground,
+                alignSelf: 'flex-start',
+                alignItems: 'flex-start',
+                padding: 15,
+                borderRadius: 4,
+                border: '1px solid ' + theme.pillBorderDark,
+                width: '100%',
+              }}
+            >
+              <Text>
+                <Trans>
+                  You are about to change Actual’s data directory from:
+                </Trans>
+              </Text>
+              <DirectoryDisplay directory={currentBudgetDirectory} />
+              <Text>
+                <Trans>To:</Trans>
+              </Text>
+              <DirectoryDisplay directory={newDirectory} />
+              <label
+                htmlFor="moveFiles"
+                style={{
+                  userSelect: 'none',
+                  flexDirection: 'row',
+                  gap: '0.5rem',
+                  display: 'flex',
+                  alignItems: 'center',
+                }}
+              >
+                <Checkbox
+                  id="moveFiles"
+                  name="moveFiles"
+                  checked={moveFiles}
+                  onChange={() => setMoveFiles(!moveFiles)}
+                />
+                <Trans>Move files to new directory</Trans>
+              </label>
+              {moveFiles && (
+                <Information style={{ color: theme.warningText, padding: 0 }}>
+                  <Trans>
+                    Files in the destination folder with the same name will be
+                    overwritten.
+                  </Trans>
+                </Information>
+              )}
+
+              {!moveFiles && (
+                <Information style={{ padding: 0 }}>
+                  <Trans>
+                    Your files won’t be moved. You can manually move them to the
+                    folder.
+                  </Trans>
+                </Information>
+              )}
+
+              {error && <Text style={{ color: theme.errorText }}>{error}</Text>}
+            </View>
+            <View
+              style={{
+                gap: '1rem',
+                flexDirection: 'row',
+                justifyContent: 'center',
+              }}
+            >
+              <Button
+                variant="normal"
+                style={{
+                  padding: '10px 30px',
+                  fontSize: 14,
+                  alignSelf: 'center',
+                }}
+                onPress={close}
+              >
+                <Trans>Cancel</Trans>
+              </Button>
+              <ButtonWithLoading
+                variant="primary"
+                isLoading={loading}
+                style={{
+                  padding: '10px 30px',
+                  fontSize: 14,
+                  alignSelf: 'center',
+                }}
+                onPress={() => moveDirectory(close)}
+              >
+                <Trans>Change Directory</Trans>
+              </ButtonWithLoading>
+            </View>
+          </View>
+        </>
+      )}
+    </Modal>
+  );
+}