[Feature] End User Vault Refresh (#2545)

* Initial org filter work

* update jslib

* Move filter to below cipher length check

* don't show vault filter in personal or org folder

* Use family icon for families org

* jslib and auth guard updates

* lint fixes

* rename GroupingsComponent to VaultFilterComponent

* fix no folder showing all items

* Add checks for PersonalOwnership policy

* update css class names

* lint fixes

* cleanup

* Some final cleanup

* import order lint fix

* remove unused import

* Use smaller icon for chevron

* Update src/popup/vault/organization-filter.component.ts

Co-authored-by: Addison Beck <addisonbeck1@gmail.com>

* Update src/popup/vault/organization-filter.component.ts

Co-authored-by: Addison Beck <addisonbeck1@gmail.com>

* fix lint error

* remove extra localizations

* rename orgFilter -> vaultSelect

* Rename orgFilterService to VaultSelectService

* lint fixes

* combine vault select service with vault filter service

* Use base vault filter service methods

* Use VaultFilter model and other small fixes

* lint fixes

* Final restructuring pass

* Update jslib and remove extra function

* Remove extra imports

* remove space

* Remove vaultFilterService from background services

* Update jslib to latest on feature branch

* merge fix

* update jslib

* [feat] Implement EUVR for desktop

Should contain only https://github.com/bitwarden/desktop/pull/1487, with merge resolutions and style fixes

* [fix] Delete unused GroupingsComponentTemplate

* [dep] Update jslib

Co-authored-by: Addison Beck <addisonbeck1@gmail.com>

apps/desktop/src/app/vault/ciphers.component.html

@@ -1,65 +1,67 @@
-<div class="content">
-  <cdk-virtual-scroll-viewport
-    itemSize="42"
-    minBufferPx="400"
-    maxBufferPx="600"
-    *ngIf="ciphers.length"
-  >
-    <div class="list">
-      <button
-        type="button"
-        *cdkVirtualFor="let c of ciphers; trackBy: trackByFn"
-        appStopClick
-        (click)="selectCipher(c)"
-        (contextmenu)="rightClickCipher(c)"
-        title="{{ 'viewItem' | i18n }}"
-        [ngClass]="{ active: c.id === activeCipherId }"
-        [attr.aria-pressed]="c.id === activeCipherId"
-        class="flex-list-item virtual-scroll-item"
-      >
-        <app-vault-icon [cipher]="c"></app-vault-icon>
-        <div class="flex-cipher-list-item">
-          <span class="text">
-            {{ c.name }}
-            <ng-container *ngIf="c.organizationId">
-              <i
-                class="bwi bwi-collection text-muted"
-                title="{{ 'shared' | i18n }}"
-                aria-hidden="true"
-              ></i>
-              <span class="sr-only">{{ "shared" | i18n }}</span>
-            </ng-container>
-            <ng-container *ngIf="c.hasAttachments">
-              <i
-                class="bwi bwi-paperclip text-muted"
-                title="{{ 'attachments' | i18n }}"
-                aria-hidden="true"
-              ></i>
-              <span class="sr-only">{{ "attachments" | i18n }}</span>
-            </ng-container>
-          </span>
-          <span *ngIf="c.subTitle" class="detail">{{ c.subTitle }}</span>
-        </div>
-      </button>
-    </div>
-  </cdk-virtual-scroll-viewport>
-  <div class="no-items" *ngIf="!ciphers.length">
-    <i class="bwi bwi-spinner bwi-spin bwi-3x" *ngIf="!loaded" aria-hidden="true"></i>
-    <ng-container *ngIf="loaded">
+<div class="container loading-spinner" *ngIf="!loaded">
+  <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
+</div>
+<ng-container *ngIf="loaded">
+  <div class="content">
+    <cdk-virtual-scroll-viewport
+      itemSize="42"
+      minBufferPx="400"
+      maxBufferPx="600"
+      *ngIf="ciphers.length"
+    >
+      <div class="list">
+        <button
+          type="button"
+          *cdkVirtualFor="let c of ciphers; trackBy: trackByFn"
+          appStopClick
+          (click)="selectCipher(c)"
+          (contextmenu)="rightClickCipher(c)"
+          title="{{ 'viewItem' | i18n }}"
+          [ngClass]="{ active: c.id === activeCipherId }"
+          [attr.aria-pressed]="c.id === activeCipherId"
+          class="flex-list-item virtual-scroll-item"
+        >
+          <app-vault-icon [cipher]="c"></app-vault-icon>
+          <div class="flex-cipher-list-item">
+            <span class="text">
+              {{ c.name }}
+              <ng-container *ngIf="c.organizationId">
+                <i
+                  class="bwi bwi-collection text-muted"
+                  title="{{ 'shared' | i18n }}"
+                  aria-hidden="true"
+                ></i>
+                <span class="sr-only">{{ "shared" | i18n }}</span>
+              </ng-container>
+              <ng-container *ngIf="c.hasAttachments">
+                <i
+                  class="bwi bwi-paperclip text-muted"
+                  title="{{ 'attachments' | i18n }}"
+                  aria-hidden="true"
+                ></i>
+                <span class="sr-only">{{ "attachments" | i18n }}</span>
+              </ng-container>
+            </span>
+            <span *ngIf="c.subTitle" class="detail">{{ c.subTitle }}</span>
+          </div>
+        </button>
+      </div>
+    </cdk-virtual-scroll-viewport>
+    <div class="no-items" *ngIf="!ciphers.length">
       <img class="no-items-image" aria-hidden="true" />
       <p>{{ "noItemsInList" | i18n }}</p>
       <button (click)="addCipher()" class="btn block primary link">{{ "addItem" | i18n }}</button>
-    </ng-container>
+    </div>
+    <div class="footer">
+      <button
+        (click)="addCipher()"
+        (contextmenu)="addCipherOptions()"
+        class="block primary"
+        appA11yTitle="{{ 'addItem' | i18n }}"
+        [disabled]="deleted"
+      >
+        <i class="bwi bwi-plus bwi-lg" aria-hidden="true"></i>
+      </button>
+    </div>
   </div>
-</div>
-<div class="footer">
-  <button
-    (click)="addCipher()"
-    (contextmenu)="addCipherOptions()"
-    class="block primary"
-    appA11yTitle="{{ 'addItem' | i18n }}"
-    [disabled]="deleted"
-  >
-    <i class="bwi bwi-plus bwi-lg" aria-hidden="true"></i>
-  </button>
-</div>
+</ng-container>