chat layout

src/js/views/chat/ChatListItem.tsx

@@ -96,10 +96,10 @@ class ChatListItem extends BaseComponent<ChatListItemProps, ChatListItemState> {
           <div className="flex flex-col">
             <span className="name">
               <Name pub={this.props.chat} />
+              <small className="ml-2 latest-time text-neutral-500">{time}</small>
             </span>
-            <small className="latest-time">{time}</small>
+            <small className="text-neutral-500 truncate">{this.state.latestText}</small>
           </div>
-          <small className="latest">{this.state.latestText}</small>
           {unseenEl}
         </div>
       </div>

src/js/views/chat/ChatMessageForm.tsx

@@ -44,14 +44,19 @@ class ChatMessageForm extends BaseComponent<ChatMessageFormProps> {
     e.stopPropagation();
     const textEl = $(this.base).find('.new-msg');
     const text = textEl.val() as string;
+    console.log('text', text);
     if (!text.length) {
       return;
     }
+
     const content = await this.encrypt(text);
+    console.log('2text', text);
+
     const recipient = Key.toNostrHexAddress(this.props.activeChat);
     if (!recipient) {
       throw new Error('invalid public key ' + recipient);
     }
+    console.log('asdf');
     Events.publish({
       kind: 4,
       content,
@@ -80,13 +85,15 @@ class ChatMessageForm extends BaseComponent<ChatMessageFormProps> {
     return (
       <form
         autocomplete="off"
-        class={`message-form ${this.props.class || ''}`}
+        class={`flex flex-row gap-2 p-2 message-form fixed bottom-0 w-96 max-w-screen bg-black ${
+          this.props.class || ''
+        }`}
         onSubmit={(e: Event) => this.onSubmit(e)}
       >
         <input
+          className="input input-sm flex-1 new-msg"
           onInput={(e: Event) => this.onMsgTextInput(e)}
           onKeyDown={(e: KeyboardEvent) => this.onKeyDown(e)}
-          class="new-msg"
           type="text"
           placeholder="Type a message"
           autocomplete="off"
@@ -94,8 +101,8 @@ class ChatMessageForm extends BaseComponent<ChatMessageFormProps> {
           autocapitalize="sentences"
           spellCheck={true}
         />
-        <button style={{ marginRight: '0' }}>
-          <PaperAirplaneIcon onClick={(e: MouseEvent) => this.onSubmit(e as Event)} width="28" />
+        <button className="btn btn-neutral btn-sm" style={{ marginRight: '0' }}>
+          <PaperAirplaneIcon onClick={(e: MouseEvent) => this.onSubmit(e as Event)} width="24" />
         </button>
       </form>
     );

src/js/views/chat/PrivateChat.tsx

@@ -225,7 +225,11 @@ class PrivateChat extends PureComponent<PrivateChatProps, PrivateChatState> {
       });
 
       mainView = (
-        <div className="main-view" id="message-view" onScroll={() => this.onMessageViewScroll()}>
+        <div
+          className="main-view p-2 h-screen overflow-y-scroll overflow-x-hidden"
+          id="message-view"
+          onScroll={() => this.onMessageViewScroll()}
+        >
           <div id="message-list">
             {msgListContent}
             <p>
@@ -249,13 +253,11 @@ class PrivateChat extends PureComponent<PrivateChatProps, PrivateChatState> {
         <div id="scroll-down-btn" style={{ display: 'none' }} onClick={() => this.scrollDown()}>
           <ChevronDownIcon width="24" />
         </div>
-        <div className="chat-message-form">
-          <ChatMessageForm
-            key={this.props.id}
-            activeChat={this.props.id}
-            onSubmit={() => this.scrollDown()}
-          />
-        </div>
+        <ChatMessageForm
+          key={this.props.id}
+          activeChat={this.props.id}
+          onSubmit={() => this.scrollDown()}
+        />
       </>
     ) : (
       ''
@@ -268,7 +270,7 @@ class PrivateChat extends PureComponent<PrivateChatProps, PrivateChatState> {
         <Helmet>
           <title>{(this.chat && this.chat.name) || 'Messages'}</title>
         </Helmet>
-        <div id="chat-main" ref={this.ref} className={`${this.props.id ? '' : 'hidden'} flex-1`}>
+        <div id="chat-main" ref={this.ref} className={`${this.props.id ? '' : 'hidden'} flex-1 pb-12`}>
           {this.renderMainView()} {this.renderMsgForm()}
         </div>
       </>