Highlight the playlist in the left panel on play (#2025)

* Fixed bad smart playlist field s

* first try to add playlist highlight

* Simplified calls

* Now works for grids too.

* Derive the playlist highlight from the currently-playing track's origin instead of a stale global field.

* addressed comments

src/renderer/features/sidebar/components/sidebar-playlist-list.module.css

@@ -136,6 +136,10 @@
     white-space: nowrap;
 }
 
+.name-active {
+    color: var(--theme-colors-primary);
+}
+
 .image-container {
     flex-shrink: 0;
     width: 3rem;

src/renderer/features/sidebar/components/sidebar-playlist-list.tsx

@@ -28,6 +28,7 @@ import { useDragDrop } from '/@/renderer/hooks/use-drag-drop';
 import { useDragMonitor } from '/@/renderer/hooks/use-drag-monitor';
 import { AppRoute } from '/@/renderer/router/routes';
 import {
+    useCurrentPlaylistContextId,
     useCurrentServer,
     useCurrentServerId,
     usePermissions,
@@ -116,6 +117,8 @@ export const PlaylistRowButton = memo(
         const sidebarPlaylistSorting = useSidebarPlaylistSorting();
         const sidebarPlaylistMode = useSidebarPlaylistMode();
         const isCompact = sidebarPlaylistMode === 'compact';
+        const activePlaylistId = useCurrentPlaylistContextId();
+        const isActive = activePlaylistId === item.id;
 
         const [isHovered, setIsHovered] = useState(false);
         const isSmartPlaylist = Boolean(item.rules);
@@ -292,7 +295,13 @@ export const PlaylistRowButton = memo(
             >
                 {isCompact ? (
                     <>
-                        <Text className={styles.compactName} fw={500} size="md">
+                        <Text
+                            className={clsx(styles.compactName, {
+                                [styles.nameActive]: isActive,
+                            })}
+                            fw={500}
+                            size="md"
+                        >
                             {name}
                         </Text>
                         {isHovered && (
@@ -307,7 +316,13 @@ export const PlaylistRowButton = memo(
                         <div className={styles.rowGroup}>
                             <Image containerClassName={styles.imageContainer} src={imageUrl} />
                             <div className={styles.metadata}>
-                                <Text className={styles.name} fw={500} size="md">
+                                <Text
+                                    className={clsx(styles.name, {
+                                        [styles.nameActive]: isActive,
+                                    })}
+                                    fw={500}
+                                    size="md"
+                                >
                                     {name}
                                 </Text>
                                 <div className={styles.metadataGroup}>