2023-06-30 14:05:57 +00:00
|
|
|
/** @jsx h */
|
2023-12-22 10:20:37 +00:00
|
|
|
import { Component, h, VNode } from "https://esm.sh/preact@10.17.1";
|
2024-01-01 17:28:10 +00:00
|
|
|
import { PublicKey } from "../../libs/nostr.ts/key.ts";
|
2024-03-15 13:44:17 +00:00
|
|
|
import { NostrAccountContext } from "../../libs/nostr.ts/nostr.ts";
|
2024-01-01 17:28:10 +00:00
|
|
|
import { RelayRecordGetter } from "../database.ts";
|
2023-10-04 21:34:43 +00:00
|
|
|
import { EventBus } from "../event-bus.ts";
|
2024-01-02 12:42:11 +00:00
|
|
|
import { ChatMessagesGetter, UI_Interaction_Event, UserBlocker } from "./app_update.tsx";
|
2024-03-15 13:44:17 +00:00
|
|
|
import { IconButtonClass } from "./components/tw.ts";
|
|
|
|
|
2024-01-01 17:28:10 +00:00
|
|
|
import { LeftArrowIcon } from "./icons/left-arrow-icon.tsx";
|
2024-03-15 13:44:17 +00:00
|
|
|
import { MessagePanel, MessagePanel_V0 } from "./message-panel.tsx";
|
2024-01-01 17:28:10 +00:00
|
|
|
import { ProfileGetter } from "./search.tsx";
|
2024-03-15 13:44:17 +00:00
|
|
|
|
2024-01-01 17:28:10 +00:00
|
|
|
import {
|
|
|
|
ConversationList,
|
|
|
|
ConversationListRetriever,
|
|
|
|
NewMessageChecker,
|
|
|
|
PinListGetter,
|
|
|
|
} from "./conversation-list.tsx";
|
2024-03-15 13:44:17 +00:00
|
|
|
import { func_GetEventByID } from "./message-list.tsx";
|
2023-10-09 18:52:30 +00:00
|
|
|
|
|
|
|
export type DM_Model = {
|
2024-03-15 13:44:17 +00:00
|
|
|
currentConversation: PublicKey | undefined;
|
2023-10-09 18:52:30 +00:00
|
|
|
};
|
2023-06-30 14:05:57 +00:00
|
|
|
|
|
|
|
type DirectMessageContainerProps = {
|
2023-10-04 21:34:43 +00:00
|
|
|
ctx: NostrAccountContext;
|
|
|
|
bus: EventBus<UI_Interaction_Event>;
|
2024-03-15 13:44:17 +00:00
|
|
|
getters: {
|
|
|
|
profileGetter: ProfileGetter;
|
|
|
|
messageGetter: ChatMessagesGetter;
|
|
|
|
pinListGetter: PinListGetter;
|
|
|
|
convoListRetriever: ConversationListRetriever;
|
|
|
|
newMessageChecker: NewMessageChecker;
|
|
|
|
relayRecordGetter: RelayRecordGetter;
|
|
|
|
isUserBlocked: (pubkey: PublicKey) => boolean;
|
|
|
|
getEventByID: func_GetEventByID;
|
|
|
|
};
|
2024-01-02 12:42:11 +00:00
|
|
|
userBlocker: UserBlocker;
|
2023-09-15 08:58:40 +00:00
|
|
|
} & DM_Model;
|
2023-06-30 14:05:57 +00:00
|
|
|
|
2023-10-07 17:15:27 +00:00
|
|
|
export type StartInvite = {
|
|
|
|
type: "StartInvite";
|
|
|
|
publicKey: PublicKey;
|
|
|
|
};
|
|
|
|
|
2024-03-15 13:44:17 +00:00
|
|
|
export class DirectMessageContainer extends Component<DirectMessageContainerProps> {
|
2023-12-22 10:20:37 +00:00
|
|
|
render(props: DirectMessageContainerProps) {
|
|
|
|
const t = Date.now();
|
2024-03-15 13:44:17 +00:00
|
|
|
console.log(DirectMessageContainer.name, "?");
|
2023-12-22 10:20:37 +00:00
|
|
|
const vDom = (
|
|
|
|
<div
|
|
|
|
class={`h-full w-full flex bg-[#36393F] overflow-hidden`}
|
|
|
|
>
|
|
|
|
<div
|
2024-03-15 13:44:17 +00:00
|
|
|
class={`w-fit max-sm:w-full
|
|
|
|
${props.currentConversation ? "max-sm:hidden" : ""}`}
|
2023-12-22 10:20:37 +00:00
|
|
|
>
|
2024-01-01 17:28:10 +00:00
|
|
|
<ConversationList
|
2024-03-15 13:44:17 +00:00
|
|
|
eventSub={props.bus}
|
2023-12-22 10:20:37 +00:00
|
|
|
emit={props.bus.emit}
|
2024-03-15 13:44:17 +00:00
|
|
|
getters={props.getters}
|
2024-01-02 12:42:11 +00:00
|
|
|
userBlocker={props.userBlocker}
|
2023-12-22 10:20:37 +00:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
|
2024-03-15 13:44:17 +00:00
|
|
|
{this.props.currentConversation
|
2023-12-22 10:20:37 +00:00
|
|
|
? (
|
|
|
|
<div class={`flex flex-col flex-1 overflow-hidden`}>
|
|
|
|
<TopBar
|
|
|
|
bus={this.props.bus}
|
2024-03-15 13:44:17 +00:00
|
|
|
buttons={[]}
|
|
|
|
currentConversation={this.props.currentConversation}
|
|
|
|
profileGetter={this.props.getters.profileGetter}
|
2023-12-22 10:20:37 +00:00
|
|
|
/>
|
|
|
|
<div class={`flex-1 overflow-auto`}>
|
2024-03-15 13:44:17 +00:00
|
|
|
<MessagePanel_V0
|
|
|
|
key={this.props.currentConversation}
|
2023-12-22 10:20:37 +00:00
|
|
|
myPublicKey={props.ctx.publicKey}
|
|
|
|
emit={props.bus.emit}
|
2024-01-02 10:09:25 +00:00
|
|
|
eventSub={props.bus}
|
2024-03-15 13:44:17 +00:00
|
|
|
getters={props.getters}
|
|
|
|
messages={props.getters.messageGetter.getChatMessages(
|
|
|
|
this.props.currentConversation.hex,
|
2023-12-22 10:20:37 +00:00
|
|
|
)}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
: undefined}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
console.debug("DirectMessageContainer:end", Date.now() - t);
|
|
|
|
return vDom;
|
2023-10-19 03:44:43 +00:00
|
|
|
}
|
2023-12-22 10:20:37 +00:00
|
|
|
}
|
2023-10-19 03:44:43 +00:00
|
|
|
|
2023-12-22 10:20:37 +00:00
|
|
|
function TopBar(props: {
|
|
|
|
bus: EventBus<UI_Interaction_Event>;
|
2024-03-15 13:44:17 +00:00
|
|
|
currentConversation: PublicKey;
|
2023-12-22 10:20:37 +00:00
|
|
|
profileGetter: ProfileGetter;
|
|
|
|
buttons: VNode[];
|
|
|
|
}) {
|
|
|
|
return (
|
2023-06-30 14:05:57 +00:00
|
|
|
<div
|
2023-12-22 10:20:37 +00:00
|
|
|
class={`h-14 border-l border-b border-[#36393F] flex
|
|
|
|
items-center justify-between bg-[#2F3136]`}
|
2023-06-30 14:05:57 +00:00
|
|
|
>
|
2023-12-22 10:20:37 +00:00
|
|
|
<div class={`flex items-center overflow-hidden`}>
|
|
|
|
<button
|
|
|
|
onClick={() => {
|
|
|
|
props.bus.emit({
|
|
|
|
type: "BackToContactList",
|
|
|
|
});
|
|
|
|
}}
|
2024-01-02 10:09:25 +00:00
|
|
|
class={`w-6 h-6 mx-2 ${IconButtonClass}`}
|
2023-12-22 10:20:37 +00:00
|
|
|
>
|
|
|
|
<LeftArrowIcon
|
|
|
|
class={`w-4 h-4`}
|
|
|
|
style={{
|
|
|
|
fill: "rgb(185, 187, 190)",
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</button>
|
|
|
|
<span
|
|
|
|
// https://tailwindcss.com/docs/customizing-colors
|
|
|
|
// https://tailwindcss.com/docs/cursor
|
|
|
|
class={`text-[#F3F4EA] text-[1.2rem]
|
2024-01-02 10:09:25 +00:00
|
|
|
hover:text-[#60a5fa] hover:cursor-pointer
|
|
|
|
whitespace-nowrap truncate`}
|
2023-12-22 10:20:37 +00:00
|
|
|
onClick={() => {
|
2024-03-15 13:44:17 +00:00
|
|
|
if (!props.currentConversation) {
|
2023-12-22 10:20:37 +00:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
props.bus.emit({
|
|
|
|
type: "ViewUserDetail",
|
2024-03-15 13:44:17 +00:00
|
|
|
pubkey: props.currentConversation,
|
2023-12-22 10:20:37 +00:00
|
|
|
});
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{props.profileGetter.getProfilesByPublicKey(
|
2024-03-15 13:44:17 +00:00
|
|
|
props.currentConversation,
|
2023-12-22 10:20:37 +00:00
|
|
|
)
|
|
|
|
?.profile.name ||
|
2024-03-15 13:44:17 +00:00
|
|
|
props.currentConversation.bech32()}
|
2023-12-22 10:20:37 +00:00
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
{props.buttons}
|
|
|
|
|
2024-01-02 10:09:25 +00:00
|
|
|
<button
|
|
|
|
class={`absolute z-10 w-6 h-6 transition-transform duration-100 ease-in-out
|
|
|
|
right-4 mobile:right-0 top-4 ${IconButtonClass}`}
|
|
|
|
onClick={() => {
|
|
|
|
props.bus.emit({
|
2024-03-15 13:44:17 +00:00
|
|
|
type: "ViewUserDetail",
|
|
|
|
pubkey: props.currentConversation,
|
2024-01-02 10:09:25 +00:00
|
|
|
});
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<LeftArrowIcon
|
|
|
|
class={`w-4 h-4`}
|
|
|
|
style={{
|
|
|
|
fill: "#F3F4EA",
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</button>
|
2023-12-22 10:20:37 +00:00
|
|
|
</div>
|
2023-06-30 14:05:57 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|