Remove the count indicator from toasts (#31718)

res/css/structures/_ToastContainer.pcss

@@ -78,13 +78,6 @@ Please see LICENSE files in the repository root for full details.
                 display: inline;
                 width: auto;
             }
-
-            .mx_Toast_title_countIndicator {
-                font-size: $font-12px;
-                line-height: $font-22px;
-                color: $secondary-content;
-                margin-inline-start: auto; /* on the end side of the div */
-            }
         }
 
         .mx_Toast_body {

src/components/structures/ToastContainer.tsx

@@ -15,7 +15,6 @@ import ToastStore, { type IToast } from "../../stores/ToastStore";
 
 interface IState {
     toasts: IToast<any>[];
-    countSeen: number;
 }
 
 export default class ToastContainer extends React.Component<EmptyObject, IState> {
@@ -23,7 +22,6 @@ export default class ToastContainer extends React.Component<EmptyObject, IState>
         super(props);
         this.state = {
             toasts: ToastStore.sharedInstance().getToasts(),
-            countSeen: ToastStore.sharedInstance().getCountSeen(),
         };
     }
 
@@ -39,7 +37,6 @@ export default class ToastContainer extends React.Component<EmptyObject, IState>
     private onToastStoreUpdate = (): void => {
         this.setState({
             toasts: ToastStore.sharedInstance().getToasts(),
-            countSeen: ToastStore.sharedInstance().getCountSeen(),
         });
     };
 
@@ -61,11 +58,6 @@ export default class ToastContainer extends React.Component<EmptyObject, IState>
             });
             const content = React.createElement(component, toastProps);
 
-            let countIndicator;
-            if ((title && isStacked) || this.state.countSeen > 0) {
-                countIndicator = ` (${this.state.countSeen + 1}/${this.state.countSeen + totalCount})`;
-            }
-
             let titleElement;
             if (title) {
                 titleElement = (
@@ -73,7 +65,6 @@ export default class ToastContainer extends React.Component<EmptyObject, IState>
                         <Text size="lg" weight="semibold" as="h2">
                             {title}
                         </Text>
-                        <span className="mx_Toast_title_countIndicator">{countIndicator}</span>
                     </div>
                 );
             }

src/stores/ToastStore.ts

@@ -30,9 +30,6 @@ export interface IToast<C extends ComponentClass> {
  */
 export default class ToastStore extends EventEmitter {
     private toasts: IToast<any>[] = [];
-    // The count of toasts which have been seen & dealt with in this stack
-    // where the count resets when the stack of toasts clears.
-    private countSeen = 0;
 
     public static sharedInstance(): ToastStore {
         if (!window.mxToastStore) window.mxToastStore = new ToastStore();
@@ -41,7 +38,6 @@ export default class ToastStore extends EventEmitter {
 
     public reset(): void {
         this.toasts = [];
-        this.countSeen = 0;
     }
 
     /**
@@ -68,18 +64,10 @@ export default class ToastStore extends EventEmitter {
     }
 
     public dismissToast(key: string): void {
-        if (this.toasts[0] && this.toasts[0].key === key) {
-            this.countSeen++;
-        }
-
         const length = this.toasts.length;
         this.toasts = this.toasts.filter((t) => t.key !== key);
         if (length !== this.toasts.length) {
             logger.info(`Removed toast with key '${key}'`);
-            if (this.toasts.length === 0) {
-                this.countSeen = 0;
-            }
-
             this.emit("update");
         }
     }
@@ -87,8 +75,4 @@ export default class ToastStore extends EventEmitter {
     public getToasts(): IToast<any>[] {
         return this.toasts;
     }
-
-    public getCountSeen(): number {
-        return this.countSeen;
-    }
 }

test/unit-tests/stores/ToastStore-test.ts

@@ -71,7 +71,6 @@ describe("ToastStore", () => {
 
             store.dismissToast("whatever");
 
-            expect(store.getCountSeen()).toEqual(0);
             expect(emitSpy).not.toHaveBeenCalled();
         });
 
@@ -85,43 +84,13 @@ describe("ToastStore", () => {
 
             store.dismissToast(toastA.key);
 
-            expect(store.getCountSeen()).toEqual(0);
             expect(emitSpy).toHaveBeenCalledWith("update");
             expect(store.getToasts()).toEqual([toastB]);
         });
-
-        it("increments countSeen when toast has bottom priority", () => {
-            const store = new ToastStore();
-            const toastA = makeToast(1, "a");
-            const toastB = makeToast(3, "b");
-            const toastC = makeToast(99, "c");
-            store.addOrReplaceToast(toastA);
-            store.addOrReplaceToast(toastC);
-            store.addOrReplaceToast(toastB);
-            const emitSpy = jest.spyOn(store, "emit");
-
-            store.dismissToast(toastC.key);
-
-            expect(store.getCountSeen()).toEqual(1);
-            expect(emitSpy).toHaveBeenCalledWith("update");
-        });
-
-        it("resets countSeen when no toasts remain", () => {
-            const store = new ToastStore();
-            const toastA = makeToast(1, "a");
-            const toastB = makeToast(3, "b");
-            store.addOrReplaceToast(toastA);
-            store.addOrReplaceToast(toastB);
-
-            store.dismissToast(toastB.key);
-            expect(store.getCountSeen()).toEqual(1);
-            store.dismissToast(toastA.key);
-            expect(store.getCountSeen()).toEqual(0);
-        });
     });
 
     describe("reset()", () => {
-        it("clears countseen and toasts", () => {
+        it("clears toasts", () => {
             const store = new ToastStore();
             const toastA = makeToast(1, "a");
             const toastB = makeToast(3, "b");
@@ -131,7 +100,6 @@ describe("ToastStore", () => {
             store.dismissToast(toastB.key);
 
             store.reset();
-            expect(store.getCountSeen()).toEqual(0);
             expect(store.getToasts()).toEqual([]);
         });
     });

test/unit-tests/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap

@@ -30,9 +30,6 @@ exports[`UnverifiedSessionToast when rendering the toast should render as expect
           >
             New login. Was this you?
           </h2>
-          <span
-            class="mx_Toast_title_countIndicator"
-          />
         </div>
         <div
           class="mx_Toast_body"