mirror of
https://github.com/BlowaterNostr/blowater.git
synced 2024-10-18 07:33:22 +00:00
fix ConversationList & simplify DirectMessageContainer (#359)
This commit is contained in:
BlowaterNostr
GitHub
parent
3f1bebb790
commit
e6a1819b72
42
UI/app.tsx
42
UI/app.tsx
@ -412,29 +412,23 @@ export function AppComponent(props: {
|
||||
) {
|
||||
if (model.navigationModel.activeNav == "DM") {
|
||||
dmVNode = (
|
||||
<div
|
||||
class={tw`flex-1 overflow-hidden`}
|
||||
>
|
||||
{DirectMessageContainer({
|
||||
...model.dm,
|
||||
rightPanelModel: model.rightPanelModel,
|
||||
bus: app.eventBus,
|
||||
ctx: myAccountCtx,
|
||||
profileGetter: app.database,
|
||||
pool: props.pool,
|
||||
conversationLists: app.conversationLists,
|
||||
profilesSyncer: app.profileSyncer,
|
||||
eventSyncer: app.eventSyncer,
|
||||
pinListGetter: app.otherConfig,
|
||||
groupChatController: app.groupChatController,
|
||||
newMessageChecker: app.conversationLists,
|
||||
messageGetter: model.dm.isGroupMessage ? app.groupChatController : app.dmController,
|
||||
newMessageListener: model.dm.isGroupMessage
|
||||
? app.groupChatController
|
||||
: app.dmController,
|
||||
relayRecordGetter: app.database,
|
||||
})}
|
||||
</div>
|
||||
<DirectMessageContainer
|
||||
{...model.dm}
|
||||
rightPanelModel={model.rightPanelModel}
|
||||
bus={app.eventBus}
|
||||
ctx={myAccountCtx}
|
||||
profileGetter={app.database}
|
||||
pool={props.pool}
|
||||
conversationLists={app.conversationLists}
|
||||
profilesSyncer={app.profileSyncer}
|
||||
eventSyncer={app.eventSyncer}
|
||||
pinListGetter={app.otherConfig}
|
||||
groupChatController={app.groupChatController}
|
||||
newMessageChecker={app.conversationLists}
|
||||
messageGetter={model.dm.isGroupMessage ? app.groupChatController : app.dmController}
|
||||
newMessageListener={model.dm.isGroupMessage ? app.groupChatController : app.dmController}
|
||||
relayRecordGetter={app.database}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -446,7 +440,7 @@ export function AppComponent(props: {
|
||||
console.debug("AppComponent:2", Date.now() - t);
|
||||
|
||||
const final = (
|
||||
<div class={tw`h-screen fixed w-full flex-1 flex overflow-hidden`}>
|
||||
<div class={tw`h-screen w-full flex`}>
|
||||
<nav.NavBar
|
||||
publicKey={app.ctx.publicKey}
|
||||
profileGetter={app.database}
|
||||
|
||||
@ -6,7 +6,6 @@ import { Datebase_View } from "../database.ts";
|
||||
import { PrivateKey } from "../lib/nostr-ts/key.ts";
|
||||
import { InMemoryAccountContext, NostrEvent, NostrKind } from "../lib/nostr-ts/nostr.ts";
|
||||
import { testEventBus } from "./_setup.test.ts";
|
||||
import { initialModel } from "./app_model.ts";
|
||||
import { DM_List } from "./conversation-list.ts";
|
||||
import { NewIndexedDB } from "./dexie-db.ts";
|
||||
import { ProfileSyncer } from "../features/profile.ts";
|
||||
@ -16,7 +15,6 @@ import { GroupChatSyncer, GroupMessageController } from "../features/gm.ts";
|
||||
import { Channel } from "https://raw.githubusercontent.com/BlowaterNostr/csp/master/csp.ts";
|
||||
import { LamportTime } from "../time.ts";
|
||||
import { prepareEncryptedNostrEvent } from "../lib/nostr-ts/event.ts";
|
||||
import { PublicKey } from "../lib/nostr-ts/nodejs/index.mjs";
|
||||
|
||||
const ctx = InMemoryAccountContext.Generate();
|
||||
const db = NewIndexedDB();
|
||||
|
||||
@ -107,12 +107,15 @@ export class ConversationList extends Component<Props, State> {
|
||||
|
||||
return (
|
||||
<div
|
||||
class={tw`h-screen flex flex-col mobile:w-full desktop:w-64 bg-[${SecondaryBackgroundColor}]`}
|
||||
// https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference
|
||||
class={`
|
||||
h-screen w-80 max-sm:w-full
|
||||
flex flex-col bg-[${SecondaryBackgroundColor}]`}
|
||||
>
|
||||
<div
|
||||
class={tw`flex items-center gap-2 px-4 h-20 border-b border-[#36393F]`}
|
||||
class={`gap-2 py-2.5 px-4 border-b border-[#36393F]`}
|
||||
>
|
||||
<div class={`flex-1 ${LinearGradientsClass}} items-center`}>
|
||||
<div class={`${LinearGradientsClass} flex items-center justify-center rounded-lg`}>
|
||||
<button
|
||||
onClick={async () => {
|
||||
props.emit({
|
||||
|
||||
@ -69,7 +69,5 @@
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
<body></body>
|
||||
</html>
|
||||
|
||||
@ -76,7 +76,5 @@
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
<body></body>
|
||||
</html>
|
||||
|
||||
@ -69,33 +69,30 @@ pool.addRelayURL(relays[0]);
|
||||
const gmControl = new GroupMessageController(ctx, { add: (_) => {} }, { add: (_) => {} });
|
||||
const dmControl = new DirectedMessageController(ctx);
|
||||
|
||||
const view = () => {
|
||||
return (
|
||||
<DirectMessageContainer
|
||||
conversationLists={dm_list}
|
||||
eventSyncer={new EventSyncer(pool, database)}
|
||||
profilesSyncer={new ProfileSyncer(database, pool)}
|
||||
bus={testEventBus}
|
||||
rightPanelModel={{
|
||||
show: true,
|
||||
}}
|
||||
currentEditor={model.dm.currentEditor}
|
||||
focusedContent={model.dm.focusedContent}
|
||||
ctx={ctx}
|
||||
pool={pool}
|
||||
isGroupMessage={false}
|
||||
pinListGetter={OtherConfig.Empty(new Channel(), ctx, lamport)}
|
||||
profileGetter={database}
|
||||
groupChatController={gmControl}
|
||||
messageGetter={gmControl}
|
||||
newMessageChecker={dm_list}
|
||||
newMessageListener={dmControl}
|
||||
relayRecordGetter={database}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
render(view(), document.body);
|
||||
render(
|
||||
<DirectMessageContainer
|
||||
conversationLists={dm_list}
|
||||
eventSyncer={new EventSyncer(pool, database)}
|
||||
profilesSyncer={new ProfileSyncer(database, pool)}
|
||||
bus={testEventBus}
|
||||
rightPanelModel={{
|
||||
show: true,
|
||||
}}
|
||||
currentEditor={model.dm.currentEditor}
|
||||
focusedContent={model.dm.focusedContent}
|
||||
ctx={ctx}
|
||||
pool={pool}
|
||||
isGroupMessage={false}
|
||||
pinListGetter={OtherConfig.Empty(new Channel(), ctx, lamport)}
|
||||
profileGetter={database}
|
||||
groupChatController={gmControl}
|
||||
messageGetter={gmControl}
|
||||
newMessageChecker={dm_list}
|
||||
newMessageListener={dmControl}
|
||||
relayRecordGetter={database}
|
||||
/>,
|
||||
document.body,
|
||||
);
|
||||
|
||||
(async () => {
|
||||
for await (const event of database.subscribe()) {
|
||||
@ -105,25 +102,3 @@ render(view(), document.body);
|
||||
dm_list.addEvents([event]);
|
||||
}
|
||||
})();
|
||||
|
||||
for await (const e of testEventBus.onChange()) {
|
||||
console.log(e);
|
||||
if (e.type == "SendMessage") {
|
||||
const err = await handle_SendMessage(
|
||||
e,
|
||||
ctx,
|
||||
lamport,
|
||||
pool,
|
||||
model.dmEditors,
|
||||
model.gmEditors,
|
||||
database,
|
||||
gmControl,
|
||||
);
|
||||
|
||||
if (err instanceof Error) {
|
||||
console.error("update:SendMessage", err);
|
||||
continue; // todo: global error toast
|
||||
}
|
||||
}
|
||||
render(view(), document.body);
|
||||
}
|
||||
|
||||
361
UI/dm.tsx
361
UI/dm.tsx
@ -1,5 +1,5 @@
|
||||
/** @jsx h */
|
||||
import { h } from "https://esm.sh/preact@10.17.1";
|
||||
import { Component, h, VNode } from "https://esm.sh/preact@10.17.1";
|
||||
import * as cl from "./conversation-list.tsx";
|
||||
import { MessagePanel, NewMessageListener } from "./message-panel.tsx";
|
||||
import { EventBus } from "../event-bus.ts";
|
||||
@ -22,6 +22,7 @@ import { UserIcon } from "./icons/user-icon.tsx";
|
||||
import { LeftArrowIcon } from "./icons/left-arrow-icon.tsx";
|
||||
import { RelayRecordGetter } from "../database.ts";
|
||||
import { RightPanelModel } from "./right-panel.tsx";
|
||||
import { Channel, PopChannel } from "https://raw.githubusercontent.com/BlowaterNostr/csp/master/csp.ts";
|
||||
|
||||
export type DM_Model = {
|
||||
currentEditor: EditorModel | undefined;
|
||||
@ -52,176 +53,234 @@ export type StartInvite = {
|
||||
publicKey: PublicKey;
|
||||
};
|
||||
|
||||
export function DirectMessageContainer(props: DirectMessageContainerProps) {
|
||||
const t = Date.now();
|
||||
type State = {
|
||||
currentEditor: EditorModel | undefined;
|
||||
};
|
||||
|
||||
const currentEditor = props.currentEditor;
|
||||
let buttons = [];
|
||||
if (currentEditor && IS_BETA_VERSION) {
|
||||
if (props.isGroupMessage) {
|
||||
buttons.push(
|
||||
<button
|
||||
class={`w-8 h-8 ${CenterClass}`}
|
||||
onClick={() => {
|
||||
props.bus.emit({
|
||||
type: "ViewUserDetail",
|
||||
pubkey: currentEditor.pubkey,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<UserIcon
|
||||
class={`w-6 h-6 text-[${PrimaryTextColor}] stroke-current`}
|
||||
style={{ fill: "none" }}
|
||||
/>
|
||||
</button>,
|
||||
);
|
||||
export class DirectMessageContainer extends Component<DirectMessageContainerProps, State> {
|
||||
changes?: PopChannel<UI_Interaction_Event>;
|
||||
|
||||
const canEditGroupProfile = props.groupChatController.getGroupAdminCtx(currentEditor.pubkey);
|
||||
if (canEditGroupProfile) {
|
||||
state: State = {
|
||||
currentEditor: undefined,
|
||||
};
|
||||
|
||||
componentWillUpdate(nextProps: Readonly<DirectMessageContainerProps>): void {
|
||||
this.setState({
|
||||
currentEditor: nextProps.currentEditor,
|
||||
});
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
this.setState({
|
||||
currentEditor: this.props.currentEditor,
|
||||
});
|
||||
|
||||
const changes = this.props.bus.onChange();
|
||||
this.changes = changes;
|
||||
for await (const change of changes) {
|
||||
if (change.type == "SelectConversation") {
|
||||
// todo
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount(): void {
|
||||
if (this.changes) {
|
||||
this.changes.close();
|
||||
}
|
||||
}
|
||||
|
||||
render(props: DirectMessageContainerProps) {
|
||||
const t = Date.now();
|
||||
|
||||
const currentEditor = props.currentEditor;
|
||||
let buttons = [];
|
||||
if (currentEditor && IS_BETA_VERSION) {
|
||||
if (props.isGroupMessage) {
|
||||
buttons.push(
|
||||
// setting button
|
||||
<button
|
||||
class={`w-8 h-8 ${CenterClass}`}
|
||||
onClick={() => {
|
||||
props.bus.emit({
|
||||
type: "StartEditGroupChatProfile",
|
||||
ctx: canEditGroupProfile,
|
||||
type: "ViewUserDetail",
|
||||
pubkey: currentEditor.pubkey,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<SettingIcon
|
||||
<UserIcon
|
||||
class={`w-6 h-6 text-[${PrimaryTextColor}] stroke-current`}
|
||||
style={{ fill: "none" }}
|
||||
/>
|
||||
</button>,
|
||||
);
|
||||
}
|
||||
} else {
|
||||
buttons.push(
|
||||
<InviteButton
|
||||
groupChatController={props.groupChatController}
|
||||
profileGetter={props.profileGetter}
|
||||
userPublicKey={currentEditor.pubkey}
|
||||
emit={props.bus.emit}
|
||||
/>,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const vDom = (
|
||||
<div
|
||||
class={`h-full w-full flex bg-[#36393F] overflow-hidden`}
|
||||
>
|
||||
<div class={`${props.currentEditor ? "mobile:hidden" : "mobile:w-full"}`}>
|
||||
<cl.ConversationList
|
||||
eventBus={props.bus}
|
||||
emit={props.bus.emit}
|
||||
convoListRetriever={props.conversationLists}
|
||||
groupChatListGetter={props.groupChatController}
|
||||
hasNewMessages={props.newMessageChecker}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
{props.currentEditor
|
||||
? (
|
||||
<div class={`h-screen flex-1 overflow-hidden flex-col flex`}>
|
||||
<div
|
||||
class={`h-14 mobile:h-12
|
||||
border-l border-b border-[#36393F] flex
|
||||
items-center justify-between px- mobile:px-2 bg-[#2F3136]`}
|
||||
const canEditGroupProfile = props.groupChatController.getGroupAdminCtx(currentEditor.pubkey);
|
||||
if (canEditGroupProfile) {
|
||||
buttons.push(
|
||||
// setting button
|
||||
<button
|
||||
class={`w-8 h-8 ${CenterClass}`}
|
||||
onClick={() => {
|
||||
props.bus.emit({
|
||||
type: "StartEditGroupChatProfile",
|
||||
ctx: canEditGroupProfile,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<div class={`flex items-center overflow-hidden`}>
|
||||
<button
|
||||
onClick={() => {
|
||||
props.bus.emit({
|
||||
type: "BackToContactList",
|
||||
});
|
||||
}}
|
||||
class={`w-6 h-6 mobile:mr-2 desktop:hidden ${IconButtonClass}`}
|
||||
>
|
||||
<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]
|
||||
<SettingIcon
|
||||
class={`w-6 h-6 text-[${PrimaryTextColor}] stroke-current`}
|
||||
style={{ fill: "none" }}
|
||||
/>
|
||||
</button>,
|
||||
);
|
||||
}
|
||||
} else {
|
||||
buttons.push(
|
||||
<InviteButton
|
||||
groupChatController={props.groupChatController}
|
||||
profileGetter={props.profileGetter}
|
||||
userPublicKey={currentEditor.pubkey}
|
||||
emit={props.bus.emit}
|
||||
/>,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const vDom = (
|
||||
<div
|
||||
class={`h-full w-full flex bg-[#36393F] overflow-hidden`}
|
||||
>
|
||||
<div
|
||||
class={`w-fit
|
||||
max-sm:w-full
|
||||
${props.currentEditor ? "max-sm:hidden" : ""}`}
|
||||
>
|
||||
<cl.ConversationList
|
||||
eventBus={props.bus}
|
||||
emit={props.bus.emit}
|
||||
convoListRetriever={props.conversationLists}
|
||||
groupChatListGetter={props.groupChatController}
|
||||
hasNewMessages={props.newMessageChecker}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{this.state.currentEditor
|
||||
? (
|
||||
<div class={`flex flex-col flex-1 overflow-hidden`}>
|
||||
<TopBar
|
||||
bus={this.props.bus}
|
||||
buttons={buttons}
|
||||
currentEditor={this.state.currentEditor}
|
||||
profileGetter={this.props.profileGetter}
|
||||
showRightPanel={this.props.rightPanelModel.show}
|
||||
/>
|
||||
<div class={`flex-1 overflow-auto`}>
|
||||
<MessagePanel
|
||||
myPublicKey={props.ctx.publicKey}
|
||||
rightPanelModel={props.rightPanelModel}
|
||||
emit={props.bus.emit}
|
||||
newMessageListener={props.newMessageListener}
|
||||
focusedContent={getFocusedContent(
|
||||
props.focusedContent.get(this.state.currentEditor.pubkey.hex),
|
||||
props.profileGetter,
|
||||
)}
|
||||
profilesSyncer={props.profilesSyncer}
|
||||
eventSyncer={props.eventSyncer}
|
||||
isGroupMessage={props.isGroupMessage}
|
||||
profileGetter={props.profileGetter}
|
||||
editorModel={this.state.currentEditor}
|
||||
messageGetter={props.messageGetter}
|
||||
relayRecordGetter={props.relayRecordGetter}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
: undefined}
|
||||
</div>
|
||||
);
|
||||
console.debug("DirectMessageContainer:end", Date.now() - t);
|
||||
return vDom;
|
||||
}
|
||||
}
|
||||
|
||||
function TopBar(props: {
|
||||
bus: EventBus<UI_Interaction_Event>;
|
||||
currentEditor: EditorModel;
|
||||
profileGetter: ProfileGetter;
|
||||
showRightPanel: boolean;
|
||||
buttons: VNode[];
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
class={`h-14 border-l border-b border-[#36393F] flex
|
||||
items-center justify-between bg-[#2F3136]`}
|
||||
>
|
||||
<div class={`flex items-center overflow-hidden`}>
|
||||
<button
|
||||
onClick={() => {
|
||||
props.bus.emit({
|
||||
type: "BackToContactList",
|
||||
});
|
||||
}}
|
||||
class={`w-6 h-6 mobile:mr-2 desktop:hidden ${IconButtonClass}`}
|
||||
>
|
||||
<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]
|
||||
hover:text-[#60a5fa] hover:cursor-pointer
|
||||
ml-4 mobile:text-base whitespace-nowrap truncate`}
|
||||
onClick={() => {
|
||||
if (!props.currentEditor) {
|
||||
return;
|
||||
}
|
||||
props.bus.emit({
|
||||
type: "ViewUserDetail",
|
||||
pubkey: props.currentEditor.pubkey,
|
||||
});
|
||||
}}
|
||||
>
|
||||
{props.profileGetter.getProfilesByPublicKey(props.currentEditor.pubkey)
|
||||
?.profile.name ||
|
||||
props.currentEditor.pubkey.bech32()}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
{buttons}
|
||||
onClick={() => {
|
||||
if (!props.currentEditor) {
|
||||
return;
|
||||
}
|
||||
props.bus.emit({
|
||||
type: "ViewUserDetail",
|
||||
pubkey: props.currentEditor.pubkey,
|
||||
});
|
||||
}}
|
||||
>
|
||||
{props.profileGetter.getProfilesByPublicKey(
|
||||
props.currentEditor.pubkey,
|
||||
)
|
||||
?.profile.name ||
|
||||
props.currentEditor.pubkey.bech32()}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
{props.buttons}
|
||||
|
||||
{!props.rightPanelModel.show
|
||||
? (
|
||||
<button
|
||||
class={`absolute z-10 w-6 h-6 transition-transform duration-100 ease-in-out right-4 mobile:right-0 top-4${
|
||||
props.rightPanelModel.show ? " rotate-180" : ""
|
||||
} ${IconButtonClass}`}
|
||||
onClick={() => {
|
||||
props.bus.emit({
|
||||
type: "ToggleRightPanel",
|
||||
show: !props.rightPanelModel.show,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<LeftArrowIcon
|
||||
class={`w-4 h-4`}
|
||||
style={{
|
||||
fill: "#F3F4EA",
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
)
|
||||
: undefined}
|
||||
</div>
|
||||
</div>
|
||||
<div class={`flex-1 overflow-x-auto`}>
|
||||
{props.currentEditor
|
||||
? (
|
||||
<MessagePanel
|
||||
myPublicKey={props.ctx.publicKey}
|
||||
rightPanelModel={props.rightPanelModel}
|
||||
emit={props.bus.emit}
|
||||
newMessageListener={props.newMessageListener}
|
||||
focusedContent={getFocusedContent(
|
||||
props.focusedContent.get(props.currentEditor.pubkey.hex),
|
||||
props.profileGetter,
|
||||
)}
|
||||
profilesSyncer={props.profilesSyncer}
|
||||
eventSyncer={props.eventSyncer}
|
||||
isGroupMessage={props.isGroupMessage}
|
||||
profileGetter={props.profileGetter}
|
||||
editorModel={props.currentEditor}
|
||||
messageGetter={props.messageGetter}
|
||||
relayRecordGetter={props.relayRecordGetter}
|
||||
/>
|
||||
)
|
||||
: undefined}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
: undefined}
|
||||
{!props.showRightPanel
|
||||
? (
|
||||
<button
|
||||
class={`absolute z-10 w-6 h-6 transition-transform duration-100 ease-in-out right-4 mobile:right-0 top-4${
|
||||
props.showRightPanel ? " rotate-180" : ""
|
||||
} ${IconButtonClass}`}
|
||||
onClick={() => {
|
||||
props.bus.emit({
|
||||
type: "ToggleRightPanel",
|
||||
show: !props.showRightPanel,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<LeftArrowIcon
|
||||
class={`w-4 h-4`}
|
||||
style={{
|
||||
fill: "#F3F4EA",
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
)
|
||||
: undefined}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
console.debug("DirectMessageContainer:end", Date.now() - t);
|
||||
return vDom;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user