UX: Hide all header and footer content on chat routes

app/assets/javascripts/discourse/app/controllers/application.js

@@ -2,6 +2,7 @@ import Controller from "@ember/controller";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import runAfterFramePaint from "discourse/lib/after-frame-paint";
+import { applyValueTransformer } from "discourse/lib/transformer";
 import { isTesting } from "discourse-common/config/environment";
 import discourseDebounce from "discourse-common/lib/debounce";
 import deprecated from "discourse-common/lib/deprecated";
@@ -39,6 +40,10 @@ export default class ApplicationController extends Controller {
     return this.showFooter && this.siteSettings.enable_powered_by_discourse;
   }
 
+  get showBannerContent() {
+    return applyValueTransformer("show-application-banner-content", true);
+  }
+
   @discourseComputed
   canSignUp() {
     return (

app/assets/javascripts/discourse/app/lib/transformer/registry.js

@@ -13,4 +13,5 @@ export const VALUE_TRANSFORMERS = Object.freeze([
   "mentions-class",
   "more-topics-tabs",
   "post-menu-buttons",
+  "show-application-banner-content",
 ]);

app/assets/javascripts/discourse/app/templates/application.hbs

@@ -47,34 +47,44 @@
 
     <LoadingSliderFallbackSpinner />
 
-    <PluginOutlet @name="before-main-outlet" />
+    {{#if this.showBannerContent}}
+      <PluginOutlet @name="before-main-outlet" />
+    {{/if}}
 
     <div id="main-outlet">
-      <PluginOutlet @name="above-main-container" @connectorTagName="div" />
+      {{#if this.showBannerContent}}
+        <PluginOutlet @name="above-main-container" @connectorTagName="div" />
+      {{/if}}
       <div class="container" id="main-container">
-        {{#if this.showTop}}
-          <CustomHtml @name="top" />
+        {{#if this.showBannerContent}}
+          {{#if this.showTop}}
+            <CustomHtml @name="top" />
+          {{/if}}
+          <NotificationConsentBanner />
+          <PwaInstallBanner />
+          <GlobalNotice />
+          <PluginOutlet
+            @name="top-notices"
+            @connectorTagName="div"
+            @outletArgs={{hash currentPath=this.router._router.currentPath}}
+          />
         {{/if}}
-        <NotificationConsentBanner />
-        <PwaInstallBanner />
-        <GlobalNotice />
-        <PluginOutlet
-          @name="top-notices"
-          @connectorTagName="div"
-          @outletArgs={{hash currentPath=this.router._router.currentPath}}
-        />
       </div>
 
       {{outlet}}
 
       <CardContainer />
-      <PluginOutlet
-        @name="main-outlet-bottom"
-        @outletArgs={{hash showFooter=this.showFooter}}
-      />
+      {{#if this.showBannerContent}}
+        <PluginOutlet
+          @name="main-outlet-bottom"
+          @outletArgs={{hash showFooter=this.showFooter}}
+        />
+      {{/if}}
     </div>
 
-    <PluginOutlet @name="after-main-outlet" />
+    {{#if this.showBannerContent}}
+      <PluginOutlet @name="after-main-outlet" />
+    {{/if}}
 
     {{#if this.showPoweredBy}}
       <PoweredByDiscourse />

plugins/chat/assets/javascripts/discourse/initializers/chat-setup.js

@@ -172,6 +172,16 @@ class ChatSetupInit {
         category: "organisms",
         id: "chat",
       });
+
+      api.registerValueTransformer(
+        "show-application-banner-content",
+        ({ value }) => {
+          if (this.router.currentRouteName.startsWith("chat.")) {
+            return false;
+          }
+          return value;
+        }
+      );
     });
   }
 

plugins/chat/assets/stylesheets/common/core-extensions.scss

@@ -1,10 +1,3 @@
-.has-full-page-chat {
-  .global-notice,
-  .bootstrap-mode-notice {
-    display: none;
-  }
-}
-
 .admin-plugins {
   [data-plugin-name="chat"] {
     display: none;