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 b267e1c5cb2..6b517e500db 100644
--- a/apps/browser/src/vault/popup/settings/appearance-v2.component.html
+++ b/apps/browser/src/vault/popup/settings/appearance-v2.component.html
@@ -28,10 +28,15 @@
{{ "enableFavicon" | i18n }}
-
+
{{ "showAnimations" | i18n }}
+
+
+
+ {{ "Compact Mode" }}
+
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 9d600ec83e8..102d1c02b4a 100644
--- a/apps/browser/src/vault/popup/settings/appearance-v2.component.ts
+++ b/apps/browser/src/vault/popup/settings/appearance-v2.component.ts
@@ -1,5 +1,5 @@
import { CommonModule } from "@angular/common";
-import { Component, DestroyRef, OnInit } from "@angular/core";
+import { Component, DestroyRef, inject, OnInit } from "@angular/core";
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
import { FormBuilder, ReactiveFormsModule } from "@angular/forms";
import { firstValueFrom } from "rxjs";
@@ -12,7 +12,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 { CheckboxModule } from "@bitwarden/components";
+import { CheckboxModule, DesignSystemService } from "@bitwarden/components";
import { CardComponent } from "../../../../../../libs/components/src/card/card.component";
import { FormFieldModule } from "../../../../../../libs/components/src/form-field/form-field.module";
@@ -38,11 +38,14 @@ import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.co
],
})
export class AppearanceV2Component implements OnInit {
+ private designSystemService = inject(DesignSystemService);
+
appearanceForm = this.formBuilder.group({
enableFavicon: false,
enableBadgeCounter: true,
theme: ThemeType.System,
enableAnimations: true,
+ compactMode: false,
});
/** To avoid flashes of inaccurate values, only show the form after the entire form is populated. */
@@ -82,6 +85,7 @@ export class AppearanceV2Component implements OnInit {
enableBadgeCounter,
theme,
enableAnimations,
+ compactMode: false,
});
this.formLoading = false;
@@ -109,6 +113,12 @@ export class AppearanceV2Component implements OnInit {
.subscribe((enableBadgeCounter) => {
void this.updateAnimations(enableBadgeCounter);
});
+
+ this.appearanceForm.controls.compactMode.valueChanges
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe((compactMode) => {
+ this.designSystemService.compactMode.set(true);
+ });
}
async updateFavicon(enableFavicon: boolean) {
diff --git a/libs/common/src/platform/services/config/default-config.service.ts b/libs/common/src/platform/services/config/default-config.service.ts
index e0603ed509b..60639257f9a 100644
--- a/libs/common/src/platform/services/config/default-config.service.ts
+++ b/libs/common/src/platform/services/config/default-config.service.ts
@@ -114,6 +114,9 @@ export class DefaultConfigService implements ConfigService {
}
getFeatureFlag$(key: Flag) {
+ if (key === FeatureFlag.ExtensionRefresh) {
+ return of(true);
+ }
return this.serverConfig$.pipe(
map((serverConfig) => this.getFeatureFlagValue(serverConfig, key)),
);