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`

apps/web/src/app/auth/settings/security/device-management-old.component.html

@@ -0,0 +1,104 @@
+<bit-container>
+  <div class="tw-mt-6 tw-mb-2 tw-pb-2.5">
+    <div class="tw-flex tw-items-center tw-gap-2">
+      <h1 class="tw-m-0">{{ "devices" | i18n }}</h1>
+      <button
+        [bitPopoverTriggerFor]="infoPopover"
+        type="button"
+        class="tw-border-none tw-bg-transparent tw-text-primary-600 tw-flex tw-items-center tw-size-4"
+        [position]="'right-start'"
+      >
+        <i class="bwi bwi-question-circle" aria-hidden="true"></i>
+      </button>
+      <bit-popover [title]="'whatIsADevice' | i18n" #infoPopover>
+        <p>{{ "aDeviceIs" | i18n }}</p>
+      </bit-popover>
+      <i
+        *ngIf="asyncActionLoading"
+        class="bwi bwi-spinner bwi-spin tw-flex tw-items-center tw-size-4"
+        aria-hidden="true"
+      ></i>
+    </div>
+  </div>
+
+  <p>{{ "deviceListDescriptionTemp" | i18n }}</p>
+
+  <div *ngIf="loading" class="tw-flex tw-justify-center tw-items-center tw-p-4">
+    <i class="bwi bwi-spinner bwi-spin tw-text-2xl" aria-hidden="true"></i>
+  </div>
+
+  <bit-table-scroll *ngIf="!loading" [dataSource]="dataSource" [rowSize]="50">
+    <ng-container header>
+      <th
+        *ngFor="let col of columnConfig"
+        [class]="col.headerClass"
+        bitCell
+        [bitSortable]="col.sortable ? col.name : null"
+        [default]="col.name === 'loginStatus' ? 'desc' : null"
+        scope="col"
+        role="columnheader"
+      >
+        {{ col.title }}
+      </th>
+      <!-- TODO: Add a column for the device actions when available -->
+      <!-- <th bitCell scope="col" role="columnheader"></th> -->
+    </ng-container>
+    <ng-template bitRowDef let-row>
+      <td bitCell class="tw-flex tw-gap-2">
+        <div class="tw-flex tw-items-center tw-justify-center tw-w-10">
+          <i [class]="getDeviceIcon(row.type)" class="bwi-lg" aria-hidden="true"></i>
+        </div>
+        <div>
+          <ng-container *ngIf="row.hasPendingAuthRequest">
+            <a bitLink href="#" appStopClick (click)="managePendingAuthRequest(row)">
+              {{ row.displayName }}
+            </a>
+
+            <span class="tw-text-sm tw-text-muted tw-block">
+              {{ "needsApproval" | i18n }}
+            </span>
+          </ng-container>
+          <ng-container *ngIf="!row.hasPendingAuthRequest">
+            {{ row.displayName }}
+            <span
+              *ngIf="row.trusted && !row.hasPendingAuthRequest"
+              class="tw-text-sm tw-text-muted tw-block"
+            >
+              {{ "trusted" | i18n }}
+            </span>
+          </ng-container>
+        </div>
+      </td>
+      <td bitCell>
+        <span *ngIf="isCurrentDevice(row)" bitBadge variant="primary">{{
+          "currentSession" | i18n
+        }}</span>
+        <span *ngIf="row.hasPendingAuthRequest" bitBadge variant="warning">{{
+          "requestPending" | i18n
+        }}</span>
+      </td>
+      <td bitCell>{{ row.firstLogin | date: "medium" }}</td>
+      <!-- <td bitCell>
+        <button
+          type="button"
+          bitIconButton="bwi-ellipsis-v"
+          [bitMenuTriggerFor]="optionsMenu"
+        ></button>
+        <bit-menu #optionsMenu>
+          Remove device button to be re-added later when we have per device session de-authentication. 
+          <button
+            type="button"
+            bitMenuItem
+            (click)="removeDevice(row)"
+            [disabled]="isCurrentDevice(row)"
+          >
+            <span [class]="isCurrentDevice(row) ? 'tw-text-muted' : 'tw-text-danger'">
+              <i class="bwi bwi-trash" aria-hidden="true"></i>
+              {{ "removeDevice" | i18n }}
+            </span>
+          </button>
+        </bit-menu>
+      </td> -->
+    </ng-template>
+  </bit-table-scroll>
+</bit-container>