New feed note layout

PrimalHQ · May 28, 2024 · b4857db · b4857db
1 parent 5883af3
commit b4857db
Show file tree

Hide file tree

Showing 3 changed files with 185 additions and 5 deletions.
diff --git a/src/components/Note/Note.module.scss b/src/components/Note/Note.module.scss
@@ -1,4 +1,115 @@
 .note {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px;
+  margin: 0px;
+
+  text-decoration: none;
+  color: unset;
+  background-color: var(--background-site);
+  border: none;
+  border-bottom: 1px solid var(--devider);
+  border-radius: 0;
+
+  -webkit-user-select: text;
+  -moz-select: text;
+  -ms-select: text;
+  user-select: text;
+
+  width: 100%;
+
+  &.parent {
+    border: none;
+  }
+
+  &.reactionNote {
+    background: none;
+    border-bottom: 1px solid var(--subtile-devider);
+  }
+
+  .userHeader {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+    gap: 8px;
+  }
+
+  .header {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+
+    .repostedBy {
+      padding-bottom: 8px;
+      display: flex;
+      >span {
+        >a {
+          margin-inline: 5px;
+          color: var(--text-tertiary);
+          text-decoration: none;
+        }
+        color: var(--text-tertiary);
+        font-size: 14px;
+        line-height: 14px;
+        font-weight: 400;
+        >span {
+          text-transform: lowercase;
+        }
+      }
+    }
+  }
+
+  .message {
+    color: var(--text-primary);
+    word-break: break-word;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 20px;
+    margin-top: 4px;
+    margin-bottom: 12px;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .replyingTo {
+    display: flex;
+    font-size: 15px;
+    font-weight: 400;
+    line-height: 20px;
+    margin-top: 6px;
+    max-width: 518px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    .label {
+      color: var(--text-primary);
+    }
+    a {
+      max-width: 440px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .author {
+      display: inline-block;
+      color: var(--accent-links);
+      text-decoration: none;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.noteThread {
   position: relative;
   display: flex;
   flex-direction: column;

diff --git a/src/components/Note/Note.tsx b/src/components/Note/Note.tsx
@@ -49,7 +49,7 @@ const Note: Component<{
   id?: string,
   parent?: boolean,
   shorten?: boolean,
-  noteType?: 'feed' | 'primary' | 'notification' | 'reaction'
+  noteType?: 'feed' | 'primary' | 'notification' | 'reaction' | 'thread'
   onClick?: () => void,
   quoteCount?: number,
 }> = (props) => {
@@ -313,7 +313,7 @@ const Note: Component<{
           <div class={styles.content}>
 
             <div class={styles.message}>
-              <ParsedNote note={props.note} width={Math.min(574, window.innerWidth)} />
+              <ParsedNote note={props.note} width={Math.min(640, window.innerWidth)} />
             </div>
 
             <NoteTopZaps
@@ -351,7 +351,6 @@ const Note: Component<{
       </Match>
 
       <Match when={noteType() === 'feed'}>
-
         <A
           id={props.id}
           class={`${styles.note} ${props.parent ? styles.parent : ''}`}
@@ -360,6 +359,67 @@ const Note: Component<{
           data-event={props.note.post.id}
           data-event-bech32={props.note.post.noteId}
           draggable={false}
+        >
+          <div class={styles.header}>
+            <Show when={repost()}>
+              <NoteRepostHeader note={props.note} />
+            </Show>
+          </div>
+          <div class={styles.userHeader}>
+            <A href={`/p/${props.note.user.npub}`}>
+              <Avatar user={props.note.user} size="vs" />
+            </A>
+
+            <NoteAuthorInfo
+              author={props.note.user}
+              time={props.note.post.created_at}
+            />
+
+            <div class={styles.upRightFloater}>
+              <NoteContextTrigger
+                ref={noteContextMenu}
+                onClick={onContextMenuTrigger}
+              />
+            </div>
+          </div>
+
+          <NoteReplyToHeader note={props.note} />
+
+          <div class={styles.message}>
+            <ParsedNote
+              note={props.note}
+              shorten={props.shorten}
+              width={Math.min(640, window.innerWidth - 72)}
+            />
+          </div>
+
+          <NoteTopZapsCompact
+            note={props.note}
+            action={() => openReactionModal('zaps')}
+            topZaps={reactionsState.topZapsFeed}
+            topZapLimit={4}
+          />
+
+          <NoteFooter
+            note={props.note}
+            state={reactionsState}
+            updateState={updateReactionsState}
+            customZapInfo={customZapInfo()}
+            onZapAnim={addTopZapFeed}
+            wide={true}
+          />
+        </A>
+      </Match>
+
+      <Match when={noteType() === 'thread'}>
+        <A
+          id={props.id}
+          class={`${styles.noteThread} ${props.parent ? styles.parent : ''}`}
+          href={`/e/${props.note?.post.noteId}`}
+          onClick={() => navToThread(props.note)}
+          data-event={props.note.post.id}
+          data-event-bech32={props.note.post.noteId}
+          draggable={false}
         >
           <div class={styles.header}>
             <Show when={repost()}>

diff --git a/src/pages/NoteThread.tsx b/src/pages/NoteThread.tsx
@@ -187,7 +187,12 @@ const NoteThread: Component<{ noteId: string }> = (props) => {
             <For each={parentNotes()}>
               {note =>
                 <div>
-                  <Note note={note} parent={true} shorten={true} />
+                  <Note
+                    note={note}
+                    parent={true}
+                    shorten={true}
+                    noteType="thread"
+                  />
                 </div>
               }
             </For>
@@ -224,7 +229,11 @@ const NoteThread: Component<{ noteId: string }> = (props) => {
             <For each={replyNotes()}>
               {note =>
                 <div>
-                  <Note note={note} shorten={true} />
+                  <Note
+                    note={note}
+                    shorten={true}
+                    noteType="thread"
+                  />
                 </div>
               }
             </For>