[WIP] feat(core): shellbar redesign, add branding and additional context area

libs/core/shellbar/index.ts

@@ -5,10 +5,15 @@ export * from './model/shellbar-user';
 export * from './model/shellbar-user-menu';
 export * from './product-menu/product-menu.component';
 export * from './shellbar-action/shellbar-action.component';
-export * from './shellbar-actions-mobile/shellbar-actions-mobile.component';
+export * from './shellbar-actions-toolbar/shellbar-actions-toolbar.component';
 export * from './shellbar-actions/shellbar-actions.component';
+export * from './shellbar-branding/shellbar-branding.component';
+export * from './shellbar-context-area/shellbar-context-area.component';
 export * from './shellbar-logo/shellbar-logo.component';
+export * from './shellbar-overflow-priority.directive';
+export * from './shellbar-separator/shellbar-separator.component';
 export * from './shellbar-sidenav.directive';
+export * from './shellbar-spacer/shellbar-spacer.component';
 export * from './shellbar-subtitle/shellbar-subtitle.component';
 export * from './shellbar-title/shellbar-title.component';
 export * from './shellbar.component';

libs/core/shellbar/shellbar-actions-toolbar/shellbar-actions-toolbar.component.html

@@ -0,0 +1,30 @@
+@if (shellbarActions.length > 0 || searchExists) {
+    <fd-toolbar
+        fdType="transparent"
+        (click)="$event.stopPropagation()"
+        class="fd-shellbar-toolbar"
+        [clearBorder]="true"
+        [shouldOverflow]="true"
+        [badgeCount]="totalNotifications"
+        (overflowChanged)="handleOverflow($event)"
+    >
+        <fd-toolbar-spacer></fd-toolbar-spacer>
+        @if (searchExists) {
+            <button fd-toolbar-item fd-button fdType="transparent" glyph="search" (click)="showSearch.emit()"></button>
+        }
+
+        @for (action of shellbarActions; track action) {
+            <button
+                fd-toolbar-item
+                fd-button
+                fdType="transparent"
+                [glyph]="action.glyph"
+                (click)="handleActionClick(action, $event)"
+            >
+                @if (action.notificationCount) {
+                    <fd-button-badge [content]="action.notificationCount"></fd-button-badge>
+                }
+            </button>
+        }
+    </fd-toolbar>
+}

libs/core/shellbar/shellbar-actions-toolbar/shellbar-actions-toolbar.component.ts

@@ -0,0 +1,61 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, QueryList } from '@angular/core';
+import { ButtonBadgeDirective, ButtonComponent } from '@fundamental-ngx/core/button';
+import { ToolbarComponent, ToolbarItemDirective, ToolbarSpacerDirective } from '@fundamental-ngx/core/toolbar';
+import { FdTranslatePipe } from '@fundamental-ngx/i18n';
+import { ShellbarActionComponent } from '../shellbar-action/shellbar-action.component';
+
+@Component({
+    selector: 'fd-shellbar-actions-toolbar',
+    templateUrl: './shellbar-actions-toolbar.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        ButtonComponent,
+        FdTranslatePipe,
+        ToolbarComponent,
+        ButtonComponent,
+        ToolbarItemDirective,
+        ButtonBadgeDirective,
+        ToolbarSpacerDirective
+    ],
+    styles: [
+        `
+            :host {
+                flex: 1;
+            }
+        `
+    ]
+})
+export class ShellbarActionsToolbarComponent {
+    /** Actions displayed in the toolbar. */
+    @Input() shellbarActions: QueryList<ShellbarActionComponent>;
+
+    /** Whether a search button exists. */
+    @Input() searchExists = false;
+
+    /** Total notification count from overflowed items. */
+    @Input() totalNotifications = 0;
+
+    /** Event emitted when the search button is clicked. */
+    @Output() showSearch = new EventEmitter<void>();
+
+    /** Handles action button clicks. */
+    handleActionClick(action: ShellbarActionComponent, event: MouseEvent): void {
+        action.callback?.(event);
+    }
+
+    /** Handles overflow change and recalculates notification count. */
+    handleOverflow(overflowItems: any[]): void {
+        this.totalNotifications = overflowItems.reduce((total, item) => {
+            const badgeValue = this.extractBadgeValue(item._elementRef.nativeElement);
+            return total + (parseInt(badgeValue ?? '0', 10) || 0);
+        }, 0);
+    }
+
+    /** Extracts the badge value from a toolbar item's nativeElement */
+    private extractBadgeValue(nativeElement: HTMLElement): string | null {
+        const children = Array.from(nativeElement.children);
+        const badgeElement = children.find((child) => child.classList.contains('fd-button__badge'));
+        return badgeElement?.textContent?.trim() || null;
+    }
+}

libs/core/shellbar/shellbar-actions/shellbar-actions.component.html

@@ -5,20 +5,17 @@
 }
 <!-- If portal outlet placed outside div, it will be added to the end of the root container. So this div actually keeps outlet in desired place. -->
 <div class="fd-shellbar__action" cdkPortalOutlet></div>
-<div class="fd-shellbar__action fd-shellbar__action--mobile">
-    <fd-shellbar-actions-mobile
-        [shellbarActions]="shellbarActions"
-        [searchExists]="!!_searchPortal"
-        (showSearch)="_toggleSearch()"
-    ></fd-shellbar-actions-mobile>
-</div>
+<fd-shellbar-actions-toolbar
+    [shellbarActions]="shellbarActions"
+    [searchExists]="!!_searchPortal"
+    (showSearch)="_toggleSearch()"
+></fd-shellbar-actions-toolbar>
 <div class="fd-shellbar__action fd-shellbar__action--desktop">
     <ng-content></ng-content>
 </div>
-@if (_addSearchIcon && !showSearch) {
-    <fd-shellbar-action glyph="search" [callback]="_toggleSearch"></fd-shellbar-action>
-}
-<ng-content select="fd-shellbar-action"></ng-content>
+<div hidden>
+    <ng-content select="fd-shellbar-action"></ng-content>
+</div>
 @if (userComponent || userItem) {
     @if (!userComponent) {
         <fd-shellbar-user-menu