bitwarden-desktop/src/app/vault/groupings.component.html

<div class="content">
    <div class="inner-content">
        <ul>
            <li [ngClass]="{active: selectedAll}">
                <a href="#" appStopClick appBlurClick (click)="selectAll()">
                    <i class="fa fa-fw fa-th"></i>&nbsp;{{'allItems' | i18n}}
                </a>
            </li>
            <li [ngClass]="{active: selectedFavorites}">
                <a href="#" appStopClick appBlurClick (click)="selectFavorites()">
                    <i class="fa fa-fw fa-star"></i>&nbsp;{{'favorites' | i18n}}
                </a>
            </li>
        </ul>
        <h2>{{'types' | i18n}}</h2>
        <ul>
            <li [ngClass]="{active: selectedType === cipherType.Login}">
                <a href="#" appStopClick appBlurClick (click)="selectType(cipherType.Login)">
                    <i class="fa fa-fw fa-globe"></i>&nbsp;{{'typeLogin' | i18n}}
                </a>
            </li>
            <li [ngClass]="{active: selectedType === cipherType.Card}">
                <a href="#" appStopClick appBlurClick (click)="selectType(cipherType.Card)">
                    <i class="fa fa-fw fa-credit-card"></i>&nbsp;{{'typeCard' | i18n}}
                </a>
            </li>
            <li [ngClass]="{active: selectedType === cipherType.Identity}">
                <a href="#" appStopClick appBlurClick (click)="selectType(cipherType.Identity)">
                    <i class="fa fa-fw fa-id-card-o"></i>&nbsp;{{'typeIdentity' | i18n}}
                </a>
            </li>
            <li [ngClass]="{active: selectedType === cipherType.SecureNote}">
                <a href="#" appStopClick appBlurClick (click)="selectType(cipherType.SecureNote)">
                    <i class="fa fa-fw fa-sticky-note-o"></i>&nbsp;{{'typeSecureNote' | i18n}}
                </a>
            </li>
        </ul>
        <p *ngIf="!loaded" class="text-muted">{{'loading' | i18n}}</p>
        <ng-container *ngIf="loaded">
            <h2>
                {{'folders' | i18n}}
                <button appBlurClick (click)="addFolder()" title="{{'addFolder' | i18n}}">
                    <i class="fa fa-plus fa-fw"></i>
                </button>
            </h2>
            <ul class="fa-ul">
                <li *ngFor="let f of folders" [ngClass]="{active: selectedFolder && f.id === selectedFolderId}">
                    <a href="#" appStopClick appBlurClick (click)="selectFolder(f)">
                        <i class="fa-li fa fa-caret-right"></i> {{f.name}}
                        <span appStopProp appStopClick (click)="editFolder(f)" title="{{'editFolder' | i18n}}"
                              *ngIf="f.id">
                            <i class="fa fa-pencil fa-fw"></i>
                        </span>
                    </a>
                </li>
            </ul>
            <div *ngIf="collections && collections.length">
                <h2>{{'collections' | i18n}}</h2>
                <ul class="fa-ul">
                    <li *ngFor="let c of collections" [ngClass]="{active: c.id === selectedCollectionId}">
                        <a href="#" appStopClick appBlurClick (click)="selectCollection(c)">
                            <i class="fa-li fa fa-caret-right"></i> {{c.name}}
                        </a>
                    </li>
                </ul>
            </div>
        </ng-container>
    </div>
</div>