[PM-31476] Desktop Archive Empty State Vault-V3 (#18695)

* add empty state for archive desktop

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

@@ -9,63 +9,76 @@
     [showPremiumCallout]="showPremiumCallout$ | async"
   >
   </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"
-    ></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"
+      ></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 (!["add", "edit", "view", "clone"].includes(action)) {
+    <div id="logo" class="logo">
+      <div class="content">
+        <div class="inner-content">
+          @if (activeFilter.isArchived && !(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>
 <ng-template #folderAddEdit></ng-template>

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

@@ -18,6 +18,7 @@ import { filter, map, take } from "rxjs/operators";
 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 { ItemTypes } from "@bitwarden/assets/svg";
 import { AuthRequestServiceAbstraction } from "@bitwarden/auth/common";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
@@ -58,6 +59,7 @@ import {
   ToastService,
   CopyClickListener,
   COPY_CLICK_LISTENER,
+  NoItemsModule,
 } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 import {
@@ -112,6 +114,7 @@ const BroadcasterSubscriptionId = "VaultComponent";
     ButtonModule,
     PremiumBadgeComponent,
     VaultItemsV2Component,
+    NoItemsModule,
   ],
   providers: [
     {
@@ -180,6 +183,7 @@ export class VaultComponent implements OnInit, OnDestroy, CopyClickListener {
 
   /** Tracks the disabled status of the edit cipher form */
   protected formDisabled: boolean = false;
+  protected itemTypesIcon = ItemTypes;
 
   private organizations$: Observable<Organization[]> = this.accountService.activeAccount$.pipe(
     map((a) => a?.id),
@@ -187,10 +191,9 @@ export class VaultComponent implements OnInit, OnDestroy, CopyClickListener {
     switchMap((id) => this.organizationService.organizations$(id)),
   );
 
-  protected canAccessAttachments$ = this.accountService.activeAccount$.pipe(
-    filter((account): account is Account => !!account),
-    switchMap((account) =>
-      this.billingAccountProfileStateService.hasPremiumFromAnySource$(account.id),
+  protected hasArchivedCiphers$ = this.userId$.pipe(
+    switchMap((userId) =>
+      this.cipherArchiveService.archivedCiphers$(userId).pipe(map((ciphers) => ciphers.length > 0)),
     ),
   );