web-mojo 2.1.550 → 2.1.626

package/dist/index.es.js

@@ -1,442 +1,16 @@
-import { V as View, W as WebApp, d as dataFormatter, M as Mustache } from "./chunks/WebApp-6ncOIVXa.js";
-import { B, D, g, E, h, r, R, b, a, c, e, f } from "./chunks/WebApp-6ncOIVXa.js";
-import { P as Page } from "./chunks/Page-csKPSoVL.js";
-import { G as GroupList, T as ToastService, U as User, a as Group } from "./chunks/ContextMenu-B6VXD0nZ.js";
-import { C, b as b2, c as c2, M, f as f2, g as g2, h as h2, i, j, e as e2, d } from "./chunks/ContextMenu-B6VXD0nZ.js";
-import { M as Member } from "./chunks/ChatView-C3oW0hvN.js";
-import { f as f3, e as e3, C as C2, E as E2, k, j as j2, r as r2, t, s, x, z, y, u, w, v, F, g as g3, ap, aq, D as D2, I, B as B2, A, H, Q, R as R2, G, N, O, J, K, Y, Z, a2, a3, $, _, a0, a1, a5, a7, a6, a4, L, c as c3, a8, a9, l, n, m, ab, aa, ae, ac, ad, P, aj, an, ak, al, am, af, ag, ah, ao, ai, W, X, U, V, S, i as i2, h as h3, o, q, p, d as d2, b as b3, a as a10, T, ar, aw, av, as, at, au } from "./chunks/ChatView-C3oW0hvN.js";
-import { T as TopNav } from "./chunks/TopNav-Szt3ULMS.js";
+import { V as View, W as WebApp, d as dataFormatter, M as Mustache } from "./chunks/WebApp-ciExPk0c.js";
+import { B, D, g, E, h, r, R, b, a, c, e, f } from "./chunks/WebApp-ciExPk0c.js";
+import { P as Page } from "./chunks/Page-BrWp1FsC.js";
+import { G as GroupList, T as ToastService, U as User, a as Group } from "./chunks/ContextMenu-Ckttp-rD.js";
+import { C, b as b2, c as c2, M, f as f2, g as g2, h as h2, i, j, e as e2, d } from "./chunks/ContextMenu-Ckttp-rD.js";
+import { M as Member } from "./chunks/ChatView-BxbA5ob6.js";
+import { f as f3, e as e3, C as C2, E as E2, k, j as j2, r as r2, t, s, x, z, y, u, w, v, F, g as g3, ap, aq, D as D2, I, B as B2, A, H, Q, R as R2, G, N, O, J, K, Y, Z, a2, a3, $, _, a0, a1, a5, a7, a6, a4, L, c as c3, a8, a9, l, n, m, ab, aa, ae, ac, ad, P, aj, an, ak, al, am, af, ag, ah, ao, ai, W, X, U, V, S, i as i2, h as h3, o, q, p, d as d2, b as b3, a as a10, T, ar, aw, av, as, at, au } from "./chunks/ChatView-BxbA5ob6.js";
+import { S as SimpleSearchView, T as TopNav } from "./chunks/TopNav-DGtRj5F4.js";
 import { T as TokenManager } from "./chunks/TokenManager-Fjt083wv.js";
-import Dialog from "./chunks/Dialog-CY3xpb40.js";
-import { default as default2 } from "./chunks/DataView-CCrESxij.js";
-import { F as F2, a as a11 } from "./chunks/FormView-BFa00Ukw.js";
+import Dialog from "./chunks/Dialog-aTTrQ6uW.js";
+import { default as default2 } from "./chunks/DataView-BQOKPprj.js";
+import { F as F2, a as a11 } from "./chunks/FormView-DjypPrEw.js";
 import { W as W2 } from "./chunks/WebSocketClient-B6ribe3B.js";
-class ResultsView extends View {
-  constructor(options = {}) {
-    super({
-      className: "search-results-view flex-grow-1 overflow-auto d-flex flex-column",
-      template: `
-                <div class="flex-grow-1 overflow-auto">
-                {{#data.loading}}
-                    <div class="text-center p-4">
-                        <div class="spinner-border spinner-border-sm text-muted" role="status">
-                            <span class="visually-hidden">Loading...</span>
-                        </div>
-                        <div class="mt-2 small text-muted">{{data.loadingText}}</div>
-                    </div>
-                {{/data.loading}}
-
-                {{^data.loading}}
-                    {{#data.items}}
-                        <div class="simple-search-item position-relative"
-                             data-action="select-item"
-                             data-item-index="{{index}}">
-                            {{{itemContent}}}
-                            <i class="bi bi-chevron-right position-absolute end-0 top-50 translate-middle-y me-3 text-muted"></i>
-                        </div>
-                    {{/data.items}}
-
-                    {{#data.showNoResults}}
-                        <div class="text-center p-4">
-                            <i class="bi bi-search text-muted mb-2" style="font-size: 1.5rem;"></i>
-                            <div class="text-muted small">{{data.noResultsText}}</div>
-                            <button type="button"
-                                    class="btn btn-link btn-sm mt-2 p-0"
-                                    data-action="clear-search">
-                                Clear search
-                            </button>
-                        </div>
-                    {{/data.showNoResults}}
-
-                    {{#data.showEmpty}}
-                        <div class="text-center p-4">
-                            <i class="{{data.emptyIcon}} text-muted mb-2" style="font-size: 2rem;"></i>
-                            <div class="text-muted small mb-2">{{data.emptyText}}</div>
-                            {{#data.emptySubtext}}
-                            <div class="text-muted" style="font-size: 0.75rem;">
-                                {{data.emptySubtext}}
-                            </div>
-                            {{/data.emptySubtext}}
-                        </div>
-                    {{/data.showEmpty}}
-                {{/data.loading}}
-                </div>
-
-                {{#data.showResultsCount}}
-                <div class="border-top bg-light p-2 text-center">
-                    <small class="text-muted">
-                        {{data.filteredCount}} of {{data.totalCount}}
-                    </small>
-                </div>
-                {{/data.showResultsCount}}
-            `,
-      ...options
-    });
-    this.parentView = options.parentView;
-  }
-  async handleActionSelectItem(event, element) {
-    event.preventDefault();
-    const itemIndex = parseInt(element.getAttribute("data-item-index"));
-    if (this.parentView) {
-      this.parentView.handleItemSelection(itemIndex);
-    }
-  }
-  async handleActionClearSearch(event, _element) {
-    event.preventDefault();
-    if (this.parentView) {
-      this.parentView.clearSearch();
-    }
-  }
-}
-class SimpleSearchView extends View {
-  constructor(options = {}) {
-    super({
-      className: "simple-search-view h-100 d-flex flex-column",
-      template: `
-                <div class="p-3 border-bottom bg-light">
-                    <div class="d-flex justify-content-between align-items-start mb-3">
-                        <h6 class="text-muted fw-semibold mb-0">
-                            {{#data.headerIcon}}<i class="{{data.headerIcon}} me-2"></i>{{/data.headerIcon}}
-                            {{{data.headerText}}}
-                        </h6>
-                        {{#data.showExitButton}}
-                        <button class="btn btn-link p-0 text-muted simple-search-exit-btn"
-                                type="button"
-                                data-action="exit-view"
-                                title="Exit"
-                                aria-label="Exit view">
-                            <i class="bi bi-x-lg" aria-hidden="true"></i>
-                        </button>
-                        {{/data.showExitButton}}
-                    </div>
-                    <div class="position-relative">
-                        <input type="text"
-                               class="form-control form-control-sm pe-5"
-                               placeholder="{{data.searchPlaceholder}}"
-                               value="{{data.searchValue}}"
-                               data-filter="live-search"
-                               data-filter-debounce="{{data.debounceMs}}"
-                               data-change-action="search-items">
-                        <button class="btn btn-link p-0 position-absolute top-50 end-0 translate-middle-y me-2 text-muted simple-search-clear-btn"
-                                type="button"
-                                data-action="clear-search"
-                                title="Clear search"
-                                aria-label="Clear search">
-                            <i class="bi bi-x-circle-fill" aria-hidden="true"></i>
-                        </button>
-                    </div>
-                </div>
-
-                <div data-container="results"></div>
-
-                {{#data.showFooter}}
-                <div class="p-3 border-top bg-light">
-                    <small class="text-muted">
-                        <i class="{{data.footerIcon}} me-1"></i>
-                        {{{data.footerContent}}}
-                    </small>
-                </div>
-                {{/data.showFooter}}
-            `,
-      ...options
-    });
-    this.Collection = options.Collection;
-    this.collection = options.collection;
-    this.itemTemplate = options.itemTemplate || this.getDefaultItemTemplate();
-    this.searchFields = options.searchFields || ["name"];
-    this.collectionParams = { size: 25, ...options.collectionParams };
-    this.headerText = options.headerText || "Select Item";
-    this.headerIcon = options.headerIcon || "bi bi-list";
-    this.searchPlaceholder = options.searchPlaceholder || "Search...";
-    this.loadingText = options.loadingText || "Loading items...";
-    this.noResultsText = options.noResultsText || "No items match your search";
-    this.emptyText = options.emptyText || "No items available";
-    this.emptySubtext = options.emptySubtext || null;
-    this.emptyIcon = options.emptyIcon || "bi bi-inbox";
-    this.footerContent = options.footerContent || null;
-    this.footerIcon = options.footerIcon || "bi bi-info-circle";
-    this.showExitButton = options.showExitButton || false;
-    this.searchValue = "";
-    this.filteredItems = [];
-    this.loading = false;
-    this.hasSearched = false;
-    this.searchTimer = null;
-    this.debounceMs = options.debounceMs || 800;
-    this.resultsView = new ResultsView({
-      parentView: this
-    });
-    if (!this.collection && this.Collection) {
-      this.collection = new this.Collection();
-    }
-    this.addChild(this.resultsView);
-  }
-  onInit() {
-    if (this.collection) {
-      this.setupCollection();
-    }
-    if (this.collection && this.options.autoLoad !== false) {
-      this.loadItems();
-    }
-  }
-  setupCollection() {
-    Object.assign(this.collection.params, this.collectionParams);
-    this.collection.on("fetch:success", () => {
-      this.loading = false;
-      this.updateFilteredItems();
-    });
-    this.collection.on("fetch:error", () => {
-      this.loading = false;
-    });
-  }
-  async loadItems() {
-    if (!this.collection) {
-      console.warn("SimpleSearchView: No collection provided");
-      return;
-    }
-    this.loading = true;
-    this.updateResultsView();
-    try {
-      await this.collection.fetch();
-      this.updateFilteredItems();
-    } catch (error) {
-      console.error("Error loading items:", error);
-      const app = this.getApp();
-      app?.showError?.("Failed to load items. Please try again.");
-    } finally {
-      this.loading = false;
-      this.updateFilteredItems();
-    }
-  }
-  updateFilteredItems() {
-    if (!this.collection) {
-      this.filteredItems = [];
-      return;
-    }
-    const items = this.collection.toJSON();
-    if (!this.searchValue || !this.searchValue.trim()) {
-      this.filteredItems = items;
-    } else {
-      const searchTerm = this.searchValue.toLowerCase().trim();
-      this.filteredItems = items.filter((item) => {
-        return this.searchFields.some((field) => {
-          const value = this.getNestedValue(item, field);
-          return value && value.toString().toLowerCase().includes(searchTerm);
-        });
-      });
-    }
-    this.updateResultsView();
-  }
-  getNestedValue(obj, path) {
-    return path.split(".").reduce((current, key) => current?.[key], obj);
-  }
-  async getViewData() {
-    return {
-      searchValue: this.searchValue,
-      showFooter: !!this.footerContent,
-      showExitButton: this.showExitButton,
-      debounceMs: this.debounceMs,
-      // UI text
-      headerText: this.headerText,
-      headerIcon: this.headerIcon,
-      searchPlaceholder: this.searchPlaceholder,
-      footerContent: this.footerContent,
-      footerIcon: this.footerIcon
-    };
-  }
-  updateResultsView() {
-    if (!this.resultsView) return;
-    const hasItems = this.collection && this.collection.length() > 0;
-    const hasFilteredItems = this.filteredItems.length > 0;
-    const hasSearchValue = this.searchValue.length > 0;
-    const processedItems = this.filteredItems.map((item, index2) => {
-      return {
-        ...item,
-        index: index2,
-        itemContent: this.processItemTemplate(item)
-      };
-    });
-    this.resultsView.data = {
-      loading: this.loading,
-      items: processedItems,
-      showEmpty: !this.loading && !hasItems,
-      showNoResults: !this.loading && hasItems && !hasFilteredItems && hasSearchValue,
-      showResultsCount: !this.loading && hasItems,
-      filteredCount: this.filteredItems.length,
-      totalCount: this.collection?.restEnabled ? this.collection?.meta?.count || 0 : this.collection?.length() || 0,
-      // UI text
-      loadingText: this.loadingText,
-      noResultsText: this.noResultsText,
-      emptyText: this.emptyText,
-      emptySubtext: this.emptySubtext,
-      emptyIcon: this.emptyIcon
-    };
-    this.resultsView.render();
-  }
-  processItemTemplate(item) {
-    let template = this.itemTemplate;
-    template = template.replace(/\{\{(\w+)\}\}/g, (match, prop) => {
-      return this.getNestedValue(item, prop) || "";
-    });
-    return template;
-  }
-  getDefaultItemTemplate() {
-    return `
-            <div class="p-3 border-bottom">
-                <div class="fw-semibold text-dark">{{name}}</div>
-                <small class="text-muted">{{id}}</small>
-            </div>
-        `;
-  }
-  async onPassThruActionSearchItems(event, element) {
-    const searchValue = element.value || "";
-    console.log("search change...");
-    this.searchValue = searchValue;
-    this.hasSearched = true;
-    if (this.searchTimer) {
-      clearTimeout(this.searchTimer);
-    }
-    this.performSearch();
-  }
-  async performSearch() {
-    const searchParams = { ...this.collectionParams };
-    if (this.searchValue && this.searchValue.length > 1) {
-      searchParams.search = this.searchValue.trim();
-    }
-    this.collection.setParams(searchParams, true);
-  }
-  handleItemSelection(itemIndex) {
-    if (isNaN(itemIndex) || itemIndex < 0 || itemIndex >= this.filteredItems.length) {
-      console.error("Invalid item index:", itemIndex);
-      return;
-    }
-    const item = this.filteredItems[itemIndex];
-    const model = this.collection ? this.collection.get(item.id) : null;
-    this.emit("item:selected", {
-      item,
-      model,
-      index: itemIndex
-    });
-  }
-  /**
-   * Set the collection for this search view
-   */
-  setCollection(collection) {
-    this.collection = collection;
-    this.setupCollection();
-    return this;
-  }
-  /**
-   * Set the item template
-   */
-  setItemTemplate(template) {
-    this.itemTemplate = template;
-    this.updateResultsView();
-    return this;
-  }
-  /**
-   * Set search fields
-   */
-  setSearchFields(fields) {
-    this.searchFields = Array.isArray(fields) ? fields : [fields];
-    return this;
-  }
-  /**
-   * Refresh items list
-   */
-  async refresh() {
-    await this.loadItems();
-  }
-  /**
-   * Focus the search input
-   */
-  focusSearch() {
-    const searchInput = this.element?.querySelector('input[data-action="search-items"]');
-    if (searchInput) {
-      searchInput.focus();
-    }
-  }
-  /**
-   * Handle exit button click - emits event instead of closing
-   */
-  async handleActionExitView(event, element) {
-    this.emit("exit", { view: this });
-  }
-  /**
-   * Clear search and reset
-   */
-  async handleActionClearSearch(event, element) {
-    this.clearSearch();
-  }
-  clearSearch() {
-    this.searchValue = "";
-    this.hasSearched = false;
-    const searchInput = this.element?.querySelector('input[data-change-action="search-items"]');
-    if (searchInput) {
-      searchInput.value = "";
-      searchInput.focus();
-    }
-    this.performSearch();
-  }
-  /**
-   * Get the number of available items
-   */
-  getItemCount() {
-    return this.collection ? this.collection.length() : 0;
-  }
-  /**
-   * Get the number of filtered items
-   */
-  getFilteredItemCount() {
-    return this.filteredItems.length;
-  }
-  /**
-   * Check if items are loaded
-   */
-  hasItems() {
-    return this.getItemCount() > 0;
-  }
-  /**
-   * Get current search value
-   */
-  getSearchValue() {
-    return this.searchValue;
-  }
-  /**
-   * Set search value programmatically
-   */
-  setSearchValue(value) {
-    this.searchValue = value || "";
-    this.hasSearched = !!this.searchValue;
-    const searchInput = this.element?.querySelector('input[data-action="search-items"]');
-    if (searchInput) {
-      searchInput.value = this.searchValue;
-    }
-    this.performSearch();
-    return this;
-  }
-  async onAfterRender() {
-    await super.onAfterRender();
-    if (this.resultsView && !this.resultsView.isMounted()) {
-      const container = this.element?.querySelector('[data-container="results"]');
-      if (container) {
-        await this.resultsView.render(true, container);
-      }
-    }
-    this.updateResultsView();
-  }
-  /**
-   * Cleanup on destroy
-   */
-  async onBeforeDestroy() {
-    if (this.searchTimer) {
-      clearTimeout(this.searchTimer);
-    }
-    if (this.collection) {
-      this.collection.off("update");
-    }
-    await super.onBeforeDestroy();
-  }
-}
 class Sidebar extends View {
   constructor(options = {}) {
     super({
@@ -452,6 +26,7 @@ class Sidebar extends View {
     this.isCollapsed = false;
     this.sidebarTheme = options.theme || "sidebar-light";
     this.customView = null;
+    if (this.options.groupHeader) this.groupHeader = this.options.groupHeader;
     if (this.sidebarTheme) {
       this.addClass(this.sidebarTheme);
     }
@@ -461,6 +36,12 @@ class Sidebar extends View {
       this.setupResponsiveBehavior();
     }
   }
+  groupHeader = `
+    <div class="sidebar-group-header py-3" data-action="show-group-search">
+        <div class='text-center fs-5 px-1 collapsed-hidden'>{{group.name}}</div>
+        <div class='text-center fs-6 collapsed-hidden'>kind: {{group.kind}}</div>
+    </div>
+    `;
   /**
    * Initialize sidebar and auto-switch to correct menu based on current route
    */
@@ -767,13 +348,7 @@ class Sidebar extends View {
     };
   }
   getGroupHeader() {
-    return `
-        <div class="sidebar-group-header py-3" data-action="show-group-search">
-        <div class='text-center text-muted fs-7 collapsed-hidden'>active group</div>
-            <div class='text-center fs-5 px-1 collapsed-hidden'>{{group.name}}</div>
-            <div class='text-center fs-6 collapsed-hidden'>kind: {{group.kind}}</div>
-        </div>
-        `;
+    return this.groupHeader;
   }
   /**
    * Add a menu configuration
@@ -1491,6 +1066,182 @@ class Sidebar extends View {
     return this;
   }
 }
+class PageHeader extends View {
+  constructor(options = {}) {
+    super({
+      tagName: "div",
+      className: "page-header",
+      ...options
+    });
+    this.style = options.style || "default";
+    this.size = options.size || "md";
+    this.showIcon = options.showIcon !== false;
+    this.showDescription = options.showDescription !== false;
+    this.showBreadcrumbs = options.showBreadcrumbs || false;
+    this.currentPage = null;
+  }
+  async getTemplate() {
+    if (this.style === "minimal") {
+      return this.getMinimalTemplate();
+    } else if (this.style === "breadcrumb") {
+      return this.getBreadcrumbTemplate();
+    }
+    return this.getDefaultTemplate();
+  }
+  getDefaultTemplate() {
+    return `
+            {{#data.hasPage}}
+            <div class="page-header-content page-header-{{data.size}}">
+                <div class="page-header-main">
+                    <div class="page-header-info">
+                        {{#data.showIcon}}
+                        {{#data.pageIcon}}
+                        <div class="page-icon">
+                            <i class="{{data.pageIcon}}"></i>
+                        </div>
+                        {{/data.pageIcon}}
+                        {{/data.showIcon}}
+                        
+                        <div class="page-title-group">
+                            <h1 class="page-title">{{data.pageTitle}}</h1>
+                            {{#data.showDescription}}
+                            {{#data.pageDescription}}
+                            <p class="page-description text-muted">{{data.pageDescription}}</p>
+                            {{/data.pageDescription}}
+                            {{/data.showDescription}}
+                        </div>
+                    </div>
+
+                    {{#data.hasActions}}
+                    <div class="page-actions">
+                        {{#data.actions}}
+                        <button class="btn {{buttonClass}}" 
+                                data-action="{{action}}"
+                                type="button">
+                            {{#icon}}<i class="{{icon}} me-1"></i>{{/icon}}
+                            {{label}}
+                        </button>
+                        {{/data.actions}}
+                    </div>
+                    {{/data.hasActions}}
+                </div>
+            </div>
+            {{/data.hasPage}}
+        `;
+  }
+  getMinimalTemplate() {
+    return `
+            {{#data.hasPage}}
+            <div class="page-header-content page-header-minimal">
+                <h1 class="page-title">
+                    {{#data.showIcon}}
+                    {{#data.pageIcon}}<i class="{{data.pageIcon}} me-2"></i>{{/data.pageIcon}}
+                    {{/data.showIcon}}
+                    {{data.pageTitle}}
+                </h1>
+            </div>
+            {{/data.hasPage}}
+        `;
+  }
+  getBreadcrumbTemplate() {
+    return `
+            {{#data.hasPage}}
+            <div class="page-header-content page-header-breadcrumb">
+                {{#data.showBreadcrumbs}}
+                <nav aria-label="breadcrumb">
+                    <ol class="breadcrumb mb-2">
+                        {{#data.breadcrumbs}}
+                        <li class="breadcrumb-item {{#active}}active{{/active}}">
+                            {{#href}}<a href="{{href}}">{{label}}</a>{{/href}}
+                            {{^href}}{{label}}{{/href}}
+                        </li>
+                        {{/data.breadcrumbs}}
+                    </ol>
+                </nav>
+                {{/data.showBreadcrumbs}}
+                
+                <div class="d-flex justify-content-between align-items-start">
+                    <h1 class="page-title">
+                        {{#data.showIcon}}
+                        {{#data.pageIcon}}<i class="{{data.pageIcon}} me-2"></i>{{/data.pageIcon}}
+                        {{/data.showIcon}}
+                        {{data.pageTitle}}
+                    </h1>
+                    
+                    {{#data.hasActions}}
+                    <div class="page-actions">
+                        {{#data.actions}}
+                        <button class="btn {{buttonClass}}" 
+                                data-action="{{action}}"
+                                type="button">
+                            {{#icon}}<i class="{{icon}} me-1"></i>{{/icon}}
+                            {{label}}
+                        </button>
+                        {{/data.actions}}
+                    </div>
+                    {{/data.hasActions}}
+                </div>
+                
+                {{#data.showDescription}}
+                {{#data.pageDescription}}
+                <p class="page-description text-muted mt-2">{{data.pageDescription}}</p>
+                {{/data.pageDescription}}
+                {{/data.showDescription}}
+            </div>
+            {{/data.hasPage}}
+        `;
+  }
+  async onBeforeRender() {
+    await super.onBeforeRender();
+    const page = this.currentPage;
+    const hasPage = !!page;
+    const headerActions = page?.options?.headerActions || page?.headerActions || page?.constructor?.prototype?.headerActions || [];
+    this.data = {
+      hasPage,
+      pageTitle: page?.title || page?.name || "",
+      pageIcon: page?.icon || page?.pageIcon || "",
+      pageDescription: page?.description || "",
+      showIcon: this.showIcon,
+      showDescription: this.showDescription,
+      showBreadcrumbs: this.showBreadcrumbs,
+      breadcrumbs: page?.options?.breadcrumbs || page?.breadcrumbs || [],
+      actions: headerActions,
+      hasActions: headerActions.length > 0,
+      size: this.size
+    };
+  }
+  /**
+   * Set the current page to display
+   */
+  setPage(page) {
+    this.currentPage = page;
+    if (this.mounted) {
+      this.render();
+    }
+  }
+  /**
+   * Get the current page
+   */
+  getPage() {
+    return this.currentPage;
+  }
+  /**
+   * Handle action clicks from page header buttons
+   */
+  async onActionDefault(action, event, element) {
+    if (this.currentPage && typeof this.currentPage.onHeaderAction === "function") {
+      await this.currentPage.onHeaderAction(action, event, element);
+      return true;
+    }
+    this.emit("action", {
+      action,
+      event,
+      element,
+      page: this.currentPage
+    });
+    return false;
+  }
+}
 class DeniedPage extends Page {
   constructor(options = {}) {
     super({
@@ -1826,9 +1577,12 @@ class PortalApp extends WebApp {
     if (config.topnav && !config.topbar) {
       this.topbarConfig = config.topnav;
     }
+    this.showPageHeader = config.showPageHeader || false;
+    this.pageHeaderConfig = config.pageHeader || {};
     this.sidebar = null;
     this.topbar = null;
     this.topnav = null;
+    this.pageHeader = null;
     this.tokenManager = new TokenManager();
     this.activeGroup = null;
     if (!this.isMobile()) {
@@ -1926,6 +1680,7 @@ class PortalApp extends WebApp {
           this.activeUser.member = new Member();
           await this.activeUser.member.fetchForGroup(group.id);
         }
+        this.events.emit("group:loaded", { group: this.activeGroup });
         console.log("Loaded active group:", group.get("name"));
       } catch (error) {
         console.warn("Failed to load active group:", error);
@@ -1938,6 +1693,7 @@ class PortalApp extends WebApp {
               const fallbackGroup = new Group({ id: storedGroupId });
               await fallbackGroup.fetch();
               this.activeGroup = fallbackGroup;
+              this.events.emit("group:loaded", { group: this.activeGroup });
               console.log("Fell back to stored active group:", fallbackGroup.get("name"));
             } catch (fallbackError) {
               console.warn("Fallback to stored group also failed:", fallbackError);
@@ -2061,14 +1817,24 @@ class PortalApp extends WebApp {
     }
     const showSidebar = this.sidebarConfig && Object.keys(this.sidebarConfig).length > 0;
     const showTopbar = this.topbarConfig && Object.keys(this.topbarConfig).length > 0;
+    const contentMarkup = this.showPageHeader ? `
+            <div class="portal-content" id="portal-content">
+                <div id="page-header"></div>
+                <div id="page-container">
+                    <!-- Pages render here -->
+                </div>
+            </div>
+        ` : `
+            <div class="portal-content" id="page-container">
+                <!-- Pages render here -->
+            </div>
+        `;
     container.innerHTML = `
             <div class="portal-layout hide-sidebar">
                 ${showSidebar ? '<div id="portal-sidebar"></div>' : ""}
                 <div class="portal-body">
                     ${showTopbar ? '<div id="portal-topnav"></div>' : ""}
-                    <div class="portal-content" id="page-container">
-                        <!-- Pages render here -->
-                    </div>
+                    ${contentMarkup}
                 </div>
             </div>
         `;
@@ -2083,6 +1849,7 @@ class PortalApp extends WebApp {
   async setupPortalComponents() {
     await this.setupSidebar();
     await this.setupTopbar();
+    await this.setupPageHeader();
     this.setupPortalEvents();
   }
   /**
@@ -2115,6 +1882,24 @@ class PortalApp extends WebApp {
     await this.topbar.render();
     this.topnav = this.topbar;
   }
+  /**
+   * Setup page header component
+   */
+  async setupPageHeader() {
+    if (!this.showPageHeader) return;
+    this.pageHeader = new PageHeader({
+      containerId: "page-header",
+      style: this.pageHeaderConfig.style || "default",
+      showIcon: this.pageHeaderConfig.showIcon !== false,
+      showDescription: this.pageHeaderConfig.showDescription !== false,
+      showBreadcrumbs: this.pageHeaderConfig.showBreadcrumbs || false,
+      ...this.pageHeaderConfig
+    });
+    const headerContainer = document.getElementById("page-header");
+    if (headerContainer) {
+      await this.pageHeader.render(true, headerContainer);
+    }
+  }
   /**
    * Setup portal event handling
    */
@@ -2190,8 +1975,8 @@ class PortalApp extends WebApp {
     if (this.hasMobileLayout()) {
       this.getPortalContainer().classList.add("hide-sidebar");
     }
-    if (result && this.currentPageInstance) {
-      this.updateNavigation(this.currentPageInstance);
+    if (this.currentPage) {
+      this.updateNavigation(this.currentPage);
     }
     return result;
   }
@@ -2205,6 +1990,9 @@ class PortalApp extends WebApp {
     if (this.topbar && this.topbar.setActivePage) {
       this.topbar.setActivePage(page.route);
     }
+    if (this.pageHeader) {
+      this.pageHeader.setPage(page);
+    }
     this.events.emit("portal:page-changed", { page });
   }
   /**