feat(extension-login-approvals): [Auth/PM-14939] devices list view for browser (#14620)

Creates a new `DeviceManagementComponent` that fetches devices and formats them before handing them off to a view component for display.

View components:

- `DeviceManagementTableComponent` - displays on medium to large screens
- `DeviceManagementItemGroupComponent` - displays on small screens

Feature flag: `PM14938_BrowserExtensionLoginApproval`

libs/common/src/auth/abstractions/devices/devices.service.abstraction.ts

@@ -1,5 +1,7 @@
 import { Observable } from "rxjs";
 
+import { DeviceType } from "@bitwarden/common/enums";
+
 import { DeviceResponse } from "./responses/device.response";
 import { DeviceView } from "./views/device.view";
 
@@ -15,4 +17,5 @@ export abstract class DevicesServiceAbstraction {
   ): Observable<DeviceView>;
   abstract deactivateDevice$(deviceId: string): Observable<void>;
   abstract getCurrentDevice$(): Observable<DeviceResponse>;
+  abstract getReadableDeviceTypeName(deviceType: DeviceType): string;
 }

libs/common/src/auth/services/devices/devices.service.implementation.ts

@@ -1,5 +1,8 @@
 import { Observable, defer, map } from "rxjs";
 
+import { DeviceType, DeviceTypeMetadata } from "@bitwarden/common/enums";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+
 import { ListResponse } from "../../../models/response/list.response";
 import { AppIdService } from "../../../platform/abstractions/app-id.service";
 import { DevicesServiceAbstraction } from "../../abstractions/devices/devices.service.abstraction";
@@ -17,8 +20,9 @@ import { DevicesApiServiceAbstraction } from "../../abstractions/devices-api.ser
  */
 export class DevicesServiceImplementation implements DevicesServiceAbstraction {
   constructor(
-    private devicesApiService: DevicesApiServiceAbstraction,
     private appIdService: AppIdService,
+    private devicesApiService: DevicesApiServiceAbstraction,
+    private i18nService: I18nService,
   ) {}
 
   /**
@@ -86,4 +90,23 @@ export class DevicesServiceImplementation implements DevicesServiceAbstraction {
       return this.devicesApiService.getDeviceByIdentifier(deviceIdentifier);
     });
   }
+
+  /**
+   * @description Gets a human readable string of the device type name
+   */
+  getReadableDeviceTypeName(type: DeviceType): string {
+    if (type === undefined) {
+      return this.i18nService.t("unknownDevice");
+    }
+
+    const metadata = DeviceTypeMetadata[type];
+    if (!metadata) {
+      return this.i18nService.t("unknownDevice");
+    }
+
+    const platform =
+      metadata.platform === "Unknown" ? this.i18nService.t("unknown") : metadata.platform;
+    const category = this.i18nService.t(metadata.category);
+    return platform ? `${category} - ${platform}` : category;
+  }
 }