Class MJEmptyStateComponent

mj-empty-state — Canonical centered empty/no-results/error placeholder.

Replaces the ~213 inline empty-state <div>s that pages were each hand-rolling (icon + title + message, optionally a CTA), e.g.:

<div class="empty-state">
  <i class="fa-solid fa-inbox"></i>
  <h3>No Permissions Found</h3>
  <p>Try adjusting your filters or refresh the data.</p>
  <button mjButton variant="primary" (click)="refreshData()">Refresh</button>
</div>
Copy

Usage:

<!-- Simplest: nothing-here placeholder -->
<mj-empty-state Title="No runs found" Message="No runs match the selected filters." />

<!-- Search/filter produced nothing -->
<mj-empty-state Variant="no-results" Title="No icons found" Message="Try a different search term." />

<!-- Load failed, retry CTA -->
<mj-empty-state Variant="error" Title="Couldn't load permissions" [Message]="error"
                ActionText="Try Again" ActionIcon="fa-solid fa-rotate-right" (Action)="loadData()" />

<!-- Invitation to create the first record -->
<mj-empty-state Icon="fa-solid fa-key" Title="No API keys yet"
                Message="Generate a key to start calling the API."
                ActionText="Generate Your First Key" ActionIcon="fa-solid fa-plus"
                (Action)="requestCreate()" />

<!-- Multiple / bespoke CTAs: project them into the [actions] slot -->
<mj-empty-state Title="No pinned items yet" Message="Pin dashboards for quick access.">
  <button mjButton variant="primary" (click)="addPin()">Add your first pin</button>
  <button mjButton variant="flat" (click)="dismiss()">Don't show again</button>
</mj-empty-state>
Copy

For dynamic messages (e.g. "No keys matching X" vs "No keys yet"), compute the string in the parent and bind it to [Message], or project richer body content as default <ng-content> (rendered between the message and the actions).