Tweak retain_definitely to work wide the newer thumbnails.

src/components/gallery.ts

@@ -13,6 +13,7 @@ import {
 } from '../types.js';
 import { BrowseMediaUtil } from '../browse-media-util.js';
 import { View } from '../view.js';
+import { localize } from '../localize/localize.js';
 import { renderProgressIndicator } from './message.js';
 import { stopEventFromActivatingCardWideActions } from '../common.js';
 
@@ -221,6 +222,7 @@ export class FrigateCardGalleryCore extends LitElement {
                   />${child.frigate?.event?.retain_indefinitely ? html`<ha-icon
                       class="favorite"
                       icon="mdi:star"
+                      title=${localize('event.retain_indefinitely')}
                       />` : ``}`
                 : ``}
             </div>

src/components/thumbnail.ts

@@ -38,7 +38,11 @@ export class FrigateCardThumbnail extends FrigateCardCarousel {
         title="${this.media.title}"
       />
       ${event?.retain_indefinitely
-        ? html` <ha-icon class="favorite" icon="mdi:star" />`
+        ? html` <ha-icon
+            class="favorite"
+            icon="mdi:star"
+            title=${localize('event.retain_indefinitely')}
+          />`
         : ``}
       ${this.details && event
         ? html` <div class="details">

src/localize/languages/en.json

@@ -211,7 +211,8 @@
   "event": {
     "start": "Start",
     "duration": "Duration",
-    "in_progress": "In Progress"
+    "in_progress": "In Progress",
+    "retain_indefinitely": "Event will be indefinitely retained"
   },
   "error": {
     "empty_response": "Received empty response from Home Assistant for request",

src/scss/drawer.scss

@@ -38,6 +38,12 @@ ha-icon.control {
   padding-bottom: $drawer-padding-extend;
 }
 
+:host([open]) ha-icon.control {
+  // When the drawer is open make the button to close it more prominent.
+  opacity: 1;
+  background-color: black;
+}
+
 :host([location='left']) ha-icon.control {
   border-top-right-radius: $drawer-icon-size;
   border-bottom-right-radius: $drawer-icon-size;

src/scss/gallery.scss

@@ -1,16 +1,21 @@
-@use "@material/image-list/mdc-image-list";
+@use '@material/image-list/mdc-image-list';
-@use "@material/image-list";
+@use '@material/image-list';
+@use 'thumbnail';
 
 :host {
   display: block;
   width: 100%;
   height: 100%;
   overflow: auto;
-  -ms-overflow-style: none; /* Hide scrollbar: IE and Edge */
+
-  scrollbar-width: none;    /* Hide scrollbar: Firefox */
+  // Hide scrollbar: IE and Edge
+  -ms-overflow-style: none;
+
+  // Hide scrollbar: Firefox
+  scrollbar-width: none;
 }
 
-/* Hide scrollbar for Chrome, Safari and Opera */
+// Hide scrollbar for Chrome, Safari and Opera
 :host::-webkit-scrollbar {
   display: none;
 }
@@ -44,12 +49,7 @@ ha-card.frigate-card-gallery-folder {
   height: 100%;
   line-height: 1;
 }
-.favorite {
+
-  position: absolute;
+@include thumbnail.thumbnail-favorite() {
-  transform: translate(-50%, -50%);
+  opacity: 0.8;
-  height: 24px;
+} ;
-  width: 24px;
-  top: 10%;
-  left: 90%;
-  color: yellow;
-}

src/scss/thumbnail.scss

@@ -54,12 +54,13 @@ span.heading {
   font-weight: bold;
 }
 
-.favorite {
+@mixin thumbnail-favorite() {
+  ha-icon.favorite {
     position: absolute;
-  transform: translate(-50%, -50%);
+    color: var(--primary-color);
-  height: 24px;
+    padding: 2px;
-  width: 24px;
+    @content;
-  top: 12%;
-  left: 90%;
-  color: yellow;
   } 
+}
+
+@include thumbnail-favorite()

src/types.ts

@@ -953,7 +953,7 @@ export interface FrigateEvent {
   start_time: number;
   top_score: number;
   zones: string[];
-  retain_indefinitely: boolean;
+  retain_indefinitely?: boolean;
 }
 
 export interface FrigateBrowseMediaSource extends BrowseMediaSource {
@@ -988,7 +988,7 @@ export const frigateBrowseMediaSourceSchema: z.ZodSchema<BrowseMediaSource> = z.
             start_time: z.number(),
             top_score: z.number(),
             zones: z.string().array(),
-            retain_indefinitely: z.boolean(),
+            retain_indefinitely: z.boolean().optional(),
           }),
         })
         .optional(),