Add a profile header on user view

src/app/note/note.component.css

@@ -1,4 +0,0 @@
-.original-post {
-    margin-bottom: 2em;
-    background-color: #303030;
-}

src/app/services/interfaces.ts

@@ -72,6 +72,12 @@ export interface NostrProfile {
 
   /** https://github.com/nostr-protocol/nips/blob/master/05.md */
   nip05: string;
+
+  lud06: string;
+
+  display_name: string;
+
+  website: string;
 }
 
 export interface NostrSubscription extends Sub {

src/app/services/profile.service.ts

@@ -138,6 +138,9 @@ export class ProfileService {
         about: existingProfile ? existingProfile.about : '',
         picture: existingProfile ? existingProfile.picture : '',
         nip05: existingProfile ? existingProfile.nip05 : '',
+        lud06: existingProfile ? existingProfile.lud06 : '',
+        display_name: existingProfile ? existingProfile.display_name : '',
+        website: existingProfile ? existingProfile.website : '',
         verifications: existingProfile ? existingProfile.verifications : [],
         pubkey: pubkey,
         follow: follow,
@@ -282,6 +285,9 @@ export class ProfileService {
       profile.name = document.name;
       profile.about = document.about;
       profile.nip05 = document.nip05;
+      profile.lud06 = document.lud06;
+      profile.website = document.website;
+      profile.display_name = document.display_name;
       profile.picture = document.picture;
     }
 

src/app/shared/profile-actions/profile-actions.component.ts

@@ -73,6 +73,9 @@ export class ProfileActionsComponent {
       about: this.profile.about,
       nip05: this.profile.nip05,
       picture: this.profile.picture,
+      website: this.profile.website,
+      lud06: this.profile.lud06,
+      display_name: this.profile.display_name,
     };
 
     this.copy(JSON.stringify(profile));

src/app/user/user.component.html

@@ -1,3 +1,22 @@
+<div class="page">
+  <img *ngIf="profile?.follow" class="profile-image-large profile-image-follow" [style.borderColor]="circle?.color" matTooltipPosition="above" [src]="imagePath" />
+  <img *ngIf="!profile?.follow" class="profile-image-large" matTooltipPosition="above" [src]="imagePath" />
+
+  <span *ngIf="profile">
+    <h2 class="marginless">{{ profile.display_name }}</h2>
+    <span>
+      {{ profileName }} / {{ profile.nip05 }}<br />
+      <span class="dimmed wrap">{{ npub }}</span>
+      <p>{{ profile.about }}</p>
+      <!-- <p>{{ profile.lud06 }}</p> -->
+      Tip: <a class="ln-link" [href]="sanitize('lightning:' + profile.lud06)" target="_blank">⚡️</a>
+      <p>{{ profile.website }}</p>
+    </span>
+  </span>
+
+  
+</div>
+
 <mat-tab-group>
   <mat-tab label="Notes">
     <span *ngIf="userEvents$ | async as events">

src/app/user/user.component.ts

@@ -5,13 +5,15 @@ import { Utilities } from '../services/utilities.service';
 import { relayInit, Relay } from 'nostr-tools';
 import * as moment from 'moment';
 import { DataValidation } from '../services/data-validation.service';
-import { NostrEvent, NostrEventDocument, NostrProfile, NostrProfileDocument } from '../services/interfaces';
+import { Circle, NostrEvent, NostrEventDocument, NostrProfile, NostrProfileDocument } from '../services/interfaces';
 import { ProfileService } from '../services/profile.service';
 import { SettingsService } from '../services/settings.service';
 import { FeedService } from '../services/feed.service';
 import { map, Observable } from 'rxjs';
 import { OptionsService } from '../services/options.service';
 import { NavigationService } from '../services/navigation.service';
+import { CirclesService } from '../services/circles.service';
+import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-user',
@@ -19,7 +21,13 @@ import { NavigationService } from '../services/navigation.service';
 })
 export class UserComponent {
   pubkey?: string | null;
+  npub?: string;
   profile?: NostrProfileDocument;
+  about?: string;
+  imagePath = '/assets/profile.png';
+  profileName = '';
+  circle?: Circle;
+  muted? = false;
 
   userEvents$ = this.feedService.rootEvents$.pipe(
     map((data) => {
@@ -42,6 +50,7 @@ export class UserComponent {
   );
 
   constructor(
+    private sanitizer: DomSanitizer,
     public navigation: NavigationService,
     public appState: ApplicationState,
     private activatedRoute: ActivatedRoute,
@@ -50,6 +59,7 @@ export class UserComponent {
     public feedService: FeedService,
     public profiles: ProfileService,
     private validator: DataValidation,
+    private circleService: CirclesService,
     private utilities: Utilities,
     private router: Router
   ) {
@@ -66,12 +76,34 @@ export class UserComponent {
       this.pubkey = pubkey;
       this.profile = await this.profiles.getProfile(pubkey);
 
-      if (this.profile) {
+      console.log(this.profile);
+
+      if (!this.profile) {
+        this.npub = this.utilities.getNostrIdentifier(pubkey);
+        this.profileName = '';
+        this.imagePath = '/assets/profile.png';
+
+        // If the user has name in their profile, show that and not pubkey.
+        this.circle = undefined;
+        this.muted = false;
+        this.appState.title = `@${this.npub}`;
+      } else {
+        this.npub = this.utilities.getNostrIdentifier(pubkey);
+        this.profileName = this.profile.name;
+        this.imagePath = this.profile.picture || '/assets/profile.png';
+
+        // If the user has name in their profile, show that and not pubkey.
+        this.circle = await this.circleService.getCircle(this.profile.circle);
+        this.muted = this.profile.mute;
         this.appState.title = `@${this.profile.name}`;
       }
     });
   }
 
+  sanitize(url: string) {
+    return this.sanitizer.bypassSecurityTrustUrl(url);
+  }
+
   ngOnInit() {
     // if (this.pubkey) {
     // console.log('PIPING EVENTS...');

src/styles.scss

@@ -208,6 +208,13 @@ mat-sidenav-content mat-toolbar {
 .parent-events {
   // margin-left: 3em;
   background-color: #a30770 !important;
+  background-color: #303030 !important;
+}
+
+.original-post {
+  margin-bottom: 2em;
+  background-color: #303030 !important;
+  background-color: #a30770 !important;
 }
 
 .events {
@@ -244,6 +251,14 @@ mat-sidenav-content mat-toolbar {
 .options {
 }
 
+.ln-link {
+  text-decoration: none;
+}
+
+.ln-link:hover {
+  
+}
+
 .event-header {
   display: grid;
   grid-template-columns: 48px 1fr;
@@ -275,6 +290,12 @@ mat-sidenav-content mat-toolbar {
   border-radius: 50%;
 }
 
+.profile-image-large {
+  width: 256px;
+  height: 256px;
+  border-radius: 50%;
+}
+
 .event-header .name {
   grid-area: name;
   overflow: hidden;