Add a timeout (NIP-40) UI widget - temporarily hidden

Will be used to implement NIP-40: https://github.com/nostr-protocol/nips/blob/master/40.md

package-lock.json

@@ -8,6 +8,7 @@
       "name": "@blockcore/notes",
       "version": "0.0.0",
       "dependencies": {
+        "@angular-material-components/datetime-picker": "^9.0.0",
         "@angular/animations": "^15.0.4",
         "@angular/cdk": "^15.0.4",
         "@angular/common": "^15.0.4",
@@ -347,6 +348,22 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
       "dev": true
     },
+    "node_modules/@angular-material-components/datetime-picker": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@angular-material-components/datetime-picker/-/datetime-picker-9.0.0.tgz",
+      "integrity": "sha512-F+yf5kxzu62q1H2ZiVbKGfKHlszQhYN/avZyejCyq7bI7V9kg93BaTJ+ACOf9NEtM05USzrLXdiBGjEAMW82aQ==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/cdk": "^15.0.1",
+        "@angular/common": "^15.0.1",
+        "@angular/core": "^15.0.1",
+        "@angular/forms": "^15.0.1",
+        "@angular/material": "^15.0.1",
+        "@angular/platform-browser": "^15.0.1"
+      }
+    },
     "node_modules/@angular/animations": {
       "version": "15.0.4",
       "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-15.0.4.tgz",
@@ -12769,6 +12786,14 @@
         }
       }
     },
+    "@angular-material-components/datetime-picker": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@angular-material-components/datetime-picker/-/datetime-picker-9.0.0.tgz",
+      "integrity": "sha512-F+yf5kxzu62q1H2ZiVbKGfKHlszQhYN/avZyejCyq7bI7V9kg93BaTJ+ACOf9NEtM05USzrLXdiBGjEAMW82aQ==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "@angular/animations": {
       "version": "15.0.4",
       "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-15.0.4.tgz",

package.json

@@ -12,6 +12,7 @@
   },
   "private": true,
   "dependencies": {
+    "@angular-material-components/datetime-picker": "^9.0.0",
     "@angular/animations": "^15.0.4",
     "@angular/cdk": "^15.0.4",
     "@angular/common": "^15.0.4",

src/app/app.module.ts

@@ -83,6 +83,8 @@ import { EventThreadComponent } from './shared/event-thread/event-thread.compone
 import { EventReactionsComponent } from './shared/event-reactions/event-reactions.component';
 import { NgxLoadingButtonsModule } from 'ngx-loading-buttons';
 import { ContentPhotosComponent } from './shared/content-photos/content-photos.component';
+import { NgxMatDatetimePickerModule, NgxMatNativeDateModule, NgxMatTimepickerModule } from '@angular-material-components/datetime-picker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
 
 @NgModule({
   declarations: [
@@ -165,7 +167,11 @@ import { ContentPhotosComponent } from './shared/content-photos/content-photos.c
     MatSnackBarModule,
     MatProgressBarModule,
     MatDialogModule,
+    MatDatepickerModule,
     PhotoGalleryModule,
+    NgxMatDatetimePickerModule,
+    NgxMatNativeDateModule,
+    NgxMatTimepickerModule,
     NgxColorsModule,
     ServiceWorkerModule.register('ngsw-worker.js', {
       enabled: !isDevMode(),

src/app/shared/create-note-dialog/create-note-dialog.html

@@ -1,21 +1,32 @@
 <div class="dialog">
-  <h1 mat-dialog-title>Write Your Note</h1>
-  <div mat-dialog-content class="mat-dialog-content">
-    <div class="toolbar">
-      <mat-icon class="toolbar-icon margin-right" (click)="isEmojiPickerVisible = !isEmojiPickerVisible;" matTooltip="Insert emoji">sentiment_satisfied</mat-icon>
-      <!-- <mat-icon class="toolbar-icon" (click)="addLink()" matTooltip="Insert link">insert_link</mat-icon> -->
+  <form [formGroup]="formGroup">
+    <h1 mat-dialog-title>Write Your Note</h1>
+    <div mat-dialog-content class="mat-dialog-content">
+      <div class="toolbar">
+        <mat-icon class="toolbar-icon margin-right" (click)="isEmojiPickerVisible = !isEmojiPickerVisible;" matTooltip="Insert emoji">sentiment_satisfied</mat-icon>
+        <!-- <mat-icon class="toolbar-icon" (click)="addLink()" matTooltip="Insert link">insert_link</mat-icon> -->
+      </div>
+      <emoji-mart class="picker" *ngIf="isEmojiPickerVisible" emoji="point_up" [showPreview]="false" (emojiSelect)="addEmoji($event)" title="Choose your emoji"></emoji-mart>
+      <mat-form-field appearance="fill" class="input-full-width">
+        <mat-label>Note</mat-label>
+        <textarea class="note-input" matInput type="text" autocomplete="off" formControlName="note" rows="6"></textarea>
+      </mat-form-field>
+
+      <!-- <mat-form-field>
+        <input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a timeout" [formControl]="dateControl" [min]="minDate" />
+        <mat-datepicker-toggle matSuffix [for]="$any(picker)"></mat-datepicker-toggle>
+        <ngx-mat-datetime-picker #picker [showSpinners]="true" [showSeconds]="false" [stepHour]="1" [stepMinute]="1" [stepSecond]="1" [touchUi]="false" [enableMeridian]="false" [disableMinute]="false" [hideTime]="false">
+          <ng-template>
+            <span>Set timeout</span>
+          </ng-template>
+        </ngx-mat-datetime-picker>
+      </mat-form-field> -->
+
     </div>
-    <emoji-mart class="picker" *ngIf="isEmojiPickerVisible" emoji="point_up" [showPreview]="false"
-      (emojiSelect)="addEmoji($event)" title="Choose your emoji"></emoji-mart>
-    <mat-form-field appearance="fill" class="input-full-width">
-      <mat-label>Note</mat-label>
-      <textarea class="note-input" matInput type="text" autocomplete="off" [(ngModel)]="data.note" rows="6"></textarea>
-    </mat-form-field>
-  </div>
-  <div mat-dialog-actions class="mat-dialog-actions" align="end">
-    <mat-icon (click)="toggleSize()" class="hide-small maximize-button"
-      matTooltip="Maximize the window">zoom_out_map</mat-icon>
-    <button mat-stroked-button (click)="onNoClick()">Cancel</button>
-    <button mat-flat-button [mat-dialog-close]="data" color="primary" cdkFocusInitial>Post</button>
-  </div>
+    <div mat-dialog-actions class="mat-dialog-actions" align="end">
+      <mat-icon (click)="toggleSize()" class="hide-small maximize-button" matTooltip="Maximize the window">zoom_out_map</mat-icon>
+      <button mat-stroked-button (click)="onNoClick()">Cancel</button>
+      <button mat-flat-button [mat-dialog-close]="data" color="primary" cdkFocusInitial>Post</button>
+    </div>
+  </form>
 </div>

src/app/shared/create-note-dialog/create-note-dialog.ts

@@ -1,4 +1,5 @@
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, ViewChild } from '@angular/core';
+import { FormControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 export interface NoteDialogData {
@@ -11,12 +12,30 @@ export interface NoteDialogData {
   styleUrls: ['create-note-dialog.scss'],
 })
 export class NoteDialog {
+  @ViewChild('picker') picker: unknown;
+
   isEmojiPickerVisible: boolean | undefined;
 
-  constructor(public dialogRef: MatDialogRef<NoteDialog>, @Inject(MAT_DIALOG_DATA) public data: NoteDialogData) {
+  formGroup!: UntypedFormGroup;
+
+  minDate?: number;
+
+  public dateControl = new FormControl(null);
+
+  constructor(private formBuilder: UntypedFormBuilder, public dialogRef: MatDialogRef<NoteDialog>, @Inject(MAT_DIALOG_DATA) public data: NoteDialogData) {
     this.data.note = '';
   }
 
+  ngOnInit() {
+    this.minDate = Date.now();
+
+    this.formGroup = this.formBuilder.group({
+      note: ['', Validators.required],
+      expiration: [''],
+      dateControl: [],
+    });
+  }
+
   onNoClick(): void {
     this.data.note = '';
     this.dialogRef.close();