aril 1.2.17 → 2.0.1-dev.0

package/theme/layout/app/static-sidebar/static-sidebar.component.d.ts

@@ -2,10 +2,9 @@ import { HttpClient } from '@angular/common/http';
 import { OnDestroy, OnInit, Signal } from '@angular/core';
 import { Router } from '@angular/router';
 import { TranslocoService } from '@ngneat/transloco';
-import { MenuItemAction, PluginMenuItem } from 'aril/boot/config/apps';
+import { MenuItemAction, 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 * as i0 from "@angular/core";
 interface MenuNode {
     key: string;
@@ -18,7 +17,6 @@ interface MenuNode {
     actionLoading?: boolean;
 }
 export declare class StaticSidebarComponent implements OnInit, OnDestroy {
-    private readonly menuService;
     private readonly router;
     private readonly layoutService;
     private readonly translateJsonPipe;
@@ -28,10 +26,11 @@ export declare class StaticSidebarComponent implements OnInit, OnDestroy {
     menuNodes: import("@angular/core").WritableSignal<MenuNode[]>;
     filteredNodes: import("@angular/core").WritableSignal<MenuNode[]>;
     searchTerm: import("@angular/core").WritableSignal<string>;
+    navService: NavService;
     private routerSubscription;
     private actionSubscription;
     private readonly MAX_LENGTH;
-    constructor(menuService: AppMenuService, router: Router, layoutService: LayoutService, translateJsonPipe: TranslateJsonPipe, translocoService: TranslocoService, http: HttpClient);
+    constructor(router: Router, layoutService: LayoutService, translateJsonPipe: TranslateJsonPipe, translocoService: TranslocoService, http: HttpClient);
     get isCollapsed(): boolean;
     get topLevelNodes(): MenuNode[];
     ngOnInit(): void;
@@ -44,6 +43,12 @@ export declare class StaticSidebarComponent implements OnInit, OnDestroy {
     convertToMenuNodes(items: PluginMenuItem[], parentKey?: string): MenuNode[];
     getMenuItems(): PluginMenuItem[];
     getLocalText(text: any): string;
+    /**
+     * Hash strategy için routerLink'i `#`-prefix'li href'e çevirir. routerLink config'te
+     * leading slash içerebilir (örn. anasayfa için `'/'`); naive `'#/' + routerLink`
+     * concatenation `#//` üretirdi — sağ tık "linki kopyala" UX'inde bu çirkin görünür.
+     */
+    getHashHref(routerLink: string | undefined | null): string;
     isActiveRouteForNode(node: MenuNode): boolean;
     isNodeOrChildActive(node: MenuNode): boolean;
     isTopLevelNodeActive(node: MenuNode): boolean;
@@ -51,10 +56,26 @@ export declare class StaticSidebarComponent implements OnInit, OnDestroy {
     toggleNode(node: MenuNode, level?: number): void;
     private closeOtherTopLevelNodes;
     private closeAllChildNodes;
-    onMenuItemClick(): void;
+    /**
+     * Chrome-like menü click davranışı:
+     * - Normal click → aktif tab'da navigate (yeni tab açma)
+     * - Ctrl/Cmd + Click → arka planda yeni tab
+     * - Ctrl/Cmd + Shift + Click → ön planda yeni tab (yeni tab aç + oraya geç)
+     */
+    onMenuClick(event: MouseEvent, node: MenuNode): void;
+    /** Middle click (mouse button 1) → arka planda yeni tab. */
+    onMenuAuxClick(event: MouseEvent, node: MenuNode): void;
+    /** Middle click default scroll davranışını engelle. */
+    onMenuMousedown(event: MouseEvent): void;
+    private afterMenuClick;
     onActionItemClick(node: MenuNode, event: Event): void;
     private buildSuccessRoute;
     private getValueByPath;
+    /**
+     * Collapsed-mode UI-only handler: sidebar'ı aç, kardeş toplevel'ları kapat, children varsa expand.
+     * Navigation YAPMAZ — routerLink'li node'larda `(click)` template'te `onMenuClick` ile zincirleniyor;
+     * `afterMenuClick` da orada bir kez çağrılır.
+     */
     onCollapsedItemClick(node: MenuNode): void;
     onSearchChange(): void;
     private filterNodes;

package/theme/layout/app/static-sidebar/static-sidebar.component.html

@@ -46,9 +46,12 @@
 							class="collapsed-item"
 							[pTooltip]="getLocalText(node.label)"
 							tooltipPosition="right"
-							[routerLink]="node.routerLink"
+							[attr.href]="getHashHref(node.routerLink)"
 							[class.active]="isTopLevelNodeActive(node)"
-							(click)="onCollapsedItemClick(node)">
+							[arilNavLink]="{ tabId: '', navLink: node.routerLink, navName: getLocalText(node.label), icon: node.icon }"
+							(click)="onCollapsedItemClick(node); onMenuClick($event, node)"
+							(auxclick)="onMenuAuxClick($event, node)"
+							(mousedown)="onMenuMousedown($event)">
 							@if (node.icon) {
 								<i class="collapsed-icon" [class]="node.icon"></i>
 							} @else {
@@ -103,14 +106,17 @@
 				</div>
 			} @else if (node.routerLink) {
 				<a
-					[routerLink]="node.routerLink"
+					[attr.href]="getHashHref(node.routerLink)"
+					[arilNavLink]="{ tabId: '', navLink: node.routerLink, navName: getLocalText(node.label), icon: node.icon }"
+					(click)="onMenuClick($event, node)"
+					(auxclick)="onMenuAuxClick($event, node)"
+					(mousedown)="onMenuMousedown($event)"
 					class="node-item"
 					[class.has-children]="node.children && node.children.length > 0"
 					[class.is-page]="node.routerLink"
 					[class.active]="isChildNodeActive(node)"
 					[pTooltip]="!isMobile() && isTextTruncated(node.label, activeLang(), level) ? getLocalText(node.label) : ''"
-					tooltipPosition="right"
-					(click)="onMenuItemClick()">
+					tooltipPosition="right">
 					<div class="node-content">
 						@if (node.children && node.children.length > 0) {
 							<div class="toggle-btn" (click)="$event.stopPropagation(); toggleNode(node, level)">

package/theme/layout/app/static-sidebar/static-sidebar.component.ts

@@ -1,9 +1,9 @@
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import { Component, OnDestroy, OnInit, Signal, signal } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit, Signal, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
-import { NavigationEnd, Router, RouterLink } from '@angular/router';
+import { NavigationEnd, Router } from '@angular/router';
 
 import { InputTextModule } from 'primeng/inputtext';
 import { ScrollPanelModule } from 'primeng/scrollpanel';
@@ -13,11 +13,10 @@ import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
 import { Subscription, filter } from 'rxjs';
 
 import { bridge } from 'aril/boot/bridge';
-import { MenuItemAction, PluginMenuItem } from 'aril/boot/config/apps';
+import { MenuItemAction, NavItem, 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';
 
 interface MenuNode {
 	key: string;
@@ -34,14 +33,14 @@ interface MenuNode {
 	standalone: true,
 	selector: 'app-static-sidebar',
 	imports: [
-		RouterLink,
 		NgClass,
 		NgTemplateOutlet,
 		ScrollPanelModule,
 		TooltipModule,
 		FormsModule,
 		TranslocoModule,
-		InputTextModule
+		InputTextModule,
+		NavLinkDirective
 	],
 	templateUrl: './static-sidebar.component.html',
 	styleUrl: './static-sidebar.component.scss',
@@ -52,6 +51,7 @@ export class StaticSidebarComponent implements OnInit, OnDestroy {
 	menuNodes = signal<MenuNode[]>([]);
 	filteredNodes = signal<MenuNode[]>([]);
 	searchTerm = signal<string>('');
+	navService: NavService = inject(NavService);
 
 	private routerSubscription: Subscription | null = null;
 	private actionSubscription: Subscription | null = null;
@@ -59,7 +59,6 @@ export class StaticSidebarComponent implements OnInit, OnDestroy {
 	private readonly MAX_LENGTH = { level0: 25, level1: 20, level2: 16, level3: 13 };
 
 	constructor(
-		private readonly menuService: AppMenuService,
 		private readonly router: Router,
 		private readonly layoutService: LayoutService,
 		private readonly translateJsonPipe: TranslateJsonPipe,
@@ -154,13 +153,23 @@ export class StaticSidebarComponent implements OnInit, OnDestroy {
 	}
 
 	getMenuItems(): PluginMenuItem[] {
-		return bridge.isHostMode() ? bridge.hostMenuItems() : this.menuService.menuItems();
+		return bridge.hostMenuItems();
 	}
 
 	getLocalText(text: any): string {
 		return this.translateJsonPipe.transform(text);
 	}
 
+	/**
+	 * Hash strategy için routerLink'i `#`-prefix'li href'e çevirir. routerLink config'te
+	 * leading slash içerebilir (örn. anasayfa için `'/'`); naive `'#/' + routerLink`
+	 * concatenation `#//` üretirdi — sağ tık "linki kopyala" UX'inde bu çirkin görünür.
+	 */
+	getHashHref(routerLink: string | undefined | null): string {
+		if (!routerLink) return '#';
+		return routerLink.startsWith('/') ? '#' + routerLink : '#/' + routerLink;
+	}
+
 	isActiveRouteForNode(node: MenuNode): boolean {
 		if (!node.routerLink) return false;
 		const currentUrl = this.router.url;
@@ -222,7 +231,51 @@ export class StaticSidebarComponent implements OnInit, OnDestroy {
 		}
 	}
 
-	onMenuItemClick() {
+	/**
+	 * Chrome-like menü click davranışı:
+	 * - Normal click → aktif tab'da navigate (yeni tab açma)
+	 * - Ctrl/Cmd + Click → arka planda yeni tab
+	 * - Ctrl/Cmd + Shift + Click → ön planda yeni tab (yeni tab aç + oraya geç)
+	 */
+	onMenuClick(event: MouseEvent, node: MenuNode): void {
+		if (!node.routerLink) return;
+		event.preventDefault();
+		const navItem: NavItem = {
+			tabId: '',
+			navLink: node.routerLink,
+			navName: this.getLocalText(node.label),
+			icon: node.icon
+		};
+		if (event.ctrlKey || event.metaKey) {
+			if (event.shiftKey) {
+				this.navService.openInNewTabAndFocus(navItem);
+			} else {
+				this.navService.openInBackgroundTab(navItem);
+			}
+		} else {
+			this.navService.navigateInCurrentTab(navItem);
+		}
+		this.afterMenuClick();
+	}
+
+	/** Middle click (mouse button 1) → arka planda yeni tab. */
+	onMenuAuxClick(event: MouseEvent, node: MenuNode): void {
+		if (event.button !== 1 || !node.routerLink) return;
+		event.preventDefault();
+		this.navService.openInBackgroundTab({
+			tabId: '',
+			navLink: node.routerLink,
+			navName: this.getLocalText(node.label),
+			icon: node.icon
+		});
+	}
+
+	/** Middle click default scroll davranışını engelle. */
+	onMenuMousedown(event: MouseEvent): void {
+		if (event.button === 1) event.preventDefault();
+	}
+
+	private afterMenuClick(): void {
 		if (this.isMobile()) {
 			this.layoutService.closeMobileMenu();
 		}
@@ -252,7 +305,7 @@ export class StaticSidebarComponent implements OnInit, OnDestroy {
 				node.actionLoading = false;
 				const route = this.buildSuccessRoute(node.action!, response);
 				this.router.navigate([route]);
-				this.onMenuItemClick();
+				this.afterMenuClick();
 			},
 			error: () => {
 				node.actionLoading = false;
@@ -287,6 +340,11 @@ export class StaticSidebarComponent implements OnInit, OnDestroy {
 		}, obj);
 	}
 
+	/**
+	 * Collapsed-mode UI-only handler: sidebar'ı aç, kardeş toplevel'ları kapat, children varsa expand.
+	 * Navigation YAPMAZ — routerLink'li node'larda `(click)` template'te `onMenuClick` ile zincirleniyor;
+	 * `afterMenuClick` da orada bir kez çağrılır.
+	 */
 	onCollapsedItemClick(node: MenuNode) {
 		if (this.isCollapsed) {
 			this.layoutService.onMenuToggle();
@@ -296,9 +354,6 @@ export class StaticSidebarComponent implements OnInit, OnDestroy {
 			node.expanded = true;
 		}
 		this.filteredNodes.set([...this.filteredNodes()]);
-		if (node.routerLink) {
-			this.onMenuItemClick();
-		}
 	}
 
 	onSearchChange(): void {

package/theme/layout/app/topbar/app.topbar.component.html

@@ -82,4 +82,3 @@
 	</div>
 </div>
 
-<!-- <app-breadcrumb class="topbar-breadcrumb"></app-breadcrumb> -->

package/theme/layout/app/topbar/app.topbar.component.scss

@@ -6,7 +6,7 @@
 	flex-wrap: nowrap;
 	gap: 0.5rem;
 	padding: 0 1rem;
-	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.075);
+	border-bottom: 1px solid var(--surface-border, #e5e7eb);
 
 	@media (max-width: 768px) {
 		padding: 0 0.5rem;

package/theme/layout/service/breadcrumb-publisher.service.d.ts

@@ -0,0 +1,24 @@
+import { OnDestroy } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * MFE-side route ağacını dolaşıp aktif route zincirinin breadcrumb listesini
+ * `bridge.breadcrumbs` signal'ine yazar. Shell layout bu signal'i okuyup
+ * breadcrumb şeridini render eder; presenter shell'de, source-of-truth MFE'de.
+ *
+ * Eski `<app-breadcrumb>` component'inin logic'i bu service'e taşınmıştır.
+ * Geriye dönük uyumluluk için `breadcrumbUpdated` PubSub event'i hâlâ yayınlanır
+ * (history.service abone).
+ */
+export declare class BreadcrumbPublisherService implements OnDestroy {
+    private readonly router;
+    private readonly breadcrumbService;
+    private readonly pubSubService;
+    private routerSubscription;
+    constructor();
+    ngOnDestroy(): void;
+    private publishFromCurrentRoute;
+    private collect;
+    private publish;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BreadcrumbPublisherService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<BreadcrumbPublisherService>;
+}

package/theme/layout/service/breadcrumb-publisher.service.ts

@@ -0,0 +1,95 @@
+import { Injectable, OnDestroy, effect, inject } from '@angular/core';
+import { ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';
+
+import { Subscription, filter } from 'rxjs';
+
+import { Breadcrumb, bridge } from 'aril/boot/bridge';
+import { PubSubService } from 'aril/util/pub-sub';
+
+import { BreadcrumbService } from './breadcrumb.service';
+
+/**
+ * MFE-side route ağacını dolaşıp aktif route zincirinin breadcrumb listesini
+ * `bridge.breadcrumbs` signal'ine yazar. Shell layout bu signal'i okuyup
+ * breadcrumb şeridini render eder; presenter shell'de, source-of-truth MFE'de.
+ *
+ * Eski `<app-breadcrumb>` component'inin logic'i bu service'e taşınmıştır.
+ * Geriye dönük uyumluluk için `breadcrumbUpdated` PubSub event'i hâlâ yayınlanır
+ * (history.service abone).
+ */
+@Injectable({ providedIn: 'root' })
+export class BreadcrumbPublisherService implements OnDestroy {
+	private readonly router = inject(Router);
+	private readonly breadcrumbService = inject(BreadcrumbService);
+	private readonly pubSubService = inject(PubSubService);
+
+	private routerSubscription: Subscription;
+
+	constructor() {
+		this.routerSubscription = this.router.events
+			.pipe(filter((event) => event instanceof NavigationEnd))
+			.subscribe(() => this.publishFromCurrentRoute());
+
+		effect(() => {
+			// keyValues sinyalini dinle; dinamik breadcrumb (örn. "{customerId}")
+			// değerleri sonradan geldikçe listeyi yeniden yayınla.
+			this.breadcrumbService.keyValues();
+			this.publishFromCurrentRoute();
+		});
+	}
+
+	ngOnDestroy(): void {
+		this.routerSubscription?.unsubscribe();
+	}
+
+	private publishFromCurrentRoute(): void {
+		const root = this.router.routerState.snapshot.root;
+		const breadcrumbs: Breadcrumb[] = [];
+		this.collect(root, [], breadcrumbs);
+		this.publish(breadcrumbs);
+	}
+
+	private collect(route: ActivatedRouteSnapshot, parentUrl: string[], breadcrumbs: Breadcrumb[]): void {
+		const routeUrl = parentUrl.concat(route.url.map((url) => url.path));
+		const breadcrumb = route.data['breadcrumb'];
+		const parentBreadcrumb = route.parent && route.parent.data ? route.parent.data['breadcrumb'] : null;
+
+		if (breadcrumb && breadcrumb !== parentBreadcrumb) {
+			const template = breadcrumb as string;
+			// Tüm `{key}` placeholder'larını sırayla resolve et — global regex.
+			// Eskiden tek placeholder regex'i (`exec`) ile yalnız ilk key alınıyordu;
+			// `'Customer {customerId} - Service {servicePointId}'` formatında `servicePointId`
+			// literal kalıyordu. Resolve olmayan key için `'...'` placeholder döner; statik
+			// kısımlar korunur (önceden tüm label `'...'`'a düşüyordu).
+			const label = template.replace(/\{([^}]+)\}/g, (_, key: string) => {
+				const value = this.breadcrumbService.getValue(key);
+				return value !== undefined && value !== null && value !== '' ? String(value) : '...';
+			});
+			breadcrumbs.push({ label, url: '/' + routeUrl.join('/') });
+		}
+
+		if (route.firstChild) {
+			this.collect(route.firstChild, routeUrl, breadcrumbs);
+		}
+	}
+
+	private publish(breadcrumbs: Breadcrumb[]): void {
+		bridge.breadcrumbs.set(breadcrumbs);
+
+		const lastLabel = breadcrumbs[breadcrumbs.length - 1]?.label ?? '';
+		if (bridge.pageTitle() || lastLabel) {
+			bridge.pageTitle.set(lastLabel);
+		}
+
+		this.pubSubService.publish({
+			name: 'breadcrumbUpdated',
+			data: {
+				path: this.router.url,
+				custom: {
+					breadcrumbs,
+					pageTitle: lastLabel
+				}
+			}
+		});
+	}
+}

package/theme/layout/service/tab-session.service.d.ts

@@ -0,0 +1,52 @@
+import * as i0 from "@angular/core";
+/**
+ * Sabitlenmiş (pinned) tab'ları kullanıcı bazlı `localStorage` anahtarında kalıcı
+ * kılar. F5 / yeniden login / yeni sekme açılışında pinned tab'lar geri yüklenir;
+ * non-pinned tab'lar saklanmaz.
+ *
+ * **Akış**: `AppLayoutComponent` constructor'da (menü/home provider'ları set
+ * edildikten SONRA) `restore()` SENKRON çağrılır → pinned'ler `NavService.activeRoutes`'a
+ * eklenir → save effect armlanır. Save effect `restore()` ÖNCESİ kurulmaz; aksi
+ * halde Angular effect'in ilk (eager) tick'i boş `activeRoutes`'u yazıp saklı
+ * pinned'leri silerdi.
+ *
+ * **Duplicate önlemi**: Aktif tab pinned'di ise restore SAKLI `tabId` ile ekler;
+ * F5 sonrası korunan `history.state._tab` bununla eşleşir → handler türetmez, sadece
+ * focus eder. Aktif tab pinned değildiyse eşleşme olmaz → handler gelen URL'i yeni
+ * aktif tab olarak ekler (deep-link gereksinimi: "kayıtlıları yükle + URL'i ekle").
+ */
+export declare class TabSessionService {
+    private readonly navService;
+    private readonly keycloak;
+    private readonly injector;
+    private readonly STORAGE_PREFIX;
+    /** `NavService.MAX_TABS` ile aynı tavan — restore ve save iki tarafta da sınırlanır. */
+    private readonly MAX_PERSISTED;
+    private restored;
+    /** Son yazılan payload — değişmediyse gereksiz `localStorage` write'ı atlanır. */
+    private lastWritten;
+    /**
+     * Kullanıcı bazlı storage anahtarı. Mevcut kod (`app.profilesidebar.component.ts`)
+     * `idTokenParsed.sub` kullanıyor; her iki token şeklini de kapsamak için fallback
+     * zinciri — kullanıcı çözülemezse `anonymous`.
+     */
+    private storageKey;
+    /**
+     * SENKRON restore. `AppLayoutComponent` constructor'dan, ilk `NavigationEnd`
+     * işlenmeden ÖNCE çağrılmalı — böylece `NavService.activeRoute` handler'ının
+     * `knownTab` guard'ı restore edilen tabId'leri görür. Idempotent: ikinci çağrı no-op.
+     */
+    restore(): void;
+    /**
+     * Save effect'ini `restore()` SONRASI kurar. İlk çalıştığında `activeRoutes` zaten
+     * restore edilmiş pinned'leri içerdiği için yazım idempotent kalır. Effect, service'in
+     * kendi `Injector`'ına bağlanır (field initializer / constructor dışında kurulduğu için
+     * explicit injector zorunlu).
+     */
+    private armSave;
+    private save;
+    private load;
+    private isValidPersistedTab;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TabSessionService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<TabSessionService>;
+}

package/theme/layout/service/tab-session.service.ts

@@ -0,0 +1,138 @@
+import { Injectable, Injector, effect, inject } from '@angular/core';
+
+import { KeycloakService } from 'keycloak-angular';
+
+import { NavItem, NavService } from 'aril/boot/config/apps';
+
+/**
+ * localStorage'a serialize edilen pinned tab kaydı. `pinned` alanı SAKLANMAZ
+ * (yüklenen her kayıt zaten pinned'dir). `tabId` SAKLANIR — F5 sonrası
+ * `window.history.state._tab` ile eşleşip `NavService.activeRoute` handler'ının
+ * aynı tab'ı tekrar türetmesini (duplicate) engeller.
+ */
+interface PersistedTab {
+	tabId: string;
+	navLink: string;
+	navName: string;
+	icon?: string;
+}
+
+/**
+ * Sabitlenmiş (pinned) tab'ları kullanıcı bazlı `localStorage` anahtarında kalıcı
+ * kılar. F5 / yeniden login / yeni sekme açılışında pinned tab'lar geri yüklenir;
+ * non-pinned tab'lar saklanmaz.
+ *
+ * **Akış**: `AppLayoutComponent` constructor'da (menü/home provider'ları set
+ * edildikten SONRA) `restore()` SENKRON çağrılır → pinned'ler `NavService.activeRoutes`'a
+ * eklenir → save effect armlanır. Save effect `restore()` ÖNCESİ kurulmaz; aksi
+ * halde Angular effect'in ilk (eager) tick'i boş `activeRoutes`'u yazıp saklı
+ * pinned'leri silerdi.
+ *
+ * **Duplicate önlemi**: Aktif tab pinned'di ise restore SAKLI `tabId` ile ekler;
+ * F5 sonrası korunan `history.state._tab` bununla eşleşir → handler türetmez, sadece
+ * focus eder. Aktif tab pinned değildiyse eşleşme olmaz → handler gelen URL'i yeni
+ * aktif tab olarak ekler (deep-link gereksinimi: "kayıtlıları yükle + URL'i ekle").
+ */
+@Injectable({ providedIn: 'root' })
+export class TabSessionService {
+	private readonly navService = inject(NavService);
+	private readonly keycloak = inject(KeycloakService);
+	private readonly injector = inject(Injector);
+
+	private readonly STORAGE_PREFIX = 'tab-session:';
+	/** `NavService.MAX_TABS` ile aynı tavan — restore ve save iki tarafta da sınırlanır. */
+	private readonly MAX_PERSISTED = 20;
+
+	private restored = false;
+	/** Son yazılan payload — değişmediyse gereksiz `localStorage` write'ı atlanır. */
+	private lastWritten = '';
+
+	/**
+	 * Kullanıcı bazlı storage anahtarı. Mevcut kod (`app.profilesidebar.component.ts`)
+	 * `idTokenParsed.sub` kullanıyor; her iki token şeklini de kapsamak için fallback
+	 * zinciri — kullanıcı çözülemezse `anonymous`.
+	 */
+	private storageKey(): string {
+		const kc = this.keycloak.getKeycloakInstance();
+		const sub = kc?.tokenParsed?.sub ?? kc?.idTokenParsed?.sub ?? 'anonymous';
+		return this.STORAGE_PREFIX + sub;
+	}
+
+	/**
+	 * SENKRON restore. `AppLayoutComponent` constructor'dan, ilk `NavigationEnd`
+	 * işlenmeden ÖNCE çağrılmalı — böylece `NavService.activeRoute` handler'ının
+	 * `knownTab` guard'ı restore edilen tabId'leri görür. Idempotent: ikinci çağrı no-op.
+	 */
+	restore(): void {
+		if (this.restored) return;
+		const persisted = this.load();
+		const existingIds = new Set(this.navService.activeRoutes().map((t) => t.tabId));
+		for (const item of persisted) {
+			// Aynı tabId zaten ekliyse atla (idempotency / olası çift çağrı koruması).
+			if (existingIds.has(item.tabId)) continue;
+			this.navService.addToActiveRoutes({
+				tabId: item.tabId,
+				navLink: item.navLink,
+				navName: item.navName,
+				icon: item.icon,
+				pinned: true
+			});
+		}
+		this.restored = true;
+		this.armSave();
+	}
+
+	/**
+	 * Save effect'ini `restore()` SONRASI kurar. İlk çalıştığında `activeRoutes` zaten
+	 * restore edilmiş pinned'leri içerdiği için yazım idempotent kalır. Effect, service'in
+	 * kendi `Injector`'ına bağlanır (field initializer / constructor dışında kurulduğu için
+	 * explicit injector zorunlu).
+	 */
+	private armSave(): void {
+		effect(
+			() => {
+				const pinned = this.navService.activeRoutes().filter((t) => t.pinned);
+				this.save(pinned);
+			},
+			{ injector: this.injector }
+		);
+	}
+
+	private save(pinned: NavItem[]): void {
+		try {
+			const payload: PersistedTab[] = pinned
+				.slice(0, this.MAX_PERSISTED)
+				.map((t) => ({ tabId: t.tabId, navLink: t.navLink, navName: t.navName, icon: t.icon }));
+			const serialized = JSON.stringify(payload);
+			if (serialized === this.lastWritten) return;
+			this.lastWritten = serialized;
+			localStorage.setItem(this.storageKey(), serialized);
+		} catch {
+			/* quota / serialize hatası: kritik değil, persist sessizce atlanır */
+		}
+	}
+
+	private load(): PersistedTab[] {
+		try {
+			const raw = localStorage.getItem(this.storageKey());
+			if (!raw) return [];
+			const parsed: unknown = JSON.parse(raw);
+			if (!Array.isArray(parsed)) return [];
+			return parsed.filter((x): x is PersistedTab => this.isValidPersistedTab(x));
+		} catch {
+			return []; // bozuk JSON → yok say, uygulama normal açılır
+		}
+	}
+
+	private isValidPersistedTab(x: unknown): x is PersistedTab {
+		if (!x || typeof x !== 'object') return false;
+		const t = x as Record<string, unknown>;
+		return (
+			typeof t['tabId'] === 'string' &&
+			t['tabId'].length > 0 &&
+			typeof t['navLink'] === 'string' &&
+			t['navLink'].length > 0 &&
+			typeof t['navName'] === 'string'
+		);
+	}
+}