converted recent changes dialog to new pattern

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "trilium",
-  "version": "0.52.2",
+  "version": "0.52.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "trilium",
-      "version": "0.52.2",
+      "version": "0.52.3",
       "hasInstallScript": true,
       "license": "AGPL-3.0-only",
       "dependencies": {
@@ -84,7 +84,7 @@
         "lorem-ipsum": "2.0.8",
         "rcedit": "3.0.1",
         "webpack": "5.73.0",
-        "webpack-cli": "4.9.2"
+        "webpack-cli": "4.10.0"
       },
       "optionalDependencies": {
         "electron-installer-debian": "3.1.0"
@@ -1131,9 +1131,9 @@
       }
     },
     "node_modules/@webpack-cli/configtest": {
-      "version": "1.1.1",
+      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.2.0.tgz",
-      "integrity": "sha512-1FBc1f9G4P/AxMqIgfZgeOTuRnwZMten8E7zap5zgpPInnCrP8D4Q81+4CWIch8i/Nf7nXjP0v6CjjbHOrXhKg==",
+      "integrity": "sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==",
       "dev": true,
       "peerDependencies": {
         "webpack": "4.x.x || 5.x.x",
@@ -1141,9 +1141,9 @@
       }
     },
     "node_modules/@webpack-cli/info": {
-      "version": "1.4.1",
+      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.5.0.tgz",
-      "integrity": "sha512-PKVGmazEq3oAo46Q63tpMr4HipI3OPfP7LiNOEJg963RMgT0rqheag28NCML0o3GIzA3DmxP1ZIAv9oTX1CUIA==",
+      "integrity": "sha512-e8tSXZpw2hPl2uMJY6fsMswaok5FdlGNRTktvFk2sD8RjH0hE2+XistawJx1vmKteh4NmGmNUrp+Tb2w+udPcQ==",
       "dev": true,
       "dependencies": {
         "envinfo": "^7.7.3"
@@ -1153,9 +1153,9 @@
       }
     },
     "node_modules/@webpack-cli/serve": {
-      "version": "1.6.1",
+      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.7.0.tgz",
-      "integrity": "sha512-gNGTiTrjEVQ0OcVnzsRSqTxaBSr+dmTfm+qJsCDluky8uhdLWep7Gcr62QsAKHTMxjCS/8nEITsmFAhfIx+QSw==",
+      "integrity": "sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==",
       "dev": true,
       "peerDependencies": {
         "webpack-cli": "4.x.x"
@@ -4679,47 +4679,6 @@
         "node": ">=0.8.x"
       }
     },
-    "node_modules/execa": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-      "dev": true,
-      "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.0",
-        "human-signals": "^2.1.0",
-        "is-stream": "^2.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^4.0.1",
-        "onetime": "^5.1.2",
-        "signal-exit": "^3.0.3",
-        "strip-final-newline": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/execa?sponsor=1"
-      }
-    },
-    "node_modules/execa/node_modules/get-stream": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/execa/node_modules/signal-exit": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.5.tgz",
-      "integrity": "sha512-KWcOiKeQj6ZyXx7zq4YxSMgHRlod4czeBQZrPb8OKcohcqAXShm7E20kEMle9WBt26hFcAf0qLOcp5zmY7kOqQ==",
-      "dev": true
-    },
     "node_modules/exif-parser": {
       "version": "0.1.12",
       "resolved": "https://registry.npmjs.org/exif-parser/-/exif-parser-0.1.12.tgz",
@@ -5868,15 +5827,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/human-signals": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-      "dev": true,
-      "engines": {
-        "node": ">=10.17.0"
-      }
-    },
     "node_modules/humanize-ms": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
@@ -6223,18 +6173,6 @@
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="
     },
-    "node_modules/is-stream": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/is-svg": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-4.3.2.tgz",
@@ -7605,18 +7543,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/npmlog": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
@@ -9469,15 +9395,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/strip-final-newline": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/strip-json-comments": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
@@ -10252,18 +10169,18 @@
       }
     },
     "node_modules/webpack-cli": {
-      "version": "4.9.2",
+      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.9.2.tgz",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.10.0.tgz",
-      "integrity": "sha512-m3/AACnBBzK/kMTcxWHcZFPrw/eQuY4Df1TxvIWfWM2x7mRqBQCqKEd96oCUa9jkapLBaFfRce33eGDb4Pr7YQ==",
+      "integrity": "sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==",
       "dev": true,
       "dependencies": {
         "@discoveryjs/json-ext": "^0.5.0",
-        "@webpack-cli/configtest": "^1.1.1",
+        "@webpack-cli/configtest": "^1.2.0",
-        "@webpack-cli/info": "^1.4.1",
+        "@webpack-cli/info": "^1.5.0",
-        "@webpack-cli/serve": "^1.6.1",
+        "@webpack-cli/serve": "^1.7.0",
         "colorette": "^2.0.14",
         "commander": "^7.0.0",
-        "execa": "^5.0.0",
+        "cross-spawn": "^7.0.3",
         "fastest-levenshtein": "^1.0.12",
         "import-local": "^3.0.2",
         "interpret": "^2.2.0",
@@ -10276,6 +10193,10 @@
       "engines": {
         "node": ">=10.13.0"
       },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
       "peerDependencies": {
         "webpack": "4.x.x || 5.x.x"
       },
@@ -11666,25 +11587,25 @@
       }
     },
     "@webpack-cli/configtest": {
-      "version": "1.1.1",
+      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.2.0.tgz",
-      "integrity": "sha512-1FBc1f9G4P/AxMqIgfZgeOTuRnwZMten8E7zap5zgpPInnCrP8D4Q81+4CWIch8i/Nf7nXjP0v6CjjbHOrXhKg==",
+      "integrity": "sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==",
       "dev": true,
       "requires": {}
     },
     "@webpack-cli/info": {
-      "version": "1.4.1",
+      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.5.0.tgz",
-      "integrity": "sha512-PKVGmazEq3oAo46Q63tpMr4HipI3OPfP7LiNOEJg963RMgT0rqheag28NCML0o3GIzA3DmxP1ZIAv9oTX1CUIA==",
+      "integrity": "sha512-e8tSXZpw2hPl2uMJY6fsMswaok5FdlGNRTktvFk2sD8RjH0hE2+XistawJx1vmKteh4NmGmNUrp+Tb2w+udPcQ==",
       "dev": true,
       "requires": {
         "envinfo": "^7.7.3"
       }
     },
     "@webpack-cli/serve": {
-      "version": "1.6.1",
+      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.7.0.tgz",
-      "integrity": "sha512-gNGTiTrjEVQ0OcVnzsRSqTxaBSr+dmTfm+qJsCDluky8uhdLWep7Gcr62QsAKHTMxjCS/8nEITsmFAhfIx+QSw==",
+      "integrity": "sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==",
       "dev": true,
       "requires": {}
     },
@@ -14391,37 +14312,6 @@
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
       "dev": true
     },
-    "execa": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-      "dev": true,
-      "requires": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.0",
-        "human-signals": "^2.1.0",
-        "is-stream": "^2.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^4.0.1",
-        "onetime": "^5.1.2",
-        "signal-exit": "^3.0.3",
-        "strip-final-newline": "^2.0.0"
-      },
-      "dependencies": {
-        "get-stream": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-          "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-          "dev": true
-        },
-        "signal-exit": {
-          "version": "3.0.5",
-          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.5.tgz",
-          "integrity": "sha512-KWcOiKeQj6ZyXx7zq4YxSMgHRlod4czeBQZrPb8OKcohcqAXShm7E20kEMle9WBt26hFcAf0qLOcp5zmY7kOqQ==",
-          "dev": true
-        }
-      }
-    },
     "exif-parser": {
       "version": "0.1.12",
       "resolved": "https://registry.npmjs.org/exif-parser/-/exif-parser-0.1.12.tgz",
@@ -15319,12 +15209,6 @@
         "debug": "4"
       }
     },
-    "human-signals": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-      "dev": true
-    },
     "humanize-ms": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
@@ -15577,12 +15461,6 @@
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="
     },
-    "is-stream": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-      "dev": true
-    },
     "is-svg": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-4.3.2.tgz",
@@ -16659,15 +16537,6 @@
         }
       }
     },
-    "npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "dev": true,
-      "requires": {
-        "path-key": "^3.0.0"
-      }
-    },
     "npmlog": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
@@ -18111,12 +17980,6 @@
       "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
       "dev": true
     },
-    "strip-final-newline": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
-      "dev": true
-    },
     "strip-json-comments": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
@@ -18709,18 +18572,18 @@
       }
     },
     "webpack-cli": {
-      "version": "4.9.2",
+      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.9.2.tgz",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.10.0.tgz",
-      "integrity": "sha512-m3/AACnBBzK/kMTcxWHcZFPrw/eQuY4Df1TxvIWfWM2x7mRqBQCqKEd96oCUa9jkapLBaFfRce33eGDb4Pr7YQ==",
+      "integrity": "sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==",
       "dev": true,
       "requires": {
         "@discoveryjs/json-ext": "^0.5.0",
-        "@webpack-cli/configtest": "^1.1.1",
+        "@webpack-cli/configtest": "^1.2.0",
-        "@webpack-cli/info": "^1.4.1",
+        "@webpack-cli/info": "^1.5.0",
-        "@webpack-cli/serve": "^1.6.1",
+        "@webpack-cli/serve": "^1.7.0",
         "colorette": "^2.0.14",
         "commander": "^7.0.0",
-        "execa": "^5.0.0",
+        "cross-spawn": "^7.0.3",
         "fastest-levenshtein": "^1.0.12",
         "import-local": "^3.0.2",
         "interpret": "^2.2.0",

package.json

@@ -96,7 +96,7 @@
     "lorem-ipsum": "2.0.8",
     "rcedit": "3.0.1",
     "webpack": "5.73.0",
-    "webpack-cli": "4.9.2"
+    "webpack-cli": "4.10.0"
   },
   "optionalDependencies": {
     "electron-installer-debian": "3.1.0"

src/public/app/dialogs/recent_changes.js

@@ -1,112 +0,0 @@
-import linkService from '../services/link.js';
-import utils from '../services/utils.js';
-import server from '../services/server.js';
-import treeService from "../services/tree.js";
-import froca from "../services/froca.js";
-import appContext from "../services/app_context.js";
-import hoistedNoteService from "../services/hoisted_note.js";
-
-const $dialog = $("#recent-changes-dialog");
-const $content = $("#recent-changes-content");
-
-export async function showDialog(ancestorNoteId) {
-    utils.openDialog($dialog);
-
-    if (!ancestorNoteId) {
-        ancestorNoteId = hoistedNoteService.getHoistedNoteId();
-    }
-
-    const recentChangesRows = await server.get('recent-changes/' + ancestorNoteId);
-
-    // preload all notes into cache
-    await froca.getNotes(recentChangesRows.map(r => r.noteId), true);
-
-    $content.empty();
-
-    if (recentChangesRows.length === 0) {
-        $content.append("No changes yet ...");
-    }
-
-    const groupedByDate = groupByDate(recentChangesRows);
-
-    for (const [dateDay, dayChanges] of groupedByDate) {
-        const $changesList = $('<ul>');
-
-        const dayEl = $('<div>').append($('<b>').text(dateDay)).append($changesList);
-
-        for (const change of dayChanges) {
-            const formattedTime = change.date.substr(11, 5);
-
-            let $noteLink;
-
-            if (change.current_isDeleted) {
-                $noteLink = $("<span>").text(change.current_title);
-
-                if (change.canBeUndeleted) {
-                    const $undeleteLink = $(`<a href="javascript:">`)
-                        .text("undelete")
-                        .on('click', async () => {
-                            const confirmDialog = await import('../dialogs/confirm.js');
-                            const text = 'Do you want to undelete this note and its sub-notes?';
-
-                            if (await confirmDialog.confirm(text)) {
-                                await server.put(`notes/${change.noteId}/undelete`);
-
-                                $dialog.modal('hide');
-
-                                await froca.reloadNotes([change.noteId]);
-
-                                appContext.tabManager.getActiveContext().setNote(change.noteId);
-                            }
-                        });
-
-                    $noteLink
-                        .append(' (')
-                        .append($undeleteLink)
-                        .append(')');
-                }
-            }
-            else {
-                const note = await froca.getNote(change.noteId);
-                const notePath = treeService.getSomeNotePath(note);
-
-                if (notePath) {
-                    $noteLink = await linkService.createNoteLink(notePath, {
-                        title: change.title,
-                        showNotePath: true
-                    });
-                }
-                else {
-                    $noteLink = $("<span>").text(note.title);
-                }
-            }
-
-            $changesList.append($('<li>')
-                .append(
-                    $("<span>")
-                        .text(formattedTime)
-                        .attr("title", change.date)
-                )
-                .append(' - ')
-                .append($noteLink));
-        }
-
-        $content.append(dayEl);
-    }
-}
-
-function groupByDate(rows) {
-    const groupedByDate = new Map();
-
-    for (const row of rows) {
-        const dateDay = row.date.substr(0, 10);
-
-        if (!groupedByDate.has(dateDay)) {
-            groupedByDate.set(dateDay, []);
-        }
-
-        groupedByDate.get(dateDay).push(row);
-    }
-
-    return groupedByDate;
-}

src/public/app/layouts/desktop_layout.js

@@ -54,6 +54,7 @@ import BulkActionsDialog from "../widgets/dialogs/bulk_actions.js";
 import AboutDialog from "../widgets/dialogs/about.js";
 import NoteSourceDialog from "../dialogs/note_source.js";
 import HelpDialog from "../widgets/dialogs/help.js";
+import RecentChangesDialog from "../widgets/dialogs/recent_changes.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -182,6 +183,7 @@ export default class DesktopLayout {
             .child(new BulkActionsDialog())
             .child(new AboutDialog())
             .child(new NoteSourceDialog())
-            .child(new HelpDialog());
+            .child(new HelpDialog())
+            .child(new RecentChangesDialog());
     }
 }

src/public/app/services/root_command_executor.js

@@ -12,10 +12,6 @@ export default class RootCommandExecutor extends Component {
         import("../dialogs/jump_to_note.js").then(d => d.showDialog());
     }
 
-    showRecentChangesCommand() {
-        import("../dialogs/recent_changes.js").then(d => d.showDialog());
-    }
-
     showNoteRevisionsCommand() {
         import("../dialogs/note_revisions.js").then(d => d.showCurrentNoteRevisions());
     }

src/public/app/widgets/dialogs/recent_changes.js

@@ -0,0 +1,136 @@
+import linkService from '../../services/link.js';
+import utils from '../../services/utils.js';
+import server from '../../services/server.js';
+import treeService from "../../services/tree.js";
+import froca from "../../services/froca.js";
+import appContext from "../../services/app_context.js";
+import hoistedNoteService from "../../services/hoisted_note.js";
+import BasicWidget from "../basic_widget.js";
+
+const TPL = `
+<div class="recent-changes-dialog modal fade mx-auto" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Recent changes</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="recent-changes-content"></div>
+            </div>
+        </div>
+    </div>
+</div>`;
+
+export default class RecentChangesDialog extends BasicWidget {
+    doRender() {
+        this.$widget = $(TPL);
+        this.$content = this.$widget.find(".recent-changes-content");
+    }
+
+    async showRecentChangesEvent({ancestorNoteId}) {
+        await this.refresh(ancestorNoteId);
+
+        utils.openDialog(this.$widget);
+    }
+
+    async refresh(ancestorNoteId) {
+        if (!ancestorNoteId) {
+            ancestorNoteId = hoistedNoteService.getHoistedNoteId();
+        }
+
+        const recentChangesRows = await server.get('recent-changes/' + ancestorNoteId);
+
+        // preload all notes into cache
+        await froca.getNotes(recentChangesRows.map(r => r.noteId), true);
+
+        this.$content.empty();
+
+        if (recentChangesRows.length === 0) {
+            this.$content.append("No changes yet ...");
+        }
+
+        const groupedByDate = this.groupByDate(recentChangesRows);
+
+        for (const [dateDay, dayChanges] of groupedByDate) {
+            const $changesList = $('<ul>');
+
+            const dayEl = $('<div>').append($('<b>').text(dateDay)).append($changesList);
+
+            for (const change of dayChanges) {
+                const formattedTime = change.date.substr(11, 5);
+
+                let $noteLink;
+
+                if (change.current_isDeleted) {
+                    $noteLink = $("<span>").text(change.current_title);
+
+                    if (change.canBeUndeleted) {
+                        const $undeleteLink = $(`<a href="javascript:">`)
+                            .text("undelete")
+                            .on('click', async () => {
+                                const confirmDialog = await import('../../dialogs/confirm.js');
+                                const text = 'Do you want to undelete this note and its sub-notes?';
+
+                                if (await confirmDialog.confirm(text)) {
+                                    await server.put(`notes/${change.noteId}/undelete`);
+
+                                    $dialog.modal('hide');
+
+                                    await froca.reloadNotes([change.noteId]);
+
+                                    appContext.tabManager.getActiveContext().setNote(change.noteId);
+                                }
+                            });
+
+                        $noteLink
+                            .append(' (')
+                            .append($undeleteLink)
+                            .append(')');
+                    }
+                } else {
+                    const note = await froca.getNote(change.noteId);
+                    const notePath = treeService.getSomeNotePath(note);
+
+                    if (notePath) {
+                        $noteLink = await linkService.createNoteLink(notePath, {
+                            title: change.title,
+                            showNotePath: true
+                        });
+                    } else {
+                        $noteLink = $("<span>").text(note.title);
+                    }
+                }
+
+                $changesList.append($('<li>')
+                    .append(
+                        $("<span>")
+                            .text(formattedTime)
+                            .attr("title", change.date)
+                    )
+                    .append(' - ')
+                    .append($noteLink));
+            }
+
+            this.$content.append(dayEl);
+        }
+    }
+
+    groupByDate(rows) {
+        const groupedByDate = new Map();
+
+        for (const row of rows) {
+            const dateDay = row.date.substr(0, 10);
+
+            if (!groupedByDate.has(dateDay)) {
+                groupedByDate.set(dateDay, []);
+            }
+
+            groupedByDate.get(dateDay).push(row);
+        }
+
+        return groupedByDate;
+    }
+}

src/public/app/widgets/note_tree.js

@@ -1429,9 +1429,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
     }
 
     async recentChangesInSubtreeCommand({node}) {
-        const recentChangesDialog = await import('../dialogs/recent_changes.js');
+        this.triggerCommand("showRecentChanges", {ancestorNoteId: node.data.noteId});
-
-        recentChangesDialog.showDialog(node.data.noteId);
     }
 
     selectAllNotesInParentCommand({node}) {

src/views/desktop.ejs

@@ -26,7 +26,6 @@
 <%- include('dialogs/note_revisions.ejs') %>
 <%- include('dialogs/options.ejs') %>
 <%- include('dialogs/protected_session_password.ejs') %>
-<%- include('dialogs/recent_changes.ejs') %>
 <%- include('dialogs/info.ejs') %>
 <%- include('dialogs/prompt.ejs') %>
 <%- include('dialogs/confirm.ejs') %>

src/views/dialogs/recent_changes.ejs

@@ -1,15 +0,0 @@
-<div id="recent-changes-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
-    <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">Recent changes</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <div class="modal-body">
-                <div id="recent-changes-content"></div>
-            </div>
-        </div>
-    </div>
-</div>