Add menu prioritization & alignment.

src/card.ts

@@ -278,26 +278,19 @@ export class FrigateCard extends LitElement {
   protected _getMenuButtons(): MenuButton[] {
     const buttons: MenuButton[] = [];
 
-    if (this._getConfig().menu.buttons.frigate) {
     buttons.push({
+      // Use a magic icon value that the menu will use to render the custom
+      // Frigate icon.
+      icon: FRIGATE_BUTTON_MENU_ICON,
+      ...this._getConfig().menu.buttons.frigate,
       type: 'custom:frigate-card-menu-icon',
       title: localize('config.menu.buttons.frigate'),
-        // Use a magic icon value that the menu will use to render the icon as
-        // it deems appropriate (certain menu configurations change the menu
-        // icon for the 'Frigate' button).
-        priority: this._getConfig().menu.buttons.frigate,
-        icon: FRIGATE_BUTTON_MENU_ICON,
       tap_action: FrigateCardMenu.isHidingMenu(this._getConfig().menu)
         ? (createFrigateCardCustomAction('menu_toggle') as FrigateCardCustomAction)
         : (createFrigateCardCustomAction('default') as FrigateCardCustomAction),
     });
-    }
 
-    if (
+    if (this._cameras && this._cameras.size > 1) {
-      this._getConfig().menu.buttons.cameras &&
-      this._cameras &&
-      this._cameras.size > 1
-    ) {
       const menuItems = Array.from(this._cameras, ([camera, config]) => {
         return {
           icon: getCameraIcon(this._hass, config),
@@ -310,40 +303,37 @@ export class FrigateCard extends LitElement {
       });
 
       buttons.push({
+        icon: 'mdi:video-switch',
+        ...this._getConfig().menu.buttons.cameras,
         type: 'custom:frigate-card-menu-submenu',
         title: localize('config.menu.buttons.cameras'),
-        priority: this._getConfig().menu.buttons.cameras,
-        icon: 'mdi:video-switch',
         items: menuItems,
       });
     }
 
-    if (this._getConfig().menu.buttons.live) {
     buttons.push({
+      icon: 'mdi:cctv',
+      ...this._getConfig().menu.buttons.live,
       type: 'custom:frigate-card-menu-icon',
       title: localize('config.view.views.live'),
-        priority: this._getConfig().menu.buttons.live,
-        icon: 'mdi:cctv',
       style: this._view?.is('live') ? this._getEmphasizedStyle() : {},
       tap_action: createFrigateCardCustomAction('live') as FrigateCardCustomAction,
     });
-    }
 
     const cameraConfig = this._getSelectedCameraConfig();
 
     // Don't show `clips` button if there's no `camera_name` (e.g. non-Frigate
     // cameras), or is birdseye (unless there are dependent cameras).
     if (
-      this._getConfig().menu.buttons.clips &&
       cameraConfig?.camera_name &&
       (cameraConfig?.camera_name !== CAMERA_BIRDSEYE ||
         cameraConfig?.dependent_cameras?.length)
     ) {
       buttons.push({
+        icon: 'mdi:filmstrip',
+        ...this._getConfig().menu.buttons.clips,
         type: 'custom:frigate-card-menu-icon',
         title: localize('config.view.views.clips'),
-        priority: this._getConfig().menu.buttons.clips,
-        icon: 'mdi:filmstrip',
         style: this._view?.is('clips') ? this._getEmphasizedStyle() : {},
         tap_action: createFrigateCardCustomAction('clips') as FrigateCardCustomAction,
         hold_action: createFrigateCardCustomAction('clip') as FrigateCardCustomAction,
@@ -353,16 +343,15 @@ export class FrigateCard extends LitElement {
     // Don't show `snapshots` button if there's no `camera_name` (e.g. non-Frigate
     // cameras), or is birdseye (unless there are dependent cameras).
     if (
-      this._getConfig().menu.buttons.snapshots &&
       cameraConfig?.camera_name &&
       (cameraConfig?.camera_name !== CAMERA_BIRDSEYE ||
         cameraConfig?.dependent_cameras?.length)
     ) {
       buttons.push({
+        icon: 'mdi:camera',
+        ...this._getConfig().menu.buttons.snapshots,
         type: 'custom:frigate-card-menu-icon',
         title: localize('config.view.views.snapshots'),
-        priority: this._getConfig().menu.buttons.snapshots,
-        icon: 'mdi:camera',
         style: this._view?.is('snapshots') ? this._getEmphasizedStyle() : {},
         tap_action: createFrigateCardCustomAction(
           'snapshots',
@@ -373,59 +362,55 @@ export class FrigateCard extends LitElement {
       });
     }
 
-    if (this._getConfig().menu.buttons.image) {
     buttons.push({
+      icon: 'mdi:image',
+      ...this._getConfig().menu.buttons.image,
       type: 'custom:frigate-card-menu-icon',
       title: localize('config.view.views.image'),
-        priority: this._getConfig().menu.buttons.image,
-        icon: 'mdi:image',
       style: this._view?.is('image') ? this._getEmphasizedStyle() : {},
       tap_action: createFrigateCardCustomAction('image') as FrigateCardCustomAction,
     });
-    }
 
-    if (this._getConfig().menu.buttons.timeline) {
     buttons.push({
+      icon: 'mdi:chart-gantt',
+      ...this._getConfig().menu.buttons.timeline,
       type: 'custom:frigate-card-menu-icon',
       title: localize('config.view.views.timeline'),
-        priority: this._getConfig().menu.buttons.timeline,
-        icon: 'mdi:chart-gantt',
       style: this._view?.is('timeline') ? this._getEmphasizedStyle() : {},
       tap_action: createFrigateCardCustomAction('timeline') as FrigateCardCustomAction,
     });
-    }
 
     if (
-      this._getConfig().menu.buttons.download &&
+      this._view?.isViewerView() ||
-      (this._view?.isViewerView() || (this._view?.is('timeline') && !!this._view?.media))
+      (this._view?.is('timeline') && !!this._view?.media)
     ) {
       buttons.push({
+        icon: 'mdi:download',
+        ...this._getConfig().menu.buttons.download,
         type: 'custom:frigate-card-menu-icon',
         title: localize('config.menu.buttons.download'),
-        priority: this._getConfig().menu.buttons.download,
-        icon: 'mdi:download',
         tap_action: createFrigateCardCustomAction('download') as FrigateCardCustomAction,
       });
     }
 
-    if (this._getConfig().menu.buttons.frigate_ui && cameraConfig?.frigate_url) {
+    if (cameraConfig?.frigate_url) {
       buttons.push({
+        icon: 'mdi:web',
+        ...this._getConfig().menu.buttons.frigate_ui,
         type: 'custom:frigate-card-menu-icon',
         title: localize('config.menu.buttons.frigate_ui'),
-        priority: this._getConfig().menu.buttons.frigate_ui,
-        icon: 'mdi:web',
         tap_action: createFrigateCardCustomAction(
           'frigate_ui',
         ) as FrigateCardCustomAction,
       });
     }
 
-    if (this._getConfig().menu.buttons.fullscreen && screenfull.isEnabled) {
+    if (screenfull.isEnabled) {
       buttons.push({
+        icon: screenfull.isFullscreen ? 'mdi:fullscreen-exit' : 'mdi:fullscreen',
+        ...this._getConfig().menu.buttons.fullscreen,
         type: 'custom:frigate-card-menu-icon',
         title: localize('config.menu.buttons.fullscreen'),
-        priority: this._getConfig().menu.buttons.fullscreen,
-        icon: screenfull.isFullscreen ? 'mdi:fullscreen-exit' : 'mdi:fullscreen',
         tap_action: createFrigateCardCustomAction(
           'fullscreen',
         ) as FrigateCardCustomAction,

src/components/menu.ts

@@ -222,24 +222,6 @@ export class FrigateCardMenu extends LitElement {
         }
       }
 
-      // 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 ||
@@ -267,6 +249,9 @@ export class FrigateCardMenu extends LitElement {
    * @returns A rendered template or void.
    */
   protected _renderButton(button: MenuButton): TemplateResult | void {
+    if (button.enabled === false) {
+      return;
+    }
     if (button.type == 'custom:frigate-card-menu-submenu') {
       return html` <frigate-card-submenu
         .hass=${this.hass}
@@ -337,30 +322,30 @@ export class FrigateCardMenu extends LitElement {
     }
 
     // If the hidden menu isn't expanded, only show the Frigate button.
-    const nearButtons =
+    const matchingButtons =
       style !== 'hidden' || this.expanded
         ? this.buttons.filter(
-            (button) => !button.alignment || button.alignment === 'near',
+            (button) => !button.alignment || button.alignment === 'matching',
           )
         : this.buttons.filter((button) => button.icon === FRIGATE_BUTTON_MENU_ICON);
 
-    const farButtons =
+    const opposingButtons =
       style !== 'hidden' || this.expanded
-        ? this.buttons.filter((button) => button.alignment === 'far')
+        ? this.buttons.filter((button) => button.alignment === 'opposing')
         : [];
 
-    const nearStyle = {
+    const matchingStyle = {
-      flex: String(nearButtons.length),
+      flex: String(matchingButtons.length),
     };
-    const farStyle = {
+    const opposingStyle = {
-      flex: String(farButtons.length),
+      flex: String(opposingButtons.length),
     };
 
-    return html` <div class="near" style="${styleMap(nearStyle)}">
+    return html` <div class="matching" style="${styleMap(matchingStyle)}">
-        ${nearButtons.map((button) => this._renderButton(button))}
+        ${matchingButtons.map((button) => this._renderButton(button))}
       </div>
-      <div class="far" style="${styleMap(farStyle)}">
+      <div class="opposing" style="${styleMap(opposingStyle)}">
-        ${farButtons.map((button) => this._renderButton(button))}
+        ${opposingButtons.map((button) => this._renderButton(button))}
       </div>`;
   }
 

src/config-mgmt.ts

@@ -37,7 +37,6 @@ import {
 } from './const';
 import {
   BUTTON_SIZE_MIN,
-  FRIGATE_MENU_PRIORITY_DEFAULT,
   RawFrigateCardConfig,
   RawFrigateCardConfigArray,
   THUMBNAIL_WIDTH_MAX,
@@ -491,14 +490,17 @@ const upgradeMenuConditionToMenuOverride = (): ((
  * @param value The boolean true/false for show/hide the switch.
  * @returns A priority value.
  */
-const menuButtonToPriority = function (value: unknown): number | null | undefined {
+const menuButtonBooleanToObject = function (
-  if (typeof value === 'number') {
+  value: unknown,
+): { enabled: boolean } | null | undefined {
+  if (typeof value === 'object') {
     return undefined;
   }
-  if (typeof value !== 'boolean') {
+  // If it's not a boolean, or it's just true, remove it.
+  if (typeof value !== 'boolean' || value) {
     return null;
   }
-  return value ? FRIGATE_MENU_PRIORITY_DEFAULT : 0;
+  return { enabled: value };
 };
 
 const UPGRADES = [
@@ -564,14 +566,13 @@ const UPGRADES = [
   ),
   upgradeWithOverrides('event_gallery.min_columns', deleteProperty),
   upgradeMenuModeToStyleAndPosition(),
-
+  upgradeWithOverrides(CONF_MENU_BUTTONS_FRIGATE, menuButtonBooleanToObject),
-  upgradeWithOverrides(CONF_MENU_BUTTONS_FRIGATE, menuButtonToPriority),
+  upgradeWithOverrides(CONF_MENU_BUTTONS_CAMERAS, menuButtonBooleanToObject),
-  upgradeWithOverrides(CONF_MENU_BUTTONS_CAMERAS, menuButtonToPriority),
+  upgradeWithOverrides(CONF_MENU_BUTTONS_LIVE, menuButtonBooleanToObject),
-  upgradeWithOverrides(CONF_MENU_BUTTONS_LIVE, menuButtonToPriority),
+  upgradeWithOverrides(CONF_MENU_BUTTONS_CLIPS, menuButtonBooleanToObject),
-  upgradeWithOverrides(CONF_MENU_BUTTONS_CLIPS, menuButtonToPriority),
+  upgradeWithOverrides(CONF_MENU_BUTTONS_SNAPSHOTS, menuButtonBooleanToObject),
-  upgradeWithOverrides(CONF_MENU_BUTTONS_SNAPSHOTS, menuButtonToPriority),
+  upgradeWithOverrides(CONF_MENU_BUTTONS_IMAGE, menuButtonBooleanToObject),
-  upgradeWithOverrides(CONF_MENU_BUTTONS_IMAGE, menuButtonToPriority),
+  upgradeWithOverrides(CONF_MENU_BUTTONS_DOWNLOAD, menuButtonBooleanToObject),
-  upgradeWithOverrides(CONF_MENU_BUTTONS_DOWNLOAD, menuButtonToPriority),
+  upgradeWithOverrides(CONF_MENU_BUTTONS_FRIGATE_UI, menuButtonBooleanToObject),
-  upgradeWithOverrides(CONF_MENU_BUTTONS_FRIGATE_UI, menuButtonToPriority),
+  upgradeWithOverrides(CONF_MENU_BUTTONS_FULLSCREEN, menuButtonBooleanToObject),
-  upgradeWithOverrides(CONF_MENU_BUTTONS_FULLSCREEN, menuButtonToPriority),
 ];

src/const.ts

@@ -117,6 +117,8 @@ export const CONF_MENU_ALIGNMENT = `${CONF_MENU}.alignment` as const;
 export const CONF_MENU_POSITION = `${CONF_MENU}.position` as const;
 export const CONF_MENU_STYLE = `${CONF_MENU}.style` as const;
 export const CONF_MENU_BUTTON_SIZE = `${CONF_MENU}.button_size` as const;
+export const CONF_MENU_BUTTONS = `${CONF_MENU}.buttons` as const;
+
 export const CONF_MENU_BUTTONS_CAMERAS = `${CONF_MENU}.buttons.cameras` as const;
 export const CONF_MENU_BUTTONS_CLIPS = `${CONF_MENU}.buttons.clips` as const;
 export const CONF_MENU_BUTTONS_DOWNLOAD = `${CONF_MENU}.buttons.download` as const;
@@ -125,7 +127,6 @@ export const CONF_MENU_BUTTONS_FRIGATE_UI = `${CONF_MENU}.buttons.frigate_ui` as
 export const CONF_MENU_BUTTONS_FULLSCREEN = `${CONF_MENU}.buttons.fullscreen` as const;
 export const CONF_MENU_BUTTONS_IMAGE = `${CONF_MENU}.buttons.image` as const;
 export const CONF_MENU_BUTTONS_LIVE = `${CONF_MENU}.buttons.live` as const;
-
 export const CONF_MENU_BUTTONS_SNAPSHOTS = `${CONF_MENU}.buttons.snapshots` as const;
 
 export const CONF_DIMENSIONS = 'dimensions' as const;

src/editor.ts

@@ -66,14 +66,7 @@ import {
   CONF_LIVE_PRELOAD,
   CONF_LIVE_TRANSITION_EFFECT,
   CONF_MENU_ALIGNMENT,
-  CONF_MENU_BUTTONS_CLIPS,
+  CONF_MENU_BUTTONS,
-  CONF_MENU_BUTTONS_FRIGATE,
-  CONF_MENU_BUTTONS_DOWNLOAD,
-  CONF_MENU_BUTTONS_FRIGATE_UI,
-  CONF_MENU_BUTTONS_FULLSCREEN,
-  CONF_MENU_BUTTONS_IMAGE,
-  CONF_MENU_BUTTONS_LIVE,
-  CONF_MENU_BUTTONS_SNAPSHOTS,
   CONF_MENU_BUTTON_SIZE,
   CONF_MENU_POSITION,
   CONF_MENU_STYLE,
@@ -105,89 +98,79 @@ import {
 
 import frigate_card_editor_style from './scss/editor.scss';
 
+const MENU_BUTTONS = 'buttons';
+const MENU_CAMERAS = 'cameras';
+const MENU_OPTIONS = 'options';
+
 interface EditorOptionsSet {
   icon: string;
   name: string;
   secondary: string;
-  show: boolean;
 }
 interface EditorOptions {
   [setName: string]: EditorOptionsSet;
 }
 
-interface EditorCameraTarget {
-  cameraIndex: number;
-}
-
-interface EditorOptionSetTarget {
-  optionSetName: string;
-}
-
 interface EditorSelectOption {
   value: string;
   label: string;
 }
 
+interface EditorMenuTarget {
+  domain: string;
+  key: string | number;
+}
+
 const options: EditorOptions = {
   cameras: {
     icon: 'video',
     name: localize('editor.cameras'),
     secondary: localize('editor.cameras_secondary'),
-    show: true,
   },
   view: {
     icon: 'eye',
     name: localize('editor.view'),
     secondary: localize('editor.view_secondary'),
-    show: false,
   },
   menu: {
     icon: 'menu',
     name: localize('editor.menu'),
     secondary: localize('editor.menu_secondary'),
-    show: false,
   },
   live: {
     icon: 'cctv',
     name: localize('editor.live'),
     secondary: localize('editor.live_secondary'),
-    show: false,
   },
   event_viewer: {
     icon: 'filmstrip',
     name: localize('editor.event_viewer'),
     secondary: localize('editor.event_viewer_secondary'),
-    show: false,
   },
   event_gallery: {
     icon: 'grid',
     name: localize('editor.event_gallery'),
     secondary: localize('editor.event_gallery_secondary'),
-    show: false,
   },
   image: {
     icon: 'image',
     name: localize('editor.image'),
     secondary: localize('editor.image_secondary'),
-    show: false,
   },
   timeline: {
     icon: 'chart-gantt',
     name: localize('editor.timeline'),
     secondary: localize('editor.timeline_secondary'),
-    show: false,
   },
   dimensions: {
     icon: 'aspect-ratio',
     name: localize('editor.dimensions'),
     secondary: localize('editor.dimensions_secondary'),
-    show: false,
   },
   overrides: {
     icon: 'file-replace',
     name: localize('editor.overrides'),
     secondary: localize('editor.overrides_secondary'),
-    show: false,
   },
 };
 
@@ -200,7 +183,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
   protected _configUpgradeable = false;
 
   @property({ attribute: false })
-  protected _expandedCameraIndex: number | null = null;
+  protected _expandedMenus: Record<string, string | number> = {};
 
   protected _viewModes: EditorSelectOption[] = [
     { value: '', label: '' },
@@ -409,8 +392,9 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
     return html`
       <div
         class="option option-${optionSetName}"
-        @click=${this._toggleOptionHandler}
+        @click=${this._toggleMenu}
-        .optionSetName=${optionSetName}
+        .domain=${'options'}
+        .key=${optionSetName}
       >
         <div class="row">
           <ha-icon .icon=${`mdi:${optionSet.icon}`}></ha-icon>
@@ -466,12 +450,16 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
    * Render an option/"select" selector.
    * @param configPath The configuration path to set/read.
    * @param options The options to show in the selector.
+   * @param params Option parameters to control the selector.
    * @returns A rendered template.
    */
   protected _renderOptionSelector(
     configPath: string,
     options: string[] | { value: string; label: string }[],
-    multiple?: boolean,
+    params?: {
+      multiple?: boolean;
+      label?: string;
+    },
   ): TemplateResult | void {
     if (!this._config) {
       return;
@@ -481,9 +469,40 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
       <ha-selector
         .hass=${this.hass}
         .selector=${{
-          select: { mode: 'dropdown', multiple: !!multiple, options: options },
+          select: { mode: 'dropdown', multiple: !!params?.multiple, options: options },
         }}
-        .label=${this._getLabel(configPath)}
+        .label=${params?.label || this._getLabel(configPath)}
+        .value=${getConfigValue(this._config, configPath, '')}
+        .required=${false}
+        @value-changed=${(ev) => this._valueChangedHandler(configPath, ev)}
+      >
+      </ha-selector>
+    `;
+  }
+
+  /**
+   * Render an icon selector.
+   * @param configPath The configuration path to set/read.
+   * @param params Optional parameters to control the selector.
+   * @returns A rendered template.
+   */
+  protected _renderIconSelector(
+    configPath: string,
+    params?: {
+      label?: string;
+    },
+  ): TemplateResult | void {
+    if (!this._config) {
+      return;
+    }
+
+    return html`
+      <ha-selector
+        .hass=${this.hass}
+        .selector=${{
+          icon: {},
+        }}
+        .label=${params?.label || this._getLabel(configPath)}
         .value=${getConfigValue(this._config, configPath, '')}
         .required=${false}
         @value-changed=${(ev) => this._valueChangedHandler(configPath, ev)}
@@ -495,29 +514,30 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
   /**
    * Render a number slider.
    * @param configPath Configuration path of the variable.
-   * @param valueDefault The default value.
+   * @param params Optional parameters to control the selector.
-   * @param icon The icon to use on the slider.
-   * @param min The minimum value.
-   * @param max The maximum value.
    * @returns A rendered template.
    */
   protected _renderNumberInput(
     configPath: string,
-    min?: number,
+    params?: {
-    max?: number,
+      min?: number;
+      max?: number;
+      label?: string;
+      default?: number;
+    },
   ): TemplateResult | void {
     if (!this._config) {
       return;
     }
     const value = getConfigValue(this._config, configPath);
-    const mode = max === undefined ? 'box' : 'slider';
+    const mode = params?.max === undefined ? 'box' : 'slider';
 
     return html`
       <ha-selector
         .hass=${this.hass}
-        .selector=${{ number: { min: min || 0, max: max, mode: mode } }}
+        .selector=${{ number: { min: params?.min || 0, max: params?.max, mode: mode } }}
-        .label=${this._getLabel(configPath)}
+        .label=${params?.label || this._getLabel(configPath)}
-        .value=${value}
+        .value=${value ?? params?.default}
         .required=${false}
         @value-changed=${(ev) => this._valueChangedHandler(configPath, ev)}
       >
@@ -550,6 +570,62 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
     );
   }
 
+  /**
+   * Render an editor menu for the card menu buttons.
+   * @param button The name of the button.
+   * @returns A rendered template.
+   */
+  protected _renderMenuButton(button: string): TemplateResult {
+    const menuButtonAlignments: EditorSelectOption[] = [
+      { value: '', label: '' },
+      { value: 'matching', label: localize('config.menu.buttons.alignments.matching') },
+      { value: 'opposing', label: localize('config.menu.buttons.alignments.opposing') },
+    ];
+
+    return html`
+      <div
+        class="submenu-header"
+        @click=${this._toggleMenu}
+        .domain=${MENU_BUTTONS}
+        .key=${button}
+      >
+        <ha-icon .icon=${'mdi:gesture-tap-button'}></ha-icon>
+        <span
+          >${localize('editor.button') +
+          ': ' +
+          localize(`config.${CONF_MENU_BUTTONS}.${button}`)}</span
+        >
+      </div>
+
+      ${this._expandedMenus[MENU_BUTTONS] === button
+        ? html` <div class="values">
+            ${this._renderSwitch(
+              `${CONF_MENU_BUTTONS}.${button}.enabled`,
+              frigateCardConfigDefaults.menu.buttons[button]?.enabled ?? true,
+              {
+                label: localize('config.menu.buttons.enabled'),
+              },
+            )}
+            ${this._renderOptionSelector(
+              `${CONF_MENU_BUTTONS}.${button}.alignment`,
+              menuButtonAlignments,
+              {
+                label: localize('config.menu.buttons.alignment'),
+              },
+            )}
+            ${this._renderNumberInput(`${CONF_MENU_BUTTONS}.${button}.priority`, {
+              max: FRIGATE_MENU_PRIORITY_MAX,
+              default: frigateCardConfigDefaults.menu.buttons[button]?.priority,
+              label: localize('config.menu.buttons.priority'),
+            })}
+            ${this._renderIconSelector(`${CONF_MENU_BUTTONS}.${button}.icon`, {
+              label: localize('config.menu.buttons.icon'),
+            })}
+          </div>`
+        : ''}
+    `;
+  }
+
   /**
    * Render a camera header.
    * @param cameraIndex The index of the camera to edit/add.
@@ -564,9 +640,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
   ): TemplateResult {
     return html`
       <div
-        class="camera-header"
+        class="submenu-header"
-        @click=${this._toggleCameraHandler}
+        @click=${this._toggleMenu}
-        .cameraIndex=${cameraIndex}
+        .domain=${MENU_CAMERAS}
+        .key=${cameraIndex}
       >
         <ha-icon .icon=${addNewCamera ? 'mdi:video-plus' : 'mdi:video'}></ha-icon>
         <span>
@@ -630,7 +707,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
 
     return html`
       ${this._renderCameraHeader(cameraIndex, cameras[cameraIndex], addNewCamera)}
-      ${this._expandedCameraIndex === cameraIndex
+      ${this._expandedMenus[MENU_CAMERAS] === cameraIndex
         ? html` <div class="values">
             <div class="controls">
               <ha-icon-button
@@ -645,7 +722,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                   modifyConfig((config: RawFrigateCardConfig): boolean => {
                     if (Array.isArray(config.cameras) && cameraIndex > 0) {
                       arrayMove(config.cameras, cameraIndex, cameraIndex - 1);
-                      this._expandedCameraIndex = cameraIndex - 1;
+                      this._openMenu(MENU_CAMERAS, cameraIndex - 1);
                       return true;
                     }
                     return false;
@@ -668,7 +745,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                       cameraIndex < config.cameras.length - 1
                     ) {
                       arrayMove(config.cameras, cameraIndex, cameraIndex + 1);
-                      this._expandedCameraIndex = cameraIndex + 1;
+                      this._openMenu(MENU_CAMERAS, cameraIndex + 1);
                       return true;
                     }
                     return false;
@@ -684,7 +761,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                   modifyConfig((config: RawFrigateCardConfig): boolean => {
                     if (Array.isArray(config.cameras)) {
                       config.cameras.splice(cameraIndex, 1);
-                      this._expandedCameraIndex = null;
+                      this._closeMenu(MENU_CAMERAS);
                       return true;
                     }
                     return false;
@@ -736,7 +813,9 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
             ${this._renderOptionSelector(
               getArrayConfigPath(CONF_CAMERAS_ARRAY_DEPENDENT_CAMERAS, cameraIndex),
               dependentCameras,
-              true,
+              {
+                multiple: true,
+              },
             )}
           </div>`
         : ``}
@@ -787,13 +866,15 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
    * Render a boolean selector.
    * @param configPath The configuration path to set/read.
    * @param valueDefault The default switch value if unset.
-   * @param label An optional switch label.
+   * @param params Optional parameters to control the selector.
    * @returns A rendered template.
    */
   protected _renderSwitch(
     configPath: string,
     valueDefault: boolean,
-    label?: string,
+    params?: {
+      label?: string;
+    },
   ): TemplateResult | void {
     if (!this._config) {
       return;
@@ -803,7 +884,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
       <ha-selector
         .hass=${this.hass}
         .selector=${{ boolean: {} }}
-        .label=${label || this._getLabel(configPath)}
+        .label=${params?.label || this._getLabel(configPath)}
         .value=${getConfigValue(this._config, configPath, valueDefault)}
         .required=${false}
         @value-changed=${(ev) => this._valueChangedHandler(configPath, ev)}
@@ -824,9 +905,6 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
 
     const defaults = frigateCardConfigDefaults;
 
-    const getShowButtonLabel = (configPath: string) =>
-      localize('editor.show_button') + ': ' + localize(`config.${configPath}`);
-
     const cameras = (getConfigValue(this._config, CONF_CAMERAS) ||
       []) as RawFrigateCardConfigArray;
 
@@ -853,14 +931,14 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
         : html``}
       <div class="card-config">
         ${this._renderOptionSetHeader('cameras')}
-        ${options.cameras.show
+        ${this._expandedMenus[MENU_OPTIONS] === 'cameras'
-          ? html` <div class="cameras">
+          ? html` <div class="submenu">
               ${cameras.map((_, index) => this._renderCamera(cameras, index))}
               ${this._renderCamera(cameras, cameras.length, true)}
             </div>`
           : ''}
         ${this._renderOptionSetHeader('view')}
-        ${options.view.show
+        ${this._expandedMenus[MENU_OPTIONS] === 'view'
           ? html`
               <div class="values">
                 ${this._renderOptionSelector(CONF_VIEW_DEFAULT, this._viewModes)}
@@ -880,58 +958,32 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
             `
           : ''}
         ${this._renderOptionSetHeader('menu')}
-        ${options.menu.show
+        ${this._expandedMenus[MENU_OPTIONS] === 'menu'
           ? html`
               <div class="values">
                 ${this._renderOptionSelector(CONF_MENU_STYLE, this._menuStyles)}
                 ${this._renderOptionSelector(CONF_MENU_POSITION, this._menuPositions)}
                 ${this._renderOptionSelector(CONF_MENU_ALIGNMENT, this._menuAlignments)}
-                ${this._renderNumberInput(CONF_MENU_BUTTON_SIZE, BUTTON_SIZE_MIN)}
+                ${this._renderNumberInput(CONF_MENU_BUTTON_SIZE, {
-                ${this._renderNumberInput(
+                  min: BUTTON_SIZE_MIN,
-                  CONF_MENU_BUTTONS_FRIGATE,
+                })}
-                  0,
+              </div>
-                  FRIGATE_MENU_PRIORITY_MAX,
+              <div class="submenu">
-                )}
+                ${this._renderMenuButton('frigate')}
-                ${this._renderNumberInput(
+                ${this._renderMenuButton('live')}
-                  CONF_MENU_BUTTONS_LIVE,
+                ${this._renderMenuButton('clips')}
-                  0,
+                ${this._renderMenuButton('snapshots')}
-                  FRIGATE_MENU_PRIORITY_MAX,
+                ${this._renderMenuButton('image')}
-                )}
+                ${this._renderMenuButton('download')}
-                ${this._renderNumberInput(
+                ${this._renderMenuButton('frigate_ui')}
-                  CONF_MENU_BUTTONS_CLIPS,
+                ${this._renderMenuButton('fullscreen')}
-                  0,
+                ${this._renderMenuButton('timeline')}
-                  FRIGATE_MENU_PRIORITY_MAX,
+              </div>
-                )}
-                ${this._renderNumberInput(
-                  CONF_MENU_BUTTONS_SNAPSHOTS,
-                  0,
-                  FRIGATE_MENU_PRIORITY_MAX,
-                )}
-                ${this._renderNumberInput(
-                  CONF_MENU_BUTTONS_IMAGE,
-                  0,
-                  FRIGATE_MENU_PRIORITY_MAX,
-                )}
-                ${this._renderNumberInput(
-                  CONF_MENU_BUTTONS_DOWNLOAD,
-                  0,
-                  FRIGATE_MENU_PRIORITY_MAX,
-                )}
-                ${this._renderNumberInput(
-                  CONF_MENU_BUTTONS_FRIGATE_UI,
-                  0,
-                  FRIGATE_MENU_PRIORITY_MAX,
-                )}
-                ${this._renderNumberInput(
-                  CONF_MENU_BUTTONS_FULLSCREEN,
-                  0,
-                  FRIGATE_MENU_PRIORITY_MAX,
-                )}
               </div>
             `
           : ''}
         ${this._renderOptionSetHeader('live')}
-        ${options.live.show
+        ${this._expandedMenus[MENU_OPTIONS] === 'live'
           ? html`
               <div class="values">
                 ${this._renderSwitch(CONF_LIVE_PRELOAD, defaults.live.preload)}
@@ -943,10 +995,9 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                   CONF_LIVE_CONTROLS_NEXT_PREVIOUS_STYLE,
                   this._liveNextPreviousControlStyles,
                 )}
-                ${this._renderNumberInput(
+                ${this._renderNumberInput(CONF_LIVE_CONTROLS_NEXT_PREVIOUS_SIZE, {
-                  CONF_LIVE_CONTROLS_NEXT_PREVIOUS_SIZE,
+                  min: BUTTON_SIZE_MIN,
-                  BUTTON_SIZE_MIN,
+                })}
-                )}
                 ${this._renderOptionSelector(
                   CONF_LIVE_CONTROLS_THUMBNAILS_MODE,
                   this._thumbnailModes,
@@ -955,11 +1006,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                   CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA,
                   this._thumbnailMedias,
                 )}
-                ${this._renderNumberInput(
+                ${this._renderNumberInput(CONF_LIVE_CONTROLS_THUMBNAILS_SIZE, {
-                  CONF_LIVE_CONTROLS_THUMBNAILS_SIZE,
+                  min: THUMBNAIL_WIDTH_MIN,
-                  THUMBNAIL_WIDTH_MIN,
+                  max: THUMBNAIL_WIDTH_MAX,
-                  THUMBNAIL_WIDTH_MAX,
+                })}
-                )}
                 ${this._renderOptionSelector(
                   CONF_LIVE_CONTROLS_TITLE_MODE,
                   this._titleModes,
@@ -972,11 +1022,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                   CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
                   defaults.live.controls.thumbnails.show_controls,
                 )}
-                ${this._renderNumberInput(
+                ${this._renderNumberInput(CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS, {
-                  CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS,
+                  min: 0,
-                  0,
+                  max: 60,
-                  60,
+                })}
-                )}
                 ${this._renderOptionSelector(
                   CONF_LIVE_TRANSITION_EFFECT,
                   this._transitionEffects,
@@ -985,13 +1034,12 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
             `
           : ''}
         ${this._renderOptionSetHeader('event_gallery')}
-        ${options.event_gallery.show
+        ${this._expandedMenus[MENU_OPTIONS] === 'event_gallery'
           ? html` <div class="values">
-              ${this._renderNumberInput(
+              ${this._renderNumberInput(CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SIZE, {
-                CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SIZE,
+                min: THUMBNAIL_WIDTH_MIN,
-                THUMBNAIL_WIDTH_MIN,
+                max: THUMBNAIL_WIDTH_MAX,
-                THUMBNAIL_WIDTH_MAX,
+              })}
-              )}
               ${this._renderSwitch(
                 CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_DETAILS,
                 defaults.event_viewer.controls.thumbnails.show_details,
@@ -1003,7 +1051,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
             </div>`
           : ''}
         ${this._renderOptionSetHeader('event_viewer')}
-        ${options.event_viewer.show
+        ${this._expandedMenus[MENU_OPTIONS] === 'event_viewer'
           ? html` <div class="values">
               ${this._renderSwitch(
                 CONF_EVENT_VIEWER_AUTO_PLAY,
@@ -1025,19 +1073,17 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                 CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE,
                 this._eventViewerNextPreviousControlStyles,
               )}
-              ${this._renderNumberInput(
+              ${this._renderNumberInput(CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE, {
-                CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE,
+                min: BUTTON_SIZE_MIN,
-                BUTTON_SIZE_MIN,
+              })}
-              )}
               ${this._renderOptionSelector(
                 CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_MODE,
                 this._thumbnailModes,
               )}
-              ${this._renderNumberInput(
+              ${this._renderNumberInput(CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE, {
-                CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE,
+                min: THUMBNAIL_WIDTH_MIN,
-                THUMBNAIL_WIDTH_MIN,
+                max: THUMBNAIL_WIDTH_MAX,
-                THUMBNAIL_WIDTH_MAX,
+              })}
-              )}
               ${this._renderSwitch(
                 CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SHOW_DETAILS,
                 defaults.event_viewer.controls.thumbnails.show_details,
@@ -1052,8 +1098,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
               )}
               ${this._renderNumberInput(
                 CONF_EVENT_VIEWER_CONTROLS_TITLE_DURATION_SECONDS,
-                0,
+                { min: 0, max: 60 },
-                60,
               )}
               ${this._renderOptionSelector(
                 CONF_EVENT_VIEWER_TRANSITION_EFFECT,
@@ -1062,7 +1107,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
             </div>`
           : ''}
         ${this._renderOptionSetHeader('image')}
-        ${options.image.show
+        ${this._expandedMenus[MENU_OPTIONS] === 'image'
           ? html` <div class="values">
               ${this._renderOptionSelector(CONF_IMAGE_MODE, this._imageModes)}
               ${this._renderStringInput(CONF_IMAGE_URL)}
@@ -1070,7 +1115,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
             </div>`
           : ''}
         ${this._renderOptionSetHeader('timeline')}
-        ${options.timeline.show
+        ${this._expandedMenus[MENU_OPTIONS] === 'timeline'
           ? html` <div class="values">
               ${this._renderNumberInput(CONF_TIMELINE_WINDOW_SECONDS)}
               ${this._renderNumberInput(CONF_TIMELINE_CLUSTERING_THRESHOLD)}
@@ -1082,11 +1127,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                 CONF_TIMELINE_CONTROLS_THUMBNAILS_MODE,
                 this._thumbnailModes,
               )}
-              ${this._renderNumberInput(
+              ${this._renderNumberInput(CONF_TIMELINE_CONTROLS_THUMBNAILS_SIZE, {
-                CONF_TIMELINE_CONTROLS_THUMBNAILS_SIZE,
+                min: THUMBNAIL_WIDTH_MIN,
-                THUMBNAIL_WIDTH_MIN,
+                max: THUMBNAIL_WIDTH_MAX,
-                THUMBNAIL_WIDTH_MAX,
+              })}
-              )}
               ${this._renderSwitch(
                 CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_DETAILS,
                 defaults.timeline.controls.thumbnails.show_details,
@@ -1098,7 +1142,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
             </div>`
           : ''}
         ${this._renderOptionSetHeader('dimensions')}
-        ${options.dimensions.show
+        ${this._expandedMenus[MENU_OPTIONS] === 'dimensions'
           ? html` <div class="values">
               ${this._renderOptionSelector(
                 CONF_DIMENSIONS_ASPECT_RATIO_MODE,
@@ -1109,7 +1153,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
           : ''}
         ${this._config['overrides'] !== undefined
           ? html` ${this._renderOptionSetHeader('overrides')}
-            ${options.overrides.show
+            ${this._expandedMenus[MENU_OPTIONS] === 'overrides'
               ? html` <div class="values">
                   ${this._renderInfo(localize('config.overrides.info'))}
                 </div>`
@@ -1150,43 +1194,39 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
   }
 
   /**
-   * Display/hide a camera section.
+   * Close the editor menu with the given domain.
-   * @param ev The event triggering the change.
+   * @param targetDomain The menu domain to close.
    */
-  protected _toggleCameraHandler(ev: { target: EditorCameraTarget | null }): void {
+  protected _closeMenu(targetDomain: string) {
-    if (ev && ev.target) {
+    delete this._expandedMenus[targetDomain];
-      this._expandedCameraIndex =
-        this._expandedCameraIndex == ev.target.cameraIndex
-          ? null
-          : ev.target.cameraIndex;
-    }
-  }
-
-  /**
-   * Handle a toggled set of options.
-   * @param ev The event triggering the change.
-   */
-  protected _toggleOptionHandler(ev: { target: EditorOptionSetTarget | null }): void {
-    this._toggleOptionSet(ev, options);
-  }
-
-  /**
-   * Toggle display of a set of options (e.g. 'Live')
-   * @param ev The event triggering the change.
-   * @param options The EditorOptions object.
-   */
-  protected _toggleOptionSet(
-    ev: { target: EditorOptionSetTarget | null },
-    options: EditorOptions,
-  ): void {
-    if (ev && ev.target) {
-      const show = !options[ev.target.optionSetName].show;
-      for (const [key] of Object.entries(options)) {
-        options[key].show = false;
-      }
-      options[ev.target.optionSetName].show = show;
     this.requestUpdate();
   }
+
+  /**
+   * Open an editor menu.
+   * @param targetDomain The menu domain to open.
+   * @param key The menu object key to open.
+   */
+  protected _openMenu(targetDomain: string, key: number | string) {
+    this._expandedMenus[targetDomain] = key;
+    this.requestUpdate();
+  }
+
+  /**
+   * Toggle an editor menu.
+   * @param ev An event.
+   */
+  protected _toggleMenu(ev: { target: EditorMenuTarget | null }): void {
+    if (ev && ev.target) {
+      const domain = ev.target.domain;
+      const key = ev.target.key;
+
+      if (this._expandedMenus[domain] == key) {
+        this._closeMenu(domain);
+      } else {
+        this._openMenu(domain, key);
+      }
+    }
   }
 
   /**

src/localize/languages/en.json

@@ -159,10 +159,22 @@
     "menu": {
       "buttons": {
         "frigate": "Frigate menu / Default view",
-        "frigate_ui": "Frigate user Interface",
+        "live": "Live",
+        "clips": "Clips",
+        "snapshots": "Snapshots",
+        "image": "Image",
+        "download": "Download",
+        "frigate_ui": "Frigate user interface",
         "fullscreen": "Fullscreen",
-        "download": "Download event media",
+        "timeline": "Timeline",
-        "cameras": "Select camera"
+        "icon": "Icon",
+        "priority": "Priority",
+        "alignment": "Button alignment",
+        "alignments": {
+          "matching": "Matching the menu alignment",
+          "opposing": "Opposing the menu alignment"
+        },
+        "enabled": "Button enabled"
       },
       "style": "Menu style",
       "styles": {
@@ -236,7 +248,7 @@
     "image_secondary": "Static image view options",
     "dimensions": "Dimensions",
     "dimensions_secondary": "Dimensions & shape options",
-    "show_button": "Show button",
+    "button": "Button",
     "upgrade": "Upgrade",
     "upgrade_available": "An automatic card configuration upgrade is available",
     "delete": "Delete",

src/scss/editor.scss

@@ -40,35 +40,35 @@ div.upgrade span {
   padding: 10px;
 }
 
-.camera-header {
+.submenu-header {
   display: flex;
   margin-top: 4px;
 
   cursor: pointer;
 }
-.camera-header * {
+.submenu-header * {
   flex-basis: auto;
 
-  // Only allow clicks on the outermost header.
+  // Only allow clicks on the header.
   pointer-events: none;
 }
-.camera-header ha-icon {
+.submenu-header ha-icon {
   padding-right: 10px;
 }
-.camera-header .new-camera {
+.submenu-header .new-camera {
   font-style: italic;
   color: var(--secondary-text-color, 'black');
 }
-.cameras {
+.submenu {
   margin: 5px 5px 10px 20px;
 }
-.cameras .controls {
+.submenu .controls {
   display: inline-block;
   margin-left: auto;
   margin-right: 0px;
   margin-bottom: 5px;
 }
-.cameras .controls ha-icon-button.button {
+.submenu .controls ha-icon-button.button {
   --mdc-icon-button-size: 32px;
   --mdc-icon-size: calc(var(--mdc-icon-button-size) / 2);
 }

src/scss/menu.scss

@@ -14,24 +14,25 @@
   justify-content: space-between;
 }
 
-/**************************
+/***********************************
- * Aligned divs: near & far
+ * Aligned divs: matching & opposing
- **************************/
+ ***********************************/
 
-div.near,
+div.matching,
-div.far {
+div.opposing {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
+  align-items: flex-start;
 
   // Allow the divs to be resized.
   min-width: 0px;
   min-height: 0px;
 }
-div.near {
+div.matching {
   justify-content: flex-start;
 }
-div.far {
+div.opposing {
   justify-content: flex-end;
 }
 

src/types.ts

@@ -327,20 +327,25 @@ export type CameraConfig = z.infer<typeof cameraConfigSchema>;
 /**
  * Custom Element Types.
  */
-
 const menuBaseSchema = z.object({
-  priority: z.number().optional(),
+  enabled: z.boolean().default(true).optional(),
-  alignment: z.enum(["near", "far"]).optional(),
+  priority: z
+    .number()
+    .min(0)
+    .max(FRIGATE_MENU_PRIORITY_MAX)
+    .default(FRIGATE_MENU_PRIORITY_DEFAULT)
+    .optional(),
+  alignment: z.enum(['matching', 'opposing']).default('matching').optional(),
+  icon: z.string().optional(),
 });
 
-export const menuIconSchema = iconSchema
+export const menuIconSchema = menuBaseSchema.merge(iconSchema).extend({
-  .extend({
   type: z.literal('custom:frigate-card-menu-icon'),
-  })
+});
-  .merge(menuBaseSchema);
 export type MenuIcon = z.infer<typeof menuIconSchema>;
 
-export const menuStateIconSchema = stateIconSchema
+export const menuStateIconSchema = menuBaseSchema
+  .merge(stateIconSchema)
   .extend({
     type: z.literal('custom:frigate-card-menu-state-icon'),
   })
@@ -355,12 +360,10 @@ const menuSubmenuItemSchema = elementsBaseSchema.extend({
 });
 export type MenuSubmenuItem = z.infer<typeof menuSubmenuItemSchema>;
 
-export const menuSubmenuSchema = iconSchema
+export const menuSubmenuSchema = menuBaseSchema.merge(iconSchema).extend({
-  .extend({
   type: z.literal('custom:frigate-card-menu-submenu'),
   items: menuSubmenuItemSchema.array(),
-  })
+});
-  .merge(menuBaseSchema);
 export type MenuSubmenu = z.infer<typeof menuSubmenuSchema>;
 export type MenuItem = MenuIcon | MenuStateIcon | MenuSubmenu;
 
@@ -616,25 +619,44 @@ export type LiveConfig = z.infer<typeof liveConfigSchema>;
 /**
  * Menu configuration section.
  */
+
+const visibleButtonDefault = {
+  priority: FRIGATE_MENU_PRIORITY_DEFAULT,
+  enabled: true,
+};
+const hiddenButtonDefault = {
+  priority: FRIGATE_MENU_PRIORITY_DEFAULT,
+  enabled: false,
+};
+
 const menuConfigDefault = {
   style: 'hidden' as const,
   position: 'top' as const,
   alignment: 'left' as const,
   buttons: {
-    frigate: FRIGATE_MENU_PRIORITY_DEFAULT,
+    frigate: visibleButtonDefault,
-    cameras: FRIGATE_MENU_PRIORITY_DEFAULT,
+    cameras: visibleButtonDefault,
-    live: FRIGATE_MENU_PRIORITY_DEFAULT,
+    live: visibleButtonDefault,
-    clips: FRIGATE_MENU_PRIORITY_DEFAULT,
+    clips: visibleButtonDefault,
-    snapshots: FRIGATE_MENU_PRIORITY_DEFAULT,
+    snapshots: visibleButtonDefault,
-    image: 0,
+    image: hiddenButtonDefault,
-    timeline: FRIGATE_MENU_PRIORITY_DEFAULT,
+    timeline: visibleButtonDefault,
-    download: FRIGATE_MENU_PRIORITY_DEFAULT,
+    download: visibleButtonDefault,
-    frigate_ui: FRIGATE_MENU_PRIORITY_DEFAULT,
+    frigate_ui: visibleButtonDefault,
-    fullscreen: FRIGATE_MENU_PRIORITY_DEFAULT,
+    fullscreen: visibleButtonDefault,
   },
   button_size: 40,
 };
 
+const visibleButtonSchema = menuBaseSchema.extend({
+  enabled: menuBaseSchema.shape.enabled.default(visibleButtonDefault.enabled),
+  priority: menuBaseSchema.shape.priority.default(visibleButtonDefault.priority),
+});
+const hiddenButtonSchema = menuBaseSchema.extend({
+  enabled: menuBaseSchema.shape.enabled.default(hiddenButtonDefault.enabled),
+  priority: menuBaseSchema.shape.priority.default(hiddenButtonDefault.priority),
+});
+
 const menuConfigSchema = z
   .object({
     style: z.enum(FRIGATE_MENU_STYLES).default(menuConfigDefault.style),
@@ -642,56 +664,16 @@ const menuConfigSchema = z
     alignment: z.enum(FRIGATE_MENU_ALIGNMENTS).default(menuConfigDefault.alignment),
     buttons: z
       .object({
-        frigate: z
+        frigate: visibleButtonSchema.default(menuConfigDefault.buttons.frigate),
-          .number()
+        cameras: visibleButtonSchema.default(menuConfigDefault.buttons.cameras),
-          .min(0)
+        live: visibleButtonSchema.default(menuConfigDefault.buttons.live),
-          .max(FRIGATE_MENU_PRIORITY_MAX)
+        clips: visibleButtonSchema.default(menuConfigDefault.buttons.clips),
-          .default(menuConfigDefault.buttons.frigate),
+        snapshots: visibleButtonSchema.default(menuConfigDefault.buttons.snapshots),
-        cameras: z
+        image: hiddenButtonSchema.default(menuConfigDefault.buttons.image),
-          .number()
+        timeline: visibleButtonSchema.default(menuConfigDefault.buttons.timeline),
-          .min(0)
+        download: visibleButtonSchema.default(menuConfigDefault.buttons.download),
-          .max(FRIGATE_MENU_PRIORITY_MAX)
+        frigate_ui: visibleButtonSchema.default(menuConfigDefault.buttons.frigate_ui),
-          .default(menuConfigDefault.buttons.cameras),
+        fullscreen: visibleButtonSchema.default(menuConfigDefault.buttons.fullscreen),
-        live: z
-          .number()
-          .min(0)
-          .max(FRIGATE_MENU_PRIORITY_MAX)
-          .default(menuConfigDefault.buttons.live),
-        clips: z
-          .number()
-          .min(0)
-          .max(FRIGATE_MENU_PRIORITY_MAX)
-          .default(menuConfigDefault.buttons.clips),
-        snapshots: z
-          .number()
-          .min(0)
-          .max(FRIGATE_MENU_PRIORITY_MAX)
-          .default(menuConfigDefault.buttons.snapshots),
-        image: z
-          .number()
-          .min(0)
-          .max(FRIGATE_MENU_PRIORITY_MAX)
-          .default(menuConfigDefault.buttons.image),
-        timeline: z
-          .number()
-          .min(0)
-          .max(FRIGATE_MENU_PRIORITY_MAX)
-          .default(menuConfigDefault.buttons.timeline),
-        download: z
-          .number()
-          .min(0)
-          .max(FRIGATE_MENU_PRIORITY_MAX)
-          .default(menuConfigDefault.buttons.download),
-        frigate_ui: z
-          .number()
-          .min(0)
-          .max(FRIGATE_MENU_PRIORITY_MAX)
-          .default(menuConfigDefault.buttons.frigate_ui),
-        fullscreen: z
-          .number()
-          .min(0)
-          .max(FRIGATE_MENU_PRIORITY_MAX)
-          .default(menuConfigDefault.buttons.fullscreen),
       })
       .default(menuConfigDefault.buttons),
     button_size: z.number().min(BUTTON_SIZE_MIN).default(menuConfigDefault.button_size),