Support selecting menu items

src/card.ts

@@ -301,6 +301,7 @@ export class FrigateCard extends LitElement {
           entity: config.camera_entity,
           state_color: true,
           title: getCameraTitle(this._hass, config),
+          selected: this._view?.camera === camera,
           tap_action: createFrigateCardCustomAction('camera_select', camera),
         };
       });

src/components/submenu.ts

@@ -31,6 +31,8 @@ export class FrigateCardSubmenu extends LitElement {
       <mwc-list-item
         style="${styleMap(stateParameters.style || {})}"
         graphic="icon"
+        ?selected=${item.selected}
+        ?activated=${item.selected}
         aria-label="${stateParameters.title || ''}"
         @action=${(ev) => {
           // Attach the action config so ascendants have access to it.

src/scss/card.scss

@@ -42,7 +42,7 @@
   opacity: 0.0;
 }
 .outer:hover + .hover-menu, .hover-menu:hover {
-  opacity: 1.0;
+  opacity: 0.9;
 }
 /* A relative div to place absolute picture elements onto */
 .picture-elements {

src/scss/menu.scss

@@ -4,12 +4,7 @@
   --frigate-card-menu-button-size: 40px;
   --mdc-icon-button-size: var(--frigate-card-menu-button-size);
   --mdc-icon-size: calc(var(--mdc-icon-button-size) / 2);
-  z-index: 10;
   opacity: 0.9;
-
-  // Necessary to mitigate an apparent Chrome opacity flickering bug caused by
-  // button ripples.
-  will-change: opacity;
  }
 
 .frigate-card-menu {

src/types.ts

@@ -334,6 +334,7 @@ const menuSubmenuItemSchema = elementsBaseSchema.merge(
     entity: z.string().optional(),
     icon: z.string().optional(),
     state_color: z.boolean().default(true),
+    selected: z.boolean().default(false),
   }),
 );
 export type MenuSubmenuItem = z.infer<typeof menuSubmenuItemSchema>;