From abfce3f858cff79c540bd43630b8d49868c29129 Mon Sep 17 00:00:00 2001 From: BlowaterNostr <127284497+BlowaterNostr@users.noreply.github.com> Date: Wed, 20 Mar 2024 10:59:39 +0800 Subject: [PATCH] navigate to DM from UserDetail right panel (#427) --- app/UI/app.tsx | 9 +++++---- app/UI/app_update.tsx | 11 ++++++++--- app/UI/components/right-panel.tsx | 8 +++++++- app/UI/user-detail.tsx | 24 ++++++++++++++++++++---- libs/nostr.ts | 2 +- 5 files changed, 41 insertions(+), 13 deletions(-) diff --git a/app/UI/app.tsx b/app/UI/app.tsx index 547e97f..48c8678 100644 --- a/app/UI/app.tsx +++ b/app/UI/app.tsx @@ -34,6 +34,7 @@ import { SignIn } from "./sign-in.tsx"; import { getTags, Parsed_Event } from "../nostr.ts"; import { Toast } from "./components/toast.tsx"; import { ToastChannel } from "./components/toast.tsx"; +import { RightPanelChannel } from "./components/right-panel.tsx"; export async function Start(database: DexieDatabase) { console.log("Start the application"); @@ -51,7 +52,7 @@ export async function Start(database: DexieDatabase) { const eventBus = new EventBus(); const pool = new ConnectionPool(); const popOverInputChan: PopOverInputChannel = new Channel(); - const rightPanelInputChan: Channel<() => ComponentChildren> = new Channel(); + const rightPanelInputChan: RightPanelChannel = new Channel(); const toastInputChan: ToastChannel = new Channel(); const dbView = await Database_View.New(database, database, database); const newNostrEventChannel = new Channel(); @@ -148,7 +149,7 @@ export class App { public readonly eventBus: EventBus, public readonly pool: ConnectionPool, public readonly popOverInputChan: PopOverInputChannel, - public readonly rightPanelInputChan: Channel<() => ComponentChildren>, + public readonly rightPanelInputChan: RightPanelChannel, public readonly otherConfig: OtherConfig, public readonly conversationLists: DM_List, public readonly relayConfig: RelayConfig, @@ -164,7 +165,7 @@ export class App { eventBus: EventBus; pool: ConnectionPool; popOverInputChan: PopOverInputChannel; - rightPanelInputChan: Channel<() => ComponentChildren>; + rightPanelInputChan: RightPanelChannel; otherConfig: OtherConfig; lamport: LamportTime; installPrompt: InstallPrompt; @@ -286,7 +287,7 @@ type AppProps = { eventBus: AppEventBus; pool: ConnectionPool; popOverInputChan: PopOverInputChannel; - rightPanelInputChan: Channel<() => ComponentChildren>; + rightPanelInputChan: RightPanelChannel; toastInputChan: ToastChannel; installPrompt: InstallPrompt; }; diff --git a/app/UI/app_update.tsx b/app/UI/app_update.tsx index 5d39a8a..6d98335 100644 --- a/app/UI/app_update.tsx +++ b/app/UI/app_update.tsx @@ -57,6 +57,8 @@ import { default_blowater_relay } from "./relay-config.ts"; import { forever } from "./_helper.ts"; import { func_GetEventByID } from "./message-list.tsx"; import { FilterContent } from "./filter.tsx"; +import { CloseRightPanel } from "./components/right-panel.tsx"; +import { RightPanelChannel } from "./components/right-panel.tsx"; export type UI_Interaction_Event = | SearchUpdate @@ -79,7 +81,8 @@ export type UI_Interaction_Event = | SelectRelay | HidePopOver | SyncEvent - | FilterContent; + | FilterContent + | CloseRightPanel; type BackToContactList = { type: "BackToContactList"; @@ -102,7 +105,7 @@ export function UI_Interaction_Update(args: { dbView: Database_View; pool: ConnectionPool; popOver: PopOverInputChannel; - rightPanel: Channel<() => ComponentChildren>; + rightPanel: RightPanelChannel; newNostrEventChannel: Channel; lamport: LamportTime; installPrompt: InstallPrompt; @@ -119,7 +122,7 @@ const handle_update_event = async (chan: PutChannel, args: { dbView: Database_View; pool: ConnectionPool; popOver: PopOverInputChannel; - rightPanel: Channel<() => ComponentChildren>; + rightPanel: RightPanelChannel; newNostrEventChannel: Channel; lamport: LamportTime; installPrompt: InstallPrompt; @@ -302,6 +305,8 @@ const handle_update_event = async (chan: PutChannel, args: { // else if (event.type == "ChangeNavigation") { model.navigationModel.activeNav = event.id; + } else if (event.type == "CloseRightPanel") { + app.rightPanelInputChan.put(undefined); } // // // DM diff --git a/app/UI/components/right-panel.tsx b/app/UI/components/right-panel.tsx index 66bb039..4a56a1e 100644 --- a/app/UI/components/right-panel.tsx +++ b/app/UI/components/right-panel.tsx @@ -5,8 +5,10 @@ import { CloseIcon } from "../icons/close-icon.tsx"; import { ComponentChildren } from "https://esm.sh/preact@10.17.1"; import { Channel } from "https://raw.githubusercontent.com/BlowaterNostr/csp/master/csp.ts"; +export type RightPanelChannel = Channel<(() => ComponentChildren) | undefined>; + type RightPanelProps = { - inputChan: Channel<() => ComponentChildren>; + inputChan: RightPanelChannel; }; type RightPanelState = { @@ -51,3 +53,7 @@ export class RightPanel extends Component { ); } } + +export type CloseRightPanel = { + type: "CloseRightPanel"; +}; diff --git a/app/UI/user-detail.tsx b/app/UI/user-detail.tsx index 4cf43c2..ee390e0 100644 --- a/app/UI/user-detail.tsx +++ b/app/UI/user-detail.tsx @@ -12,6 +12,8 @@ import { CopyButton } from "./components/copy-button.tsx"; import { LinkColor } from "./style/colors.ts"; import { findUrlInString } from "./message.ts"; import { robohash } from "./relay-detail.tsx"; +import { SelectConversation } from "./search_model.ts"; +import { CloseRightPanel } from "./components/right-panel.tsx"; export type BlockUser = { type: "BlockUser"; @@ -27,7 +29,7 @@ type UserDetailProps = { targetUserProfile: ProfileData; pubkey: PublicKey; blocked: boolean; - emit: emitFunc; + emit: emitFunc; }; export function UserDetail(props: UserDetailProps) { @@ -39,9 +41,23 @@ export function UserDetail(props: UserDetailProps) { class={`w-64 h-64 m-auto`} picture={props.targetUserProfile.picture || robohash(props.pubkey.hex)} /> -

- {name} -

+
+

{ + props.emit({ + type: "SelectConversation", + pubkey: props.pubkey, + }); + props.emit({ + type: "CloseRightPanel", + }); + }} + > + {name} +

+