From 0af032895a97166269b23cf1510086857cacefa9 Mon Sep 17 00:00:00 2001
From: Branislav Hozza <brankohozza@gmail.com>
Date: Sat, 13 Apr 2024 12:55:21 +0200
Subject: [PATCH 1/6] :recycle: redisegn layout and remove naive-ui

---
 .env.example                                  |  1 +
 app.config.ts                                 | 28 +--------
 app.vue                                       | 25 +-------
 components/chat/ChatRow.vue                   | 18 +++---
 components/chat/MessageSender.vue             |  4 +-
 components/layout/LeftSideContent.vue         | 52 ++++++++++------
 components/layout/NavigationComponent.vue     | 20 +++++--
 .../{LeftSideChat.vue => RightSideChat.vue}   | 60 +++++++++++++------
 components/layout/RightSideContent.vue        | 13 ----
 layouts/chat.vue                              | 40 ++++---------
 layouts/default.vue                           | 36 +++--------
 layouts/plain.vue                             | 37 ++++--------
 nuxt.config.ts                                |  1 -
 package.json                                  |  1 -
 pages/chat/index.vue                          |  4 +-
 pages/index.vue                               |  3 -
 16 files changed, 139 insertions(+), 204 deletions(-)
 rename components/layout/{LeftSideChat.vue => RightSideChat.vue} (69%)
 delete mode 100644 components/layout/RightSideContent.vue

diff --git a/.env.example b/.env.example
index 31b2d4d..ff7c6a8 100644
--- a/.env.example
+++ b/.env.example
@@ -1,5 +1,6 @@
 # REST API configuration
 REST_API_URL=
+SIGNAL_R_URL=
 
 # .NET backend runs locally on HTTPS (must be set to 0), for production must be set to 1
 NODE_TLS_REJECT_UNAUTHORIZED=
diff --git a/app.config.ts b/app.config.ts
index 96755d7..b2d0682 100644
--- a/app.config.ts
+++ b/app.config.ts
@@ -1,27 +1 @@
-import { _colors, _fontFamily } from '#tailwind-config/theme.mjs';
-
-export default defineAppConfig({
-  naiveui: {
-    themeConfig: {
-      shared: {
-        common: {
-          fontFamily: _fontFamily.sans.join(', '),
-        },
-      },
-      light: {
-        common: {
-          primaryColor: _colors.blue[600],
-          primaryColorHover: _colors.blue[500],
-          primaryColorPressed: _colors.blue[700],
-        },
-      },
-      dark: {
-        common: {
-          primaryColor: _colors.blue[500],
-          primaryColorHover: _colors.blue[400],
-          primaryColorPressed: _colors.blue[600],
-        },
-      },
-    },
-  },
-});
+export default defineAppConfig({});
diff --git a/app.vue b/app.vue
index 96199ba..f9b20d5 100644
--- a/app.vue
+++ b/app.vue
@@ -1,13 +1,7 @@
 <template>
-  <naive-config :theme-config="themeConfig">
-    <n-message-provider>
-      <n-layout>
-        <NuxtLayout>
-          <NuxtPage />
-        </NuxtLayout>
-      </n-layout>
-    </n-message-provider>
-  </naive-config>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>
 <script setup lang="ts">
 import { useTokenStore } from '~/store';
@@ -19,17 +13,4 @@ onMounted(() => {
   // Mock posts
   tokenStore.setPosts(MOCKED_POSTS);
 });
-
-const themeConfig = {
-  shared: {
-    common: {
-      baseColor: 'rgb(244,244,249)',
-      bodyColor: 'rgb(244,244,249)',
-      inputColor: '#fff',
-      textColor1: '#000',
-      textColor2: '#000',
-      textColor3: '#000',
-    },
-  },
-};
 </script>
diff --git a/components/chat/ChatRow.vue b/components/chat/ChatRow.vue
index a87e3a9..4dc9fac 100644
--- a/components/chat/ChatRow.vue
+++ b/components/chat/ChatRow.vue
@@ -1,15 +1,7 @@
 <template>
-  <nuxt-link :to="'/chat/' + chat.id" class="w-full">
-    <span class="hidden w-0 md:flex md:gap-2 md:px-2 md:text-xl md:items-center md:justify-start md:w-full md:h-10">
-      <div class="w-5 h-5 bg-slate-500 rounded-full"></div>
-      <p>{{ chat.name ?? chat.users }}</p>
-    </span>
-
-    <span class="md:hidden md:w-0 flex justify-end w-full h-10 gap-1 px-3">
-      <p class="w-8 h-8 flex justify-center items-center bg-slate-200 rounded-full">
-        {{ chat.name?.charAt(0) ?? '?' }}
-      </p>
-    </span>
+  <nuxt-link :to="'/chat/' + chat.id" class="w-full flex gap-2 text-xl items-center justify-start h-10">
+    <span class="w-5 h-5 border border-pink-500 rounded-full" :class="[selected ? 'bg-pink-500' : 'bg-transparent']" />
+    <p>{{ chat.name ?? chat.users }}</p>
   </nuxt-link>
 </template>
 
@@ -21,5 +13,9 @@ defineProps({
     type: Object as PropType<ChatResponseDTO>,
     required: true,
   },
+  selected: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>
diff --git a/components/chat/MessageSender.vue b/components/chat/MessageSender.vue
index e469c00..500cc95 100644
--- a/components/chat/MessageSender.vue
+++ b/components/chat/MessageSender.vue
@@ -15,6 +15,8 @@ const props = defineProps({
   },
 });
 
+const logger = useLogger('chat::message-sender');
+
 const emit = defineEmits<{
   (e: 'message', message: ChatMessageResponseDTO): void;
   (e: 'error', error: Error): void;
@@ -29,7 +31,7 @@ const sendMessage = async () => {
     emit('message', newMess);
     message.value = '';
   } catch (e) {
-    console.error(e);
+    logger.error(e);
     emit('error', e as Error);
   }
 };
diff --git a/components/layout/LeftSideContent.vue b/components/layout/LeftSideContent.vue
index d261e9b..9e26fbe 100644
--- a/components/layout/LeftSideContent.vue
+++ b/components/layout/LeftSideContent.vue
@@ -1,16 +1,18 @@
 <template>
-  <div class="h-full border-r my-2 border-gray-400 p-2">
-    <ul class="flex flex-col left-nav items-center md:items-start">
-      <li v-for="link in links" :key="link.link" class="w-full">
-        <NuxtLink :to="link.link">
-          <span class="flex gap-1 px-2 text-xl items-center justify-start w-full h-10">
-            <icon size="24" :name="link.icon" />
-            <span class="label">{{ link.name }}</span>
-          </span>
+  <aside class="left-nav" :class="[expanded ? 'left-nav-expanded' : 'left-nav-collapsed']">
+    <ul id="navigation-links" :class="{ 'items-start': expanded, 'items-center': !expanded }">
+      <li class="nav-item" @click="expanded = !expanded">
+        <icon size="24" name="mdi:arrow-collapse-right" :class="[!expanded ? 'rotate-0' : 'rotate-180']" />
+        <span v-if="expanded" class="label">Collapse menu</span>
+      </li>
+      <li v-for="link in links" :key="link.link">
+        <NuxtLink :to="link.link" class="nav-item">
+          <icon size="24" :name="link.icon" />
+          <span v-if="expanded" class="label">{{ link.name }}</span>
         </NuxtLink>
       </li>
     </ul>
-  </div>
+  </aside>
 </template>
 
 <script lang="ts" setup>
@@ -22,6 +24,8 @@ interface Link {
   link: string;
 }
 
+const expanded = ref(false);
+
 const accountStore = useAccountStore();
 
 const links = computed<Link[]>(() =>
@@ -35,12 +39,12 @@ const links = computed<Link[]>(() =>
         {
           name: 'Chats',
           link: '/chat',
-          icon: 'mdi:group',
+          icon: 'mdi:message-outline',
         },
         {
           name: 'Signing test',
           link: '/sign',
-          icon: 'mdi:graph-line',
+          icon: 'mdi:file-sign',
         },
         {
           name: 'Settings',
@@ -59,14 +63,26 @@ const links = computed<Link[]>(() =>
 </script>
 <style>
 .left-nav {
-  a {
-    @apply flex justify-end md:justify-center items-center gap-1;
-    .label {
-      @apply hidden md:block;
-    }
+  @apply flex flex-col w-full p-2 h-full items-start bg-slate-900;
+
+  #navigation-links {
+    @apply w-full flex flex-col  gap-4 p-2;
+  }
+
+  .nav-item {
+    @apply flex justify-start items-center gap-2 text-white;
   }
-  li:not(:has(> .router-link-active)) {
-    @apply text-gray-600;
+
+  li:has(> .router-link-active) .nav-item {
+    @apply text-pink-200;
+  }
+
+  &.left-nav-expanded {
+    @apply w-60;
+  }
+
+  &.left-nav-collapsed {
+    @apply w-16;
   }
 }
 </style>
diff --git a/components/layout/NavigationComponent.vue b/components/layout/NavigationComponent.vue
index 707f795..e2f0950 100644
--- a/components/layout/NavigationComponent.vue
+++ b/components/layout/NavigationComponent.vue
@@ -1,16 +1,24 @@
 <template>
-  <div class="flex items-center justify-between w-full border-b-2 bg-slate-600 text-white p-4">
-    <NuxtLink to="/" class="text-xl">TokenGram</NuxtLink>
+  <nav class="flex items-center justify-between w-full bg-black text-white p-4">
+    <NuxtLink to="/" class="text-xl font-mono text-pink-500 font-bold">TokenGram</NuxtLink>
     <span class="w-1/2">
       <SearchBar />
     </span>
-    <button v-if="!account" class="border-2 p-2 rounded-md w-200" @click="connectWallet">Connect wallet</button>
-    <button v-else class="border-2 p-2 rounded-md" @click="disconnectWallet">Disconnect wallet</button>
-  </div>
+    <button v-if="!account" class="border-2 p-2 font-mono rounded-md w-200" @click="connectWallet">
+      Connect wallet
+    </button>
+    <button
+      v-else
+      class="border-2 border-pink-500 text-pink-500 font-semibold p-2 font-mono rounded-md"
+      @click="disconnectWallet"
+    >
+      Disconnect wallet
+    </button>
+  </nav>
 </template>
 <script lang="ts" setup>
 import SearchBar from '../controls/SearchBar.vue';
-import type { VerifyNonce } from '~/types/auth';
+import type { VerifyNonce } from '~/types/dtos';
 import { useAccountStore } from '~/store';
 
 const { $web3 } = useNuxtApp();
diff --git a/components/layout/LeftSideChat.vue b/components/layout/RightSideChat.vue
similarity index 69%
rename from components/layout/LeftSideChat.vue
rename to components/layout/RightSideChat.vue
index 79e34f3..1d8f486 100644
--- a/components/layout/LeftSideChat.vue
+++ b/components/layout/RightSideChat.vue
@@ -1,16 +1,20 @@
 <template>
-  <div class="h-full border-r my-2 border-gray-400 md:py-2">
+  <aside class="right-nav" :class="[expanded ? 'right-nav-expanded' : 'right-nav-collapsed']">
     <teleport to="body">
       <create-chat-modal v-if="openedModal" @close="openedModal = false" />
       <error-modal v-if="error" :error="error" @close="error = null" />
     </teleport>
-    <ul class="flex flex-col items-start">
-      <li v-if="hasInvitations" class="w-full text-xl border-b-2 mb-2">Invitations</li>
-      <li
-        v-for="invitation in invitations"
-        :key="invitation.chat.id"
-        class="w-full flex justify-between items-center border-b py-2"
-      >
+    <span
+      class="text-white py-2 flex gap-2"
+      :class="{ 'w-full px-2 border-b border-pink-500': expanded }"
+      @click="expanded = !expanded"
+    >
+      <icon size="24" name="mdi:message-outline" />
+      <span v-if="expanded" class="label">Collapse chats</span>
+    </span>
+    <ul v-if="expanded" id="side-items" :class="{ 'items-start': expanded, 'items-center': !expanded }">
+      <li v-if="hasInvitations" class="side-item text-xl border-b border-pink-500">Invitations</li>
+      <li v-for="invitation in invitations" :key="invitation.chat.id" class="side-item">
         {{ invitation.chat.name }}
         <span class="flex gap-1">
           <button
@@ -24,29 +28,24 @@
           </button>
         </span>
       </li>
-      <li class="w-full text-xl border-b-2 mb-2">Chats</li>
-      <li class="w-full p-2 flex justify-center items-center">
+      <li class="side-item text-2xl pb-2 border-b border-pink-500">Chats</li>
+      <li class="side-item">
         <button
-          class="w-full rounded p-2 bg-blue-300 hover:bg-blue-200 cursor-pointer flex justify-center items-center"
+          class="w-full flex justify-center items-center rounded p-2 bg-pink-500 hover:bg-pink-400 cursor-pointer"
           @click="createChat"
         >
           New chat
         </button>
       </li>
-      <li
-        v-for="chat in chats"
-        :key="chat.id"
-        class="w-full py-2 px-2 border-b flex justify-between gap-2"
-        :class="[isSelected(chat.id) ? 'bg-slate-400' : '']"
-      >
+      <li v-for="chat in chats" :key="chat.id" class="side-item">
         <chat-row :chat="chat" :selected="isSelected(chat.id)" />
 
-        <button class="bg-slate-300 hover:bg-slate-200 rounded py-1 px-1 w-10" @click="leaveChat(chat.id)">
+        <button class="text-pink-500 flex items-center justify-center rounded w-20 h-10" @click="leaveChat(chat.id)">
           <Icon name="mdi:chat-remove-outline" />
         </button>
       </li>
     </ul>
-  </div>
+  </aside>
 </template>
 <script setup lang="ts">
 import { HubConnectionState } from '@microsoft/signalr';
@@ -56,6 +55,8 @@ import CreateChatModal from '~/components/chat/CreateChatModal.vue';
 
 import { useAccountStore, useChatStore } from '~/store';
 
+const expanded = ref(false);
+
 const accountStore = useAccountStore();
 const chatStore = useChatStore();
 
@@ -146,3 +147,24 @@ onMounted(async () => {
   }
 });
 </script>
+<style scoped>
+.right-nav {
+  @apply flex flex-col w-full p-4 h-full items-center bg-slate-900;
+
+  #side-items {
+    @apply w-full flex flex-col  gap-4;
+  }
+
+  .side-item {
+    @apply w-full flex justify-start items-center gap-2 text-white;
+  }
+
+  &.right-nav-expanded {
+    @apply w-80;
+  }
+
+  &.right-nav-collapsed {
+    @apply w-16;
+  }
+}
+</style>
diff --git a/components/layout/RightSideContent.vue b/components/layout/RightSideContent.vue
deleted file mode 100644
index 9d58dde..0000000
--- a/components/layout/RightSideContent.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div class="hidden md:flex h-full border-l my-2 border-gray-400 p-2 flex-col gap-2">
-    <h3 class="text-xl text-gray-600">Recommended</h3>
-    <hr />
-    <ul class="flex flex-col gap-1">
-      <li v-for="profile of profiles" :key="profile" class="underline">{{ profile }}</li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const profiles: string[] = ['0x1312f31ef12ef12e', '0x3212f31ef12ef12e', '0x2312f31ef12ef12e'];
-</script>
diff --git a/layouts/chat.vue b/layouts/chat.vue
index 716379d..04a0015 100644
--- a/layouts/chat.vue
+++ b/layouts/chat.vue
@@ -1,38 +1,22 @@
 <template>
-  <n-layout class="h-screen">
-    <n-layout-header> <navigation-component /> </n-layout-header>
-    <n-layout-content has-sider content-class="content-style">
-      <n-layout-sider>
-        <left-side-chat />
-      </n-layout-sider>
-      <div class="w-full flex-col px-4">
+  <div class="h-screen">
+    <header><navigation-component /></header>
+    <main class="flex h-full">
+      <left-side-content />
+      <div class="w-full h-full p-4">
         <slot />
       </div>
-    </n-layout-content>
-    <n-layout-footer>
+      <right-side-chat />
+    </main>
+    <footer>
       <footer-component />
-    </n-layout-footer>
-  </n-layout>
+    </footer>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import NavigationComponent from '~/components/layout/NavigationComponent.vue';
 import FooterComponent from '~/components/layout/FooterComponent.vue';
-import LeftSideChat from '~/components/layout/LeftSideChat.vue';
+import LeftSideContent from '~/components/layout/LeftSideContent.vue';
+import RightSideChat from '~/components/layout/RightSideChat.vue';
 </script>
-
-<style scoped>
-.n-layout-header,
-.n-layout-content,
-.n-layout-footer {
-  padding: 0;
-  background-color: inherit;
-}
-:deep(.content-style) {
-  min-height: calc(100vh - 120px);
-}
-
-.n-layout-sider {
-  @apply w-[60px] md:w-[300px] !important;
-}
-</style>
diff --git a/layouts/default.vue b/layouts/default.vue
index e10545a..21a30bb 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,18 +1,16 @@
 <template>
-  <n-layout class="h-screen">
-    <n-layout-header> <navigation-component /> </n-layout-header>
-    <n-layout-content has-sider content-class="content-style">
-      <n-layout-sider>
-        <left-side-content />
-      </n-layout-sider>
-      <div class="w-full h-full px-4">
+  <div class="h-screen">
+    <header><navigation-component /></header>
+    <main class="flex h-full">
+      <left-side-content />
+      <div class="w-full h-full p-4">
         <slot />
       </div>
-    </n-layout-content>
-    <n-layout-footer>
+    </main>
+    <footer>
       <footer-component />
-    </n-layout-footer>
-  </n-layout>
+    </footer>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -20,19 +18,3 @@ import NavigationComponent from '~/components/layout/NavigationComponent.vue';
 import FooterComponent from '~/components/layout/FooterComponent.vue';
 import LeftSideContent from '~/components/layout/LeftSideContent.vue';
 </script>
-
-<style scoped>
-.n-layout-header,
-.n-layout-content,
-.n-layout-footer {
-  padding: 0;
-  background-color: inherit;
-}
-:deep(.content-style) {
-  min-height: calc(100vh - 120px);
-}
-
-.n-layout-sider {
-  @apply w-[60px] md:w-[300px] !important;
-}
-</style>
diff --git a/layouts/plain.vue b/layouts/plain.vue
index 40cd06d..2260c84 100644
--- a/layouts/plain.vue
+++ b/layouts/plain.vue
@@ -1,33 +1,18 @@
 <template>
-  <n-layout class="h-screen">
-    <n-layout class="h-screen">
-      <n-layout-header> <navigation-component /> </n-layout-header>
-      <n-layout-content content-class="content-style">
-        <div class="w-full h-full px-4">
-          <slot />
-        </div>
-      </n-layout-content>
-      <n-layout-footer>
-        <footer-component />
-      </n-layout-footer>
-    </n-layout>
-  </n-layout>
+  <div class="h-screen">
+    <header><navigation-component /></header>
+    <main content-class="content-style">
+      <div class="w-full h-full px-4">
+        <slot />
+      </div>
+    </main>
+    <footer>
+      <footer-component />
+    </footer>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import NavigationComponent from '~/components/layout/NavigationComponent.vue';
 import FooterComponent from '~/components/layout/FooterComponent.vue';
 </script>
-
-<style scoped>
-.n-layout-header,
-.n-layout-content,
-.n-layout-footer {
-  padding: 0;
-  background-color: inherit;
-}
-
-:deep(.content-style) {
-  min-height: calc(100vh - 120px);
-}
-</style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 0e55ca4..466c2a4 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -19,7 +19,6 @@ export default defineNuxtConfig({
     '@nuxtjs/eslint-module',
     '@nuxtjs/google-fonts',
     '@nuxt/image',
-    '@bg-dev/nuxt-naiveui',
     '@pinia/nuxt',
     '@pinia-plugin-persistedstate/nuxt',
   ],
diff --git a/package.json b/package.json
index d447fcc..ed3739b 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,6 @@
     "web3": "^4.5.0"
   },
   "devDependencies": {
-    "@bg-dev/nuxt-naiveui": "^1.10.2",
     "@commitlint/cli": "^18.6.1",
     "@nuxt/devtools": "^1.0.8",
     "@nuxt/image": "^1.3.0",
diff --git a/pages/chat/index.vue b/pages/chat/index.vue
index c23a32e..5deb69f 100644
--- a/pages/chat/index.vue
+++ b/pages/chat/index.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="flex h-screen justify-center items-center text-3xl">Nothing here, pick some chat!</div>
+  <div class="w-full flex flex-col gap-2 mt-2">
+    <h2 class="text-2xl">Nothing here, pick some chat!</h2>
+  </div>
 </template>
 
 <script lang="ts" setup>
diff --git a/pages/index.vue b/pages/index.vue
index 6377c65..f20d518 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,14 +1,11 @@
 <template>
   <div class="w-full flex flex-col gap-2 mt-2">
-    <SignTest />
-
     <NftPost v-for="post in posts" :key="post.id" :post="post" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import NftPost from '~/components/posts/NftPost.vue';
-import SignTest from '~/components/SignTest.vue';
 import { useTokenStore } from '~/store';
 
 const tokenStore = useTokenStore();

From a61e3dc9fea2851f2b07930f20469fe333299fae Mon Sep 17 00:00:00 2001
From: Branislav Hozza <brankohozza@gmail.com>
Date: Sat, 13 Apr 2024 12:56:04 +0200
Subject: [PATCH 2/6] :sparkles: default open chat

---
 components/layout/RightSideChat.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/layout/RightSideChat.vue b/components/layout/RightSideChat.vue
index 1d8f486..167a588 100644
--- a/components/layout/RightSideChat.vue
+++ b/components/layout/RightSideChat.vue
@@ -55,7 +55,7 @@ import CreateChatModal from '~/components/chat/CreateChatModal.vue';
 
 import { useAccountStore, useChatStore } from '~/store';
 
-const expanded = ref(false);
+const expanded = ref(true);
 
 const accountStore = useAccountStore();
 const chatStore = useChatStore();

From 93a759db972114fba7a27a396087b7449109d9f6 Mon Sep 17 00:00:00 2001
From: Branislav Hozza <brankohozza@gmail.com>
Date: Sat, 13 Apr 2024 13:07:06 +0200
Subject: [PATCH 3/6] :sparkles: ui tweaks

---
 components/chat/ChatRow.vue               | 12 ++++++++++--
 components/layout/LeftSideContent.vue     | 12 ++++++------
 components/layout/NavigationComponent.vue |  2 +-
 components/layout/RightSideChat.vue       | 19 ++++++++++++++-----
 4 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/components/chat/ChatRow.vue b/components/chat/ChatRow.vue
index 4dc9fac..a35ee3a 100644
--- a/components/chat/ChatRow.vue
+++ b/components/chat/ChatRow.vue
@@ -1,6 +1,6 @@
 <template>
-  <nuxt-link :to="'/chat/' + chat.id" class="w-full flex gap-2 text-xl items-center justify-start h-10">
-    <span class="w-5 h-5 border border-pink-500 rounded-full" :class="[selected ? 'bg-pink-500' : 'bg-transparent']" />
+  <nuxt-link :to="'/chat/' + chat.id" class="chat-wrapper">
+    <span class="dot" :class="[selected ? 'bg-pink-500' : 'bg-transparent']" />
     <p>{{ chat.name ?? chat.users }}</p>
   </nuxt-link>
 </template>
@@ -19,3 +19,11 @@ defineProps({
   },
 });
 </script>
+<style scoped>
+.chat-wrapper {
+  @apply w-full flex gap-2 text-xl items-center justify-start h-10 hover:text-pink-200;
+  .dot {
+    @apply w-5 h-5 border border-pink-500 rounded-full;
+  }
+}
+</style>
diff --git a/components/layout/LeftSideContent.vue b/components/layout/LeftSideContent.vue
index 9e26fbe..c23eb15 100644
--- a/components/layout/LeftSideContent.vue
+++ b/components/layout/LeftSideContent.vue
@@ -1,12 +1,12 @@
 <template>
   <aside class="left-nav" :class="[expanded ? 'left-nav-expanded' : 'left-nav-collapsed']">
     <ul id="navigation-links" :class="{ 'items-start': expanded, 'items-center': !expanded }">
-      <li class="nav-item" @click="expanded = !expanded">
-        <icon size="24" name="mdi:arrow-collapse-right" :class="[!expanded ? 'rotate-0' : 'rotate-180']" />
-        <span v-if="expanded" class="label">Collapse menu</span>
+      <li class="nav-item" title="Toggle menu" @click="expanded = !expanded">
+        <icon size="24" name="mdi:menu" />
+        <span v-if="expanded" class="label">Toggle menu</span>
       </li>
       <li v-for="link in links" :key="link.link">
-        <NuxtLink :to="link.link" class="nav-item">
+        <NuxtLink :to="link.link" class="nav-item" :title="link.name">
           <icon size="24" :name="link.icon" />
           <span v-if="expanded" class="label">{{ link.name }}</span>
         </NuxtLink>
@@ -70,11 +70,11 @@ const links = computed<Link[]>(() =>
   }
 
   .nav-item {
-    @apply flex justify-start items-center gap-2 text-white;
+    @apply flex justify-start items-center gap-2 text-white hover:text-pink-300;
   }
 
   li:has(> .router-link-active) .nav-item {
-    @apply text-pink-200;
+    @apply text-pink-500;
   }
 
   &.left-nav-expanded {
diff --git a/components/layout/NavigationComponent.vue b/components/layout/NavigationComponent.vue
index e2f0950..907f953 100644
--- a/components/layout/NavigationComponent.vue
+++ b/components/layout/NavigationComponent.vue
@@ -9,7 +9,7 @@
     </button>
     <button
       v-else
-      class="border-2 border-pink-500 text-pink-500 font-semibold p-2 font-mono rounded-md"
+      class="border-2 border-pink-500 text-pink-500 hover:border-pink-400 hover:text-pink-400 font-semibold p-2 font-mono rounded-md"
       @click="disconnectWallet"
     >
       Disconnect wallet
diff --git a/components/layout/RightSideChat.vue b/components/layout/RightSideChat.vue
index 167a588..d32ddab 100644
--- a/components/layout/RightSideChat.vue
+++ b/components/layout/RightSideChat.vue
@@ -5,16 +5,21 @@
       <error-modal v-if="error" :error="error" @close="error = null" />
     </teleport>
     <span
-      class="text-white py-2 flex gap-2"
+      class="text-white py-2 flex gap-2 cursor-pointer"
       :class="{ 'w-full px-2 border-b border-pink-500': expanded }"
       @click="expanded = !expanded"
     >
       <icon size="24" name="mdi:message-outline" />
-      <span v-if="expanded" class="label">Collapse chats</span>
+      <span v-if="expanded" class="label">Toggle chats</span>
     </span>
     <ul v-if="expanded" id="side-items" :class="{ 'items-start': expanded, 'items-center': !expanded }">
       <li v-if="hasInvitations" class="side-item text-xl border-b border-pink-500">Invitations</li>
-      <li v-for="invitation in invitations" :key="invitation.chat.id" class="side-item">
+      <li
+        v-for="invitation in invitations"
+        :key="invitation.chat.id"
+        class="side-item"
+        :title="invitation.sender.address"
+      >
         {{ invitation.chat.name }}
         <span class="flex gap-1">
           <button
@@ -38,9 +43,13 @@
         </button>
       </li>
       <li v-for="chat in chats" :key="chat.id" class="side-item">
-        <chat-row :chat="chat" :selected="isSelected(chat.id)" />
+        <chat-row :chat="chat" :selected="isSelected(chat.id)" :title="chat.name ?? chat.users[0].address" />
 
-        <button class="text-pink-500 flex items-center justify-center rounded w-20 h-10" @click="leaveChat(chat.id)">
+        <button
+          class="text-pink-500 hover:text-pink-200 flex items-center justify-center rounded w-20 h-10"
+          title="Leave chat"
+          @click="leaveChat(chat.id)"
+        >
           <Icon name="mdi:chat-remove-outline" />
         </button>
       </li>

From 33c618f652317993bafdf311e04cdc7fb868613f Mon Sep 17 00:00:00 2001
From: Branislav Hozza <brankohozza@gmail.com>
Date: Sat, 13 Apr 2024 13:12:07 +0200
Subject: [PATCH 4/6] :sparkles: change font and remove chat title

---
 app.vue                             | 5 +++++
 components/layout/RightSideChat.vue | 9 ++++-----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/app.vue b/app.vue
index f9b20d5..78d4603 100644
--- a/app.vue
+++ b/app.vue
@@ -14,3 +14,8 @@ onMounted(() => {
   tokenStore.setPosts(MOCKED_POSTS);
 });
 </script>
+<style>
+* {
+  @apply font-mono;
+}
+</style>
diff --git a/components/layout/RightSideChat.vue b/components/layout/RightSideChat.vue
index d32ddab..31a05e2 100644
--- a/components/layout/RightSideChat.vue
+++ b/components/layout/RightSideChat.vue
@@ -5,12 +5,12 @@
       <error-modal v-if="error" :error="error" @close="error = null" />
     </teleport>
     <span
-      class="text-white py-2 flex gap-2 cursor-pointer"
-      :class="{ 'w-full px-2 border-b border-pink-500': expanded }"
+      class="text-white pb-2 flex gap-2 cursor-pointer"
+      :class="{ 'w-full  border-b border-pink-500': expanded }"
       @click="expanded = !expanded"
     >
       <icon size="24" name="mdi:message-outline" />
-      <span v-if="expanded" class="label">Toggle chats</span>
+      <span v-if="expanded">Toggle chats</span>
     </span>
     <ul v-if="expanded" id="side-items" :class="{ 'items-start': expanded, 'items-center': !expanded }">
       <li v-if="hasInvitations" class="side-item text-xl border-b border-pink-500">Invitations</li>
@@ -33,8 +33,7 @@
           </button>
         </span>
       </li>
-      <li class="side-item text-2xl pb-2 border-b border-pink-500">Chats</li>
-      <li class="side-item">
+      <li class="side-item mt-2">
         <button
           class="w-full flex justify-center items-center rounded p-2 bg-pink-500 hover:bg-pink-400 cursor-pointer"
           @click="createChat"

From a8ccc48e8a00260d85f6954639db312faf763314 Mon Sep 17 00:00:00 2001
From: Branislav Hozza <brankohozza@gmail.com>
Date: Sat, 13 Apr 2024 13:15:59 +0200
Subject: [PATCH 5/6] :bug: ui tweak

---
 components/layout/LeftSideContent.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/layout/LeftSideContent.vue b/components/layout/LeftSideContent.vue
index c23eb15..929ab62 100644
--- a/components/layout/LeftSideContent.vue
+++ b/components/layout/LeftSideContent.vue
@@ -24,7 +24,7 @@ interface Link {
   link: string;
 }
 
-const expanded = ref(false);
+const expanded = ref(true);
 
 const accountStore = useAccountStore();
 
@@ -78,11 +78,11 @@ const links = computed<Link[]>(() =>
   }
 
   &.left-nav-expanded {
-    @apply w-60;
+    @apply max-w-[240px];
   }
 
   &.left-nav-collapsed {
-    @apply w-16;
+    @apply w-[64px];
   }
 }
 </style>

From 0b11f16ec67db21263343be1170d57a887e1fe8a Mon Sep 17 00:00:00 2001
From: Branislav Hozza <brankohozza@gmail.com>
Date: Sat, 13 Apr 2024 13:35:18 +0200
Subject: [PATCH 6/6] :bug: update lockfile

---
 pnpm-lock.yaml | 199 ++-----------------------------------------------
 1 file changed, 5 insertions(+), 194 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index eb33e06..6cff425 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,9 +25,6 @@ dependencies:
     version: 4.7.0(typescript@5.4.4)
 
 devDependencies:
-  '@bg-dev/nuxt-naiveui':
-    specifier: ^1.10.2
-    version: 1.12.2(vue@3.4.21)
   '@commitlint/cli':
     specifier: ^18.6.1
     version: 18.6.1(@types/node@20.12.4)(typescript@5.4.4)
@@ -109,12 +106,6 @@ packages:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
-  /@ant-design/colors@7.0.2:
-    resolution: {integrity: sha512-7KJkhTiPiLHSu+LmMJnehfJ6242OCxSlR3xHVBecYxnMW8MS/878NXct1GqYARyL59fyeFdKRxXTfvR9SnDgJg==}
-    dependencies:
-      '@ctrl/tinycolor': 3.6.1
-    dev: true
-
   /@antfu/install-pkg@0.1.1:
     resolution: {integrity: sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==}
     dependencies:
@@ -434,13 +425,6 @@ packages:
       '@babel/plugin-transform-typescript': 7.24.4(@babel/core@7.24.4)
     dev: true
 
-  /@babel/runtime@7.24.4:
-    resolution: {integrity: sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      regenerator-runtime: 0.14.1
-    dev: true
-
   /@babel/standalone@7.24.4:
     resolution: {integrity: sha512-V4uqWeedadiuiCx5P5OHYJZ1PehdMpcBccNCEptKFGPiZIY3FI5f2ClxUl4r5wZ5U+ohcQ+4KW6jX2K6xXzq4Q==}
     engines: {node: '>=6.9.0'}
@@ -478,21 +462,6 @@ packages:
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
 
-  /@bg-dev/nuxt-naiveui@1.12.2(vue@3.4.21):
-    resolution: {integrity: sha512-2NhD4T57xHJF/EevBFg1CDW5C08nS5+fNf/Xb3PfBpV5F0BWoYRWJJ8LP1OQ3uQP4tfLhJ7AjIWAFuvp8Wqehw==}
-    dependencies:
-      '@ant-design/colors': 7.0.2
-      '@iconify/vue': 4.1.1(vue@3.4.21)
-      '@nuxt/kit': 3.11.2
-      defu: 6.1.4
-      js-cookie: 3.0.5
-      naive-ui: 2.38.1(vue@3.4.21)
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-      - vue
-    dev: true
-
   /@cloudflare/kv-asset-handler@0.3.1:
     resolution: {integrity: sha512-lKN2XCfKCmpKb86a1tl4GIwsJYDy9TGuwjhDELLmpKygQhw8X2xR4dusgpC5Tg7q1pB96Eb0rBo81kxSILQMwA==}
     dependencies:
@@ -663,22 +632,6 @@ packages:
       chalk: 4.1.2
     dev: true
 
-  /@css-render/plugin-bem@0.15.12(css-render@0.15.12):
-    resolution: {integrity: sha512-Lq2jSOZn+wYQtsyaFj6QRz2EzAnd3iW5fZeHO1WSXQdVYwvwGX0ZiH3X2JQgtgYLT1yeGtrwrqJdNdMEUD2xTw==}
-    peerDependencies:
-      css-render: ~0.15.12
-    dependencies:
-      css-render: 0.15.12
-    dev: true
-
-  /@css-render/vue3-ssr@0.15.12(vue@3.4.21):
-    resolution: {integrity: sha512-AQLGhhaE0F+rwybRCkKUdzBdTEM/5PZBYy+fSYe1T9z9+yxMuV/k7ZRqa4M69X+EI1W8pa4kc9Iq2VjQkZx4rg==}
-    peerDependencies:
-      vue: ^3.0.11
-    dependencies:
-      vue: 3.4.21(typescript@5.4.4)
-    dev: true
-
   /@csstools/cascade-layer-name-parser@1.0.9(@csstools/css-parser-algorithms@2.6.1)(@csstools/css-tokenizer@2.2.4):
     resolution: {integrity: sha512-RRqNjxTZDUhx7pxYOBG/AkCVmPS3zYzfE47GEhIGkFuWFTQGJBgWOUUkKNo5MfxIfjDz5/1L3F3rF1oIsYaIpw==}
     engines: {node: ^14 || ^16 || >=18}
@@ -731,15 +684,6 @@ packages:
       postcss: 8.4.38
     dev: true
 
-  /@ctrl/tinycolor@3.6.1:
-    resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==}
-    engines: {node: '>=10'}
-    dev: true
-
-  /@emotion/hash@0.8.0:
-    resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
-    dev: true
-
   /@esbuild/aix-ppc64@0.20.2:
     resolution: {integrity: sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==}
     engines: {node: '>=12'}
@@ -1155,10 +1099,6 @@ packages:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.4.15
 
-  /@juggle/resize-observer@3.4.0:
-    resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==}
-    dev: true
-
   /@koa/router@12.0.1:
     resolution: {integrity: sha512-ribfPYfHb+Uw3b27Eiw6NPqjhIhTpVFzEWLwyc/1Xp+DCdwRRyIlAUODX+9bPARF6aQtUu1+/PHzdNvRzcs/+Q==}
     engines: {node: '>= 12'}
@@ -1816,6 +1756,7 @@ packages:
     dependencies:
       is-glob: 4.0.3
       micromatch: 4.0.5
+      napi-wasm: 1.1.0
     dev: true
     bundledDependencies:
       - napi-wasm
@@ -2288,20 +2229,6 @@ packages:
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
     dev: true
 
-  /@types/katex@0.16.7:
-    resolution: {integrity: sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==}
-    dev: true
-
-  /@types/lodash-es@4.17.12:
-    resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
-    dependencies:
-      '@types/lodash': 4.17.0
-    dev: true
-
-  /@types/lodash@4.17.0:
-    resolution: {integrity: sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==}
-    dev: true
-
   /@types/minimist@1.2.5:
     resolution: {integrity: sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==}
     dev: true
@@ -3569,10 +3496,6 @@ packages:
     resolution: {integrity: sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==}
     dev: true
 
-  /async-validator@4.2.5:
-    resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
-    dev: true
-
   /async@2.6.4:
     resolution: {integrity: sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==}
     dependencies:
@@ -4258,13 +4181,6 @@ packages:
       postcss: 8.4.38
     dev: true
 
-  /css-render@0.15.12:
-    resolution: {integrity: sha512-eWzS66patiGkTTik+ipO9qNGZ+uNuGyTmnz6/+EJIiFg8+3yZRpnMwgFo8YdXhQRsiePzehnusrxVvugNjXzbw==}
-    dependencies:
-      '@emotion/hash': 0.8.0
-      csstype: 3.0.11
-    dev: true
-
   /css-select@5.1.0:
     resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
     requiresBuild: true
@@ -4378,10 +4294,6 @@ packages:
       css-tree: 2.2.1
     dev: true
 
-  /csstype@3.0.11:
-    resolution: {integrity: sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==}
-    dev: true
-
   /csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
@@ -4417,21 +4329,6 @@ packages:
       is-data-view: 1.0.1
     dev: true
 
-  /date-fns-tz@2.0.1(date-fns@2.30.0):
-    resolution: {integrity: sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==}
-    peerDependencies:
-      date-fns: 2.x
-    dependencies:
-      date-fns: 2.30.0
-    dev: true
-
-  /date-fns@2.30.0:
-    resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
-    engines: {node: '>=0.11'}
-    dependencies:
-      '@babel/runtime': 7.24.4
-    dev: true
-
   /db0@0.1.4:
     resolution: {integrity: sha512-Ft6eCwONYxlwLjBXSJxw0t0RYtA5gW9mq8JfBXn9TtC0nDPlqePAhpv9v4g9aONBi6JI1OXHTKKkUYGd+BOrCA==}
     peerDependencies:
@@ -5355,10 +5252,6 @@ packages:
     engines: {node: '>=12.0.0'}
     dev: false
 
-  /evtd@0.2.4:
-    resolution: {integrity: sha512-qaeGN5bx63s/AXgQo8gj6fBkxge+OoLddLniox5qtLAEY5HSnuSlISXVPxnSae1dWblvTh4/HoMIB+mbMsvZzw==}
-    dev: true
-
   /execa@5.1.1:
     resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
     engines: {node: '>=10'}
@@ -5952,11 +5845,6 @@ packages:
     dependencies:
       function-bind: 1.1.2
 
-  /highlight.js@11.9.0:
-    resolution: {integrity: sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==}
-    engines: {node: '>=12.0.0'}
-    dev: true
-
   /hookable@5.5.3:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
@@ -6579,11 +6467,6 @@ packages:
     resolution: {integrity: sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==}
     hasBin: true
 
-  /js-cookie@3.0.5:
-    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
-    engines: {node: '>=14'}
-    dev: true
-
   /js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -6888,10 +6771,6 @@ packages:
       p-locate: 5.0.0
     dev: true
 
-  /lodash-es@4.17.21:
-    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
-    dev: true
-
   /lodash.camelcase@4.3.0:
     resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
     dev: true
@@ -7309,33 +7188,6 @@ packages:
       thenify-all: 1.6.0
     dev: true
 
-  /naive-ui@2.38.1(vue@3.4.21):
-    resolution: {integrity: sha512-AnU1FQ7K/CbhguAX++V4kCFjk7h7RvWt4nvZPRjORMpq+fUIlzD+EcQ5Cv1VqDloNF8+eMv4Akc2Ogacc9S+5A==}
-    peerDependencies:
-      vue: ^3.0.0
-    dependencies:
-      '@css-render/plugin-bem': 0.15.12(css-render@0.15.12)
-      '@css-render/vue3-ssr': 0.15.12(vue@3.4.21)
-      '@types/katex': 0.16.7
-      '@types/lodash': 4.17.0
-      '@types/lodash-es': 4.17.12
-      async-validator: 4.2.5
-      css-render: 0.15.12
-      csstype: 3.1.3
-      date-fns: 2.30.0
-      date-fns-tz: 2.0.1(date-fns@2.30.0)
-      evtd: 0.2.4
-      highlight.js: 11.9.0
-      lodash: 4.17.21
-      lodash-es: 4.17.21
-      seemly: 0.3.8
-      treemate: 0.3.11
-      vdirs: 0.1.8(vue@3.4.21)
-      vooks: 0.2.12(vue@3.4.21)
-      vue: 3.4.21(typescript@5.4.4)
-      vueuc: 0.4.58(vue@3.4.21)
-    dev: true
-
   /nanoid@3.3.7:
     resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -7353,6 +7205,10 @@ packages:
     dev: true
     optional: true
 
+  /napi-wasm@1.1.0:
+    resolution: {integrity: sha512-lHwIAJbmLSjF9VDRm9GoVOy9AGp3aIvkjv+Kvz9h16QR3uSVYH78PNQUnT2U4X53mhlnV2M7wrhibQ3GHicDmg==}
+    dev: true
+
   /natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: true
@@ -8864,10 +8720,6 @@ packages:
       redis-errors: 1.2.0
     dev: true
 
-  /regenerator-runtime@0.14.1:
-    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
-    dev: true
-
   /regexp-tree@0.1.27:
     resolution: {integrity: sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==}
     hasBin: true
@@ -9098,10 +8950,6 @@ packages:
   /scule@1.3.0:
     resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
 
-  /seemly@0.3.8:
-    resolution: {integrity: sha512-MW8Qs6vbzo0pHmDpFSYPna+lwpZ6Zk1ancbajw/7E8TKtHdV+1DfZZD+kKJEhG/cAoB/i+LiT+5msZOqj0DwRA==}
-    dev: true
-
   /semver@5.7.2:
     resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
     hasBin: true
@@ -9906,10 +9754,6 @@ packages:
   /tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
-  /treemate@0.3.11:
-    resolution: {integrity: sha512-M8RGFoKtZ8dF+iwJfAJTOH/SM4KluKOKRJpjCMhI8bG3qB74zrFoArKZ62ll0Fr3mqkMJiQOmWYkdYgDeITYQg==}
-    dev: true
-
   /trim-newlines@3.0.1:
     resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==}
     engines: {node: '>=8'}
@@ -10406,15 +10250,6 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /vdirs@0.1.8(vue@3.4.21):
-    resolution: {integrity: sha512-H9V1zGRLQZg9b+GdMk8MXDN2Lva0zx72MPahDKc30v+DtwKjfyOSXWRIX4t2mhDubM1H09gPhWeth/BJWPHGUw==}
-    peerDependencies:
-      vue: ^3.0.11
-    dependencies:
-      evtd: 0.2.4
-      vue: 3.4.21(typescript@5.4.4)
-    dev: true
-
   /vite-hot-client@0.2.3(vite@5.2.8):
     resolution: {integrity: sha512-rOGAV7rUlUHX89fP2p2v0A2WWvV3QMX2UYq0fRqsWSvFvev4atHWqjwGoKaZT1VTKyLGk533ecu3eyd0o59CAg==}
     peerDependencies:
@@ -10589,15 +10424,6 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /vooks@0.2.12(vue@3.4.21):
-    resolution: {integrity: sha512-iox0I3RZzxtKlcgYaStQYKEzWWGAduMmq+jS7OrNdQo1FgGfPMubGL3uGHOU9n97NIvfFDBGnpSvkWyb/NSn/Q==}
-    peerDependencies:
-      vue: ^3.0.0
-    dependencies:
-      evtd: 0.2.4
-      vue: 3.4.21(typescript@5.4.4)
-    dev: true
-
   /vscode-jsonrpc@6.0.0:
     resolution: {integrity: sha512-wnJA4BnEjOSyFMvjZdpiOwhSq9uDoK8e/kpRJDTaMYzwlkrhG1fwDIZI94CLsLzlCK5cIbMMtFlJlfR57Lavmg==}
     engines: {node: '>=8.0.0 || >=10.0.0'}
@@ -10731,21 +10557,6 @@ packages:
       '@vue/shared': 3.4.21
       typescript: 5.4.4
 
-  /vueuc@0.4.58(vue@3.4.21):
-    resolution: {integrity: sha512-Wnj/N8WbPRSxSt+9ji1jtDHPzda5h2OH/0sFBhvdxDRuyCZbjGg3/cKMaKqEoe+dErTexG2R+i6Q8S/Toq1MYg==}
-    peerDependencies:
-      vue: ^3.0.11
-    dependencies:
-      '@css-render/vue3-ssr': 0.15.12(vue@3.4.21)
-      '@juggle/resize-observer': 3.4.0
-      css-render: 0.15.12
-      evtd: 0.2.4
-      seemly: 0.3.8
-      vdirs: 0.1.8(vue@3.4.21)
-      vooks: 0.2.12(vue@3.4.21)
-      vue: 3.4.21(typescript@5.4.4)
-    dev: true
-
   /watchpack@2.4.1:
     resolution: {integrity: sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==}
     engines: {node: '>=10.13.0'}