ngx-dev-toolbar 0.0.2-2 → 0.0.2-4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-dev-toolbar",
-  "version": "0.0.2-2",
+  "version": "0.0.2-4",
   "peerDependencies": {
     "@angular/core": "^18.0.0 || ^19.0.0",
     "vite": "^5.0.0",
@@ -8,6 +8,7 @@
     "@nx/vite": "20.3.0",
     "@angular/forms": "^18.0.0 || ^19.0.0",
     "@angular/animations": "^18.0.0 || ^19.0.0",
+    "@angular/cdk": "^18.0.0 || ^19.0.0",
     "rxjs": "~7.8.0"
   },
   "sideEffects": false

package/src/components/icons/icon.component.ts

@@ -24,6 +24,7 @@ import { StarIconComponent } from './star-icon.component';
 import { SunIconComponent } from './sun-icon.component';
 import { TerminalIconComponent } from './terminal-icon.component';
 import { ToggleLeftIconComponent } from './toggle-left-icon.component';
+import { TranslateIconComponent } from './translate-icon.component';
 import { UsersIconComponent } from './users-icon.component';
 
 @Component({
@@ -48,65 +49,49 @@ import { UsersIconComponent } from './users-icon.component';
     UsersIconComponent,
     SunIconComponent,
     MoonIconComponent,
+    TranslateIconComponent,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    @switch (name()) {
-      @case ('angular') {
-        <ndt-angular-icon />
-      }
-      @case ('bug') {
-        <ndt-bug-icon [fill]="fill()" />
-      }
-      @case ('code') {
-        <ndt-code-icon [fill]="fill()" />
-      }
-      @case ('database') {
-        <ndt-database-icon [fill]="fill()" />
-      }
-      @case ('gauge') {
-        <ndt-gauge-icon [fill]="fill()" />
-      }
-      @case ('gear') {
-        <ndt-gear-icon [fill]="fill()" />
-      }
-      @case ('git-branch') {
-        <ndt-git-branch-icon [fill]="fill()" />
-      }
-      @case ('layout') {
-        <ndt-layout-icon [fill]="fill()" />
-      }
-      @case ('lighting') {
-        <ndt-lighting-icon [fill]="fill()" />
-      }
-      @case ('network') {
-        <ndt-network-icon [fill]="fill()" />
-      }
-      @case ('puzzle') {
-        <ndt-puzzle-icon [fill]="fill()" />
-      }
-      @case ('refresh') {
-        <ndt-refresh-icon [fill]="fill()" />
-      }
-      @case ('star') {
-        <ndt-star-icon [fill]="fill()" />
-      }
-      @case ('terminal') {
-        <ndt-terminal-icon [fill]="fill()" />
-      }
-      @case ('toggle-left') {
-        <ndt-toggle-left-icon [fill]="fill()" />
-      }
-      @case ('user') {
-        <ndt-users-icon [fill]="fill()" />
-      }
-      @case ('sun') {
-        <ndt-sun-icon [fill]="fill()" />
-      }
-      @case ('moon') {
-        <ndt-moon-icon [fill]="fill()" />
-      }
-    }
+    @switch (name()) { @case ('angular') {
+    <ndt-angular-icon />
+    } @case ('bug') {
+    <ndt-bug-icon [fill]="fill()" />
+    } @case ('code') {
+    <ndt-code-icon [fill]="fill()" />
+    } @case ('database') {
+    <ndt-database-icon [fill]="fill()" />
+    } @case ('gauge') {
+    <ndt-gauge-icon [fill]="fill()" />
+    } @case ('gear') {
+    <ndt-gear-icon [fill]="fill()" />
+    } @case ('git-branch') {
+    <ndt-git-branch-icon [fill]="fill()" />
+    } @case ('layout') {
+    <ndt-layout-icon [fill]="fill()" />
+    } @case ('lighting') {
+    <ndt-lighting-icon [fill]="fill()" />
+    } @case ('network') {
+    <ndt-network-icon [fill]="fill()" />
+    } @case ('puzzle') {
+    <ndt-puzzle-icon [fill]="fill()" />
+    } @case ('refresh') {
+    <ndt-refresh-icon [fill]="fill()" />
+    } @case ('star') {
+    <ndt-star-icon [fill]="fill()" />
+    } @case ('terminal') {
+    <ndt-terminal-icon [fill]="fill()" />
+    } @case ('toggle-left') {
+    <ndt-toggle-left-icon [fill]="fill()" />
+    } @case ('user') {
+    <ndt-users-icon [fill]="fill()" />
+    } @case ('sun') {
+    <ndt-sun-icon [fill]="fill()" />
+    } @case ('moon') {
+    <ndt-moon-icon [fill]="fill()" />
+    } @case ('translate') {
+    <ndt-translate-icon [fill]="fill()" />
+    } }
   `,
 })
 export class DevToolbarIconComponent {
@@ -115,6 +100,6 @@ export class DevToolbarIconComponent {
   name = input.required<IconName>();
 
   fill = computed(() =>
-    this.stateService.theme() === 'dark' ? '#FFFFFF' : '#000000',
+    this.stateService.theme() === 'dark' ? '#FFFFFF' : '#000000'
   );
 }

package/src/components/icons/icon.models.ts

@@ -17,4 +17,5 @@ export type IconName =
   | 'terminal'
   | 'toggle-left'
   | 'user'
-  | 'flag';
+  | 'flag'
+  | 'translate';

package/src/components/icons/translate-icon.component.ts

@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  selector: 'ndt-translate-icon',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M250.73,210.63l-56-112a12,12,0,0,0-21.46,0l-20.52,41A84.2,84.2,0,0,1,114,126.22,107.48,107.48,0,0,0,139.33,68H160a12,12,0,0,0,0-24H108V32a12,12,0,0,0-24,0V44H32a12,12,0,0,0,0,24h83.13A83.69,83.69,0,0,1,96,110.35,84,84,0,0,1,83.6,91a12,12,0,1,0-21.81,10A107.55,107.55,0,0,0,78,126.24,83.54,83.54,0,0,1,32,140a12,12,0,0,0,0,24,107.47,107.47,0,0,0,64-21.07,108.4,108.4,0,0,0,45.39,19.44l-24.13,48.26a12,12,0,1,0,21.46,10.73L151.41,196h65.17l12.68,25.36a12,12,0,1,0,21.47-10.73ZM163.41,172,184,130.83,204.58,172Z"
+      ></path>
+    </svg>
+  `,
+})
+export class TranslateIconComponent {
+  fill = input<string>('#FFFF');
+}

package/src/components/select/select.component.scss

@@ -1,4 +1,6 @@
-.select {
+@use '../../styles' as devtools;
+
+select.select {
   width: 100%;
   cursor: pointer;
   min-width: 100px;
@@ -45,19 +47,36 @@
   &:invalid {
     border-color: var(--devtools-border-error, #ff4444);
   }
+
+  option {
+    background-color: var(--devtools-bg-primary);
+    color: var(--devtools-text-primary);
+    padding: var(--devtools-spacing-sm);
+    font-size: var(--devtools-font-size-sm);
+
+    &:hover,
+    &:focus {
+      background-color: var(--devtools-background-hover);
+    }
+  }
 }
 
 /* Style for Firefox */
 @-moz-document url-prefix() {
-  .select {
+  select.select {
     text-indent: 0.01px;
     text-overflow: '';
     padding-right: 2.5em;
+
+    option {
+      background-color: var(--devtools-bg-primary) !important;
+      color: var(--devtools-text-primary) !important;
+    }
   }
 }
 
 /* Style for Webkit browsers */
-.select::-ms-expand {
+select.select::-ms-expand {
   display: none;
 }
 
@@ -67,9 +86,9 @@ select::-ms-expand {
 }
 
 /* For Webkit browsers (Chrome, Safari) */
-select:-webkit-autofill,
-select:-webkit-autofill:hover,
-select:-webkit-autofill:focus {
+select.select:-webkit-autofill,
+select.select:-webkit-autofill:hover,
+select.select:-webkit-autofill:focus {
   -webkit-box-shadow: 0 0 0px 1000px var(--devtools-bg-primary) inset !important;
   -webkit-text-fill-color: var(--devtools-text-primary) !important;
 }

package/src/components/tool-button/tool-button.component.scss

@@ -16,13 +16,13 @@ $dimensions: devtools.$dimensions;
   opacity: 0.5;
   position: relative;
 
-  &:hover {
+  &--active {
     background: var(--devtools-hover-bg);
     opacity: 1;
   }
 
-  &--toolbar-visible {
-    background: transparent;
+  &:hover {
+    background: var(--devtools-hover-bg);
     opacity: 1;
   }
 

package/src/components/tool-button/tool-button.component.ts

@@ -23,7 +23,6 @@ import { DevToolbarStateService } from '../../dev-toolbar-state.service';
   template: `
     <button
       class="tool-button"
-      [class.tool-button--toolbar-visible]="isToolbarVisible()"
       [class.tool-button--active]="isActive()"
       [class.tool-button--focus]="isFocused()"
       (mouseenter)="onMouseEnter()"
@@ -74,9 +73,9 @@ export class DevToolbarToolButtonComponent {
   // Inputs
   readonly title = input.required<string>();
   readonly toolId = input.required<string>();
+
   // Outputs
-  // eslint-disable-next-line @angular-eslint/no-output-native
-  readonly click = output<void>();
+  readonly open = output<void>();
 
   // Signals
   readonly isActive = computed(
@@ -102,7 +101,7 @@ export class DevToolbarToolButtonComponent {
   // Public methods
   onClick(): void {
     this.isFocused.set(false);
-    this.click.emit();
+    this.open.emit();
   }
 
   onMouseEnter(): void {

package/src/components/toolbar-tool/toolbar-tool.component.ts

@@ -81,21 +81,29 @@ export class DevToolbarToolComponent {
   );
   height = computed(() => {
     switch (this.windowConfig().size) {
-      case 'tall':
-        return 620;
+      case 'small':
+        return 320;
       case 'medium':
         return 480;
+      case 'tall':
+        return 620;
+      case 'large':
+        return 620;
       default:
-        return 400;
+        return 480;
     }
   });
 
   width = computed(() => {
     switch (this.windowConfig().size) {
-      case 'tall':
-        return 520;
+      case 'small':
+        return 320;
       case 'medium':
         return 480;
+      case 'tall':
+        return 480;
+      case 'large':
+        return 620;
       default:
         return 400;
     }

package/src/components/window/window.component.scss

@@ -28,20 +28,6 @@
   justify-content: space-between;
   align-items: flex-start;
 
-  &__content {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &__controls {
-    display: flex;
-    gap: var(--devtools-spacing-sm);
-  }
-
-  &__description {
-    font-size: var(--devtools-font-size-sm);
-    color: var(--devtools-text-muted);
-  }
 
   &__title {
     display: flex;
@@ -60,6 +46,23 @@
       letter-spacing: 0.5px;
     }
   }
+  &__description {
+    font-size: var(--devtools-font-size-sm);
+    color: var(--devtools-text-muted);
+  }
+
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__controls {
+    display: flex;
+    gap: var(--devtools-spacing-sm);
+  }
+
+
 }
 
 .content {

package/src/components/window/window.models.ts

@@ -6,7 +6,7 @@ export type WindowPlacement =
   | 'top-center'
   | 'top-right';
 
-export type WindowSize = 'tall' | 'medium';
+export type WindowSize = 'small' | 'medium' | 'tall' | 'large';
 export interface WindowConfig {
   id: string;
   /**

package/src/dev-toolbar-state.service.ts

@@ -22,12 +22,17 @@ export class DevToolbarStateService {
   });
 
   // Selectors
-  readonly isVisible = computed(() => !this.state().isHidden);
+  readonly isVisible = computed(
+    () => !this.state().isHidden || this.hasActiveTool()
+  );
   readonly isDarkTheme = computed(() => this.state().theme === 'dark');
   readonly activeToolId = computed(() => this.state().activeToolId);
   readonly hasActiveTool = computed(() => this.state().activeToolId !== null);
   readonly error = computed(() => this.state().error);
   readonly theme = computed(() => this.state().theme);
+  /**
+   * The delay to hide the toolbar
+   */
   readonly delay = computed(() => this.state().delay);
 
   // State updates

package/src/dev-toolbar.component.scss

@@ -9,11 +9,12 @@
   transform: translateX(-50%);
   display: flex;
   pointer-events: auto;
-  background: var(--devtools-bg-gradient);
+  background: var(--devtools-bg-primary);
   border: 1px solid var(--devtools-border-primary);
   border-radius: map.get(map.get(devtools.$dimensions, border-radius), full);
   box-shadow: var(--devtools-shadow-toolbar);
   height: map.get(devtools.$dimensions, toolbar-height);
+  overflow: hidden;
 
   &--active {
     opacity: 1;

package/src/dev-toolbar.component.ts

@@ -5,29 +5,33 @@ import {
   transition,
   trigger,
 } from '@angular/animations';
-import { Component, DestroyRef, OnInit, inject } from '@angular/core';
+import {
+  Component,
+  DestroyRef,
+  OnInit,
+  inject,
+  isDevMode,
+} from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { fromEvent } from 'rxjs';
 import { filter, throttleTime } from 'rxjs/operators';
-import { DevToolbarIconComponent } from './components/icons/icon.component';
-import { DevToolbarToolButtonComponent } from './components/tool-button/tool-button.component';
 import { DevToolbarStateService } from './dev-toolbar-state.service';
 import { DevToolbarFeatureFlagsToolComponent } from './tools/feature-flags-tool/feature-flags-tool.component';
-import { DevToolbarSettingsToolComponent } from './tools/settings-tool/settings-tool.component';
-import { SettingsService } from './tools/settings-tool/settings.service';
+import { DevToolbarHomeToolComponent } from './tools/home-tool/home-tool.component';
+import { SettingsService } from './tools/home-tool/settings.service';
+import { DevToolbarLanguageToolComponent } from './tools/language-tool/language-tool.component';
 
 @Component({
   standalone: true,
   selector: 'ndt-toolbar',
   styleUrls: ['./dev-toolbar.component.scss'],
   imports: [
-    DevToolbarToolButtonComponent,
+    DevToolbarHomeToolComponent,
+    DevToolbarLanguageToolComponent,
     DevToolbarFeatureFlagsToolComponent,
-    DevToolbarSettingsToolComponent,
-    DevToolbarIconComponent,
   ],
-
   template: `
+    @if (isDevMode) {
     <div
       aria-label="Developer tools"
       role="toolbar"
@@ -37,15 +41,12 @@ import { SettingsService } from './tools/settings-tool/settings.service';
       [class.dev-toolbar--active]="state.isVisible()"
       (mouseenter)="onMouseEnter()"
     >
-      <ndt-tool-button title="Home" toolId="ndt-home">
-        <ndt-icon name="angular" />
-      </ndt-tool-button>
-      <ndt-tool-button title="Performance" toolId="ndt-performance">
-        <ndt-icon name="gauge" />
-      </ndt-tool-button>
+      <ndt-home-tool />
+      <ndt-language-tool />
       <ndt-feature-flags-tool />
-      <ndt-settings-tool />
+      <ng-content />
     </div>
+    }
   `,
   animations: [
     trigger('toolbarState', [
@@ -72,6 +73,8 @@ export class DevToolbarComponent implements OnInit {
   destroyRef = inject(DestroyRef);
   settingsService = inject(SettingsService);
 
+  isDevMode = isDevMode();
+
   private keyboardShortcut = fromEvent<KeyboardEvent>(window, 'keydown')
     .pipe(
       filter((event) => event.ctrlKey && event.shiftKey && event.key === 'D'),

package/src/index.ts

@@ -1,3 +1,11 @@
+export * from './components/icons/icon.component';
+export * from './components/icons/icon.models';
+export * from './components/toolbar-tool/toolbar-tool.component';
+export * from './components/toolbar-tool/toolbar-tool.models';
+export * from './components/window/window.models';
 export * from './dev-toolbar.component';
+export * from './models/dev-tools.interface';
 export * from './tools/feature-flags-tool/feature-flags.models';
 export * from './tools/feature-flags-tool/feature-flags.service';
+export * from './tools/language-tool/language.models';
+export * from './tools/language-tool/language.service';

package/src/models/dev-tools.interface.ts

@@ -0,0 +1,19 @@
+import { Observable } from 'rxjs';
+
+/**
+ * Interface that should be implemented by any tool service that is used in the dev toolbar
+ */
+export interface DevToolsService<OptionType> {
+  /**
+   * Sets the available options that will be displayed in the tool on the dev toolbar
+   * @param options The options to be displayed
+   */
+  setAvailableOptions(options: OptionType[]): void;
+
+  /**
+   * Gets the values that were forced/modified through the tool on the dev toolbar.
+   * If the tool only supports a single option, the returned array will have a single element.
+   * @returns Observable of forced values array
+   */
+  getForcedValues(): Observable<OptionType[]>;
+}

package/src/styles.scss

@@ -240,6 +240,7 @@ $z-indices: (
   h5 {
     font-weight: 600;
     color: var(--devtools-text-primary);
+    margin: 0;
   }
 
   h1 {
@@ -265,6 +266,7 @@ $z-indices: (
 
   p {
     line-height: 1.5em;
+    margin: 0;
   }
   --devtools-note-background: #{map.get(
       map.get(map.get($colors, light), annotation),

package/src/tools/feature-flags-tool/feature-flags-internal.service.ts

@@ -0,0 +1,96 @@
+import { Injectable, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { BehaviorSubject, Observable, combineLatest, map } from 'rxjs';
+import { DevToolsStorageService } from '../../utils/storage.service';
+import { Flag } from './feature-flags.models';
+
+interface ForcedFlagsState {
+  enabled: string[];
+  disabled: string[];
+}
+
+@Injectable({ providedIn: 'root' })
+export class DevToolbarInternalFeatureFlagService {
+  private readonly STORAGE_KEY = 'feature-flags';
+  private storageService = inject(DevToolsStorageService);
+
+  private appFlags$ = new BehaviorSubject<Flag[]>([]);
+  private forcedFlagsSubject = new BehaviorSubject<ForcedFlagsState>({
+    enabled: [],
+    disabled: [],
+  });
+
+  private readonly forcedFlags$ = this.forcedFlagsSubject.asObservable();
+
+  public flags$: Observable<Flag[]> = combineLatest([
+    this.appFlags$,
+    this.forcedFlags$,
+  ]).pipe(
+    map(([appFlags, { enabled, disabled }]) => {
+      return appFlags.map((flag) => ({
+        ...flag,
+        isForced: enabled.includes(flag.id) || disabled.includes(flag.id),
+        isEnabled: enabled.includes(flag.id),
+      }));
+    })
+  );
+
+  public flags = toSignal(this.flags$, { initialValue: [] });
+
+  constructor() {
+    this.loadForcedFlags();
+  }
+
+  setAppFlags(flags: Flag[]): void {
+    this.appFlags$.next(flags);
+  }
+
+  getAppFlags(): Observable<Flag[]> {
+    return this.appFlags$.asObservable();
+  }
+
+  getForcedFlags(): Observable<Flag[]> {
+    return this.flags$.pipe(
+      map((flags) => flags.filter((flag) => flag.isForced))
+    );
+  }
+
+  setFlag(flagId: string, isEnabled: boolean): void {
+    const { enabled, disabled } = this.forcedFlagsSubject.value;
+
+    const newEnabled = enabled.filter((id) => id !== flagId);
+    const newDisabled = disabled.filter((id) => id !== flagId);
+
+    if (isEnabled) {
+      newEnabled.push(flagId);
+    } else {
+      newDisabled.push(flagId);
+    }
+
+    const newState = { enabled: newEnabled, disabled: newDisabled };
+    this.forcedFlagsSubject.next(newState);
+    this.storageService.set(this.STORAGE_KEY, newState);
+  }
+
+  removeFlagOverride(flagId: string): void {
+    const { enabled, disabled } = this.forcedFlagsSubject.value;
+
+    const newState = {
+      enabled: enabled.filter((id) => id !== flagId),
+      disabled: disabled.filter((id) => id !== flagId),
+    };
+
+    this.forcedFlagsSubject.next(newState);
+    this.storageService.set(this.STORAGE_KEY, newState);
+  }
+
+  private loadForcedFlags(): void {
+    const savedFlags = this.storageService.get<ForcedFlagsState>(
+      this.STORAGE_KEY
+    );
+
+    if (savedFlags) {
+      this.forcedFlagsSubject.next(savedFlags);
+    }
+  }
+}

package/src/tools/feature-flags-tool/feature-flags-tool.component.ts

@@ -10,8 +10,8 @@ import { DevToolbarInputComponent } from '../../components/input/input.component
 import { DevToolbarSelectComponent } from '../../components/select/select.component';
 import { DevToolbarToolComponent } from '../../components/toolbar-tool/toolbar-tool.component';
 import { WindowSize } from '../../components/window/window.models';
+import { DevToolbarInternalFeatureFlagService } from './feature-flags-internal.service';
 import { FeatureFlagFilter, Flag } from './feature-flags.models';
-import { DevToolbarFeatureFlagsService } from './feature-flags.service';
 
 @Component({
   selector: 'ndt-feature-flags-tool',
@@ -47,6 +47,10 @@ import { DevToolbarFeatureFlagsService } from './feature-flags.service';
         <div class="empty">
           <p>No flags found</p>
         </div>
+        } @else if (hasNoFilteredFlags()) {
+        <div class="empty">
+          <p>No flags found matching your filter</p>
+        </div>
         } @else {
         <div class="flag-list">
           @for (flag of filteredFlags(); track flag.id) {
@@ -169,7 +173,7 @@ import { DevToolbarFeatureFlagsService } from './feature-flags.service';
 })
 export class DevToolbarFeatureFlagsToolComponent {
   // Injects
-  private readonly featureFlags = inject(DevToolbarFeatureFlagsService);
+  private readonly featureFlags = inject(DevToolbarInternalFeatureFlagService);
 
   // Signals
   protected readonly activeFilter = signal<FeatureFlagFilter>('all');
@@ -197,6 +201,9 @@ export class DevToolbarFeatureFlagsToolComponent {
       return matchesSearch && matchesFilter;
     });
   });
+  protected readonly hasNoFilteredFlags = computed(
+    () => this.filteredFlags().length === 0
+  );
 
   // Other properties
   protected readonly windowConfig = {
@@ -216,7 +223,7 @@ export class DevToolbarFeatureFlagsToolComponent {
   ];
 
   protected readonly flagValueOptions = [
-    { value: 'not-forced', label: 'Select an override' },
+    { value: 'not-forced', label: 'Not Forced' },
     { value: 'off', label: 'Forced Off (false)' },
     { value: 'on', label: 'Forced On (true)' },
   ];

package/src/tools/feature-flags-tool/feature-flags.service.ts

@@ -1,110 +1,26 @@
 import { Injectable, inject } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { BehaviorSubject, Observable, combineLatest, map } from 'rxjs';
-import { DevToolsStorageService } from '../../utils/storage.service';
+import { Observable } from 'rxjs';
+import { DevToolsService } from '../../models/dev-tools.interface';
+import { DevToolbarInternalFeatureFlagService } from './feature-flags-internal.service';
 import { Flag } from './feature-flags.models';
 
-interface ForcedFlagsState {
-  enabled: string[];
-  disabled: string[];
-}
-
 @Injectable({ providedIn: 'root' })
-export class DevToolbarFeatureFlagsService {
-  private readonly STORAGE_KEY = 'feature-flags';
-  private storageService = inject(DevToolsStorageService);
+export class DevToolbarFeatureFlagService implements DevToolsService<Flag> {
+  private internalService = inject(DevToolbarInternalFeatureFlagService);
 
   /**
-   * App flags are the flags that are currently in the app
+   * Sets the available flags that will be displayed in the tool on the dev toolbar
+   * @param flags The flags to be displayed
    */
-  private appFlags$ = new BehaviorSubject<Flag[]>([]);
-
-  /**
-   * Forced flags are the flags that are currently forced in the app
-   */
-  private forcedFlagsSubject = new BehaviorSubject<ForcedFlagsState>({
-    enabled: [],
-    disabled: [],
-  });
-
-  private readonly forcedFlags$ = this.forcedFlagsSubject.asObservable();
-  /**
-   * Flags with the forced flag status
-   */
-  public flags$: Observable<Flag[]> = combineLatest([
-    this.appFlags$,
-    this.forcedFlags$,
-  ]).pipe(
-    map(([appFlags, { enabled, disabled }]) => {
-      return appFlags.map((flag) => ({
-        ...flag,
-        isForced: enabled.includes(flag.id) || disabled.includes(flag.id),
-        isEnabled: enabled.includes(flag.id),
-      }));
-    })
-  );
-
-  public flags = toSignal(this.flags$, { initialValue: [] });
-
-  constructor() {
-    this.loadForcedFlags();
-  }
-
-  public set(flags: Flag[]): void {
-    this.appFlags$.next(flags);
+  setAvailableOptions(flags: Flag[]): void {
+    this.internalService.setAppFlags(flags);
   }
 
   /**
-   * This is used by the app that uses the dev toolbar and
-   * helps to set the flags that can be overridden by the dev toolbar
-   * @param flags - The flags to set
+   * Gets the flags that were forced/modified through the tool on the dev toolbar
+   * @returns Observable of forced flags array
    */
-  public setAppFlags(flags: Flag[]): void {
-    this.appFlags$.next(flags);
-  }
-
-  public getAppFlags(): Observable<Flag[]> {
-    return this.appFlags$.asObservable();
-  }
-
-  public setFlag(flagId: string, isEnabled: boolean): void {
-    const { enabled, disabled } = this.forcedFlagsSubject.value;
-
-    // Remove from both arrays first
-    const newEnabled = enabled.filter((id) => id !== flagId);
-    const newDisabled = disabled.filter((id) => id !== flagId);
-
-    // Add to appropriate array
-    if (isEnabled) {
-      newEnabled.push(flagId);
-    } else {
-      newDisabled.push(flagId);
-    }
-
-    const newState = { enabled: newEnabled, disabled: newDisabled };
-    this.forcedFlagsSubject.next(newState);
-    this.storageService.set(this.STORAGE_KEY, newState);
-  }
-
-  public removeFlagOverride(flagId: string): void {
-    const { enabled, disabled } = this.forcedFlagsSubject.value;
-
-    const newState = {
-      enabled: enabled.filter((id) => id !== flagId),
-      disabled: disabled.filter((id) => id !== flagId),
-    };
-
-    this.forcedFlagsSubject.next(newState);
-    this.storageService.set(this.STORAGE_KEY, newState);
-  }
-
-  private loadForcedFlags(): void {
-    const savedFlags = this.storageService.get<ForcedFlagsState>(
-      this.STORAGE_KEY
-    );
-
-    if (savedFlags) {
-      this.forcedFlagsSubject.next(savedFlags);
-    }
+  getForcedValues(): Observable<Flag[]> {
+    return this.internalService.getForcedFlags();
   }
 }

package/src/tools/{settings-tool/settings-tool.component.ts → home-tool/home-tool.component.ts}

@@ -14,15 +14,11 @@ import { SettingsService } from './settings.service';
 type ThemeType = 'light' | 'dark';
 
 @Component({
-  selector: 'ndt-settings-tool',
+  selector: 'ndt-home-tool',
   standalone: true,
   imports: [DevToolbarToolComponent, FormsModule, DevToolbarButtonComponent],
   template: `
-    <ndt-toolbar-tool
-      [windowConfig]="windowConfig"
-      title="Settings"
-      icon="gear"
-    >
+    <ndt-toolbar-tool [windowConfig]="windowConfig" title="Home" icon="angular">
       <section class="settings">
         <div class="instruction">
           <div class="instruction__label">
@@ -34,18 +30,15 @@ type ThemeType = 'light' | 'dark';
           <div class="instruction__control">
             <div class="theme">
               <ndt-button
-                [isActive]="!state.isDarkTheme()"
-                (click)="onThemeSelect('light')"
+                [isActive]="true"
+                (click)="onToggleTheme()"
                 variant="icon"
-                ariaLabel="Switch to light theme"
-                icon="sun"
-              />
-              <ndt-button
-                [isActive]="state.isDarkTheme()"
-                (click)="onThemeSelect('dark')"
-                variant="icon"
-                ariaLabel="Switch to dark theme"
-                icon="moon"
+                [ariaLabel]="
+                  state.isDarkTheme()
+                    ? 'Switch to light theme'
+                    : 'Switch to dark theme'
+                "
+                [icon]="state.isDarkTheme() ? 'sun' : 'moon'"
               />
             </div>
           </div>
@@ -53,24 +46,27 @@ type ThemeType = 'light' | 'dark';
       </section>
     </ndt-toolbar-tool>
   `,
-  styleUrls: ['./settings-tool.component.scss'],
+  styleUrls: ['./home-tool.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DevToolbarSettingsToolComponent {
+export class DevToolbarHomeToolComponent {
   state = inject(DevToolbarStateService);
   settingsService = inject(SettingsService);
 
   readonly badge = input<string | number>();
+  readonly title = `Angular Dev Toolbar`;
   readonly windowConfig: WindowConfig = {
-    title: 'Settings',
+    title: this.title,
     isClosable: true,
-    id: 'ndt-settings',
-    description: 'Configure the settings for the Dev Toolbar',
+    id: 'ndt-home',
+    size: 'medium',
+    description: '',
     isBeta: true,
   };
 
-  onThemeSelect(theme: ThemeType): void {
-    this.settingsService.setSettings({ isDarkMode: theme === 'dark' });
-    this.state.setTheme(theme);
+  onToggleTheme(): void {
+    const newTheme: ThemeType = this.state.isDarkTheme() ? 'light' : 'dark';
+    this.settingsService.setSettings({ isDarkMode: newTheme === 'dark' });
+    this.state.setTheme(newTheme);
   }
 }

package/src/tools/language-tool/language-internal.service.ts

@@ -0,0 +1,51 @@
+import { Injectable, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { BehaviorSubject, Observable, map } from 'rxjs';
+import { DevToolsStorageService } from '../../utils/storage.service';
+import { Language } from './language.models';
+
+@Injectable({ providedIn: 'root' })
+export class DevToolbarInternalLanguageService {
+  private readonly STORAGE_KEY = 'language';
+  private readonly storageService = inject(DevToolsStorageService);
+
+  private languages$ = new BehaviorSubject<Language[]>([]);
+  private forcedLanguage$ = new BehaviorSubject<Language | null>(null);
+
+  public languages = toSignal(this.languages$, { initialValue: [] });
+
+  constructor() {
+    this.loadForcedLanguage();
+  }
+
+  setAppLanguages(languages: Language[]): void {
+    this.languages$.next(languages);
+  }
+
+  getAppLanguages(): Observable<Language[]> {
+    return this.languages$.asObservable();
+  }
+
+  setForcedLanguage(language: Language): void {
+    this.forcedLanguage$.next(language);
+    this.storageService.set(this.STORAGE_KEY, language);
+  }
+
+  getForcedLanguage(): Observable<Language[]> {
+    return this.forcedLanguage$.pipe(
+      map((language) => (language ? [language] : []))
+    );
+  }
+
+  removeForcedLanguage(): void {
+    this.forcedLanguage$.next(null);
+    this.storageService.remove(this.STORAGE_KEY);
+  }
+
+  private loadForcedLanguage(): void {
+    const savedLanguage = this.storageService.get<Language>(this.STORAGE_KEY);
+    if (savedLanguage) {
+      this.forcedLanguage$.next(savedLanguage);
+    }
+  }
+}

package/src/tools/language-tool/language-tool.component.scss

@@ -0,0 +1,7 @@
+.language-select {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: space-between;
+}

package/src/tools/language-tool/language-tool.component.ts

@@ -0,0 +1,75 @@
+import { Component, inject, signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { firstValueFrom, map } from 'rxjs';
+import { DevToolbarSelectComponent } from '../../components/select/select.component';
+import { DevToolbarToolComponent } from '../../components/toolbar-tool/toolbar-tool.component';
+import { WindowSize } from '../../components/window/window.models';
+import { DevToolbarInternalLanguageService } from './language-internal.service';
+import { Language } from './language.models';
+
+@Component({
+  selector: 'ndt-language-tool',
+  standalone: true,
+  imports: [DevToolbarToolComponent, DevToolbarSelectComponent],
+  styleUrls: ['./language-tool.component.scss'],
+  template: `
+    <ndt-toolbar-tool
+      title="Languages"
+      icon="translate"
+      [windowConfig]="windowConfig"
+    >
+      <div class="language-select">
+        <label for="language-select">Language</label>
+        <ndt-select
+          id="language-select"
+          [value]="activeLanguage()"
+          [options]="languageOptions()"
+          [size]="'medium'"
+          (valueChange)="onLanguageChange($event ?? '')"
+        />
+      </div>
+    </ndt-toolbar-tool>
+  `,
+})
+export class DevToolbarLanguageToolComponent {
+  private readonly languageService = inject(DevToolbarInternalLanguageService);
+
+  protected readonly windowConfig = {
+    title: 'Languages',
+    description: 'Set the language for your current session',
+    isClosable: true,
+    size: 'small' as WindowSize,
+    id: 'ndt-language',
+    isBeta: true,
+  };
+
+  activeLanguage = signal<string>('not-forced');
+
+  languageOptions = toSignal(
+    this.languageService.getAppLanguages().pipe(
+      map((languages) => [
+        { value: 'not-forced', label: 'Not Forced' },
+        ...languages.map(({ id: value, name: label }) => ({
+          value,
+          label,
+        })),
+      ])
+    ),
+    { initialValue: [] }
+  );
+
+  async onLanguageChange(language: string): Promise<void> {
+    if (language === 'not-forced' || !language) {
+      this.languageService.removeForcedLanguage();
+      return;
+    }
+
+    const languages = await firstValueFrom(
+      this.languageService.getAppLanguages()
+    );
+    const selectedLanguage = languages.find(({ id }) => id === language);
+    if (selectedLanguage) {
+      this.languageService.setForcedLanguage(selectedLanguage as Language);
+    }
+  }
+}

package/src/tools/language-tool/language.models.ts

@@ -0,0 +1,4 @@
+export interface Language {
+  id: string;
+  name: string;
+}

package/src/tools/language-tool/language.service.ts

@@ -0,0 +1,26 @@
+import { inject, Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { DevToolsService } from '../../models/dev-tools.interface';
+import { DevToolbarInternalLanguageService } from './language-internal.service';
+import { Language } from './language.models';
+
+@Injectable({ providedIn: 'root' })
+export class DevToolbarLanguageService implements DevToolsService<Language> {
+  private internalService = inject(DevToolbarInternalLanguageService);
+
+  /**
+   * Sets the available languages that will be displayed in the tool on the dev toolbar
+   * @param languages The languages to be displayed
+   */
+  setAvailableOptions(languages: Language[]): void {
+    this.internalService.setAppLanguages(languages);
+  }
+
+  /**
+   * Gets the languages that were forced/modified through the tool on the dev toolbar
+   * @returns Observable of forced languages array
+   */
+  getForcedValues(): Observable<Language[]> {
+    return this.internalService.getForcedLanguage();
+  }
+}

package/src/tools/index.ts

@@ -1,5 +0,0 @@
-export * from './feature-flags-tool/feature-flags-tool.component';
-export * from './feature-flags-tool/feature-flags.models';
-export * from './feature-flags-tool/feature-flags.service';
-
-export * from './settings-tool/settings-tool.component';