Add "Content" view but it's called "Details"

src/app/app.module.ts

@@ -114,6 +114,7 @@ import { AboutModule } from './about/about.module';
 import { EventComponent } from './shared/event/event';
 import { NotificationsComponent } from './notifications/notifications';
 import { NotificationLabelComponent } from './shared/notification-label/notification-label';
+import { RelayListComponent } from './shared/relay-list/relay-list';
 
 @NgModule({
   declarations: [
@@ -183,6 +184,7 @@ import { NotificationLabelComponent } from './shared/notification-label/notifica
     EventComponent,
     NotificationsComponent,
     NotificationLabelComponent,
+    RelayListComponent
   ],
   imports: [
     AboutModule,

src/app/people/people.css

@@ -23,6 +23,10 @@
   margin-top: 1em;
 }
 
+.people-list-2 {
+  display: block;
+}
+
 /* .people-list > * {
   flex: 1 1 240px;
 } */

src/app/people/people.html

@@ -49,10 +49,10 @@
             <mat-option [value]="6">Large icons</mat-option>
             <mat-option [value]="5">Medium icons</mat-option>
             <mat-option [value]="4">Small icons</mat-option>
-            <mat-option [value]="3">List</mat-option>
+            <!-- <mat-option [value]="3">List</mat-option> -->
             <mat-option [value]="2">Details</mat-option>
             <mat-option [value]="0">Tiles</mat-option>
-            <mat-option [value]="1">Content</mat-option>
+            <!-- <mat-option [value]="1">Content</mat-option> -->
           </mat-select>
         </mat-form-field>
 
@@ -67,7 +67,7 @@
     </mat-accordion>
   </div>
 
-  <div class="people-list">
+  <div class="people-list" [ngClass]="['people-list-' + optionsService.values.peopleDisplayView]">
     <ng-template [ngIf]="!loading">
       <ng-template [ngIf]="optionsService.values.peopleDisplayView == 0 || optionsService.values.peopleDisplayView == null">
         <mat-card class="people-card people clickable" (click)="navigation.openProfile($event, profile)" *ngFor="let profile of sortedItems; trackBy: trackByFn">
@@ -82,14 +82,27 @@
           <div class="content clickable">{{ profile.about }}</div>
         </mat-card>
       </ng-template>
+
+      <ng-template [ngIf]="optionsService.values.peopleDisplayView == 1">
+        <app-event-header [iconSize]="'small'" [displayName]="false" [displayContent]="false" *ngFor="let profile of sortedItems; trackBy: trackByFn" [profile]="profile"></app-event-header>
+      </ng-template>
+
+      <ng-template [ngIf]="optionsService.values.peopleDisplayView == 2">
+        <app-event-header [listType]="'details'" [iconSize]="'small'" [displayName]="true" [displayContent]="true" *ngFor="let profile of sortedItems; trackBy: trackByFn" [profile]="profile"></app-event-header>
+      </ng-template>
+
+      <ng-template [ngIf]="optionsService.values.peopleDisplayView == 3">
+        <app-event-header [iconSize]="'small'" [displayName]="false" [displayContent]="false" *ngFor="let profile of sortedItems; trackBy: trackByFn" [profile]="profile"></app-event-header>
+      </ng-template>
+
       <ng-template [ngIf]="optionsService.values.peopleDisplayView == 4">
-        <app-event-header [iconSize]="'small'" [displayOnlyIcon]="true" [displayName]="false" [displayContent]="false" *ngFor="let profile of sortedItems; trackBy: trackByFn" [profile]="profile"></app-event-header>
+        <app-event-header [listType]="'icon'" [iconSize]="'small'" [displayName]="false" [displayContent]="false" *ngFor="let profile of sortedItems; trackBy: trackByFn" [profile]="profile"></app-event-header>
       </ng-template>
       <ng-template [ngIf]="optionsService.values.peopleDisplayView == 5">
-        <app-event-header [iconSize]="'medium'" [displayOnlyIcon]="true" [displayName]="false" [displayContent]="false" *ngFor="let profile of sortedItems; trackBy: trackByFn" [profile]="profile"></app-event-header>
+        <app-event-header [listType]="'icon'" [iconSize]="'medium'" [displayName]="false" [displayContent]="false" *ngFor="let profile of sortedItems; trackBy: trackByFn" [profile]="profile"></app-event-header>
       </ng-template>
       <ng-template [ngIf]="optionsService.values.peopleDisplayView == 6">
-        <app-event-header [iconSize]="'large'" [displayOnlyIcon]="true" [displayName]="false" [displayContent]="false" *ngFor="let profile of sortedItems; trackBy: trackByFn" [profile]="profile"></app-event-header>
+        <app-event-header [listType]="'icon'" [iconSize]="'large'" [displayName]="false" [displayContent]="false" *ngFor="let profile of sortedItems; trackBy: trackByFn" [profile]="profile"></app-event-header>
       </ng-template>
     </ng-template>
 

src/app/services/relay.ts

@@ -685,21 +685,6 @@ export class RelayService {
     this.#replyEventsChanged.next(this.events);
   }
 
-  getRelayUrls(relays: any) {
-    let preparedRelays = relays;
-
-    if (Array.isArray(preparedRelays)) {
-      preparedRelays = {};
-
-      for (let i = 0; i < relays.length; i++) {
-        preparedRelays[relays[i]] = {};
-      }
-    }
-
-    const entries = Object.keys(preparedRelays);
-    return entries;
-  }
-
   /** Takes relay in the format used for extensions and adds to persistent storage. */
   async appendRelays(relays: any) {
     let preparedRelays = relays;

src/app/services/utilities.ts

@@ -103,6 +103,21 @@ export class Utilities {
     return undefined;
   }
 
+  getRelayUrls(relays: any) {
+    let preparedRelays = relays;
+
+    if (Array.isArray(preparedRelays)) {
+      preparedRelays = {};
+
+      for (let i = 0; i < relays.length; i++) {
+        preparedRelays[relays[i]] = {};
+      }
+    }
+
+    const entries = Object.keys(preparedRelays);
+    return entries;
+  }
+
   getNostrIdentifier(pubkey: string) {
     const key = this.hexToArray(pubkey);
     const converted = this.convertToBech32(key, 'npub');

src/app/shared/event-header/event-header.html

@@ -1,9 +1,9 @@
 <!-- <span class="material-icons network-status" [ngClass]="class">circle</span> -->
 
-<div class="event-header" [ngClass]="{ 'event-header-only-icon': displayOnlyIcon }">
+<div class="event-header" [ngClass]="['event-header-' + listType]">
   <div class="icon" [ngClass]="['icon-' + iconSize]">
     <a [routerLink]="['/p', pubkey]">
-      <img onerror="this.src='/assets/profile.png'" *ngIf="profile?.status == 1 || profile?.status == 2" class="profile-image-follow" [matTooltip]="tooltip" [style.borderColor]="circle?.color" matTooltipPosition="above" [src]="imagePath" />
+      <img onerror="this.src='/assets/profile.png'" *ngIf="profile?.status == 1 || profile?.status == 2" class="profile-image profile-image-follow" [matTooltip]="tooltip" [style.borderColor]="circle?.color" matTooltipPosition="above" [src]="imagePath" />
       <img onerror="this.src='/assets/profile.png'" *ngIf="profile?.status != 1 && profile?.status != 2" class="profile-image" [matTooltip]="tooltip" matTooltipPosition="above" [src]="imagePath" />
       <!-- <app-profile-image [publicKey]="event.pubkey"></app-profile-image> -->
     </a>
@@ -17,6 +17,17 @@
   </div>
   <div *ngIf="displayContent" class="date clickable">
     <ng-content></ng-content>
+    <div *ngIf="listType == 'details' && profile">
+      <div *ngIf="profile.display_name">Display Name: {{profile.display_name}}</div>
+      <div *ngIf="profile.name">Name: {{profile.name}}</div>
+      <div *ngIf="profile.nip05">NIP05: {{profile.nip05}}</div>
+      <div *ngIf="profile.website">Website: {{profile.website}}</div>
+      <div *ngIf="profile.lud06">lud06: {{profile.lud06}}</div>
+      <div *ngIf="profile.lud16">lud16: {{profile.lud16}}</div>
+      <div *ngIf="profile.following">following: {{profile.following?.length}}</div>
+      <div *ngIf="profile.about">About: {{profile.about}}</div>
+      <div *ngIf="profile.relays">Relays: <app-relay-list [relays]="profile.relays"></app-relay-list></div>
+    </div>
     <!-- <span class="event-date" [matTooltip]="profile.id!" matTooltipPosition="below">{{ profile.created_at | ago }}</span>
       <app-directory-icon [publicKey]="profile.pubkey"></app-directory-icon> -->
   </div>

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

@@ -14,8 +14,8 @@ export class EventHeaderComponent {
   @Input() profile?: NostrProfileDocument;
   @Input() displayName: boolean = true;
   @Input() displayContent: boolean = true;
-  @Input() displayOnlyIcon: boolean = false;
   @Input() iconSize: string = 'small';
+  @Input() listType: string = 'list';
 
   imagePath = '/assets/profile.png';
   tooltip = '';

src/app/shared/import-sheet/import-sheet.ts

@@ -3,21 +3,28 @@ import { MatBottomSheetRef, MAT_BOTTOM_SHEET_DATA } from '@angular/material/bott
 import { Router } from '@angular/router';
 import { ProfileService } from 'src/app/services/profile';
 import { RelayService } from 'src/app/services/relay';
-import { sleep } from 'src/app/services/utilities';
+import { sleep, Utilities } from 'src/app/services/utilities';
 
 @Component({
   selector: 'app-import-sheet',
   templateUrl: 'import-sheet.html',
 })
 export class ImportSheet {
-  constructor(private relayService: RelayService, private router: Router, private profileService: ProfileService, @Inject(MAT_BOTTOM_SHEET_DATA) public data: any, private bottomSheetRef: MatBottomSheetRef<ImportSheet>) {}
+  constructor(
+    private utilities: Utilities,
+    private relayService: RelayService,
+    private router: Router,
+    private profileService: ProfileService,
+    @Inject(MAT_BOTTOM_SHEET_DATA) public data: any,
+    private bottomSheetRef: MatBottomSheetRef<ImportSheet>
+  ) {}
 
   async import(event: MouseEvent) {
     this.bottomSheetRef.dismiss();
     event.preventDefault();
 
     if (this.data.relaysCount > 0) {
-      const relayUrls = this.relayService.getRelayUrls(this.data.relays);
+      const relayUrls = this.utilities.getRelayUrls(this.data.relays);
 
       await this.relayService.deleteRelays(relayUrls);
 

src/app/shared/relay-list/relay-list.html

@@ -0,0 +1 @@
+<span *ngFor="let relay of relayNames; let i=index; let isLast=last"> {{ relay }}<span *ngIf="!isLast">, </span></span>

src/app/shared/relay-list/relay-list.ts

@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+import { Utilities } from 'src/app/services/utilities';
+
+@Component({
+  selector: 'app-relay-list',
+  templateUrl: './relay-list.html',
+})
+export class RelayListComponent {
+  @Input() relays: any;
+  relayNames: string[] = [];
+
+  constructor(private utilities: Utilities) {}
+
+  async ngOnInit() {
+    this.relayNames = [];
+
+    if (this.relays == null) {
+      return;
+    }
+
+    const relayJson = JSON.parse(this.relays);
+    this.relayNames = this.utilities.getRelayUrls(relayJson);
+  }
+}

src/styles.scss

@@ -498,7 +498,7 @@ mat-sidenav-content mat-toolbar {
 .event-header {
   display: grid;
   grid-template-columns: 48px 1fr;
-  grid-template-rows: 1fr 1fr;
+  grid-template-rows: 24px 1fr;
   gap: 0 1em;
   // column-gap: 1em;
   grid-template-areas:
@@ -506,10 +506,19 @@ mat-sidenav-content mat-toolbar {
     "icon date";
 }
 
-.event-header-only-icon {
+.event-header-list {
+
+}
+
+.event-header-icon {
   display: inline-block;
 }
 
+.event-header-details {
+  margin-bottom: 1em;
+  // width: 100%;
+}
+
 .event-header a {
   text-decoration: none;
 }