feat: upgrade dm styles

packages/app/src/Pages/MessagesPage.tsx

@@ -1,6 +1,7 @@
-import { useMemo } from "react";
-import { FormattedMessage } from "react-intl";
-import { HexKey, RawEvent } from "@snort/nostr";
+import React, { useMemo, useState } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { useNavigate } from "react-router-dom";
+import { HexKey, RawEvent, NostrPrefix } from "@snort/nostr";
 
 import UnreadCount from "Element/UnreadCount";
 import ProfileImage from "Element/ProfileImage";
@@ -9,9 +10,16 @@ import NoteToSelf from "Element/NoteToSelf";
 import useModeration from "Hooks/useModeration";
 import { useDmCache } from "Hooks/useDmsCache";
 import useLogin from "Hooks/useLogin";
+import usePageWidth from "Hooks/usePageWidth";
+import NoteTime from "Element/NoteTime";
+import DmWindow from "Element/DmWindow";
 
+import "./MessagesPage.css";
 import messages from "./messages";
 
+const TwoCol = 768;
+const ThreeCol = 1500;
+
 type DmChat = {
   pubkey: HexKey;
   unreadMessages: number;
@@ -21,7 +29,11 @@ type DmChat = {
 export default function MessagesPage() {
   const login = useLogin();
   const { isMuted } = useModeration();
+  const { formatMessage } = useIntl();
+  const navigate = useNavigate();
   const dms = useDmCache();
+  const [chat, setChat] = useState<string>();
+  const pageWidth = usePageWidth();
 
   const chats = useMemo(() => {
     if (login.publicKey) {
@@ -35,25 +47,39 @@ export default function MessagesPage() {
 
   const unreadCount = useMemo(() => chats.reduce((p, c) => p + c.unreadMessages, 0), [chats]);
 
+  function openChat(e: React.MouseEvent<HTMLDivElement>, pubkey: string) {
+    e.stopPropagation();
+    e.preventDefault();
+    if (pageWidth < TwoCol) {
+      navigate(`/messages/${hexToBech32(NostrPrefix.PublicKey, pubkey)}`);
+    } else {
+      setChat(pubkey);
+    }
+  }
+
   function noteToSelf(chat: DmChat) {
     return (
-      <div className="flex mb10" key={chat.pubkey}>
-        <NoteToSelf
-          clickable={true}
-          className="f-grow"
-          link={`/messages/${hexToBech32("npub", chat.pubkey)}`}
-          pubkey={chat.pubkey}
-        />
+      <div className="flex mb10" key={chat.pubkey} onClick={e => openChat(e, chat.pubkey)}>
+        <NoteToSelf clickable={true} className="f-grow" link="" pubkey={chat.pubkey} />
       </div>
     );
   }
 
   function person(chat: DmChat) {
+    if (!login.publicKey) return null;
     if (chat.pubkey === login.publicKey) return noteToSelf(chat);
     return (
-      <div className="flex mb10" key={chat.pubkey}>
-        <ProfileImage pubkey={chat.pubkey} className="f-grow" link={`/messages/${hexToBech32("npub", chat.pubkey)}`} />
-        <UnreadCount unread={chat.unreadMessages} />
+      <div className="flex mb10" key={chat.pubkey} onClick={e => openChat(e, chat.pubkey)}>
+        <ProfileImage pubkey={chat.pubkey} className="f-grow" link="" />
+        <div className="nowrap">
+          <small>
+            <NoteTime
+              from={newestMessage(dms, login.publicKey, chat.pubkey) * 1000}
+              fallback={formatMessage({ defaultMessage: "Just now" })}
+            />
+          </small>
+          {chat.unreadMessages > 0 && <UnreadCount unread={chat.unreadMessages} />}
+        </div>
       </div>
     );
   }
@@ -65,24 +91,28 @@ export default function MessagesPage() {
   }
 
   return (
-    <div className="main-content">
-      <div className="flex">
-        <h3 className="f-grow">
-          <FormattedMessage {...messages.Messages} />
-        </h3>
-        <button disabled={unreadCount <= 0} type="button" onClick={() => markAllRead()}>
-          <FormattedMessage {...messages.MarkAllRead} />
-        </button>
+    <div className="dm-page">
+      <div>
+        <div className="flex">
+          <h3 className="f-grow">
+            <FormattedMessage {...messages.Messages} />
+          </h3>
+          <button disabled={unreadCount <= 0} type="button" onClick={() => markAllRead()}>
+            <FormattedMessage {...messages.MarkAllRead} />
+          </button>
+        </div>
+        {chats
+          .sort((a, b) => {
+            return a.pubkey === login.publicKey
+              ? -1
+              : b.pubkey === login.publicKey
+              ? 1
+              : b.newestMessage - a.newestMessage;
+          })
+          .map(person)}
       </div>
-      {chats
-        .sort((a, b) => {
-          return a.pubkey === login.publicKey
-            ? -1
-            : b.pubkey === login.publicKey
-            ? 1
-            : b.newestMessage - a.newestMessage;
-        })
-        .map(person)}
+      {pageWidth >= TwoCol && chat && <DmWindow id={chat} />}
+      {pageWidth >= ThreeCol && <div></div>}
     </div>
   );
 }
@@ -126,7 +156,7 @@ function unreadDms(dms: RawEvent[], myPubKey: HexKey, pk: HexKey) {
   return dmsInChat(dms, pk).filter(a => a.created_at >= lastRead && a.pubkey !== myPubKey).length;
 }
 
-function newestMessage(dms: RawEvent[], myPubKey: HexKey, pk: HexKey) {
+function newestMessage(dms: readonly RawEvent[], myPubKey: HexKey, pk: HexKey) {
   if (pk === myPubKey) {
     return dmsInChat(
       dms.filter(d => isToSelf(d, myPubKey)),