Initial skeleton menu button priority/alignment.

src/components/menu.ts

@@ -1,4 +1,11 @@
-import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
+import {
+  CSSResultGroup,
+  LitElement,
+  TemplateResult,
+  html,
+  unsafeCSS,
+  PropertyValues,
+} from 'lit';
 import { HASSDomEvent, HomeAssistant } from 'custom-card-helpers';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -14,6 +21,7 @@ import type {
   ActionType,
   MenuButton,
   MenuConfig,
+  MenuItem,
   StateParameters,
 } from '../types.js';
 import {
@@ -198,6 +206,61 @@ export class FrigateCardMenu extends LitElement {
     }
   }
 
+  /**
+   * Ensure menu buttons are sorted before the render.
+   * @param changedProps The changed properties
+   */
+  protected willUpdate(changedProps: PropertyValues): void {
+    const style = this._menuConfig?.style;
+    const sortButtons = (a: MenuItem, b: MenuItem): number => {
+      // If the menu is hidden, the Frigate button must come first.
+      if (style === 'hidden') {
+        if (a.icon === FRIGATE_BUTTON_MENU_ICON) {
+          return -1;
+        } else if (b.icon === FRIGATE_BUTTON_MENU_ICON) {
+          return 1;
+        }
+      }
+
+      // TODO below might be removable?
+
+      // If the alignments are different, sort 'opposite' alignments later.
+      if (a.alignment !== b.alignment) {
+        if (
+          (a.alignment === undefined || a.alignment === 'near') &&
+          b.alignment === 'far'
+        ) {
+          return -1;
+        }
+        if (
+          (b.alignment === undefined || b.alignment === 'near') &&
+          a.alignment === 'far'
+        ) {
+          return 1;
+        }
+      }
+
+      // Otherwise sort by priority.
+      if (
+        a.priority === undefined ||
+        (b.priority !== undefined && b.priority > a.priority)
+      ) {
+        return 1;
+      }
+      if (
+        b.priority === undefined ||
+        (a.priority !== undefined && b.priority < a.priority)
+      ) {
+        return -1;
+      }
+      return 0;
+    };
+
+    if (changedProps.has('_menuConfig') || changedProps.has('buttons')) {
+      this.buttons.sort(sortButtons);
+    }
+  }
+
   /**
    * Render a button.
    * @param button The button configuration to render.
@@ -274,11 +337,31 @@ export class FrigateCardMenu extends LitElement {
     }
 
     // If the hidden menu isn't expanded, only show the Frigate button.
-    const buttons =
+    const nearButtons =
       style !== 'hidden' || this.expanded
-        ? this.buttons
+        ? this.buttons.filter(
+            (button) => !button.alignment || button.alignment === 'near',
+          )
         : this.buttons.filter((button) => button.icon === FRIGATE_BUTTON_MENU_ICON);
-    return html` ${buttons.map((button) => this._renderButton(button))} `;
+
+    const farButtons =
+      style !== 'hidden' || this.expanded
+        ? this.buttons.filter((button) => button.alignment === 'far')
+        : [];
+
+    const nearStyle = {
+      flex: String(nearButtons.length),
+    };
+    const farStyle = {
+      flex: String(farButtons.length),
+    };
+
+    return html` <div class="near" style="${styleMap(nearStyle)}">
+        ${nearButtons.map((button) => this._renderButton(button))}
+      </div>
+      <div class="far" style="${styleMap(farStyle)}">
+        ${farButtons.map((button) => this._renderButton(button))}
+      </div>`;
   }
 
   /**