send list items container

apps/browser/src/tools/popup/send/send-v2.component.html

@@ -8,14 +8,12 @@
     </ng-container>
   </popup-header>
 
-  <div
+  <div *ngIf="sends.length === 0" class="tw-flex tw-flex-col tw-h-full tw-justify-center">
-    *ngIf="sendsListState === SendsListStateEnum.Empty"
-    class="tw-flex tw-flex-col tw-h-full tw-justify-center"
-  >
     <bit-no-items [icon]="noItemIcon" class="tw-text-main">
       <ng-container slot="title">{{ "sendsNoItemsTitle" | i18n }}</ng-container>
       <ng-container slot="description">{{ "sendsNoItemsMessage" | i18n }}</ng-container>
       <tools-new-send-dropdown slot="button"></tools-new-send-dropdown>
     </bit-no-items>
   </div>
+  <app-send-list-items-container [sends]="sends" />
 </popup-page>

apps/browser/src/tools/popup/send/send-v2.component.ts

@@ -1,21 +1,24 @@
 import { CommonModule } from "@angular/common";
 import { Component, OnDestroy, OnInit } from "@angular/core";
 import { RouterLink } from "@angular/router";
+import { mergeMap, Subject, takeUntil } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
+import { SendView } from "@bitwarden/common/tools/send/models/view/send.view";
+import { SendService } from "@bitwarden/common/tools/send/services/send.service.abstraction";
 import { ButtonModule, NoItemsModule } from "@bitwarden/components";
-import { NoSendsIcon, NewSendDropdownComponent } from "@bitwarden/send-ui";
+import {
+  NoSendsIcon,
+  NewSendDropdownComponent,
+  SendListItemsContainerComponent,
+} from "@bitwarden/send-ui";
 
 import { CurrentAccountComponent } from "../../../auth/popup/account-switching/current-account.component";
 import { PopOutComponent } from "../../../platform/popup/components/pop-out.component";
 import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.component";
 
-enum SendsListState {
-  Empty,
-}
-
 @Component({
   templateUrl: "send-v2.component.html",
   standalone: true,
@@ -30,23 +33,30 @@ enum SendsListState {
     ButtonModule,
     RouterLink,
     NewSendDropdownComponent,
+    SendListItemsContainerComponent,
   ],
 })
 export class SendV2Component implements OnInit, OnDestroy {
   sendType = SendType;
 
-  /** Visual state of the Sends list */
+  protected sends: SendView[] = [];
-  protected sendsListState: SendsListState | null = null;
+
+  private destroy$ = new Subject<void>();
 
   protected noItemIcon = NoSendsIcon;
 
-  protected SendsListStateEnum = SendsListState;
+  constructor(protected sendService: SendService) {}
 
-  constructor() {
+  async ngOnInit() {
-    this.sendsListState = SendsListState.Empty;
+    this.sendService.sendViews$
+      .pipe(
+        mergeMap(async (sends) => {
+          this.sends = sends;
+        }),
+        takeUntil(this.destroy$),
+      )
+      .subscribe();
   }
 
-  ngOnInit(): void {}
-
   ngOnDestroy(): void {}
 }

libs/common/src/platform/services/config/default-config.service.ts

@@ -115,6 +115,7 @@ export class DefaultConfigService implements ConfigService {
           return DefaultFeatureFlagValue[key];
         }
 
+        serverConfig.featureStates[FeatureFlag.ExtensionRefresh] = true;
         return serverConfig.featureStates[key] as FeatureFlagValueType<Flag>;
       }),
     );

libs/tools/send/send-ui/src/index.ts

@@ -1,2 +1,3 @@
 export * from "./icons";
 export { NewSendDropdownComponent } from "./new-send-dropdown/new-send-dropdown.component";
+export { SendListItemsContainerComponent } from "./send-list-items-container/send-list-items-container.component";

libs/tools/send/send-ui/src/send-list-items-container/send-list-items-container.component.html

@@ -0,0 +1,44 @@
+<bit-section *ngIf="sends?.length > 0">
+  <bit-section-header>
+    <h2 class="tw-font-bold" bitTypography="h5">
+      {{ "allSends" | i18n }}
+    </h2>
+    <span bitTypography="body2" slot="end">{{ sends.length }}</span>
+  </bit-section-header>
+  <bit-item-group>
+    <bit-item *ngFor="let send of sends">
+      <a
+        bit-item-content
+        [routerLink]="['/view-send']"
+        [queryParams]="{ sendId: send.id, type: send.type }"
+        [appA11yTitle]="'viewItemTitle' | i18n: send.name"
+      >
+        <div class="tw-flex tw-justify-between">
+          <div class="tw-space-x-2">
+            <i
+              *ngIf="send.type === sendType.Text"
+              class="bwi bwi-file-text"
+              slot="start"
+              aria-hidden="true"
+            ></i>
+            <i
+              *ngIf="send.type === sendType.File"
+              class="bwi bwi-file"
+              slot="start"
+              aria-hidden="true"
+            ></i>
+            <span data-testid="item-name">{{ send.name }}</span>
+          </div>
+          <div class="tw-space-x-4">
+            <button
+              type="button"
+              bitIconButton="bwi-clone"
+              size="small"
+              [appA11yTitle]="'copyInfoTitle' | i18n: send.name"
+            ></button>
+          </div>
+        </div>
+      </a>
+    </bit-item>
+  </bit-item-group>
+</bit-section>

libs/tools/send/send-ui/src/send-list-items-container/send-list-items-container.component.ts

@@ -0,0 +1,45 @@
+import { CommonModule } from "@angular/common";
+import { Component, Input } from "@angular/core";
+import { RouterLink } from "@angular/router";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
+import { SendView } from "@bitwarden/common/tools/send/models/view/send.view";
+import {
+  BadgeModule,
+  ButtonModule,
+  IconButtonModule,
+  ItemModule,
+  SectionComponent,
+  SectionHeaderComponent,
+  TypographyModule,
+} from "@bitwarden/components";
+
+import { ContainerComponent } from "../../../../../components/src/container/container.component";
+
+@Component({
+  imports: [
+    CommonModule,
+    ItemModule,
+    ButtonModule,
+    BadgeModule,
+    IconButtonModule,
+    SectionComponent,
+    TypographyModule,
+    JslibModule,
+    SectionHeaderComponent,
+    RouterLink,
+    ContainerComponent,
+  ],
+  selector: "app-send-list-items-container",
+  templateUrl: "send-list-items-container.component.html",
+  standalone: true,
+})
+export class SendListItemsContainerComponent {
+  sendType = SendType;
+  /**
+   * The list of sends to display.
+   */
+  @Input()
+  sends: SendView[] = [];
+}