Update the Appearance settings page to include click to fill setting

apps/browser/src/_locales/en/messages.json

@@ -1025,6 +1025,9 @@
   "clickToAutofillOnVault": {
     "message": "Click items to autofill on Vault view"
   },
+  "clickToAutofill": {
+    "message": "Click items in autofill suggestion to fill"
+  },
   "clearClipboard": {
     "message": "Clear clipboard",
     "description": "Clipboard is the operating system thing where you copy/paste data to on your device."
@@ -2081,6 +2084,9 @@
     "message": "to create a strong unique password",
     "description": "This will be used as part of a larger sentence, broken up to include the generator icon. The full sentence will read 'Use the generator [GENERATOR_ICON] to create a strong unique password'"
   },
+  "vaultCustomization": {
+    "message": "Vault customization"
+  },
   "vaultTimeoutAction": {
     "message": "Vault timeout action"
   },

apps/browser/src/autofill/popup/settings/autofill.component.html

@@ -132,18 +132,6 @@
             {{ "showIdentitiesInVaultViewV2" | i18n }}
           </bit-label>
         </bit-form-control>
-        <bit-form-control disableMargin>
-          <input
-            bitCheckbox
-            id="clickToAutofill"
-            type="checkbox"
-            (change)="updateClickItemsVaultView()"
-            [(ngModel)]="clickItemsVaultView"
-          />
-          <bit-label for="clickToAutofill" class="tw-whitespace-normal">
-            {{ "clickToAutofillOnVault" | i18n }}
-          </bit-label>
-        </bit-form-control>
       </bit-card>
     </bit-section>
     <bit-section>

apps/browser/src/autofill/popup/settings/autofill.component.ts

@@ -211,10 +211,6 @@ export class AutofillComponent implements OnInit {
     this.showIdentitiesCurrentTab = await firstValueFrom(
       this.vaultSettingsService.showIdentitiesCurrentTab$,
     );
-
-    this.clickItemsVaultView = await firstValueFrom(
-      this.vaultSettingsService.clickItemsToAutofillVaultView$,
-    );
   }
 
   async updateInlineMenuVisibility() {

apps/browser/src/vault/popup/settings/appearance-v2.component.html

@@ -31,25 +31,32 @@
         >
       </bit-form-control>
 
-      <bit-form-control>
-        <input bitCheckbox formControlName="showQuickCopyActions" type="checkbox" />
-        <bit-label>{{ "showQuickCopyActions" | i18n }}</bit-label>
-      </bit-form-control>
-
       <bit-form-control>
         <input bitCheckbox formControlName="enableBadgeCounter" type="checkbox" />
         <bit-label>{{ "showNumberOfAutofillSuggestions" | i18n }}</bit-label>
       </bit-form-control>
 
-      <bit-form-control>
-        <input bitCheckbox formControlName="enableFavicon" type="checkbox" />
-        <bit-label>{{ "enableFavicon" | i18n }}</bit-label>
-      </bit-form-control>
-
       <bit-form-control disableMargin>
         <input bitCheckbox formControlName="enableAnimations" type="checkbox" />
         <bit-label>{{ "showAnimations" | i18n }}</bit-label>
       </bit-form-control>
     </bit-card>
+    <h2 bitTypography="h6" class="tw-font-bold tw-mt-4">{{ "vaultCustomization" | i18n }}</h2>
+    <bit-card>
+      <bit-form-control>
+        <input bitCheckbox formControlName="enableFavicon" type="checkbox" />
+        <bit-label>{{ "enableFavicon" | i18n }}</bit-label>
+      </bit-form-control>
+      <bit-form-control>
+        <input bitCheckbox formControlName="showQuickCopyActions" type="checkbox" />
+        <bit-label>{{ "showQuickCopyActions" | i18n }}</bit-label>
+      </bit-form-control>
+      <bit-form-control disableMargin>
+        <input bitCheckbox formControlName="clickItemsToAutofillVaultView" type="checkbox" />
+        <bit-label>
+          {{ "clickToAutofill" | i18n }}
+        </bit-label>
+      </bit-form-control>
+    </bit-card>
   </form>
 </popup-page>

apps/browser/src/vault/popup/settings/appearance-v2.component.ts

@@ -14,6 +14,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { ThemeType } from "@bitwarden/common/platform/enums";
 import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
+import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service";
 import {
   BadgeModule,
   CardComponent,
@@ -64,6 +65,7 @@ export class AppearanceV2Component implements OnInit {
     enableCompactMode: false,
     showQuickCopyActions: false,
     width: "default" as PopupWidthOption,
+    clickItemsToAutofillVaultView: false,
   });
 
   /** To avoid flashes of inaccurate values, only show the form after the entire form is populated. */
@@ -88,6 +90,7 @@ export class AppearanceV2Component implements OnInit {
     private destroyRef: DestroyRef,
     private animationControlService: AnimationControlService,
     i18nService: I18nService,
+    private vaultSettingsService: VaultSettingsService,
   ) {
     this.themeOptions = [
       { name: i18nService.t("systemDefault"), value: ThemeType.System },
@@ -108,6 +111,9 @@ export class AppearanceV2Component implements OnInit {
       this.copyButtonsService.showQuickCopyActions$,
     );
     const width = await firstValueFrom(this.popupSizeService.width$);
+    const clickItemsToAutofillVaultView = await firstValueFrom(
+      this.vaultSettingsService.clickItemsToAutofillVaultView$,
+    );
 
     // Set initial values for the form
     this.appearanceForm.setValue({
@@ -118,6 +124,7 @@ export class AppearanceV2Component implements OnInit {
       enableCompactMode,
       showQuickCopyActions,
       width,
+      clickItemsToAutofillVaultView,
     });
 
     this.formLoading = false;
@@ -163,6 +170,16 @@ export class AppearanceV2Component implements OnInit {
       .subscribe((width) => {
         void this.updateWidth(width);
       });
+
+    this.appearanceForm.controls.clickItemsToAutofillVaultView.valueChanges
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((clickItemsToAutofillVaultView) => {
+        void this.updateClickItemsToAutofillVaultView(clickItemsToAutofillVaultView);
+      });
+  }
+
+  async updateClickItemsToAutofillVaultView(clickItemsToAutofillVaultView: boolean) {
+    await this.vaultSettingsService.setClickItemsToAutofillVaultView(clickItemsToAutofillVaultView);
   }
 
   async updateFavicon(enableFavicon: boolean) {