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

<div class="content">
  <div class="inner-content">
    <h2 class="sr-only">{{ "filters" | i18n }}</h2>
    <ul>
      <li [ngClass]="{ active: selectedAll }">
        <button
          type="button"
          [attr.aria-pressed]="selectedAll"
          appStopClick
          appBlurClick
          (click)="selectAll()"
        >
          <i class="bwi bwi-fw bwi-filter" aria-hidden="true"></i>&nbsp;{{ "allItems" | i18n }}
        </button>
      </li>
      <li [ngClass]="{ active: selectedFavorites }">
        <button
          type="button"
          [attr.aria-pressed]="selectedFavorites"
          appStopClick
          appBlurClick
          (click)="selectFavorites()"
        >
          <i class="bwi bwi-fw bwi-star" aria-hidden="true"></i>&nbsp;{{ "favorites" | i18n }}
        </button>
      </li>
      <li [ngClass]="{ active: selectedTrash }">
        <button
          type="button"
          [attr.aria-pressed]="selectedTrash"
          appStopClick
          appBlurClick
          (click)="selectTrash()"
        >
          <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>&nbsp;{{ "trash" | i18n }}
        </button>
      </li>
    </ul>
    <h2>{{ "types" | i18n }}</h2>
    <ul>
      <li [ngClass]="{ active: selectedType === cipherType.Login }">
        <button
          type="button"
          [attr.aria-pressed]="selectedType === cipherType.Login"
          appStopClick
          appBlurClick
          (click)="selectType(cipherType.Login)"
        >
          <i class="bwi bwi-fw bwi-globe" aria-hidden="true"></i>&nbsp;{{ "typeLogin" | i18n }}
        </button>
      </li>
      <li [ngClass]="{ active: selectedType === cipherType.Card }">
        <button
          type="button"
          [attr.aria-pressed]="selectedType === cipherType.Card"
          appStopClick
          appBlurClick
          (click)="selectType(cipherType.Card)"
        >
          <i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i>&nbsp;{{ "typeCard" | i18n }}
        </button>
      </li>
      <li [ngClass]="{ active: selectedType === cipherType.Identity }">
        <button
          type="button"
          [attr.aria-pressed]="selectedType === cipherType.Identity"
          appStopClick
          appBlurClick
          (click)="selectType(cipherType.Identity)"
        >
          <i class="bwi bwi-fw bwi-id-card" aria-hidden="true"></i>&nbsp;{{ "typeIdentity" | i18n }}
        </button>
      </li>
      <li [ngClass]="{ active: selectedType === cipherType.SecureNote }">
        <button
          type="button"
          [attr.aria-pressed]="selectedType === cipherType.SecureNote"
          appStopClick
          appBlurClick
          (click)="selectType(cipherType.SecureNote)"
        >
          <i class="bwi bwi-fw bwi-sticky-note" aria-hidden="true"></i>&nbsp;{{
            "typeSecureNote" | i18n
          }}
        </button>
      </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="bwi bwi-plus bwi-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 }"
          >
            <button
              type="button"
              [attr.aria-pressed]="selectedFolder && f.node.id === selectedFolderId"
              appStopClick
              appBlurClick
              (click)="selectFolder(f.node)"
            >
              <i
                *ngIf="f.children.length"
                class="bwi bwi-fw"
                title="{{ 'toggleCollapse' | i18n }}"
                aria-hidden="true"
                [ngClass]="{
                  'bwi-angle-right': isCollapsed(f.node),
                  'bwi-angle-down': !isCollapsed(f.node)
                }"
                (click)="collapse(f.node)"
                appStopProp
              ></i>
              <i
                *ngIf="f.children.length === 0"
                class="bwi bwi-fw bwi-folder"
                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="bwi bwi-pencil bwi-fw" aria-hidden="true"></i>
              </span>
            </button>
            <ul class="bwi-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 }"
            >
              <button
                *ngIf="c.children.length == 0"
                type="button"
                [attr.aria-pressed]="c.node.id === selectedCollectionId"
                appStopClick
                appBlurClick
                (click)="selectCollection(c.node)"
              >
                <i
                  *ngIf="c.children.length"
                  class="bwi bwi-fw"
                  title="{{ 'toggleCollapse' | i18n }}"
                  aria-hidden="true"
                  [ngClass]="{
                    'bwi-angle-right': isCollapsed(c.node),
                    'bwi-angle-down': !isCollapsed(c.node)
                  }"
                  (click)="collapse(c.node)"
                  appStopProp
                ></i>
                <i
                  *ngIf="c.children.length === 0"
                  class="bwi bwi-fw bwi-collection"
                  aria-hidden="true"
                ></i>
                &nbsp;{{ c.node.name }}
              </button>
              <ul class="bwi-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>