zitadel/console/src/app/pages/projects/projects.component.html

<div class="max-width-container">
  <div class="enlarged-container">
    <div class="project-title-row">
      <h1>{{ 'PROJECT.PAGES.LIST' | translate }}</h1>
      <a mat-icon-button href="https://docs.zitadel.com/docs/guides/basics/projects" rel="noreferrer" target="_blank">
        <i class="las la-info-circle"></i>
      </a>
    </div>
    <p class="sub cnsl-secondary-text max-width-description">{{ 'PROJECT.PAGES.LISTDESCRIPTION' | translate }}</p>

    <div class="projects-controls">
      <div class="project-type-actions">
        <button
          class="type-button"
          [ngClass]="{ active: (projectType$ | async) === ProjectType.PROJECTTYPE_OWNED }"
          (click)="setType(ProjectType.PROJECTTYPE_OWNED)"
        >
          {{ 'PROJECT.PAGES.TYPE.OWNED' | translate }} ({{ (mgmtService?.ownedProjectsCount | async) ?? 0 }})
        </button>
        <button
          class="type-button"
          [ngClass]="{ active: (projectType$ | async) === ProjectType.PROJECTTYPE_GRANTED }"
          (click)="setType(ProjectType.PROJECTTYPE_GRANTED)"
        >
          {{ 'PROJECT.PAGES.TYPE.GRANTED' | translate }} ({{ (mgmtService?.grantedProjectsCount | async) ?? 0 }})
        </button>
      </div>
      <span class="fill-space"></span>
      <button class="grid-btn" (click)="grid = !grid" mat-icon-button [attr.data-e2e]="'toggle-grid'">
        <i *ngIf="grid" class="show list view las la-th-list"></i>
        <i *ngIf="!grid" class="las la-border-all"></i>
      </button>
    </div>

    <cnsl-project-grid
      *ngIf="grid"
      [projectType$]="projectType$"
      [zitadelProjectId]="zitadelProjectId"
      (emitAddProject)="addProject()"
    >
    </cnsl-project-grid>

    <cnsl-project-list *ngIf="!grid" [projectType$]="projectType$" [zitadelProjectId]="zitadelProjectId">
    </cnsl-project-list>
  </div>
</div>