Add editor support.

src/editor.ts

@@ -1,8 +1,4 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-
-// TODO Add editor for control sizes
-// TODO reorganizse editor by section
-
 import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
@@ -23,28 +19,46 @@ const options = {
     secondary: localize('editor.basic_secondary'),
     show: true,
   },
-  optional: {
+  frigate: {
-    icon: 'tune',
+    icon: 'alpha-f-box',
-    name: localize('editor.optional'),
+    name: localize('editor.frigate'),
-    secondary: localize('editor.optional_secondary'),
+    secondary: localize('editor.frigate_secondary'),
     show: false,
   },
-  appearance: {
+  view: {
-    icon: 'palette',
+    icon: 'eye',
-    name: localize('editor.appearance'),
+    name: localize('editor.view'),
-    secondary: localize('editor.appearance_secondary'),
+    secondary: localize('editor.view_secondary'),
     show: false,
   },
-  webrtc: {
+  menu: {
-    icon: 'webrtc',
+    icon: 'menu',
-    name: localize('editor.webrtc'),
+    name: localize('editor.menu'),
-    secondary: localize('editor.webrtc_secondary'),
+    secondary: localize('editor.menu_secondary'),
     show: false,
   },
-  advanced: {
+  live: {
-    icon: 'cogs',
+    icon: 'cctv',
-    name: localize('editor.advanced'),
+    name: localize('editor.live'),
-    secondary: localize('editor.advanced_secondary'),
+    secondary: localize('editor.live_secondary'),
+    show: false,
+  },
+  event_viewer: {
+    icon: 'filmstrip',
+    name: localize('editor.event_viewer'),
+    secondary: localize('editor.event_viewer_secondary'),
+    show: false,
+  },
+  image: {
+    icon: 'image',
+    name: localize('editor.image'),
+    secondary: localize('editor.image_secondary'),
+    show: false,
+  },
+  dimensions: {
+    icon: 'aspect-ratio',
+    name: localize('editor.dimensions'),
+    secondary: localize('editor.dimensions'),
     show: false,
   },
 };
@@ -185,12 +199,62 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                     })}
                   </paper-listbox>
                 </paper-dropdown-menu>
+              </div>
+            `
+          : ''}
+        <div class="option" @click=${this._toggleOption} .option=${'frigate'}>
+          <div class="row">
+            <ha-icon .icon=${`mdi:${options.frigate.icon}`}></ha-icon>
+            <div class="title">${options.frigate.name}</div>
+          </div>
+          <div class="secondary">${options.frigate.secondary}</div>
+        </div>
+        ${options.frigate.show
+          ? html`
+              <div class="values">
                 <paper-input
                   label=${localize('config.frigate.camera_name')}
                   .value=${this._config?.frigate?.camera_name || ''}
                   .configValue=${'frigate.camera_name'}
                   @value-changed=${this._valueChanged}
                 ></paper-input>
+                <paper-input
+                  label=${localize('config.frigate.url')}
+                  .value=${this._config?.frigate?.url || ''}
+                  .configValue=${'frigate.url'}
+                  @value-changed=${this._valueChanged}
+                ></paper-input>
+                <paper-input
+                  .label=${localize('config.frigate.label')}
+                  .value=${this._config?.frigate?.label || ''}
+                  .configValue=${'frigate.label'}
+                  @value-changed=${this._valueChanged}
+                ></paper-input>
+                <paper-input
+                  .label=${localize('config.frigate.zone')}
+                  .value=${this._config?.frigate?.zone || ''}
+                  .configValue=${'frigate.zone'}
+                  @value-changed=${this._valueChanged}
+                ></paper-input>
+                <paper-input
+                  label=${localize('config.frigate.client_id')}
+                  .value=${this._config?.frigate?.client_id || ''}
+                  .configValue=${'frigate.client_id'}
+                  @value-changed=${this._valueChanged}
+                ></paper-input>
+              </div>
+            `
+          : ''}
+        <div class="option" @click=${this._toggleOption} .option=${'view'}>
+          <div class="row">
+            <ha-icon .icon=${`mdi:${options.view.icon}`}></ha-icon>
+            <div class="title">${options.view.name}</div>
+          </div>
+          <div class="secondary">${options.view.secondary}</div>
+        </div>
+        ${options.view.show
+          ? html`
+              <div class="values">
                 <paper-dropdown-menu
                   label=${localize('config.view.default')}
                   @value-changed=${this._valueChanged}
@@ -209,58 +273,221 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                     })}
                   </paper-listbox>
                 </paper-dropdown-menu>
+                <paper-input
+                  label=${localize('config.view.timeout')}
+                  prevent-invalid-input
+                  allowed-pattern="[0-9]"
+                  .value=${this._config?.view?.timeout
+                    ? String(this._config?.view?.timeout)
+                    : ''}
+                  .configValue=${'view.timeout'}
+                  @value-changed=${this._valueChanged}
+                ></paper-input>
               </div>
             `
           : ''}
-        <div class="option" @click=${this._toggleOption} .option=${'optional'}>
+        <div class="option" @click=${this._toggleOption} .option=${'menu'}>
           <div class="row">
-            <ha-icon .icon=${`mdi:${options.optional.icon}`}></ha-icon>
+            <ha-icon .icon=${`mdi:${options.menu.icon}`}></ha-icon>
-            <div class="title">${options.optional.name}</div>
+            <div class="title">${options.menu.name}</div>
           </div>
-          <div class="secondary">${options.optional.secondary}</div>
+          <div class="secondary">${options.menu.secondary}</div>
         </div>
-        ${options.optional.show
+        ${options.menu.show
-          ? html` <div class="values">
+          ? html`
-              <paper-dropdown-menu
+              <div class="values">
-                .label=${localize('config.live.provider')}
+                <paper-dropdown-menu
-                @value-changed=${this._valueChanged}
+                  .label=${localize('config.menu.mode')}
-                .configValue=${'live.provider'}
+                  @value-changed=${this._valueChanged}
-              >
+                  .configValue=${'menu.mode'}
-                <paper-listbox
-                  slot="dropdown-content"
-                  .selected=${Object.keys(liveProviders).indexOf(
-                    this._config?.live?.provider || '',
-                  )}
                 >
-                  ${Object.keys(liveProviders).map((key) => {
+                  <paper-listbox
-                    return html`
+                    slot="dropdown-content"
-                      <paper-item .label="${key}">${liveProviders[key]} </paper-item>
+                    .selected=${Object.keys(menuModes).indexOf(
-                    `;
+                      this._config?.menu?.mode || '',
-                  })}
+                    )}
-                </paper-listbox>
+                  >
-              </paper-dropdown-menu>
+                    ${Object.keys(menuModes).map((key) => {
-              <paper-input
+                      return html`
-                label=${localize('config.frigate.client_id')}
+                        <paper-item .label="${key}"> ${menuModes[key]} </paper-item>
-                .value=${this._config?.frigate?.client_id || ''}
+                      `;
-                .configValue=${'frigate.client_id'}
+                    })}
-                @value-changed=${this._valueChanged}
+                  </paper-listbox>
-              ></paper-input>
+                </paper-dropdown-menu>
-              <paper-input
+                <paper-input
-                label=${localize('config.view.timeout')}
+                  label=${localize('config.menu.button_size')}
-                prevent-invalid-input
+                  .value=${this._config?.menu?.button_size || ''}
-                allowed-pattern="[0-9]"
+                  .configValue=${'menu.button_size'}
-                .value=${this._config?.view?.timeout
+                  @value-changed=${this._valueChanged}
-                  ? String(this._config?.view?.timeout)
+                ></paper-input>
-                  : ''}
+                <ha-formfield
-                .configValue=${'view.timeout'}
+                  .label=${localize('editor.show_button') +
-                @value-changed=${this._valueChanged}
+                  ': ' +
-              ></paper-input>
+                  localize('config.menu.buttons.frigate')}
-              <paper-input
+                >
-                label=${localize('config.frigate.url')}
+                  <ha-switch
-                .value=${this._config?.frigate?.url || ''}
+                    .checked=${this._config?.menu?.buttons?.frigate ??
-                .configValue=${'frigate.url'}
+                    defaults.menu.buttons.frigate}
-                @value-changed=${this._valueChanged}
+                    .configValue=${'menu.buttons.frigate'}
-              ></paper-input>
+                    @change=${this._valueChanged}
+                  ></ha-switch>
+                </ha-formfield>
+                <ha-formfield
+                  .label=${localize('editor.show_button') +
+                  ': ' +
+                  localize('config.view.views.live')}
+                >
+                  <ha-switch
+                    .checked=${this._config?.menu?.buttons?.live ??
+                    defaults.menu.buttons.live}
+                    .configValue=${'menu.buttons.live'}
+                    @change=${this._valueChanged}
+                  ></ha-switch>
+                </ha-formfield>
+                <ha-formfield
+                  .label=${localize('editor.show_button') +
+                  ': ' +
+                  localize('config.view.views.clips')}
+                >
+                  <ha-switch
+                    .checked=${this._config?.menu?.buttons?.clips ??
+                    defaults.menu.buttons.clips}
+                    .configValue=${'menu.buttons.clips'}
+                    @change=${this._valueChanged}
+                  ></ha-switch>
+                </ha-formfield>
+                <ha-formfield
+                  .label=${localize('editor.show_button') +
+                  ': ' +
+                  localize('config.view.views.snapshots')}
+                >
+                  <ha-switch
+                    .checked=${this._config?.menu?.buttons?.snapshots ??
+                    defaults.menu.buttons.snapshots}
+                    .configValue=${'menu.buttons.snapshots'}
+                    @change=${this._valueChanged}
+                  ></ha-switch>
+                </ha-formfield>
+                <ha-formfield
+                  .label=${localize('editor.show_button') +
+                  ': ' +
+                  localize('config.view.views.image')}
+                >
+                  <ha-switch
+                    .checked=${this._config?.menu?.buttons?.image ??
+                    defaults.menu.buttons.image}
+                    .configValue=${'menu.buttons.image'}
+                    @change=${this._valueChanged}
+                  ></ha-switch>
+                </ha-formfield>
+                <ha-formfield
+                  .label=${localize('editor.show_button') +
+                  ': ' +
+                  localize('config.menu.buttons.download')}
+                >
+                  <ha-switch
+                    .checked=${this._config?.menu?.buttons?.download ??
+                    defaults.menu.buttons.download}
+                    .configValue=${'menu.buttons.download'}
+                    @change=${this._valueChanged}
+                  ></ha-switch>
+                </ha-formfield>
+                <ha-formfield
+                  .label=${localize('editor.show_button') +
+                  ': ' +
+                  localize('config.menu.buttons.frigate_ui')}
+                >
+                  <ha-switch
+                    .checked=${this._config?.menu?.buttons?.frigate_ui ??
+                    defaults.menu.buttons.frigate_ui}
+                    .configValue=${'menu.buttons.frigate_ui'}
+                    @change=${this._valueChanged}
+                  ></ha-switch>
+                </ha-formfield>
+                <ha-formfield
+                  .label=${localize('editor.show_button') +
+                  ': ' +
+                  localize('config.menu.buttons.fullscreen')}
+                >
+                  <ha-switch
+                    .checked=${this._config?.menu?.buttons?.fullscreen ??
+                    defaults.menu.buttons.fullscreen}
+                    .configValue=${'menu.buttons.fullscreen'}
+                    @change=${this._valueChanged}
+                  ></ha-switch>
+                </ha-formfield>
+              </div>
+            `
+          : ''}
+        <div class="option" @click=${this._toggleOption} .option=${'live'}>
+          <div class="row">
+            <ha-icon .icon=${`mdi:${options.live.icon}`}></ha-icon>
+            <div class="title">${options.live.name}</div>
+          </div>
+          <div class="secondary">${options.live.secondary}</div>
+        </div>
+        ${options.live.show
+          ? html`
+              <div class="values">
+                <br />
+                <ha-formfield .label=${localize('config.live.preload')}>
+                  <ha-switch
+                    .checked=${this._config?.live?.preload ?? defaults.live.preload}
+                    .configValue=${'live.preload'}
+                    @change=${this._valueChanged}
+                  ></ha-switch>
+                </ha-formfield>
+                <paper-dropdown-menu
+                  .label=${localize('config.live.provider')}
+                  @value-changed=${this._valueChanged}
+                  .configValue=${'live.provider'}
+                >
+                  <paper-listbox
+                    slot="dropdown-content"
+                    .selected=${Object.keys(liveProviders).indexOf(
+                      this._config?.live?.provider || '',
+                    )}
+                  >
+                    ${Object.keys(liveProviders).map((key) => {
+                      return html`
+                        <paper-item .label="${key}">${liveProviders[key]} </paper-item>
+                      `;
+                    })}
+                  </paper-listbox>
+                </paper-dropdown-menu>
+                <paper-dropdown-menu
+                  .label=${localize('config.live.webrtc.entity')}
+                  @value-changed=${this._valueChanged}
+                  .configValue=${'live.webrtc.entity'}
+                >
+                  <paper-listbox
+                    slot="dropdown-content"
+                    .selected=${cameraEntities.indexOf(webrtcCameraEntity)}
+                  >
+                    ${cameraEntities.map((entity) => {
+                      return html` <paper-item>${entity}</paper-item> `;
+                    })}
+                  </paper-listbox>
+                </paper-dropdown-menu>
+                <paper-input
+                  label=${localize('config.live.webrtc.url')}
+                  .value=${this._config?.live?.webrtc?.url || ''}
+                  .configValue=${'live.webrtc.url'}
+                  @value-changed=${this._valueChanged}
+                ></paper-input>
+              </div>
+            `
+          : ''}
+        <div class="option" @click=${this._toggleOption} .option=${'event_viewer'}>
+          <div class="row">
+            <ha-icon .icon=${`mdi:${options.event_viewer.icon}`}></ha-icon>
+            <div class="title">${options.event_viewer.name}</div>
+          </div>
+          <div class="secondary">${options.event_viewer.secondary}</div>
+        </div>
+        ${options.event_viewer.show
+          ? html` <div class="values">
+              <br />
               <ha-formfield .label=${localize('config.event_viewer.autoplay_clip')}>
                 <ha-switch
                   .checked=${this._config?.event_viewer?.autoplay_clip ??
@@ -269,13 +496,6 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                   @change=${this._valueChanged}
                 ></ha-switch>
               </ha-formfield>
-              <ha-formfield .label=${localize('config.live.preload')}>
-                <ha-switch
-                  .checked=${this._config?.live?.preload ?? defaults.live.preload}
-                  .configValue=${'live.preload'}
-                  @change=${this._valueChanged}
-                ></ha-switch>
-              </ha-formfield>
               <ha-formfield .label=${localize('config.event_viewer.lazy_load')}>
                 <ha-switch
                   .checked=${this._config?.event_viewer?.lazy_load ??
@@ -284,35 +504,6 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                   @change=${this._valueChanged}
                 ></ha-switch>
               </ha-formfield>
-            </div>`
-          : ''}
-        <div class="option" @click=${this._toggleOption} .option=${'appearance'}>
-          <div class="row">
-            <ha-icon .icon=${`mdi:${options.appearance.icon}`}></ha-icon>
-            <div class="title">${options.appearance.name}</div>
-          </div>
-          <div class="secondary">${options.appearance.secondary}</div>
-        </div>
-        ${options.appearance.show
-          ? html`<paper-dropdown-menu
-                .label=${localize('config.menu.mode')}
-                @value-changed=${this._valueChanged}
-                .configValue=${'menu.mode'}
-              >
-                <paper-listbox
-                  slot="dropdown-content"
-                  .selected=${Object.keys(menuModes).indexOf(
-                    this._config?.menu?.mode || '',
-                  )}
-                >
-                  ${Object.keys(menuModes).map((key) => {
-                    return html`
-                      <paper-item .label="${key}"> ${menuModes[key]} </paper-item>
-                    `;
-                  })}
-                </paper-listbox>
-              </paper-dropdown-menu>
-              <br />
               <paper-dropdown-menu
                 .label=${localize('config.event_viewer.controls.next_previous.style')}
                 @value-changed=${this._valueChanged}
@@ -333,7 +524,43 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                   })}
                 </paper-listbox>
               </paper-dropdown-menu>
-              <br />
+              <paper-input
+                label=${localize('config.event_viewer.controls.next_previous.size')}
+                .value=${this._config?.event_viewer?.controls?.next_previous?.size || ''}
+                .configValue=${'event_viewer.controls.next_previous.size'}
+                @value-changed=${this._valueChanged}
+              ></paper-input>
+            </div>`
+          : ''}
+        <div class="option" @click=${this._toggleOption} .option=${'image'}>
+          <div class="row">
+            <ha-icon .icon=${`mdi:${options.image.icon}`}></ha-icon>
+            <div class="title">${options.image.name}</div>
+          </div>
+          <div class="secondary">${options.image.secondary}</div>
+        </div>
+        ${options.image.show
+          ? html` <div class="values">
+              <paper-input
+                label=${localize('config.image.src')}
+                prevent-invalid-input
+                .value=${this._config?.image?.src
+                  ? String(this._config?.image?.src)
+                  : ''}
+                .configValue=${'image.src'}
+                @value-changed=${this._valueChanged}
+              ></paper-input>
+            </div>`
+          : ''}
+        <div class="option" @click=${this._toggleOption} .option=${'dimensions'}>
+          <div class="row">
+            <ha-icon .icon=${`mdi:${options.dimensions.icon}`}></ha-icon>
+            <div class="title">${options.dimensions.name}</div>
+          </div>
+          <div class="secondary">${options.dimensions.secondary}</div>
+        </div>
+        ${options.dimensions.show
+          ? html` <div class="values">
               <paper-dropdown-menu
                 .label=${localize('config.dimensions.aspect_ratio_mode')}
                 @value-changed=${this._valueChanged}
@@ -352,7 +579,6 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                   })}
                 </paper-listbox>
               </paper-dropdown-menu>
-              <br />
               <paper-input
                 label=${localize('config.dimensions.aspect_ratio')}
                 prevent-invalid-input
@@ -362,174 +588,6 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                 .configValue=${'dimensions.aspect_ratio'}
                 @value-changed=${this._valueChanged}
               ></paper-input>
-              <paper-input
-                label=${localize('config.image.src')}
-                prevent-invalid-input
-                .value=${this._config?.image?.src
-                  ? String(this._config?.image?.src)
-                  : ''}
-                .configValue=${'image.src'}
-                @value-changed=${this._valueChanged}
-              ></paper-input>
-              <ha-formfield
-                .label=${localize('editor.show_button') +
-                ': ' +
-                localize('config.menu.buttons.frigate')}
-              >
-                <ha-switch
-                  .checked=${this._config?.menu?.buttons?.frigate ??
-                  defaults.menu.buttons.frigate}
-                  .configValue=${'menu.buttons.frigate'}
-                  @change=${this._valueChanged}
-                ></ha-switch>
-              </ha-formfield>
-              <br />
-              <ha-formfield
-                .label=${localize('editor.show_button') +
-                ': ' +
-                localize('config.view.views.live')}
-              >
-                <ha-switch
-                  .checked=${this._config?.menu?.buttons?.live ??
-                  defaults.menu.buttons.live}
-                  .configValue=${'menu.buttons.live'}
-                  @change=${this._valueChanged}
-                ></ha-switch>
-              </ha-formfield>
-              <br />
-              <ha-formfield
-                .label=${localize('editor.show_button') +
-                ': ' +
-                localize('config.view.views.clips')}
-              >
-                <ha-switch
-                  .checked=${this._config?.menu?.buttons?.clips ??
-                  defaults.menu.buttons.clips}
-                  .configValue=${'menu.buttons.clips'}
-                  @change=${this._valueChanged}
-                ></ha-switch>
-              </ha-formfield>
-              <br />
-              <ha-formfield
-                .label=${localize('editor.show_button') +
-                ': ' +
-                localize('config.view.views.snapshots')}
-              >
-                <ha-switch
-                  .checked=${this._config?.menu?.buttons?.snapshots ??
-                  defaults.menu.buttons.snapshots}
-                  .configValue=${'menu.buttons.snapshots'}
-                  @change=${this._valueChanged}
-                ></ha-switch>
-              </ha-formfield>
-              <br />
-              <ha-formfield
-                .label=${localize('editor.show_button') +
-                ': ' +
-                localize('config.view.views.image')}
-              >
-                <ha-switch
-                  .checked=${this._config?.menu?.buttons?.image ??
-                  defaults.menu.buttons.image}
-                  .configValue=${'menu.buttons.image'}
-                  @change=${this._valueChanged}
-                ></ha-switch>
-              </ha-formfield>
-              <br />
-              <ha-formfield
-                .label=${localize('editor.show_button') +
-                ': ' +
-                localize('config.menu.buttons.download')}
-              >
-                <ha-switch
-                  .checked=${this._config?.menu?.buttons?.download ??
-                  defaults.menu.buttons.download}
-                  .configValue=${'menu.buttons.download'}
-                  @change=${this._valueChanged}
-                ></ha-switch>
-              </ha-formfield>
-              <br />
-              <ha-formfield
-                .label=${localize('editor.show_button') +
-                ': ' +
-                localize('config.menu.buttons.frigate_ui')}
-              >
-                <ha-switch
-                  .checked=${this._config?.menu?.buttons?.frigate_ui ??
-                  defaults.menu.buttons.frigate_ui}
-                  .configValue=${'menu.buttons.frigate_ui'}
-                  @change=${this._valueChanged}
-                ></ha-switch>
-              </ha-formfield>
-              <br />
-              <ha-formfield
-                .label=${localize('editor.show_button') +
-                ': ' +
-                localize('config.menu.buttons.fullscreen')}
-              >
-                <ha-switch
-                  .checked=${this._config?.menu?.buttons?.fullscreen ??
-                  defaults.menu.buttons.fullscreen}
-                  .configValue=${'menu.buttons.fullscreen'}
-                  @change=${this._valueChanged}
-                ></ha-switch>
-              </ha-formfield>
-              <br />`
-          : ''}
-        <div class="option" @click=${this._toggleOption} .option=${'advanced'}>
-          <div class="row">
-            <ha-icon .icon=${`mdi:${options.advanced.icon}`}></ha-icon>
-            <div class="title">${options.advanced.name}</div>
-          </div>
-          <div class="secondary">${options.advanced.secondary}</div>
-        </div>
-        ${options.advanced.show
-          ? html` <div class="values">
-                <paper-input
-                  .label=${localize('config.frigate.label')}
-                  .value=${this._config?.frigate?.label || ''}
-                  .configValue=${'frigate.label'}
-                  @value-changed=${this._valueChanged}
-                ></paper-input>
-              </div>
-              <div class="values">
-                <paper-input
-                  .label=${localize('config.frigate.zone')}
-                  .value=${this._config?.frigate?.zone || ''}
-                  .configValue=${'frigate.zone'}
-                  @value-changed=${this._valueChanged}
-                ></paper-input>
-              </div>`
-          : ''}
-        <div class="option" @click=${this._toggleOption} .option=${'webrtc'}>
-          <div class="row">
-            <ha-icon .icon=${`mdi:${options.webrtc.icon}`}></ha-icon>
-            <div class="title">${options.webrtc.name}</div>
-          </div>
-          <div class="secondary">${options.webrtc.secondary}</div>
-        </div>
-        ${options.webrtc.show
-          ? html` <div class="values">
-              <paper-dropdown-menu
-                .label=${localize('config.live.webrtc.entity')}
-                @value-changed=${this._valueChanged}
-                .configValue=${'live.webrtc.entity'}
-              >
-                <paper-listbox
-                  slot="dropdown-content"
-                  .selected=${cameraEntities.indexOf(webrtcCameraEntity)}
-                >
-                  ${cameraEntities.map((entity) => {
-                    return html` <paper-item>${entity}</paper-item> `;
-                  })}
-                </paper-listbox>
-              </paper-dropdown-menu>
-              <paper-input
-                label=${localize('config.live.webrtc.url')}
-                .value=${this._config?.live?.webrtc?.url || ''}
-                .configValue=${'live.webrtc.url'}
-                @value-changed=${this._valueChanged}
-              ></paper-input>
             </div>`
           : ''}
       </div>
@@ -584,7 +642,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
         }
         return obj[key];
       }, newConfig);
-      key = parts[parts.length-1];
+      key = parts[parts.length - 1];
     }
 
     if (value !== undefined && objectTarget[key] === value) {

src/localize/languages/en.json

@@ -15,9 +15,9 @@
     "frigate": {
       "camera_name": "Frigate camera name (Optional, autodetected from entity)",
       "client_id": "Frigate client id (For >1 Frigate server)",
-      "label": "Label/object filter",
+      "label": "Frigate label/object filter",
       "url": "Frigate server URL",
-      "zone": "Zone"
+      "zone": "Frigate zone"
     },
     "view": {
       "default": "Default view",
@@ -29,15 +29,15 @@
         "snapshots": "Snapshots gallery",
         "image": "Static image"
       },
-      "timeout": "View timeout (seconds)"
+      "timeout": "View timeout secs (before returning to default, 0=never)"
     },
     "event_viewer": {
-      "autoplay_clip": "Autoplay most recent clip",
+      "autoplay_clip": "Autoplay most recent clip (In 'clip' view)",
       "lazy_load": "Lazily load event media",
       "controls": {
         "next_previous": {
           "style": "Event Viewer Next & Previous Control style",
-          "size": "Event Viewer Next & Previous Control size",
+          "size": "Event Viewer Next & Previous Control size (e.g. '48px')",
           "styles": {
             "thumbnails": "Thumbnails",
             "chevrons": "Chevrons",
@@ -86,10 +86,11 @@
         "hover-right": "Hover right",
         "above": "Above",
         "below": "Below"
-      }
+      },
+      "button_size": "Menu button size (e.g. '40px')"
     },
     "dimensions": {
-      "aspect_ratio": "Default aspect ratio",
+      "aspect_ratio": "Default aspect ratio (e.g. '16:9')",
       "aspect_ratio_mode": "Aspect ratio mode",
       "aspect_ratio_modes": {
         "unconstrained": "Unconstrained aspect ratio",
@@ -101,14 +102,20 @@
   "editor": {
     "basic": "Basic",
     "basic_secondary": "Basic options for most users",
-    "optional": "Optional",
+    "frigate": "Frigate",
-    "optional_secondary": "Optional configuration to tweak card behavior",
+    "frigate_secondary": "Frigate server options",
-    "appearance": "Appearance",
+    "view": "View",
-    "appearance_secondary": "Appearance of the card",
+    "view_secondary": "Card view options",
-    "webrtc": "WebRTC",
+    "menu": "Menu",
-    "webrtc_secondary": "Optional WebRTC parameters",
+    "menu_secondary": "Menu options",
-    "advanced": "Advanced",
+    "live": "Live",
-    "advanced_secondary": "Advanced options",
+    "live_secondary": "Live view options",
+    "event_viewer": "Event viewer",
+    "event_viewer_secondary": "Event viewer options",
+    "image": "Image",
+    "image_secondary": "Static image view options",
+    "dimensions": "Dimensions",
+    "dimensions_secondary": "Card dimensions options",
     "show_button": "Show button"
   },
   "error": {