New sidebar with navigation added: UI changes and small fixes (#101)

* new sidebar with navigation added. ui changes and small fixes.

* prettier

* fix warnings

* fix dangling session proxies hwn changing role

---------

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

app.vue

@@ -1,7 +1,16 @@
 <script setup lang="ts"></script>
 
 <template>
-  <NuxtLayout />
+  <div>
+    <NuxtLoadingIndicator />
+
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+
+    <UNotifications />
+    <UModals />
+  </div>
 </template>
 
 <style lang="scss">

components/Logo/incognitee-logo.vue

@@ -2,7 +2,7 @@
   <svg
     width="234"
     height="30"
-    viewBox="0 0 330 30"
+    viewBox="0 0 236 30"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >

components/overlays/SessionProxiesOverlay.vue

@@ -273,9 +273,6 @@ const modifySessionProxyRole = async (
       " expiry update to: " +
       expiry,
   );
-  // clear the cached proxy entry at old role. it will be added again with the new role
-  // at the next fetchIncogniteeBalance
-  accountStore.removeProxyForRole(bestSessionProxyRole.value);
   const nonce = new u32(
     new TypeRegistry(),
     accountStore.nonce[incogniteeSidechain.value],

components/tabs/MessagingTab.vue

@@ -50,16 +50,23 @@
     </div>
     <!-- Overlay End -->
 
-    <div class="bg-gray-900 text-white max-h-[650px] flex mt-10">
+    <div class="bg-incognitee-blue text-white flex">
       <!-- Form starts here -->
 
       <!-- Sidebar -->
       <div
         v-if="!isMobile || !showChatDetail"
         :class="isMobile ? 'w-full' : 'md:w-1/3'"
-        class="bg-gray-800 border-r border-gray-700 flex flex-col"
+        class="bg-incognitee-blue border-r border-gray-700 flex flex-col"
       >
         <div class="px-4 py-4 flex items-center justify-between">
+          <!-- Sidebar-Button -->
+          <button
+            @click="eventBus.emit('toggleSidebar')"
+            class="lg:hidden text-white focus:outline-none text-2xl"
+          >
+            ☰
+          </button>
           <!-- Linksbündiger Titel -->
           <div
             class="title text-2xl font-bold tracking-tight text-white sm:text-2xl"
@@ -168,7 +175,7 @@
       <div
         v-if="!isMobile || showChatDetail"
         :class="isMobile ? 'w-full' : 'md:w-2/3'"
-        class="bg-gray-900 flex flex-col"
+        class="bg-incognitee-blue flex flex-col h-screen relative"
       >
         <!-- Header -->
         <div
@@ -184,30 +191,27 @@
           <h2 class="text-lg font-bold">
             {{
               recipientValid(conversationAddress)
-                ? "Chat with " +
-                  (maybeUsername(conversationAddress) || "") +
+                ? (maybeUsername(conversationAddress) || "") +
                   " " +
-                  conversationAddress.slice(0, 12) +
-                  "..."
+                  (isMobile
+                    ? conversationAddress.slice(0, 10) + "..." // Mobile: Abgekürzt
+                    : conversationAddress) // Desktop: Vollständige Adresse
                 : "Chat"
             }}
           </h2>
         </div>
         <!-- Chat Messages -->
-        <div class="flex-1 overflow-y-auto">
+        <div class="flex-1 overflow-y-auto" style="height: calc(100vh - 12rem)">
           <div
             v-if="eventHorizon"
-            class="ml-5 mt-5 flex justify-center text-gray-500"
+            class="my-5 mx-5 flex text-center text-xs text-gray-500"
           >
-            <i
-              >messages before {{ formatMoment(eventHorizon) }} have been purged
-              from Incognitee state. more recent messages can be polled in
-              batches</i
-            >
+            messages before {{ formatMoment(eventHorizon) }} have been purged
+            from Incognitee state. more recent messages can be polled in batches
           </div>
           <div
             v-if="unfetchedBucketsCount > 0"
-            class="mt-5 flex justify-center text-gray-500"
+            class="my-5 mx-5 flex text-center text-xs text-gray-500"
           >
             <button @click="fetchOlderBucket">
               query more messages
@@ -228,7 +232,7 @@
         <!-- Input Box -->
         <div
           v-if="recipientValid(conversationAddress)"
-          class="border-t border-gray-700"
+          class="border-t border-gray-700 bg-gray-800 absolute bottom-0 left-0 right-0 z-10"
         >
           <div class="flex items-center bg-gray-800 px-4 py-2">
             <form class="flex w-full" @submit.prevent="submitSendForm">
@@ -385,10 +389,11 @@
 <script setup lang="ts">
 import PrivateMessageHistory from "~/components/ui/PrivateMessageHistory.vue";
 import { incogniteeSidechain } from "~/lib/environmentConfig";
+import { eventBus } from "@/helpers/eventBus";
 import { INCOGNITEE_TX_FEE } from "~/configs/incognitee";
 import { Health, useSystemHealth } from "~/store/systemHealth";
 import { TypeRegistry, u32 } from "@polkadot/types";
-import { defineProps, ref, watch, computed, onMounted } from "vue";
+import { defineProps, ref, watch, computed, onMounted, onUnmounted } from "vue";
 import { useAccount } from "~/store/account";
 import { useIncognitee } from "~/store/incognitee";
 import OverlayDialog from "~/components/overlays/OverlayDialog.vue";
@@ -709,47 +714,60 @@ const inputText = ref("");
 
 <style scoped>
 textarea {
-  resize: none; /* Disable resizing for better layout control */
+  resize: none;
+  /* Disable resizing for better layout control */
 }
 
 .relative {
-  position: relative; /* Ensure the counter is positioned relative to the input */
+  position: relative;
+  /* Ensure the counter is positioned relative to the input */
 }
+
 .bg-opacity-75 {
   background-color: rgba(0, 0, 0, 0.828);
 }
 
 .fixed {
-  z-index: 50; /* Ensure overlay is on top */
+  z-index: 50;
+  /* Ensure overlay is on top */
 }
 
 .pointer-events-none {
   pointer-events: none;
 }
+
 /* Für Webkit-basierte Browser (Chrome, Safari, Edge) */
 ::-webkit-scrollbar {
-  width: 5px; /* Breite der Scrollbar */
+  width: 5px;
+  /* Breite der Scrollbar */
 }
 
 ::-webkit-scrollbar-track {
-  background: #1f293700; /* Hintergrund des Tracks */
+  background: #1f293700;
+  /* Hintergrund des Tracks */
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #4b556300; /* Farbe der Scrollbar */
-  border-radius: 6px; /* Runde Ecken */
-  border: 3px solid #1f2937; /* Abstand zur Scrollspur */
+  background-color: #4b556300;
+  /* Farbe der Scrollbar */
+  border-radius: 6px;
+  /* Runde Ecken */
+  border: 3px solid #1f2937;
+  /* Abstand zur Scrollspur */
 }
 
 /* Für Firefox */
 * {
-  scrollbar-width: thin; /* Dünne Scrollbar */
-  scrollbar-color: #4b5563 #1f293700; /* Daumen- und Trackfarben */
+  scrollbar-width: thin;
+  /* Dünne Scrollbar */
+  scrollbar-color: #4b5563 #1f293700;
+  /* Daumen- und Trackfarben */
 }
 
 /* Optional: Hover-Effekt auf der Scrollbar */
 ::-webkit-scrollbar-thumb:hover {
-  background-color: #6b7280; /* Hover-Farbe der Scrollbar */
+  background-color: #6b7280;
+  /* Hover-Farbe der Scrollbar */
 }
 
 .wallet-address {
@@ -760,14 +778,14 @@ textarea {
   /* Versteckt überlaufenden Text */
   text-overflow: ellipsis;
   /* Zeigt '...' bei zu langem Text an */
-  max-width: 15ch;
+  max-width: 10ch;
   /* Maximale Länge: 10 Zeichen */
 }
 
 /* Für größere Bildschirme (ab 641px) */
 @media (min-width: 641px) {
   .wallet-address {
-    max-width: 15ch;
+    max-width: 10ch;
     /* Begrenze auch hier auf 10 Zeichen */
   }
 }

components/tabs/SwapTab.vue

@@ -1,37 +1,47 @@
 <template>
-  <div class="mt-3 text-center sm:mt-5">
+  <div class="mt-3 sm:mt-5 px-3">
+    <button
+      @click="eventBus.emit('toggleSidebar')"
+      class="lg:hidden text-white focus:outline-none text-2xl"
+    >
+      ☰
+    </button>
+  </div>
+  <div class="mt-3 text-center sm:mt-5 px-3">
     <span as="h3" class="text-base font-semibold leading-6 text-white"
       >Private Swaps
     </span>
 
     <div class="mt-2">
-      <p class="text-sm text-gray-400 text-justify">COMING SOON<sup>TM</sup></p>
-      <p class="text-sm text-gray-400 text-justify">
+      <div class="text-sm text-gray-400 text-justify">
+        COMING SOON<sup>TM</sup>
+      </div>
+      <div class="text-sm text-gray-400 text-justify my-3">
         Whenever you use a centralized exchange (CEX), you trust them to operate
         a fair market and protect your data. Even worse, you hand over custody
         over your assets to them. The upside is: fast trading and something like
         privacy (in the best case your exposing your data and behavior to one
         entity only, not to the public)
-      </p>
-      <p class="text-sm text-gray-400 text-justify">
+      </div>
+      <div class="text-sm text-gray-400 text-justify my-3">
         If you need more autonomy, you may want to use decentralized exchanges
         (DEX). There, you keep custody over your assets and no single entity has
         the power to deny you access to the trading platform. However, this
         freedom comes with downsides: High latency and front-running
-      </p>
-      <p class="text-sm text-gray-400 text-justify">
+      </div>
+      <div class="text-sm text-gray-400 text-justify my-3">
         Incognitee can support shielding of various digital assets and offer
         automated market makers (AMM, similar to uniswap) on L2. This will
         prevent front-running because no one can see the transactions before
         they are executed. It also offers enhanced speed because of subsecond
         block times on Incognitee
-      </p>
-      <!-- this is necessary to avoid the footer overlapping the text -->
-      <br /><br /><br /><br /><br /><br /><br />
+      </div>
     </div>
   </div>
 </template>
-
+<script setup lang="ts">
+import { eventBus } from "@/helpers/eventBus";
+</script>
 <style scoped>
 h1 {
   font-size: 2em; /* Adjust as needed */