download: Show in-app notification on downlaoding a file.

Fixes #1371.
We do not accept a filePath from the web app when recieving the event to
show the file in a folder, since that could introduce securithy
vulnerabilies.

We instead keep the list of latest 50 downloaded files in memory and
give each filePath a unique downloadId that can be passed around between
the webapp and the desktop app.

Author: shubham-padia

app/common/typed-ipc.ts

@@ -13,6 +13,7 @@ export type MainMessage = {
   "realm-icon-changed": (serverURL: string, iconURL: string) => void;
   "realm-name-changed": (serverURL: string, realmName: string) => void;
   "reload-full-app": () => void;
+  "show-downloaded-file-in-folder": (downloadId: string) => void;
   "save-last-tab": (index: number) => void;
   "switch-server-tab": (index: number) => void;
   "toggle-app": () => void;
@@ -59,6 +60,11 @@ export type RendererMessage = {
   "reload-proxy": (showAlert: boolean) => void;
   "reload-viewer": () => void;
   "render-taskbar-icon": (messageCount: number) => void;
+  "show-download-success": (
+    title: string,
+    description: string,
+    downloadId: string,
+  ) => void;
   "set-active": () => void;
   "set-idle": () => void;
   "show-keyboard-shortcuts": () => void;

app/main/handle-external-link.ts

@@ -6,6 +6,7 @@ import {
   type WebContents,
   app,
 } from "electron/main";
+import {randomBytes} from "node:crypto";
 import fs from "node:fs";
 import path from "node:path";
 
@@ -15,6 +16,37 @@ import * as t from "../common/translation-util.ts";
 
 import {send} from "./typed-ipc-main.ts";
 
+const maxTrackedDownloads = 50;
+
+type DownloadedFileRecord = {
+  id: string;
+  filePath: string;
+};
+
+const downloadedFiles = new Map<string, DownloadedFileRecord>();
+const downloadOrder: string[] = [];
+
+function trackDownloadedFile(filePath: string): DownloadedFileRecord {
+  const record: DownloadedFileRecord = {
+    id: randomBytes(16).toString("hex"),
+    filePath,
+  };
+
+  downloadedFiles.set(record.id, record);
+  downloadOrder.push(record.id);
+
+  if (downloadOrder.length > maxTrackedDownloads) {
+    const oldestId = downloadOrder.shift()!;
+    downloadedFiles.delete(oldestId);
+  }
+
+  return record;
+}
+
+export function getDownloadedFilePath(downloadId: string): string | undefined {
+  return downloadedFiles.get(downloadId)?.filePath;
+}
+
 function isUploadsUrl(server: string, url: URL): boolean {
   return url.origin === server && url.pathname.startsWith("/user_uploads/");
 }
@@ -125,16 +157,34 @@ export default function handleExternalLink(
       url: url.href,
       downloadPath,
       async completed(filePath: string, fileName: string) {
+        const notificationTitle = t.__("Download complete");
+        const notificationBody = t.__(
+          "Click to view the folder where the file ({{{fileName}}}) was downloaded.",
+          {
+            fileName,
+          },
+        );
+        // Show native notification
         const downloadNotification = new Notification({
-          title: t.__("Download Complete"),
-          body: t.__("Click to show {{{fileName}}} in folder", {fileName}),
+          title: notificationTitle,
+          body: notificationBody,
           silent: true, // We'll play our own sound - ding.ogg
         });
         downloadNotification.on("click", () => {
           // Reveal file in download folder
           shell.showItemInFolder(filePath);
         });
         downloadNotification.show();
+        const {id: downloadId} = trackDownloadedFile(filePath);
+        // Event to show in-app notification in addition to the native
+        // notification.
+        send(
+          contents,
+          "show-download-success",
+          notificationTitle,
+          notificationBody,
+          downloadId,
+        );
 
         // Play sound to indicate download complete
         if (!ConfigUtil.getConfigItem("silent", false)) {
@@ -150,7 +200,7 @@ export default function handleExternalLink(
         if (state !== "cancelled") {
           if (ConfigUtil.getConfigItem("promptDownload", false)) {
             new Notification({
-              title: t.__("Download Complete"),
+              title: t.__("Download complete"),
               body: t.__("Download failed"),
             }).show();
           } else {

app/main/index.ts

@@ -1,4 +1,4 @@
-import {clipboard} from "electron/common";
+import {clipboard, shell} from "electron/common";
 import {
   BrowserWindow,
   type IpcMainEvent,
@@ -25,7 +25,9 @@ import type {MenuProperties} from "../common/types.ts";
 
 import {appUpdater, shouldQuitForUpdate} from "./autoupdater.ts";
 import * as BadgeSettings from "./badge-settings.ts";
-import handleExternalLink from "./handle-external-link.ts";
+import handleExternalLink, {
+  getDownloadedFilePath,
+} from "./handle-external-link.ts";
 import * as AppMenu from "./menu.ts";
 import {_getServerSettings, _isOnline, _saveServerIcon} from "./request.ts";
 import {sentryInit} from "./sentry.ts";
@@ -452,6 +454,13 @@ function createMainWindow(): BrowserWindow {
     },
   );
 
+  ipcMain.on("show-downloaded-file-in-folder", (_event, downloadId: string) => {
+    const filePath = getDownloadedFilePath(downloadId);
+    if (filePath !== undefined) {
+      shell.showItemInFolder(filePath);
+    }
+  });
+
   ipcMain.on("save-last-tab", (_event, index: number) => {
     ConfigUtil.setConfigItem("lastActiveTab", index);
   });

app/renderer/js/electron-bridge.ts

@@ -103,6 +103,13 @@ bridgeEvents.addEventListener("realm_icon_url", (event) => {
   );
 });
 
+bridgeEvents.addEventListener("show-downloaded-file-in-folder", (event) => {
+  const [downloadId] = z
+    .tuple([z.string()])
+    .parse(z.instanceof(BridgeEvent).parse(event).arguments_);
+  ipcRenderer.send("show-downloaded-file-in-folder", downloadId);
+});
+
 // Set user as active and update the time of last activity
 ipcRenderer.on("set-active", () => {
   idle = false;

app/renderer/js/preload.ts

@@ -18,6 +18,19 @@ ipcRenderer.on("show-notification-settings", () => {
   bridgeEvents.dispatchEvent(new BridgeEvent("show-notification-settings"));
 });
 
+ipcRenderer.on(
+  "show-download-success",
+  (_event, title: string, description: string, downloadId: string) => {
+    bridgeEvents.dispatchEvent(
+      new BridgeEvent("show-download-success", [
+        title,
+        description,
+        downloadId,
+      ]),
+    );
+  },
+);
+
 window.addEventListener("load", () => {
   if (!location.href.includes("app/renderer/network.html")) {
     return;