diff --git a/src/element/Avatar.css b/src/element/Avatar.css index a474f224..2d1cac61 100644 --- a/src/element/Avatar.css +++ b/src/element/Avatar.css @@ -37,3 +37,7 @@ .avatar[data-domain="strike.army"] { background-image: var(--img-url), var(--strike-army-gradient); } + +.avatar[data-domain="nostr.13x.sh"] { + background-image: var(--img-url), var(--nostrplebs-gradient); +} diff --git a/src/element/Nip05.css b/src/element/Nip05.css index 2cc3ef46..cf9b70aa 100644 --- a/src/element/Nip05.css +++ b/src/element/Nip05.css @@ -56,6 +56,10 @@ background-image: var(--strike-army-gradient); } +.nip05 .domain[data-domain="nostr.13x.sh"] { + background-image: var(--nostrplebs-gradient); +} + .nip05 .badge { margin: .1em .2em; } 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 ( +
+ Note to Self + {user?.nip05 && } +
+ ) +} + +export default function NoteToSelf({ pubkey, clickable, className, link }: NoteToSelfProps) { + const navigate = useNavigate(); + + const clickLink = () => { + if(clickable) { + navigate(link ?? profileLink(pubkey)) + } + } + + return ( +
+
+
+ +
+
+
+
+ {clickable && ( + + + + ) || ( + + )} +
+
+
+ ) +} 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 ( <> - + {id === pubKey && ( + + ) || ( + + )}
{sortedDms.map(a => )} diff --git a/src/pages/MessagesPage.tsx b/src/pages/MessagesPage.tsx index bb2b640e..ad75675a 100644 --- a/src/pages/MessagesPage.tsx +++ b/src/pages/MessagesPage.tsx @@ -6,6 +6,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, @@ -23,7 +24,16 @@ export default function MessagesPage() { return extractChats(dms, myPubKey!); }, [dms, myPubKey, dmInteraction]); + function noteToSelf(chat: DmChat) { + return ( +
+ +
+ ) + } + function person(chat: DmChat) { + if(chat.pubkey === myPubKey) return noteToSelf(chat) return (
@@ -47,7 +57,10 @@ export default function MessagesPage() {

Messages

markAllRead()}>Mark All Read
- {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)} ) }