[FEATURE] always show currently selected DM

pandora-client-web/src/components/directMessage/directMessage.tsx

@@ -72,7 +72,7 @@ function DirectMessageElement({ message, channel, account }: { message: DirectMe
 			</span>
 			{ ': ' }
 			<span className='direct-message-entry__content'>
-				{...message.message.map((c, i) => RenderChatPart(c, i, true))}
+				{ ...message.message.map((c, i) => RenderChatPart(c, i, true)) }
 			</span>
 		</div>
 	);
@@ -95,6 +95,9 @@ function DirectChannelInput(): ReactElement {
 	});
 
 	return (
-		<textarea onKeyDown={ onKeyDown } />
+		<textarea
+			onKeyDown={ onKeyDown }
+			placeholder={ `Send message to ${channel.account.name} (${channel.account.id})` }
+		/>
 	);
 }

pandora-client-web/src/components/directMessages/directMessages.scss

@@ -40,6 +40,11 @@
 			&.selected {
 				background-color: $grey-mid;
 			}
+
+			&.temp {
+				background-color: $grey-mid;
+				font-style: italic;
+			}
 		}
 
 		.input-line {

pandora-client-web/src/components/directMessages/directMessages.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { AccountId, IDirectoryDirectMessageInfo } from 'pandora-common';
+import React, { Suspense } from 'react';
+import { AccountId, IDirectoryDirectMessageAccount, IDirectoryDirectMessageInfo } from 'pandora-common';
 import { Observable, useObservable } from '../../observable';
 import { useCurrentAccount, useDirectoryConnector } from '../gameContext/directoryConnectorContextProvider';
 import { DirectMessage } from '../directMessage/directMessage';
@@ -32,6 +32,11 @@ export function DirectMessages(): React.ReactElement {
 			<div className='direct-messages__list'>
 				<input type='text' value={ filter } onChange={ (e) => setFilter(e.target.value) } placeholder='Filter' />
 				<Scrollbar color='dark' tag='ul'>
+					{ selected == null ? null : (
+						<Suspense>
+							<DirectMessageTempInfo selected={ selected } filtered={ filtered } />
+						</Suspense>
+					) }
 					{ filtered.map((i) => <DirectMessageInfo key={ i.id } info={ i } selected={ i.id === selected } />) }
 				</Scrollbar>
 				<OpenConversation />
@@ -41,6 +46,22 @@ export function DirectMessages(): React.ReactElement {
 	);
 }
 
+function DirectMessageTempInfo({ selected, filtered }: { selected: AccountId; filtered: readonly IDirectoryDirectMessageInfo[]; }) {
+	const directoryConnector = useDirectoryConnector();
+
+	if (filtered.some((i) => i.id === selected)) {
+		return null;
+	}
+
+	const chat = directoryConnector.directMessageHandler.loadChat(selected);
+
+	return (
+		<li className='temp'>
+			{ chat.account.name } ({ selected })
+		</li>
+	);
+}
+
 function DirectMessageInfo({ info, selected }: { info: Readonly<IDirectoryDirectMessageInfo>; selected: boolean; }): React.ReactElement {
 	const { id, account, hasUnread } = info;
 	const show = React.useCallback(() => SELECTED_DIRECT_MESSAGE.value = id, [id]);

pandora-client-web/src/networking/directMessageManager.ts

@@ -119,6 +119,10 @@ export class DirectMessageManager extends TypedEventEmitter<{ newMessage: Direct
 		}
 	}
 
+	public getChat(id: number): DirectMessageChannel | undefined {
+		return this._chats.get(id);
+	}
+
 	private _getChat(id: number): DirectMessageChannel {
 		let chat = this._chats.get(id);
 		if (chat === undefined) {