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>