update send list items container

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

@@ -51,7 +51,7 @@ export class SendV2Component implements OnInit, OnDestroy {
     this.sendService.sendViews$
       .pipe(
         mergeMap(async (sends) => {
-          this.sends = sends;
+          this.sends = sends.sort((a, b) => a.name.localeCompare(b.name));
         }),
         takeUntil(this.destroy$),
       )

apps/desktop/src/locales/en/messages.json

@@ -1937,6 +1937,30 @@
   "copyLink": {
     "message": "Copy link"
   },
+  "copySendTitle": {
+    "message": "Copy link - $NAME$",
+    "placeholders": {
+      "name": {
+        "content": "$1"
+      }
+    }
+  },
+  "deleteSend": {
+    "message": "Delete - $NAME$",
+    "placeholders": {
+      "name": {
+        "content": "$1"
+      }
+    }
+  },
+  "editSendTitle": {
+    "message": "Edit - $NAME$",
+    "placeholders": {
+      "name": {
+        "content": "$1"
+      }
+    }
+  },
   "disabled": {
     "message": "Disabled"
   },

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

@@ -3,42 +3,50 @@
     <h2 class="tw-font-bold" bitTypography="h5">
       {{ "allSends" | i18n }}
     </h2>
-    <span bitTypography="body2" slot="end">{{ sends.length }}</span>
+    <span bitTypography="body1" slot="end">{{ sends.length }}</span>
   </bit-section-header>
   <bit-item-group>
     <bit-item *ngFor="let send of sends">
-      <a
+      <button
         bit-item-content
-        [routerLink]="['/view-send']"
+        [appA11yTitle]="'editSendTitle' | i18n: (send.name | i18n)"
-        [queryParams]="{ sendId: send.id, type: send.type }"
+        appStopClick
-        [appA11yTitle]="'viewItemTitle' | i18n: send.name"
+        type="button"
+        class="tw-pb-1"
       >
-        <div class="tw-flex tw-justify-between">
+        <i
-          <div class="tw-space-x-2">
+          slot="start"
-            <i
+          *ngIf="send.type === sendType.Text"
-              *ngIf="send.type === sendType.Text"
+          class="bwi bwi-file-text tw-text-2xl text-muted"
-              class="bwi bwi-file-text"
+        ></i>
-              slot="start"
+        <i
-              aria-hidden="true"
+          slot="start"
-            ></i>
+          *ngIf="send.type === sendType.File"
-            <i
+          class="bwi bwi-file tw-text-2xl text-muted"
-              *ngIf="send.type === sendType.File"
+        ></i>
-              class="bwi bwi-file"
+        {{ send.name }}
-              slot="start"
+        <span slot="secondary">
-              aria-hidden="true"
+          {{ "deletionDate" | i18n }}:&nbsp;{{ send.deletionDate | date: "mediumDate" }}
-            ></i>
+        </span>
-            <span data-testid="item-name">{{ send.name }}</span>
+        <ng-container slot="end">
-          </div>
+          <bit-item-action>
-          <div class="tw-space-x-4">
             <button
               type="button"
-              bitIconButton="bwi-clone"
+              appA11yTitle="{{ 'copySendTitle' | i18n }}: {{ send.name | i18n }}"
-              size="small"
+            >
-              [appA11yTitle]="'copyInfoTitle' | i18n: send.name"
+              <i class="bwi tw-text-lg bwi-clone"></i>
-            ></button>
+            </button>
-          </div>
+          </bit-item-action>
-        </div>
+          <bit-item-action>
-      </a>
+            <button
+              type="button"
+              appA11yTitle="{{ 'deleteSendTitle' | i18n }}: {{ send.name | i18n }}"
+            >
+              <i class="bwi tw-text-lg bwi-trash"></i>
+            </button>
+          </bit-item-action>
+        </ng-container>
+      </button>
     </bit-item>
   </bit-item-group>
 </bit-section>

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

@@ -1,22 +1,28 @@
 import { CommonModule } from "@angular/common";
 import { Component, Input } from "@angular/core";
 import { RouterLink } from "@angular/router";
+import { firstValueFrom } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
 import { SendView } from "@bitwarden/common/tools/send/models/view/send.view";
+import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.service.abstraction";
 import {
   BadgeModule,
   ButtonModule,
+  DialogService,
   IconButtonModule,
   ItemModule,
   SectionComponent,
   SectionHeaderComponent,
+  ToastService,
   TypographyModule,
 } from "@bitwarden/components";
 
-import { ContainerComponent } from "../../../../../components/src/container/container.component";
-
 @Component({
   imports: [
     CommonModule,
@@ -29,7 +35,6 @@ import { ContainerComponent } from "../../../../../components/src/container/cont
     JslibModule,
     SectionHeaderComponent,
     RouterLink,
-    ContainerComponent,
   ],
   selector: "app-send-list-items-container",
   templateUrl: "send-list-items-container.component.html",
@@ -42,4 +47,47 @@ export class SendListItemsContainerComponent {
    */
   @Input()
   sends: SendView[] = [];
+
+  constructor(
+    protected dialogService: DialogService,
+    protected environmentService: EnvironmentService,
+    protected i18nService: I18nService,
+    protected logService: LogService,
+    protected platformUtilsService: PlatformUtilsService,
+    protected sendApiService: SendApiService,
+    protected toastService: ToastService,
+  ) {}
+
+  async deleteSend(s: SendView): Promise<boolean> {
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "deleteSend" },
+      content: { key: "deleteSendConfirmation" },
+      type: "warning",
+    });
+
+    if (!confirmed) {
+      return false;
+    }
+
+    try {
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("deletedSend"),
+      });
+    } catch (e) {
+      this.logService.error(e);
+    }
+  }
+
+  async copy(s: SendView) {
+    const env = await firstValueFrom(this.environmentService.environment$);
+    const link = env.getSendUrl() + s.accessId + "/" + s.urlB64Key;
+    this.platformUtilsService.copyToClipboard(link);
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("valueCopied", this.i18nService.t("sendLink")),
+    });
+  }
 }