Create browsers SendV2 component (#10136)

Co-authored-by: Daniel James Smith <[email protected]>

apps/browser/src/_locales/en/messages.json

@@ -2765,6 +2765,14 @@
   "deviceTrusted": {
     "message": "Device trusted"
   },
+  "sendsNoItemsTitle": {
+    "message": "No active Sends",
+    "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
+  },
+  "sendsNoItemsMessage": {
+    "message": "Use Send to securely share encrypted information with anyone.",
+    "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
+  },
   "inputRequired": {
     "message": "Input is required."
   },

apps/browser/src/popup/app-routing.module.ts

@@ -48,6 +48,7 @@ import { PasswordGeneratorHistoryComponent } from "../tools/popup/generator/pass
 import { SendAddEditComponent } from "../tools/popup/send/send-add-edit.component";
 import { SendGroupingsComponent } from "../tools/popup/send/send-groupings.component";
 import { SendTypeComponent } from "../tools/popup/send/send-type.component";
+import { SendV2Component } from "../tools/popup/send/send-v2.component";
 import { AboutPageV2Component } from "../tools/popup/settings/about-page/about-page-v2.component";
 import { AboutPageComponent } from "../tools/popup/settings/about-page/about-page.component";
 import { MoreFromBitwardenPageV2Component } from "../tools/popup/settings/about-page/more-from-bitwarden-page-v2.component";
@@ -450,12 +451,11 @@ const routes: Routes = [
         canActivate: [AuthGuard],
         data: { state: "tabs_settings" },
       }),
-      {
+      ...extensionRefreshSwap(SendGroupingsComponent, SendV2Component, {
         path: "send",
-        component: SendGroupingsComponent,
         canActivate: [AuthGuard],
         data: { state: "tabs_send" },
-      },
+      }),
     ],
   }),
   {

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

@@ -0,0 +1,21 @@
+<popup-page>
+  <popup-header slot="header" [pageTitle]="'send' | i18n">
+    <ng-container slot="end">
+      <tools-new-send-dropdown></tools-new-send-dropdown>
+
+      <app-pop-out></app-pop-out>
+      <app-current-account></app-current-account>
+    </ng-container>
+  </popup-header>
+
+  <div
+    *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>
+</popup-page>

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

@@ -0,0 +1,52 @@
+import { CommonModule } from "@angular/common";
+import { Component, OnDestroy, OnInit } 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 { ButtonModule, NoItemsModule } from "@bitwarden/components";
+import { NoSendsIcon, NewSendDropdownComponent } 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,
+  imports: [
+    PopupPageComponent,
+    PopupHeaderComponent,
+    PopOutComponent,
+    CurrentAccountComponent,
+    NoItemsModule,
+    JslibModule,
+    CommonModule,
+    ButtonModule,
+    RouterLink,
+    NewSendDropdownComponent,
+  ],
+})
+export class SendV2Component implements OnInit, OnDestroy {
+  sendType = SendType;
+
+  /** Visual state of the Sends list */
+  protected sendsListState: SendsListState | null = null;
+
+  protected noItemIcon = NoSendsIcon;
+
+  protected SendsListStateEnum = SendsListState;
+
+  constructor() {
+    this.sendsListState = SendsListState.Empty;
+  }
+
+  ngOnInit(): void {}
+
+  ngOnDestroy(): void {}
+}