[PM-8517] Create web specific layout (#9209)

We currently duplicate some logic between our layouts. In an effort to streamline our experience I'm exploring if we can create a web specific layout that handles some of this.

apps/web/src/app/layouts/web-layout.component.ts

@@ -0,0 +1,31 @@
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+import { LayoutComponent } from "@bitwarden/components";
+
+import { PaymentMethodWarningsModule } from "../billing/shared";
+
+import { ProductSwitcherModule } from "./product-switcher/product-switcher.module";
+import { ToggleWidthComponent } from "./toggle-width.component";
+
+@Component({
+  selector: "app-layout",
+  templateUrl: "web-layout.component.html",
+  standalone: true,
+  imports: [
+    CommonModule,
+    LayoutComponent,
+    ProductSwitcherModule,
+    ToggleWidthComponent,
+    PaymentMethodWarningsModule,
+  ],
+})
+export class WebLayoutComponent {
+  protected showPaymentMethodWarningBanners$ = this.configService.getFeatureFlag$(
+    FeatureFlag.ShowPaymentMethodWarningBanners,
+  );
+
+  constructor(private configService: ConfigService) {}
+}