browser/src/app/vault/vault.component.html

<div class="container page-content">
    <div class="row">
        <div class="col-3">
            <app-vault-groupings (onAllClicked)="clearGroupingFilters()" (onFavoritesClicked)="filterFavorites()"
                (onCipherTypeClicked)="filterCipherType($event)" (onFolderClicked)="filterFolder($event.id)"
                (onAddFolder)="addFolder()" (onEditFolder)="editFolder($event.id)"
                (onCollectionClicked)="filterCollection($event.id)" (onSearchTextChanged)="filterSearchText($event)">
            </app-vault-groupings>
        </div>
        <div class="col-6">
            <div class="page-header d-flex">
                <h1>
                    {{'myVault' | i18n}}
                    <small #actionSpinner [appApiAction]="ciphersComponent.actionPromise">
                        <ng-container *ngIf="actionSpinner.loading">
                            <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"
                                aria-hidden="true"></i>
                            <span class="sr-only">{{'loading' | i18n}}</span>
                        </ng-container>
                    </small>
                </h1>
                <div class="ml-auto d-flex">
                    <div class="dropdown mr-2" appListDropdown>
                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button"
                            id="bulkActionsButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                            appA11yTitle="{{'options' | i18n}}">
                            <i class="fa fa-cog" aria-hidden="true"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bulkActionsButton">
                            <a class="dropdown-item" href="#" appStopClick (click)="bulkMove()">
                                <i class="fa fa-fw fa-share" aria-hidden="true"></i>
                                {{'moveSelected' | i18n}}
                            </a>
                            <a class="dropdown-item" href="#" appStopClick (click)="bulkShare()">
                                <i class="fa fa-fw fa-share-alt" aria-hidden="true"></i>
                                {{'shareSelected' | i18n}}
                            </a>
                            <a class="dropdown-item text-danger" href="#" (click)="bulkDelete()">
                                <i class="fa fa-fw fa-trash-o" aria-hidden="true"></i>
                                {{'deleteSelected' | i18n}}
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#" appStopClick (click)="selectAll(true)">
                                <i class="fa fa-fw fa-check-square-o" aria-hidden="true"></i>
                                {{'selectAll' | i18n}}
                            </a>
                            <a class="dropdown-item" href="#" appStopClick (click)="selectAll(false)">
                                <i class="fa fa-fw fa-minus-square-o" aria-hidden="true"></i>
                                {{'unselectAll' | i18n}}
                            </a>
                        </div>
                    </div>
                    <button type="button" class="btn btn-outline-primary btn-sm" (click)="addCipher()">
                        <i class="fa fa-plus fa-fw" aria-hidden="true"></i>{{'addItem' | i18n}}
                    </button>
                </div>
            </div>
            <app-vault-ciphers (onCipherClicked)="editCipher($event)"
                (onAttachmentsClicked)="editCipherAttachments($event)" (onAddCipher)="addCipher()"
                (onShareClicked)="shareCipher($event)" (onCollectionsClicked)="editCipherCollections($event)"
                (onCloneClicked)="cloneCipher($event)">
            </app-vault-ciphers>
        </div>
        <div class="col-3">
            <div class="card border-warning mb-4" *ngIf="showUpdateKey">
                <div class="card-header bg-warning text-white">
                    <i class="fa fa-warning fa-fw" aria-hidden="true"></i> {{'updateKeyTitle' | i18n}}
                </div>
                <div class="card-body">
                    <p>{{'updateEncryptionKeyShortDesc' | i18n}}</p>
                    <button class="btn btn-block btn-outline-secondary" type="button" (click)="updateKey()">
                        {{'updateEncryptionKey' | i18n}}
                    </button>
                </div>
            </div>
            <app-verify-email *ngIf="showVerifyEmail" class="d-block mb-4"></app-verify-email>
            <div class="card border-warning mb-4" *ngIf="showBrowserOutdated">
                <div class="card-header bg-warning text-white">
                    <i class="fa fa-warning fa-fw" aria-hidden="true"></i> {{'updateBrowser' | i18n}}
                </div>
                <div class="card-body">
                    <p>{{'updateBrowserDesc' | i18n}}</p>
                    <a class="btn btn-block btn-outline-secondary" target="_blank"
                        href="https://browser-update.org/update-browser.html" rel="noopener">
                        {{'updateBrowser' | i18n}}
                    </a>
                </div>
            </div>
            <div class="card border-success mb-4" *ngIf="showPremiumCallout">
                <div class="card-header bg-success text-white">
                    <i class="fa fa-star fa-fw" aria-hidden="true"></i> {{'goPremium' | i18n}}
                </div>
                <div class="card-body">
                    <p>{{'premiumUpgradeUnlockFeatures' | i18n}}</p>
                    <a class="btn btn-block btn-outline-secondary" routerLink="/settings/premium">
                        {{'goPremium' | i18n}}
                    </a>
                </div>
            </div>
            <div class="card">
                <div class="card-header d-flex">
                    {{'organizations' | i18n}}
                    <a class="ml-auto" href="https://help.bitwarden.com/article/what-is-an-organization/"
                        target="_blank" rel="noopener" appA11yTitle="{{'learnMore' | i18n}}">
                        <i class="fa fa-question-circle-o" aria-hidden="true"></i>
                    </a>
                </div>
                <div class="card-body">
                    <app-organizations [vault]="true"></app-organizations>
                </div>
            </div>
        </div>
    </div>
</div>
<ng-template #attachments></ng-template>
<ng-template #folderAddEdit></ng-template>
<ng-template #cipherAddEdit></ng-template>
<ng-template #share></ng-template>
<ng-template #collections></ng-template>
<ng-template #bulkDeleteTemplate></ng-template>
<ng-template #bulkMoveTemplate></ng-template>
<ng-template #bulkShareTemplate></ng-template>
<ng-template #updateKeyTemplate></ng-template>