Refactor toast notifications into event-driven toast-alert component

apps/pwabuilder/Frontend/src/app-index.styles.ts

@@ -0,0 +1,91 @@
+import { css } from 'lit';
+
+/**
+ * Styles for the <app-index> root component: the router outlet transitions,
+ * page layout wrapper, sidebar/main grid, and the fixed toast stack.
+ */
+export const appIndexStyles = css`
+      #router-outlet > * {
+        width: 100% !important;
+      }
+
+      #router-outlet > .leaving {
+        animation: 160ms fadeOut ease-in-out;
+      }
+
+      #router-outlet > .entering {
+        animation: 160ms fadeIn linear;
+      }
+
+      #router-outlet {
+        position: relative;
+      }
+
+      #wrapper {
+        display: flex;
+        min-height: 100vh;
+        flex-direction: column;
+      }
+
+      #content {
+        flex: 1;
+        background-color: rgb(242, 243, 251);
+      }
+
+      @media (min-width: 1920px) {
+        #router-outlet {
+          background: var(--primary-purple);
+        }
+      }
+
+      @keyframes fadeOut {
+        from {
+          opacity: 1;
+        }
+
+        to {
+          opacity: 0;
+        }
+      }
+
+      @keyframes fadeIn {
+        from {
+          opacity: 0.2;
+        }
+
+        to {
+          opacity: 1;
+        }
+      }
+      /* To handle sidebar & main */
+      .container {
+        display: grid;
+        grid-template-columns: minmax(280px, auto);
+        grid-template-areas: 'sidebar main';
+        margin: 0 auto;
+        height: 100%;
+        position: relative;
+      }
+      .container > .main {
+        width: calc(100vw - 280px);
+        grid-area: main;
+      }
+      .container > .sidebar {
+        grid-area: sidebar;
+      }
+
+      /* Fixed-position container that stacks toasts in the top-right corner.
+         pointer-events are disabled here so only the toasts themselves are
+         interactive, letting clicks pass through the empty stack area. */
+      .toast-stack {
+        position: fixed;
+        top: 1rem;
+        inset-inline-end: 1rem;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        z-index: 1000;
+        max-width: min(28rem, calc(100vw - 2rem));
+        pointer-events: none;
+      }
+    `;

apps/pwabuilder/Frontend/src/app-index.ts

@@ -1,91 +1,30 @@
 import './webawesome';
-import { LitElement, css, html } from 'lit';
+import { LitElement, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { Router, Route } from '@vaadin/router';
 
 import './script/components/app-footer';
 import './script/components/app-button';
 //import './script/components/cookie-banner';
 import './script/components/discord-box';
+import './script/components/toast-alert';
+import { ToastEvent, SHOW_TOAST_EVENT_NAME } from './script/models/toast-event';
 import { recordPageView, storeQueryParam } from './script/utils/analytics';
+import { appIndexStyles } from './app-index.styles';
 
 @customElement('app-index')
 export class AppIndex extends LitElement {
 
     @state() pageName: string = '';
 
-    static get styles() {
-        return css`
-      #router-outlet > * {
-        width: 100% !important;
-      }
-
-      #router-outlet > .leaving {
-        animation: 160ms fadeOut ease-in-out;
-      }
-
-      #router-outlet > .entering {
-        animation: 160ms fadeIn linear;
-      }
-
-      #router-outlet {
-        position: relative;
-      }
-
-      #wrapper {
-        display: flex;
-        min-height: 100vh;
-        flex-direction: column;
-      }
-
-      #content {
-        flex: 1;
-        background-color: rgb(242, 243, 251);
-      }
-
-      @media (min-width: 1920px) {
-        #router-outlet {
-          background: var(--primary-purple);
-        }
-      }
-
-      @keyframes fadeOut {
-        from {
-          opacity: 1;
-        }
+    // Active toasts rendered in the top-right stack, each paired with a unique
+    // id so they can be individually removed once dismissed.
+    @state() private toasts: Array<{ id: number; toast: ToastEvent }> = [];
 
-        to {
-          opacity: 0;
-        }
-      }
+    // Monotonic counter used to give each toast a stable key for removal.
+    private toastCounter = 0;
 
-      @keyframes fadeIn {
-        from {
-          opacity: 0.2;
-        }
-
-        to {
-          opacity: 1;
-        }
-      }
-      /* To handle sidebar & main */
-      .container {
-        display: grid;
-        grid-template-columns: minmax(280px, auto);
-        grid-template-areas: 'sidebar main';
-        margin: 0 auto;
-        height: 100%;
-        position: relative;
-      }
-      .container > .main {
-        width: calc(100vw - 280px);
-        grid-area: main;
-      }
-      .container > .sidebar {
-        grid-area: sidebar;
-      }
-    `;
-    }
+    static styles = [appIndexStyles];
 
     constructor() {
         super();
@@ -106,14 +45,27 @@ export class AppIndex extends LitElement {
         super.connectedCallback();
         window.addEventListener('DOMContentLoaded', this.handlePageChange);
         window.addEventListener('popstate', this.handlePageChange);
+        window.addEventListener(SHOW_TOAST_EVENT_NAME, this.handleShowToast);
     }
 
     disconnectedCallback() {
         window.removeEventListener('DOMContentLoaded', this.handlePageChange);
         window.removeEventListener('popstate', this.handlePageChange);
+        window.removeEventListener(SHOW_TOAST_EVENT_NAME, this.handleShowToast);
         super.disconnectedCallback();
     }
 
+    // Adds a toast to the stack when a "show-toast" event is dispatched.
+    private handleShowToast = (event: WindowEventMap[typeof SHOW_TOAST_EVENT_NAME]) => {
+        const id = this.toastCounter++;
+        this.toasts = [...this.toasts, { id, toast: event.detail }];
+    };
+
+    // Removes a toast from the stack once it has been dismissed.
+    private removeToast(id: number) {
+        this.toasts = this.toasts.filter(entry => entry.id !== id);
+    }
+
     handlePageChange = () => {
 
         var urlObj = new URL(location.href);
@@ -213,17 +165,24 @@ export class AppIndex extends LitElement {
 
     render() {
         return html`
-      <div id="wrapper">
-        <!-- cookie banner not required so long as we only have essential cookies -->
-        <!-- <cookie-banner></cookie-banner> -->
-
-        <main id="content">
-          <div id="router-outlet"></div>
-        </main>
-        ${this.pageName === "congratulations" ? null : html`<discord-box></discord-box>`}
-        <app-footer></app-footer>
-      </div>
-
-    `;
+            <div id="wrapper">
+                <!-- cookie banner not required so long as we only have essential cookies -->
+                <!-- <cookie-banner></cookie-banner> -->
+
+                <main id="content">
+                <div id="router-outlet"></div>
+                </main>
+                ${this.pageName === "congratulations" ? null : html`<discord-box></discord-box>`}
+                <app-footer></app-footer>
+            </div>
+
+            <div class="toast-stack">
+                ${this.toasts.map(({ id, toast }) => html`
+                <toast-alert
+                    .toast=${toast}
+                    @toast-dismiss=${() => this.removeToast(id)}></toast-alert>
+                `)}
+            </div>
+        `;
     }
 }

apps/pwabuilder/Frontend/src/script/components/android-form.styles.ts

@@ -39,7 +39,6 @@ export const androidFormStyles = css`
 	#form-layout {
 		flex-grow: 1;
 		display: flex;
-		overflow: auto;
 		flex-direction: column;
 	}
 

apps/pwabuilder/Frontend/src/script/components/app-package-form-base.styles.ts

@@ -31,7 +31,6 @@ export const appPackageFormBaseStyles = css`
 	}
 
 	#form-layout {
-		overflow-y: auto;
 		padding: 0em 1.5em 0 1em;
 	}
 

apps/pwabuilder/Frontend/src/script/components/ios-form.styles.ts

@@ -28,7 +28,6 @@ export const iosFormStyles = css`
 	#form-layout {
 		flex-grow: 1;
 		display: flex;
-		overflow: auto;
 		flex-direction: column;
 	}
 

apps/pwabuilder/Frontend/src/script/components/publish-pane.styles.ts

@@ -315,6 +315,7 @@ export const publishPaneStyles = css`
 		width: 100%;
 		overflow: auto;
 		position: relative;
+        padding-top: 12px;
 	}
 
 	#form-area[data-store="Android"] {

apps/pwabuilder/Frontend/src/script/components/publish-pane.ts

@@ -8,7 +8,7 @@ import {
 } from '../utils/analytics';
 import { getURL } from '../services/app-info';
 import { generatePackage, Platform } from '../services/publish';
-import { showToast } from '../services/toasts';
+import { showToast } from '../services/toast-service';
 
 
 import './windows-form';
@@ -341,7 +341,7 @@ export class PublishPane extends LitElement {
 
         if (err.message === "Failed to fetch") {
             title = err.message;
-            quick_desc = "Our service was unable to package your PWA.";
+            quick_desc = `We couldn't package your PWA for the store`;
             hyperlinkText = "Open an issue on GitHub";
             hyperlinkUrl = "https://github.com/pwa-builder/PWABuilder/issues/new/choose";
             stack_trace += "No stack trace available";
@@ -373,7 +373,7 @@ export class PublishPane extends LitElement {
         }
         // Show the error as a toast (rendered outside the publish pane) and close
         // the dialog so the message isn't hidden behind / overlapping the pane.
-        showToast(title || "Error generating package", quick_desc, "danger", "exclamation-octagon", 10000, "rtl", hyperlinkText, hyperlinkUrl);
+        showToast({ title: title || "Error generating package", details: quick_desc, variant: "danger", icon: "exclamation-octagon", countdown: true, hyperlinkText, hyperlinkUrl });
         console.error("Error generating package", { title, quick_desc, stack_trace });
         this.closePane();
     }