add autofill blocked domain indicators to autofill suggestions section header

apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.html

@@ -3,6 +3,7 @@
   [ciphers]="ciphers"
   [title]="'autofillSuggestions' | i18n"
   [showRefresh]="showRefresh"
+  [sectionIndicators]="sectionIndicators"
   (onRefresh)="refreshCurrentTab()"
   [description]="(showEmptyAutofillTip$ | async) ? ('autofillSuggestionsTip' | i18n) : null"
   showAutofillButton

apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.ts

@@ -1,16 +1,11 @@
 import { CommonModule } from "@angular/common";
-import { Component, OnInit } from "@angular/core";
+import { Component, Input, OnInit } from "@angular/core";
 import { combineLatest, firstValueFrom, map, Observable } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service";
 import { CipherType } from "@bitwarden/common/vault/enums";
-import {
+import { IconButtonModule, TypographyModule } from "@bitwarden/components";
-  IconButtonModule,
-  SectionComponent,
-  SectionHeaderComponent,
-  TypographyModule,
-} from "@bitwarden/components";
 
 import BrowserPopupUtils from "../../../../../platform/popup/browser-popup-utils";
 import { VaultPopupAutofillService } from "../../../services/vault-popup-autofill.service";
@@ -22,11 +17,9 @@ import { VaultListItemsContainerComponent } from "../vault-list-items-container/
   standalone: true,
   imports: [
     CommonModule,
-    SectionComponent,
     TypographyModule,
     VaultListItemsContainerComponent,
     JslibModule,
-    SectionHeaderComponent,
     IconButtonModule,
   ],
   selector: "app-autofill-vault-list-items",
@@ -48,6 +41,11 @@ export class AutofillVaultListItemsComponent implements OnInit {
 
   clickItemsToAutofillVaultView = false;
 
+  /**
+   * Indicators for the section.
+   */
+  @Input() sectionIndicators: string[];
+
   /**
    * Observable that determines whether the empty autofill tip should be shown.
    * The tip is shown when there are no login ciphers to autofill, no filter is applied, and autofill is allowed in

apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html

@@ -3,6 +3,11 @@
     <bit-section-header>
       <h2 bitTypography="h6">
         {{ title }}
+        <i
+          *ngIf="showAutofillBlockedIndicator"
+          class="bwi bwi-info-circle"
+          [appA11yTitle]="'autofillBlockedTooltip' | i18n"
+        ></i>
       </h2>
       <button
         *ngIf="showRefresh"

apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts

@@ -12,7 +12,7 @@ import {
   Output,
   signal,
 } from "@angular/core";
-import { Router, RouterLink } from "@angular/router";
+import { Router } from "@angular/router";
 import { map } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
@@ -50,7 +50,6 @@ import { ItemMoreOptionsComponent } from "../item-more-options/item-more-options
     TypographyModule,
     JslibModule,
     SectionHeaderComponent,
-    RouterLink,
     ItemCopyActionsComponent,
     ItemMoreOptionsComponent,
     OrgIconDirective,
@@ -81,6 +80,8 @@ export class VaultListItemsContainerComponent implements AfterViewInit {
     map((enabled) => (enabled ? 53 : 59)),
   );
 
+  protected showAutofillBlockedIndicator = false;
+
   /**
    * Timeout used to add a small delay when selecting a cipher to allow for double click to launch
    * @private
@@ -99,6 +100,11 @@ export class VaultListItemsContainerComponent implements AfterViewInit {
   @Input()
   title: string;
 
+  /**
+   * Indicators for the section.
+   */
+  @Input() sectionIndicators: string[];
+
   /**
    * Optional description for the vault list item section. Will be shown below the title even when
    * no ciphers are available.
@@ -170,6 +176,10 @@ export class VaultListItemsContainerComponent implements AfterViewInit {
 
       this.autofillShortcutTooltip.set(`${autofillTitle} ${autofillShortcut}`);
     }
+
+    this.showAutofillBlockedIndicator = !!this.sectionIndicators?.find(
+      (i) => i === "autofillDisabled",
+    );
   }
 
   /**

apps/browser/src/vault/popup/components/vault/vault-v2.component.html

@@ -70,7 +70,9 @@
       cdkVirtualScrollingElement
       class="tw-h-full tw-p-3 bit-compact:tw-p-2 tw-styled-scrollbar"
     >
-      <app-autofill-vault-list-items></app-autofill-vault-list-items>
+      <app-autofill-vault-list-items
+        [sectionIndicators]="sectionIndicators"
+      ></app-autofill-vault-list-items>
       <app-vault-list-items-container
         [title]="'favorites' | i18n"
         [ciphers]="favoriteCiphers$ | async"

apps/browser/src/vault/popup/components/vault/vault-v2.component.ts

@@ -2,7 +2,6 @@ import { ScrollingModule } from "@angular/cdk/scrolling";
 import { CommonModule } from "@angular/common";
 import { Component, OnDestroy, OnInit } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
-import { RouterLink } from "@angular/router";
 import { combineLatest, firstValueFrom, Observable, shareReplay, switchMap } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
@@ -49,7 +48,6 @@ enum VaultState {
     VaultListItemsContainerComponent,
     BannerModule,
     ButtonModule,
-    RouterLink,
     NewItemDropdownV2Component,
     ScrollingModule,
     VaultHeaderV2Component,
@@ -65,6 +63,7 @@ export class VaultV2Component implements OnInit, OnDestroy {
   protected scriptInjectionIsBlocked = false;
   protected showScriptInjectionIsBlockedBanner = false;
   protected autofillTabHostname: string = null;
+  protected sectionIndicators: string[] = [];
 
   protected newItemItemValues$: Observable<NewItemInitialValues> =
     this.vaultPopupListFiltersService.filters$.pipe(
@@ -134,6 +133,10 @@ export class VaultV2Component implements OnInit, OnDestroy {
 
           this.scriptInjectionIsBlocked = autofillTabIsBlocked;
 
+          if (autofillTabIsBlocked) {
+            this.sectionIndicators.push("autofillDisabled");
+          }
+
           this.showScriptInjectionIsBlockedBanner =
             autofillTabIsBlocked &&
             !blockedInteractionsUris[autofillTabURL.hostname]?.bannerIsDismissed;