From 874c117520f9e88617bc406ea3efe70b29a0e973 Mon Sep 17 00:00:00 2001
From: SondreB <sondre@outlook.com>
Date: Sat, 11 Feb 2023 10:21:36 +0100
Subject: [PATCH] Style the event view

---
 src/app/note/note.css           | 13 +++++++++++++
 src/app/note/note.html          | 34 +++++++++++++--------------------
 src/app/services/ui.ts          |  4 ++++
 src/app/shared/event/event.css  |  2 --
 src/app/shared/event/event.html |  4 +---
 5 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/src/app/note/note.css b/src/app/note/note.css
index 8459eae..aa52ba3 100644
--- a/src/app/note/note.css
+++ b/src/app/note/note.css
@@ -23,3 +23,16 @@
 .button-card {
   margin-bottom: 0.4em;
 }
+
+.parent-event {
+}
+
+.has-root {
+  margin-left: 1em;
+  padding-left: 1em;
+  border-left: 2px solid rgba(255, 255, 255, 0.15) !important;
+}
+
+.options-container {
+  margin-bottom: 1em;
+}
diff --git a/src/app/note/note.html b/src/app/note/note.html
index b97ea0f..5eae147 100644
--- a/src/app/note/note.html
+++ b/src/app/note/note.html
@@ -1,6 +1,7 @@
 <!-- <mat-progress-bar *ngIf="!events || events.length == 0" mode="indeterminate"></mat-progress-bar> -->
 
-<div class="feed-page">
+<div class="feed-page" *ngIf="ui.event$ | async as event">
+  <div class="options-container">
   <mat-accordion class="options">
     <mat-expansion-panel>
       <mat-expansion-panel-header>
@@ -12,8 +13,7 @@
       </p>
     </mat-expansion-panel>
   </mat-accordion>
-
-  <br />
+</div>
 
   <!-- <div class="events above-event clickable" (click)="navigation.openEvent($event, event)" *ngIf="thread.above$ | async as event">
     <div class="events-header">
@@ -29,19 +29,20 @@
     <app-event-thread [event]="event"></app-event-thread>
   </div> -->
 
-  <div class="current-event events noclick" *ngIf="ui.event$ | async as event">
-    <mat-card *ngIf="event.rootEventId" class="button-card">
-      <button mat-flat-button (click)="open(event.rootEventId)"><mat-icon>keyboard_double_arrow_up</mat-icon> {{event.rootEventId}}</button>
-    </mat-card>
+  <mat-card *ngIf="event.rootEventId" class="button-card">
+    <button mat-flat-button (click)="open(event.rootEventId)"><mat-icon>keyboard_double_arrow_up</mat-icon>View Thread</button>
+  </mat-card>
+
+  <div class="parent-event" *ngIf="ui.parentEvent$ | async as parentEvent">
+    <app-event [event]="parentEvent"></app-event>
+  </div>
+
+  <div class="current-event events2 noclick" [ngClass]="{'has-root': event.rootEventId, 'no-lines': !optionsService.values.showLines, 'lines': optionsService.values.showLines }">
 
     <mat-card *ngIf="event.parentEventId" class="button-card">
-      <button mat-flat-button (click)="open(event.parentEventId)"><mat-icon>keyboard_arrow_up</mat-icon> {{event.parentEventId}}</button>
+      <button mat-flat-button (click)="open(event.parentEventId)"><mat-icon>keyboard_arrow_up</mat-icon>View Parent</button>
     </mat-card>
 
-    <span *ngIf="ui.parentEvent$ | async as event">
-      <app-event [event]="event"></app-event>
-    </span>
-
     <div class="events-header">
       <app-event-header [pubkey]="event.pubkey"><app-date [date]="event.created_at"></app-date> <app-directory-icon [pubkey]="event.pubkey"></app-directory-icon></app-event-header>
       <app-event-actions [event]="event" [pubkey]="event.pubkey"></app-event-actions>
@@ -49,16 +50,7 @@
     <app-content class="thread-content" [ngClass]="{ 'no-lines': !optionsService.values.showLines, 'lines': optionsService.values.showLines }" [event]="event"></app-content>
     <!-- <app-event-reactions class="thread-reactions" [threadEntry]="thread.getTreeEntry(thread.threadId)"></app-event-reactions> -->
     <app-event-buttons [event]="event"></app-event-buttons>
-    <!-- <br />
-    e: {{event.id}}
-    <br />
-    p: {{event.pubkey}}
-    <br />
-    t: {{event.tags | json}}<br /> -->
-
     <app-event-thread [event]="event"></app-event-thread>
-
-    <!-- <app-event-thread [threadEntry]="thread.getTreeEntry(thread.threadId)"></app-event-thread> -->
   </div>
 </div>
 <mat-divider></mat-divider>
diff --git a/src/app/services/ui.ts b/src/app/services/ui.ts
index 954f9e8..36f68ad 100644
--- a/src/app/services/ui.ts
+++ b/src/app/services/ui.ts
@@ -582,6 +582,10 @@ export class UIService {
       event.replyEventId = eTags[1][1];
     }
 
+    if (event.rootEventId == event.parentEventId) {
+      event.rootEventId = undefined;
+    }
+
     return event;
   }
 
diff --git a/src/app/shared/event/event.css b/src/app/shared/event/event.css
index b873454..c06a532 100644
--- a/src/app/shared/event/event.css
+++ b/src/app/shared/event/event.css
@@ -1,6 +1,5 @@
 .thread-event {
   margin-left: 1em;
-  /* border-left: 2px solid rgba(255, 255, 255, 0.15); */
   padding-top: 0em;
   padding-left: 1em;
 }
@@ -8,6 +7,5 @@
 .thread-content {
   margin-left: 1em;
   padding-left: 1em;
-  /* border-left: 2px solid rgba(255, 255, 255, 0.15) !important; */
   display: block;
 }
diff --git a/src/app/shared/event/event.html b/src/app/shared/event/event.html
index e56261e..47d4991 100644
--- a/src/app/shared/event/event.html
+++ b/src/app/shared/event/event.html
@@ -1,5 +1,4 @@
-<div class="thread-event" *ngIf="event" [ngClass]="{ 'no-lines': !optionsService.values.showLines, lines: optionsService.values.showLines }">
-  <!-- <span *ngIf="thread.getEvent(entry.id) as event"> -->
+<div class="thread-event2" *ngIf="event" [ngClass]="{ 'no-lines2': !optionsService.values.showLines, 'lines2': optionsService.values.showLines }">
   <span>
     <div class="events-header">
       <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-event-header>
@@ -8,6 +7,5 @@
     <app-content class="thread-content" [ngClass]="{ 'no-lines': !optionsService.values.showLines, lines: optionsService.values.showLines }" [displayRepliesTo]="false" [event]="event"></app-content>
     <!-- <app-event-reactions [threadEntry]="thread.getTreeEntry(entry.id)"></app-event-reactions> -->
     <app-event-buttons [event]="event"></app-event-buttons>
-    <!-- <app-event-thread [threadEntry]="thread.getTreeEntry(entry.id)"></app-event-thread> -->
   </span>
 </div>