Add message when there are no threads yet

Author: tschaffter

client/components/messaging/thread-list/thread-list.html

@@ -1,22 +1,20 @@
-<mat-list class="thread-list">
-    <ng-template
-        *ngIf="threads$ | async as threads"
-        ngFor
-        let-thread
-        let-i="index"
-        let-first="first"
-        [ngForOf]="threads"
-    >
-        <thread-date-separator
-            *ngIf="first"
-            class="thread-date-separator"
-            [isoDate]="thread.createdAt"
-        ></thread-date-separator>
-        <thread-date-separator
-            *ngIf="!first && !(thread.createdAt | sameDay: threads[i - 1].createdAt)"
-            class="thread-date-separator"
-            [isoDate]="thread.createdAt"
-        ></thread-date-separator>
-        <thread-preview class="thread-detail" [thread]="thread"></thread-preview>
+<mat-list class="thread-list" *ngIf="threads$ | async as threads">
+    <div *ngIf="threads.length == 0; else showThreads">
+        <span>Use Discussion to start a stimulating conversation with your collaborators.</span>
+    </div>
+    <ng-template #showThreads>
+        <ng-template ngFor let-thread let-i="index" let-first="first" [ngForOf]="threads">
+            <thread-date-separator
+                *ngIf="first"
+                class="thread-date-separator"
+                [isoDate]="thread.createdAt"
+            ></thread-date-separator>
+            <thread-date-separator
+                *ngIf="!first && !(thread.createdAt | sameDay: threads[i - 1].createdAt)"
+                class="thread-date-separator"
+                [isoDate]="thread.createdAt"
+            ></thread-date-separator>
+            <thread-preview class="thread-detail" [thread]="thread"></thread-preview>
+        </ng-template>
     </ng-template>
 </mat-list>