Add selection of circles on feed page for filtering

- WIP: The data loading needs to be improved, as the behavior of the circle selection is not always as expected.

src/app/feed-private/feed-private.css

@@ -1,4 +1,3 @@
-
 .loading-container {
   text-align: center;
 }
@@ -7,3 +6,6 @@
   margin: auto;
 }
 
+.circle-selection {
+  margin-bottom: 1em;
+}

src/app/feed-private/feed-private.html

@@ -12,6 +12,13 @@
   </div> -->
 
   <div class="feed-page">
+
+    <mat-button-toggle-group class="circle-selection" name="ingredients">
+      <mat-button-toggle [routerLink]="['/feed', circle.id]" [matTooltip]="circle.name" value="flour" *ngFor="let circle of circleService.circles">
+        <mat-icon matListItemIcon [style.color]="circle.color">trip_origin</mat-icon>
+      </mat-button-toggle>
+    </mat-button-toggle-group>
+
     <mat-accordion class="options">
       <mat-expansion-panel>
         <mat-expansion-panel-header>

src/app/feed-private/feed-private.ts

@@ -13,6 +13,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { StorageService } from '../services/storage';
 import { dexieToRx } from '../shared/utilities';
 import { UIService } from '../services/ui';
+import { CircleService } from '../services/circle';
 
 @Component({
   selector: 'app-feed-private',
@@ -42,6 +43,7 @@ export class FeedPrivateComponent {
   // }
 
   constructor(
+    public circleService: CircleService,
     public ui: UIService,
     private activatedRoute: ActivatedRoute,
     public db: StorageService,