feat(desktop): add setting to change backups storage location

apps/web/desktop/ipc/actions/saveFile.js

@@ -1,23 +1,14 @@
-const { app } = require("electron");
 const fs = require("fs");
 const path = require("path");
 const { logger } = require("../../logger");
+const { resolvePath } = require("../utils");
 
 module.exports = (args) => {
   try {
     const { data, filePath } = args;
     if (!data || !filePath) return;
 
-    const resolvedPath = path.join(
-      ...filePath.split("/").map((segment) => {
-        let resolved = segment;
-        try {
-          resolved = app.getPath(resolved);
-        } finally {
-          return resolved;
-        }
-      })
-    );
+    const resolvedPath = resolvePath(filePath);
 
     logger.info("Saving file to", resolvedPath);
 

apps/web/desktop/ipc/calls/index.js

@@ -1,7 +1,9 @@
 const getZoomFactor = require("./getZoomFactor");
+const selectDirectory = require("./selectDirectory");
 
 const calls = {
   getZoomFactor,
+  selectDirectory,
 };
 
 module.exports.getCall = function getAction(callName) {

apps/web/desktop/ipc/calls/selectDirectory.js

@@ -0,0 +1,14 @@
+const { dialog } = require("electron");
+const { resolvePath } = require("../utils");
+
+module.exports = function (args, win) {
+  const { title, buttonLabel, defaultPath } = args;
+
+  const paths = dialog.showOpenDialogSync(win, {
+    title,
+    buttonLabel,
+    properties: ["openDirectory"],
+    defaultPath: resolvePath(defaultPath),
+  });
+  return !paths ? undefined : paths[0];
+};

apps/web/desktop/ipc/utils.js

@@ -1,4 +1,6 @@
 const { logger } = require("../logger");
+const { app } = require("electron");
+const path = require("path");
 
 function sendMessageToRenderer(type, payload = {}) {
   const message = { type, ...payload };
@@ -6,4 +8,17 @@ function sendMessageToRenderer(type, payload = {}) {
   global.win.webContents.send("fromMain", message);
 }
 
-module.exports = { sendMessageToRenderer };
+function resolvePath(_path) {
+  return path.join(
+    ..._path.split("/").map((segment) => {
+      let resolved = segment;
+      try {
+        resolved = app.getPath(resolved);
+      } finally {
+        return resolved;
+      }
+    })
+  );
+}
+
+module.exports = { resolvePath, sendMessageToRenderer };

apps/web/desktop/preload.js

@@ -29,3 +29,14 @@ contextBridge.exposeInMainWorld("config", {
     return ipcRenderer.callMain("fromRenderer", { type: "getZoomFactor" });
   },
 });
+
+contextBridge.exposeInMainWorld("native", {
+  selectDirectory: ({ title, buttonLabel, defaultPath }) => {
+    return ipcRenderer.callMain("fromRenderer", {
+      type: "selectDirectory",
+      title,
+      buttonLabel,
+      defaultPath,
+    });
+  },
+});

apps/web/src/common/reminders.js

@@ -73,7 +73,11 @@ export async function resetReminders() {
   if (await shouldAddBackupReminder()) {
     if (isDesktop()) {
       const { data, filename, ext } = await createBackup(false);
-      saveFile(`${PATHS.backupsDirectory}/${filename}.${ext}`, data);
+      const directory = Config.get(
+        "backupStorageLocation",
+        PATHS.backupsDirectory
+      );
+      saveFile(`${directory}/${filename}.${ext}`, data);
     } else {
       appStore.addReminder("backup", "high");
     }

apps/web/src/components/tip/index.js

@@ -4,7 +4,11 @@ function TextWithTip({ text, tip, sx, color }) {
   return (
     <Text color={color || "text"} fontSize="body" sx={sx}>
       {text}
-      <Text color={"fontTertiary"} fontSize="subBody">
+      <Text
+        color={"fontTertiary"}
+        fontSize="subBody"
+        sx={{ wordBreak: "break-all", whiteSpace: "pre-wrap" }}
+      >
         {tip}
       </Text>
     </Text>

apps/web/src/views/settings.js

@@ -34,6 +34,7 @@ import { isUserPremium } from "../hooks/use-is-user-premium";
 import { Slider } from "@rebass/forms";
 import useZoomFactor from "../hooks/use-zoom-factor";
 import debounce from "just-debounce";
+import { PATHS } from "@notesnook/desktop/paths";
 
 function importBackup() {
   return new Promise((resolve, reject) => {
@@ -152,6 +153,10 @@ function Settings(props) {
     0
   );
   const [homepage, setHomepage] = usePersistentState("homepage", 0);
+  const [backupStorageLocation, setBackupStorageLocation] = usePersistentState(
+    "backupStorageLocation",
+    PATHS.backupsDirectory
+  );
   const [enableTelemetry, setEnableTelemetry] = usePersistentState(
     "telemetry",
     true
@@ -469,6 +474,26 @@ function Settings(props) {
                 setBackupReminderOffset(index)
               }
             />
+            {isDesktop() && !!backupReminderOffset ? (
+              <Button
+                key={"backupLocation"}
+                variant="list"
+                onClick={async () => {
+                  const location = await window.native.selectDirectory({
+                    title: "Select where Notesnook should save backups",
+                    defaultPath:
+                      backupStorageLocation || PATHS.backupsDirectory,
+                  });
+                  if (!location) return;
+                  setBackupStorageLocation(location);
+                }}
+              >
+                <Tip
+                  text={"Change backups storage location"}
+                  tip={backupStorageLocation}
+                />
+              </Button>
+            ) : null}
           </>
         )}