From ec4007a39c6fa861f960d65d6ce215357deb001e Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Sat, 28 Nov 2020 23:59:13 +0100
Subject: [PATCH] refactor: improvements in favorites list

---
 .../channel-list-container.component.html     | 49 +++++++++++--------
 1 file changed, 29 insertions(+), 20 deletions(-)

diff --git a/src/app/channel-list-container/channel-list-container.component.html b/src/app/channel-list-container/channel-list-container.component.html
index 00c3409c4..08c2e14e1 100644
--- a/src/app/channel-list-container/channel-list-container.component.html
+++ b/src/app/channel-list-container/channel-list-container.component.html
@@ -77,27 +77,36 @@
             *ngIf="favorites$ | async as favorites"
             id="favorites-list"
         >
-            <mat-list-item
-                *ngFor="
-                    let channel of favorites | filterBy: searchTerm;
-                    index as i
-                "
-                [class.active]="selected?.id === channel.id"
-                (click)="selectChannel(channel)"
-            >
-                <p matLine>
-                    {{ i + 1 + '. ' + channel?.name || 'Unnamed Channel' }}
-                </p>
-                <button
-                    mat-icon-button
-                    color="primary"
-                    matTooltip="Remove from favorites"
-                    (click)="toggleFavoriteChannel(channel, $event)"
+            <ng-container *ngIf="favorites.length > 0; else noFavorites">
+                <mat-list-item
+                    *ngFor="
+                        let channel of favorites | filterBy: searchTerm;
+                        index as i
+                    "
+                    [class.active]="selected?.id === channel.id"
+                    (click)="selectChannel(channel)"
                 >
-                    <mat-icon>star</mat-icon>
-                </button>
-                <mat-divider></mat-divider>
-            </mat-list-item>
+                    <p matLine>
+                        {{ i + 1 + '. ' + channel?.name || 'Unnamed Channel' }}
+                    </p>
+                    <button
+                        mat-icon-button
+                        color="primary"
+                        matTooltip="Remove from favorites"
+                        (click)="toggleFavoriteChannel(channel, $event)"
+                    >
+                        <mat-icon>star</mat-icon>
+                    </button>
+                    <mat-divider></mat-divider>
+                </mat-list-item>
+            </ng-container>
+            <ng-template #noFavorites>
+                <mat-list-item><strong>No favorites yet</strong></mat-list-item>
+                <mat-list-item>
+                    Please use the "star" icon to add channels to this
+                    list.</mat-list-item
+                >
+            </ng-template>
         </mat-nav-list>
     </mat-tab>
 </mat-tab-group>