aril 1.2.18 → 2.0.1-dev.0

package/theme/layout/app/layout/app.layout.component.ts

@@ -1,25 +1,49 @@
+import { CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
 import { NgClass } from '@angular/common';
-import { Component, OnDestroy, Renderer2, ViewChild } from '@angular/core';
-import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
+import {
+	AfterViewInit,
+	Component,
+	ElementRef,
+	HostListener,
+	OnDestroy,
+	Renderer2,
+	ViewChild,
+	computed,
+	effect,
+	inject,
+	signal,
+	untracked
+} from '@angular/core';
+import { NavigationEnd, Router, RouterLink, RouterOutlet } from '@angular/router';
 
+import { MenuItem } from 'primeng/api';
+import { BreadcrumbModule } from 'primeng/breadcrumb';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { ConfirmPopupModule } from 'primeng/confirmpopup';
+import { ContextMenu, ContextMenuModule } from 'primeng/contextmenu';
 import { DialogModule } from 'primeng/dialog';
 import { MessagesModule } from 'primeng/messages';
 import { ToastModule } from 'primeng/toast';
+import { TooltipModule } from 'primeng/tooltip';
 
+import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
 import { Subscription, filter } from 'rxjs';
 
+import { bridge } from 'aril/boot/bridge';
+import { NavItem, NavLinkContextMenuService, NavLinkDirective, NavService, PluginMenuItem } from 'aril/boot/config/apps';
+import { TranslateJsonPipe } from 'aril/util/pipes';
+
 import { LayoutService } from '../../service/app.layout.service';
 import { AppMenuService } from '../../service/app.menu.service';
-import { AppProfileSidebarComponent } from '../profileSidebar/app.profilesidebar.component';
+import { TabSessionService } from '../../service/tab-session.service';
+import { ExpandableMenuComponent } from '../expandableMenu/expandable-menu.component';
+import { FavoritePagesSidebarComponent } from '../favorite-pages/favorite-pages-sidebar.component';
 import { HistorySidebarComponent } from '../history/history-sidebar.component';
+import { NotificationsSidebarComponent } from '../notifications/notifications-sidebar.component';
+import { AppProfileSidebarComponent } from '../profileSidebar/app.profilesidebar.component';
 import { SiteMapSidebarComponent } from '../site-map/site-map-sidebar.component';
-import { FavoritePagesSidebarComponent } from '../favorite-pages/favorite-pages-sidebar.component';
-import { AppTopbarComponent } from '../topbar/app.topbar.component';
-import { ExpandableMenuComponent } from '../expandableMenu/expandable-menu.component';
 import { StaticSidebarComponent } from '../static-sidebar/static-sidebar.component';
-import { NotificationsSidebarComponent } from '../notifications/notifications-sidebar.component';
+import { AppTopbarComponent } from '../topbar/app.topbar.component';
 
 @Component({
 	standalone: true,
@@ -27,6 +51,7 @@ import { NotificationsSidebarComponent } from '../notifications/notifications-si
 	imports: [
 		NgClass,
 		RouterOutlet,
+		RouterLink,
 		ConfirmDialogModule,
 		ConfirmPopupModule,
 		DialogModule,
@@ -39,11 +64,19 @@ import { NotificationsSidebarComponent } from '../notifications/notifications-si
 		FavoritePagesSidebarComponent,
 		ExpandableMenuComponent,
 		StaticSidebarComponent,
-		NotificationsSidebarComponent
+		NotificationsSidebarComponent,
+		DragDropModule,
+		BreadcrumbModule,
+		ContextMenuModule,
+		TooltipModule,
+		TranslocoModule,
+		NavLinkDirective
 	],
-	templateUrl: './app.layout.component.html'
+	templateUrl: './app.layout.component.html',
+	styleUrls: ['./app.layout.component.scss'],
+	providers: [TranslateJsonPipe]
 })
-export class AppLayoutComponent implements OnDestroy {
+export class AppLayoutComponent implements OnDestroy, AfterViewInit {
 	overlayMenuOpenSubscription: Subscription;
 	menuOutsideClickListener: any;
 	menuScrollListener: any;
@@ -51,13 +84,387 @@ export class AppLayoutComponent implements OnDestroy {
 	@ViewChild(ExpandableMenuComponent) expandableMenuComponent!: ExpandableMenuComponent;
 	@ViewChild(StaticSidebarComponent) staticSidebarComponent!: StaticSidebarComponent;
 	@ViewChild(AppTopbarComponent) appTopbar!: AppTopbarComponent;
+	@ViewChild('tabsContainer', { static: false }) tabsContainer?: ElementRef<HTMLDivElement>;
+	@ViewChild('tabContextMenu') tabContextMenu?: ContextMenu;
+	@ViewChild('navLinkContextMenu') navLinkContextMenu?: ContextMenu;
+	navService: NavService = inject(NavService);
+	private readonly translocoService: TranslocoService = inject(TranslocoService);
+	private readonly navLinkContextMenuService: NavLinkContextMenuService = inject(NavLinkContextMenuService);
+	private readonly tabSession: TabSessionService = inject(TabSessionService);
+
+	tabContextMenuItems: MenuItem[] = [];
+	/** Tab bar yatay scroll konum/genişlik durumu. Chevron butonlarının görünürlüğünü kontrol eder. */
+	canScrollLeft = signal(false);
+	canScrollRight = signal(false);
+
+
+	/**
+	 * Breadcrumb segmentleri — `bridge.breadcrumbs()` üzerinden okunur.
+	 * Source-of-truth aktif MFE'de çalışan `BreadcrumbPublisherService`'tir;
+	 * MFE her NavigationEnd'de kendi route ağacından zinciri çıkarıp bridge'e yazar.
+	 * Shell yalnızca presenter — başa "Anasayfa" item'ı ekleyip son item'ı aktif işaretler.
+	 */
+	breadcrumbItems = computed<(MenuItem & { active?: boolean; isHome?: boolean })[]>(() => {
+		const crumbs = bridge.breadcrumbs();
+		const homeItem: MenuItem & { isHome: boolean } = {
+			icon: 'pi pi-home',
+			isHome: true
+		};
+		if (!crumbs.length) {
+			return [homeItem];
+		}
+		return [
+			homeItem,
+			...crumbs.map((c, idx) => {
+				const isLast = idx === crumbs.length - 1;
+				return {
+					label: c.label,
+					// Aktif (son) item'da url verme — PrimeNG dış `.p-menuitem-link`'e href eklemesin,
+					// kullanıcı zaten o sayfada, tekrar tıklanmasının anlamı yok.
+					url: isLast ? undefined : c.url,
+					active: isLast
+				};
+			})
+		];
+	});
+
+	/**
+	 * Aktif olmayan breadcrumb segmentine tıklama → mevcut tab'ı parent route ile günceller.
+	 * `<a [routerLink]>` directive'i `href`'i Router'ın location strategy'sine göre
+	 * (hash/path) doğru formatlar — sağ tık "linki kopyala" davranışı çalışır.
+	 * Default Router navigate'ini `preventDefault()` ile durdurup `navigateInCurrentTab`
+	 * üzerinden ilerletiyoruz; böylece yeni sekme açılmaz.
+	 */
+	onBreadcrumbClick(event: MouseEvent, item: { label?: string; url?: string }): void {
+		event.preventDefault();
+		if (!item.url) return;
+		const navLink = item.url.startsWith('/') ? item.url.slice(1) : item.url;
+		this.navService.navigateInCurrentTab({
+			tabId: '',
+			navLink,
+			navName: item.label ?? ''
+		});
+	}
+
+	/**
+	 * Home icon → root menu item (`apps.service.ts:51`'de tanımlı `{ root: true, routerLink: '/' }`).
+	 * Tek source-of-truth — etiket çevirisi `TranslateJsonPipe` ile aktif dilden okunur.
+	 * Mevcut tab güncellenir, yeni sekme açılmaz.
+	 */
+	onHomeClick(event: MouseEvent): void {
+		event.preventDefault();
+		this.navService.navigateInCurrentTab(this.homeNavItem());
+	}
+
+	/**
+	 * Anasayfa için NavItem — breadcrumb home ikonunun hem `(click)` handler'ı hem
+	 * `[arilNavLink]` context menu directive'i tarafından paylaşılır.
+	 */
+	readonly homeNavItem = computed<NavItem>(() => {
+		// NavService ile AYNI menü kaynağı (`bridge.hostMenuItems`) — `menuService.menuItems()`
+		// host `root` öğesini içermiyor (farklı/boş kaynak); `setMenuItemsProvider` de bridge'i kullanıyor.
+		const items = bridge.hostMenuItems();
+		const rootItem = items.find((i: PluginMenuItem) => i.root);
+		// Pipe runtime'da object kabul ediyor (translate-json.pipe.ts:18) ama tip imzası `string` —
+		// static-sidebar'ın `getLocalText(any)` pattern'iyle aynı şekilde cast.
+		const navName = rootItem ? this.translateJsonPipe.transform(rootItem.label as any) : '';
+		return {
+			tabId: '',
+			navLink: rootItem?.routerLink || '/',
+			navName,
+			icon: rootItem?.icon
+		};
+	});
+
+	/**
+	 * Tab icon resolution sırası:
+	 *   1. NavItem.icon (sidebar click'inden iletilmişse — en doğru)
+	 *   2. Menu config'inde navLink'i en uzun prefix olarak match eden item.icon
+	 *   3. Generic fallback (`pi pi-file`)
+	 *
+	 * Best-match için longest-prefix kullanılır: `wdm/meters/123` için hem `wdm` hem
+	 * `wdm/meters` match'lerse, daha spesifik `wdm/meters` kazanır. Böylece deep link
+	 * refresh'inde (NavService.firstCheckForRoute path'inde icon set edilemediği zaman)
+	 * doğru remote/section ikonu otomatik bulunur.
+	 */
+	getTabIcon(item: NavItem): string {
+		if (item.icon) return item.icon;
+		if (!item.navLink) return 'pi pi-file';
+		// `bridge.hostMenuItems()` — homeNavItem/NavService ile aynı menü kaynağı. `menuService`
+		// host `root`/MFE menüsünü içermediği için (boş kaynak) buradaki ikon eşleşmesi de oradan.
+		return this.findIconForRoute(bridge.hostMenuItems(), item.navLink) ?? 'pi pi-file';
+	}
+
+	private findIconForRoute(items: PluginMenuItem[], navLink: string): string | undefined {
+		// Path leading slash içerebilir (Router URL), menu config routerLink'leri genelde
+		// leading slash'sız — ikisini normalize edip karşılaştır.
+		const normalize = (p: string): string => (p.startsWith('/') ? p.slice(1) : p);
+		const normalizedPath = normalize(navLink);
+		let best: { length: number; icon: string } | undefined;
+		const visit = (list: PluginMenuItem[]): void => {
+			for (const it of list) {
+				if (it.routerLink && it.icon) {
+					const r = normalize(it.routerLink);
+					if (r && (normalizedPath === r || normalizedPath.startsWith(r + '/'))) {
+						const length = r.length;
+						if (!best || length > best.length) best = { length, icon: it.icon };
+					}
+				}
+				if (it.items?.length) visit(it.items);
+			}
+		};
+		visit(items);
+		return best?.icon;
+	}
+
+	drop(event: CdkDragDrop<any[]>) {
+		const currentRoutes = [...this.navService.activeRoutes()];
+		moveItemInArray(currentRoutes, event.previousIndex, event.currentIndex);
+		this.navService.reorderActiveRoutes(currentRoutes);
+	}
+
+	isActive(item: NavItem): boolean {
+		// Aynı `navLink`'in birden fazla tab'i olabileceği için tabId tek doğru kimlik.
+		// `activeTabId` history.state üzerinden NavService tarafından senkronize edilir.
+		return this.navService.activeTabId() === item.tabId;
+	}
+
+	closeTab(event: Event, item: NavItem) {
+		event.stopPropagation();
+		if (item.pinned) return;
+		this.navService.closeNavigation(item);
+	}
+
+	/** Tab sol-click → o tab'a geç. NavService Router'a `?_tab` URL'i ve history state'i verir. */
+	onTabClick(event: MouseEvent, item: NavItem): void {
+		if (event.button !== 0) return; // sadece sol tık
+		this.navService.navigateToTab(item);
+	}
+
+	/** Middle click (button 1) → tab kapat (Chrome standardı). Sabit tab'lar kapatılmaz. */
+	onTabAuxClick(event: MouseEvent, item: NavItem): void {
+		if (event.button !== 1) return;
+		event.preventDefault();
+		if (item.pinned) return;
+		this.navService.closeNavigation(item);
+	}
+
+	/** Middle click default scroll davranışını engelle. */
+	onTabMousedown(event: MouseEvent): void {
+		if (event.button === 1) event.preventDefault();
+	}
 
+	/**
+	 * Tab right-click → context menu. Sabit tab'larda "Kapat" disabled; pin/unpin item'ı
+	 * Chrome'daki gibi en üstte yer alır. `closeOthers`/`closeToRight`/`closeAll` zaten
+	 * NavService seviyesinde pinned'i koruyor — UI'da ekstra disabled gerekmez.
+	 */
+	onTabContextMenu(event: MouseEvent, item: NavItem): void {
+		event.preventDefault();
+		const t = (key: string): string => this.translocoService.translate(key);
+		const pinLabel = item.pinned ? t('tab.unpin') : t('tab.pin');
+		this.tabContextMenuItems = [
+			{ label: pinLabel, icon: 'pi pi-thumbtack', command: () => this.navService.togglePin(item) },
+			{ label: t('tab.duplicate'), icon: 'pi pi-clone', command: () => this.navService.duplicateTab(item) },
+			{ separator: true },
+			{
+				label: t('tab.close'),
+				icon: 'pi pi-times',
+				command: () => this.navService.closeNavigation(item),
+				disabled: !!item.pinned
+			},
+			{
+				label: t('tab.closeOthers'),
+				icon: 'pi pi-times-circle',
+				command: () => this.navService.closeOthers(item),
+				disabled: this.navService.activeRoutes().filter((r) => !r.pinned && r.tabId !== item.tabId).length === 0
+			},
+			{
+				label: t('tab.closeToRight'),
+				icon: 'pi pi-angle-double-right',
+				command: () => this.navService.closeToRight(item),
+				disabled: this.isLastTab(item)
+			},
+			{ separator: true },
+			{
+				label: t('tab.closeAll'),
+				icon: 'pi pi-trash',
+				command: () => this.navService.closeAll(),
+				disabled: this.navService.activeRoutes().every((r) => r.pinned)
+			}
+		];
+		this.tabContextMenu?.show(event);
+	}
+
+	private isLastTab(item: NavItem): boolean {
+		const routes = this.navService.activeRoutes();
+		// `tabId` ile karşılaştır — aynı navLink'in birden fazla tab'i olabileceği için
+		// `navLink` ambiguous olur, kimlik bazlı arama tek doğru yöntem.
+		return routes[routes.length - 1]?.tabId === item.tabId;
+	}
+
+	/**
+	 * Tek kalan tab anasayfaysa true → kapatma (✕) butonu gizlenir (NavService de kapatmayı
+	 * reddeder). "Her zaman en az 1 tab açık" kuralının UI tarafı.
+	 */
+	isLastHomeTab(item: NavItem): boolean {
+		const routes = this.navService.activeRoutes();
+		return routes.length === 1 && item.navLink === (this.homeNavItem().navLink || '/');
+	}
+
+	/** "+" butonu → ana sayfaya navigate (yeni tab varsa onu aç, yoksa eklenir). */
+	onAddTab(): void {
+		this.router.navigateByUrl('');
+	}
+
+	scrollTabsLeft(): void {
+		this.tabsContainer?.nativeElement.scrollBy({ left: -200, behavior: 'smooth' });
+	}
+
+	scrollTabsRight(): void {
+		this.tabsContainer?.nativeElement.scrollBy({ left: 200, behavior: 'smooth' });
+	}
+
+	private updateScrollState(): void {
+		const el = this.tabsContainer?.nativeElement;
+		if (!el) return;
+		this.canScrollLeft.set(el.scrollLeft > 0);
+		this.canScrollRight.set(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+	}
+
+	/**
+	 * Klavye kısayolları (Chrome paritesi):
+	 * - `Alt+W` → aktif tab kapat (Ctrl+W browser-reserved)
+	 * - `Ctrl+Tab` / `Ctrl+Shift+Tab` → sonraki/önceki tab (denemeli — bazı tarayıcılar override etmez)
+	 * - `Ctrl+PageDown` / `Ctrl+PageUp` → sonraki/önceki tab (yedek)
+	 * - `Alt+1..9` → ilgili index'teki tab (Ctrl+1..9 browser-reserved)
+	 * - `Ctrl+Shift+T` veya `Alt+Shift+T` → son kapatılan tab'ı geri aç
+	 */
+	@HostListener('document:keydown', ['$event'])
+	onDocumentKeydown(event: KeyboardEvent): void {
+		if (this.isTypingInInput(event)) return;
+		const key = event.key;
+		const lower = key.toLowerCase();
+
+		if (event.altKey && !event.shiftKey && !event.ctrlKey && lower === 'w') {
+			const current = this.navService.activeRoute();
+			const item = current ? this.navService.activeRoutes().find((r) => r.navLink === current) : undefined;
+			if (item) {
+				event.preventDefault();
+				this.navService.closeNavigation(item);
+			}
+			return;
+		}
+
+		if (event.ctrlKey && (key === 'Tab' || key === 'PageDown' || key === 'PageUp')) {
+			event.preventDefault();
+			if (key === 'PageUp' || (key === 'Tab' && event.shiftKey)) {
+				this.navService.goToPrevTab();
+			} else {
+				this.navService.goToNextTab();
+			}
+			return;
+		}
+
+		if (event.altKey && !event.ctrlKey && !event.shiftKey && /^[1-9]$/.test(key)) {
+			event.preventDefault();
+			this.navService.goToTabByIndex(parseInt(key, 10) - 1);
+			return;
+		}
+	}
+
+	private isTypingInInput(event: KeyboardEvent): boolean {
+		const target = event.target as HTMLElement | null;
+		if (!target) return false;
+		const tag = target.tagName?.toLowerCase();
+		return tag === 'input' || tag === 'textarea' || tag === 'select' || !!target.isContentEditable;
+	}
+
+	ngAfterViewInit(): void {
+		this.updateScrollState();
+		const el = this.tabsContainer?.nativeElement;
+		if (el) {
+			el.addEventListener('scroll', () => this.updateScrollState(), { passive: true });
+			if (typeof ResizeObserver !== 'undefined') {
+				const ro = new ResizeObserver(() => this.updateScrollState());
+				ro.observe(el);
+				this.resizeObserver = ro;
+			}
+		}
+		// Global nav-link context menu'yu service'e tanıt — tüm `[arilNavLink]` directive'leri
+		// bu instance'ı paylaşır. ngAfterViewInit'te yapılır çünkü ViewChild burada kesin hazırdır.
+		if (this.navLinkContextMenu) {
+			this.navLinkContextMenuService.register(this.navLinkContextMenu);
+		}
+	}
+
+	private resizeObserver: ResizeObserver | null = null;
 	constructor(
-		private menuService: AppMenuService,
+		private readonly menuService: AppMenuService,
 		public layoutService: LayoutService,
 		public renderer: Renderer2,
-		public router: Router
+		public router: Router,
+		private readonly translateJsonPipe: TranslateJsonPipe
 	) {
+		// NavService bridge'i doğrudan bilmez (cyclic dep önlemi); host shell `bridge.hostMenuItems()`
+		// üzerinden provider bağlar. Refresh sonrası adres çubuğuna yapıştırılmış URL'in tab adı/ikonu
+		// menüdeki gerçek değerlere göre çözülsün diye.
+		this.navService.setMenuItemsProvider(() => bridge.hostMenuItems());
+		this.navService.setHomeNavItemProvider(() => this.homeNavItem());
+
+		// Pinned tab'ları localStorage'dan geri yükle. Provider'lar set edildikten SONRA
+		// (restore edilen tab'lar reconcileTabsWithMenu ile menüden revize edilebilsin),
+		// ilk NavigationEnd handler'ından ÖNCE (senkron) — knownTab guard restore'u görsün.
+		this.tabSession.restore();
+
+		// Menü (bridge.hostMenuItems) async yüklenir; ilk açılış/refresh path'inde home tab
+		// fallback isim/iconla eklenmiş olabilir. Menü signal'i değişince tab'ları menüyle revize
+		// et → anasayfa adı/ikonu gerçek `root` öğesinden gelir, `tab.home` fallback'inde kalmaz.
+		effect(
+			() => {
+				bridge.hostMenuItems();
+				// `untracked`: reconcileTabsWithMenu içinde `activeRoutes()` okunuyor; reactive
+				// context'te kalırsa effect activeRoutes'a da abone olur → her tab mutasyonunda
+				// (aç/kapat/sürükle/pin) gereksiz menü-DFS çalışır. Yalnız hostMenuItems'a bağlı kalsın.
+				untracked(() => this.navService.reconcileTabsWithMenu());
+			},
+			{ allowSignalWrites: true }
+		);
+
+		// NavService.activeTabId → bridge.activeTabId mirror. Plugin'lerin Router proxy'leri
+		// (provideHostRouter) bu signal'ı okuyup navigate çağrılarına _tab state enjekte ediyor.
+		effect(
+			() => {
+				bridge.activeTabId.set(this.navService.activeTabId());
+			},
+			{ allowSignalWrites: true }
+		);
+
+		// MFE içi sayfa navigation'ları host Router'a yansımıyor (IsolatedLocationStrategy
+		// browser hash'ı değiştirmiyor) → NavService tab navLink'i güncel kalmıyordu. MFE
+		// AppComponent `bridge.activeMFEUrl`'a (kaynak tabId ile) yazıyor; bu effect ile
+		// dinleyip `syncActiveTabNavLinkForTab(tabId, url)` ile SADECE kaynak tab'ı update
+		// ederiz. Tab değiştirip geri dönüldüğünde doğru URL'e gidilir, cross-tab yok.
+		//
+		// **`untracked`**: `syncActiveTabNavLinkForTab` içinde `activeRoutes()` okunur;
+		// reactive context'te kalırsa effect activeRoutes'a da abone olur → tab.navLink
+		// değişikliği effect'i tekrar tetikler → eski `activeMFEUrl` değeriyle navLink'i
+		// geri çevirir (kullanıcının anasayfaya geçişi sürekli detail/meters'a dönerdi).
+		// Untracked sarması bu recursive loop'u kırar.
+		// `allowSignalWrites`: `activeRoutes.update` (signal write), effect içinden default
+		// `NG0600` yasaklı — bilinçli izin.
+		effect(
+			() => {
+				const data = bridge.activeMFEUrl();
+				if (data?.tabId && data?.url) {
+					untracked(() =>
+						this.navService.syncActiveTabNavLinkForTab(data.tabId, data.url, data.title)
+					);
+				}
+			},
+			{ allowSignalWrites: true }
+		);
+
 		this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => {
 			if (!this.menuOutsideClickListener) {
 				this.menuOutsideClickListener = this.renderer.listen('document', 'click', (event) => {
@@ -78,9 +485,39 @@ export class AppLayoutComponent implements OnDestroy {
 			}
 		});
 
-		this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
+		this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((event) => {
 			if (!this.layoutService.mfeAppItemClicked()) this.hideMenu();
+			// Shell root route'a geçince (örn. `/`) MFE Router tetiklenmediği için
+			// `BreadcrumbPublisherService` set yapmaz, eski breadcrumb kalır. Manuel temizle.
+			// URL `?_tab=...` içerebileceği için query string'i sıyırıp path karşılaştır.
+			const url = (event as NavigationEnd).urlAfterRedirects;
+			const path = url.split('?')[0];
+			if (path === '/' || path === '') {
+				bridge.breadcrumbs.set([]);
+			}
+		});
+
+		// Tab listesi değiştiğinde scroll state'ini yeniden hesapla — DOM güncellemesinden sonra
+		// `queueMicrotask` ile bir sonraki frame'i bekliyoruz (yeni eklenen tab clientWidth/scrollWidth'i etkiler).
+		effect(() => {
+			this.navService.activeRoutes();
+			queueMicrotask(() => this.updateScrollState());
 		});
+
+		// Tab geçişinde breadcrumb'ı geçici olarak boşalt — yeni aktif MFE'nin
+		// `BreadcrumbPublisherService`'i yayın yapana kadar eski tab'ın breadcrumb'ı
+		// kullanıcıya görünmesin (kısa süreli stale UI'yi engeller).
+		let prevTabId: string | undefined;
+		effect(
+			() => {
+				const tabId = this.navService.activeTabId();
+				if (prevTabId !== undefined && prevTabId !== tabId) {
+					bridge.breadcrumbs.set([]);
+				}
+				prevTabId = tabId;
+			},
+			{ allowSignalWrites: true }
+		);
 	}
 
 	blockBodyScroll(): void {
@@ -165,5 +602,7 @@ export class AppLayoutComponent implements OnDestroy {
 		if (this.menuOutsideClickListener) {
 			this.menuOutsideClickListener();
 		}
+
+		this.resizeObserver?.disconnect();
 	}
 }

package/theme/layout/app/layout/mfe.layout.component.d.ts

@@ -1,10 +1,12 @@
-import { Signal } from '@angular/core';
-import { Router } from '@angular/router';
 import * as i0 from "@angular/core";
 export declare class MFELayoutComponent {
-    private router;
-    loading: Signal<boolean>;
-    constructor(router: Router);
+    /**
+     * Side-effect injection — `BreadcrumbPublisherService` constructor'da Router
+     * subscription'ı kurar. Named field ki TS `noUnusedLocals` lint kuralı tetiklenmesin
+     * (underscore prefix exempt). Field'ı doğrudan kullanmıyoruz, sadece DI'nın service'i
+     * instantiate etmesini sağlıyor.
+     */
+    private readonly _breadcrumbPublisher;
     static ɵfac: i0.ɵɵFactoryDeclaration<MFELayoutComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MFELayoutComponent, "mfe-layout", never, {}, {}, never, never, true, never>;
 }

package/theme/layout/app/layout/mfe.layout.component.ts

@@ -1,13 +1,5 @@
-import { Component, Signal } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
-import {
-	NavigationCancel,
-	NavigationEnd,
-	NavigationError,
-	NavigationSkipped,
-	Router,
-	RouterOutlet
-} from '@angular/router';
+import { Component, inject } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
 
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { ConfirmPopupModule } from 'primeng/confirmpopup';
@@ -15,17 +7,13 @@ import { DialogModule } from 'primeng/dialog';
 import { MessagesModule } from 'primeng/messages';
 import { ToastModule } from 'primeng/toast';
 
-import { map } from 'rxjs';
-import { AppBreadcrumbComponent } from '../breadcrumb/app.breadcrumb.component';
+import { BreadcrumbPublisherService } from '../../service/breadcrumb-publisher.service';
 
 @Component({
 	standalone: true,
 	selector: 'mfe-layout',
 	template: `
-	 <app-breadcrumb class="topbar-breadcrumb"></app-breadcrumb>
-		@if (!loading()) {
-			<router-outlet />
-		}
+		<router-outlet />
 
 		<p-toast key="toast-root"></p-toast>
 		<p-dialog key="dialog-root"></p-dialog>
@@ -33,28 +21,14 @@ import { AppBreadcrumbComponent } from '../breadcrumb/app.breadcrumb.component';
 		<p-confirmPopup key="confirmPopup-root"></p-confirmPopup>
 		<p-confirmDialog key="confirmDialog-root"></p-confirmDialog>
 	`,
-	imports: [RouterOutlet, ConfirmDialogModule, ConfirmPopupModule, DialogModule, MessagesModule, ToastModule, AppBreadcrumbComponent]
+	imports: [RouterOutlet, ConfirmDialogModule, ConfirmPopupModule, DialogModule, MessagesModule, ToastModule]
 })
 export class MFELayoutComponent {
-	loading: Signal<boolean>;
-
-	constructor(private router: Router) {
-		this.loading = toSignal(
-		this.router.events.pipe(
-			map((event) => {
-				if (
-					event instanceof NavigationEnd ||
-					event instanceof NavigationCancel ||
-					event instanceof NavigationError ||
-					event instanceof NavigationSkipped
-				)
-					return false;
-
-				return true;
-			})
-		),
-		{ initialValue: true }
-	);
-	}
-
-}
+	/**
+	 * Side-effect injection — `BreadcrumbPublisherService` constructor'da Router
+	 * subscription'ı kurar. Named field ki TS `noUnusedLocals` lint kuralı tetiklenmesin
+	 * (underscore prefix exempt). Field'ı doğrudan kullanmıyoruz, sadece DI'nın service'i
+	 * instantiate etmesini sağlıyor.
+	 */
+	private readonly _breadcrumbPublisher = inject(BreadcrumbPublisherService);
+}

package/theme/layout/app/site-map/site-map-sidebar.component.html

@@ -89,6 +89,7 @@
 					[class.has-children]="node.children && node.children.length > 0"
 					[class.is-page]="node.routerLink"
 					[routerLink]="node.routerLink"
+					[arilNavLink]="node.routerLink ? { tabId: '', navLink: node.routerLink, navName: (node.label | translateJson), icon: node.icon } : null"
 					(click)="!node.routerLink ? toggleNode(node) : (visible = false)">
 					<div class="node-content">
 						@if (node.children && node.children.length > 0) {

package/theme/layout/app/site-map/site-map-sidebar.component.ts

@@ -10,6 +10,7 @@ import { TooltipModule } from 'primeng/tooltip';
 import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
 
 import { bridge } from 'aril/boot/bridge';
+import { NavLinkDirective } from 'aril/boot/config/apps';
 import { ButtonComponent } from 'aril/ui/button';
 import { TextComponent } from 'aril/ui/text';
 import { TranslateJsonPipe } from 'aril/util/pipes';
@@ -41,7 +42,8 @@ interface MenuNode {
 		TextComponent,
 		TranslocoModule,
 		TranslateJsonPipe,
-		FontAwesomeModule
+		FontAwesomeModule,
+		NavLinkDirective
 	],
 	templateUrl: './site-map-sidebar.component.html',
 	styleUrls: ['./site-map-sidebar.component.scss']