fix: new context component (#2823)

console/src/app/app.component.html

@@ -20,40 +20,19 @@
         </svg>
       </ng-container>
 
-      <button class="org-button" (click)="loadOrgs()" *ngIf="user && org" mat-button [matMenuTriggerFor]="menu"
-        (menuOpened)="focusFilter()">{{org?.name ? org.name : 'NO NAME'}}
-        <mat-icon>
-          arrow_drop_down</mat-icon>
-      </button>
+      <div class="org-context-wrapper" (clickOutside)="showOrgContext ? showOrgContext = false: null">
+        <button class="org-button dontcloseonclick" (click)="showOrgContext = !showOrgContext" *ngIf="user && org"
+          mat-button>{{org?.name
+          ?
+          org.name : 'NO NAME'}}
+          <mat-icon class="dontcloseonclick">
+            arrow_drop_down</mat-icon>
+        </button>
+        <cnsl-org-context class="context_card" *ngIf="showOrgContext" (closedCard)="showOrgContext = false" [org]="org"
+          (setOrg)="setActiveOrg($event)">
+        </cnsl-org-context>
+      </div>
 
-      <mat-menu class="menu" #menu="matMenu">
-        <div class="spinner-w">
-          <mat-spinner diameter="20" *ngIf="orgLoading$ | async" color="accent">
-          </mat-spinner>
-        </div>
-
-        <div class="filter-wrapper">
-          <input cnslInput class="filter-input" [formControl]="filterControl" autocomplete="off"
-            (click)="$event.stopPropagation()" placeholder="{{'ORG.PAGES.FILTERPLACEHOLDER' | translate}}" #input>
-        </div>
-
-        <div class="org-wrapper">
-          <button [ngClass]="{'active': temporg.id === org?.id}" [disabled]="!temporg.id"
-            *ngFor="let temporg of orgs$ | async" mat-menu-item (click)="setActiveOrg(temporg)">
-            {{temporg?.name ? temporg.name : 'NO NAME'}}
-          </button>
-        </div>
-
-        <button class="show-all" mat-menu-item [routerLink]="[ '/org/overview' ]">{{'MENU.SHOWORGS' |
-          translate}}</button>
-
-        <ng-template cnslHasRole [hasRole]="['org.create','iam.write']">
-          <button mat-menu-item [routerLink]="[ '/org/create' ]">
-            <mat-icon class="avatar">add</mat-icon>
-            {{'MENU.NEWORG' | translate}}
-          </button>
-        </ng-template>
-      </mat-menu>
       <span class="fill-space"></span>
 
       <a class="doc-link" href="https://docs.zitadel.ch" mat-stroked-button target="_blank">{{'MENU.DOCUMENTATION'