Add basic save and list of circles

package-lock.json

@@ -26,6 +26,7 @@
         "joi": "^17.7.0",
         "level": "^8.0.0",
         "moment": "^2.29.4",
+        "ngx-colors": "^3.1.4",
         "nostr-tools": "^1.0.0-beta2",
         "rxjs": "~7.5.0",
         "sanitize-html": "^2.8.1",
@@ -8967,6 +8968,20 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "node_modules/ngx-colors": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/ngx-colors/-/ngx-colors-3.1.4.tgz",
+      "integrity": "sha512-Evue9fXrDSU4ok5apSMlBmcuTsoC9nWl0nqj9xtdssUp3qxijWzxoo7nA9NvAq/hiUygikGJIu7neAb1N4CZig==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": ">=13.1.1",
+        "@angular/common": ">=13.1.1",
+        "@angular/core": ">=13.1.1",
+        "@angular/forms": ">=13.1.1"
+      }
+    },
     "node_modules/nice-napi": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",
@@ -19191,6 +19206,14 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "ngx-colors": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/ngx-colors/-/ngx-colors-3.1.4.tgz",
+      "integrity": "sha512-Evue9fXrDSU4ok5apSMlBmcuTsoC9nWl0nqj9xtdssUp3qxijWzxoo7nA9NvAq/hiUygikGJIu7neAb1N4CZig==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "nice-napi": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",

src/app/circles/circles.component.html

@@ -3,7 +3,9 @@
 <div class="feed-page">
   <p>Circles is how you organize people you follow. Different circles can have different rules applied and circles is an important way to make the experience more enjoyable.</p>
 
-  
+  <div class="circles" *ngFor="let circle of circles">
+    {{circle.id}} | {{circle.name}} | {{circle.color}}
+  </div>
 
   <!-- <mat-accordion class="options">
     <mat-expansion-panel>

src/app/circles/circles.component.ts

@@ -12,6 +12,7 @@ import { map } from 'rxjs';
 import { CirclesService } from '../services/circles.service';
 import { CircleDialog } from '../shared/create-circle-dialog/create-circle-dialog';
 import { MatDialog } from '@angular/material/dialog';
+import { v4 as uuidv4 } from 'uuid';
 
 @Component({
   selector: 'app-circles',
@@ -95,7 +96,11 @@ export class CirclesComponent {
     });
 
     dialogRef.afterClosed().subscribe((result) => {
-      // this.note = result;
+      debugger;
+      this.circlesService.putCircle({
+        id: uuidv4(),
+        ...result,
+      });
     });
   }
 

src/app/services/circles.service.ts

@@ -21,7 +21,7 @@ export class CirclesService {
   }
 
   constructor(private storage: StorageService) {
-    this.table = this.storage.table<Circle>('notes');
+    this.table = this.storage.table<Circle>('circles');
   }
 
   async #filter(predicate: (value: Circle, key: string) => boolean): Promise<Circle[]> {