Added pages to see, create, modify & delete redeemable actions. User card top right with disconnect & log out. Code clean up.

src/app/actions/action-list/action-list.component.ts

@@ -0,0 +1,66 @@
+import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
+import { MatListModule } from '@angular/material/list';
+import RedeemableAction from '../../shared/models/redeemable_action';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDialog } from '@angular/material/dialog';
+import { ActionItemEditComponent } from '../action-item-edit/action-item-edit.component';
+import { HermesClientService } from '../../hermes-client.service';
+
+@Component({
+  selector: 'action-list',
+  standalone: true,
+  imports: [MatButtonModule, MatFormFieldModule, MatIconModule, MatListModule],
+  templateUrl: './action-list.component.html',
+  styleUrl: './action-list.component.scss'
+})
+export class ActionListComponent {
+  @Input() actions: RedeemableAction[] = []
+  @Output() actionsChange = new EventEmitter<RedeemableAction>();
+  readonly dialog = inject(MatDialog);
+  readonly client = inject(HermesClientService);
+  opened = false;
+
+  create(): void {
+    this.openDialog({ user_id: '', name: '', type: '', data: {} });
+  }
+
+  modify(action: RedeemableAction): void {
+    this.openDialog(action);
+  }
+
+  private openDialog(action: RedeemableAction): void {
+    if (this.opened)
+      return;
+
+    this.opened = true;
+
+    const dialogRef = this.dialog.open(ActionItemEditComponent, {
+      data: { action: {user_id: action.user_id, name: action.name, type: action.type, data: action.data }, actions: this.actions },
+    });
+    const isNewAction = action.name.length <= 0;
+    const requestType = isNewAction ? 'create_redeemable_action' : 'update_redeemable_action';
+
+    dialogRef.afterClosed().subscribe((result: RedeemableAction) => {
+      this.opened = false;
+      if (!result)
+        return;
+
+      this.client.first((d: any) => d.op == 4 && d.d.request.type == requestType && d.d.data.name == result.name)
+        ?.subscribe(_ => {
+          if (isNewAction) {
+            this.actionsChange.emit(result);
+          } else {
+            action.type = result.type;
+            action.data = result.data;
+          }
+        });
+
+      if (isNewAction)
+        this.client.createRedeemableAction(result.name, result.type, result.data);
+      else
+        this.client.updateRedeemableAction(result.name, result.type, result.data);
+    });
+  }
+}