nostr/blowater
1
0
Fork 0
mirror of https://github.com/BlowaterNostr/blowater.git synced 2024-10-18 15:43:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

clickable profile card (#44)

Browse Source 
Co-authored-by: BlowaterNostr <blowater.nostr@proton.me>
This commit is contained in:
Foodstr 2023-07-08 14:01:26 +08:00 committed by GitHub
parent 01b0eaf005
commit 7a5d61d8e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
UI/message-panel.tsx
View File

@ -21,7 +21,12 @@ import { MessageThread } from "./dm.tsx";
import { UserDetail } from "./user-detail.tsx";
import { MessageThreadPanel } from "./message-thread-panel.tsx";
import { Database } from "../database.ts";
import { DividerBackgroundColor, PrimaryBackgroundColor, PrimaryTextColor } from "./style/colors.ts";
import {
DividerBackgroundColor,
HoverButtonBackgroudColor,
PrimaryBackgroundColor,
PrimaryTextColor,
} from "./style/colors.ts";
import { ProfilesSyncer } from "./contact-list.ts";
import { NoteID } from "https://raw.githubusercontent.com/BlowaterNostr/nostr.ts/main/nip19.ts";
import { EventSyncer } from "./event_syncer.ts";
@ -324,7 +329,7 @@ function MessageBoxGroup(props: {
boxShadow: "2px 2px 5px 0 black",
}}
onClick={() => {
props.eventEmitter?.emit({
props.eventEmitter.emit({
type: "ViewThread",
root: msg.msg.event,
});
@ -349,7 +354,7 @@ function MessageBoxGroup(props: {
<pre
class={tw`text-[#DCDDDE] whitespace-pre-wrap break-words font-roboto`}
>
{ParseMessageContent(msg.msg, props.db, props.profilesSyncer, props.eventSyncer)}
{ParseMessageContent(msg.msg, props.db, props.profilesSyncer, props.eventSyncer, props.eventEmitter)}
</pre>
{msg.replyCount > 0
? (
@ -357,7 +362,7 @@ function MessageBoxGroup(props: {
<span
class={tw`text-[#A6A8AA] font-bold hover:underline cursor-pointer text-[0.8rem]`}
onClick={() => {
props.eventEmitter?.emit({
props.eventEmitter.emit({
type: "ViewThread",
root: msg.msg.event,
});
@ -440,6 +445,7 @@ export function ParseMessageContent(
db: Database,
profilesSyncer: ProfilesSyncer,
eventSyncer: EventSyncer,
eventEmitter: EventEmitter<ViewUserDetail>,
) {
if (message.type == "image") {
return <img src={message.content} />;
@ -458,7 +464,7 @@ export function ParseMessageContent(
const pubkey = PublicKey.FromBech32(itemStr);
const profile = getProfileEvent(db, pubkey);
if (profile) {
vnode.push(ProfileCard(profile.content, profile.pubkey));
vnode.push(ProfileCard(profile.content, pubkey, eventEmitter));
} else {
profilesSyncer.add(pubkey.hex);
}
@ -484,12 +490,22 @@ export function ParseMessageContent(
return vnode;
}
function ProfileCard(profile: ProfileData, pubkey: string) {
function ProfileCard(profile: ProfileData, pubkey: PublicKey, eventEmitter: EventEmitter<ViewUserDetail>) {
return (
<div class={tw`px-4 py-2 border-2 border-[${PrimaryTextColor}4D] rounded-lg`}>
<div
class={tw`px-4 py-2 border-2 border-[${PrimaryTextColor}4D] rounded-lg hover:bg-[${HoverButtonBackgroudColor}] cursor-pointer w-96`}
onClick={() => {
eventEmitter.emit({
type: "ViewUserDetail",
pubkey: pubkey,
});
}}
>
<div class={tw`flex`}>
<Avatar class={tw`w-10 h-10`} picture={profile.picture}></Avatar>
<p class={tw`text-[1.2rem] font-blod leading-10 truncate ml-2`}>{profile.name || pubkey}</p>
<p class={tw`text-[1.2rem] font-blod leading-10 truncate ml-2`}>
{profile.name || pubkey.bech32}
</p>
</div>
<div class={tw`${DividerClass} my-[0.5rem]`}></div>
<p class={tw`text-[0.8rem]`}>{profile.about}</p>

7
UI/message-thread-panel.tsx
View File

@ -7,6 +7,7 @@ import {
DirectMessagePanelUpdate,
NameAndTime,
ParseMessageContent,
ViewUserDetail,
} from "./message-panel.tsx";
import { PublicKey } from "https://raw.githubusercontent.com/BlowaterNostr/nostr.ts/main/key.ts";
import { ChatMessage, groupContinuousMessages } from "./message.ts";
@ -45,6 +46,7 @@ export function MessageThreadPanel(props: MessageThreadProps) {
db={props.db}
profilesSyncer={props.profilesSyncer}
eventSyncer={props.eventSyncer}
eventEmitter={props.eventEmitter}
/>
</div>
@ -64,6 +66,7 @@ function MessageThreadList(props: {
db: Database;
profilesSyncer: ProfilesSyncer;
eventSyncer: EventSyncer;
eventEmitter: EventEmitter<ViewUserDetail>;
}) {
let groups = groupContinuousMessages(props.messages, (pre, cur) => {
const sameAuthor = pre.event.pubkey == cur.event.pubkey;
@ -79,6 +82,7 @@ function MessageThreadList(props: {
db={props.db}
profilesSyncer={props.profilesSyncer}
eventSyncer={props.eventSyncer}
eventEmitter={props.eventEmitter}
/>,
);
}
@ -97,6 +101,7 @@ function MessageThreadBoxGroup(props: {
db: Database;
profilesSyncer: ProfilesSyncer;
eventSyncer: EventSyncer;
eventEmitter: EventEmitter<ViewUserDetail>;
}) {
const vnode = (
<ul class={tw`py-2`}>
@ -114,7 +119,7 @@ function MessageThreadBoxGroup(props: {
<pre
class={tw`text-[#DCDDDE] whitespace-pre-wrap break-words font-roboto`}
>
{ParseMessageContent(msg, props.db, props.profilesSyncer, props.eventSyncer)}
{ParseMessageContent(msg, props.db, props.profilesSyncer, props.eventSyncer, props.eventEmitter)}
</pre>
</div>
</li>