navigate to DM from UserDetail right panel (#427)

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<UI_Interaction_Event>();
     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<NostrEvent>();
@@ -148,7 +149,7 @@ export class App {
         public readonly eventBus: EventBus<UI_Interaction_Event>,
         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<UI_Interaction_Event>;
         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;
 };

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<NostrEvent>;
     lamport: LamportTime;
     installPrompt: InstallPrompt;
@@ -119,7 +122,7 @@ const handle_update_event = async (chan: PutChannel<true>, args: {
     dbView: Database_View;
     pool: ConnectionPool;
     popOver: PopOverInputChannel;
-    rightPanel: Channel<() => ComponentChildren>;
+    rightPanel: RightPanelChannel;
     newNostrEventChannel: Channel<NostrEvent>;
     lamport: LamportTime;
     installPrompt: InstallPrompt;
@@ -302,6 +305,8 @@ const handle_update_event = async (chan: PutChannel<true>, args: {
         //
         else if (event.type == "ChangeNavigation") {
             model.navigationModel.activeNav = event.id;
+        } else if (event.type == "CloseRightPanel") {
+            app.rightPanelInputChan.put(undefined);
         } //
         //
         // DM

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<RightPanelProps, RightPanelState> {
         );
     }
 }
+
+export type CloseRightPanel = {
+    type: "CloseRightPanel";
+};

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<DirectMessagePanelUpdate | BlockUser | UnblockUser>;
+    emit: emitFunc<DirectMessagePanelUpdate | BlockUser | UnblockUser | SelectConversation | CloseRightPanel>;
 };
 
 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)}
             />
-            <h1 class={`text-[#F3F4EA] truncate text-[1.4rem] my-4 max-w-full text-center`}>
+            <div class="flex flex-col items-center">
+                <h1
+                    class={`text-[#F3F4EA] truncate text-[1.4rem] my-4 max-w-full text-center` +
+                        ` inline-block hover:text-[#60a5fa] hover:cursor-pointer`}
+                    onClick={(_) => {
+                        props.emit({
+                            type: "SelectConversation",
+                            pubkey: props.pubkey,
+                        });
+                        props.emit({
+                            type: "CloseRightPanel",
+                        });
+                    }}
+                >
                     {name}
                 </h1>
+            </div>
             <div class={`flex items-start overflow-hidden w-full group`}>
                 <KeyIcon
                     class={`w-6 h-6 mr-2`}

libs/nostr.ts

@@ -1 +1 @@
-Subproject commit 03cfa2f2fe3a80f8678a0410610c97eb1ec5e145
+Subproject commit 91c3c3aa412008465e04c938cdc8b210c88b79ed