[PM-30857] add empty state to desktop archives (#18414)

* add empty state to desktop archives

apps/desktop/src/vault/app/vault/vault-v2.component.html

@@ -10,69 +10,79 @@
     [organizationId]="organizationId"
   >
   </app-vault-items-v2>
-  <div class="details" *ngIf="!!action">
-    <app-vault-item-footer
-      id="footer"
-      #footer
-      [cipher]="cipher()"
-      [action]="action"
-      (onEdit)="editCipher($event)"
-      (onRestore)="restoreCipher()"
-      (onClone)="cloneCipher($event)"
-      (onDelete)="deleteCipher()"
-      (onCancel)="cancelCipher($event)"
-      (onArchiveToggle)="refreshCurrentCipher()"
-      [masterPasswordAlreadyPrompted]="cipherRepromptId === cipherId"
-      [submitButtonText]="submitButtonText()"
-    ></app-vault-item-footer>
-    <div class="content">
-      <div class="inner-content">
-        <div class="box">
-          <app-cipher-view
-            *ngIf="action === 'view'"
-            [cipher]="cipher()"
-            [collections]="collections"
-          >
-          </app-cipher-view>
-          <vault-cipher-form
-            #vaultForm
-            *ngIf="action === 'add' || action === 'edit' || action === 'clone'"
-            formId="cipherForm"
-            [config]="config"
-            (cipherSaved)="savedCipher($event)"
-            [submitBtn]="footer?.submitBtn"
-            (formStatusChange$)="formStatusChanged($event)"
-          >
-            <bit-item slot="attachment-button">
-              <button
-                bit-item-content
-                type="button"
-                (click)="openAttachmentsDialog()"
-                [disabled]="formDisabled"
+  @if (!!action) {
+    <div class="details">
+      <app-vault-item-footer
+        id="footer"
+        #footer
+        [cipher]="cipher()"
+        [action]="action"
+        (onEdit)="editCipher($event)"
+        (onRestore)="restoreCipher()"
+        (onClone)="cloneCipher($event)"
+        (onDelete)="deleteCipher()"
+        (onCancel)="cancelCipher($event)"
+        (onArchiveToggle)="refreshCurrentCipher()"
+        [masterPasswordAlreadyPrompted]="cipherRepromptId === cipherId"
+        [submitButtonText]="submitButtonText()"
+      ></app-vault-item-footer>
+      <div class="content">
+        <div class="inner-content">
+          <div class="box">
+            @if (action === "view") {
+              <app-cipher-view [cipher]="cipher()" [collections]="collections"> </app-cipher-view>
+            }
+            @if (action === "add" || action === "edit" || action === "clone") {
+              <vault-cipher-form
+                #vaultForm
+                formId="cipherForm"
+                [config]="config"
+                (cipherSaved)="savedCipher($event)"
+                [submitBtn]="footer?.submitBtn"
+                (formStatusChange$)="formStatusChanged($event)"
               >
-                <div class="tw-flex tw-items-center tw-gap-2">
-                  {{ "attachments" | i18n }}
-                  <app-premium-badge></app-premium-badge>
-                </div>
-                <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
-              </button>
-            </bit-item>
-          </vault-cipher-form>
+                <bit-item slot="attachment-button">
+                  <button
+                    bit-item-content
+                    type="button"
+                    (click)="openAttachmentsDialog()"
+                    [disabled]="formDisabled"
+                  >
+                    <div class="tw-flex tw-items-center tw-gap-2">
+                      {{ "attachments" | i18n }}
+                      <app-premium-badge></app-premium-badge>
+                    </div>
+                    <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
+                  </button>
+                </bit-item>
+              </vault-cipher-form>
+            }
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    id="logo"
-    class="logo"
-    *ngIf="action !== 'add' && action !== 'edit' && action !== 'view' && action !== 'clone'"
-  >
-    <div class="content">
-      <div class="inner-content">
-        <img class="logo-image" alt="Bitwarden" aria-hidden="true" />
+  }
+  @if (action !== "add" && action !== "edit" && action !== "view" && action !== "clone") {
+    <div id="logo" class="logo">
+      <div class="content">
+        <div class="inner-content">
+          @if (activeFilter.status === "archive" && !(hasArchivedCiphers$ | async)) {
+            <bit-no-items [icon]="itemTypesIcon">
+              <div slot="title">
+                {{ "noItemsInArchive" | i18n }}
+              </div>
+              <p slot="description" bitTypography="body2" class="tw-max-w-md tw-text-center">
+                {{ "noItemsInArchiveDesc" | i18n }}
+              </p>
+            </bit-no-items>
+          } @else {
+            <img class="logo-image" alt="Bitwarden" aria-hidden="true" />
+          }
+        </div>
       </div>
     </div>
-  </div>
+  }
+
   <div class="left-nav">
     <app-vault-filter
       class="vault-filters"

apps/desktop/src/vault/app/vault/vault-v2.component.ts

@@ -27,6 +27,7 @@ import { CollectionService } from "@bitwarden/admin-console/common";
 import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
 import { VaultViewPasswordHistoryService } from "@bitwarden/angular/services/view-password-history.service";
 import { VaultFilter } from "@bitwarden/angular/vault/vault-filter/models/vault-filter.model";
+import { ItemTypes } from "@bitwarden/assets/svg";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
@@ -69,6 +70,7 @@ import {
   ToastService,
   CopyClickListener,
   COPY_CLICK_LISTENER,
+  NoItemsModule,
 } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 import {
@@ -124,6 +126,7 @@ const BroadcasterSubscriptionId = "VaultComponent";
     NavComponent,
     VaultFilterModule,
     VaultItemsV2Component,
+    NoItemsModule,
   ],
   providers: [
     {
@@ -203,6 +206,7 @@ export class VaultV2Component<C extends CipherViewLike>
   collections: CollectionView[] | null = null;
   config: CipherFormConfig | null = null;
   readonly userHasPremium = signal<boolean>(false);
+  protected itemTypesIcon = ItemTypes;
 
   /** Tracks the disabled status of the edit cipher form */
   protected formDisabled: boolean = false;
@@ -221,6 +225,12 @@ export class VaultV2Component<C extends CipherViewLike>
       : this.i18nService.t("save");
   });
 
+  protected hasArchivedCiphers$ = this.userId$.pipe(
+    switchMap((userId) =>
+      this.cipherArchiveService.archivedCiphers$(userId).pipe(map((ciphers) => ciphers.length > 0)),
+    ),
+  );
+
   private componentIsDestroyed$ = new Subject<boolean>();
   private allOrganizations: Organization[] = [];
   private allCollections: CollectionView[] = [];