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)), );