Ap/msg redesign (#91)

* messages ui redesign

* msg responsive design

* prettier

* flip order for messages: newest on bottom

* flip own messages to right, counterparty to left

* fix recipient chooser

* show conversations

---------

Co-authored-by: Alexey Popov <a.popov@tantumpay.com>
Co-authored-by: Alain Brenzikofer <alain@integritee.network>

components/ui/PrivateMessageHistory.vue

@@ -1,57 +1,51 @@
 <template>
-  <div v-if="show" class="mt-10 flex justify-between items-center">
-    <div class="title text-2xl font-bold tracking-tight text-white sm:text-2xl">
-      Messages
-    </div>
-  </div>
-  <div v-if="show" class="mb-10">
+  <div v-if="show" class="flex justify-between items-center"></div>
+  <div class="mb-10">
     <!-- Neuer Abschnitt, der nur angezeigt wird, wenn der "Private Balance" Tab aktiv ist -->
-    <div v-if="show" class="flex-1 overflow-y-auto bg-gray-900 mt-5 rounded-md">
+    <div ref="chatWindow" class="flex-1 overflow-y-auto bg-gray-900 rounded-md">
       <div
-        v-for="(note, index) in noteStore.getMessages"
+        v-for="(note, index) in noteStore.getMessagesWith(counterparty)"
         :key="index"
-        class="flex justify-between"
+        class="py-2 px-4"
       >
         <div
-          v-if="note.direction === NoteDirection.Incoming"
-          class="flex items-center gap-x-4 py-4 pl-4 pr-8 text-left sm:pl-6 lg:pl-8 bg-gray-700"
+          v-if="note.direction === NoteDirection.Outgoing"
+          class="flex justify-end"
         >
           <div class="flex flex-col">
-            <div class="text-sm font-medium text-gray-500">
-              From: {{ note.account }} at {{ formatDate(note.timestamp) }}
-            </div>
             <div
-              class="wallet-address mt-1 text-xs text-white whitespace-nowrap"
+              class="wallet-address text-right text-xs mb-1 font-medium text-gray-500"
             >
+              you
+            </div>
+            <div class="bg-blue-500 text-white rounded-lg px-4 py-2 max-w-xs">
               {{ note.note }}
             </div>
+            <span class="mt-1 text-xs text-right text-gray-500">{{
+              formatDate(note.timestamp)
+            }}</span>
           </div>
         </div>
         <div
-          v-if="note.direction === NoteDirection.Outgoing"
-          class="flex items-center gap-x-4 py-4 pl-4 pr-8 text-left sm:pl-6 lg:pl-8 bg-gray-900"
+          v-if="note.direction === NoteDirection.Incoming"
+          class="flex justify-start"
         >
           <div class="flex flex-col">
-            <div class="text-sm font-medium text-gray-500">
-              You to {{ note.account }} at {{ formatDate(note.timestamp) }}
-            </div>
             <div
-              class="wallet-address mt-1 text-xs text-white whitespace-nowrap"
+              class="wallet-address text-right text-xs mb-1 font-medium text-gray-500"
             >
+              {{ note.account }}
+            </div>
+            <div class="bg-white text-black rounded-lg px-4 py-2 max-w-xs">
               {{ note.note }}
             </div>
+            <span class="mt-1 text-xs text-right text-gray-500">{{
+              formatDate(note.timestamp)
+            }}</span>
           </div>
         </div>
       </div>
     </div>
-    <div class="mt-5 flex justify-center text-gray-500">
-      <button @click="fetchOlderBucket">
-        fetch more messages
-        {{ accountStore.hasInjector ? "(needs signature)" : "" }}
-      </button>
-    </div>
-    <!-- this is necessary to avoid the footer overlapping the text -->
-    <br /><br /><br /><br /><br /><br /><br />
   </div>
   <NoteDetailsOverlay
     :show="showViewMore"
@@ -62,11 +56,10 @@
 
 <script setup lang="ts">
 import { formatDate } from "@/helpers/date";
-import { ref, defineProps, defineExpose } from "vue";
+import { ref, defineProps, onMounted, watch, nextTick } from "vue";
 import { useAccount } from "@/store/account.ts";
 import { useNotes } from "@/store/notes.ts";
 import { Note, NoteDirection } from "@/lib/notes";
-import { divideBigIntToFloat } from "@/helpers/numbers";
 import NoteDetailsOverlay from "~/components/overlays/NoteDetailsOverlay.vue";
 
 const accountStore = useAccount();
@@ -77,7 +70,23 @@ const props = defineProps({
     type: Boolean,
     required: true,
   },
+  counterparty: {
+    type: String,
+    required: true,
+  },
 });
+const chatWindow = ref(null);
+
+watch(
+  () => noteStore.getMessagesWith(props.counterparty),
+  async () => {
+    await nextTick();
+    if (chatWindow.value) {
+      console.log("scrolling to bottom");
+      chatWindow.value.scrollTop = chatWindow.value.scrollHeight;
+    }
+  },
+);
 
 const showNote = ref<Note>(null);
 const showViewMore = ref(false);
@@ -99,21 +108,15 @@ const closeViewMore = () => {
   /* Versteckt überlaufenden Text */
   text-overflow: ellipsis;
   /* Zeigt '...' bei zu langem Text an */
-}
-
-/* Für mobile Bildschirme (max-width: 640px) */
-@media (max-width: 640px) {
-  .wallet-address {
-    max-width: 10ch;
-    /* Zeigt nur die ersten 5 Zeichen */
-  }
+  max-width: 10ch;
+  /* Maximale Länge: 10 Zeichen */
 }
 
 /* Für größere Bildschirme (ab 641px) */
 @media (min-width: 641px) {
   .wallet-address {
-    max-width: none;
-    /* Zeigt die komplette Adresse an */
+    max-width: 15ch;
+    /* Begrenze auch hier auf 10 Zeichen */
   }
 }
 

configs/chains.ts

@@ -27,7 +27,8 @@ export const chainConfigs: Record<ChainId, ChainConfig> = {
   },
   [ChainId.PaseoRelay]: {
     name: "Paseo Relay",
-    api: "wss://rpc.ibp.network/paseo",
+    api: "wss://paseo.dotters.network",
+    //api: "wss://rpc.ibp.network/paseo",
     faucetUrl: "https://faucet.polkadot.io/",
     //faucetUrl: "https://substratefaucet.xyz/paseo/ADDRESS"
   },