Fix some DM stuff

ROADMAP.md

@@ -1,8 +1,5 @@
 # Current
 
-- [ ] Instead of doing streamContext, listen, at least on note detail page
-- [ ] Support https://github.com/nostr-protocol/nips/pull/211 as a bech32 entity
-
 - [ ] Fix performance issues
   - [ ] https://github.com/techfort/LokiJS
     - Use indexed adapter github.com/techfort/LokiJS/blob/master/tutorials/Persistence%20Adapters.md and partitioning adapter

src/partials/Channel.svelte

@@ -32,8 +32,8 @@
     )
   }
 
-  // flex-col means the first is the last
-  const getLastListItem = () => document.querySelector("ul[class=channel-messages] li")
+  // flex-reverse-col means the first is the last
+  const getLastListItem = () => document.querySelector("ul.channel-messages li")
 
   const stickToBottom = async (behavior, cb) => {
     const shouldStick = window.scrollY + window.innerHeight > document.body.scrollHeight - 200
@@ -113,7 +113,7 @@
 
 <div class="flex h-full gap-4">
   <div class="relative w-full">
-    <div class="py-18 flex h-full flex-col pb-20">
+    <div class="py-18 flex h-screen flex-col pb-20">
       <ul
         class="channel-messages flex flex-grow flex-col-reverse justify-start overflow-auto p-4 pb-6">
         {#each annotatedMessages as m (m.id)}
@@ -128,9 +128,7 @@
         {/await}
       </ul>
     </div>
-    <div
-      class="fixed top-0 z-20 w-full border-b border-solid
-                border-gray-6 bg-gray-7 p-4">
+    <div class="fixed top-0 z-20 w-full border-b border-solid border-gray-6 bg-gray-7">
       <slot name="header" />
     </div>
     <div

src/routes/ChatDetail.svelte

@@ -52,7 +52,7 @@
 </script>
 
 <Channel {loadMessages} {listenForMessages} {sendMessage}>
-  <div slot="header" class="flex items-start gap-4">
+  <div slot="header" class="flex items-start gap-4 p-4">
     <div class="flex items-center gap-4">
       <Anchor type="unstyled" class="fa fa-arrow-left cursor-pointer text-2xl" href="/chat" />
       <div

src/routes/MessagesDetail.svelte

@@ -18,6 +18,7 @@
   import {routes} from "src/app/ui"
   import {lastChecked} from "src/app/listener"
   import PersonCircle from "src/partials/PersonCircle.svelte"
+  import PersonAbout from "src/partials/PersonAbout.svelte"
 
   export let entity
 
@@ -73,7 +74,7 @@
 </script>
 
 <Channel {loadMessages} {listenForMessages} {sendMessage}>
-  <div slot="header" class="flex items-start gap-4">
+  <div slot="header" class="mb-2 flex h-20 items-start gap-4 overflow-hidden p-4">
     <div class="flex items-center gap-4">
       <Anchor type="unstyled" class="fa fa-arrow-left cursor-pointer text-2xl" href="/messages" />
       <PersonCircle person={$person} size={12} />
@@ -90,7 +91,7 @@
           <span class="text-gray-1">Encrypted</span>
         </div>
       </div>
-      <div>{$person.kind0?.about || ""}</div>
+      <PersonAbout truncate person={$person} />
     </div>
   </div>
   <div