feat: add filter chips for news

src/app/modules/news/page/news-page.html

@@ -4,19 +4,31 @@
       <ion-back-button></ion-back-button>
       <ion-menu-button></ion-menu-button>
     </ion-buttons>
-    <ion-title>{{'news.title'  | translate}}</ion-title>
+    <ion-title>{{ 'news.title' | translate }}</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content fullscreen>
   <ion-refresher slot="fixed" (ionRefresh)="refresh($event.target)">
-    <ion-refresher-content pullingIcon="chevron-down-outline" pullingText="{{'data.REFRESH_ACTION' | translate}}"
-      refreshingText="{{'data.REFRESHING' | translate}}"
-      refreshingSpinner="crescent">
+    <ion-refresher-content
+      pullingIcon="chevron-down-outline"
+      pullingText="{{ 'data.REFRESH_ACTION' | translate }}"
+      refreshingText="{{ 'data.REFRESHING' | translate }}"
+      refreshingSpinner="crescent"
+    >
     </ion-refresher-content>
   </ion-refresher>
   <ion-grid>
-    <ion-row *ngIf="news.length === 0">
+    <ion-row>
+      <ion-col size="12">
+        <stapps-news-settings-filter
+          *ngIf="settings"
+          [settings]="settings"
+          (filtersChanged)="toggleFilter($event)"
+        ></stapps-news-settings-filter>
+      </ion-col>
+    </ion-row>
+    <ion-row *ngIf="!news">
       <ion-col size="12" size-md="6" *ngFor="let skeleton of [1, 2, 3, 4, 5]">
         <stapps-skeleton-news-item></stapps-skeleton-news-item>
       </ion-col>
@@ -27,7 +39,14 @@
       </ion-col>
     </ion-row>
   </ion-grid>
-  <ion-infinite-scroll id="infinite-scroll" threshold="20%" (ionInfinite)="loadMore($event)">
+  <ion-label *ngIf="news.length === 0" class="notFoundContainer">
+    {{ 'search.nothing_found' | translate | titlecase }}
+  </ion-label>
+  <ion-infinite-scroll
+    id="infinite-scroll"
+    threshold="20%"
+    (ionInfinite)="loadMore($event.target)"
+  >
     <ion-infinite-scroll-content loading-spinner="crescent">
     </ion-infinite-scroll-content>
   </ion-infinite-scroll>