From 3b6b1458f25bef3ee613c268d7bde59865059bc4 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Thu, 19 Jan 2023 15:21:13 +0000
Subject: [PATCH 1/3] feat: lazy load profile preview

---
 src/element/ProfilePreview.css |  1 +
 src/element/ProfilePreview.tsx | 16 ++++++++++------
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/element/ProfilePreview.css b/src/element/ProfilePreview.css
index 81524b46..8b98ed1f 100644
--- a/src/element/ProfilePreview.css
+++ b/src/element/ProfilePreview.css
@@ -2,6 +2,7 @@
     display: flex;
     padding: 5px 0;
     align-items: center;
+    min-height: 40px;
 }
 
 .profile-preview .pfp {
diff --git a/src/element/ProfilePreview.tsx b/src/element/ProfilePreview.tsx
index e91b6d1b..a209e871 100644
--- a/src/element/ProfilePreview.tsx
+++ b/src/element/ProfilePreview.tsx
@@ -5,6 +5,7 @@ import ProfileImage from "./ProfileImage";
 import FollowButton from "./FollowButton";
 import useProfile from "../feed/ProfileFeed";
 import { HexKey } from "../nostr";
+import { useInView } from "react-intersection-observer";
 
 export interface ProfilePreviewProps {
     pubkey: HexKey,
@@ -16,18 +17,21 @@ export interface ProfilePreviewProps {
 export default function ProfilePreview(props: ProfilePreviewProps) {
     const pubkey = props.pubkey;
     const user = useProfile(pubkey)?.get(pubkey);
+    const { ref, inView } = useInView({ triggerOnce: true });
     const options = {
         about: true,
         ...props.options
     };
 
     return (
-        <div className="profile-preview">
-            <ProfileImage pubkey={pubkey} subHeader=
-                {options.about ? <div className="f-ellipsis about">
-                    {user?.about}
-                </div> : undefined} />
-            {props.actions ?? <FollowButton pubkey={pubkey} className="ml5" />}
+        <div className="profile-preview" ref={ref}>
+            {inView && <>
+                <ProfileImage pubkey={pubkey} subHeader=
+                    {options.about ? <div className="f-ellipsis about">
+                        {user?.about}
+                    </div> : undefined} />
+                {props.actions ?? <FollowButton pubkey={pubkey} className="ml5" />}
+            </>}
         </div>
     )
 }
\ No newline at end of file
-- 
2.45.2


From 73afdd36ffa3adced8d2dab8ef555674c19d442f Mon Sep 17 00:00:00 2001
From: LiranCohen <c.liran.c@gmail.com>
Date: Thu, 19 Jan 2023 10:23:51 -0500
Subject: [PATCH 2/3] Modified self-dm to be a "Note to Self" (#89)

* added note to self feature

* remove nip-5 gradient from 13x domain
---
 src/element/NoteToSelf.css | 43 +++++++++++++++++++++++++++++
 src/element/NoteToSelf.tsx | 56 ++++++++++++++++++++++++++++++++++++++
 src/pages/ChatPage.tsx     |  7 ++++-
 src/pages/MessagesPage.tsx | 15 +++++++++-
 4 files changed, 119 insertions(+), 2 deletions(-)
 create mode 100644 src/element/NoteToSelf.css
 create mode 100644 src/element/NoteToSelf.tsx

diff --git a/src/element/NoteToSelf.css b/src/element/NoteToSelf.css
new file mode 100644
index 00000000..b33de862
--- /dev/null
+++ b/src/element/NoteToSelf.css
@@ -0,0 +1,43 @@
+.nts {
+    display: flex;
+    align-items: center;
+}
+
+.note-to-self {
+  margin-left: 5px;
+  margin-top: 3px;
+}
+
+.nts .avatar-wrapper {
+  margin-right: 8px;
+}
+
+.nts .avatar {
+    border-width: 1px;
+    width: 40px;
+    height: 40px;
+}
+.nts .avatar.clickable {
+  cursor: pointer;
+}
+
+.nts a {
+    text-decoration: none;
+}
+
+.nts a:hover {
+    text-decoration: underline;
+    text-decoration-color: var(--gray-superlight);
+}
+
+.nts .name {
+  margin-top: -.2em;
+  display: flex;
+  flex-direction: column;
+  font-weight: bold;
+}
+
+.nts .nip05 {
+  margin: 0;
+  margin-top: -.2em;
+}
diff --git a/src/element/NoteToSelf.tsx b/src/element/NoteToSelf.tsx
new file mode 100644
index 00000000..79d963ee
--- /dev/null
+++ b/src/element/NoteToSelf.tsx
@@ -0,0 +1,56 @@
+import "./NoteToSelf.css";
+
+import { Link, useNavigate } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBook, faCertificate } from "@fortawesome/free-solid-svg-icons"
+import useProfile from "../feed/ProfileFeed";
+import Nip05 from "./Nip05";
+import { profileLink } from "../Util";
+
+export interface NoteToSelfProps {
+    pubkey: string,
+    clickable?: boolean
+    className?: string,
+    link?: string
+};
+
+function NoteLabel({pubkey, link}:NoteToSelfProps) {
+    const user = useProfile(pubkey)?.get(pubkey);
+    return (
+        <div>
+            Note to Self <FontAwesomeIcon icon={faCertificate} size="xs" />
+            {user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
+        </div>
+    )
+}
+
+export default function NoteToSelf({ pubkey, clickable, className, link }: NoteToSelfProps) {
+    const navigate = useNavigate();
+
+    const clickLink = () => {
+        if(clickable) {
+            navigate(link ?? profileLink(pubkey))
+        }
+    }
+
+    return (
+        <div className={`nts${className ? ` ${className}` : ""}`}>
+            <div className="avatar-wrapper">
+                <div className={`avatar${clickable ? " clickable" : ""}`}>
+                    <FontAwesomeIcon onClick={clickLink} className="note-to-self" icon={faBook} size="2xl" />
+                </div>
+            </div>
+            <div className="f-grow">
+                <div className="name">
+                    {clickable && (
+                        <Link to={link ?? profileLink(pubkey)}>
+                            <NoteLabel pubkey={pubkey} />
+                        </Link>
+                    ) || (
+                        <NoteLabel pubkey={pubkey} />
+                    )}
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/src/pages/ChatPage.tsx b/src/pages/ChatPage.tsx
index ad26d15b..4e13600f 100644
--- a/src/pages/ChatPage.tsx
+++ b/src/pages/ChatPage.tsx
@@ -11,6 +11,7 @@ import useEventPublisher from "../feed/EventPublisher";
 import DM from "../element/DM";
 import { RawEvent } from "../nostr";
 import { dmsInChat, isToSelf } from "./MessagesPage";
+import NoteToSelf from "../element/NoteToSelf";
 
 type RouterParams = {
     id: string
@@ -58,7 +59,11 @@ export default function ChatPage() {
 
     return (
         <>
-            <ProfileImage pubkey={id} className="f-grow mb10" />
+            {id === pubKey && (
+                <NoteToSelf className="f-grow mb-10" pubkey={id} />
+            ) || (
+                <ProfileImage pubkey={id} className="f-grow mb10" />
+            )}
             <div className="dm-list" ref={dmListRef}>
                 <div>
                     {sortedDms.map(a => <DM data={a} key={a.id} />)}
diff --git a/src/pages/MessagesPage.tsx b/src/pages/MessagesPage.tsx
index 09592e69..a2fcf2ec 100644
--- a/src/pages/MessagesPage.tsx
+++ b/src/pages/MessagesPage.tsx
@@ -7,6 +7,7 @@ import ProfileImage from "../element/ProfileImage";
 import { hexToBech32 } from "../Util";
 import { incDmInteraction } from "../state/Login";
 import { RootState } from "../state/Store";
+import NoteToSelf from "../element/NoteToSelf";
 
 type DmChat = {
     pubkey: HexKey,
@@ -24,7 +25,16 @@ export default function MessagesPage() {
         return extractChats(dms, myPubKey!);
     }, [dms, myPubKey, dmInteraction]);
 
+    function noteToSelf(chat: DmChat) {
+        return (
+            <div className="flex mb10" key={chat.pubkey}>
+                <NoteToSelf clickable={true} className="f-grow" link={`/messages/${hexToBech32("npub", chat.pubkey)}`} pubkey={chat.pubkey} />
+            </div>
+        )
+    }
+
     function person(chat: DmChat) {
+        if(chat.pubkey === myPubKey) return noteToSelf(chat)
         return (
             <div className="flex mb10" key={chat.pubkey}>
                 <ProfileImage pubkey={chat.pubkey} className="f-grow" link={`/messages/${hexToBech32("npub", chat.pubkey)}`} />
@@ -46,7 +56,10 @@ export default function MessagesPage() {
                 <h3 className="f-grow">Messages</h3>
                 <div className="btn" onClick={() => markAllRead()}>Mark All Read</div>
             </div>
-            {chats.sort((a, b) => b.newestMessage - a.newestMessage).map(person)}
+            {chats.sort((a, b) => {
+                if(b.pubkey === myPubKey) return 1
+                return b.newestMessage - a.newestMessage
+            }).map(person)}
         </>
     )
 }
-- 
2.45.2


From cf8f28271c8c5f0df696b2e267d6c3d836cfae7d Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Thu, 19 Jan 2023 16:27:49 +0100
Subject: [PATCH 3/3] fix link overflow

---
 src/element/Text.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/element/Text.css b/src/element/Text.css
index 4ec9e40c..a99db0da 100644
--- a/src/element/Text.css
+++ b/src/element/Text.css
@@ -66,6 +66,7 @@
     margin: 0;
     max-width: 260px;
     white-space: nowrap;
+    overflow: hidden;
     text-overflow: ellipsis;
     color: var(--highlight);
     height: var(--font-size);
-- 
2.45.2