Add banner configurable via module API

[maheichyk]

Type: Enhancement
Related: https://github.com/matrix-org/matrix-react-sdk-module-api

This PR suggests to add possibility to configure a banner at the top of Element that is configurable via module API.

This could be used to show custom menu, widget toggle buttons or other information that makes sense in custom fork deployments.

There is no module API for that currently but could look like this:

export enum BannerLifecycle {
    Banner = "banner",
}

export type BannerOpts = {
    banner: JSX.Element | undefined;
};

export type BannerListener = (opts: BannerOpts) => void;

Module demo that shows simply button in the banner:

protected onBanner: BannerListener = (opts) => {
    opts.banner = <button>Custom Menu</button>;
};

And look the following:

Checklist

• Tests written for new code (and old code if feasible)
• Linter and other CI checks pass
• Sign-off given on the changes (see CONTRIBUTING.md)

---

Here's what your changelog entry will look like:

✨ Features

• Add banner configurable via module API (#10321). Contributed by @maheichyk.

[maheichyk]

Would be great to hear some feedback on this proposal.

[maheichyk]

Could you please provide some feedback on this proposal?

[germain-gg]

From a technical point of view, I believe this can be a bit leaner as the HTML structure already exists and could be re-used.

We would need a test validating that a banner can be injected in the page too

But more importantly this requires a product review

[germain-gg]

From an implementation point of view, I don't think we would need to add a wrapper as the banner could be slotted as a sibling of the MatrixChat and the parent section id="matrixchat" is a flex container that applies the same CSS that you declared for mx_MatrixChat_wrapper.
I'd be advocating for a leaner HTML structure

[maheichyk]

Changed implementation to place the Banner as a sibling of the mx_MatrixChat. Had to update existing mx_MatrixChat_wrapper with flex-direction: column for the Banner to be shown on the top of Element.

I have created a PR to the module API with a suggestion to add the Banner: matrix-org/matrix-react-sdk-module-api#13

[daniellekirkwood]

👋 Product here...

Regular users would not see this? This is just available for power users & people running a fork..?

[maheichyk]

👋 Product here...

Regular users would not see this? This is just available for power users & people running a fork..?

Hello 👋 yes, nothing is changed for the regular users. This is intended to be used in custom Element deployments. Currently we have to fork Element and apply custom changes. With this change in place, we could write a module that will add the banner useful in our deployment.

[t3chguy]

The product consideration here is one of bandwidth & maintenance, by adding this to the module API we have to ensure we don't break it and maintain it if someone else does

[daniellekirkwood]

Yes, comfortable with this. Thanks both!

[weeman1337]

@maheichyk can you update the code here and fix the tests? I would then have a look at your PRs.

[maheichyk]

Another PR is created to element-web: element-hq/element-web#25537. It is based on ideas from this comment: #10321. Element web seems to be a better place for these changes, please have a look.

[germain-gg]

Superseeded by element-hq/element-web#25537