diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index 7eec2804ece..9ce3e048cde 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/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"
},
diff --git a/apps/browser/src/autofill/popup/settings/autofill.component.html b/apps/browser/src/autofill/popup/settings/autofill.component.html
index e8299f01166..369903cb131 100644
--- a/apps/browser/src/autofill/popup/settings/autofill.component.html
+++ b/apps/browser/src/autofill/popup/settings/autofill.component.html
@@ -132,18 +132,6 @@
{{ "showIdentitiesInVaultViewV2" | i18n }}
-
-
-
- {{ "clickToAutofillOnVault" | i18n }}
-
-
diff --git a/apps/browser/src/autofill/popup/settings/autofill.component.ts b/apps/browser/src/autofill/popup/settings/autofill.component.ts
index 884503fa360..d09511773ed 100644
--- a/apps/browser/src/autofill/popup/settings/autofill.component.ts
+++ b/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() {
diff --git a/apps/browser/src/vault/popup/settings/appearance-v2.component.html b/apps/browser/src/vault/popup/settings/appearance-v2.component.html
index 3a05d239592..4f7f2757e0e 100644
--- a/apps/browser/src/vault/popup/settings/appearance-v2.component.html
+++ b/apps/browser/src/vault/popup/settings/appearance-v2.component.html
@@ -31,25 +31,32 @@
>
-
-
- {{ "showQuickCopyActions" | i18n }}
-
-
{{ "showNumberOfAutofillSuggestions" | i18n }}
-
-
- {{ "enableFavicon" | i18n }}
-
-
{{ "showAnimations" | i18n }}
+ {{ "vaultCustomization" | i18n }}
+
+
+
+ {{ "enableFavicon" | i18n }}
+
+
+
+ {{ "showQuickCopyActions" | i18n }}
+
+
+
+
+ {{ "clickToAutofill" | i18n }}
+
+
+
diff --git a/apps/browser/src/vault/popup/settings/appearance-v2.component.ts b/apps/browser/src/vault/popup/settings/appearance-v2.component.ts
index deddbd444fc..d6fca96c08c 100644
--- a/apps/browser/src/vault/popup/settings/appearance-v2.component.ts
+++ b/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) {