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

<div class="mac-bar"></div>
<div class="content">
    <div class="inner-content">
        <h2 class="sr-only">{{'filters' | i18n}}</h2>
        <ul>
            <li [ngClass]="{active: selectedAll}">
                <a href="#" appStopClick appBlurClick (click)="selectAll()">
                    <i class="fa fa-fw fa-th" aria-hidden="true"></i>&nbsp;{{'allItems' | i18n}}
                </a>
            </li>
            <li [ngClass]="{active: selectedFavorites}">
                <a href="#" appStopClick appBlurClick (click)="selectFavorites()">
                    <i class="fa fa-fw fa-star" aria-hidden="true"></i>&nbsp;{{'favorites' | i18n}}
                </a>
            </li>
            <li [ngClass]="{active: selectedTrash}">
                <a href="#" appStopClick appBlurClick (click)="selectTrash()">
                    <i class="fa fa-fw fa-trash-o" aria-hidden="true"></i>&nbsp;{{'trash' | 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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></i>&nbsp;{{'typeSecureNote' | i18n}}
                </a>
            </li>
        </ul>
        <p *ngIf="!loaded" class="text-muted">{{'loading' | i18n}}</p>
        <ng-container *ngIf="loaded">
            <div class="heading">
                <h2>{{'folders' | i18n}}</h2>
                <button appBlurClick (click)="addFolder()" appA11yTitle="{{'addFolder' | i18n}}">
                    <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
                </button>
            </div>
            <ul>
                <ng-template #recursiveFolders let-folders>
                    <li *ngFor="let f of folders"
                        [ngClass]="{active: selectedFolder && f.node.id === selectedFolderId}">
                        <a href="#" appStopClick appBlurClick (click)="selectFolder(f.node)">
                            <i *ngIf="f.children.length" class="fa-fw fa" title="{{'toggleCollapse' | i18n}}" aria-hidden="true"
                                [ngClass]="{'fa-caret-right': isCollapsed(f.node), 'fa-caret-down': !isCollapsed(f.node)}"
                                (click)="collapse(f.node)" appStopProp></i>
                            <i *ngIf="f.children.length === 0" class="fa-fw fa fa-folder-o" aria-hidden="true"></i>
                            &nbsp;{{f.node.name}}
                            <span appStopProp appStopClick (click)="editFolder(f.node)" role="button"
                                appA11yTitle="{{'editFolder' | i18n}}" *ngIf="f.node.id">
                                <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>
                            </span>
                        </a>
                        <ul class="fa-ul" *ngIf="f.children.length && !isCollapsed(f.node)">
                            <ng-container *ngTemplateOutlet="recursiveFolders; context:{ $implicit: f.children }">
                            </ng-container>
                        </ul>
                    </li>
                </ng-template>
                <ng-container *ngTemplateOutlet="recursiveFolders; context:{ $implicit: nestedFolders }"></ng-container>
            </ul>
            <div *ngIf="collections && collections.length">
                <h2>{{'collections' | i18n}}</h2>
                <ul>
                    <ng-template #recursiveCollections let-collections>
                        <li *ngFor="let c of collections" [ngClass]="{active: c.node.id === selectedCollectionId}">
                            <a href="#" appStopClick appBlurClick (click)="selectCollection(c.node)">
                                <i *ngIf="c.children.length" class="fa-fw fa" title="{{'toggleCollapse' | i18n}}" aria-hidden="true"
                                    [ngClass]="{'fa-caret-right': isCollapsed(c.node), 'fa-caret-down': !isCollapsed(c.node)}"
                                    (click)="collapse(c.node)" appStopProp></i>
                                <i *ngIf="c.children.length === 0" class="fa-fw fa fa-cube" aria-hidden="true"></i>
                                &nbsp;{{c.node.name}}
                            </a>
                            <ul class="fa-ul" *ngIf="c.children.length && !isCollapsed(c.node)">
                                <ng-container
                                    *ngTemplateOutlet="recursiveCollections; context:{ $implicit: c.children }">
                                </ng-container>
                            </ul>
                        </li>
                    </ng-template>
                    <ng-container *ngTemplateOutlet="recursiveCollections; context:{ $implicit: nestedCollections }">
                    </ng-container>
                </ul>
            </div>
        </ng-container>
    </div>
    <div class="footer">
        <app-nav class="nav"></app-nav>
    </div>
</div>