Refactor profile-header into event-header

src/app/app.module.ts

@@ -53,7 +53,7 @@ import { NoteDialog } from './shared/create-note-dialog/create-note-dialog';
 import { PickerModule } from '@ctrl/ngx-emoji-mart';
 import { CirclesComponent } from './circles/circles.component';
 import { PeopleComponent } from './people/people.component';
-import { ProfileHeaderComponent } from './shared/profile-header/profile-header.component';
+import { EventHeaderComponent } from './shared/event-header/event-header.component';
 import { ProfileActionsComponent } from './shared/profile-actions/profile-actions.component';
 import { CircleDialog } from './shared/create-circle-dialog/create-circle-dialog';
 import { FollowDialog } from './shared/create-follow-dialog/create-follow-dialog';
@@ -89,7 +89,7 @@ import { ImportFollowDialog } from './circles/import-follow-dialog/import-follow
     CircleDialog,
     CirclesComponent,
     PeopleComponent,
-    ProfileHeaderComponent,
+    EventHeaderComponent,
     ProfileActionsComponent,
     FeedPrivateComponent,
     FeedPublicComponent,

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

@@ -58,9 +58,9 @@
 
     <div class="events clickable" (click)="navigation.openEvent($event, event)" *ngFor="let event of events; trackBy: trackByFn">
       <app-profile-actions [event]="event"></app-profile-actions>
-      <app-profile-header [pubkey]="event.pubkey"
+      <app-event-header [pubkey]="event.pubkey"
         ><span class="event-date" matTooltipPosition="below">{{ event.created_at | ago }}</span> <app-directory-icon [pubkey]="event.pubkey"></app-directory-icon
-      ></app-profile-header>
+      ></app-event-header>
       <div class="content clickable">
         <app-content [event]="event"></app-content>
         <!-- {{ event.content }}<span *ngIf="event.contentCut">... (message was truncated)</span> -->

src/app/feed-public/feed-public.component.html

@@ -33,9 +33,9 @@
 
   <div class="events" *ngFor="let event of events; trackBy: trackByFn">
     <app-profile-actions [event]="event"></app-profile-actions>
-    <app-profile-header [pubkey]="event.pubkey"
+    <app-event-header [pubkey]="event.pubkey"
       ><span class="event-date" [matTooltip]="event.id!" matTooltipPosition="below">{{ event.created_at | ago }}</span> <app-directory-icon [pubkey]="event.pubkey"></app-directory-icon
-    ></app-profile-header>
+    ></app-event-header>
     <div class="content">
       {{ event.content }}<span *ngIf="event.contentCut">... (message was truncated)</span>
       <div *ngIf="details">

src/app/note/note.component.html

@@ -4,9 +4,9 @@
   <div class="root-event events" *ngIf="thread.root$ | async as event">
     <span>
       <app-profile-actions [event]="event" [pubkey]="event.pubkey"></app-profile-actions>
-      <app-profile-header [pubkey]="event.pubkey"
+      <app-event-header [pubkey]="event.pubkey"
         ><span class="event-date">{{ event.created_at | ago }}</span> <app-directory-icon [pubkey]="event.pubkey"></app-directory-icon
-      ></app-profile-header>
+      ></app-event-header>
       <app-content [event]="event"></app-content>
       <!-- <div class="content">{{ event.content }}<span *ngIf="event.contentCut">... (message was truncated)</span></div> -->
     </span>
@@ -17,9 +17,9 @@
       <div class="events" *ngFor="let event of events; trackBy: trackByFn">
         <span>
           <app-profile-actions [event]="event" [pubkey]="event.pubkey"></app-profile-actions>
-          <app-profile-header [pubkey]="event.pubkey"
+          <app-event-header [pubkey]="event.pubkey"
             ><span class="event-date">{{ event.created_at | ago }}</span> <app-directory-icon [pubkey]="event.pubkey"></app-directory-icon
-          ></app-profile-header>
+          ></app-event-header>
           <app-content [event]="event"></app-content>
           <!-- <div class="content">{{ event.content }}<span *ngIf="event.contentCut">... (message was truncated)</span></div> -->
         </span>
@@ -31,9 +31,9 @@
   <!-- <div class="parent-events events" *ngFor="let event of filteredThread(); trackBy: trackByFn">
     <span *ngIf="event.kind != 7">
       <app-profile-actions [event]="event" [pubkey]="event.pubkey"></app-profile-actions>
-      <app-profile-header [pubkey]="event.pubkey"
+      <app-event-header [pubkey]="event.pubkey"
         ><span class="event-date">{{ event.created_at | ago }}</span> <app-directory-icon [pubkey]="event.pubkey"></app-directory-icon
-      ></app-profile-header>
+      ></app-event-header>
 
       <div class="content">{{ event.content }}<span *ngIf="event.contentCut">... (message was truncated)</span></div>
     </span>
@@ -41,9 +41,9 @@
 
   <div class="current-event events noclick" *ngIf="thread.event$ | async as event">
     <app-profile-actions [event]="event" [pubkey]="event.pubkey"></app-profile-actions>
-    <app-profile-header [pubkey]="event.pubkey"
+    <app-event-header [pubkey]="event.pubkey"
       ><span class="event-date">{{ event.created_at | ago }}</span> <app-directory-icon [pubkey]="event.pubkey"></app-directory-icon
-    ></app-profile-header>
+    ></app-event-header>
     <app-content [event]="event"></app-content>
     <!-- <div class="content">
       {{ event.content }}<span *ngIf="event.contentCut">... (message was truncated)</span><br />
@@ -85,9 +85,9 @@
   <div class="events" *ngFor="let event of events; trackBy: trackByFn">
     <span>
       <app-profile-actions [event]="event" [pubkey]="event.pubkey"></app-profile-actions>
-      <app-profile-header [pubkey]="event.pubkey"
+      <app-event-header [pubkey]="event.pubkey"
         ><span class="event-date">{{ event.created_at | ago }}</span> <app-directory-icon [pubkey]="event.pubkey"></app-directory-icon
-      ></app-profile-header>
+      ></app-event-header>
       <app-content [event]="event"></app-content>
       <!-- <div class="content">{{ event.content }}<span *ngIf="event.contentCut">... (message was truncated)</span></div> -->
     </span>

src/app/notes/notes.component.html

@@ -4,10 +4,10 @@
   <div *ngIf="notes.length === 0">Notes are all your saved posts. These can be your own, or they can be copies of public posts made by others.<br /></div>
   <div class="events" *ngFor="let note of notes">
     <app-profile-actions [event]="note"></app-profile-actions>
-    <app-profile-header [pubkey]="note.pubkey"
+    <app-event-header [pubkey]="note.pubkey"
       >Posted: <span class="event-date">{{ note.created_at | ago }}</span
       >, Saved: <span class="event-date">{{ note.saved | ago }}</span>
-    </app-profile-header>
+    </app-event-header>
     <app-content [event]="note"></app-content>
     <!-- <div class="content">
       {{ note.content }}<span *ngIf="note.contentCut">... (message was truncated)</span>

src/app/people/people.component.html

@@ -40,7 +40,7 @@
 
     <div class="events clickable" (click)="navigation.openProfile($event, profile)" *ngFor="let profile of profiles; trackBy: trackByFn">
       <app-profile-actions [profile]="profile"></app-profile-actions>
-      <app-profile-header [profile]="profile"><span class="clickable" *ngIf="profile.created">Started following {{ profile.created | ago }}</span> <app-directory-icon [pubkey]="profile.pubkey"></app-directory-icon></app-profile-header>
+      <app-event-header [profile]="profile"><span class="clickable" *ngIf="profile.created">Started following {{ profile.created | ago }}</span> <app-directory-icon [pubkey]="profile.pubkey"></app-directory-icon></app-event-header>
       <div class="content clickable">
         {{ profile.about }}
       </div>

src/app/profile/profile.component.html

@@ -6,11 +6,12 @@
     </div>
     <div class="profile-page-header-middle">
       <span *ngIf="profile">
-        <h2 class="profile-name marginless" [matTooltip]="npub" matTooltipPosition="above">{{ profile.display_name }}
+        <h2 class="profile-name marginless" [matTooltip]="npub" matTooltipPosition="above">{{ profile.display_name }}</h2>
-        </h2>
         <br />
         <span>
-          <span class="dimmed">{{ profileName }}<span *ngIf="profile.nip05"> / {{ profile.nip05 }}</span></span><br />
+          <span class="dimmed"
+            >{{ profileName }}<span *ngIf="profile.nip05"> / {{ profile.nip05 }}</span></span
+          ><br />
           <!-- <span class="dimmed wrap">{{ npub }}</span> -->
           <p class="wrap" *ngIf="profile.about">{{ profile.about }}</p>
           <!-- <p>{{ profile.lud06 }}</p> -->
@@ -47,8 +48,8 @@
   </span> -->
 </div>
 
-<mat-tab-group>
+<!-- <mat-tab-group>
-  <mat-tab label="Profile">
+  <mat-tab label="Profile"> -->
     <div class="page">
       <mat-card>
         <mat-card-header>
@@ -58,34 +59,47 @@
         </mat-card-header>
         <mat-card-content>
           <p>
-            <mat-form-field appearance="fill" class="input-full-width">
+            <mat-form-field appearance="outline" class="input-full-width">
               <mat-icon matPrefix>alternate_email</mat-icon>
               <mat-label>Name</mat-label>
-              <input matInput type="text" [(ngModel)]="profileName" autocomplete="off" />
+              <input matInput type="text" [(ngModel)]="profileName" />
             </mat-form-field>
           </p>
           <p>
-            <mat-form-field appearance="fill" class="input-full-width">
+            <mat-form-field appearance="outline" class="input-full-width">
               <mat-icon matPrefix>help_outline</mat-icon>
               <mat-label>About</mat-label>
               <textarea matInput type="text" [(ngModel)]="about" autocomplete="off" rows="3"></textarea>
             </mat-form-field>
           </p>
           <p>
-            <mat-form-field appearance="fill" class="input-full-width">
+            <mat-form-field appearance="outline" class="input-full-width">
               <mat-icon matPrefix>image</mat-icon>
               <mat-label>Image</mat-label>
-              <input matInput type="text" [(ngModel)]="imagePath" autocomplete="off" />
+              <input matInput type="text" [(ngModel)]="imagePath" />
+            </mat-form-field>
+          </p>
+          <p>
+            <mat-form-field appearance="outline" class="input-full-width">
+              <mat-icon matPrefix>how_to_reg</mat-icon>
+              <mat-label>E-mail/Domain Identifier (NIP05)</mat-label>
+              <input matInput type="text" [(ngModel)]="imagePath" />
+            </mat-form-field>
+          </p>
+          <p>
+            <mat-form-field appearance="outline" class="input-full-width">
+              <mat-icon matPrefix>currency_bitcoin</mat-icon>
+              <mat-label>Bitcoin Payment Link (LUD06)</mat-label>
+              <input matInput type="text" placeholder="LNURL..." />
             </mat-form-field>
           </p>
-
         </mat-card-content>
         <mat-card-footer align="end">
           <button mat-raised-button color="primary" (click)="updateMetadata()">Save</button>
         </mat-card-footer>
       </mat-card>
     </div>
-  </mat-tab>
+  <!-- </mat-tab>
 
   <mat-tab label="Public key">
     <div class="page">
@@ -117,5 +131,4 @@
       </mat-card>
     </div>
   </mat-tab>
-
+</mat-tab-group> -->
-</mat-tab-group>

src/app/profile/profile.component.ts

@@ -21,7 +21,7 @@ export class ProfileComponent {
   npub!: string;
   profile?: NostrProfileDocument;
   about?: string;
-  imagePath = 'https://notes.blockcore.net/assets/profile.png';
+  imagePath = '';
   profileName = '';
   loading!: boolean;
 

src/app/shared/event-header/event-header.component.ts

@@ -5,11 +5,11 @@ import { Utilities } from 'src/app/services/utilities.service';
 import { Circle, NostrProfile, NostrProfileDocument } from '../../services/interfaces';
 
 @Component({
-  selector: 'app-profile-header',
+  selector: 'app-event-header',
-  templateUrl: './profile-header.component.html',
+  templateUrl: './event-header.component.html',
-  styleUrls: ['./profile-header.component.css'],
+  styleUrls: ['./event-header.component.css'],
 })
-export class ProfileHeaderComponent {
+export class EventHeaderComponent {
   @Input() pubkey: string = '';
   @Input() profile?: NostrProfileDocument;
 

src/app/user/user.component.html

@@ -9,12 +9,10 @@
         <h2 class="profile-name marginless" [matTooltip]="npub" matTooltipPosition="above">{{ profile.display_name }}</h2>
         <br />
         <span>
-          <span class="dimmed">{{ profileName }}<span *ngIf="profile.nip05"> / {{ profile.nip05 }}</span></span
+          <span class="dimmed"
+            >{{ profileName }}<span *ngIf="profile.nip05"> / {{ profile.nip05 }}</span></span
           ><br />
-          <!-- <span class="dimmed wrap">{{ npub }}</span> -->
           <p class="wrap" *ngIf="profile.about">{{ profile.about }}</p>
-          <!-- <p>{{ profile.lud06 }}</p> -->
-          <!-- Tip: <a class="ln-link" [href]="sanitize('lightning:' + profile.lud06)" target="_blank">⚡️</a> -->
           <p *ngIf="profile.website">{{ profile.website }}</p>
         </span>
       </span>
@@ -23,28 +21,11 @@
       <div class="profile-button-container" *ngIf="profile.lud06">
         <a mat-mini-fab color="primary" [href]="sanitize('lightning:' + profile.lud06)">⚡️</a>
       </div>
-      <!--
-        DO WE WANT A FOLLOW SHORTCUT OR ENOUGH WITH "..." MENU?
-        <div class="profile-button-container">
-        <button mat-mini-fab>
-          <mat-icon>add_circle</mat-icon>
-        </button>
-      </div> -->
       <div class="profile-button-container">
         <app-profile-actions [fab]="true" [profile]="profile"></app-profile-actions>
       </div>
     </div>
   </div>
-
-  <!-- <span *ngIf="profile">
-    <h2 class="marginless">{{ profile.display_name }}</h2>
-    <span>
-      {{ profileName }} / {{ profile.nip05 }}<br />
-      <span class="dimmed wrap">{{ npub }}</span>
-      <p *ngIf="profile.about">{{ profile.about }}</p>
-      <p *ngIf="profile.website">{{ profile.website }}</p>
-    </span>
-  </span> -->
 </div>
 
 <div class="page" *ngIf="profile && !profile?.follow">
@@ -83,9 +64,9 @@
 
         <div class="events clickable" (click)="navigation.openEvent($event, event)" *ngFor="let event of events; trackBy: trackByFn">
           <app-profile-actions [event]="event" [pubkey]="event.pubkey"></app-profile-actions>
-          <app-profile-header [pubkey]="event.pubkey"
+          <app-event-header [pubkey]="event.pubkey"
             ><span class="event-date clickable">{{ event.created_at | ago }}</span> <app-directory-icon [pubkey]="event.pubkey"></app-directory-icon
-          ></app-profile-header>
+          ></app-event-header>
           <app-content [event]="event"></app-content>
           <!-- <div class="content clickable">{{ event.content }}<span *ngIf="event.contentCut">... (message was truncated)</span></div> -->
         </div>
@@ -134,9 +115,9 @@
 
         <div class="events clickable" (click)="navigation.openEvent($event, event)" *ngFor="let event of events; trackBy: trackByFn">
           <app-profile-actions [event]="event" [pubkey]="event.pubkey"></app-profile-actions>
-          <app-profile-header [pubkey]="event.pubkey"
+          <app-event-header [pubkey]="event.pubkey"
             ><span class="event-date">{{ event.created_at | ago }}</span> <app-directory-icon [pubkey]="event.pubkey"></app-directory-icon
-          ></app-profile-header>
+          ></app-event-header>
           <app-content [event]="event"></app-content>
           <!-- <div class="content clickable">Reply: {{ event.content }}<span *ngIf="event.contentCut">... (message was truncated)</span></div> -->
         </div>