style: some visual UI improvements

src/app/channel-list-container/channel-list-container.component.scss

@@ -10,33 +10,15 @@
     padding-top: 0;
 }
 
-::ng-deep .mat-tab-header, ::ng-deep .mat-tab-labels {
-    height: 63px;
-    line-height: 63px;
-}
-
 ::ng-deep .mat-expansion-panel-body {
     padding: 0 !important;
 }
 
-::ng-deep.mat-tab-label,
-::ng-deep.mat-tab-label-active {
-    min-width: 0 !important;
-    padding: 3px 10px !important;
-    margin: 3px 10px !important;
-}
-
 .scroll-viewport {
     min-height: calc(100vh - 142px);
 }
 
 ::ng-deep {
-    .mat-tab-group {
-        height: 100%;
-    }
-    .mat-tab-label {
-        height: 63px !important;
-    }
     .mat-tab-label-content {
         text-transform: uppercase;
     }

src/app/playlist-uploader/playlist-uploader.component.html

@@ -4,7 +4,7 @@
     </div>
     <mat-card>
         <div fxLayout="row" fxFlexAlign="start start">
-            <div fxFlex="50">
+            <div [fxFlex]="playlists?.length > 0 ? 50 : 100">
                 <mat-tab-group [dynamicHeight]="true">
                     <mat-tab label="Add via file upload">
                         <ng-template matTabContent>
@@ -36,13 +36,13 @@
                     </mat-tab>
                 </mat-tab-group>
             </div>
-            <div fxFlex="50" id="recent-playlists">
+            <div *ngIf="playlists?.length > 0" fxFlex="50" id="recent-playlists">
                 <mat-card-subtitle>Added playlists ({{playlists.length}})</mat-card-subtitle>
                 <app-recent-playlists [playlists]="playlists" (playlistClicked)="getPlaylist($event)"
                     (removeClicked)="removePlaylist($event)">
                 </app-recent-playlists>
             </div>
         </div>
+        <mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
     </mat-card>
-    <mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
 </div>

src/app/playlist-uploader/playlist.interface.ts

@@ -9,8 +9,9 @@ export interface Playlist {
     title: string;
     filename: string;
     playlist: any;
-    importDate: number;
-    lastUsage: number;
+    importDate: string;
+    lastUsage: string;
     favorites: string[];
     count: number;
+    url?: string;
 }

src/app/recent-playlists/recent-playlists.component.html

@@ -1,15 +1,26 @@
 <mat-nav-list>
     <a mat-list-item *ngFor="let item of playlists; last as last" (click)="playlistClicked.emit(item._id)">
-        <mat-icon mat-list-icon>folder</mat-icon>
+        <mat-icon mat-list-icon *ngIf="item?.url">cloud</mat-icon>
+        <mat-icon mat-list-icon *ngIf="!item?.url">folder</mat-icon>
         <div mat-line>{{ item.title || item.filename }}</div>
-        <div mat-line>Channels: {{ item.count }}</div>
+        <div mat-line class="meta">
+            Channels: {{ item.count }} <ng-container *ngIf="item.importDate?.length > 3">
+                | Added: {{item.importDate | date}}
+            </ng-container>
+        </div>
+
         <!--<button mat-icon-button color="primary" (click)="$event.stopPropagation(); renameClicked.emit(item)" matTooltip="Rename playlist">
             <mat-icon>edit</mat-icon>
         </button>-->
+
+        <!-- <button *ngIf="item.url" mat-icon-button color="primary" (click)="$event.stopPropagation(); "
+            matTooltip="Update playlist by URL">
+            <mat-icon>refresh</mat-icon>
+        </button> -->
         <button mat-icon-button color="primary" (click)="$event.stopPropagation(); removeClicked.emit(item._id)"
             matTooltip="Remove playlist">
             <mat-icon>delete</mat-icon>
         </button>
         <mat-divider *ngIf="!last"></mat-divider>
     </a>
-</mat-nav-list>
+</mat-nav-list>

src/app/recent-playlists/recent-playlists.component.scss

@@ -7,4 +7,10 @@ mat-list-item {
 mat-nav-list {
     max-height: 325px;
     overflow: auto;
+}
+
+.meta {
+    font-size: 12px !important;
+    color: #666;
+    margin-top: 2px !important;
 }

src/styles.scss

@@ -65,3 +65,7 @@ html, body {
 .full-width {
   width: 100%;
 }
+
+.mat-toolbar-row, .mat-toolbar-single-row {
+  height: 54px;
+}