feat(console): rehauled navigation for instances including breadcrumb (#10283)

This PR significantly improves user navigation by introducing a new
instance-level navigation bar. This new bar, positioned above the
existing organization navigation, provides quick access to key sections:
Home, Organizations, Actions, and Settings.

Additionally, the breadcrumb component has been refined for more
consistent behavior, reintroducing intuitive breadcrumb buttons to
easily navigate up the hierarchy. These changes also include design
improvements for a cleaner and more streamlined appearance across the
interface.

<img width="423" height="138" alt="Screenshot 2025-07-17 at 14 55 46"
src="https://github.com/user-attachments/assets/ba9e40a1-1077-4cb6-8735-ac7ab637abe7"
/>
<img width="562" height="132" alt="Screenshot 2025-07-17 at 14 56 41"
src="https://github.com/user-attachments/assets/d85dc673-0df8-4677-9d2b-dc031dde42c3"
/>
<img width="545" height="254" alt="Screenshot 2025-07-17 at 14 56 10"
src="https://github.com/user-attachments/assets/eaf10117-079e-4181-8dbb-60c89b24556a"
/>
<img width="689" height="261" alt="Screenshot 2025-07-17 at 14 56 20"
src="https://github.com/user-attachments/assets/510ad550-1d9a-4c6a-8af1-66cb0b23619c"
/>

---------

Co-authored-by: conblem <[email protected]>
Co-authored-by: Stefan Benz <[email protected]>
Co-authored-by: Florian Forster <[email protected]>

console/src/app/pages/instance/instance.component.html

@@ -8,20 +8,6 @@
   stateTooltip="{{ 'INSTANCE.STATE.' + instance?.state | translate }}"
 >
   <div topContributors class="instance-action-wrapper">
-    <a
-      mat-raised-button
-      color="primary"
-      *ngIf="customerPortalLink$ | async as customerPortalLink"
-      class="portal-link external-link"
-      [href]="customerPortalLink"
-      target="_blank"
-      rel="noreferrer"
-    >
-      <div class="cnsl-action-button">
-        <span class="portal-span">{{ 'MENU.CUSTOMERPORTAL' | translate }}</span>
-        <i class="las la-external-link-alt"></i>
-      </div>
-    </a>
     <cnsl-contributors
       [totalResult]="totalMemberResult"
       [loading]="loading$ | async"

console/src/app/pages/instance/instance.component.scss

@@ -14,14 +14,6 @@
 .instance-action-wrapper {
   display: flex;
   align-items: center;
-
-  .portal-link {
-    margin-right: 1rem;
-
-    .portal-span {
-      margin-right: 0.5rem;
-    }
-  }
 }
 
 .instance-table-desc {

console/src/app/pages/instance/instance.component.ts

@@ -33,10 +33,7 @@ import {
   VIEWS,
   FAILEDEVENTS,
   EVENTS,
-  ORGANIZATIONS,
   FEATURESETTINGS,
-  ACTIONS,
-  ACTIONS_TARGETS,
 } from 'src/app/modules/settings-list/settings';
 import { SidenavSetting } from 'src/app/modules/sidenav/sidenav.component';
 import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
@@ -58,10 +55,7 @@ export class InstanceComponent {
 
   protected id: string = '';
   protected readonly defaultSettingsList: SidenavSetting[] = [
-    ORGANIZATIONS,
     FEATURESETTINGS,
-    ACTIONS,
-    ACTIONS_TARGETS,
     // notifications
     // { showWarn: true, ...NOTIFICATIONS },
     NOTIFICATIONS,
@@ -92,7 +86,6 @@ export class InstanceComponent {
   ];
 
   protected readonly settingsList$: Observable<SidenavSetting[]>;
-  protected readonly customerPortalLink$ = this.envService.env.pipe(map((env) => env.customer_portal));
 
   constructor(
     protected readonly adminService: AdminService,
@@ -101,7 +94,6 @@ export class InstanceComponent {
     breadcrumbService: BreadcrumbService,
     private readonly router: Router,
     private readonly authService: GrpcAuthService,
-    private readonly envService: EnvironmentService,
     activatedRoute: ActivatedRoute,
     private readonly destroyRef: DestroyRef,
   ) {

console/src/app/pages/instance/instance.module.ts

@@ -21,7 +21,6 @@ import { InputModule } from 'src/app/modules/input/input.module';
 import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
 import { OrgTableModule } from 'src/app/modules/org-table/org-table.module';
 import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
-import { SettingsGridModule } from 'src/app/modules/settings-grid/settings-grid.module';
 import { TopViewModule } from 'src/app/modules/top-view/top-view.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
 import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
@@ -64,7 +63,6 @@ import { SettingsListModule } from 'src/app/modules/settings-list/settings-list.
     HasRolePipeModule,
     SettingsListModule,
     MatSortModule,
-    SettingsGridModule,
   ],
 })
 export default class InstanceModule {}