PM-28183 implemented new sends filter and search design (#17901)

* PM-28183 implemented new sends filter and search design

* PM-28183 resolved table issue fallout from merge conflict

* PM-28183 resolved browser paste url issue

* PM-28183 put new feature behind feature flag

* PM-28183 resolved feature flag

* PM-28183 resolved type-safe approach pr comment

* PM-28183 resolved DesktopSendUIRefresh feature flag is enabled. pr comment

* PM-28183 restored SendUIRefresh

* PM-28183 resolved query parameter subscription pr comment

* PM-28183 resolved pr comment re enum like objects

* PM-28183 resolved remove enum like objects  pr comment

* PM-28183 resolved pr comment re defining filteredSends member variable

* PM-28183 resolved pr comment re Code Duplication in syncCompleted Handler

* PM-28183 resolved pr comment re Floating Promise

* PM-28183 restored feature flag

* PM-28183 resolved pr comment re Dual Binding Pattern

* PM28183 resolved options cell button pr comment

* PM 28183 resolved pr comment re Incorrect CSS Class - Breaking Layout

* PM 28183 resolved pr comment re uery Param Update Causes Redundant Filter Application

* PM-28183 resolved lint issues

* PM 28183 resolved lint issues

* PM-28183 resolved type issue with import

* PM-28183 resolved import in failling test

* chore: rerun web build

* PM-28183 resolved build issues

* PM-28183 resolved build issues

* PM-28183 resolved lint issues

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

@@ -9,9 +9,9 @@ import { map, switchMap } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.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 { SendType } from "@bitwarden/common/tools/send/types/send-type";
 import { SendId } from "@bitwarden/common/types/guid";
 import {
   AsyncActionsModule,

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

@@ -11,9 +11,9 @@ import { EnvironmentService } from "@bitwarden/common/platform/abstractions/envi
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { SelfHostedEnvironment } from "@bitwarden/common/platform/services/default-environment.service";
-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 { SendType } from "@bitwarden/common/tools/send/types/send-type";
 import { ButtonModule, I18nMockService, IconModule, ToastService } from "@bitwarden/components";
 
 import { PopOutComponent } from "../../../../platform/popup/components/pop-out.component";

apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog-container.component.ts

@@ -2,7 +2,7 @@ import { CommonModule } from "@angular/common";
 import { Component, input, OnInit } from "@angular/core";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
+import { SendType } from "@bitwarden/common/tools/send/types/send-type";
 import { CenterPositionStrategy, DialogService } from "@bitwarden/components";
 import { SendFormConfig } from "@bitwarden/send-ui";
 

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

@@ -17,10 +17,10 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { mockAccountInfoWith } from "@bitwarden/common/spec";
-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 { SendService } from "@bitwarden/common/tools/send/services/send.service.abstraction";
+import { SendType } from "@bitwarden/common/tools/send/types/send-type";
 import { SearchService } from "@bitwarden/common/vault/abstractions/search.service";
 import { ButtonModule, NoItemsModule } from "@bitwarden/components";
 import {

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

@@ -13,7 +13,7 @@ import { AccountService } from "@bitwarden/common/auth/abstractions/account.serv
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
-import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
+import { SendType } from "@bitwarden/common/tools/send/types/send-type";
 import { PremiumUpgradePromptService } from "@bitwarden/common/vault/abstractions/premium-upgrade-prompt.service";
 import { SearchService } from "@bitwarden/common/vault/abstractions/search.service";
 import { skeletonLoadingDelay } from "@bitwarden/common/vault/utils/skeleton-loading.operator";
@@ -139,7 +139,7 @@ export class SendV2Component implements OnDestroy {
       .pipe(takeUntilDestroyed())
       .subscribe(([emptyList, noFilteredResults, currentFilter]) => {
         if (currentFilter?.sendType !== null) {
-          this.title = this.sendTypeTitles[currentFilter.sendType] ?? "allSends";
+          this.title = this.sendTypeTitles[currentFilter.sendType as SendType] ?? "allSends";
         } else {
           this.title = "allSends";
         }

apps/cli/src/tools/send/commands/create.command.ts

@@ -9,9 +9,9 @@ import { AccountService } from "@bitwarden/common/auth/abstractions/account.serv
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
-import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
 import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.service.abstraction";
 import { SendService } from "@bitwarden/common/tools/send/services/send.service.abstraction";
+import { SendType } from "@bitwarden/common/tools/send/types/send-type";
 import { NodeUtils } from "@bitwarden/node/node-utils";
 
 import { Response } from "../../../models/response";

apps/cli/src/tools/send/commands/edit.command.ts

@@ -5,9 +5,9 @@ import { firstValueFrom } from "rxjs";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
-import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
 import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.service.abstraction";
 import { SendService } from "@bitwarden/common/tools/send/services/send.service.abstraction";
+import { SendType } from "@bitwarden/common/tools/send/types/send-type";
 
 import { Response } from "../../../models/response";
 import { CliUtils } from "../../../utils";

apps/cli/src/tools/send/commands/receive.command.ts

@@ -13,11 +13,11 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { EncArrayBuffer } from "@bitwarden/common/platform/models/domain/enc-array-buffer";
 import { SymmetricCryptoKey } from "@bitwarden/common/platform/models/domain/symmetric-crypto-key";
-import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
 import { SendAccess } from "@bitwarden/common/tools/send/models/domain/send-access";
 import { SendAccessRequest } from "@bitwarden/common/tools/send/models/request/send-access.request";
 import { SendAccessView } from "@bitwarden/common/tools/send/models/view/send-access.view";
 import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.service.abstraction";
+import { SendType } from "@bitwarden/common/tools/send/types/send-type";
 import { KeyService } from "@bitwarden/key-management";
 import { NodeUtils } from "@bitwarden/node/node-utils";
 

apps/cli/src/tools/send/commands/template.command.ts

@@ -1,4 +1,4 @@
-import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
+import { SendType } from "@bitwarden/common/tools/send/types/send-type";
 
 import { Response } from "../../../models/response";
 import { TemplateResponse } from "../../../models/response/template.response";

apps/cli/src/tools/send/models/send-access.response.ts

@@ -1,7 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
 import { SendAccessView } from "@bitwarden/common/tools/send/models/view/send-access.view";
+import { SendType } from "@bitwarden/common/tools/send/types/send-type";
 
 import { BaseResponse } from "../../../models/response/base.response";
 

apps/cli/src/tools/send/models/send.response.ts

@@ -1,8 +1,8 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { Utils } from "@bitwarden/common/platform/misc/utils";
-import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
 import { SendView } from "@bitwarden/common/tools/send/models/view/send.view";
+import { SendType } from "@bitwarden/common/tools/send/types/send-type";
 
 import { BaseResponse } from "../../../models/response/base.response";
 

apps/cli/src/tools/send/send.program.ts

@@ -7,7 +7,7 @@ import * as chalk from "chalk";
 import { program, Command, Option, OptionValues } from "commander";
 
 import { Utils } from "@bitwarden/common/platform/misc/utils";
-import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
+import { SendType } from "@bitwarden/common/tools/send/types/send-type";
 
 import { BaseProgram } from "../../base-program";
 import { Response } from "../../models/response";

apps/desktop/src/app/tools/send-v2/send-filters-nav.component.spec.ts

@@ -6,7 +6,7 @@ import { BehaviorSubject } from "rxjs";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { FakeGlobalStateProvider } from "@bitwarden/common/spec";
-import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
+import { SendType } from "@bitwarden/common/tools/send/types/send-type";
 import { NavigationModule } from "@bitwarden/components";
 import { SendListFiltersService } from "@bitwarden/send-ui";
 import { GlobalStateProvider } from "@bitwarden/state";

apps/desktop/src/app/tools/send-v2/send-filters-nav.component.ts

@@ -4,7 +4,7 @@ import { toSignal } from "@angular/core/rxjs-interop";
 import { NavigationEnd, Router } from "@angular/router";
 import { filter, map, startWith } from "rxjs";
 
-import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
+import { SendType } from "@bitwarden/common/tools/send/types/send-type";
 import { NavigationModule } from "@bitwarden/components";
 import { SendListFiltersService } from "@bitwarden/send-ui";
 import { I18nPipe } from "@bitwarden/ui-common";

apps/desktop/src/app/tools/send-v2/send-v2.component.spec.ts

@@ -16,10 +16,10 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.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 { SendService } from "@bitwarden/common/tools/send/services/send.service.abstraction";
+import { SendType } from "@bitwarden/common/tools/send/types/send-type";
 import { SearchService } from "@bitwarden/common/vault/abstractions/search.service";
 import { DialogService, ToastService } from "@bitwarden/components";
 import { SendItemsService, SendListFiltersService } from "@bitwarden/send-ui";

apps/desktop/src/app/tools/send-v2/send-v2.component.ts

@@ -22,9 +22,9 @@ import { EnvironmentService } from "@bitwarden/common/platform/abstractions/envi
 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 { SendType } from "@bitwarden/common/tools/send/types/send-type";
 import { PremiumUpgradePromptService } from "@bitwarden/common/vault/abstractions/premium-upgrade-prompt.service";
 import { ButtonModule, DialogService, ToastService } from "@bitwarden/components";
 import {

apps/web/src/app/tools/send/new-send/new-send-dropdown.component.spec.ts

@@ -8,9 +8,9 @@ import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abs
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
 import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.service.abstraction";
 import { SendService } from "@bitwarden/common/tools/send/services/send.service.abstraction";
+import { SendType } from "@bitwarden/common/tools/send/types/send-type";
 import { PremiumUpgradePromptService } from "@bitwarden/common/vault/abstractions/premium-upgrade-prompt.service";
 import { SendAddEditDialogComponent } from "@bitwarden/send-ui";
 

apps/web/src/app/tools/send/new-send/new-send-dropdown.component.ts

@@ -8,7 +8,7 @@ import { AccountService } from "@bitwarden/common/auth/abstractions/account.serv
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
-import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
+import { SendType } from "@bitwarden/common/tools/send/types/send-type";
 import { ButtonModule, DialogService, MenuModule } from "@bitwarden/components";
 import {
   DefaultSendFormConfigService,

apps/web/src/app/tools/send/send-access/send-view.component.ts

@@ -11,12 +11,12 @@ import { ErrorResponse } from "@bitwarden/common/models/response/error.response"
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { SymmetricCryptoKey } from "@bitwarden/common/platform/models/domain/symmetric-crypto-key";
-import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
 import { SendAccess } from "@bitwarden/common/tools/send/models/domain/send-access";
 import { SendAccessRequest } from "@bitwarden/common/tools/send/models/request/send-access.request";
 import { SendAccessResponse } from "@bitwarden/common/tools/send/models/response/send-access.response";
 import { SendAccessView } from "@bitwarden/common/tools/send/models/view/send-access.view";
 import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.service.abstraction";
+import { SendType } from "@bitwarden/common/tools/send/types/send-type";
 import { AnonLayoutWrapperDataService, ToastService } from "@bitwarden/components";
 import { KeyService } from "@bitwarden/key-management";
 

apps/web/src/app/tools/send/send.component.html

@@ -17,100 +17,159 @@
 <bit-callout type="warning" title="{{ 'sendDisabled' | i18n }}" *ngIf="disableSend">
   {{ "sendDisabledWarning" | i18n }}
 </bit-callout>
-<div class="tw-grid tw-grid-cols-12 tw-gap-4">
-  <div class="tw-col-span-3">
-    <div class="tw-border tw-border-solid tw-border-secondary-300 tw-rounded" data-testid="filters">
-      <div
-        class="tw-bg-background-alt tw-border-0 tw-border-b tw-border-solid tw-border-secondary-100 tw-rounded-t tw-px-5 tw-py-2.5 tw-font-medium tw-uppercase"
-        data-testid="filters-header"
-      >
-        {{ "filters" | i18n }}
-      </div>
-      <div class="tw-p-5" data-testid="filters-body">
-        <div class="tw-mb-4">
-          <bit-search
-            [(ngModel)]="searchText"
-            [placeholder]="'searchSends' | i18n"
-            (input)="searchTextChanged()"
-            appAutofocus
-          />
-        </div>
-        <div class="filter">
-          <ul class="filter-options">
-            <li class="filter-option" [ngClass]="{ active: selectedAll }">
-              <span class="filter-buttons">
-                <button type="button" class="filter-button" appStopClick (click)="selectAll()">
-                  <i class="bwi bwi-fw bwi-filter"></i>{{ "allSends" | i18n }}
-                </button>
-              </span>
-            </li>
-          </ul>
-        </div>
-        <div class="filter">
-          <div class="filter-heading">
-            <h3>{{ "types" | i18n }}</h3>
-          </div>
-          <ul class="filter-options">
-            <li class="filter-option" [ngClass]="{ active: selectedType === sendType.Text }">
-              <span class="filter-buttons">
-                <button
-                  type="button"
-                  class="filter-button"
-                  appStopClick
-                  (click)="selectType(sendType.Text)"
-                >
-                  <i class="bwi bwi-fw bwi-file-text"></i>{{ "sendTypeText" | i18n }}
-                </button>
-              </span>
-            </li>
-            <li class="filter-option" [ngClass]="{ active: selectedType === sendType.File }">
-              <span class="filter-buttons">
-                <button
-                  type="button"
-                  class="filter-button"
-                  appStopClick
-                  (click)="selectType(sendType.File)"
-                >
-                  <i class="bwi bwi-fw bwi-file"></i>{{ "sendTypeFile" | i18n }}
-                </button>
-              </span>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="tw-col-span-9">
-    <tools-send-table
-      *ngIf="filteredSends && filteredSends.length"
-      [dataSource]="dataSource"
-      [disableSend]="disableSend"
-      (editSend)="editSend($event)"
-      (copySend)="copy($event)"
-      (removePassword)="removePassword($event)"
-      (deleteSend)="delete($event)"
-    />
 
-    <div *ngIf="filteredSends && !filteredSends.length">
-      <ng-container *ngIf="!loaded">
-        <i
-          class="bwi bwi-spinner bwi-spin tw-text-muted"
-          title="{{ 'loading' | i18n }}"
-          aria-hidden="true"
-        ></i>
-        <span class="tw-sr-only">{{ "loading" | i18n }}</span>
-      </ng-container>
-      <ng-container *ngIf="loaded">
-        <bit-no-items [icon]="noItemIcon" class="tw-text-main">
-          <ng-container slot="title">{{ "sendsTitleNoItems" | i18n }}</ng-container>
-          <ng-container slot="description">{{ "sendsBodyNoItems" | i18n }}</ng-container>
-          <tools-new-send-dropdown
-            [hideIcon]="true"
-            *ngIf="!disableSend"
-            slot="button"
-          ></tools-new-send-dropdown>
-        </bit-no-items>
-      </ng-container>
+@if (SendUIRefresh$ | async) {
+  <div class="tw-mb-4 tw-max-w-md">
+    <bit-search
+      [(ngModel)]="searchText"
+      [placeholder]="'searchSends' | i18n"
+      (input)="searchTextChanged()"
+      appAutofocus
+    />
+  </div>
+
+  <div class="tw-mb-4">
+    <bit-toggle-group [selected]="selectedToggleValue" (selectedChange)="onToggleChange($event)">
+      <bit-toggle [value]="'all'">{{ "allSends" | i18n }}</bit-toggle>
+      <bit-toggle [value]="'text'">{{ "sendTypeText" | i18n }}</bit-toggle>
+      <bit-toggle [value]="'file'">{{ "sendTypeFile" | i18n }}</bit-toggle>
+    </bit-toggle-group>
+  </div>
+
+  <div>
+    <div class="tw-@container/send-table">
+      <tools-send-table
+        *ngIf="filteredSends && filteredSends.length"
+        [dataSource]="dataSource"
+        [disableSend]="disableSend"
+        (editSend)="editSend($event)"
+        (copySend)="copy($event)"
+        (removePassword)="removePassword($event)"
+        (deleteSend)="delete($event)"
+      />
+
+      <div *ngIf="filteredSends && !filteredSends.length">
+        <ng-container *ngIf="!loaded">
+          <i
+            class="bwi bwi-spinner bwi-spin tw-text-muted"
+            title="{{ 'loading' | i18n }}"
+            aria-hidden="true"
+          ></i>
+          <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+        </ng-container>
+        <ng-container *ngIf="loaded">
+          <bit-no-items [icon]="noItemIcon" class="tw-text-main">
+            <ng-container slot="title">{{ "sendsTitleNoItems" | i18n }}</ng-container>
+            <ng-container slot="description">{{ "sendsBodyNoItems" | i18n }}</ng-container>
+            <tools-new-send-dropdown
+              [hideIcon]="true"
+              *ngIf="!disableSend"
+              slot="button"
+            ></tools-new-send-dropdown>
+          </bit-no-items>
+        </ng-container>
+      </div>
     </div>
   </div>
-</div>
+} @else {
+  <div class="tw-grid tw-grid-cols-12 tw-gap-4">
+    <div class="tw-col-span-3">
+      <div
+        class="tw-border tw-border-solid tw-border-secondary-300 tw-rounded"
+        data-testid="filters"
+      >
+        <div
+          class="tw-bg-background-alt tw-border-0 tw-border-b tw-border-solid tw-border-secondary-100 tw-rounded-t tw-px-5 tw-py-2.5 tw-font-medium tw-uppercase"
+          data-testid="filters-header"
+        >
+          {{ "filters" | i18n }}
+        </div>
+        <div class="tw-p-5" data-testid="filters-body">
+          <div class="tw-mb-4">
+            <bit-search
+              [(ngModel)]="searchText"
+              [placeholder]="'searchSends' | i18n"
+              (input)="searchTextChanged()"
+              appAutofocus
+            />
+          </div>
+          <div class="filter">
+            <ul class="filter-options">
+              <li class="filter-option" [ngClass]="{ active: selectedAll }">
+                <span class="filter-buttons">
+                  <button type="button" class="filter-button" appStopClick (click)="selectAll()">
+                    <i class="bwi bwi-fw bwi-filter"></i>{{ "allSends" | i18n }}
+                  </button>
+                </span>
+              </li>
+            </ul>
+          </div>
+          <div class="filter">
+            <div class="filter-heading">
+              <h3>{{ "types" | i18n }}</h3>
+            </div>
+            <ul class="filter-options">
+              <li class="filter-option" [ngClass]="{ active: selectedType === sendType.Text }">
+                <span class="filter-buttons">
+                  <button
+                    type="button"
+                    class="filter-button"
+                    appStopClick
+                    (click)="selectType(sendType.Text)"
+                  >
+                    <i class="bwi bwi-fw bwi-file-text"></i>{{ "sendTypeText" | i18n }}
+                  </button>
+                </span>
+              </li>
+              <li class="filter-option" [ngClass]="{ active: selectedType === sendType.File }">
+                <span class="filter-buttons">
+                  <button
+                    type="button"
+                    class="filter-button"
+                    appStopClick
+                    (click)="selectType(sendType.File)"
+                  >
+                    <i class="bwi bwi-fw bwi-file"></i>{{ "sendTypeFile" | i18n }}
+                  </button>
+                </span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tw-col-span-9 tw-@container/send-table">
+      <!--Listing Table-->
+      <tools-send-table
+        *ngIf="filteredSends && filteredSends.length"
+        [dataSource]="dataSource"
+        [disableSend]="disableSend"
+        (editSend)="editSend($event)"
+        (copySend)="copy($event)"
+        (removePassword)="removePassword($event)"
+        (deleteSend)="delete($event)"
+      />
+      <div *ngIf="filteredSends && !filteredSends.length">
+        <ng-container *ngIf="!loaded">
+          <i
+            class="bwi bwi-spinner bwi-spin tw-text-muted"
+            title="{{ 'loading' | i18n }}"
+            aria-hidden="true"
+          ></i>
+          <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+        </ng-container>
+        <ng-container *ngIf="loaded">
+          <bit-no-items [icon]="noItemIcon" class="tw-text-main">
+            <ng-container slot="title">{{ "sendsTitleNoItems" | i18n }}</ng-container>
+            <ng-container slot="description">{{ "sendsBodyNoItems" | i18n }}</ng-container>
+            <tools-new-send-dropdown
+              [hideIcon]="true"
+              *ngIf="!disableSend"
+              slot="button"
+            ></tools-new-send-dropdown>
+          </bit-no-items>
+        </ng-container>
+      </div>
+    </div>
+  </div>
+}

apps/web/src/app/tools/send/send.component.ts

@@ -1,7 +1,9 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { Component, NgZone, OnInit, OnDestroy } from "@angular/core";
-import { lastValueFrom } from "rxjs";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { ActivatedRoute, Router } from "@angular/router";
+import { lastValueFrom, Observable, switchMap, EMPTY } from "rxjs";
 
 import { SendComponent as BaseSendComponent } from "@bitwarden/angular/tools/send/send.component";
 import { NoSendsIcon } from "@bitwarden/assets/svg";
@@ -17,6 +19,8 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { SendView } from "@bitwarden/common/tools/send/models/view/send.view";
 import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.service.abstraction";
 import { SendService } from "@bitwarden/common/tools/send/services/send.service.abstraction";
+import { SendFilterType } from "@bitwarden/common/tools/send/types/send-filter-type";
+import { SendType } from "@bitwarden/common/tools/send/types/send-type";
 import { SendId } from "@bitwarden/common/types/guid";
 import { SearchService } from "@bitwarden/common/vault/abstractions/search.service";
 import {
@@ -26,6 +30,7 @@ import {
   SearchModule,
   TableDataSource,
   ToastService,
+  ToggleGroupModule,
 } from "@bitwarden/components";
 import {
   DefaultSendFormConfigService,
@@ -53,6 +58,7 @@ const BroadcasterSubscriptionId = "SendComponent";
     NoItemsModule,
     HeaderModule,
     NewSendDropdownComponent,
+    ToggleGroupModule,
     SendTableComponent,
   ],
   templateUrl: "send.component.html",
@@ -61,6 +67,8 @@ const BroadcasterSubscriptionId = "SendComponent";
 export class SendComponent extends BaseSendComponent implements OnInit, OnDestroy {
   private sendItemDialogRef?: DialogRef<SendItemDialogResult> | undefined;
   noItemIcon = NoSendsIcon;
+  selectedToggleValue?: SendFilterType;
+  SendUIRefresh$: Observable<boolean>;
 
   override set filteredSends(filteredSends: SendView[]) {
     super.filteredSends = filteredSends;
@@ -88,6 +96,8 @@ export class SendComponent extends BaseSendComponent implements OnInit, OnDestro
     toastService: ToastService,
     private addEditFormConfigService: DefaultSendFormConfigService,
     accountService: AccountService,
+    private route: ActivatedRoute,
+    private router: Router,
     private configService: ConfigService,
   ) {
     super(
@@ -104,10 +114,38 @@ export class SendComponent extends BaseSendComponent implements OnInit, OnDestro
       toastService,
       accountService,
     );
+
+    this.SendUIRefresh$ = this.configService.getFeatureFlag$(FeatureFlag.SendUIRefresh);
+
+    this.SendUIRefresh$.pipe(
+      switchMap((sendUiRefreshEnabled) => {
+        if (sendUiRefreshEnabled) {
+          return this.route.queryParamMap;
+        }
+        return EMPTY;
+      }),
+      takeUntilDestroyed(),
+    ).subscribe((params) => {
+      const typeParam = params.get("type");
+      const value = (
+        typeParam === SendFilterType.Text || typeParam === SendFilterType.File
+          ? typeParam
+          : SendFilterType.All
+      ) as SendFilterType;
+      this.selectedToggleValue = value;
+
+      if (this.loaded) {
+        this.applyTypeFilter(value);
+      }
+    });
   }
 
   async ngOnInit() {
     await super.ngOnInit();
+    this.onSuccessfulLoad = async () => {
+      this.applyTypeFilter(this.selectedToggleValue);
+    };
+
     await this.load();
 
     // Broadcaster subscription - load if sync completes in the background
@@ -194,4 +232,28 @@ export class SendComponent extends BaseSendComponent implements OnInit, OnDestro
       });
     }
   }
+
+  private applyTypeFilter(value: SendFilterType) {
+    if (value === SendFilterType.All) {
+      this.selectAll();
+    } else if (value === SendFilterType.Text) {
+      this.selectType(SendType.Text);
+    } else if (value === SendFilterType.File) {
+      this.selectType(SendType.File);
+    }
+  }
+
+  onToggleChange(value: SendFilterType) {
+    const queryParams = value === SendFilterType.All ? { type: null } : { type: value };
+
+    this.router
+      .navigate([], {
+        relativeTo: this.route,
+        queryParams,
+        queryParamsHandling: "merge",
+      })
+      .catch((err) => {
+        this.logService.error("Failed to update route query params:", err);
+      });
+  }
 }

apps/web/src/app/tools/send/shared/send-success-drawer-dialog.component.ts

@@ -5,8 +5,8 @@ import { ActiveSendIcon } from "@bitwarden/assets/svg";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.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 { SendType } from "@bitwarden/common/tools/send/types/send-type";
 import { DIALOG_DATA, DialogModule, ToastService, TypographyModule } from "@bitwarden/components";
 import { SharedModule } from "@bitwarden/web-vault/app/shared";