@propbinder/mobile-design 0.2.50 → 0.2.53

package/src/components/tab-bar/ds-mobile-tab-bar.ts

@@ -1,735 +0,0 @@
-import { Component, Input, Output, EventEmitter, signal, OnInit, AfterViewInit, OnDestroy, ElementRef, computed, inject, effect } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { Router, NavigationEnd } from '@angular/router';
-import { filter } from 'rxjs/operators';
-import { IonTabBar, IonTabButton, IonLabel, ModalController } from '@ionic/angular/standalone';
-import { DsIconComponent } from '@propbinder/design-system';
-import { DsAvatarComponent } from '@propbinder/design-system';
-import { DsLogoComponent } from '../logo/ds-logo';
-import { DsMobileProfileActionsSheetComponent, ActionResult, ActionGroup, Language } from '../bottom-sheet';
-import { disableModalShadowPointerEvents } from '../bottom-sheet/modal-shadow-fix';
-import { UserService } from '../../services/user.service';
-
-export interface TabConfig {
-  id: string;
-  label: string;
-  route: string;
-  icon: string;
-  iconActive: string;
-}
-
-/**
- * DsMobileTabBarComponent
- *
- * Responsive navigation tab bar that adapts from mobile to desktop:
- * - Mobile (< 768px): Bottom tab bar with icons + labels
- * - Desktop (≥ 768px): Top navigation bar with logo, tabs, and avatar
- *
- * Use this component INSIDE your own `ion-tabs` when Angular routing
- * requires `ion-tabs` to be a direct child in your component.
- *
- * @example
- * ```html
- * <!-- In your component with child routes -->
- * <!-- IMPORTANT: Add class="ds-tabs-wrapper" to ion-tabs for proper styling -->
- * <ion-tabs class="ds-tabs-wrapper">
- *   <ds-mobile-tab-bar
- *     [tabs]="tabs"
- *     [avatarInitials]="'JD'"
- *     [profileMenuItems]="profileMenuItems"
- *     (profileActionSelected)="handleProfileAction($event)"
- *   />
- * </ion-tabs>
- * ```
- *
- * @example With profile menu configuration
- * ```typescript
- * profileMenuItems: ActionGroup[] = [
- *   {
- *     actions: [
- *       { action: 'profile', title: 'My Profile', icon: 'remixUser3Line' },
- *       { action: 'settings', title: 'Settings', icon: 'remixSettings3Line' }
- *     ]
- *   },
- *   {
- *     actions: [
- *       { action: 'logout', title: 'Log Out', icon: 'remixLogoutBoxLine', destructive: true }
- *     ]
- *   }
- * ];
- *
- * handleProfileAction(result: ActionResult): void {
- *   switch (result.action) {
- *     case 'profile': // Navigate to profile
- *     case 'settings': // Navigate to settings
- *     case 'logout': // Handle logout
- *   }
- * }
- * ```
- *
- * @note When using this component, you must add the class "ds-tabs-wrapper"
- * to your `ion-tabs` element, or manually apply these styles:
- * ```css
- * ion-tabs {
- *   height: 100%;
- *   background: var(--color-header-surface);
- * }
- * ```
- */
-@Component({
-  selector: 'ds-mobile-tab-bar',
-  standalone: true,
-  imports: [CommonModule, IonTabBar, IonTabButton, IonLabel, DsIconComponent, DsAvatarComponent, DsLogoComponent],
-  styleUrls: ['./ds-mobile-tab-bar.css'],
-  template: `
-    <ion-tab-bar [attr.slot]="isDesktop() ? 'top' : 'bottom'" class="ds-tab-bar" [class.ds-tab-bar--desktop]="isDesktop()">
-      <!-- Logo (desktop only, full logo in header) -->
-      <div class="ds-tab-bar__logo">
-        <ds-logo variant="full" size="lg" />
-      </div>
-
-      <!-- Tab buttons container -->
-      <div class="ds-tab-bar__tabs" *ngIf="tabs">
-        <ion-tab-button
-          *ngFor="let tab of tabs; trackBy: trackByTabId"
-          [tab]="tab.route"
-          [attr.data-icon]="tab.icon"
-          [attr.data-icon-active]="tab.iconActive"
-          [attr.aria-label]="tab.label"
-          class="ds-tab-button ion-activatable"
-          [class.tab-selected]="isTabActive(tab.route)"
-        >
-          <div class="tab-icon-ripple"></div>
-          <div class="tab-icon-wrapper">
-            <ds-icon [name]="tab.icon" [size]="isDesktop() ? '20px' : '24px'" class="tab-icon-inactive" />
-            <ds-icon [name]="tab.iconActive" [size]="isDesktop() ? '20px' : '24px'" class="tab-icon-active" />
-          </div>
-          <ion-label [attr.aria-hidden]="true">{{ tab.label }}</ion-label>
-        </ion-tab-button>
-      </div>
-
-      <!-- Avatar (desktop only, positioned via CSS) -->
-      <div class="ds-tab-bar__actions">
-        <ds-avatar [size]="'md'" [type]="avatarType" [initials]="avatarInitials" [src]="avatarSrc" [iconName]="avatarIconName" (click)="handleAvatarClick()" />
-      </div>
-    </ion-tab-bar>
-  `,
-})
-export class DsMobileTabBarComponent implements OnInit, AfterViewInit, OnDestroy {
-  // Inputs
-  @Input() tabs: TabConfig[] = [];
-
-  // Avatar inputs
-  @Input() avatarType: 'initials' | 'photo' | 'icon' = 'initials';
-  @Input() avatarInitials: string = 'U';
-  @Input() avatarSrc: string = '';
-  @Input() avatarIconName: string = 'remixUser3Line';
-
-  /**
-   * Profile menu action groups to display when avatar is clicked.
-   * If not provided, only the avatarClick event will be emitted.
-   *
-   * @example
-   * ```typescript
-   * profileMenuItems: ActionGroup[] = [
-   *   {
-   *     actions: [
-   *       { action: 'profile', title: 'My Profile', icon: 'remixUser3Line' },
-   *       { action: 'settings', title: 'Settings', icon: 'remixSettings3Line' }
-   *     ]
-   *   }
-   * ];
-   * ```
-   */
-  @Input() profileMenuItems?: ActionGroup[];
-
-  // Outputs
-  @Output() avatarClick = new EventEmitter<void>();
-
-  /**
-   * Emitted when a profile menu action is selected.
-   * Parent component should handle the action logic (navigation, logout, etc.).
-   */
-  @Output() profileActionSelected = new EventEmitter<ActionResult>();
-
-  // Internal state - exposed for template binding
-  activeTab = signal<string>('');
-  isDesktop = signal<boolean>(false);
-
-  private mutationObserver?: MutationObserver;
-  private slotEnforcementObserver?: MutationObserver;
-  private resizeObserver?: ResizeObserver;
-  private mediaQuery?: MediaQueryList;
-  private routerSubscription?: any;
-
-  private router?: Router | null;
-  private modalController = inject(ModalController);
-  private userService = inject(UserService);
-
-  constructor(private elementRef: ElementRef) {
-    // Inject Router optionally
-    this.router = inject(Router, { optional: true }) || undefined;
-
-    // Initialize breakpoint detection EARLY (before effect)
-    // This ensures isDesktop() is set before the effect runs
-    this.setupBreakpointDetection();
-
-    // Debug: Log initial state
-    setTimeout(() => {
-      // console.log('[ds-mobile-tab-bar] Initial state:', {
-      //   isDesktop: this.isDesktop(),
-      //   windowWidth: window.innerWidth,
-      //   mediaQuery: this.mediaQuery?.matches,
-      //   userAgent: navigator.userAgent
-      // });
-    }, 100);
-
-    // Watch for isDesktop changes and update slot reactively
-    // effect() must be called in constructor (injection context)
-    effect(() => {
-      // This effect runs whenever isDesktop() changes
-      const _ = this.isDesktop(); // Read the signal to create dependency
-      // console.log('[ds-mobile-tab-bar] effect() triggered, isDesktop:', this.isDesktop());
-      if (this.elementRef.nativeElement) {
-        // Use setTimeout to ensure DOM is ready
-        setTimeout(() => this.updateSlot(), 0);
-      }
-    });
-  }
-
-  ngOnInit(): void {
-    // Listen to router events to detect active tab from URL
-    if (this.router) {
-      this.routerSubscription = this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((event: any) => {
-        const url = event.urlAfterRedirects || event.url;
-        // Extract the route segment (e.g., /tab-bar-test/home -> home)
-        const segments = url.split('/').filter((s: string) => s);
-        const lastSegment = segments[segments.length - 1];
-
-        // Find matching tab by route
-        if (this.tabs && lastSegment) {
-          const matchingTab = this.tabs.find((tab) => tab.route === lastSegment);
-          if (matchingTab) {
-            this.activeTab.set(matchingTab.route);
-          }
-        }
-      });
-    }
-  }
-
-  ngAfterViewInit(): void {
-    // Initial removal
-    this.removeTitleAttributes();
-
-    // Set up mutation observer to continuously remove title attributes
-    this.setupTitleRemovalObserver();
-
-    // Set up active tab detection
-    this.setupActiveTabDetection();
-
-    // Ensure slot is set correctly on initial render (with retries)
-    this.updateSlot();
-
-    // Set up slot enforcement to prevent Ionic from overriding
-    setTimeout(() => {
-      this.setupSlotEnforcement();
-      // Also retry updateSlot a few times to ensure it sticks
-      setTimeout(() => this.updateSlot(), 100);
-      setTimeout(() => this.updateSlot(), 300);
-    }, 0);
-  }
-
-  private updateSlot(): void {
-    // CRITICAL: Set slot on the HOST element (ds-mobile-tab-bar) first
-    // Ionic positions children based on the wrapper's slot, not the inner element's slot
-    const hostElement = this.elementRef.nativeElement;
-    const hostSlotValue = this.isDesktop() ? 'top' : 'bottom';
-    const currentHostSlot = hostElement.getAttribute('slot');
-
-    if (currentHostSlot !== hostSlotValue) {
-      // console.log('[ds-mobile-tab-bar] updateSlot: Setting HOST slot from', currentHostSlot, 'to', hostSlotValue);
-      hostElement.setAttribute('slot', hostSlotValue);
-      (hostElement as any).slot = hostSlotValue;
-    }
-
-    // Get the ion-tab-bar element
-    const tabBar = this.elementRef.nativeElement.querySelector('ion-tab-bar');
-    if (!tabBar) {
-      // console.log('[ds-mobile-tab-bar] updateSlot: tabBar not found, retrying...');
-      // Retry if element not found yet
-      setTimeout(() => this.updateSlot(), 50);
-      return;
-    }
-
-    const slotValue = this.isDesktop() ? 'top' : 'bottom';
-    const currentSlot = tabBar.getAttribute('slot');
-    const currentSlotProperty = (tabBar as any).slot;
-
-    // Debug logging
-    // console.log('[ds-mobile-tab-bar] updateSlot:', {
-    //   isDesktop: this.isDesktop(),
-    //   windowWidth: window.innerWidth,
-    //   slotValue,
-    //   currentSlotAttribute: currentSlot,
-    //   currentSlotProperty: currentSlotProperty,
-    //   tabBarElement: tabBar,
-    //   tabBarParent: tabBar.parentElement?.tagName,
-    //   tabBarInIonTabs: tabBar.closest('ion-tabs') !== null
-    // });
-
-    // Only update if different to avoid unnecessary DOM manipulation
-    if (currentSlot !== slotValue || currentSlotProperty !== slotValue) {
-      // console.log('[ds-mobile-tab-bar] updateSlot: Setting slot from', currentSlot, 'to', slotValue);
-
-      // Set both attribute and property to ensure it works
-      tabBar.setAttribute('slot', slotValue);
-      (tabBar as any).slot = slotValue;
-
-      // Also try setting it on the parent ion-tabs
-      const parentIonTabs = tabBar.closest('ion-tabs');
-      if (parentIonTabs) {
-        // console.log('[ds-mobile-tab-bar] updateSlot: Found parent ion-tabs');
-        // Force Ionic to recognize the slot change
-        (parentIonTabs as any).forceUpdate?.();
-      }
-
-      // Force a reflow to ensure Ionic processes the change
-      void tabBar.offsetHeight;
-
-      // Verify it was set
-      const verifySlot = tabBar.getAttribute('slot');
-      const verifySlotProperty = (tabBar as any).slot;
-      // console.log('[ds-mobile-tab-bar] updateSlot: After update, slot attribute:', verifySlot, 'slot property:', verifySlotProperty);
-
-      // Check computed styles
-      const computedStyle = window.getComputedStyle(tabBar);
-      const parentComputedStyle = tabBar.parentElement ? window.getComputedStyle(tabBar.parentElement) : null;
-      const ionTabsForStyles = tabBar.closest('ion-tabs');
-      const ionTabsComputedStyle = ionTabsForStyles ? window.getComputedStyle(ionTabsForStyles) : null;
-
-      // console.log('[ds-mobile-tab-bar] updateSlot: Computed styles:', {
-      //   tabBar: {
-      //     position: computedStyle.position,
-      //     top: computedStyle.top,
-      //     bottom: computedStyle.bottom,
-      //     order: computedStyle.order,
-      //     display: computedStyle.display,
-      //     zIndex: computedStyle.zIndex,
-      //     transform: computedStyle.transform
-      //   },
-      //   parent: parentComputedStyle ? {
-      //     display: parentComputedStyle.display,
-      //     flexDirection: parentComputedStyle.flexDirection,
-      //     gridTemplateRows: parentComputedStyle.gridTemplateRows
-      //   } : null,
-      //   ionTabs: ionTabsComputedStyle ? {
-      //     display: ionTabsComputedStyle.display,
-      //     flexDirection: ionTabsComputedStyle.flexDirection,
-      //     gridTemplateRows: ionTabsComputedStyle.gridTemplateRows,
-      //     position: ionTabsComputedStyle.position
-      //   } : null,
-      //   tabBarRect: tabBar.getBoundingClientRect(),
-      //   windowHeight: window.innerHeight
-      // });
-    } else {
-      // console.log('[ds-mobile-tab-bar] updateSlot: Slot already correct, no update needed');
-
-      // Even if slot is correct, check computed styles to see why it's not at top
-      const computedStyle = window.getComputedStyle(tabBar);
-      const ionTabsForStyles = tabBar.closest('ion-tabs');
-      const ionTabsComputedStyle = ionTabsForStyles ? window.getComputedStyle(ionTabsForStyles) : null;
-      const tabBarRect = tabBar.getBoundingClientRect();
-
-      // Log key values directly so they're always visible
-      // console.log('[ds-mobile-tab-bar] KEY VALUES:');
-      // console.log('  tabBar.position:', computedStyle.position);
-      // console.log('  tabBar.top:', computedStyle.top);
-      // console.log('  tabBar.bottom:', computedStyle.bottom);
-      // console.log('  tabBar.order:', computedStyle.order);
-      // console.log('  tabBar.display:', computedStyle.display);
-      // console.log('  tabBarRect.top:', tabBarRect.top, 'px from top');
-      // console.log('  tabBarRect.bottom:', tabBarRect.bottom, 'px from top');
-      // console.log('  window.innerHeight:', window.innerHeight);
-      if (ionTabsComputedStyle) {
-        // console.log('  ionTabs.display:', ionTabsComputedStyle.display);
-        // console.log('  ionTabs.flexDirection:', ionTabsComputedStyle.flexDirection);
-        // console.log('  ionTabs.gridTemplateRows:', ionTabsComputedStyle.gridTemplateRows);
-      }
-      if (ionTabsForStyles) {
-        const children = Array.from(ionTabsForStyles.children);
-        // console.log('  ionTabs children count:', children.length);
-        children.forEach((child: any, index) => {
-          // console.log(`    [${index}] ${child.tagName} slot="${child.getAttribute('slot')}" order="${window.getComputedStyle(child).order}"`);
-        });
-      }
-
-      // console.log('[ds-mobile-tab-bar] updateSlot: Computed styles (slot correct but visually wrong):', {
-      //   tabBar: {
-      //     position: computedStyle.position,
-      //     top: computedStyle.top,
-      //     bottom: computedStyle.bottom,
-      //     order: computedStyle.order,
-      //     display: computedStyle.display,
-      //     zIndex: computedStyle.zIndex,
-      //     transform: computedStyle.transform,
-      //     marginTop: computedStyle.marginTop,
-      //     marginBottom: computedStyle.marginBottom,
-      //     width: computedStyle.width,
-      //     height: computedStyle.height
-      //   },
-      //   ionTabs: ionTabsComputedStyle ? {
-      //     display: ionTabsComputedStyle.display,
-      //     flexDirection: ionTabsComputedStyle.flexDirection,
-      //     gridTemplateRows: ionTabsComputedStyle.gridTemplateRows,
-      //     gridTemplateColumns: ionTabsComputedStyle.gridTemplateColumns,
-      //     position: ionTabsComputedStyle.position,
-      //     alignItems: ionTabsComputedStyle.alignItems,
-      //     justifyContent: ionTabsComputedStyle.justifyContent,
-      //     height: ionTabsComputedStyle.height,
-      //     minHeight: ionTabsComputedStyle.minHeight
-      //   } : null,
-      //   tabBarRect: {
-      //     top: tabBarRect.top,
-      //     bottom: tabBarRect.bottom,
-      //     height: tabBarRect.height,
-      //     y: tabBarRect.y,
-      //     left: tabBarRect.left,
-      //     right: tabBarRect.right,
-      //     width: tabBarRect.width
-      //   },
-      //   windowHeight: window.innerHeight,
-      //   distanceFromTop: tabBarRect.top,
-      //   distanceFromBottom: window.innerHeight - tabBarRect.bottom,
-      //   // Check if tab bar is actually in the DOM at the right position
-      //   tabBarParent: tabBar.parentElement?.tagName,
-      //   tabBarNextSibling: tabBar.nextElementSibling?.tagName,
-      //   tabBarPreviousSibling: tabBar.previousElementSibling?.tagName,
-      //   // Check all children of ion-tabs to see DOM order
-      //   ionTabsChildren: ionTabsForStyles ? Array.from(ionTabsForStyles.children).map((child: any) => ({
-      //     tagName: child.tagName,
-      //     slot: child.getAttribute('slot'),
-      //     order: window.getComputedStyle(child).order
-      //   })) : null
-      // });
-    }
-  }
-
-  private setupSlotEnforcement(): void {
-    const hostElement = this.elementRef.nativeElement;
-    const tabBar = this.elementRef.nativeElement.querySelector('ion-tab-bar');
-    if (!tabBar) {
-      // console.log('[ds-mobile-tab-bar] setupSlotEnforcement: tabBar not found, retrying...');
-      // Retry if element not found yet
-      setTimeout(() => this.setupSlotEnforcement(), 50);
-      return;
-    }
-
-    // console.log('[ds-mobile-tab-bar] setupSlotEnforcement: Setting up MutationObserver');
-
-    const observer = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (mutation.type === 'attributes' && mutation.attributeName === 'slot') {
-          const target = mutation.target as HTMLElement;
-          const expectedSlot = this.isDesktop() ? 'top' : 'bottom';
-
-          // Check both host element and tab bar
-          if (target === hostElement || target === tabBar) {
-            const currentSlot = target.getAttribute('slot');
-
-            // console.log('[ds-mobile-tab-bar] Slot changed by external source:', {
-            //   target: target.tagName,
-            //   currentSlot,
-            //   expectedSlot,
-            //   isDesktop: this.isDesktop()
-            // });
-
-            // If Ionic or something else changed it, force it back
-            if (currentSlot !== expectedSlot) {
-              // console.log('[ds-mobile-tab-bar] Enforcing slot back to:', expectedSlot);
-              // Use requestAnimationFrame to avoid infinite loops
-              requestAnimationFrame(() => {
-                target.setAttribute('slot', expectedSlot);
-                (target as any).slot = expectedSlot;
-              });
-            }
-          }
-        }
-      });
-    });
-
-    // Observe both host element and tab bar for slot changes
-    observer.observe(hostElement, {
-      attributes: true,
-      attributeFilter: ['slot'],
-    });
-
-    observer.observe(tabBar, {
-      attributes: true,
-      attributeFilter: ['slot'],
-    });
-
-    // Store observer for cleanup
-    this.slotEnforcementObserver = observer;
-  }
-
-  ngOnDestroy(): void {
-    if (this.mutationObserver) {
-      this.mutationObserver.disconnect();
-    }
-    if (this.slotEnforcementObserver) {
-      this.slotEnforcementObserver.disconnect();
-    }
-    if (this.mediaQuery) {
-      this.mediaQuery.removeEventListener('change', this.handleBreakpointChange);
-    }
-    if (this.routerSubscription) {
-      this.routerSubscription.unsubscribe();
-    }
-  }
-
-  private setupBreakpointDetection(): void {
-    // Use matchMedia for responsive breakpoint detection
-    this.mediaQuery = window.matchMedia('(min-width: 768px)');
-    this.isDesktop.set(this.mediaQuery.matches);
-
-    this.handleBreakpointChange = this.handleBreakpointChange.bind(this);
-    this.mediaQuery.addEventListener('change', this.handleBreakpointChange);
-  }
-
-  private handleBreakpointChange = (e: MediaQueryListEvent): void => {
-    // console.log('[ds-mobile-tab-bar] handleBreakpointChange:', {
-    //   matches: e.matches,
-    //   windowWidth: window.innerWidth,
-    //   previousIsDesktop: this.isDesktop()
-    // });
-    this.isDesktop.set(e.matches);
-    // Force update the slot when breakpoint changes
-    this.updateSlot();
-  };
-
-  private setupTitleRemovalObserver(): void {
-    const config = {
-      attributes: true,
-      attributeFilter: ['title'],
-      subtree: true,
-      childList: true,
-    };
-
-    this.mutationObserver = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (mutation.type === 'attributes' && mutation.attributeName === 'title') {
-          const target = mutation.target as HTMLElement;
-          if (target.tagName === 'ION-TAB-BUTTON' && target.hasAttribute('title')) {
-            target.removeAttribute('title');
-          }
-        }
-      });
-      // Also do a sweep after any changes
-      this.removeTitleAttributes();
-    });
-
-    this.mutationObserver.observe(this.elementRef.nativeElement, config);
-  }
-
-  private removeTitleAttributes(): void {
-    const tabButtons = this.elementRef.nativeElement.querySelectorAll('ion-tab-button');
-    tabButtons.forEach((button: HTMLElement) => {
-      if (button.hasAttribute('title')) {
-        button.removeAttribute('title');
-      }
-      // Also remove from the native button inside shadow DOM
-      const nativeButton = button.shadowRoot?.querySelector('button');
-      if (nativeButton?.hasAttribute('title')) {
-        nativeButton.removeAttribute('title');
-      }
-    });
-  }
-
-  private setupActiveTabDetection(): void {
-    // Find the parent ion-tabs element
-    const ionTabs = this.elementRef.nativeElement.closest('ion-tabs');
-    if (!ionTabs) {
-      console.warn('ds-mobile-tab-bar: Could not find parent ion-tabs element');
-      return;
-    }
-
-    // Listen for tab changes using Ionic events
-    ionTabs.addEventListener('ionTabsDidChange', (event: any) => {
-      const tabRoute = event.detail?.tab;
-      if (tabRoute) {
-        this.activeTab.set(tabRoute);
-      } else {
-        // Fallback: check DOM immediately after event
-        setTimeout(() => this.updateActiveTabFromDOM(), 0);
-      }
-    });
-
-    // Also listen for tab button clicks
-    this.elementRef.nativeElement.addEventListener('click', (event: any) => {
-      const button = event.target.closest('ion-tab-button');
-      if (button) {
-        setTimeout(() => this.updateActiveTabFromDOM(), 50);
-      }
-    });
-
-    // Get initial selected tab
-    this.updateActiveTabFromDOM();
-
-    // Watch for selected attribute changes on tab buttons (more reliable)
-    const observer = new MutationObserver(() => {
-      this.updateActiveTabFromDOM();
-    });
-
-    observer.observe(this.elementRef.nativeElement, {
-      attributes: true,
-      attributeFilter: ['selected', 'tab'],
-      subtree: true,
-      childList: true,
-    });
-
-    // Also watch the parent ion-tabs for changes
-    observer.observe(ionTabs, {
-      attributes: true,
-      attributeFilter: ['selected', 'tab'],
-      subtree: true,
-    });
-
-    // Periodic check as fallback (in case events don't fire)
-    setInterval(() => {
-      this.updateActiveTabFromDOM();
-    }, 100);
-  }
-
-  private updateActiveTabFromDOM(): void {
-    // Check parent ion-tabs for selected tab (most reliable)
-    const ionTabs = this.elementRef.nativeElement.closest('ion-tabs');
-    if (ionTabs) {
-      // Method 1: Check for ion-tab with selected attribute
-      const selectedTab = ionTabs.querySelector('ion-tab[selected]');
-      if (selectedTab) {
-        const tabRoute = selectedTab.getAttribute('tab');
-        if (tabRoute) {
-          this.activeTab.set(tabRoute);
-          return;
-        }
-      }
-
-      // Method 2: Check for ion-tab without tab-hidden class (Ionic shows active tab)
-      const visibleTab = ionTabs.querySelector('ion-tab:not(.tab-hidden)');
-      if (visibleTab) {
-        const tabRoute = visibleTab.getAttribute('tab');
-        if (tabRoute) {
-          this.activeTab.set(tabRoute);
-          return;
-        }
-      }
-    }
-
-    // Method 3: Check tab buttons for selected state
-    const tabButtons = this.elementRef.nativeElement.querySelectorAll('ion-tab-button');
-    tabButtons.forEach((button: any) => {
-      // Check Ionic's native selected property
-      if (button.selected === true) {
-        const tabRoute = button.getAttribute('tab');
-        if (tabRoute) {
-          this.activeTab.set(tabRoute);
-        }
-      }
-    });
-  }
-
-  trackByTabId(index: number, tab: TabConfig): string {
-    return tab.id;
-  }
-
-  isTabActive(tabRoute: string): boolean {
-    const currentActive = this.activeTab();
-    // Match by route (primary) or by checking if the tab button is selected
-    if (currentActive === tabRoute) {
-      return true;
-    }
-
-    // Fallback: check if this button is actually selected in the DOM
-    const tabButtons = this.elementRef.nativeElement.querySelectorAll('ion-tab-button');
-    for (let i = 0; i < tabButtons.length; i++) {
-      const button = tabButtons[i] as any;
-      if (button.getAttribute('tab') === tabRoute && button.selected === true) {
-        return true;
-      }
-    }
-
-    return false;
-  }
-
-  /**
-   * Handle avatar click - opens profile menu if configured, otherwise just emits avatarClick
-   */
-  async handleAvatarClick(): Promise<void> {
-    // Emit the basic click event (for backwards compatibility)
-    this.avatarClick.emit();
-
-    // Use input if provided, otherwise fall back to service
-    const menuItems = this.profileMenuItems || this.userService.profileMenuItems();
-
-    // If no menu items configured, just emit and return
-    if (!menuItems || menuItems.length === 0) {
-      return;
-    }
-
-    // Open the bottom sheet with configured menu items
-    const sheet = await this.modalController.create({
-      component: DsMobileProfileActionsSheetComponent,
-      componentProps: {
-        actionGroups: menuItems,
-        currentLanguage: 'da', // TODO: Get from language service
-        availableLanguages: [
-          {
-            code: 'da',
-            nativeName: 'Dansk',
-            englishName: 'Danish',
-            flagIcon: '/Assets/country-flags/denmark.svg',
-          },
-          {
-            code: 'en',
-            nativeName: 'English',
-            englishName: 'English',
-            flagIcon: '/Assets/country-flags/united kingdom.svg',
-          },
-          {
-            code: 'sv',
-            nativeName: 'Svenska',
-            englishName: 'Swedish',
-            flagIcon: '/Assets/country-flags/sweden.svg',
-          },
-          {
-            code: 'no',
-            nativeName: 'Norsk',
-            englishName: 'Norwegian',
-            flagIcon: '/Assets/country-flags/norway.svg',
-          },
-          {
-            code: 'de',
-            nativeName: 'Deutsch',
-            englishName: 'German',
-            flagIcon: '/Assets/country-flags/germany.svg',
-          },
-        ],
-      },
-      breakpoints: [0, 1],
-      initialBreakpoint: 1,
-      handle: true,
-      cssClass: ['ds-bottom-sheet', 'auto-height'],
-    });
-
-    await sheet.present();
-    disableModalShadowPointerEvents(sheet);
-
-    const result = await sheet.onWillDismiss<ActionResult>();
-    if (result.data?.action) {
-      // Emit the selected action to parent
-      this.profileActionSelected.emit(result.data);
-      // Also notify globally via UserService
-      this.userService.notifyProfileAction(result.data);
-    }
-  }
-}