From a72d1115025d01a4680fff450895a3d6d8272bd7 Mon Sep 17 00:00:00 2001
From: 4gray <4gray@users.noreply.github.com>
Date: Sat, 6 May 2023 18:22:43 +0200
Subject: [PATCH] style: some visual improvements

---
 .../playlist-item/playlist-item.component.html               | 2 +-
 .../playlist-item/playlist-item.component.scss               | 4 ++++
 .../playlist-item/playlist-item.component.ts                 | 2 ++
 .../home/recent-playlists/recent-playlists.component.html    | 1 +
 .../home/recent-playlists/recent-playlists.component.scss    | 2 +-
 src/app/home/recent-playlists/recent-playlists.component.ts  | 3 +++
 .../components/video-player/sidebar/sidebar.component.html   | 1 +
 .../components/video-player/sidebar/sidebar.component.scss   | 5 -----
 8 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/app/home/recent-playlists/playlist-item/playlist-item.component.html b/src/app/home/recent-playlists/playlist-item/playlist-item.component.html
index 53aa4e81b..4d578dee6 100644
--- a/src/app/home/recent-playlists/playlist-item/playlist-item.component.html
+++ b/src/app/home/recent-playlists/playlist-item/playlist-item.component.html
@@ -39,7 +39,7 @@
             >
         </ng-container>
     </div>
-    <span matListItemMeta>
+    <span matListItemMeta class="action-buttons" *ngIf="showActions">
         <button
             *ngIf="item.url || item.filePath"
             mat-icon-button
diff --git a/src/app/home/recent-playlists/playlist-item/playlist-item.component.scss b/src/app/home/recent-playlists/playlist-item/playlist-item.component.scss
index e11110441..7218355e6 100644
--- a/src/app/home/recent-playlists/playlist-item/playlist-item.component.scss
+++ b/src/app/home/recent-playlists/playlist-item/playlist-item.component.scss
@@ -45,3 +45,7 @@ mat-list-item {
         }
     }
 }
+
+.action-buttons {
+    align-self: center !important;
+}
diff --git a/src/app/home/recent-playlists/playlist-item/playlist-item.component.ts b/src/app/home/recent-playlists/playlist-item/playlist-item.component.ts
index 15e478835..89d99e77d 100644
--- a/src/app/home/recent-playlists/playlist-item/playlist-item.component.ts
+++ b/src/app/home/recent-playlists/playlist-item/playlist-item.component.ts
@@ -10,6 +10,8 @@ export class PlaylistItemComponent {
     /** Playlist item */
     @Input() item: PlaylistMeta;
 
+    @Input() showActions = true;
+
     /** Emits on playlist selection */
     @Output() playlistClicked: EventEmitter<string> = new EventEmitter();
 
diff --git a/src/app/home/recent-playlists/recent-playlists.component.html b/src/app/home/recent-playlists/recent-playlists.component.html
index 24c856df9..105051787 100644
--- a/src/app/home/recent-playlists/recent-playlists.component.html
+++ b/src/app/home/recent-playlists/recent-playlists.component.html
@@ -30,6 +30,7 @@
         <app-playlist-item
             *ngFor="let item of playlists; last as last"
             [item]="item"
+            [showActions]="!sidebarMode"
             (editPlaylistClicked)="openInfoDialog($event)"
             (playlistClicked)="getPlaylist($event)"
             (refreshClicked)="refreshPlaylist($event)"
diff --git a/src/app/home/recent-playlists/recent-playlists.component.scss b/src/app/home/recent-playlists/recent-playlists.component.scss
index 8e549f96a..a1390799d 100644
--- a/src/app/home/recent-playlists/recent-playlists.component.scss
+++ b/src/app/home/recent-playlists/recent-playlists.component.scss
@@ -30,7 +30,7 @@
 }
 
 .favorites-icon {
-    margin-left: 16px;
+    padding-left: 36px;
 }
 
 #skeleton-container {
diff --git a/src/app/home/recent-playlists/recent-playlists.component.ts b/src/app/home/recent-playlists/recent-playlists.component.ts
index e53d41946..5e3a97491 100644
--- a/src/app/home/recent-playlists/recent-playlists.component.ts
+++ b/src/app/home/recent-playlists/recent-playlists.component.ts
@@ -2,6 +2,7 @@ import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import {
     Component,
     EventEmitter,
+    Input,
     NgZone,
     OnDestroy,
     Output,
@@ -47,6 +48,8 @@ export class RecentPlaylistsComponent implements OnDestroy {
 
     allPlaylistsLoaded$ = this.store.select(selectPlaylistsLoadingFlag);
 
+    @Input() sidebarMode = false;
+
     /** IPC Renderer commands list with callbacks */
     commandsList = [
         new IpcCommand(
diff --git a/src/app/player/components/video-player/sidebar/sidebar.component.html b/src/app/player/components/video-player/sidebar/sidebar.component.html
index 327d82b42..d4ffa73bb 100644
--- a/src/app/player/components/video-player/sidebar/sidebar.component.html
+++ b/src/app/player/components/video-player/sidebar/sidebar.component.html
@@ -46,6 +46,7 @@
 <ng-template #playlistsTemplate>
     <app-recent-playlists
         class="recent-playlists"
+        [sidebarMode]="true"
         [class.electron]="dataService.isElectron"
         (playlistClicked)="selectPlaylist()"
     ></app-recent-playlists>
diff --git a/src/app/player/components/video-player/sidebar/sidebar.component.scss b/src/app/player/components/video-player/sidebar/sidebar.component.scss
index 70834b687..f2a7c0935 100644
--- a/src/app/player/components/video-player/sidebar/sidebar.component.scss
+++ b/src/app/player/components/video-player/sidebar/sidebar.component.scss
@@ -22,15 +22,10 @@
         .channels-count {
             font-size: 0.8em;
             color: #ccc;
-            text-transform: lowercase;
         }
     }
 }
 
-.mat-drawer-inner-container {
-    overflow: hidden;
-}
-
 .recent-playlists {
     height: calc(100vh - 60px);
     overflow: auto;