refactor(external-playback): update styles

Entire-Checkpoint: c6e522b4276c

libs/workspace/shell/feature/src/lib/workspace-shell/services/workspace-shell.facade.ts

@@ -720,6 +720,23 @@ export class WorkspaceShellFacade {
         );
     }
 
+    openActiveExternalSessionTarget(): void {
+        const playlistId = this.externalPlaybackSession()?.contentInfo
+            ?.playlistId;
+        if (!playlistId) return;
+
+        const playlist = this.playlists().find((p) => p._id === playlistId);
+        if (!playlist) return;
+
+        if (playlist.serverUrl) {
+            void this.router.navigate(['/workspace', 'xtreams', playlistId]);
+        } else if (playlist.macAddress) {
+            void this.router.navigate(['/workspace', 'stalker', playlistId]);
+        } else {
+            void this.router.navigate(['/workspace', 'playlists', playlistId]);
+        }
+    }
+
     onSearchInput(value: string): void {
         this.searchQuery.set(value);
         this.scheduleSearchApply(value);

libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.html

@@ -135,6 +135,9 @@
                 <app-external-playback-dock
                     [session]="session"
                     (closeClicked)="facade.closeActiveExternalSession()"
+                    (artworkClicked)="
+                        facade.openActiveExternalSessionTarget()
+                    "
                 />
             </footer>
         }

libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.scss

@@ -52,6 +52,8 @@ app-workspace-shell-context-sidebar {
 .workspace-now-playing {
     grid-column: 2;
     grid-row: 3;
+    padding: 0;
+    background: var(--app-content-bg, var(--mat-sys-surface));
 }
 
 .workspace-content {