Add support to customize UI components rendering using module API

src/customisations/helpers/UIComponents.ts

@@ -14,9 +14,23 @@
 limitations under the License.
 */
 
+import {
+    ShouldShowUIComponentOps,
+    UIComponentLifecycle,
+} from "@matrix-org/react-sdk-module-api/lib/lifecycles/UIComponentLifecycle";
+
 import { UIComponent } from "../../settings/UIFeature";
 import { ComponentVisibilityCustomisations } from "../ComponentVisibility";
+import { ModuleRunner } from "../../modules/ModuleRunner";
 
 export function shouldShowComponent(component: UIComponent): boolean {
-    return ComponentVisibilityCustomisations.shouldShowComponent?.(component) ?? true;
+    let approved: boolean | undefined;
+    if (ComponentVisibilityCustomisations.shouldShowComponent) {
+        approved = ComponentVisibilityCustomisations.shouldShowComponent(component);
+    } else {
+        const opts: ShouldShowUIComponentOps = { shouldShowComponent: undefined };
+        ModuleRunner.instance.invoke(UIComponentLifecycle.ShouldShowComponent, opts, component);
+        approved = opts.shouldShowComponent;
+    }
+    return approved ?? true;
 }

src/modules/ProxiedModuleApi.ts

@@ -216,4 +216,8 @@ export class ProxiedModuleApi implements ModuleApi {
         if (!maybeObj || !(typeof maybeObj === "object")) return undefined;
         return maybeObj[key];
     }
+
+    public getUserId(): string | undefined {
+        return MatrixClientPeg.get()?.getUserId() ?? undefined;
+    }
 }