From a06c642eef6b3c9292481a8fe5785f130fd41e98 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Tue, 11 Nov 2025 08:23:27 +0100
Subject: [PATCH] feat(recent-playlists): show auto-refresh indicator on
 playlist items

Add a compact auto-refresh icon to playlist items to indicate when a
playlist has auto-refresh enabled. Move existing upload-type icons into
an .icon-container so the auto-refresh indicator can be positioned
absolutely beside them.

- Add .auto-refresh-indicator styles to position and size the indicator,
  match colors, and center the icon.
- Wrap mat-icon elements in .icon-container and render an additional
  mat-icon when item.autoRefresh is true for URL and file playlists.
- Keep tooltips for the auto-refresh icon to explain its meaning.

This improves UX by making auto-refresh state visible at a glance.
---
 .../playlist-item.component.html              | 44 +++++++++++++------
 .../playlist-item.component.scss              | 15 +++++++
 2 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/libs/ui/components/src/lib/recent-playlists/playlist-item/playlist-item.component.html b/libs/ui/components/src/lib/recent-playlists/playlist-item/playlist-item.component.html
index d0ffcf34e..17a9365c5 100644
--- a/libs/ui/components/src/lib/recent-playlists/playlist-item/playlist-item.component.html
+++ b/libs/ui/components/src/lib/recent-playlists/playlist-item/playlist-item.component.html
@@ -1,21 +1,37 @@
 <mat-list-item (click)="playlistClicked.emit(item._id)">
     @if (item.url) {
-        <mat-icon
-            matListItemIcon
-            class="upload-type-icon"
-            [matTooltip]="
-                ('HOME.PLAYLISTS.ADDED_VIA_URL' | translate) + ' ' + item.url
-            "
-            >cloud</mat-icon
-        >
+        <div class="icon-container" matListItemIcon>
+            <mat-icon
+                class="upload-type-icon"
+                [matTooltip]="
+                    ('HOME.PLAYLISTS.ADDED_VIA_URL' | translate) + ' ' + item.url
+                "
+                >cloud</mat-icon
+            >
+            @if (item.autoRefresh) {
+                <mat-icon
+                    class="auto-refresh-indicator"
+                    [matTooltip]="'HOME.PLAYLISTS.AUTO_REFRESH_ENABLED' | translate"
+                    >autorenew</mat-icon
+                >
+            }
+        </div>
     }
     @if (!item.url && !item.serverUrl && !item.macAddress) {
-        <mat-icon
-            matListItemIcon
-            class="upload-type-icon"
-            [matTooltip]="'HOME.PLAYLISTS.ADDED_VIA_FILE' | translate"
-            >folder</mat-icon
-        >
+        <div class="icon-container" matListItemIcon>
+            <mat-icon
+                class="upload-type-icon"
+                [matTooltip]="'HOME.PLAYLISTS.ADDED_VIA_FILE' | translate"
+                >folder</mat-icon
+            >
+            @if (item.autoRefresh) {
+                <mat-icon
+                    class="auto-refresh-indicator"
+                    [matTooltip]="'HOME.PLAYLISTS.AUTO_REFRESH_ENABLED' | translate"
+                    >autorenew</mat-icon
+                >
+            }
+        </div>
     }
     @if (item.serverUrl) {
         <div class="icon-container" matListItemIcon>
diff --git a/libs/ui/components/src/lib/recent-playlists/playlist-item/playlist-item.component.scss b/libs/ui/components/src/lib/recent-playlists/playlist-item/playlist-item.component.scss
index 42a1cd43e..d3695f333 100644
--- a/libs/ui/components/src/lib/recent-playlists/playlist-item/playlist-item.component.scss
+++ b/libs/ui/components/src/lib/recent-playlists/playlist-item/playlist-item.component.scss
@@ -84,6 +84,21 @@ mat-list-item {
     background-color: #444444;
 }
 
+.auto-refresh-indicator {
+    position: absolute;
+    right: -2px;
+    bottom: -2px;
+    font-size: 14px !important;
+    width: 14px !important;
+    height: 14px !important;
+    color: #4caf50;
+    background-color: var(--background-color, #fff);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 @media only screen and (max-width: 480px) {
     .upload-type-icon,
     .icon-container {