Make message dialogs look better

src/main.ts

@@ -141,7 +141,8 @@ async function initializeApp() {
     if (config.mode == "dev") {
         dialog.showMessageBoxSync({
             title: `Cyd Dev ${app.getVersion()}`,
-            message: `You're running Cyd ${app.getVersion()}. It uses the dev server and it might contain bugs.`,
+            message: `You're running Cyd ${app.getVersion()}.`,
+            detail: 'It uses the dev server and it might contain bugs.',
             type: 'info',
         });
     }
@@ -157,7 +158,8 @@ async function initializeApp() {
     else if (config.mode == "open") {
         dialog.showMessageBoxSync({
             title: `Cyd ${app.getVersion()}`,
-            message: `You're running Cyd ${app.getVersion()} in open mode.\n\nThis is intended for use by open source developers. If you're not contributing to Cyd, please support the project by paying for a Premium plan.`,
+            message: `You're running Cyd ${app.getVersion()} in open mode.`,
+            detail: "This is intended for use by open source developers. If you're not contributing to Cyd, please support the project by paying for a Premium plan.",
             type: 'info',
         });
     }
@@ -278,7 +280,8 @@ async function createWindow() {
                     const updateAvailable = () => {
                         dialog.showMessageBoxSync({
                             title: "Cyd",
-                            message: `An update is available and is downloading in the background. You will be prompted to install it once it's ready.`,
+                            message: 'An update is available and is downloading in the background.',
+                            detail: "You will be prompted to install it once it's ready.",
                             type: 'info',
                         });
                         autoUpdater.off('update-available', updateAvailable);
@@ -320,7 +323,8 @@ async function createWindow() {
                     // Linux updates are done through the package manager
                     dialog.showMessageBoxSync({
                         title: "Cyd",
-                        message: `You are running Cyd ${app.getVersion()}.\n\nInstall updates with your Linux package manager to make sure you're on the latest version.`,
+                        message: `You are running Cyd ${app.getVersion()}.`,
+                        detail: "Install updates with your Linux package manager to make sure you're on the latest version.",
                         type: 'info',
                     });
                 }
@@ -385,13 +389,17 @@ async function createWindow() {
             }
         });
 
-        ipcMain.handle('showMessage', async (_, message: string) => {
+        ipcMain.handle('showMessage', async (_, message: string, detail: string) => {
             try {
-                dialog.showMessageBoxSync({
+                const opts: Electron.MessageBoxSyncOptions = {
                     title: "Cyd",
                     message: message,
                     type: 'info',
-                });
+                }
+                if (detail) {
+                    opts.detail = detail;
+                }
+                dialog.showMessageBoxSync(opts);
             } catch (error) {
                 throw new Error(packageExceptionForReport(error as Error));
             }

src/preload.ts

@@ -42,8 +42,8 @@ contextBridge.exposeInMainWorld('electron', {
     shouldOpenDevtools: (): Promise<boolean> => {
         return ipcRenderer.invoke('shouldOpenDevtools')
     },
-    showMessage: (message: string) => {
-        ipcRenderer.invoke('showMessage', message)
+    showMessage: (message: string, detail: string) => {
+        ipcRenderer.invoke('showMessage', message, detail)
     },
     showError: (message: string) => {
         ipcRenderer.invoke('showError', message)

src/renderer/src/main.ts

@@ -37,7 +37,7 @@ declare global {
             getDashURL: () => Promise<string>;
             trackEvent: (eventName: string, userAgent: string) => Promise<string>;
             shouldOpenDevtools: () => Promise<boolean>;
-            showMessage: (message: string) => void;
+            showMessage: (message: string, detail: string) => void;
             showError: (message: string) => void;
             showQuestion: (message: string, trueText: string, falseText: string) => Promise<boolean>;
             showOpenDialog: (selectFolders: boolean, selectFiles: boolean, fileFilters: FileFilter[] | undefined) => Promise<string | null>;

src/renderer/src/views/x/AccountXView.vue

@@ -215,7 +215,7 @@ const updateUserPremium = async () => {
     if (resp && 'error' in resp === false) {
         userPremiumResp = resp;
     } else {
-        await window.electron.showMessage("Failed to check if you have Premium access. Please try again later.");
+        await window.electron.showMessage("Failed to check if you have Premium access.", "Please try again later.");
         return;
     }
     userPremium.value = userPremiumResp.premium_access;