From 55425f57de2eabb31fdeee193be407c3604d9138 Mon Sep 17 00:00:00 2001
From: Anbarasu <anbarasun123@gmail.com>
Date: Fri, 7 Jun 2024 11:40:54 +0530
Subject: [PATCH] feat: Notifications (#8622)

* feat: notifications wip

* feat: wip

* feat: longpoll and notifications.controller.ts

* feat: longpoll and notifications.controller.ts

* feat: enable email notifications

* fix: notification styles and list

* fix: update swagger feat: connect poller to frontend

* fix: minor ui corrections

* feat: move notifications to ee feat: scroll to commentId fix: polling fail on network error fix: unreadcount not updating fix: add workspace to comment mention event

* fix: pubsub for notifications

* fix: warning maxListeners

* fix: update ui

* fix: minor fixes

* chore: move pub-sub to redis folder

* fix: update ui and schema feat: optimistic comment update and create

* fix: row empty during inital load causing row not loading

* fix: build

* fix: some updated

* fix: minor ui corrections

* fix: manage local state manually for interactivity

* fix: remove prev notifcation data

* fix: review comments

* fix: code rabbit comments

* fix: code rabbit comments

* feat: delete notifications

* fix: code rabbit comments

* fix: row RowMeta manipulation fix: overflow notifications

* fix: invalid offset

* fix: updated widths

* fix: tests

* fix: playwright

* feat: resolved by comments

* feat: update layout

* fix: wait 5 seconds before polling start, after polling starts, reload the notifications

* fix: bug fixes

* fix: disable long polling for playwright

* fix: update migration

* fix: lint

* fix: code rabbit comments

* fix: resolve tooltip

* feat: resolve ee

* fix: build failing

* fix: review comments

* fix: dependency synx

* fix: update notification style
---
 package.json                                  |    2 +-
 packages/nc-gui/assets/nc-icons/bell.svg      |    6 +
 .../nc-gui/assets/nc-icons/check-circle.svg   |   11 +
 .../components/dashboard/Sidebar/UserInfo.vue |  222 +--
 .../components/dashboard/settings/Modal.vue   |    2 -
 packages/nc-gui/components/dlg/InviteDlg.vue  |    6 -
 .../nc-gui/components/notification/Card.vue   |  169 ++-
 .../nc-gui/components/notification/Item.vue   |   28 +-
 .../notification/Item/ColumnEvent.vue         |   17 -
 .../notification/Item/FilterViewEvent.vue     |   17 -
 .../notification/Item/ProjectEvent.vue        |   38 -
 .../notification/Item/ProjectInvite.vue       |   13 +-
 .../notification/Item/SharedViewEvent.vue     |   38 -
 .../notification/Item/SortViewEvent.vue       |   17 -
 .../notification/Item/TableEvent.vue          |   38 -
 .../notification/Item/ViewEvent.vue           |   38 -
 .../components/notification/Item/Welcome.vue  |   21 +-
 .../components/notification/Item/Wrapper.vue  |  119 +-
 .../nc-gui/components/notification/Menu.vue   |   36 +-
 .../components/project/AccessSettings.vue     |    4 +-
 .../nc-gui/components/project/AllTables.vue   |   11 +-
 packages/nc-gui/components/project/View.vue   |    4 -
 .../nc-gui/components/smartsheet/Toolbar.vue  |    4 -
 .../smartsheet/column/LinkOptions.vue         |    5 +-
 .../smartsheet/expanded-form/Comments.vue     |  258 ++--
 .../smartsheet/expanded-form/RichComment.vue  |    6 +-
 .../smartsheet/expanded-form/index.vue        |    2 +-
 .../composables/useExpandedFormStore.ts       |  121 +-
 packages/nc-gui/store/notification.ts         |  204 ++-
 packages/nc-gui/utils/datetimeUtils.ts        |    3 +-
 packages/nc-gui/utils/iconUtils.ts            |    5 +-
 packages/nc-mail-templates/.gitignore         |    1 +
 packages/nc-mail-templates/package.json       |   23 +
 packages/nc-mail-templates/src/index.ts       |   33 +
 .../src/templates/Mention.vue                 |   73 +
 .../src/templates/Welcome.vue                 |   68 +
 .../src/templates/assets/DiscordIcon.ts       |   15 +
 .../src/templates/assets/GithubIcon.ts        |   15 +
 .../src/templates/assets/LinkedIcon.ts        |   18 +
 .../src/templates/assets/TwitterIcon.ts       |   15 +
 .../src/templates/assets/YoutubeIcon.ts       |   15 +
 .../src/templates/assets/index.ts             |   15 +
 .../src/templates/components/Footer.ts        |  212 +++
 .../src/templates/components/Header.ts        |   30 +
 .../src/templates/components/HtmlWrapper.ts   |   56 +
 .../src/templates/components/index.ts         |    9 +
 packages/nc-mail-templates/tsconfig.json      |   29 +
 packages/nocodb-sdk/src/lib/Api.ts            |  146 +-
 .../src/controllers/comments.controller.ts    |    3 +-
 .../controllers/notifications.controller.ts   |   84 +-
 .../notifications.gateway.spec.ts             |   19 -
 .../notifications/notifications.gateway.ts    |   59 -
 packages/nocodb/src/interface/config.ts       |    1 +
 .../meta/migrations/XcMigrationSourcev2.ts    |    4 +
 .../v2/nc_049_clear_notifications.ts          |   14 +
 packages/nocodb/src/models/Comment.ts         |    6 +-
 packages/nocodb/src/models/Notification.ts    |   27 +-
 .../src/modules/jobs/redis/jobs-redis.ts      |  114 +-
 packages/nocodb/src/modules/noco.module.ts    |    4 +-
 packages/nocodb/src/redis/pubsub-redis.ts     |   94 ++
 packages/nocodb/src/schema/swagger.json       |  324 +----
 .../src/services/app-hooks/interfaces.ts      |    3 +-
 .../nocodb/src/services/comments.service.ts   |   17 +-
 .../src/services/notifications.service.ts     |  141 --
 .../notifications.service.spec.ts             |    0
 .../notifications/notifications.service.ts    |  237 ++++
 packages/nocodb/src/utils/circularReplacer.ts |   12 +
 packages/nocodb/src/utils/index.ts            |    1 +
 packages/nocodb/src/utils/richTextHelper.ts   |   10 +-
 pnpm-lock.yaml                                | 1216 ++++++++++++++---
 pnpm-workspace.yaml                           |    1 +
 tests/playwright/setup/index.ts               |    6 +-
 72 files changed, 3007 insertions(+), 1628 deletions(-)
 create mode 100644 packages/nc-gui/assets/nc-icons/bell.svg
 create mode 100644 packages/nc-gui/assets/nc-icons/check-circle.svg
 delete mode 100644 packages/nc-gui/components/notification/Item/ColumnEvent.vue
 delete mode 100644 packages/nc-gui/components/notification/Item/FilterViewEvent.vue
 delete mode 100644 packages/nc-gui/components/notification/Item/ProjectEvent.vue
 delete mode 100644 packages/nc-gui/components/notification/Item/SharedViewEvent.vue
 delete mode 100644 packages/nc-gui/components/notification/Item/SortViewEvent.vue
 delete mode 100644 packages/nc-gui/components/notification/Item/TableEvent.vue
 delete mode 100644 packages/nc-gui/components/notification/Item/ViewEvent.vue
 create mode 100644 packages/nc-mail-templates/.gitignore
 create mode 100644 packages/nc-mail-templates/package.json
 create mode 100644 packages/nc-mail-templates/src/index.ts
 create mode 100644 packages/nc-mail-templates/src/templates/Mention.vue
 create mode 100644 packages/nc-mail-templates/src/templates/Welcome.vue
 create mode 100644 packages/nc-mail-templates/src/templates/assets/DiscordIcon.ts
 create mode 100644 packages/nc-mail-templates/src/templates/assets/GithubIcon.ts
 create mode 100644 packages/nc-mail-templates/src/templates/assets/LinkedIcon.ts
 create mode 100644 packages/nc-mail-templates/src/templates/assets/TwitterIcon.ts
 create mode 100644 packages/nc-mail-templates/src/templates/assets/YoutubeIcon.ts
 create mode 100644 packages/nc-mail-templates/src/templates/assets/index.ts
 create mode 100644 packages/nc-mail-templates/src/templates/components/Footer.ts
 create mode 100644 packages/nc-mail-templates/src/templates/components/Header.ts
 create mode 100644 packages/nc-mail-templates/src/templates/components/HtmlWrapper.ts
 create mode 100644 packages/nc-mail-templates/src/templates/components/index.ts
 create mode 100644 packages/nc-mail-templates/tsconfig.json
 delete mode 100644 packages/nocodb/src/gateways/notifications/notifications.gateway.spec.ts
 delete mode 100644 packages/nocodb/src/gateways/notifications/notifications.gateway.ts
 create mode 100644 packages/nocodb/src/meta/migrations/v2/nc_049_clear_notifications.ts
 create mode 100644 packages/nocodb/src/redis/pubsub-redis.ts
 delete mode 100644 packages/nocodb/src/services/notifications.service.ts
 rename packages/nocodb/src/services/{ => notifications}/notifications.service.spec.ts (100%)
 create mode 100644 packages/nocodb/src/services/notifications/notifications.service.ts
 create mode 100644 packages/nocodb/src/utils/circularReplacer.ts

diff --git a/package.json b/package.json
index a0fce7e026..8f55e00b6b 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     ]
   },
   "scripts": {
-    "bootstrap": "pnpm --filter=nocodb-sdk install && pnpm --filter=nocodb-sdk run build && pnpm --filter=nocodb --filter=nc-gui --filter=playwright install",
+    "bootstrap": "pnpm --filter=nocodb-sdk install && pnpm --filter=nocodb-sdk run build && pnpm --filter=nocodb --filter=nc-mail-templates --filter=nc-gui --filter=playwright install",
     "start:frontend": "pnpm --filter=nc-gui run dev",
     "start:backend": "pnpm --filter=nocodb run start",
     "lint:staged:playwright": "cd ./tests/playwright; pnpm dlx lint-staged; cd -",
diff --git a/packages/nc-gui/assets/nc-icons/bell.svg b/packages/nc-gui/assets/nc-icons/bell.svg
new file mode 100644
index 0000000000..de7f88412d
--- /dev/null
+++ b/packages/nc-gui/assets/nc-icons/bell.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bell">
+<path id="Vector" d="M12 5.33325C12 4.27239 11.5786 3.25497 10.8284 2.50482C10.0783 1.75468 9.06087 1.33325 8 1.33325C6.93913 1.33325 5.92172 1.75468 5.17157 2.50482C4.42143 3.25497 4 4.27239 4 5.33325C4 9.99992 2 11.3333 2 11.3333H14C14 11.3333 12 9.99992 12 5.33325Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M9.15335 14C9.03614 14.2021 8.86791 14.3698 8.6655 14.4864C8.46309 14.6029 8.2336 14.6643 8.00001 14.6643C7.76643 14.6643 7.53694 14.6029 7.33453 14.4864C7.13212 14.3698 6.96389 14.2021 6.84668 14" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/packages/nc-gui/assets/nc-icons/check-circle.svg b/packages/nc-gui/assets/nc-icons/check-circle.svg
new file mode 100644
index 0000000000..f1e9436075
--- /dev/null
+++ b/packages/nc-gui/assets/nc-icons/check-circle.svg
@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="check-circle" clip-path="url(#clip0_494_50692)">
+<path id="Vector" d="M14.6667 7.38674V8.00007C14.6659 9.43769 14.2003 10.8365 13.3396 11.988C12.4788 13.1394 11.2689 13.9817 9.89025 14.3893C8.51163 14.797 7.03818 14.748 5.68966 14.2498C4.34113 13.7516 3.18978 12.8308 2.40732 11.6248C1.62485 10.4188 1.2532 8.99212 1.34779 7.55762C1.44239 6.12312 1.99815 4.75762 2.9322 3.66479C3.86625 2.57195 5.12853 1.81033 6.5308 1.4935C7.93307 1.17668 9.40019 1.32163 10.7133 1.90674" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M14.6667 2.66675L8 9.34008L6 7.34008" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_494_50692">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue b/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
index 12cb350266..1054b38e58 100644
--- a/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
+++ b/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
@@ -55,127 +55,139 @@ onMounted(() => {
 
 <template>
   <div class="flex w-full flex-col py-0.9 px-1 border-gray-200 gap-y-1">
-    <NcDropdown v-model:visible="isMenuOpen" placement="topLeft" overlay-class-name="!min-w-64">
-      <div
-        class="flex flex-row py-1 px-3 gap-x-2 items-center hover:bg-gray-200 rounded-lg cursor-pointer h-8"
-        data-testid="nc-sidebar-userinfo"
-      >
-        <GeneralUserIcon :email="user?.email" size="auto" :name="user?.display_name" />
-        <div class="flex truncate">
-          {{ name ? name : user?.email }}
-        </div>
-        <GeneralIcon icon="chevronDown" class="flex-none !min-w-5 transform rotate-180 !text-gray-500" />
-      </div>
-      <template #overlay>
-        <NcMenu data-testid="nc-sidebar-userinfo">
-          <NcMenuItem data-testid="nc-sidebar-user-logout" @click="logout">
-            <div v-e="['c:user:logout']" class="flex gap-2 items-center">
-              <GeneralLoader v-if="isLoggingOut" class="!ml-0.5 !mr-0.5 !max-h-4.5 !-mt-0.5" />
-              <GeneralIcon v-else icon="signout" class="menu-icon" />
-              <span class="menu-btn"> {{ $t('general.logout') }}</span>
+    <div class="flex items-center pr-2 justify-between">
+      <NcDropdown v-model:visible="isMenuOpen" placement="topLeft" overlay-class-name="!min-w-64">
+        <div
+          class="flex flex-row py-1 px-3 gap-x-2 items-center hover:bg-gray-200 rounded-lg cursor-pointer h-8"
+          data-testid="nc-sidebar-userinfo"
+        >
+          <GeneralUserIcon :email="user?.email" size="auto" :name="user?.display_name" />
+          <NcTooltip>
+            <div class="flex max-w-32 truncate">
+              {{ name ? name : user?.email }}
             </div>
-          </NcMenuItem>
-          <NcDivider />
-          <a
-            v-e="['c:nocodb:discord']"
-            href="https://discord.gg/5RgZmkW"
-            target="_blank"
-            class="!underline-transparent"
-            rel="noopener noreferrer"
-          >
-            <NcMenuItem class="social-icon-wrapper">
-              <GeneralIcon class="social-icon" icon="ncDiscord" />
-              <span class="menu-btn"> {{ $t('labels.community.joinDiscord') }} </span>
-            </NcMenuItem>
-          </a>
-          <a
-            v-e="['c:nocodb:reddit']"
-            href="https://www.reddit.com/r/NocoDB"
-            target="_blank"
-            class="!underline-transparent"
-            rel="noopener noreferrer"
-          >
-            <NcMenuItem class="social-icon-wrapper">
-              <GeneralIcon class="social-icon" icon="ncReddit" />
-              <span class="menu-btn"> {{ $t('labels.community.joinReddit') }} </span>
-            </NcMenuItem>
-          </a>
-          <a
-            v-e="['c:nocodb:twitter']"
-            href="https://twitter.com/nocodb"
-            target="_blank"
-            class="!underline-transparent"
-            rel="noopener noreferrer"
-          >
-            <NcMenuItem class="social-icon-wrapper group">
-              <GeneralIcon class="social-icon text-gray-500 group-hover:text-gray-800" icon="ncTwitter" />
-              <span class="menu-btn"> {{ $t('labels.twitter') }} </span>
-            </NcMenuItem>
-          </a>
-          <template v-if="!appInfo.ee">
-            <NcDivider />
-            <a-popover key="language" class="lang-menu !py-1.5" placement="rightBottom">
-              <NcMenuItem>
-                <div v-e="['c:translate:open']" class="flex gap-2 items-center">
-                  <GeneralIcon icon="translate" class="group-hover:text-black nc-language ml-0.25 menu-icon" />
-                  {{ $t('labels.language') }}
-                  <div class="flex items-center text-gray-400 text-xs">{{ $t('labels.community.communityTranslated') }}</div>
-                  <div class="flex-1" />
-
-                  <MaterialSymbolsChevronRightRounded
-                    class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
-                  />
-                </div>
-              </NcMenuItem>
 
-              <template #content>
-                <div class="bg-white max-h-50vh scrollbar-thin-dull min-w-64 !overflow-auto">
-                  <LazyGeneralLanguageMenu />
-                </div>
-              </template>
-            </a-popover>
-          </template>
+            <template #title>
+              <span>
+                {{ name ? name : user?.email }}
+              </span>
+            </template>
+          </NcTooltip>
 
-          <template v-if="!isMobileMode">
+          <GeneralIcon icon="chevronDown" class="flex-none !min-w-5 transform rotate-180 !text-gray-500" />
+        </div>
+        <template #overlay>
+          <NcMenu data-testid="nc-sidebar-userinfo">
+            <NcMenuItem data-testid="nc-sidebar-user-logout" @click="logout">
+              <div v-e="['c:user:logout']" class="flex gap-2 items-center">
+                <GeneralLoader v-if="isLoggingOut" class="!ml-0.5 !mr-0.5 !max-h-4.5 !-mt-0.5" />
+                <GeneralIcon v-else icon="signout" class="menu-icon" />
+                <span class="menu-btn"> {{ $t('general.logout') }}</span>
+              </div>
+            </NcMenuItem>
             <NcDivider />
-
             <a
-              v-e="['c:nocodb:forum-open']"
-              href="https://community.nocodb.com"
+              v-e="['c:nocodb:discord']"
+              href="https://discord.gg/5RgZmkW"
               target="_blank"
               class="!underline-transparent"
-              rel="noopener"
+              rel="noopener noreferrer"
             >
-              <NcMenuItem>
-                <GeneralIcon icon="ncHelp" class="menu-icon mt-0.5" />
-                <span class="menu-btn"> {{ $t('title.forum') }} </span>
+              <NcMenuItem class="social-icon-wrapper">
+                <GeneralIcon class="social-icon" icon="ncDiscord" />
+                <span class="menu-btn"> {{ $t('labels.community.joinDiscord') }} </span>
               </NcMenuItem>
             </a>
-
             <a
-              v-e="['c:nocodb:docs-open']"
-              href="https://docs.nocodb.com"
+              v-e="['c:nocodb:reddit']"
+              href="https://www.reddit.com/r/NocoDB"
               target="_blank"
               class="!underline-transparent"
-              rel="noopener"
+              rel="noopener noreferrer"
             >
-              <NcMenuItem>
-                <GeneralIcon icon="file" class="menu-icon mt-0.5" />
-                <span class="menu-btn"> {{ $t('title.docs') }} </span>
+              <NcMenuItem class="social-icon-wrapper">
+                <GeneralIcon class="social-icon" icon="ncReddit" />
+                <span class="menu-btn"> {{ $t('labels.community.joinReddit') }} </span>
               </NcMenuItem>
             </a>
-
-            <NcDivider />
-
-            <DashboardSidebarEEMenuOption v-if="isEeUI" />
-
-            <nuxt-link v-e="['c:user:settings']" class="!no-underline" to="/account/profile">
-              <NcMenuItem> <GeneralIcon icon="ncSettings" class="menu-icon" /> {{ $t('title.accountSettings') }} </NcMenuItem>
-            </nuxt-link>
-          </template>
-        </NcMenu>
-      </template>
-    </NcDropdown>
+            <a
+              v-e="['c:nocodb:twitter']"
+              href="https://twitter.com/nocodb"
+              target="_blank"
+              class="!underline-transparent"
+              rel="noopener noreferrer"
+            >
+              <NcMenuItem class="social-icon-wrapper group">
+                <GeneralIcon class="social-icon text-gray-500 group-hover:text-gray-800" icon="ncTwitter" />
+                <span class="menu-btn"> {{ $t('labels.twitter') }} </span>
+              </NcMenuItem>
+            </a>
+            <template v-if="!appInfo.ee">
+              <NcDivider />
+              <a-popover key="language" class="lang-menu !py-1.5" placement="rightBottom">
+                <NcMenuItem>
+                  <div v-e="['c:translate:open']" class="flex gap-2 items-center">
+                    <GeneralIcon icon="translate" class="group-hover:text-black nc-language ml-0.25 menu-icon" />
+                    {{ $t('labels.language') }}
+                    <div class="flex items-center text-gray-400 text-xs">{{ $t('labels.community.communityTranslated') }}</div>
+                    <div class="flex-1" />
+
+                    <MaterialSymbolsChevronRightRounded
+                      class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
+                    />
+                  </div>
+                </NcMenuItem>
+
+                <template #content>
+                  <div class="bg-white max-h-50vh scrollbar-thin-dull min-w-64 !overflow-auto">
+                    <LazyGeneralLanguageMenu />
+                  </div>
+                </template>
+              </a-popover>
+            </template>
+
+            <template v-if="!isMobileMode">
+              <NcDivider />
+
+              <a
+                v-e="['c:nocodb:forum-open']"
+                href="https://community.nocodb.com"
+                target="_blank"
+                class="!underline-transparent"
+                rel="noopener"
+              >
+                <NcMenuItem>
+                  <GeneralIcon icon="ncHelp" class="menu-icon mt-0.5" />
+                  <span class="menu-btn"> {{ $t('title.forum') }} </span>
+                </NcMenuItem>
+              </a>
+
+              <a
+                v-e="['c:nocodb:docs-open']"
+                href="https://docs.nocodb.com"
+                target="_blank"
+                class="!underline-transparent"
+                rel="noopener"
+              >
+                <NcMenuItem>
+                  <GeneralIcon icon="file" class="menu-icon mt-0.5" />
+                  <span class="menu-btn"> {{ $t('title.docs') }} </span>
+                </NcMenuItem>
+              </a>
+
+              <NcDivider />
+
+              <DashboardSidebarEEMenuOption v-if="isEeUI" />
+
+              <nuxt-link v-e="['c:user:settings']" class="!no-underline" to="/account/profile">
+                <NcMenuItem> <GeneralIcon icon="ncSettings" class="menu-icon" /> {{ $t('title.accountSettings') }} </NcMenuItem>
+              </nuxt-link>
+            </template>
+          </NcMenu>
+        </template>
+      </NcDropdown>
+      <LazyNotificationMenu />
+    </div>
 
     <template v-if="isMobileMode || appInfo.ee"></template>
     <div v-else class="flex flex-row w-full justify-between pt-0.5 truncate">
diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index 83ad269ed4..894817c320 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -48,8 +48,6 @@ const { $e } = useNuxtApp()
 
 const { t } = useI18n()
 
-const { isDataSourceLimitReached } = storeToRefs(useBases())
-
 const dataSourcesReload = ref(false)
 
 const tabsInfo: TabGroup = {
diff --git a/packages/nc-gui/components/dlg/InviteDlg.vue b/packages/nc-gui/components/dlg/InviteDlg.vue
index 5ba335e95f..2e75ff669b 100644
--- a/packages/nc-gui/components/dlg/InviteDlg.vue
+++ b/packages/nc-gui/components/dlg/InviteDlg.vue
@@ -12,8 +12,6 @@ const props = defineProps<{
 }>()
 const emit = defineEmits(['update:modelValue'])
 
-const { baseRoles, workspaceRoles } = useRoles()
-
 const basesStore = useBases()
 
 const workspaceStore = useWorkspace()
@@ -28,10 +26,6 @@ const orderedRoles = computed(() => {
   return props.type === 'base' ? ProjectRoles : WorkspaceUserRoles
 })
 
-const userRoles = computed(() => {
-  return props.type === 'base' ? baseRoles.value : workspaceRoles.value
-})
-
 const inviteData = reactive({
   email: '',
   roles: orderedRoles.value.NO_ACCESS,
diff --git a/packages/nc-gui/components/notification/Card.vue b/packages/nc-gui/components/notification/Card.vue
index 93be3bb725..c45060205e 100644
--- a/packages/nc-gui/components/notification/Card.vue
+++ b/packages/nc-gui/components/notification/Card.vue
@@ -4,83 +4,126 @@ import InfiniteLoading from 'v3-infinite-loading'
 
 const notificationStore = useNotification()
 
-const { notifications, isRead, pageInfo } = storeToRefs(notificationStore)
+const { isMobileMode } = useGlobal()
 
-/*
-const groupType = computed({
-  get() {
-    return isRead.value ? 'read' : 'unread'
-  },
-  set(value) {
-    isRead.value = value === 'read'
-    notificationStore.loadNotifications()
-  },
-})
-*/
+const container = ref()
+
+const { height } = useElementSize(container)
+
+const { loadUnReadNotifications, loadReadNotifications, markAllAsRead } = notificationStore
+
+const { unreadNotifications, readNotifications, readPageInfo, unreadPageInfo, notificationTab } = storeToRefs(notificationStore)
 </script>
 
 <template>
-  <div class="min-w-[350px] max-w-[350px] min-h-[400px] !rounded-2xl bg-white rounded-xl nc-card">
-    <div class="p-3" @click.stop>
-      <div class="flex items-center">
-        <span class="text-md font-medium text-[#212121]">
-          {{ $t('general.notification') }}
-        </span>
-        <div class="flex-grow"></div>
-        <div
-          v-if="!isRead && notifications?.length"
-          class="cursor-pointer text-xs text-gray-500 hover:text-primary"
-          @click.stop="notificationStore.markAllAsRead"
-        >
-          {{ $t('activity.markAllAsRead') }}
-        </div>
-      </div>
-    </div>
-    <a-divider class="!my-0" />
-
-    <div
-      class="overflow-y-auto max-h-[max(60vh,500px)] min-h-100"
-      :class="{
-        'flex items-center justify-center': !notifications?.length,
-      }"
-    >
-      <template v-if="!notifications?.length">
-        <div class="flex flex-col gap-2 items-center justify-center">
-          <div class="text-sm text-gray-400">{{ $t('msg.noNewNotifications') }}</div>
-          <GeneralIcon icon="inbox" class="!text-40px text-gray-400" />
-        </div>
-      </template>
-      <template v-else>
-        <template v-for="item in notifications" :key="item.id">
-          <NotificationItem class="" :item="item" />
-          <a-divider class="!my-0" />
-        </template>
+  <div
+    ref="container"
+    style="box-shadow: 0px -12px 16px -4px rgba(0, 0, 0, 0.1), 0px -4px 6px -2px rgba(0, 0, 0, 0.06)"
+    :style="!isMobileMode ? 'width: min(80svw, 520px);' : ''"
+    :class="{
+      'max-h-[70vh] h-[620px]': !isMobileMode,
+      'h-[100svh] w-[100svw]': isMobileMode,
+    }"
+    class="!rounded-lg pt-4"
+  >
+    <div class="space-y-3">
+      <div class="flex px-6 justify-between items-center">
+        <span class="text-md font-bold text-gray-800" @click.stop> {{ $t('general.notification') }}s </span>
 
-        <InfiniteLoading
-          v-if="notifications && pageInfo && pageInfo.totalRows > notifications.length"
-          @infinite="notificationStore.loadNotifications(true)"
-        >
-          <template #spinner>
-            <div class="flex flex-row w-full justify-center mt-2">
-              <a-spin />
-            </div>
+        <NcButton v-if="isMobileMode" size="small" type="secondary">
+          <GeneralIcon icon="close" class="text-gray-700" />
+        </NcButton>
+      </div>
+      <div
+        v-if="notificationTab !== 'read'"
+        :class="{
+          'text-gray-400': !unreadNotifications?.length,
+        }"
+        class="cursor-pointer right-5 pointer-events-auto top-12.5 z-2 absolute text-[13px] text-gray-600 font-weight-semibold"
+        @click.stop="markAllAsRead"
+      >
+        {{ $t('activity.markAllAsRead') }}
+      </div>
+      <NcTabs v-model:activeKey="notificationTab">
+        <a-tab-pane key="unread">
+          <template #tab>
+            <span
+              :class="{
+                'font-semibold': notificationTab === 'unread',
+              }"
+              class="text-xs"
+            >
+              Unread
+            </span>
           </template>
-          <template #complete>
-            <span></span>
+          <div
+            class="overflow-y-auto"
+            :style="`height: ${height - 72}px`"
+            :class="{
+              'flex flex-col items-center min-h-[48svh] justify-center': !unreadNotifications?.length,
+            }"
+          >
+            <template v-if="!unreadNotifications?.length">
+              <div class="text-sm !text-gray-500">{{ $t('msg.noNewNotifications') }}</div>
+              <GeneralIcon icon="inbox" class="!text-40px !text-gray-500" />
+            </template>
+            <template v-else>
+              <NotificationItem v-for="item in unreadNotifications" :key="item.id" :item="item" />
+
+              <InfiniteLoading
+                v-if="unreadNotifications && unreadPageInfo && unreadPageInfo.totalRows > unreadNotifications.length"
+                @infinite="loadUnReadNotifications(true)"
+              >
+              </InfiniteLoading>
+            </template>
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="read">
+          <template #tab>
+            <span
+              :class="{
+                'font-semibold': notificationTab === 'read',
+              }"
+              class="text-xs"
+            >
+              Read
+            </span>
           </template>
-        </InfiniteLoading>
-      </template>
+
+          <div
+            class="overflow-y-auto"
+            :style="!isMobileMode ? `height: ${height - 72}px` : ''"
+            :class="{
+              'flex flex-col items-center min-h-[48svh] justify-center': !readNotifications?.length,
+            }"
+          >
+            <template v-if="!readNotifications?.length">
+              <div class="text-sm text-gray-500">{{ $t('msg.noNewNotifications') }}</div>
+              <GeneralIcon icon="inbox" class="!text-40px text-gray-500" />
+            </template>
+            <template v-else>
+              <NotificationItem v-for="item in readNotifications" :key="item.id" :item="item" />
+
+              <InfiniteLoading
+                v-if="readNotifications && readPageInfo && readPageInfo.totalRows > readNotifications.length"
+                @infinite="loadReadNotifications(true)"
+              >
+              </InfiniteLoading>
+            </template>
+          </div>
+        </a-tab-pane>
+      </NcTabs>
     </div>
   </div>
 </template>
 
 <style scoped>
-.nc-card {
-  border: solid 1px #e1e3e6;
+:deep(.ant-tabs-nav-wrap) {
+  @apply px-3;
 }
 
-:deep(.ant-tabs-nav-wrap) {
-  @apply px-6;
+:deep(.ant-tabs-tab) {
+  @apply pb-1.5 pt-1;
 }
 
 :deep(.ant-tabs-nav) {
diff --git a/packages/nc-gui/components/notification/Item.vue b/packages/nc-gui/components/notification/Item.vue
index a6f1bb8590..1c69031bd5 100644
--- a/packages/nc-gui/components/notification/Item.vue
+++ b/packages/nc-gui/components/notification/Item.vue
@@ -1,42 +1,24 @@
 <script setup lang="ts">
 import { AppEvents } from 'nocodb-sdk'
+import type { NotificationType } from 'nocodb-sdk'
 
 const props = defineProps<{
-  item: any
+  item: NotificationType
 }>()
 
 const item = toRef(props, 'item')
 
 const notificationStore = useNotification()
 
-const { markAsRead } = notificationStore
+const { toggleRead } = notificationStore
 </script>
 
 <template>
-  <div class="select-none" @click="markAsRead(item)">
+  <div class="select-none" @click="toggleRead(item, item.is_read)">
     <NotificationItemWelcome v-if="item.type === AppEvents.WELCOME" :item="item" />
     <NotificationItemProjectInvite v-else-if="item.type === AppEvents.PROJECT_INVITE" :item="item" />
     <NotificationItemWorkspaceInvite v-else-if="item.type === AppEvents.WORKSPACE_INVITE" :item="item" />
-    <NotificationItemProjectEvent
-      v-else-if="[AppEvents.PROJECT_CREATE, AppEvents.PROJECT_DELETE, AppEvents.PROJECT_UPDATE].includes(item.type)"
-      :item="item"
-    />
-    <NotificationItemTableEvent
-      v-else-if="[AppEvents.TABLE_CREATE, AppEvents.TABLE_DELETE, AppEvents.TABLE_UPDATE].includes(item.type)"
-      :item="item"
-    />
-    <NotificationItemViewEvent
-      v-else-if="[AppEvents.VIEW_CREATE, AppEvents.VIEW_DELETE, AppEvents.VIEW_UPDATE].includes(item.type)"
-      :item="item"
-    />
-    <NotificationItemSharedViewEvent
-      v-else-if="[AppEvents.SHARED_VIEW_CREATE, AppEvents.SHARED_VIEW_DELETE, AppEvents.SHARED_VIEW_UPDATE].includes(item.type)"
-      :item="item"
-    />
-    <NotificationItemWorkspaceEvent
-      v-else-if="[AppEvents.WORKSPACE_CREATE, AppEvents.WORKSPACE_DELETE, AppEvents.WORKSPACE_UPDATE].includes(item.type)"
-      :item="item"
-    />
+    <NotificationItemMentionEvent v-else-if="['mention'].includes(item.type)" :item="item" />
     <span v-else />
   </div>
 </template>
diff --git a/packages/nc-gui/components/notification/Item/ColumnEvent.vue b/packages/nc-gui/components/notification/Item/ColumnEvent.vue
deleted file mode 100644
index 532644cf88..0000000000
--- a/packages/nc-gui/components/notification/Item/ColumnEvent.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { ProjectEventType } from 'nocodb-sdk'
-
-const props = defineProps<{
-  item: ProjectEventType
-}>()
-
-const item = toRef(props, 'item')
-</script>
-
-<template>
-  <NotificationItemWrapper :item="item">
-    <div class="text-xs">
-      <strong>{{ item.data?.user?.name }}</strong> {{ item.data?.action }} <strong>{{ item.data?.table?.name }}</strong>
-    </div>
-  </NotificationItemWrapper>
-</template>
diff --git a/packages/nc-gui/components/notification/Item/FilterViewEvent.vue b/packages/nc-gui/components/notification/Item/FilterViewEvent.vue
deleted file mode 100644
index 532644cf88..0000000000
--- a/packages/nc-gui/components/notification/Item/FilterViewEvent.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { ProjectEventType } from 'nocodb-sdk'
-
-const props = defineProps<{
-  item: ProjectEventType
-}>()
-
-const item = toRef(props, 'item')
-</script>
-
-<template>
-  <NotificationItemWrapper :item="item">
-    <div class="text-xs">
-      <strong>{{ item.data?.user?.name }}</strong> {{ item.data?.action }} <strong>{{ item.data?.table?.name }}</strong>
-    </div>
-  </NotificationItemWrapper>
-</template>
diff --git a/packages/nc-gui/components/notification/Item/ProjectEvent.vue b/packages/nc-gui/components/notification/Item/ProjectEvent.vue
deleted file mode 100644
index dcb5834005..0000000000
--- a/packages/nc-gui/components/notification/Item/ProjectEvent.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import type { ProjectEventType } from 'nocodb-sdk'
-import { AppEvents } from 'nocodb-sdk'
-
-const props = defineProps<{
-  item: ProjectEventType
-}>()
-
-const item = toRef(props, 'item')
-
-const { navigateToProject } = useGlobal()
-
-const action = computed(() => {
-  switch (item.value.type) {
-    case AppEvents.PROJECT_CREATE:
-      return 'created'
-    case AppEvents.PROJECT_UPDATE:
-      return 'updated'
-    case AppEvents.PROJECT_DELETE:
-      return 'deleted'
-  }
-})
-
-const onClick = () => {
-  if (item.value.type === AppEvents.PROJECT_DELETE) return
-  navigateToProject({ baseId: item.value.body.id })
-}
-</script>
-
-<template>
-  <NotificationItemWrapper :item="item" @click="onClick">
-    <div class="text-xs gap-2">
-      Base
-      <GeneralProjectIcon style="vertical-align: middle" :type="item.body.type" /> <strong>{{ item.body.title }}</strong>
-      {{ action }} successfully
-    </div>
-  </NotificationItemWrapper>
-</template>
diff --git a/packages/nc-gui/components/notification/Item/ProjectInvite.vue b/packages/nc-gui/components/notification/Item/ProjectInvite.vue
index df145cc231..81d5086a48 100644
--- a/packages/nc-gui/components/notification/Item/ProjectInvite.vue
+++ b/packages/nc-gui/components/notification/Item/ProjectInvite.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import type { ProjectInviteEventType } from 'nocodb-sdk'
+
 const props = defineProps<{
-  item: any
+  item: ProjectInviteEventType
 }>()
 
 const { navigateToProject } = useGlobal()
@@ -9,10 +11,11 @@ const item = toRef(props, 'item')
 </script>
 
 <template>
-  <NotificationItemWrapper :item="item" @click="navigateToProject({ baseId: item.body.id })">
-    <div class="text-xs">
-      <strong>{{ item.body.invited_by }}</strong> has invited you to collaborate on
-      <!--      <GeneralProjectIcon style="vertical-align: middle" :type="item.body.type" /> <strong>{{ item.body.title }}</strong> base. -->
+  <NotificationItemWrapper :item="item" @click="navigateToProject({ baseId: item.body.base.id })">
+    <div>
+      <span class="font-semibold">{{ item.body.user.display_name ?? item.body.user.email }}</span> has invited you to collaborate
+      on
+      <span class="font-semibold">{{ item.body.base.title }}</span> base.
     </div>
   </NotificationItemWrapper>
 </template>
diff --git a/packages/nc-gui/components/notification/Item/SharedViewEvent.vue b/packages/nc-gui/components/notification/Item/SharedViewEvent.vue
deleted file mode 100644
index 916fbe335b..0000000000
--- a/packages/nc-gui/components/notification/Item/SharedViewEvent.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import type { ProjectEventType } from 'nocodb-sdk'
-import { AppEvents } from 'nocodb-sdk'
-
-const props = defineProps<{
-  item: ProjectEventType
-}>()
-
-const item = toRef(props, 'item')
-
-const { navigateToProject } = useGlobal()
-
-const action = computed(() => {
-  switch (item.value.type) {
-    case AppEvents.VIEW_CREATE:
-      return 'created'
-    case AppEvents.VIEW_UPDATE:
-      return 'updated'
-    case AppEvents.VIEW_DELETE:
-      return 'deleted'
-  }
-})
-
-const onClick = () => {
-  if (item.value.type === AppEvents.VIEW_DELETE) return
-  navigateToProject({ baseId: item.value.body.id })
-}
-</script>
-
-<template>
-  <NotificationItemWrapper :item="item" @click="onClick">
-    <div class="text-xs gap-2">
-      Shared view
-      <strong>{{ item.body.title }}</strong>
-      {{ action }} successfully
-    </div>
-  </NotificationItemWrapper>
-</template>
diff --git a/packages/nc-gui/components/notification/Item/SortViewEvent.vue b/packages/nc-gui/components/notification/Item/SortViewEvent.vue
deleted file mode 100644
index 532644cf88..0000000000
--- a/packages/nc-gui/components/notification/Item/SortViewEvent.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { ProjectEventType } from 'nocodb-sdk'
-
-const props = defineProps<{
-  item: ProjectEventType
-}>()
-
-const item = toRef(props, 'item')
-</script>
-
-<template>
-  <NotificationItemWrapper :item="item">
-    <div class="text-xs">
-      <strong>{{ item.data?.user?.name }}</strong> {{ item.data?.action }} <strong>{{ item.data?.table?.name }}</strong>
-    </div>
-  </NotificationItemWrapper>
-</template>
diff --git a/packages/nc-gui/components/notification/Item/TableEvent.vue b/packages/nc-gui/components/notification/Item/TableEvent.vue
deleted file mode 100644
index 9eb6d7176a..0000000000
--- a/packages/nc-gui/components/notification/Item/TableEvent.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import type { TableEventType } from 'nocodb-sdk'
-import { AppEvents } from 'nocodb-sdk'
-
-const props = defineProps<{
-  item: TableEventType
-}>()
-
-const item = toRef(props, 'item')
-
-const { navigateToProject } = useGlobal()
-
-const action = computed(() => {
-  switch (item.value.type) {
-    case AppEvents.TABLE_CREATE:
-      return 'created'
-    case AppEvents.TABLE_UPDATE:
-      return 'updated'
-    case AppEvents.TABLE_DELETE:
-      return 'deleted'
-  }
-})
-
-const onClick = () => {
-  if (item.value.type === AppEvents.TABLE_DELETE) return
-  navigateToProject({ baseId: item.value.body.id })
-}
-</script>
-
-<template>
-  <NotificationItemWrapper :item="item" @click="onClick">
-    <div class="text-xs gap-2">
-      Table
-      <strong>{{ item.body.title }}</strong>
-      {{ action }} successfully
-    </div>
-  </NotificationItemWrapper>
-</template>
diff --git a/packages/nc-gui/components/notification/Item/ViewEvent.vue b/packages/nc-gui/components/notification/Item/ViewEvent.vue
deleted file mode 100644
index 6a973214ae..0000000000
--- a/packages/nc-gui/components/notification/Item/ViewEvent.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import type { ProjectEventType } from 'nocodb-sdk'
-import { AppEvents } from 'nocodb-sdk'
-
-const props = defineProps<{
-  item: ProjectEventType
-}>()
-
-const item = toRef(props, 'item')
-
-const { navigateToProject } = useGlobal()
-
-const action = computed(() => {
-  switch (item.value.type) {
-    case AppEvents.VIEW_CREATE:
-      return 'created'
-    case AppEvents.VIEW_UPDATE:
-      return 'updated'
-    case AppEvents.VIEW_DELETE:
-      return 'deleted'
-  }
-})
-
-const onClick = () => {
-  if (item.value.type === AppEvents.VIEW_DELETE) return
-  navigateToProject({ baseId: item.value.body.id })
-}
-</script>
-
-<template>
-  <NotificationItemWrapper :item="item" @click="onClick">
-    <div class="text-xs gap-2">
-      View
-      <strong>{{ item.body.title }}</strong>
-      {{ action }} successfully
-    </div>
-  </NotificationItemWrapper>
-</template>
diff --git a/packages/nc-gui/components/notification/Item/Welcome.vue b/packages/nc-gui/components/notification/Item/Welcome.vue
index 3431bdb3a2..9d7293a1ec 100644
--- a/packages/nc-gui/components/notification/Item/Welcome.vue
+++ b/packages/nc-gui/components/notification/Item/Welcome.vue
@@ -1,26 +1,15 @@
 <script setup lang="ts">
+import type { WelcomeEventType } from 'nocodb-sdk'
+
 const props = defineProps<{
-  item: any
+  item: WelcomeEventType
 }>()
 
-const router = useRouter()
-const route = router.currentRoute
-
 const item = toRef(props, 'item')
-
-const navigateToHome = () => {
-  if (route.value.path !== '/') {
-    navigateTo(`/`)
-  }
-}
 </script>
 
 <template>
-  <NotificationItemWrapper :item="item" @click="navigateToHome">
-    <template #avatar>
-      <img src="~/assets/img/icons/64x64.png" class="w-6" />
-    </template>
-
-    <div class="text-xs">Welcome to <strong>NocoHUB!</strong> We’re excited to have you onboard.</div>
+  <NotificationItemWrapper :item="item">
+    <div>Welcome to <span class="font-semibold">NocoDB!</span> We’re excited to have you onboard.</div>
   </NotificationItemWrapper>
 </template>
diff --git a/packages/nc-gui/components/notification/Item/Wrapper.vue b/packages/nc-gui/components/notification/Item/Wrapper.vue
index be36b9f75b..3d7840052a 100644
--- a/packages/nc-gui/components/notification/Item/Wrapper.vue
+++ b/packages/nc-gui/components/notification/Item/Wrapper.vue
@@ -1,94 +1,73 @@
 <script setup lang="ts">
-import { timeAgo } from 'nocodb-sdk'
+import type { NotificationType } from 'nocodb-sdk'
+import { timeAgo } from '~/utils/datetimeUtils'
 
 const props = defineProps<{
-  item: {
-    created_at: any
-  }
+  item: NotificationType
 }>()
 
 const item = toRef(props, 'item')
 
+const { isMobileMode } = useGlobal()
+
 const notificationStore = useNotification()
 
-const { markAsRead } = notificationStore
+const { toggleRead, deleteNotification } = notificationStore
 </script>
 
 <template>
-  <div
-    class="flex items-center gap-1 cursor-pointer nc-notification-item-wrapper"
-    :class="{
-      active: !item.is_read,
-    }"
-  >
-    <div class="nc-notification-dot" :class="{ active: !item.is_read }"></div>
-    <div class="nc-avatar-wrapper">
+  <div class="flex pl-6 pr-4 w-full overflow-x-hidden group py-4 hover:bg-gray-50 gap-3 relative cursor-pointer">
+    <div class="w-9.625">
       <slot name="avatar">
-        <div class="nc-notification-avatar"></div>
+        <img src="~assets/img/brand/nocodb-logo.svg" alt="NocoDB" class="w-8" />
       </slot>
     </div>
-    <div class="flex-grow ml-3">
-      <div class="flex items-center">
-        <slot />
-      </div>
-      <div
-        v-if="item"
-        class="text-xs text-gray-500 mt-1"
+
+    <div class="text-[13px] min-h-12 w-full leading-5">
+      <slot />
+    </div>
+    <div v-if="item" class="text-xs whitespace-nowrap absolute right-4.1 bottom-5 text-gray-600">
+      {{ timeAgo(item.created_at) }}
+    </div>
+    <div class="flex items-start">
+      <NcTooltip v-if="!item.is_read">
+        <template #title>
+          <span>Mark as read</span>
+        </template>
+
+        <NcButton
+          :class="{
+            '!opacity-100': isMobileMode,
+          }"
+          type="secondary"
+          class="!border-0 transition-all duration-100 opacity-0 !group-hover:opacity-100"
+          size="xsmall"
+          @click.stop="() => toggleRead(item)"
+        >
+          <GeneralIcon icon="check" class="text-gray-700" />
+        </NcButton>
+      </NcTooltip>
+      <NcDropdown
+        v-else
         :class="{
-          'text-primary': !item.is_read,
+          '!opacity-100': isMobileMode,
         }"
+        class="transition-all duration-100 opacity-0 !group-hover:opacity-100"
       >
-        {{ timeAgo(item.created_at) }}
-      </div>
-    </div>
-    <div @click.stop>
-      <a-dropdown>
-        <GeneralIcon v-if="!item.is_read" icon="threeDotVertical" class="nc-notification-menu-icon" />
+        <NcButton size="xsmall" type="secondary" @click.stop>
+          <GeneralIcon icon="threeDotVertical" />
+        </NcButton>
+
         <template #overlay>
-          <a-menu>
-            <a-menu-item @click="markAsRead(item)">
-              <div class="p-2 text-xs">Mark as read</div>
-            </a-menu-item>
-          </a-menu>
+          <NcMenu>
+            <NcMenuItem @click.stop="() => toggleRead(item)"> Mark as unread </NcMenuItem>
+            <NcDivider />
+            <NcMenuItem class="!text-red-500 !hover:bg-red-50" @click.stop="deleteNotification(item)"> Delete </NcMenuItem>
+          </NcMenu>
         </template>
-      </a-dropdown>
+      </NcDropdown>
     </div>
   </div>
 </template>
 
-<style scoped lang="scss">
-.nc-avatar-wrapper {
-  @apply min-w-6 h-6 flex items-center justify-center;
-}
-
-.nc-notification-avatar {
-  @apply w-6 h-6 rounded-full text-white font-weight-bold uppercase bg-gray-100;
-  font-size: 0.7rem;
-}
-
-.nc-notification-dot {
-  @apply min-w-2 min-h-2 mr-1  rounded-full;
-
-  &.active {
-    @apply bg-accent bg-opacity-100;
-  }
-}
-
-.nc-notification-item-wrapper {
-  .nc-notification-menu-icon {
-    @apply !text-12px text-gray-500 opacity-0 transition-opacity duration-200 cursor-pointer;
-  }
-
-  &:hover {
-    .nc-notification-menu-icon {
-      @apply opacity-100;
-    }
-  }
-
-  &.active {
-    @apply bg-primary bg-opacity-4;
-  }
-
-  @apply py-3 px-3;
-}
-</style>
+<style scoped lang="scss"></style>
diff --git a/packages/nc-gui/components/notification/Menu.vue b/packages/nc-gui/components/notification/Menu.vue
index a143e9229d..8c307f3188 100644
--- a/packages/nc-gui/components/notification/Menu.vue
+++ b/packages/nc-gui/components/notification/Menu.vue
@@ -1,38 +1,24 @@
 <script lang="ts" setup>
 const notificationStore = useNotification()
 
-const { loadNotifications, markAsOpened } = notificationStore
-
-onMounted(async () => {
-  await loadNotifications()
-})
-
-const onOpen = (visible: boolean) => {
-  if (visible) {
-    markAsOpened()
-  }
-}
+const { unreadCount } = toRefs(notificationStore)
 </script>
 
 <template>
   <div class="cursor-pointer flex items-center">
-    <a-dropdown :trigger="['click']" @visible-change="onOpen">
-      <div class="relative leading-none">
+    <NcDropdown overlay-class-name="!shadow-none" placement="bottomRight" :trigger="['click']">
+      <NcButton size="small" class="!border-none !bg-gray-50" type="secondary">
+        <span
+          v-if="unreadCount"
+          :key="unreadCount"
+          class="bg-red-500 w-2 h-2 border-1 border-white rounded-[6px] absolute top-[5px] left-[15px]"
+        ></span>
         <GeneralIcon icon="notification" />
-        <GeneralIcon icon="menuDown" />
-        <span v-if="!notificationStore.isOpened && notificationStore.unreadCount" class="nc-count-badge">{{
-          notificationStore.unreadCount
-        }}</span>
-      </div>
+      </NcButton>
+
       <template #overlay>
         <NotificationCard />
       </template>
-    </a-dropdown>
+    </NcDropdown>
   </div>
 </template>
-
-<style scoped>
-.nc-count-badge {
-  @apply absolute flex items-center top-[-6px] right-[-6px] px-1 min-w-[14px] h-[14px] rounded-full bg-accent bg-opacity-100 text-white !text-[9px] !z-21;
-}
-</style>
diff --git a/packages/nc-gui/components/project/AccessSettings.vue b/packages/nc-gui/components/project/AccessSettings.vue
index 64a3784661..9e64fa5dd5 100644
--- a/packages/nc-gui/components/project/AccessSettings.vue
+++ b/packages/nc-gui/components/project/AccessSettings.vue
@@ -153,11 +153,11 @@ onMounted(async () => {
 })
 
 const selected = reactive<{
-  [key: number]: boolean
+  [key: string]: boolean
 }>({})
 
 const toggleSelectAll = (value: boolean) => {
-  filteredCollaborators.value.forEach((_, i) => {
+  filteredCollaborators.value.forEach((_) => {
     selected[_.id] = value
   })
 }
diff --git a/packages/nc-gui/components/project/AllTables.vue b/packages/nc-gui/components/project/AllTables.vue
index 90fdbbb1d3..41fdaeeca3 100644
--- a/packages/nc-gui/components/project/AllTables.vue
+++ b/packages/nc-gui/components/project/AllTables.vue
@@ -1,16 +1,13 @@
 <script lang="ts" setup>
 import type { SourceType, TableType } from 'nocodb-sdk'
 import dayjs from 'dayjs'
-import NcTooltip from '~/components/nc/Tooltip.vue'
 
 const { activeTables } = storeToRefs(useTablesStore())
 const { openTable } = useTablesStore()
-const { openedProject, isDataSourceLimitReached } = storeToRefs(useBases())
+const { openedProject } = storeToRefs(useBases())
 
 const { base } = useBase()
 
-const isNewBaseModalOpen = ref(false)
-
 const { isUIAllowed } = useRoles()
 
 const { $e } = useNuxtApp()
@@ -68,12 +65,6 @@ function openTableCreateDialog(baseIndex?: number | undefined) {
     close(1000)
   }
 }
-
-const onCreateBaseClick = () => {
-  if (isDataSourceLimitReached.value) return
-
-  isNewBaseModalOpen.value = true
-}
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/project/View.vue b/packages/nc-gui/components/project/View.vue
index 8ac05afb26..b6be94c9d5 100644
--- a/packages/nc-gui/components/project/View.vue
+++ b/packages/nc-gui/components/project/View.vue
@@ -35,14 +35,10 @@ const currentBase = computedAsync(async () => {
 
 const { isUIAllowed, baseRoles } = useRoles()
 
-const { base } = storeToRefs(useBase())
-
 const { projectPageTab } = storeToRefs(useConfigStore())
 
 const { isMobileMode } = useGlobal()
 
-const baseSettingsState = ref('')
-
 const userCount = computed(() => (activeProjectId.value ? basesUser.value.get(activeProjectId.value)?.length : 0))
 
 watch(
diff --git a/packages/nc-gui/components/smartsheet/Toolbar.vue b/packages/nc-gui/components/smartsheet/Toolbar.vue
index e460782bc9..8b8f30b7b2 100644
--- a/packages/nc-gui/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui/components/smartsheet/Toolbar.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 const { isGrid, isGallery, isKanban, isMap, isCalendar } = useSmartsheetStoreOrThrow()
 
-const isPublic = inject(IsPublicInj, ref(false))
-
 const { isMobileMode } = useGlobal()
 const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
 
@@ -16,8 +14,6 @@ const isTab = computed(() => {
   if (!isCalendar.value) return false
   return width.value > 1200
 })
-
-const { allowCSVDownload } = useSharedView()
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/smartsheet/column/LinkOptions.vue b/packages/nc-gui/components/smartsheet/column/LinkOptions.vue
index 4fc04b34c5..3c4fd075c0 100644
--- a/packages/nc-gui/components/smartsheet/column/LinkOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LinkOptions.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { storeToRefs, useColumnCreateStoreOrThrow, useVModel } from '#imports'
+import { useColumnCreateStoreOrThrow, useVModel } from '#imports'
 
 const props = defineProps<{
   value: any
@@ -9,9 +9,6 @@ const emit = defineEmits(['update:value'])
 
 const { t } = useI18n()
 
-const viewsStore = useViewsStore()
-const { viewsByTable } = storeToRefs(viewsStore)
-
 const vModel = useVModel(props, 'value', emit)
 
 const { validateInfos, setAdditionalValidations } = useColumnCreateStoreOrThrow()
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
index 776b56f8d1..3e90a9d0d3 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
@@ -9,6 +9,7 @@ const {
   loadComments,
   deleteComment,
   comments,
+  resolveComment,
   audits,
   isAuditLoading,
   saveComment: _saveComment,
@@ -32,6 +33,8 @@ const tab = ref<'comments' | 'audits'>('comments')
 
 const { isUIAllowed } = useRoles()
 
+const router = useRouter()
+
 const hasEditPermission = computed(() => isUIAllowed('commentEdit'))
 
 const editComment = ref<CommentType>()
@@ -120,11 +123,28 @@ const saveComment = async () => {
 
   isCommentMode.value = true
   isSaving.value = true
+  // Optimistic Insert
+
+  comments.value = [
+    ...comments.value,
+    {
+      id: `temp-${new Date().getTime()}`,
+      comment: newComment.value,
+      created_at: new Date().toISOString(),
+      created_by: user.value?.id,
+      created_by_email: user.value?.email,
+      created_display_name: user.value?.display_name ?? '',
+    },
+  ]
+
+  commentInputRef?.value?.setEditorContent('', true)
+  await nextTick(() => {
+    scrollComments()
+  })
 
   try {
     await _saveComment()
     await nextTick(() => {
-      commentInputRef?.value?.setEditorContent('', true)
       isExpandedFormCommentMode.value = true
     })
     scrollComments()
@@ -135,13 +155,54 @@ const saveComment = async () => {
   }
 }
 
+function scrollToComment(commentId: string) {
+  const commentEl = document.querySelector(`.${commentId}`)
+  if (commentEl) {
+    commentEl.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center',
+    })
+  }
+}
+
 watch(commentsWrapperEl, () => {
   setTimeout(() => {
     nextTick(() => {
-      scrollComments()
+      const query = router.currentRoute.value.query
+      const commentId = query.commentId
+      if (commentId) {
+        router.push({
+          query: {
+            rowId: query.rowId,
+          },
+        })
+        scrollToComment(commentId as string)
+      } else {
+        scrollComments()
+      }
     })
   }, 100)
 })
+
+const timesAgo = (comment: CommentType) => {
+  return comment.created_at !== comment.updated_at ? `Edited ${timeAgo(comment.updated_at!)}` : timeAgo(comment.created_at!)
+}
+
+const createdBy = (
+  comment: CommentType & {
+    created_display_name?: string
+  },
+) => {
+  if (comment.created_by === user.value?.id) {
+    return 'You'
+  } else if (comment.created_display_name?.trim()) {
+    return comment.created_by_email || 'Shared source'
+  } else if (comment.created_by_email) {
+    return comment.created_by_email
+  } else {
+    return 'Shared source'
+  }
+}
 </script>
 
 <template>
@@ -171,108 +232,112 @@ watch(commentsWrapperEl, () => {
               <div class="font-medium text-center my-6 text-gray-500">{{ $t('activity.startCommenting') }}</div>
             </div>
             <div v-else ref="commentsWrapperEl" class="flex flex-col h-full py-1 nc-scrollbar-thin">
-              <div v-for="comment of comments" :key="comment.id" class="nc-comment-item">
+              <div v-for="comment of comments" :key="comment.id" :class="`${comment.id}`" class="nc-comment-item">
                 <div
                   :class="{
-                    'hover:bg-gray-200': comment.id !== editComment?.id,
+                    'hover:bg-gray-200 bg-[#F9F9FA]': comment.id !== editComment?.id,
+                    'bg-gray-200': comment.id === editComment?.id,
+                    '!bg-[#E7E7E9]': comment.resolved_by,
                   }"
-                  class="group gap-3 overflow-hidden flex items-start px-3 py-1"
+                  class="group gap-3 overflow-hidden px-3 py-2"
                 >
-                  <GeneralUserIcon
-                    :email="comment.created_by_email"
-                    :name="comment.created_display_name"
-                    class="mt-0.5"
-                    size="medium"
-                  />
-                  <div class="flex-1 flex flex-col gap-1 max-w-[calc(100%_-_24px)]">
-                    <div class="w-full flex justify-between gap-3 min-h-7">
-                      <div class="flex items-center max-w-[calc(100%_-_40px)]">
-                        <div class="w-full flex flex-wrap gap-3 items-center">
-                          <NcTooltip
-                            placement="bottomLeft"
-                            :arrow-point-at-center="false"
-                            class="truncate capitalize text-gray-800 font-weight-700 !text-[13px] max-w-42"
-                          >
-                            <template #title>
-                              {{
-                                (comment.created_by === user?.id
-                                  ? comment.created_display_name?.trim() || comment.created_by_email
-                                  : comment.created_display_name?.trim()
-                                  ? comment.created_by_email
-                                  : comment.created_display_name?.trim()) || 'Shared source'
-                              }}
-                            </template>
-                            <span
-                              class="text-ellipsis capitalize overflow-hidden"
-                              :style="{
-                                lineHeight: '18px',
-                                wordBreak: 'keep-all',
-                                whiteSpace: 'nowrap',
-                                display: 'inline',
-                              }"
-                            >
-                              {{
-                                comment.created_by === user?.id
-                                  ? 'You'
-                                  : comment.created_display_name?.trim() || comment.created_by_email || 'Shared source'
-                              }}
-                            </span>
-                          </NcTooltip>
-                          <div class="text-xs text-gray-500">
-                            {{
-                              comment.created_at !== comment.updated_at
-                                ? `Edited ${timeAgo(comment.updated_at)}`
-                                : timeAgo(comment.created_at)
-                            }}
-                          </div>
+                  <div class="flex items-start justify-between">
+                    <div class="flex items-start gap-3">
+                      <GeneralUserIcon
+                        :email="comment.created_by_email"
+                        :name="comment.created_display_name"
+                        class="mt-0.5"
+                        size="medium"
+                      />
+                      <div class="flex h-[28px] items-center gap-3">
+                        <NcTooltip class="truncate capitalize text-gray-800 font-weight-700 !text-[13px] max-w-42">
+                          <template #title>
+                            {{ comment.created_display_name?.trim() || comment.created_by_email || 'Shared source' }}
+                          </template>
+                          <span class="text-ellipsis capitalize overflow-hidden" :style="{}">
+                            {{ createdBy(comment) }}
+                          </span>
+                        </NcTooltip>
+
+                        <div class="text-xs text-gray-500">
+                          {{ timesAgo(comment) }}
                         </div>
                       </div>
-
-                      <div class="flex items-center opacity-0 transition-all group-hover:opacity-100 ease-out duration-400 gap-2">
-                        <NcDropdown
-                          v-if="comment.created_by_email === user!.email && !editComment"
-                          overlay-class-name="!min-w-[160px]"
-                          placement="bottomRight"
-                        >
-                          <NcButton class="nc-expand-form-more-actions !w-7 !h-7 !bg-transparent" size="xsmall" type="text">
-                            <GeneralIcon class="text-md !hover:text-brand-500" icon="threeDotVertical" />
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <NcDropdown
+                        v-if="(comment.created_by_email === user!.email && !editComment )"
+                        :class="{
+                        'opacity-0 group-hover:opacity-100': comment.created_by_email === user!.email && !editComment,
+                        }"
+                        overlay-class-name="!min-w-[160px]"
+                        placement="bottomRight"
+                      >
+                        <NcButton class="nc-expand-form-more-actions !w-7 !h-7 !bg-transparent" size="xsmall" type="text">
+                          <GeneralIcon class="text-md" icon="threeDotVertical" />
+                        </NcButton>
+                        <template #overlay>
+                          <NcMenu>
+                            <NcMenuItem
+                              v-e="['c:comment-expand:comment:edit']"
+                              class="text-gray-700"
+                              @click="editComments(comment)"
+                            >
+                              <div class="flex gap-2 items-center">
+                                <component :is="iconMap.rename" class="cursor-pointer" />
+                                {{ $t('general.edit') }}
+                              </div>
+                            </NcMenuItem>
+                            <NcMenuItem
+                              v-e="['c:row-expand:comment:delete']"
+                              class="!text-red-500 !hover:bg-red-50"
+                              @click="deleteComment(comment.id!)"
+                            >
+                              <div class="flex gap-2 items-center">
+                                <component :is="iconMap.delete" class="cursor-pointer" />
+                                {{ $t('general.delete') }}
+                              </div>
+                            </NcMenuItem>
+                          </NcMenu>
+                        </template>
+                      </NcDropdown>
+
+                      <div v-if="appInfo.ee">
+                        <NcTooltip v-if="!comment.resolved_by">
+                          <NcButton
+                            class="!w-7 !h-7 !bg-transparent opacity-0 group-hover:opacity-100"
+                            size="xsmall"
+                            type="text"
+                            @click="resolveComment(comment.id!)"
+                          >
+                            <GeneralIcon class="text-md" icon="checkCircle" />
                           </NcButton>
-                          <template #overlay>
-                            <NcMenu>
-                              <NcMenuItem
-                                v-e="['c:row-expand:comment:edit']"
-                                class="text-gray-700"
-                                @click="editComments(comment)"
-                              >
-                                <div class="flex gap-2 items-center">
-                                  <component :is="iconMap.rename" class="cursor-pointer" />
-                                  {{ $t('general.edit') }}
-                                </div>
-                              </NcMenuItem>
-                              <NcDivider />
-                              <NcMenuItem
-                                v-e="['c:row-expand:comment:delete']"
-                                class="!text-red-500 !hover:bg-red-50"
-                                @click="deleteComment(comment.id!)"
-                              >
-                                <div class="flex gap-2 items-center">
-                                  <component :is="iconMap.delete" class="cursor-pointer" />
-                                  {{ $t('general.delete') }}
-                                </div>
-                              </NcMenuItem>
-                            </NcMenu>
-                          </template>
-                        </NcDropdown>
+
+                          <template #title>Click to resolve </template>
+                        </NcTooltip>
+
+                        <NcTooltip v-else>
+                          <template #title>{{ `Resolved by ${comment.resolved_display_name}` }}</template>
+                          <div class="flex text-[#17803D] font-semibold items-center">
+                            <NcButton class="!h-7 !bg-transparent" size="xsmall" type="text" @click="resolveComment(comment.id)">
+                              <div class="flex items-center gap-2 !text-[#17803D]">
+                                <span> Resolved </span>
+                                <component :is="iconMap.checkCircle" />
+                              </div>
+                            </NcButton>
+                          </div>
+                        </NcTooltip>
                       </div>
                     </div>
-
+                  </div>
+                  <div class="flex-1 flex flex-col gap-1 mt-1 max-w-[calc(100%)]">
                     <SmartsheetExpandedFormRichComment
                       v-if="comment.id === editComment?.id"
                       ref="editRef"
                       v-model:value="value"
                       autofocus
                       :hide-options="false"
-                      class="expanded-form-comment-input !pt-1 !pb-0.5 !pl-2 !m-0 w-full !border-1 !border-gray-200 !rounded-lg !bg-transparent !text-gray-800 !text-small !leading-18px !max-h-[694px]"
+                      class="expanded-form-comment-edit-input expanded-form-comment-input !pt-2 !pb-0.5 !pl-2 !m-0 w-full !border-1 !border-gray-200 !rounded-lg !bg-white !text-gray-800 !text-small !leading-18px !max-h-[694px]"
                       data-testid="expanded-form-comment-input"
                       sync-value-change
                       @save="onEditComment"
@@ -286,7 +351,7 @@ watch(commentsWrapperEl, () => {
                       @keydown.enter.exact.prevent="onEditComment"
                     />
 
-                    <div v-else class="text-small leading-18px text-gray-800">
+                    <div v-else class="text-small pl-9 leading-18px text-gray-800">
                       <SmartsheetExpandedFormRichComment
                         :value="comment.comment"
                         class="!text-small !leading-18px !text-gray-800 -ml-1"
@@ -362,14 +427,7 @@ watch(commentsWrapperEl, () => {
                       <template #title>
                         {{ audit.display_name?.trim() || audit.user || 'Shared source' }}
                       </template>
-                      <span
-                        class="text-ellipsis overflow-hidden font-bold text-gray-800"
-                        :style="{
-                          wordBreak: 'keep-all',
-                          whiteSpace: 'nowrap',
-                          display: 'inline',
-                        }"
-                      >
+                      <span class="text-ellipsis break-keep inline whitespace-nowrap overflow-hidden font-bold text-gray-800">
                         {{ audit.display_name?.trim() || audit.user || 'Shared source' }}
                       </span>
                     </NcTooltip>
@@ -460,4 +518,8 @@ watch(commentsWrapperEl, () => {
     @apply !text-gray-400;
   }
 }
+
+:deep(.expanded-form-comment-edit-input .nc-comment-rich-editor) {
+  @apply !pl-2 bg-white;
+}
 </style>
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/RichComment.vue b/packages/nc-gui/components/smartsheet/expanded-form/RichComment.vue
index f9b63173bc..888af67439 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/RichComment.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/RichComment.vue
@@ -243,7 +243,11 @@ defineExpose({
       <EditorContent
         ref="editorDom"
         :editor="editor"
-        class="flex flex-col nc-comment-rich-editor px-1.5 w-full scrollbar-thin scrollbar-thumb-gray-200 nc-truncate scrollbar-track-transparent"
+        :class="{
+          'px-1.5': !props.readOnly,
+          'px-[0.25rem]': props.readOnly,
+        }"
+        class="flex flex-col nc-comment-rich-editor w-full scrollbar-thin scrollbar-thumb-gray-200 nc-truncate scrollbar-track-transparent"
         @keydown.stop="handleKeyPress"
       />
 
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index c35cae5335..2e28ee99e1 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -331,7 +331,7 @@ if (isKanban.value) {
 provide(IsExpandedFormOpenInj, isExpanded)
 
 const triggerRowLoad = async (rowId?: string) => {
-  await Promise.allSettled([loadComments(), loadAudits(), _loadRow(rowId)])
+  await Promise.allSettled([loadComments(rowId), loadAudits(rowId), _loadRow(rowId)])
   isLoading.value = false
 }
 
diff --git a/packages/nc-gui/composables/useExpandedFormStore.ts b/packages/nc-gui/composables/useExpandedFormStore.ts
index e4887c8365..7e0d8cd7dc 100644
--- a/packages/nc-gui/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui/composables/useExpandedFormStore.ts
@@ -14,6 +14,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
     Array<
       CommentType & {
         created_display_name: string
+        resolved_display_name?: string
       }
     >
   >([])
@@ -102,10 +103,10 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
     return extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
   })
 
-  const loadComments = async () => {
-    if (!isUIAllowed('commentList') || !row.value) return
+  const loadComments = async (_rowId?: string) => {
+    if (!isUIAllowed('commentList') || (!row.value && !_rowId)) return
 
-    const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
+    const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[]) ?? _rowId
 
     if (!rowId) return
 
@@ -125,13 +126,21 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
 
       comments.value = res.map((comment) => {
         const user = baseUsers.value.find((u) => u.id === comment.created_by)
+        const resolvedUser = comment.resolved_by ? baseUsers.value.find((u) => u.id === comment.resolved_by) : null
         return {
           ...comment,
           created_display_name: user?.display_name ?? (user?.email ?? '').split('@')[0],
+          resolved_display_name: resolvedUser ? resolvedUser.display_name ?? resolvedUser.email.split('@')[0] : null,
         }
       })
-    } catch (e: any) {
-      message.error(e.message)
+    } catch (e: unknown) {
+      message.error(
+        await extractSdkResponseErrorMsg(
+          e as Error & {
+            response: any
+          },
+        ),
+      )
     } finally {
       isCommentsLoading.value = false
     }
@@ -139,19 +148,37 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
 
   const deleteComment = async (commentId: string) => {
     if (!isUIAllowed('commentDelete')) return
+    const tempC = comments.value.find((c) => c.id === commentId)
 
     try {
+      comments.value = comments.value.filter((c) => c.id !== commentId)
+
       await $api.utils.commentDelete(commentId)
-      await loadComments()
-    } catch (e: any) {
-      message.error(e.message)
+
+      // update comment count in rowMeta
+      Object.assign(row.value, {
+        ...row.value,
+        rowMeta: {
+          ...row.value.rowMeta,
+          commentCount: (row.value.rowMeta.commentCount ?? 1) - 1,
+        },
+      })
+    } catch (e: unknown) {
+      message.error(
+        await extractSdkResponseErrorMsg(
+          e as Error & {
+            response: any
+          },
+        ),
+      )
+      comments.value = [...comments.value, tempC]
     }
   }
 
-  const loadAudits = async () => {
-    if (!isUIAllowed('auditList') || !row.value) return
+  const loadAudits = async (_rowId?: string) => {
+    if (!isUIAllowed('auditList') || (!row.value && !_rowId)) return
 
-    const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
+    const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[]) ?? _rowId
 
     if (!rowId) return
 
@@ -165,7 +192,13 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
           })
         ).list?.reverse?.() || []
     } catch (e: any) {
-      message.error(e.message)
+      message.error(
+        await extractSdkResponseErrorMsg(
+          e as Error & {
+            response: any
+          },
+        ),
+      )
     } finally {
       isAuditLoading.value = false
     }
@@ -182,6 +215,41 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
     }
   }
 
+  const resolveComment = async (commentId: string) => {
+    const tempC = comments.value.find((c) => c.id === commentId)
+
+    try {
+      comments.value = comments.value.map((c) => {
+        if (c.id === commentId) {
+          return {
+            ...c,
+            resolved_by: tempC.resolved_by ? null : $state.user?.value?.id,
+            resolved_by_email: tempC.resolved_by ? null : $state.user?.value?.email,
+            resolved_display_name: tempC.resolved_by
+              ? null
+              : $state.user?.value?.display_name ?? $state.user?.value?.email.split('@')[0],
+          }
+        }
+        return c
+      })
+      await $api.utils.commentResolve(commentId)
+    } catch (e: unknown) {
+      comments.value = comments.value.map((c) => {
+        if (c.id === commentId) {
+          return tempC
+        }
+        return c
+      })
+      message.error(
+        await extractSdkResponseErrorMsg(
+          e as Error & {
+            response: any
+          },
+        ),
+      )
+    }
+  }
+
   const saveComment = async () => {
     try {
       if (!row.value || !comment.value) return
@@ -196,13 +264,28 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
         comment: `${comment.value}`.replace(/(<br \/>)+$/g, ''),
       })
 
-      reloadTrigger?.trigger()
+      // Increase Comment Count in rowMeta
+      Object.assign(row.value, {
+        rowMeta: {
+          ...row.value.rowMeta,
+          commentCount: (row.value.rowMeta.commentCount ?? 0) + 1,
+        },
+      })
+
+      // reloadTrigger?.trigger()
 
       await Promise.all([loadComments(), loadAudits()])
 
       comment.value = ''
     } catch (e: any) {
-      message.error(e.message)
+      comments.value = comments.value.filter((c) => !(c.id ?? '').startsWith('temp-'))
+      message.error(
+        await extractSdkResponseErrorMsg(
+          e as Error & {
+            response: any
+          },
+        ),
+      )
     }
 
     $e('a:row-expand:comment')
@@ -244,7 +327,10 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
 
       Object.assign(row.value, {
         row: data,
-        rowMeta: {},
+        rowMeta: {
+          ...row.value.rowMeta,
+          new: false,
+        },
         oldRow: { ...data },
       })
 
@@ -406,7 +492,9 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
       Object.assign(row.value, {
         row: record,
         oldRow: { ...record },
-        rowMeta: {},
+        rowMeta: {
+          ...row.value.rowMeta,
+        },
       })
     } catch (e: any) {
       message.error(`${t('msg.error.errorLoadingRecord')}`)
@@ -449,6 +537,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
     comments,
     audits,
     isAuditLoading,
+    resolveComment,
     isCommentsLoading,
     saveComment,
     comment,
diff --git a/packages/nc-gui/store/notification.ts b/packages/nc-gui/store/notification.ts
index 04502a1598..71fe9cb05b 100644
--- a/packages/nc-gui/store/notification.ts
+++ b/packages/nc-gui/store/notification.ts
@@ -1,74 +1,121 @@
 import { defineStore } from 'pinia'
 import type { NotificationType } from 'nocodb-sdk'
-import type { Socket } from 'socket.io-client'
-import io from 'socket.io-client'
 
 export const useNotification = defineStore('notificationStore', () => {
-  const notifications = ref<NotificationType[]>([])
-  const isOpened = ref(false)
+  const readNotifications = ref<NotificationType[]>([])
+
+  const unreadNotifications = ref<NotificationType[]>([])
+
+  const readPageInfo = ref()
+
+  const unreadPageInfo = ref()
 
-  const pageInfo = ref()
   const unreadCount = ref(0)
 
-  const isRead = ref(false)
+  const notificationTab = ref<'read' | 'unread'>('unread')
 
   const { api, isLoading } = useApi()
 
-  const { appInfo, token } = useGlobal()
+  const pollNotifications = async () => {
+    try {
+      const res = await api.notification.poll()
 
-  let socket: Socket
+      if (res.status === 'success') {
+        if (notificationTab.value === 'unread') {
+          unreadNotifications.value = [JSON.parse(res.data), ...unreadNotifications.value]
+        }
 
-  const init = (token) => {
-    const url = new URL(appInfo.value.ncSiteUrl, window.location.href.split(/[?#]/)[0]).href
+        unreadCount.value = unreadCount.value + 1
+      }
 
-    socket = io(`${url}${url.endsWith('/') ? '' : '/'}notifications`, {
-      extraHeaders: { 'xc-auth': token },
-    })
+      await pollNotifications()
+    } catch (e) {
+      // If network error, retry after 2 seconds
+      setTimeout(pollNotifications, 2000)
+    }
+  }
 
-    socket.on('notification', (data) => {
-      notifications.value = [data, ...notifications.value]
-      pageInfo.value.totalRows += 1
-      unreadCount.value += 1
-      isOpened.value = false
-    })
+  const loadReadNotifications = async (loadMore?: boolean) => {
+    try {
+      const response = await api.notification.list({
+        is_read: true,
+        limit: 10,
+        offset: loadMore ? readNotifications.value.length : 0,
+      })
+
+      if (loadMore) {
+        readNotifications.value = [...readNotifications.value, ...response.list]
+      } else {
+        readNotifications.value = response.list
+      }
+
+      readPageInfo.value = response.pageInfo
+
+      unreadCount.value = Number(response.unreadCount)
+    } catch (e) {
+      console.log(e)
+    }
+  }
 
-    socket.emit('subscribe', {})
+  const loadUnReadNotifications = async (loadMore?: boolean) => {
+    try {
+      const response = await api.notification.list({
+        is_read: false,
+        limit: 10,
+        offset: loadMore ? unreadNotifications.value.length : 0,
+      })
+
+      if (loadMore) {
+        unreadNotifications.value = [...unreadNotifications.value, ...response.list]
+      } else {
+        unreadNotifications.value = response.list
+      }
+
+      unreadPageInfo.value = response.pageInfo
+
+      unreadCount.value = Number(response.unreadCount)
+    } catch (e) {
+      console.log(e)
+    }
   }
 
-  watch(
-    () => token.value,
-    (newToken, oldToken) => {
-      if (newToken && newToken !== oldToken) init(newToken)
-      else if (!newToken) socket?.disconnect()
-    },
-    { immediate: true },
-  )
-
-  const loadNotifications = async (loadMore = false) => {
-    const response = await api.notification.list({
-      is_read: isRead.value,
-      limit: 10,
-      offset: loadMore ? notifications.value.length : 0,
-    })
-
-    if (loadMore) {
-      notifications.value = [...notifications.value, ...response.list]
+  const insertAndSort = (notification: NotificationType, oldState?: boolean) => {
+    if (oldState) {
+      readNotifications.value = readNotifications.value.filter((n) => n.id !== notification.id)
+
+      unreadNotifications.value = [notification, ...unreadNotifications.value].sort((a, b) => {
+        return new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+      })
+
+      unreadCount.value = unreadCount.value + 1
     } else {
-      notifications.value = response.list
-    }
+      readNotifications.value = [notification, ...readNotifications.value].sort((a, b) => {
+        return new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+      })
+
+      unreadNotifications.value = unreadNotifications.value.filter((n) => n.id !== notification.id)
 
-    pageInfo.value = response.pageInfo
-    unreadCount.value = (response as any).unreadCount
+      unreadCount.value = unreadCount.value - 1
+    }
   }
 
-  const markAsRead = async (notification: NotificationType) => {
-    if (notification.is_read) return
+  const toggleRead = async (notification: NotificationType, ignoreTrigger?: boolean) => {
+    if (ignoreTrigger) return
+
+    const currState = notification.is_read
 
-    await api.notification.update(notification.id!, {
-      is_read: true,
-    })
+    try {
+      await api.notification.update(notification.id!, {
+        is_read: !currState,
+      })
+      notification.is_read = !currState
 
-    notification.is_read = true
+      insertAndSort(notification, currState)
+    } catch (e) {
+      message.error(
+        `Failed to update Notification: ${await extractSdkResponseErrorMsgv2(e as Error & { response: { data: string } })}`,
+      )
+    }
   }
 
   const markAllAsRead = async (notification: NotificationType) => {
@@ -76,23 +123,64 @@ export const useNotification = defineStore('notificationStore', () => {
 
     await api.notification.markAllAsRead()
 
-    await loadNotifications()
+    await Promise.allSettled([loadReadNotifications(), loadUnReadNotifications()])
+  }
+
+  const deleteNotification = async (notification: NotificationType) => {
+    try {
+      readNotifications.value = readNotifications.value.filter((n) => n.id !== notification.id)
+
+      await api.notification.delete(notification.id!)
+    } catch (e) {
+      readNotifications.value = [notification, ...readNotifications.value]
+
+      message.error(
+        `Failed to delete Notification: ${await extractSdkResponseErrorMsgv2(
+          e as Error & {
+            response: {
+              data: string
+            }
+          },
+        )}`,
+      )
+    }
   }
 
-  const markAsOpened = async () => {
-    isOpened.value = true
+  watch(notificationTab, async (tab) => {
+    if (tab === 'read') {
+      await loadReadNotifications()
+    } else {
+      await loadUnReadNotifications()
+    }
+  })
+
+  const init = async () => {
+    await Promise.allSettled([loadReadNotifications(), loadUnReadNotifications()])
+    // For playwright, polling will cause the test to hang indefinitely
+    // as we wait for the networkidle event. So, we disable polling for playwright
+    if (!(window as any).isPlaywright) {
+      pollNotifications()
+    }
   }
 
+  onMounted(init)
+
   return {
-    notifications,
-    loadNotifications,
+    unreadNotifications,
+    readNotifications,
+    loadUnReadNotifications,
+    loadReadNotifications,
+    deleteNotification,
+    readPageInfo,
+    unreadPageInfo,
     isLoading,
-    isRead,
-    pageInfo,
-    markAsRead,
+    notificationTab,
+    toggleRead,
     markAllAsRead,
     unreadCount,
-    isOpened,
-    markAsOpened,
   }
 })
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useNotification, import.meta.hot))
+}
diff --git a/packages/nc-gui/utils/datetimeUtils.ts b/packages/nc-gui/utils/datetimeUtils.ts
index 8555788b6d..2924b723ff 100644
--- a/packages/nc-gui/utils/datetimeUtils.ts
+++ b/packages/nc-gui/utils/datetimeUtils.ts
@@ -17,7 +17,7 @@ export function parseStringDateTime(
   return v
 }
 
-export const timeAgo = (date: any) => {
+export const timeAgo = (date: string) => {
   if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(date)) {
     // if there is no timezone info, consider as UTC
     // e.g. 2023-01-01 08:00:00 (MySQL)
@@ -34,6 +34,7 @@ export const timeAgo = (date: any) => {
   const years = Math.floor(days / 365)
 
   if (seconds < 60) {
+    if (seconds < 0) return '1s ago'
     return `${seconds}s ago`
   }
   if (minutes < 60) {
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index 9ff4e2dbf3..57e0cdd0c8 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -110,7 +110,6 @@ import NcIconsRowHeightShort from '~icons/nc-icons/row-height-short'
 import NcIconsRowHeightTall from '~icons/nc-icons/row-height-tall'
 import NcIconsRowHeightExtraTall from '~icons/nc-icons/row-height-extra-tall'
 import NcArticle from '~icons/nc-icons/article'
-import NcNotification from '~icons/material-symbols/notifications-outline'
 import NcCommentHere from '~icons/nc-icons/comment-here'
 import NcAddDataSource from '~icons/nc-icons/add-data-source'
 import NcDatabaseIcon from '~icons/nc-icons/database'
@@ -131,6 +130,9 @@ import NcDownload from '~icons/nc-icons/download'
 import NcOffice from '~icons/nc-icons/office'
 import NcArrowUpRight from '~icons/nc-icons/arrow-up-right'
 import NcSlash from '~icons/nc-icons/slash'
+import NcNotification from '~icons/nc-icons/bell'
+import NcCheckCircle from '~icons/nc-icons/check-circle'
+
 // import NcProjectGray from '~icons/nc-icons/project-gray'
 import NcPhoneCall from '~icons/nc-icons/phone-call'
 import NcItalic from '~icons/nc-icons/italic'
@@ -396,6 +398,7 @@ export const iconMap = {
   project: Project,
   search: NcSearch,
   calendar: Calendar,
+  checkCircle: NcCheckCircle,
   error: h('span', { class: 'material-symbols' }, 'error'),
   info: h(MsInfo, {}, () => 'info'),
   inbox: h('span', { class: 'material-symbols' }, 'inbox'),
diff --git a/packages/nc-mail-templates/.gitignore b/packages/nc-mail-templates/.gitignore
new file mode 100644
index 0000000000..0ad360610f
--- /dev/null
+++ b/packages/nc-mail-templates/.gitignore
@@ -0,0 +1 @@
+.dist
\ No newline at end of file
diff --git a/packages/nc-mail-templates/package.json b/packages/nc-mail-templates/package.json
new file mode 100644
index 0000000000..fd77ce5377
--- /dev/null
+++ b/packages/nc-mail-templates/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "nc-mail-templates",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "generate": "pnpm build && scripts/move_templates.sh",
+    "build": "tsx ./src/index.ts"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "html-entities-decoder": "^1.0.5",
+    "typescript": "^5.3.3",
+    "vue-extensible-mail": "^0.0.3 "
+  },
+  "devDependencies": {
+    "tsx": "^4.10.4",
+    "@types/html-entities-decoder": "^1.0.2"
+  }
+}
\ No newline at end of file
diff --git a/packages/nc-mail-templates/src/index.ts b/packages/nc-mail-templates/src/index.ts
new file mode 100644
index 0000000000..287269f26d
--- /dev/null
+++ b/packages/nc-mail-templates/src/index.ts
@@ -0,0 +1,33 @@
+import {createEmailClient} from "vue-extensible-mail";
+import components from "./templates/components";
+import assets from "./templates/assets";
+import * as fs from "node:fs";
+import decode from 'html-entities-decoder';
+
+
+const emailClient = createEmailClient({
+    path: "./src/templates",
+    components: {
+        ...components,
+        ...assets
+    },
+});
+
+
+const exportString = 'export default `'
+
+if (fs.existsSync("./.dist")) {
+    fs.rmdirSync("./.dist", {recursive: true});
+}
+
+
+for (const file of fs.readdirSync("./src/templates")) {
+    if (file.endsWith(".vue")) {
+        const markup = decode(await emailClient.renderEmail(file, {}, {}))
+
+        if (!fs.existsSync("./.dist")) {
+            fs.mkdirSync("./.dist");
+        }
+        fs.writeFileSync(`./.dist/${file.replace(".vue", ".ts")}`, exportString + markup + "`")
+    }
+}
\ No newline at end of file
diff --git a/packages/nc-mail-templates/src/templates/Mention.vue b/packages/nc-mail-templates/src/templates/Mention.vue
new file mode 100644
index 0000000000..a78ad1c478
--- /dev/null
+++ b/packages/nc-mail-templates/src/templates/Mention.vue
@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import {defaultComponents} from "vue-extensible-mail";
+
+const { Container } = defaultComponents;
+</script>
+
+<template>
+  <HtmlWrapper>
+    <Header />
+
+    <Container>
+      <div style="max-width: 400px">
+        <h1
+            style="
+            font-size: 40px;
+            font-weight: bold;
+            color: #101015;
+            margin-block: 64px;
+          "
+        >
+          You have been mentioned.
+        </h1>
+        <p
+            style="
+            font-size: 14px;
+            color: #1f293a;
+            margin-block: 64px;
+            padding-bottom: 24px;
+            padding-top: 24px;
+          "
+        >
+          <strong> <%- name %> </strong>
+          has mentioned you in a comment on the
+          <strong> <%- display_name %> </strong>
+          in the
+          <strong> <%- table %> / <%- base %> </strong>.
+        </p>
+
+        <a href="<%- url %>" style="text-decoration: none">
+          <div
+              style="
+              cursor: pointer;
+              border-radius: 8px;
+              background-color: #3366ff;
+              border: none;
+              color: white;
+              padding-bottom: 15px;
+              padding-top: 15px;
+              max-width: 426px;
+              width: 100%;
+              margin-block: 64px;
+              text-align: center;
+            "
+          >
+            <span> View Comment </span>
+          </div>
+        </a>
+
+        <p
+            style="
+            color: #374151;
+            font-size: 14px;
+            padding-top: 24px;
+            padding-bottom: 24px;
+          "
+        >
+          NocoDB is solution for all your database needs.
+        </p>
+      </div>
+      <Footer style="width: 100%" />
+    </Container>
+  </HtmlWrapper>
+</template>
diff --git a/packages/nc-mail-templates/src/templates/Welcome.vue b/packages/nc-mail-templates/src/templates/Welcome.vue
new file mode 100644
index 0000000000..a2292f20b3
--- /dev/null
+++ b/packages/nc-mail-templates/src/templates/Welcome.vue
@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import {defaultComponents} from "vue-extensible-mail";
+
+const { Container } = defaultComponents;
+</script>
+
+<template>
+  <HtmlWrapper>
+    <Header />
+
+    <Container>
+      <div>
+        <h1
+            style="
+            font-size: 40px;
+            font-weight: bold;
+            color: #101015;
+            margin-block: 64px;
+          "
+        >
+          Welcome to NocoDB!
+        </h1>
+        <p
+            style="
+            font-size: 16px;
+            color: #1f293a;
+            margin-block: 64px;
+            padding-bottom: 24px;
+            padding-top: 24px;
+          "
+        >
+          We’re excited to have you onboard.
+        </p>
+        <a href="https://www.nocodb.com" style="text-decoration: none">
+          <div
+              style="
+              cursor: pointer;
+              border-radius: 8px;
+              background-color: #3366ff;
+              border: none;
+              color: white;
+              padding-bottom: 15px;
+              padding-top: 15px;
+              max-width: 426px;
+              width: 100%;
+              margin-block: 64px;
+              text-align: center;
+            "
+          >
+            <span> Explore NocoDB </span>
+          </div>
+        </a>
+
+        <p
+            style="
+            color: #374151;
+            font-size: 14px;
+            padding-top: 24px;
+            padding-bottom: 24px;
+          "
+        >
+          NocoDB is solution for all your database needs.
+        </p>
+      </div>
+      <Footer style="width: 100%" />
+    </Container>
+  </HtmlWrapper>
+</template>
diff --git a/packages/nc-mail-templates/src/templates/assets/DiscordIcon.ts b/packages/nc-mail-templates/src/templates/assets/DiscordIcon.ts
new file mode 100644
index 0000000000..b539771f42
--- /dev/null
+++ b/packages/nc-mail-templates/src/templates/assets/DiscordIcon.ts
@@ -0,0 +1,15 @@
+import {defineComponent, h} from "vue";
+
+export default defineComponent({
+    name: "Discord Icon",
+    setup() {
+        return () => {
+            return h("img", {
+                src: "https://app.nocodb.com/discord.png",
+                width: "24",
+                height: "24",
+                alt: "Discord Icon",
+            });
+        };
+    },
+});
diff --git a/packages/nc-mail-templates/src/templates/assets/GithubIcon.ts b/packages/nc-mail-templates/src/templates/assets/GithubIcon.ts
new file mode 100644
index 0000000000..c5e749bb64
--- /dev/null
+++ b/packages/nc-mail-templates/src/templates/assets/GithubIcon.ts
@@ -0,0 +1,15 @@
+import {defineComponent, h} from "vue";
+
+export default defineComponent({
+    name: "GithubIcon",
+    setup() {
+        return () => {
+            return h("img", {
+                src: "https://app.nocodb.com/github.png",
+                alt: "Github Icon",
+                width: "24",
+                height: "24",
+            });
+        };
+    },
+});
diff --git a/packages/nc-mail-templates/src/templates/assets/LinkedIcon.ts b/packages/nc-mail-templates/src/templates/assets/LinkedIcon.ts
new file mode 100644
index 0000000000..2abbfb0639
--- /dev/null
+++ b/packages/nc-mail-templates/src/templates/assets/LinkedIcon.ts
@@ -0,0 +1,18 @@
+import {defineComponent, h} from "vue";
+
+export default defineComponent({
+    name: "LinkedinIcon",
+    setup() {
+        return () => {
+            return h(
+                "img",
+                {
+                    src: "https://app.nocodb.com/linkedin.png",
+                    alt: "LinkedIn Icon",
+                    width: "24",
+                    height: "24",
+                },
+            );
+        };
+    },
+});
diff --git a/packages/nc-mail-templates/src/templates/assets/TwitterIcon.ts b/packages/nc-mail-templates/src/templates/assets/TwitterIcon.ts
new file mode 100644
index 0000000000..df4d07f1aa
--- /dev/null
+++ b/packages/nc-mail-templates/src/templates/assets/TwitterIcon.ts
@@ -0,0 +1,15 @@
+import {defineComponent, h} from "vue";
+
+export default defineComponent({
+    name: "TwitterIcon",
+    setup() {
+        return () => {
+            return h("img", {
+                width: "24",
+                height: "24",
+                src: "https://app.nocodb.com/twitter.png",
+                alt: "Twitter Icon",
+            });
+        };
+    },
+});
diff --git a/packages/nc-mail-templates/src/templates/assets/YoutubeIcon.ts b/packages/nc-mail-templates/src/templates/assets/YoutubeIcon.ts
new file mode 100644
index 0000000000..7b3b472ce1
--- /dev/null
+++ b/packages/nc-mail-templates/src/templates/assets/YoutubeIcon.ts
@@ -0,0 +1,15 @@
+import {defineComponent, h} from "vue";
+
+export default defineComponent({
+    name: "YoutubeIcon",
+    setup() {
+        return () => {
+            return h("img", {
+                src: "https://app.nocodb.com/youtube.png",
+                alt: "Youtube Icon",
+                width: "24",
+                height: "24",
+            });
+        };
+    },
+});
diff --git a/packages/nc-mail-templates/src/templates/assets/index.ts b/packages/nc-mail-templates/src/templates/assets/index.ts
new file mode 100644
index 0000000000..fd4ad57da2
--- /dev/null
+++ b/packages/nc-mail-templates/src/templates/assets/index.ts
@@ -0,0 +1,15 @@
+import DiscordIcon from "./DiscordIcon.ts";
+import GithubIcon from "./GithubIcon.ts";
+import LinkedIcon from "./LinkedIcon.ts";
+import TwitterIcon from "./TwitterIcon.ts";
+import YoutubeIcon from "./YoutubeIcon.ts";
+
+
+export default {
+    GithubIcon,
+    TwitterIcon,
+    LinkedIcon,
+    DiscordIcon,
+    YoutubeIcon
+
+}
\ No newline at end of file
diff --git a/packages/nc-mail-templates/src/templates/components/Footer.ts b/packages/nc-mail-templates/src/templates/components/Footer.ts
new file mode 100644
index 0000000000..0f3ebaec06
--- /dev/null
+++ b/packages/nc-mail-templates/src/templates/components/Footer.ts
@@ -0,0 +1,212 @@
+import {defineComponent, h} from "vue";
+import Icons from "../assets";
+
+export default defineComponent({
+    name: "Header",
+    setup() {
+        return () => {
+            return h(
+                "div",
+                {
+                    style: {
+                        width: "100%",
+                        "max-width": "426px",
+                        'padding-block': "24px",
+                        'margin-block': "64px",
+                        'text-justify': "distribute",
+                    },
+                },
+                [
+                    h(
+                        "div",
+                        {
+                            style: {
+                                width: "100%",
+                                "max-width": "426px",
+                                'padding-block': "24px",
+                                display: "flex",
+                                'justify-content': "space-between",
+                                'align-items': "center",
+                            },
+                        },
+                        [
+                            h("img", {
+                                src: "https://i.ibb.co/4tbw6Wf/logo.png",
+                                alt: "NocoDB",
+                                style: {
+                                    height: "40px",
+                                },
+                            }),
+                            h(
+                                'div',
+                                {
+                                    style: {
+                                        display: "flex",
+                                        gap: "16px",
+                                    },
+                                },
+                                [
+                                    h(
+                                        "a",
+                                        {
+                                            href: "https://github.com/nocodb",
+                                            style: {
+                                                'text-decoration': "none",
+                                                color: "black",
+                                                'margin-left': "4px",
+                                            },
+                                        },
+                                        h(Icons.GithubIcon)
+                                    ),
+                                    h(
+                                        "a",
+                                        {
+                                            href: "https://x.com/nocodb",
+                                            style: {
+                                                'text-decoration': "none",
+                                                color: "black",
+                                                'margin-left': "4px",
+                                            },
+                                        },
+                                        h(Icons.TwitterIcon)
+                                    ),
+                                    h(
+                                        "a",
+                                        {
+                                            href: "https://www.youtube.com/@nocodb/videos",
+                                            style: {
+                                                'text-decoration': "none",
+                                                color: "black",
+                                                'margin-left': "4px",
+                                            },
+                                        },
+                                        h(Icons.YoutubeIcon)
+                                    ),
+                                    h(
+                                        "a",
+                                        {
+                                            href: "https://discord.gg/c7GEYrvFtT",
+                                            style: {
+                                                'text-decoration': "none",
+                                                color: "black",
+                                                'margin-left': "4px",
+                                            },
+                                        },
+                                        h(Icons.DiscordIcon)
+                                    ),
+                                    h(
+                                        "a",
+                                        {
+                                            href: "https://www.linkedin.com/company/nocodb/",
+                                            style: {
+                                                'text-decoration': "none",
+                                                color: "black",
+                                                'margin-left': "4px",
+                                            },
+                                        },
+                                        h(Icons.LinkedIcon)
+                                    ),
+                                ]
+                            ),
+                        ]
+                    ),
+
+                    h(
+                        "div",
+                        {
+                            style: {
+                                width: "100%",
+
+                                'padding-top': "24px",
+                            },
+                        },
+                        [
+                            h(
+                                "a",
+                                {
+                                    href: "https://blog.nocodb.com/",
+                                    style: {
+                                        'text-decoration': "none",
+                                        color: "#6A7184",
+                                        'font-size': "14px",
+                                    },
+                                },
+                                "Blog"
+                            ),
+                            " | ",
+                            h(
+                                "a",
+                                {
+                                    href: "https://docs.nocodb.com/",
+                                    style: {
+                                        'text-decoration': "none",
+                                        color: "#6A7184",
+                                        'font-size': "14px",
+                                    },
+                                },
+                                "Getting Started"
+                            ),
+                            " | ",
+                            h(
+                                "a",
+                                {
+                                    href: "https://docs.nocodb.com/",
+                                    style: {
+                                        'text-decoration': "none",
+                                        color: "#6A7184",
+                                        'font-size': "14px",
+                                    },
+                                },
+                                "Documentation"
+                            ),
+                            " | ",
+                            h(
+                                "a",
+                                {
+                                    href: "https://nocodb.com/terms-of-service",
+                                    style: {
+                                        'text-decoration': "none",
+                                        color: "#6A7184",
+                                        'font-size': "14px",
+                                    },
+                                },
+                                "Terms of Service"
+                            ),
+                        ]
+                    ),
+
+                    h(
+                        "div",
+                        {
+                            style: {
+                                'padding-top': "24px",
+
+                                width: "100%",
+                                'justify-content': "flex-start",
+                                'align-items': "items-start",
+                                color: "#6A7184",
+                                'text-align': "left",
+                            },
+                        },
+                        "2024 - NocoDB Inc "
+                    ),
+                    h(
+                        "div",
+                        {
+                            style: {
+                                'padding-top': "24px",
+
+                                width: "100%",
+                                'justify-content': "flex-start",
+                                'align-items': "items-start",
+                                color: "#6A7184",
+                                'text-align': "left",
+                            },
+                        },
+                        "All rights reserved "
+                    ),
+                ]
+            );
+        };
+    },
+});
diff --git a/packages/nc-mail-templates/src/templates/components/Header.ts b/packages/nc-mail-templates/src/templates/components/Header.ts
new file mode 100644
index 0000000000..788b9af59a
--- /dev/null
+++ b/packages/nc-mail-templates/src/templates/components/Header.ts
@@ -0,0 +1,30 @@
+import {defineComponent, h} from "vue";
+
+export default defineComponent({
+    name: "Header",
+    setup() {
+        return () => {
+            return h(
+                "div",
+                {
+                    style: {
+                        width: "100%",
+                        'background-color': "#f4f4f5",
+                        'padding-top': "48px",
+                        'padding-bottom': "48px",
+                        'text-align': "center",
+                    },
+                },
+                [
+                    h("img", {
+                        src: "https://i.ibb.co/4tbw6Wf/logo.png",
+                        alt: "NocoDB",
+                        style: {
+                            height: "48px",
+                        },
+                    }),
+                ]
+            );
+        };
+    },
+});
diff --git a/packages/nc-mail-templates/src/templates/components/HtmlWrapper.ts b/packages/nc-mail-templates/src/templates/components/HtmlWrapper.ts
new file mode 100644
index 0000000000..7549649f9b
--- /dev/null
+++ b/packages/nc-mail-templates/src/templates/components/HtmlWrapper.ts
@@ -0,0 +1,56 @@
+import {defineComponent, h} from "vue";
+
+export default defineComponent({
+    name: "HtmlWrapper",
+    setup(_, { slots }) {
+        return () => {
+            return h(
+                "html",
+                {
+                    dir: "ltr",
+                    lang: "en",
+                },
+                [
+                    h("head", {}, [
+                        h("meta", { charset: "utf-8" }),
+                        h("meta", { name: "x-apple-disable-message-reformatting" }),
+                        h("meta", {
+                            content: "text/html; charset=UTF-8",
+                            "http-equiv": "Content-Type",
+                        }),
+                        h("meta", { name: "viewport", content: "width=device-width" }),
+                        h("link", {
+                            href: "https://fonts.googleapis.com/css?family=Manrope",
+                            rel: "stylesheet",
+                            type: "text/css",
+                        }),
+                        h(
+                            "style",
+                            {},
+                            `
+                @font-face {
+                    src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggqxSvfedN62Zw.woff2) format('woff2');
+                    font-family: Maprope, sans-serif;
+                }
+
+                * {
+                    font-family: Manrope, sans-serif;
+                }
+
+                body {
+                    margin: 0;
+                    padding: 0;
+                    box-sizing: border-box;
+                    font-family: Manrope, sans-serif;
+                }
+
+
+                `
+                        ),
+                    ]),
+                    h("body", {}, slots?.default()),
+                ]
+            );
+        };
+    },
+});
diff --git a/packages/nc-mail-templates/src/templates/components/index.ts b/packages/nc-mail-templates/src/templates/components/index.ts
new file mode 100644
index 0000000000..e229f61a84
--- /dev/null
+++ b/packages/nc-mail-templates/src/templates/components/index.ts
@@ -0,0 +1,9 @@
+import Footer from "./Footer.ts"
+import Header from "./Header.ts"
+import HtmlWrapper from "./HtmlWrapper.ts"
+
+export default {
+    Footer,
+    Header,
+    HtmlWrapper
+}
\ No newline at end of file
diff --git a/packages/nc-mail-templates/tsconfig.json b/packages/nc-mail-templates/tsconfig.json
new file mode 100644
index 0000000000..098e8d6622
--- /dev/null
+++ b/packages/nc-mail-templates/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    // Enable latest features
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}
diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index 8a4e1fd8eb..75664a7e17 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -691,6 +691,10 @@ export interface FilterType {
   fk_parent_id?: StringOrNullType;
   /** Foreign Key to View */
   fk_view_id?: StringOrNullType;
+  /** Foreign Key to dynamic value Column */
+  fk_value_col_id?: StringOrNullType;
+  /** Foreign Key to Link Column */
+  fk_link_col_id?: StringOrNullType;
   /** Unique ID */
   id?: IdType;
   /** Is this filter grouped? */
@@ -1637,6 +1641,8 @@ export interface LicenseReqType {
  * Model for LinkToAnotherColumn Request
  */
 export interface LinkToAnotherColumnReqType {
+  /** Foreign Key to child view */
+  childViewId?: IdOrNullType;
   /** Foreign Key to chhild column */
   childId: IdType;
   /** Foreign Key to parent column */
@@ -1661,6 +1667,7 @@ export interface LinkToAnotherRecordType {
   /** Foreign Key to Column */
   fk_column_id?: IdType;
   fk_index_name?: string;
+  fk_relation_view_id?: string;
   fk_mm_child_column_id?: string;
   fk_mm_model_id?: string;
   fk_mm_parent_column_id?: string;
@@ -2458,6 +2465,11 @@ export type StringOrNullOrBooleanOrNumberType =
   | boolean
   | number;
 
+/**
+ * Model for IdOrNull
+ */
+export type IdOrNullType = IdType | null;
+
 /**
  * Model for Table
  */
@@ -2769,27 +2781,22 @@ export interface ProjectInviteEventType {
   type: string;
   body: {
     /** The ID of the base being invited to */
-    id: string;
-    /** The title of the base being invited to */
-    title: string;
-    /** The type of the base being invited to */
-    type: string;
-    /** The email address of the user who invited the recipient */
-    invited_by: string;
-  };
-}
-
-export interface ProjectEventType {
-  /** The ID of the user */
-  fk_user_id: string;
-  type: string;
-  body: {
-    /** The ID of the base */
-    id: string;
-    /** The title of the base */
-    title: string;
-    /** The type of the base */
-    type: string;
+    base: {
+      /** The ID of the base being invited to */
+      id: string;
+      /** The title of the base being invited to */
+      title: string;
+      /** The type of the base being invited to */
+      type: string;
+    };
+    user: {
+      /** The ID of the user who invited to the base */
+      id: string;
+      /** The email address of the user who invited to the base */
+      email: string;
+      /** The display name of the user who invited to the base */
+      display_name?: string;
+    };
   };
 }
 
@@ -2802,75 +2809,6 @@ export interface WelcomeEventType {
   body: object;
 }
 
-export interface SortEventType {
-  /** The ID of the user who created sort */
-  fk_user_id: string;
-  type: string;
-  body: object;
-}
-
-export interface FilterEventType {
-  /** The ID of the user who created filter */
-  fk_user_id: string;
-  type: string;
-  body: object;
-}
-
-export interface TableEventType {
-  /** The ID of the user who triggered the event */
-  fk_user_id: string;
-  /** The type of the event */
-  type: string;
-  body: {
-    /** The title of the table associated with the event */
-    title: string;
-    /** The ID of the base that the table belongs to */
-    base_id: string;
-    /** The ID of the source that the table belongs to */
-    source_id: string;
-    /** The ID of the table associated with the event */
-    id: string;
-  };
-}
-
-export interface ViewEventType {
-  /** The ID of the user who triggered the event */
-  fk_user_id: string;
-  /** The type of the event */
-  type: string;
-  body: {
-    /** The title of the view associated with the event */
-    title: string;
-    /** The ID of the base that the view belongs to */
-    base_id: string;
-    /** The ID of the source that the view belongs to */
-    source_id: string;
-    /** The ID of the view associated with the event */
-    id: string;
-    /** The ID of the model that the view is based on */
-    fk_model_id: string;
-  };
-}
-
-export interface ColumnEventType {
-  /** The ID of the user who triggered the event */
-  fk_user_id: string;
-  /** The type of the event */
-  type: string;
-  body: {
-    /** The title of the column associated with the event */
-    title: string;
-    /** The ID of the base that the column belongs to */
-    base_id: string;
-    /** The ID of the source that the column belongs to */
-    source_id: string;
-    /** The ID of the column associated with the event */
-    id: string;
-    /** The ID of the model that the column belongs to */
-    fk_model_id: string;
-  };
-}
-
 export type NotificationType = {
   /** Unique ID */
   id?: IdType;
@@ -2882,16 +2820,7 @@ export type NotificationType = {
   type?: string;
   updated_at?: any;
   created_at?: any;
-} & (
-  | ProjectInviteEventType
-  | ProjectEventType
-  | TableEventType
-  | ViewEventType
-  | ColumnEventType
-  | WelcomeEventType
-  | SortEventType
-  | FilterEventType
-);
+} & (ProjectInviteEventType | WelcomeEventType);
 
 /**
  * Model for Notification List
@@ -11195,6 +11124,23 @@ export class Api<
       }),
   };
   notification = {
+    /**
+     * @description Poll notifications
+     *
+     * @tags Notification
+     * @name Poll
+     * @summary Notification Poll
+     * @request GET:/api/v1/notifications/poll
+     * @response `200` `object` OK
+     */
+    poll: (params: RequestParams = {}) =>
+      this.request<object, any>({
+        path: `/api/v1/notifications/poll`,
+        method: 'GET',
+        format: 'json',
+        ...params,
+      }),
+
     /**
      * @description List notifications
      *
diff --git a/packages/nocodb/src/controllers/comments.controller.ts b/packages/nocodb/src/controllers/comments.controller.ts
index c980465d05..afd5c8effa 100644
--- a/packages/nocodb/src/controllers/comments.controller.ts
+++ b/packages/nocodb/src/controllers/comments.controller.ts
@@ -21,7 +21,7 @@ import { NcRequest } from '~/interface/config';
 @Controller()
 @UseGuards(MetaApiLimiterGuard, GlobalGuard)
 export class CommentsController {
-  constructor(private readonly commentsService: CommentsService) {}
+  constructor(protected readonly commentsService: CommentsService) {}
 
   @Get(['/api/v1/db/meta/comments', '/api/v2/meta/comments'])
   @Acl('commentList')
@@ -54,6 +54,7 @@ export class CommentsController {
     return await this.commentsService.commentDelete({
       commentId,
       user: req.user,
+      req,
     });
   }
 
diff --git a/packages/nocodb/src/controllers/notifications.controller.ts b/packages/nocodb/src/controllers/notifications.controller.ts
index 73247a217f..751e21ab3c 100644
--- a/packages/nocodb/src/controllers/notifications.controller.ts
+++ b/packages/nocodb/src/controllers/notifications.controller.ts
@@ -8,22 +8,71 @@ import {
   Patch,
   Post,
   Req,
+  Res,
   UseGuards,
 } from '@nestjs/common';
-import { Request } from 'express';
-import { NotificationsService } from '~/services/notifications.service';
+import { customAlphabet } from 'nanoid';
+import type { Response } from 'express';
+import { NotificationsService } from '~/services/notifications/notifications.service';
 import { GlobalGuard } from '~/guards/global/global.guard';
 import { extractProps } from '~/helpers/extractProps';
 import { MetaApiLimiterGuard } from '~/guards/meta-api-limiter.guard';
+import { NcRequest } from '~/interface/config';
+import { NcError } from '~/helpers/catchError';
+import { PubSubRedis } from '~/redis/pubsub-redis';
+
+const nanoidv2 = customAlphabet('1234567890abcdefghijklmnopqrstuvwxyz', 14);
+const POLL_INTERVAL = 30000;
 
 @Controller()
 @UseGuards(MetaApiLimiterGuard, GlobalGuard)
 export class NotificationsController {
   constructor(private readonly notificationsService: NotificationsService) {}
 
+  @Get('/api/v1/notifications/poll')
+  async notificationPoll(
+    @Req() req: NcRequest,
+    @Res()
+    res: Response & {
+      resId: string;
+    },
+  ) {
+    res.setHeader('Cache-Control', 'no-cache, must-revalidate');
+    res.resId = nanoidv2();
+
+    if (!req.user?.id) {
+      NcError.authenticationRequired();
+    }
+
+    this.notificationsService.addConnection(req.user.id, res);
+
+    if (PubSubRedis.available) {
+      await PubSubRedis.subscribe(
+        `notification:${req.user.id}`,
+        async (data) => {
+          this.notificationsService.sendToConnections(req.user.id, data);
+        },
+      );
+    }
+
+    res.on('close', async () => {
+      this.notificationsService.removeConnection(req.user.id, res);
+      if (PubSubRedis.available) {
+        await PubSubRedis.unsubscribe(`notification:${req.user.id}`);
+      }
+    });
+
+    setTimeout(() => {
+      if (!res.headersSent) {
+        res.send({
+          status: 'refresh',
+        });
+      }
+    }, POLL_INTERVAL);
+  }
+
   @Get('/api/v1/notifications')
-  // @Acl('notificationList')
-  async notificationList(@Req() req: Request) {
+  async notificationList(@Req() req: NcRequest) {
     return this.notificationsService.notificationList({
       user: req.user,
       is_deleted: false,
@@ -33,11 +82,10 @@ export class NotificationsController {
   }
 
   @Patch('/api/v1/notifications/:notificationId')
-  // @Acl('notificationUpdate')
   async notificationUpdate(
     @Param('notificationId') notificationId,
     @Body() body,
-    @Req() req: Request,
+    @Req() req: NcRequest,
   ) {
     return this.notificationsService.notificationUpdate({
       notificationId,
@@ -46,25 +94,21 @@ export class NotificationsController {
     });
   }
 
-  @Post('/api/v1/notifications/mark-all-read')
-  @HttpCode(200)
-  async markAllRead(@Req() req: Request) {
-    return this.notificationsService.markAllRead({
-      user: req.user,
-    });
-  }
-
   @Delete('/api/v1/notifications/:notificationId')
-  // @Acl('notificationDelete')
   async notificationDelete(
     @Param('notificationId') notificationId,
-    @Req() req: Request,
+    @Req() req: NcRequest,
   ) {
-    return this.notificationsService.notificationUpdate({
+    return this.notificationsService.notificationDelete({
       notificationId,
-      body: {
-        is_deleted: true,
-      },
+      user: req.user,
+    });
+  }
+
+  @Post('/api/v1/notifications/mark-all-read')
+  @HttpCode(200)
+  async markAllRead(@Req() req: NcRequest) {
+    return this.notificationsService.markAllRead({
       user: req.user,
     });
   }
diff --git a/packages/nocodb/src/gateways/notifications/notifications.gateway.spec.ts b/packages/nocodb/src/gateways/notifications/notifications.gateway.spec.ts
deleted file mode 100644
index 795d668cb6..0000000000
--- a/packages/nocodb/src/gateways/notifications/notifications.gateway.spec.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Test } from '@nestjs/testing';
-import { NotificationsGateway } from './notifications.gateway';
-import type { TestingModule } from '@nestjs/testing';
-
-describe('NotificationsGateway', () => {
-  let gateway: NotificationsGateway;
-
-  beforeEach(async () => {
-    const module: TestingModule = await Test.createTestingModule({
-      providers: [NotificationsGateway],
-    }).compile();
-
-    gateway = module.get<NotificationsGateway>(NotificationsGateway);
-  });
-
-  it('should be defined', () => {
-    expect(gateway).toBeDefined();
-  });
-});
diff --git a/packages/nocodb/src/gateways/notifications/notifications.gateway.ts b/packages/nocodb/src/gateways/notifications/notifications.gateway.ts
deleted file mode 100644
index c7cd5c9282..0000000000
--- a/packages/nocodb/src/gateways/notifications/notifications.gateway.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { WebSocketGateway, WebSocketServer } from '@nestjs/websockets';
-import { Server } from 'socket.io';
-import { ExecutionContextHost } from '@nestjs/core/helpers/execution-context-host';
-import { AuthGuard } from '@nestjs/passport';
-import type { Socket } from 'socket.io';
-import type { OnModuleInit } from '@nestjs/common';
-import type { NotificationType } from 'nocodb-sdk';
-import { AppHooksService } from '~/services/app-hooks/app-hooks.service';
-
-@WebSocketGateway({
-  cors: {
-    origin: '*',
-    allowedHeaders: ['xc-auth'],
-    credentials: true,
-  },
-  namespace: 'notifications',
-})
-export class NotificationsGateway implements OnModuleInit {
-  @WebSocketServer()
-  server: Server;
-
-  private clients: { [id: string]: Socket } = {};
-
-  constructor(private readonly appHooks: AppHooksService) {}
-
-  async onModuleInit() {
-    this.server
-      .use(async (socket, next) => {
-        try {
-          const context = new ExecutionContextHost([socket.handshake as any]);
-          const guard = new (AuthGuard('jwt'))(context);
-          await guard.canActivate(context);
-        } catch {}
-
-        next();
-      })
-      .on('connection', (socket) => {
-        if ((socket?.handshake as any)?.user?.id)
-          this.clients[(socket?.handshake as any)?.user?.id] = socket;
-      });
-
-    // todo:  fix
-    this.appHooks.on(
-      'notification' as any,
-      this.notificationHandler.bind(this),
-    );
-  }
-
-  // todo: verify if this is the right way to do it, since we are binding this context to the handler
-  onModuleDestroy() {
-    this.appHooks.removeListener('notification', this.notificationHandler);
-  }
-
-  private notificationHandler(notification: NotificationType) {
-    if (notification?.fk_user_id && this.clients[notification.fk_user_id]) {
-      this.clients[notification.fk_user_id]?.emit('notification', notification);
-    }
-  }
-}
diff --git a/packages/nocodb/src/interface/config.ts b/packages/nocodb/src/interface/config.ts
index 9b23035d93..ea1b5b443f 100644
--- a/packages/nocodb/src/interface/config.ts
+++ b/packages/nocodb/src/interface/config.ts
@@ -331,4 +331,5 @@ export interface NcRequest {
   ncBaseId?: string;
   headers?: Record<string, string | undefined> | IncomingHttpHeaders;
   clientIp?: string;
+  query?: Record<string, any>;
 }
diff --git a/packages/nocodb/src/meta/migrations/XcMigrationSourcev2.ts b/packages/nocodb/src/meta/migrations/XcMigrationSourcev2.ts
index 9aee4d467b..75f1accbdd 100644
--- a/packages/nocodb/src/meta/migrations/XcMigrationSourcev2.ts
+++ b/packages/nocodb/src/meta/migrations/XcMigrationSourcev2.ts
@@ -35,6 +35,7 @@ import * as nc_045_extensions from '~/meta/migrations/v2/nc_045_extensions';
 import * as nc_046_comment_mentions from '~/meta/migrations/v2/nc_046_comment_mentions';
 import * as nc_047_comment_migration from '~/meta/migrations/v2/nc_047_comment_migration';
 import * as nc_048_view_links from '~/meta/migrations/v2/nc_048_view_links';
+import * as nc_049_clear_notifications from '~/meta/migrations/v2/nc_049_clear_notifications';
 
 // Create a custom migration source class
 export default class XcMigrationSourcev2 {
@@ -81,6 +82,7 @@ export default class XcMigrationSourcev2 {
       'nc_046_comment_mentions',
       'nc_047_comment_migration',
       'nc_048_view_links',
+      'nc_049_clear_notifications',
     ]);
   }
 
@@ -164,6 +166,8 @@ export default class XcMigrationSourcev2 {
         return nc_047_comment_migration;
       case 'nc_048_view_links':
         return nc_048_view_links;
+      case 'nc_049_clear_notifications':
+        return nc_049_clear_notifications;
     }
   }
 }
diff --git a/packages/nocodb/src/meta/migrations/v2/nc_049_clear_notifications.ts b/packages/nocodb/src/meta/migrations/v2/nc_049_clear_notifications.ts
new file mode 100644
index 0000000000..555531ba4a
--- /dev/null
+++ b/packages/nocodb/src/meta/migrations/v2/nc_049_clear_notifications.ts
@@ -0,0 +1,14 @@
+import type { Knex } from 'knex';
+import { MetaTable } from '~/utils/globals';
+
+const up = async (knex: Knex) => {
+  await knex(MetaTable.NOTIFICATION).update({
+    is_deleted: true,
+  });
+};
+
+const down = async (_knex: Knex) => {
+  // no-op
+};
+
+export { up, down };
diff --git a/packages/nocodb/src/models/Comment.ts b/packages/nocodb/src/models/Comment.ts
index 784a689399..a0d22b2b15 100644
--- a/packages/nocodb/src/models/Comment.ts
+++ b/packages/nocodb/src/models/Comment.ts
@@ -95,7 +95,11 @@ export default class Comment implements CommentType {
     comment: Partial<Comment>,
     ncMeta = Noco.ncMeta,
   ) {
-    const updateObj = extractProps(comment, ['comment', 'resolved_by']);
+    const updateObj = extractProps(comment, [
+      'comment',
+      'resolved_by',
+      'resolved_by_email',
+    ]);
 
     await ncMeta.metaUpdate(
       null,
diff --git a/packages/nocodb/src/models/Notification.ts b/packages/nocodb/src/models/Notification.ts
index 636f96ba62..d087b33d1c 100644
--- a/packages/nocodb/src/models/Notification.ts
+++ b/packages/nocodb/src/models/Notification.ts
@@ -2,7 +2,7 @@ import type { AppEvents } from 'nocodb-sdk';
 import { extractProps } from '~/helpers/extractProps';
 import Noco from '~/Noco';
 import { MetaTable } from '~/utils/globals';
-import { parseMetaProp, stringifyMetaProp } from '~/utils/modelUtils';
+import { prepareForDb, prepareForResponse } from '~/utils/modelUtils';
 
 export default class Notification {
   id?: string;
@@ -30,16 +30,26 @@ export default class Notification {
       'is_deleted',
     ]);
 
-    insertData.body = stringifyMetaProp(insertData, 'body');
-
     return await ncMeta.metaInsert2(
       null,
       null,
       MetaTable.NOTIFICATION,
-      insertData,
+      prepareForDb(insertData, 'body'),
     );
   }
 
+  public static async get(
+    params: {
+      fk_user_id: string;
+      id: string;
+    },
+    ncMeta = Noco.ncMeta,
+  ) {
+    const condition = extractProps(params, ['id', 'fk_user_id']);
+
+    return await ncMeta.metaGet2(null, null, MetaTable.NOTIFICATION, condition);
+  }
+
   public static async list(
     params: {
       fk_user_id: string;
@@ -73,9 +83,8 @@ export default class Notification {
     );
 
     for (const notification of notifications) {
-      notification.body = parseMetaProp(notification, 'body');
+      prepareForResponse(notification, 'body');
     }
-
     return notifications;
   }
 
@@ -112,15 +121,11 @@ export default class Notification {
       'is_deleted',
     ]);
 
-    if ('body' in updateData) {
-      updateData.body = stringifyMetaProp(updateData, 'body');
-    }
-
     return await ncMeta.metaUpdate(
       null,
       null,
       MetaTable.NOTIFICATION,
-      updateData,
+      prepareForDb(updateData, 'body'),
       id,
     );
   }
diff --git a/packages/nocodb/src/modules/jobs/redis/jobs-redis.ts b/packages/nocodb/src/modules/jobs/redis/jobs-redis.ts
index b9801f3d89..c8128eeeb0 100644
--- a/packages/nocodb/src/modules/jobs/redis/jobs-redis.ts
+++ b/packages/nocodb/src/modules/jobs/redis/jobs-redis.ts
@@ -1,46 +1,25 @@
 import { Logger } from '@nestjs/common';
-import Redis from 'ioredis';
 import type { InstanceCommands } from '~/interface/Jobs';
+import { PubSubRedis } from '~/redis/pubsub-redis';
 import { InstanceTypes } from '~/interface/Jobs';
 
-export class JobsRedis {
-  private static initialized = false;
-
-  public static available = process.env.NC_REDIS_JOB_URL ? true : false;
-
+export class JobsRedis extends PubSubRedis {
   protected static logger = new Logger(JobsRedis.name);
 
-  private static redisClient: Redis;
-  private static redisSubscriber: Redis;
-  private static unsubscribeCallbacks: { [key: string]: () => Promise<void> } =
-    {};
-
   public static primaryCallbacks: {
     [key: string]: (...args) => Promise<void>;
   } = {};
   public static workerCallbacks: { [key: string]: (...args) => Promise<void> } =
     {};
 
-  static async init() {
-    if (this.initialized) {
-      return;
-    }
-
-    if (!JobsRedis.available) {
-      return;
-    }
-
-    this.initialized = true;
-
-    this.redisClient = new Redis(process.env.NC_REDIS_JOB_URL);
-    this.redisSubscriber = new Redis(process.env.NC_REDIS_JOB_URL);
+  static async initJobs() {
+    if (!this.initialized) {
+      if (!this.available) {
+        return;
+      }
 
-    if (process.env.NC_WORKER_CONTAINER === 'true') {
-      await this.redisSubscriber.subscribe(InstanceTypes.WORKER);
-    } else {
-      await this.redisSubscriber.subscribe(InstanceTypes.PRIMARY);
+      await this.init();
     }
-
     const onMessage = async (channel, message) => {
       const args = message.split(':');
       const command = args.shift();
@@ -52,80 +31,25 @@ export class JobsRedis {
           (await this.primaryCallbacks[command](...args));
       }
     };
-
-    this.redisSubscriber.on('message', onMessage);
-  }
-
-  static async publish(channel: string, message: string | any) {
-    if (!this.initialized) {
-      if (!JobsRedis.available) {
-        return;
-      }
-
-      await this.init();
-    }
-
-    if (typeof message === 'string') {
-      await this.redisClient.publish(channel, message);
+    if (process.env.NC_WORKER_CONTAINER === 'true') {
+      await this.subscribe(InstanceTypes.WORKER, async (message) => {
+        await onMessage(InstanceTypes.WORKER, message);
+      });
     } else {
-      try {
-        await this.redisClient.publish(channel, JSON.stringify(message));
-      } catch (e) {
-        this.logger.error(e);
-      }
-    }
-  }
-
-  static async subscribe(
-    channel: string,
-    callback: (message: any) => Promise<void>,
-  ) {
-    if (!this.initialized) {
-      if (!JobsRedis.available) {
-        return;
-      }
-
-      await this.init();
-    }
-
-    await this.redisSubscriber.subscribe(channel);
-
-    const onMessage = async (_channel, message) => {
-      try {
-        message = JSON.parse(message);
-      } catch (e) {}
-      await callback(message);
-    };
-
-    this.redisSubscriber.on('message', onMessage);
-    this.unsubscribeCallbacks[channel] = async () => {
-      await this.redisSubscriber.unsubscribe(channel);
-      this.redisSubscriber.off('message', onMessage);
-    };
-  }
-
-  static async unsubscribe(channel: string) {
-    if (!this.initialized) {
-      if (!JobsRedis.available) {
-        return;
-      }
-
-      await this.init();
-    }
-
-    if (this.unsubscribeCallbacks[channel]) {
-      await this.unsubscribeCallbacks[channel]();
-      delete this.unsubscribeCallbacks[channel];
+      await this.subscribe(InstanceTypes.PRIMARY, async (message) => {
+        await onMessage(InstanceTypes.PRIMARY, message);
+      });
     }
   }
 
   static async workerCount(): Promise<number> {
     if (!this.initialized) {
-      if (!JobsRedis.available) {
+      if (!this.available) {
         return;
       }
 
       await this.init();
+      await this.initJobs();
     }
 
     return new Promise((resolve) => {
@@ -146,11 +70,11 @@ export class JobsRedis {
 
   static async emitWorkerCommand(command: InstanceCommands, ...args: any[]) {
     const data = `${command}${args.length ? `:${args.join(':')}` : ''}`;
-    await JobsRedis.publish(InstanceTypes.WORKER, data);
+    await this.publish(InstanceTypes.WORKER, data);
   }
 
   static async emitPrimaryCommand(command: InstanceCommands, ...args: any[]) {
     const data = `${command}${args.length ? `:${args.join(':')}` : ''}`;
-    await JobsRedis.publish(InstanceTypes.PRIMARY, data);
+    await this.publish(InstanceTypes.PRIMARY, data);
   }
 }
diff --git a/packages/nocodb/src/modules/noco.module.ts b/packages/nocodb/src/modules/noco.module.ts
index b88e936809..4cc916c988 100644
--- a/packages/nocodb/src/modules/noco.module.ts
+++ b/packages/nocodb/src/modules/noco.module.ts
@@ -94,9 +94,8 @@ import { ViewsService } from '~/services/views.service';
 import { ApiDocsService } from '~/services/api-docs/api-docs.service';
 import { BaseUsersController } from '~/controllers/base-users.controller';
 import { BaseUsersService } from '~/services/base-users/base-users.service';
-import { NotificationsService } from '~/services/notifications.service';
+import { NotificationsService } from '~/services/notifications/notifications.service';
 import { NotificationsController } from '~/controllers/notifications.controller';
-import { NotificationsGateway } from '~/gateways/notifications/notifications.gateway';
 import { CommandPaletteService } from '~/services/command-palette.service';
 import { CommandPaletteController } from '~/controllers/command-palette.controller';
 import { ExtensionsService } from '~/services/extensions.service';
@@ -245,7 +244,6 @@ export const nocoModuleMetadata = {
     SortsService,
     SharedBasesService,
     NotificationsService,
-    NotificationsGateway,
     CommandPaletteService,
     ExtensionsService,
 
diff --git a/packages/nocodb/src/redis/pubsub-redis.ts b/packages/nocodb/src/redis/pubsub-redis.ts
new file mode 100644
index 0000000000..1b06f55459
--- /dev/null
+++ b/packages/nocodb/src/redis/pubsub-redis.ts
@@ -0,0 +1,94 @@
+import { Logger } from '@nestjs/common';
+import Redis from 'ioredis';
+
+export class PubSubRedis {
+  static initialized = false;
+
+  static available = process.env.NC_REDIS_JOB_URL ? true : false;
+
+  protected static logger = new Logger(PubSubRedis.name);
+
+  static redisClient: Redis;
+  private static redisSubscriber: Redis;
+  private static unsubscribeCallbacks: { [key: string]: () => Promise<void> } =
+    {};
+  private static callbacks: Record<string, (...args) => Promise<void>> = {};
+
+  public static async init() {
+    if (!PubSubRedis.available) {
+      return;
+    }
+
+    PubSubRedis.redisClient = new Redis(process.env.NC_REDIS_JOB_URL);
+    PubSubRedis.redisSubscriber = new Redis(process.env.NC_REDIS_JOB_URL);
+
+    PubSubRedis.redisSubscriber.on('message', async (channel, message) => {
+      const [command, ...args] = message.split(':');
+      const callback = PubSubRedis.callbacks[command];
+      if (callback) await callback(...args);
+    });
+
+    PubSubRedis.initialized = true;
+  }
+
+  static async publish(channel: string, message: string | Record<string, any>) {
+    if (!PubSubRedis.initialized) {
+      if (!PubSubRedis.available) {
+        return;
+      }
+
+      await PubSubRedis.init();
+    }
+    try {
+      if (typeof message === 'string') {
+        await PubSubRedis.redisClient.publish(channel, message);
+      } else {
+        await PubSubRedis.redisClient.publish(channel, JSON.stringify(message));
+      }
+    } catch (e) {
+      PubSubRedis.logger.error(e);
+    }
+  }
+
+  static async unsubscribe(channel: string) {
+    if (!PubSubRedis.initialized) {
+      if (!PubSubRedis.available) {
+        return;
+      }
+
+      await PubSubRedis.init();
+    }
+
+    if (PubSubRedis.unsubscribeCallbacks[channel]) {
+      await PubSubRedis.unsubscribeCallbacks[channel]();
+      delete PubSubRedis.unsubscribeCallbacks[channel];
+    }
+  }
+
+  static async subscribe(
+    channel: string,
+    callback: (message: any) => Promise<void>,
+  ) {
+    if (!PubSubRedis.initialized) {
+      if (!PubSubRedis.available) {
+        return;
+      }
+      await PubSubRedis.init();
+    }
+
+    await PubSubRedis.redisSubscriber.subscribe(channel);
+
+    const onMessage = async (_channel, message) => {
+      try {
+        message = JSON.parse(message);
+      } catch (e) {}
+      await callback(message);
+    };
+
+    PubSubRedis.redisSubscriber.on('message', onMessage);
+    PubSubRedis.unsubscribeCallbacks[channel] = async () => {
+      await PubSubRedis.redisSubscriber.unsubscribe(channel);
+      PubSubRedis.redisSubscriber.off('message', onMessage);
+    };
+  }
+}
diff --git a/packages/nocodb/src/schema/swagger.json b/packages/nocodb/src/schema/swagger.json
index 767ba04bc4..6da4113e60 100644
--- a/packages/nocodb/src/schema/swagger.json
+++ b/packages/nocodb/src/schema/swagger.json
@@ -16142,6 +16142,28 @@
         ]
       }
     },
+    "/api/v1/notifications/poll": {
+      "get": {
+        "summary": "Notification Poll",
+        "operationId": "notification-poll",
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object"
+                }
+              }
+            }
+          }
+        },
+        "tags": [
+          "Notification"
+        ],
+        "description": "Poll notifications"
+      }
+    },
     "/api/v1/notifications": {
       "get": {
         "summary": "Notification list",
@@ -25232,67 +25254,54 @@
           "body": {
             "type": "object",
             "properties": {
-              "id": {
-                "type": "string",
+              "base": {
+                "type": "object",
+                "properties": {
+                  "id": {
+                    "type": "string",
+                    "description": "The ID of the base being invited to"
+                  },
+                  "title": {
+                    "type": "string",
+                    "description": "The title of the base being invited to"
+                  },
+                  "type": {
+                    "type": "string",
+                    "description": "The type of the base being invited to"
+                  }
+                },
+                "required": [
+                  "id",
+                  "title",
+                  "type"
+                ],
                 "description": "The ID of the base being invited to"
               },
-              "title": {
-                "type": "string",
-                "description": "The title of the base being invited to"
-              },
-              "type": {
-                "type": "string",
-                "description": "The type of the base being invited to"
-              },
-              "invited_by": {
-                "type": "string",
-                "description": "The email address of the user who invited the recipient"
-              }
-            },
-            "required": [
-              "id",
-              "title",
-              "type",
-              "invited_by"
-            ]
-          }
-        },
-        "required": [
-          "fk_user_id",
-          "type",
-          "body"
-        ]
-      },
-      "ProjectEvent": {
-        "type": "object",
-        "properties": {
-          "fk_user_id": {
-            "type": "string",
-            "description": "The ID of the user"
-          },
-          "type": {
-            "type": "string"
-          },
-          "body": {
-            "type": "object",
-            "properties": {
-              "id": {
-                "type": "string",
-                "description": "The ID of the base"
-              },
-              "title": {
-                "type": "string",
-                "description": "The title of the base"
-              },
-              "type": {
-                "type": "string",
-                "description": "The type of the base"
+              "user": {
+                "type": "object",
+                "properties": {
+                  "id": {
+                    "type": "string",
+                    "description": "The ID of the user who invited to the base"
+                  },
+                  "email": {
+                    "type": "string",
+                    "description": "The email address of the user who invited to the base"
+                  },
+                  "display_name": {
+                    "type": "string",
+                    "description": "The display name of the user who invited to the base"
+                  }
+                },
+                "required": [
+                  "id",
+                  "email"
+                ]
               }
             },
             "required": [
-              "id",
-              "title",
-              "type"
+              "base",
+              "user"
             ]
           }
         },
@@ -25324,191 +25333,6 @@
           "body"
         ]
       },
-      "SortEvent": {
-        "type": "object",
-        "properties": {
-          "fk_user_id": {
-            "type": "string",
-            "description": "The ID of the user who created sort"
-          },
-          "type": {
-            "type": "string"
-          },
-          "body": {
-            "type": "object"
-          }
-        },
-        "required": [
-          "fk_user_id",
-          "type",
-          "body"
-        ]
-      },
-      "FilterEvent": {
-        "type": "object",
-        "properties": {
-          "fk_user_id": {
-            "type": "string",
-            "description": "The ID of the user who created filter"
-          },
-          "type": {
-            "type": "string"
-          },
-          "body": {
-            "type": "object"
-          }
-        },
-        "required": [
-          "fk_user_id",
-          "type",
-          "body"
-        ]
-      },
-      "TableEvent": {
-        "type": "object",
-        "properties": {
-          "fk_user_id": {
-            "type": "string",
-            "description": "The ID of the user who triggered the event"
-          },
-          "type": {
-            "type": "string",
-            "description": "The type of the event"
-          },
-          "body": {
-            "type": "object",
-            "properties": {
-              "title": {
-                "type": "string",
-                "description": "The title of the table associated with the event"
-              },
-              "base_id": {
-                "type": "string",
-                "description": "The ID of the base that the table belongs to"
-              },
-              "source_id": {
-                "type": "string",
-                "description": "The ID of the source that the table belongs to"
-              },
-              "id": {
-                "type": "string",
-                "description": "The ID of the table associated with the event"
-              }
-            },
-            "required": [
-              "title",
-              "base_id",
-              "source_id",
-              "id"
-            ]
-          }
-        },
-        "required": [
-          "fk_user_id",
-          "type",
-          "body"
-        ]
-      },
-      "ViewEvent": {
-        "type": "object",
-        "properties": {
-          "fk_user_id": {
-            "type": "string",
-            "description": "The ID of the user who triggered the event"
-          },
-          "type": {
-            "type": "string",
-            "description": "The type of the event"
-          },
-          "body": {
-            "type": "object",
-            "properties": {
-              "title": {
-                "type": "string",
-                "description": "The title of the view associated with the event"
-              },
-              "base_id": {
-                "type": "string",
-                "description": "The ID of the base that the view belongs to"
-              },
-              "source_id": {
-                "type": "string",
-                "description": "The ID of the source that the view belongs to"
-              },
-              "id": {
-                "type": "string",
-                "description": "The ID of the view associated with the event"
-              },
-              "fk_model_id": {
-                "type": "string",
-                "description": "The ID of the model that the view is based on"
-              }
-            },
-            "required": [
-              "title",
-              "base_id",
-              "source_id",
-              "id",
-              "fk_model_id"
-            ]
-          }
-        },
-        "required": [
-          "fk_user_id",
-          "type",
-          "body"
-        ]
-      },
-      "ColumnEvent": {
-        "type": "object",
-        "properties": {
-          "fk_user_id": {
-            "type": "string",
-            "description": "The ID of the user who triggered the event"
-          },
-          "type": {
-            "type": "string",
-            "description": "The type of the event"
-          },
-          "body": {
-            "type": "object",
-            "properties": {
-              "title": {
-                "type": "string",
-                "description": "The title of the column associated with the event"
-              },
-              "base_id": {
-                "type": "string",
-                "description": "The ID of the base that the column belongs to"
-              },
-              "source_id": {
-                "type": "string",
-                "description": "The ID of the source that the column belongs to"
-              },
-              "id": {
-                "type": "string",
-                "description": "The ID of the column associated with the event"
-              },
-              "fk_model_id": {
-                "type": "string",
-                "description": "The ID of the model that the column belongs to"
-              }
-            },
-            "required": [
-              "title",
-              "base_id",
-              "source_id",
-              "id",
-              "fk_model_id"
-            ]
-          }
-        },
-        "required": [
-          "fk_user_id",
-          "type",
-          "body"
-        ]
-      },
       "Notification": {
         "allOf": [
           {
@@ -25541,26 +25365,8 @@
               {
                 "$ref": "#/components/schemas/ProjectInviteEvent"
               },
-              {
-                "$ref": "#/components/schemas/ProjectEvent"
-              },
-              {
-                "$ref": "#/components/schemas/TableEvent"
-              },
-              {
-                "$ref": "#/components/schemas/ViewEvent"
-              },
-              {
-                "$ref": "#/components/schemas/ColumnEvent"
-              },
               {
                 "$ref": "#/components/schemas/WelcomeEvent"
-              },
-              {
-                "$ref": "#/components/schemas/SortEvent"
-              },
-              {
-                "$ref": "#/components/schemas/FilterEvent"
               }
             ]
           }
diff --git a/packages/nocodb/src/services/app-hooks/interfaces.ts b/packages/nocodb/src/services/app-hooks/interfaces.ts
index 1db9df970e..624adbcbdf 100644
--- a/packages/nocodb/src/services/app-hooks/interfaces.ts
+++ b/packages/nocodb/src/services/app-hooks/interfaces.ts
@@ -3,6 +3,7 @@ import type {
   ApiTokenReqType,
   BaseType,
   ColumnType,
+  CommentType,
   FilterType,
   HookType,
   PluginTestReqType,
@@ -33,7 +34,7 @@ export interface RowCommentEvent extends NcBaseEvent {
   user: UserType;
   model: TableType;
   rowId: string;
-  comment: string;
+  comment: CommentType;
   ip?: string;
 }
 
diff --git a/packages/nocodb/src/services/comments.service.ts b/packages/nocodb/src/services/comments.service.ts
index 4f4843afd6..8626ff6d1f 100644
--- a/packages/nocodb/src/services/comments.service.ts
+++ b/packages/nocodb/src/services/comments.service.ts
@@ -35,7 +35,7 @@ export class CommentsService {
       base: await Base.getByTitleOrId(model.base_id),
       model: model,
       user: param.user,
-      comment: param.body.comment,
+      comment: res,
       rowId: param.body.row_id,
       req: param.req,
     });
@@ -43,7 +43,11 @@ export class CommentsService {
     return res;
   }
 
-  async commentDelete(param: { commentId: string; user: UserType }) {
+  async commentDelete(param: {
+    commentId: string;
+    user: UserType;
+    req: NcRequest;
+  }) {
     const comment = await Comment.get(param.commentId);
 
     if (comment.created_by !== param.user.id || comment.is_deleted) {
@@ -58,9 +62,9 @@ export class CommentsService {
       base: await Base.getByTitleOrId(model.base_id),
       model: model,
       user: param.user,
-      comment: comment.comment,
+      comment: comment,
       rowId: comment.row_id,
-      req: {},
+      req: param.req,
     });
     return res;
   }
@@ -108,7 +112,10 @@ export class CommentsService {
       base: await Base.getByTitleOrId(model.base_id),
       model: model,
       user: param.user,
-      comment: param.body.comment,
+      comment: {
+        ...comment,
+        comment: param.body.comment,
+      },
       rowId: comment.row_id,
       req: param.req,
     });
diff --git a/packages/nocodb/src/services/notifications.service.ts b/packages/nocodb/src/services/notifications.service.ts
deleted file mode 100644
index 864d7481df..0000000000
--- a/packages/nocodb/src/services/notifications.service.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import { Injectable } from '@nestjs/common';
-import { AppEvents } from 'nocodb-sdk';
-import type {
-  ProjectInviteEvent,
-  WelcomeEvent,
-} from '~/services/app-hooks/interfaces';
-import type { OnModuleDestroy, OnModuleInit } from '@nestjs/common';
-import type { UserType } from 'nocodb-sdk';
-import type { NcRequest } from '~/interface/config';
-import { AppHooksService } from '~/services/app-hooks/app-hooks.service';
-import { NcError } from '~/helpers/catchError';
-import { PagedResponseImpl } from '~/helpers/PagedResponse';
-import { Notification } from '~/models';
-
-@Injectable()
-export class NotificationsService implements OnModuleInit, OnModuleDestroy {
-  constructor(protected readonly appHooks: AppHooksService) {}
-
-  protected async insertNotification(
-    insertData: Partial<Notification>,
-    req: NcRequest,
-  ) {
-    this.appHooks.emit('notification' as any, { ...insertData, req } as any);
-
-    await Notification.insert(insertData);
-  }
-
-  protected async hookHandler({
-    event,
-    data,
-  }: {
-    event: AppEvents;
-    data: any;
-  }) {
-    const { req } = data;
-    switch (event) {
-      case AppEvents.PROJECT_INVITE:
-        {
-          const { base, user, invitedBy } = data as ProjectInviteEvent;
-
-          await this.insertNotification(
-            {
-              fk_user_id: user.id,
-              type: AppEvents.PROJECT_INVITE,
-              body: {
-                id: base.id,
-                title: base.title,
-                type: base.type,
-                invited_by: invitedBy.email,
-              },
-            },
-            req,
-          );
-        }
-        break;
-      case AppEvents.WELCOME:
-        {
-          const { user, req } = data as WelcomeEvent;
-
-          await this.insertNotification(
-            {
-              fk_user_id: user.id,
-              type: AppEvents.WELCOME,
-              body: {},
-            },
-            req,
-          );
-        }
-        break;
-    }
-  }
-
-  // todo: verify if this is the right way to do it, since we are binding this context to the handler
-  onModuleDestroy() {
-    this.appHooks.removeAllListener(this.hookHandler);
-  }
-
-  onModuleInit() {
-    this.appHooks.onAll(this.hookHandler.bind(this));
-  }
-
-  async notificationList(param: {
-    user: UserType;
-    limit?: number;
-    offset?: number;
-    is_read?: boolean;
-    is_deleted?: boolean;
-  }) {
-    try {
-      // Define the pagination parameters
-      const { limit = 10, offset = 0 } = param; // Number of rows to skip before returning results
-
-      const list = await Notification.list({
-        fk_user_id: param.user.id,
-        limit,
-        offset,
-        is_deleted: false,
-      });
-
-      const count = await Notification.count({
-        fk_user_id: param.user.id,
-        is_deleted: false,
-      });
-
-      const unreadCount = await Notification.count({
-        fk_user_id: param.user.id,
-        is_deleted: false,
-        is_read: false,
-      });
-
-      return new PagedResponseImpl(
-        list,
-        {
-          limit: param.limit,
-          offset: param.offset,
-          count,
-        },
-        { unreadCount },
-      );
-    } catch (e) {
-      console.log(e);
-      throw e;
-    }
-  }
-
-  async notificationUpdate(param: { notificationId: string; body; user: any }) {
-    await Notification.update(param.notificationId, param.body);
-
-    return true;
-  }
-
-  async markAllRead(param: { user: any }) {
-    if (!param.user?.id) {
-      NcError.badRequest('User id is required');
-    }
-
-    await Notification.markAllAsRead(param.user.id);
-
-    return true;
-  }
-}
diff --git a/packages/nocodb/src/services/notifications.service.spec.ts b/packages/nocodb/src/services/notifications/notifications.service.spec.ts
similarity index 100%
rename from packages/nocodb/src/services/notifications.service.spec.ts
rename to packages/nocodb/src/services/notifications/notifications.service.spec.ts
diff --git a/packages/nocodb/src/services/notifications/notifications.service.ts b/packages/nocodb/src/services/notifications/notifications.service.ts
new file mode 100644
index 0000000000..f800fb31e5
--- /dev/null
+++ b/packages/nocodb/src/services/notifications/notifications.service.ts
@@ -0,0 +1,237 @@
+import { Injectable, Logger } from '@nestjs/common';
+import { AppEvents } from 'nocodb-sdk';
+import type {
+  ProjectInviteEvent,
+  WelcomeEvent,
+} from '~/services/app-hooks/interfaces';
+import type { OnModuleDestroy, OnModuleInit } from '@nestjs/common';
+import type { UserType } from 'nocodb-sdk';
+import type { NcRequest } from '~/interface/config';
+import type { Response } from 'express';
+import { AppHooksService } from '~/services/app-hooks/app-hooks.service';
+import { NcError } from '~/helpers/catchError';
+import { PagedResponseImpl } from '~/helpers/PagedResponse';
+import { Notification } from '~/models';
+
+import { getCircularReplacer } from '~/utils';
+import { PubSubRedis } from '~/redis/pubsub-redis';
+@Injectable()
+export class NotificationsService implements OnModuleInit, OnModuleDestroy {
+  private logger: Logger = new Logger(NotificationsService.name);
+
+  constructor(protected readonly appHooks: AppHooksService) {}
+
+  connections = new Map<
+    string,
+    (Response & {
+      resId: string;
+    })[]
+  >();
+
+  addConnection = (userId: string, res: Response & { resId: string }) => {
+    if (!this.connections.has(userId)) {
+      this.connections.set(userId, [] as (Response & { resId: string })[]);
+    }
+
+    this.connections.get(userId).push(res);
+  };
+
+  removeConnection = (userId: string, res: Response & { resId: string }) => {
+    if (!this.connections.has(userId)) {
+      return;
+    }
+
+    const userConnections = this.connections.get(userId);
+
+    const idx = userConnections.findIndex((c) => c.resId === res.resId);
+
+    if (idx > -1) {
+      userConnections.splice(idx, 1);
+    }
+
+    if (userConnections.length === 0) {
+      this.connections.delete(userId);
+    } else {
+      this.connections.set(userId, userConnections);
+    }
+  };
+
+  sendToConnections(key: string, payload: string): void {
+    const connections = this.connections.get(String(key));
+
+    for (const res of connections ?? []) {
+      res.send({
+        status: 'success',
+        data: payload,
+      });
+    }
+    this.removeConnectionByUserId(key);
+  }
+
+  removeConnectionByUserId(userId: string) {
+    this.connections.delete(userId);
+  }
+
+  protected async insertNotification(
+    insertData: Partial<Notification>,
+    _req: NcRequest,
+  ) {
+    await Notification.insert(insertData);
+
+    if (PubSubRedis.available) {
+      await PubSubRedis.publish(
+        `notification:${insertData.fk_user_id}`,
+        JSON.stringify(insertData, getCircularReplacer()),
+      );
+    }
+
+    this.sendToConnections(
+      insertData.fk_user_id,
+      JSON.stringify(insertData, getCircularReplacer()),
+    );
+  }
+
+  async notificationList(param: {
+    user: UserType;
+    limit?: number;
+    offset?: number;
+    is_read?: boolean;
+    is_deleted?: boolean;
+  }) {
+    try {
+      const { limit = 10, offset = 0, is_read } = param;
+
+      const list = await Notification.list({
+        fk_user_id: param.user.id,
+        is_read,
+        limit,
+        offset,
+        is_deleted: false,
+      });
+
+      const count = await Notification.count({
+        fk_user_id: param.user.id,
+        is_deleted: false,
+      });
+
+      const unreadCount = await Notification.count({
+        fk_user_id: param.user.id,
+        is_deleted: false,
+        is_read: false,
+      });
+
+      return new PagedResponseImpl(
+        list,
+        {
+          limit: param.limit,
+          offset: param.offset,
+          count,
+        },
+        { unreadCount },
+      );
+    } catch (e) {
+      this.logger.error(e);
+      throw e;
+    }
+  }
+
+  async notificationUpdate(param: {
+    notificationId: string;
+    body;
+    user: UserType;
+  }) {
+    const notification = Notification.get({
+      id: param.notificationId,
+      fk_user_id: param.user.id,
+    });
+
+    if (!notification) {
+      NcError.unauthorized('Unauthorized to update notification');
+    }
+    await Notification.update(param.notificationId, param.body);
+
+    return true;
+  }
+
+  async notificationDelete(param: { notificationId: string; user: UserType }) {
+    const notification = Notification.get({
+      id: param.notificationId,
+      fk_user_id: param.user.id,
+    });
+
+    if (!notification) {
+      NcError.unauthorized('Unauthorized to delete notification');
+    }
+
+    await Notification.update(param.notificationId, {
+      is_deleted: true,
+    });
+  }
+
+  async markAllRead(param: { user: UserType }) {
+    if (!param.user?.id) {
+      NcError.badRequest('User id is required');
+    }
+    await Notification.markAllAsRead(param.user.id);
+    return true;
+  }
+
+  protected async hookHandler({
+    event,
+    data,
+  }: {
+    event: AppEvents;
+    data: ProjectInviteEvent | WelcomeEvent;
+  }) {
+    const { req } = data;
+    switch (event) {
+      case AppEvents.PROJECT_INVITE:
+        {
+          const { base, user, invitedBy } = data as ProjectInviteEvent;
+
+          await this.insertNotification(
+            {
+              fk_user_id: user.id,
+              type: AppEvents.PROJECT_INVITE,
+              body: {
+                base: {
+                  id: base.id,
+                  title: base.title,
+                  type: base.type,
+                },
+                user: {
+                  id: invitedBy.id,
+                  email: invitedBy.email,
+                  displayName: invitedBy.display_name,
+                },
+              },
+            },
+            req,
+          );
+        }
+        break;
+      case AppEvents.WELCOME:
+        {
+          const { user, req } = data as WelcomeEvent;
+
+          await this.insertNotification(
+            {
+              fk_user_id: user.id,
+              type: AppEvents.WELCOME,
+              body: {},
+            },
+            req,
+          );
+        }
+        break;
+    }
+  }
+
+  onModuleDestroy() {
+    this.appHooks.removeAllListener(this.hookHandler);
+  }
+
+  onModuleInit() {
+    this.appHooks.onAll(this.hookHandler.bind(this));
+  }
+}
diff --git a/packages/nocodb/src/utils/circularReplacer.ts b/packages/nocodb/src/utils/circularReplacer.ts
new file mode 100644
index 0000000000..5b859732ea
--- /dev/null
+++ b/packages/nocodb/src/utils/circularReplacer.ts
@@ -0,0 +1,12 @@
+export const getCircularReplacer = () => {
+  const seen = new WeakSet();
+  return (_, value) => {
+    if (typeof value === 'object' && value !== null) {
+      if (seen.has(value)) {
+        return;
+      }
+      seen.add(value);
+    }
+    return value;
+  };
+};
diff --git a/packages/nocodb/src/utils/index.ts b/packages/nocodb/src/utils/index.ts
index 9b6d11bdae..f1be67ebc5 100644
--- a/packages/nocodb/src/utils/index.ts
+++ b/packages/nocodb/src/utils/index.ts
@@ -1,5 +1,6 @@
 export * from './dataUtils';
 export * from './sanitiseUserObj';
 export * from './emailUtils';
+export * from './circularReplacer';
 
 export const isEE = false;
diff --git a/packages/nocodb/src/utils/richTextHelper.ts b/packages/nocodb/src/utils/richTextHelper.ts
index f601769deb..32595c88ad 100644
--- a/packages/nocodb/src/utils/richTextHelper.ts
+++ b/packages/nocodb/src/utils/richTextHelper.ts
@@ -6,10 +6,12 @@ export const extractMentions = (richText: string) => {
 
   const regex = /@\(([^)]+)\)/g;
 
-  const match: RegExpExecArray | null = regex.exec(richText);
-  while (match !== null) {
-    const userId = match[1].split('|')[0]; // Extracts the userId part from the matched string
-    mentions.push(userId);
+  let match: RegExpExecArray | null;
+  while ((match = regex.exec(richText)) !== null) {
+    const userId = match[1]?.split('|')[0]; // Extracts the userId part from the matched string
+    if (userId) {
+      mentions.push(userId);
+    }
   }
 
   return Array.from(new Set(mentions));
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 02d1164123..fd33535c95 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -423,6 +423,25 @@ importers:
         specifier: ^3.5.6
         version: 3.5.6
 
+  packages/nc-mail-templates:
+    dependencies:
+      html-entities-decoder:
+        specifier: ^1.0.5
+        version: 1.0.5
+      typescript:
+        specifier: latest
+        version: 5.4.5
+      vue-extensible-mail:
+        specifier: '^0.0.3 '
+        version: 0.0.3(typescript@5.4.5)
+    devDependencies:
+      '@types/html-entities-decoder':
+        specifier: ^1.0.2
+        version: 1.0.3
+      tsx:
+        specifier: ^4.10.4
+        version: 4.12.0
+
   packages/nocodb:
     dependencies:
       '@aws-sdk/client-kafka':
@@ -1155,7 +1174,7 @@ packages:
     dependencies:
       '@ant-design/colors': 6.0.0
       '@ant-design/icons-svg': 4.3.1
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     dev: false
 
   /@antfu/eslint-config-basic@0.26.3(@typescript-eslint/parser@5.62.0)(eslint@8.56.0):
@@ -3130,7 +3149,7 @@ packages:
         optional: true
     dependencies:
       '@vueuse/core': 7.7.1(vue@3.4.27)
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
       vue-demi: 0.14.8(vue@3.4.27)
     dev: false
 
@@ -3142,7 +3161,7 @@ packages:
     dependencies:
       '@ctrl/tinycolor': 3.6.1
       material-colors: 1.2.6
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     dev: false
 
   /@clickhouse/client-common@0.2.9:
@@ -3356,7 +3375,6 @@ packages:
     cpu: [ppc64]
     os: [aix]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/aix-ppc64@0.20.2:
@@ -3365,7 +3383,6 @@ packages:
     cpu: [ppc64]
     os: [aix]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/android-arm64@0.18.20:
@@ -3383,7 +3400,6 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/android-arm64@0.20.2:
@@ -3392,7 +3408,15 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
-    dev: true
+    optional: true
+
+  /@esbuild/android-arm@0.15.18:
+    resolution: {integrity: sha512-5GT+kcs2WVGjVs7+boataCkO5Fg0y4kCjzkB5bAip7H4jfnOS3dA6KPiww9W1OEKTKeAcUVhdZGvgI65OXmUnw==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: false
     optional: true
 
   /@esbuild/android-arm@0.18.20:
@@ -3410,7 +3434,6 @@ packages:
     cpu: [arm]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/android-arm@0.20.2:
@@ -3419,7 +3442,6 @@ packages:
     cpu: [arm]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/android-x64@0.18.20:
@@ -3437,7 +3459,6 @@ packages:
     cpu: [x64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/android-x64@0.20.2:
@@ -3446,7 +3467,6 @@ packages:
     cpu: [x64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/darwin-arm64@0.18.20:
@@ -3464,7 +3484,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/darwin-arm64@0.20.2:
@@ -3473,7 +3492,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/darwin-x64@0.18.20:
@@ -3491,7 +3509,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/darwin-x64@0.20.2:
@@ -3500,7 +3517,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/freebsd-arm64@0.18.20:
@@ -3518,7 +3534,6 @@ packages:
     cpu: [arm64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/freebsd-arm64@0.20.2:
@@ -3527,7 +3542,6 @@ packages:
     cpu: [arm64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/freebsd-x64@0.18.20:
@@ -3545,7 +3559,6 @@ packages:
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/freebsd-x64@0.20.2:
@@ -3554,7 +3567,6 @@ packages:
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-arm64@0.18.20:
@@ -3572,7 +3584,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-arm64@0.20.2:
@@ -3581,7 +3592,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-arm@0.18.20:
@@ -3599,7 +3609,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-arm@0.20.2:
@@ -3608,7 +3617,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-ia32@0.18.20:
@@ -3626,7 +3634,6 @@ packages:
     cpu: [ia32]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-ia32@0.20.2:
@@ -3635,7 +3642,15 @@ packages:
     cpu: [ia32]
     os: [linux]
     requiresBuild: true
-    dev: true
+    optional: true
+
+  /@esbuild/linux-loong64@0.15.18:
+    resolution: {integrity: sha512-L4jVKS82XVhw2nvzLg/19ClLWg0y27ulRwuP7lcyL6AbUWB5aPglXY3M21mauDQMDfRLs8cQmeT03r/+X3cZYQ==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
     optional: true
 
   /@esbuild/linux-loong64@0.18.20:
@@ -3653,7 +3668,6 @@ packages:
     cpu: [loong64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-loong64@0.20.2:
@@ -3662,7 +3676,6 @@ packages:
     cpu: [loong64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-mips64el@0.18.20:
@@ -3680,7 +3693,6 @@ packages:
     cpu: [mips64el]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-mips64el@0.20.2:
@@ -3689,7 +3701,6 @@ packages:
     cpu: [mips64el]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-ppc64@0.18.20:
@@ -3707,7 +3718,6 @@ packages:
     cpu: [ppc64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-ppc64@0.20.2:
@@ -3716,7 +3726,6 @@ packages:
     cpu: [ppc64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-riscv64@0.18.20:
@@ -3734,7 +3743,6 @@ packages:
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-riscv64@0.20.2:
@@ -3743,7 +3751,6 @@ packages:
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-s390x@0.18.20:
@@ -3761,7 +3768,6 @@ packages:
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-s390x@0.20.2:
@@ -3770,7 +3776,6 @@ packages:
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-x64@0.18.20:
@@ -3788,7 +3793,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-x64@0.20.2:
@@ -3797,7 +3801,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/netbsd-x64@0.18.20:
@@ -3815,7 +3818,6 @@ packages:
     cpu: [x64]
     os: [netbsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/netbsd-x64@0.20.2:
@@ -3824,7 +3826,6 @@ packages:
     cpu: [x64]
     os: [netbsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/openbsd-x64@0.18.20:
@@ -3842,7 +3843,6 @@ packages:
     cpu: [x64]
     os: [openbsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/openbsd-x64@0.20.2:
@@ -3851,7 +3851,6 @@ packages:
     cpu: [x64]
     os: [openbsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/sunos-x64@0.18.20:
@@ -3869,7 +3868,6 @@ packages:
     cpu: [x64]
     os: [sunos]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/sunos-x64@0.20.2:
@@ -3878,7 +3876,6 @@ packages:
     cpu: [x64]
     os: [sunos]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/win32-arm64@0.18.20:
@@ -3896,7 +3893,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/win32-arm64@0.20.2:
@@ -3905,7 +3901,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/win32-ia32@0.18.20:
@@ -3923,7 +3918,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/win32-ia32@0.20.2:
@@ -3932,7 +3926,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/win32-x64@0.18.20:
@@ -3950,7 +3943,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/win32-x64@0.20.2:
@@ -3959,7 +3951,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@eslint-community/eslint-utils@4.4.0(eslint@8.33.0):
@@ -4452,7 +4443,7 @@ packages:
       vue: latest
     dependencies:
       '@iconify/types': 2.0.0
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     dev: false
 
   /@img/sharp-darwin-arm64@0.33.2:
@@ -4795,7 +4786,7 @@ packages:
     dependencies:
       '@intlify/bundle-utils': 7.5.0(vue-i18n@9.9.1)
       '@intlify/shared': 9.9.1
-      '@rollup/pluginutils': 5.1.0(rollup@4.17.2)
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
       '@vue/compiler-sfc': 3.4.27
       debug: 4.3.4(supports-color@5.5.0)
       fast-glob: 3.3.2
@@ -5353,12 +5344,12 @@ packages:
       '@angular-devkit/core': 17.1.2(chokidar@3.6.0)
       '@angular-devkit/schematics': 17.1.2(chokidar@3.6.0)
       '@angular-devkit/schematics-cli': 17.1.2(chokidar@3.6.0)
-      '@nestjs/schematics': 10.1.1(chokidar@3.6.0)(typescript@5.3.3)
+      '@nestjs/schematics': 10.1.1(chokidar@3.6.0)(typescript@5.4.5)
       chalk: 4.1.2
       chokidar: 3.6.0
       cli-table3: 0.6.3
       commander: 4.1.1
-      fork-ts-checker-webpack-plugin: 9.0.2(typescript@5.3.3)(webpack@5.90.1)
+      fork-ts-checker-webpack-plugin: 9.0.2(typescript@5.4.5)(webpack@5.90.1)
       glob: 10.3.10
       inquirer: 8.2.6
       node-emoji: 1.11.0
@@ -5369,7 +5360,7 @@ packages:
       tree-kill: 1.2.2
       tsconfig-paths: 4.2.0
       tsconfig-paths-webpack-plugin: 4.1.0
-      typescript: 5.3.3
+      typescript: 5.4.5
       webpack: 5.90.1(webpack-cli@5.1.4)
       webpack-node-externals: 3.0.0
     transitivePeerDependencies:
@@ -5615,7 +5606,7 @@ packages:
       - supports-color
       - utf-8-validate
 
-  /@nestjs/schematics@10.1.1(chokidar@3.6.0)(typescript@5.3.3):
+  /@nestjs/schematics@10.1.1(chokidar@3.6.0)(typescript@5.4.5):
     resolution: {integrity: sha512-o4lfCnEeIkfJhGBbLZxTuVWcGuqDCFwg5OrvpgRUBM7vI/vONvKKiB5riVNpO+JqXoH0I42NNeDb0m4V5RREig==}
     peerDependencies:
       typescript: latest
@@ -5625,7 +5616,7 @@ packages:
       comment-json: 4.2.3
       jsonc-parser: 3.2.1
       pluralize: 8.0.0
-      typescript: 5.3.3
+      typescript: 5.4.5
     transitivePeerDependencies:
       - chokidar
     dev: true
@@ -5725,7 +5716,7 @@ packages:
       '@angular-devkit/core': 8.3.4
       '@angular-devkit/schematics': 8.3.4
       ts-morph: 4.3.3
-      typescript: 5.3.2
+      typescript: 5.4.5
     dev: true
 
   /@netlify/functions@2.6.3(@opentelemetry/api@1.4.1):
@@ -6049,7 +6040,7 @@ packages:
       semver: 7.6.2
       simple-git: 3.24.0
       sirv: 2.0.4
-      unimport: 3.7.1(rollup@4.17.2)
+      unimport: 3.7.1
       vite: 4.5.3(sass@1.71.1)
       vite-plugin-inspect: 0.8.4(@nuxt/kit@3.11.2)(vite@4.5.3)
       vite-plugin-vue-inspector: 5.1.0(vite@4.5.3)
@@ -6132,7 +6123,7 @@ packages:
       semver: 7.6.2
       ufo: 1.5.3
       unctx: 2.3.1
-      unimport: 3.7.1(rollup@4.17.2)
+      unimport: 3.7.1
       untyped: 1.4.2
     transitivePeerDependencies:
       - rollup
@@ -6159,7 +6150,7 @@ packages:
       semver: 7.6.2
       ufo: 1.5.3
       unctx: 2.3.1
-      unimport: 3.7.1(rollup@4.17.2)
+      unimport: 3.7.1
       untyped: 1.4.2
     transitivePeerDependencies:
       - rollup
@@ -6186,7 +6177,7 @@ packages:
       semver: 7.6.2
       ufo: 1.5.3
       unctx: 2.3.1
-      unimport: 3.7.1(rollup@4.17.2)
+      unimport: 3.7.1
       untyped: 1.4.2
     transitivePeerDependencies:
       - rollup
@@ -6213,7 +6204,7 @@ packages:
       scule: 1.2.0
       semver: 7.6.2
       unctx: 2.3.1
-      unimport: 3.7.1(rollup@4.17.2)
+      unimport: 3.7.1
       untyped: 1.4.0
     transitivePeerDependencies:
       - rollup
@@ -6240,7 +6231,7 @@ packages:
       semver: 7.5.4
       ufo: 1.5.3
       unctx: 2.3.1
-      unimport: 3.7.1(rollup@4.17.2)
+      unimport: 3.7.1
       untyped: 1.4.0
     transitivePeerDependencies:
       - rollup
@@ -6259,7 +6250,7 @@ packages:
       scule: 1.3.0
       std-env: 3.7.0
       ufo: 1.5.3
-      unimport: 3.7.1(rollup@4.17.2)
+      unimport: 3.7.1
       untyped: 1.4.2
     transitivePeerDependencies:
       - rollup
@@ -6279,7 +6270,7 @@ packages:
       scule: 1.3.0
       std-env: 3.7.0
       ufo: 1.5.3
-      unimport: 3.7.1(rollup@4.17.2)
+      unimport: 3.7.1
       untyped: 1.4.2
     transitivePeerDependencies:
       - rollup
@@ -6299,7 +6290,7 @@ packages:
       scule: 1.3.0
       std-env: 3.7.0
       ufo: 1.5.3
-      unimport: 3.7.1(rollup@4.17.2)
+      unimport: 3.7.1
       untyped: 1.4.2
     transitivePeerDependencies:
       - rollup
@@ -6321,7 +6312,7 @@ packages:
       scule: 1.3.0
       std-env: 3.7.0
       ufo: 1.5.3
-      unimport: 3.7.1(rollup@4.17.2)
+      unimport: 3.7.1
       untyped: 1.4.2
     transitivePeerDependencies:
       - rollup
@@ -6341,7 +6332,7 @@ packages:
       scule: 1.3.0
       std-env: 3.7.0
       ufo: 1.5.3
-      unimport: 3.7.1(rollup@4.17.2)
+      unimport: 3.7.1
       untyped: 1.4.2
     transitivePeerDependencies:
       - rollup
@@ -6387,7 +6378,7 @@ packages:
       vue: latest
     dependencies:
       '@nuxt/kit': 3.11.2
-      '@rollup/plugin-replace': 5.0.5(rollup@4.17.2)
+      '@rollup/plugin-replace': 5.0.5(rollup@3.29.4)
       '@vitejs/plugin-vue': 5.0.4(vite@5.2.11)(vue@3.4.27)
       '@vitejs/plugin-vue-jsx': 3.1.0(vite@5.2.11)(vue@3.4.27)
       autoprefixer: 10.4.19(postcss@8.4.38)
@@ -6419,7 +6410,7 @@ packages:
       vite: 5.2.11(sass@1.71.1)
       vite-node: 1.6.0(sass@1.71.1)
       vite-plugin-checker: 0.6.4(eslint@8.56.0)(vite@5.2.11)
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
       vue-bundle-renderer: 2.0.0
     transitivePeerDependencies:
       - '@types/node'
@@ -7359,6 +7350,19 @@ packages:
       type-fest: 2.19.0
     dev: false
 
+  /@rollup/plugin-alias@5.1.0(rollup@3.29.4):
+    resolution: {integrity: sha512-lpA3RZ9PdIG7qqhEfv79tBffNaoDuukFDrmhLqg9ifv99u/ehn+lOg30x2zmhf8AQqQUZaMk/B9fZraQ6/acDQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      rollup: 3.29.4
+      slash: 4.0.0
+    dev: false
+
   /@rollup/plugin-alias@5.1.0(rollup@4.17.2):
     resolution: {integrity: sha512-lpA3RZ9PdIG7qqhEfv79tBffNaoDuukFDrmhLqg9ifv99u/ehn+lOg30x2zmhf8AQqQUZaMk/B9fZraQ6/acDQ==}
     engines: {node: '>=14.0.0'}
@@ -7372,6 +7376,24 @@ packages:
       slash: 4.0.0
     dev: true
 
+  /@rollup/plugin-commonjs@25.0.7(rollup@3.29.4):
+    resolution: {integrity: sha512-nEvcR+LRjEjsaSsc4x3XZfCCvZIaSMenZu/OiwOKGN2UhQpAYI7ru7czFvyWbErlpoGjnSX3D5Ch5FcMA3kRWQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.68.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
+      commondir: 1.0.1
+      estree-walker: 2.0.2
+      glob: 8.1.0
+      is-reference: 1.2.1
+      magic-string: 0.30.10
+      rollup: 3.29.4
+    dev: false
+
   /@rollup/plugin-commonjs@25.0.7(rollup@4.17.2):
     resolution: {integrity: sha512-nEvcR+LRjEjsaSsc4x3XZfCCvZIaSMenZu/OiwOKGN2UhQpAYI7ru7czFvyWbErlpoGjnSX3D5Ch5FcMA3kRWQ==}
     engines: {node: '>=14.0.0'}
@@ -7405,6 +7427,19 @@ packages:
       rollup: 4.17.2
     dev: true
 
+  /@rollup/plugin-json@6.1.0(rollup@3.29.4):
+    resolution: {integrity: sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
+      rollup: 3.29.4
+    dev: false
+
   /@rollup/plugin-json@6.1.0(rollup@4.17.2):
     resolution: {integrity: sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==}
     engines: {node: '>=14.0.0'}
@@ -7418,6 +7453,24 @@ packages:
       rollup: 4.17.2
     dev: true
 
+  /@rollup/plugin-node-resolve@15.2.3(rollup@3.29.4):
+    resolution: {integrity: sha512-j/lym8nf5E21LwBT4Df1VD6hRO2L2iwUeUmP7litikRsVp1H6NWx20NEp0Y7su+7XGc476GnXXc4kFeZNGmaSQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.78.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
+      '@types/resolve': 1.20.2
+      deepmerge: 4.3.1
+      is-builtin-module: 3.2.1
+      is-module: 1.0.0
+      resolve: 1.22.4
+      rollup: 3.29.4
+    dev: false
+
   /@rollup/plugin-node-resolve@15.2.3(rollup@4.17.2):
     resolution: {integrity: sha512-j/lym8nf5E21LwBT4Df1VD6hRO2L2iwUeUmP7litikRsVp1H6NWx20NEp0Y7su+7XGc476GnXXc4kFeZNGmaSQ==}
     engines: {node: '>=14.0.0'}
@@ -7436,6 +7489,19 @@ packages:
       rollup: 4.17.2
     dev: true
 
+  /@rollup/plugin-replace@5.0.5(rollup@3.29.4):
+    resolution: {integrity: sha512-rYO4fOi8lMaTg/z5Jb+hKnrHHVn8j2lwkqwyS4kTRhKyWOLf2wST2sWXr4WzWiTcoHTp2sTjqUbqIj2E39slKQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
+      magic-string: 0.30.10
+      rollup: 3.29.4
+
   /@rollup/plugin-replace@5.0.5(rollup@4.17.2):
     resolution: {integrity: sha512-rYO4fOi8lMaTg/z5Jb+hKnrHHVn8j2lwkqwyS4kTRhKyWOLf2wST2sWXr4WzWiTcoHTp2sTjqUbqIj2E39slKQ==}
     engines: {node: '>=14.0.0'}
@@ -7473,6 +7539,20 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /@rollup/pluginutils@5.1.0(rollup@3.29.4):
+    resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@types/estree': 1.0.5
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+      rollup: 3.29.4
+
   /@rollup/pluginutils@5.1.0(rollup@4.17.2):
     resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
     engines: {node: '>=14.0.0'}
@@ -7486,6 +7566,7 @@ packages:
       estree-walker: 2.0.2
       picomatch: 2.3.1
       rollup: 4.17.2
+    dev: true
 
   /@rollup/rollup-android-arm-eabi@4.12.0:
     resolution: {integrity: sha512-+ac02NL/2TCKRrJu2wffk1kZ+RyqxVUlbjSagNgPm94frxtr+XDL12E5Ll1enWskLrtrZ2r8L3wED1orIibV/w==}
@@ -7500,6 +7581,7 @@ packages:
     cpu: [arm]
     os: [android]
     requiresBuild: true
+    dev: true
     optional: true
 
   /@rollup/rollup-android-arm64@4.12.0:
@@ -7515,6 +7597,7 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
+    dev: true
     optional: true
 
   /@rollup/rollup-darwin-arm64@4.12.0:
@@ -7530,6 +7613,7 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
+    dev: true
     optional: true
 
   /@rollup/rollup-darwin-x64@4.12.0:
@@ -7545,6 +7629,7 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
+    dev: true
     optional: true
 
   /@rollup/rollup-linux-arm-gnueabihf@4.12.0:
@@ -7560,6 +7645,7 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
+    dev: true
     optional: true
 
   /@rollup/rollup-linux-arm-musleabihf@4.17.2:
@@ -7567,6 +7653,7 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
+    dev: true
     optional: true
 
   /@rollup/rollup-linux-arm64-gnu@4.12.0:
@@ -7582,6 +7669,7 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
+    dev: true
     optional: true
 
   /@rollup/rollup-linux-arm64-musl@4.12.0:
@@ -7597,6 +7685,7 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
+    dev: true
     optional: true
 
   /@rollup/rollup-linux-powerpc64le-gnu@4.17.2:
@@ -7604,6 +7693,7 @@ packages:
     cpu: [ppc64]
     os: [linux]
     requiresBuild: true
+    dev: true
     optional: true
 
   /@rollup/rollup-linux-riscv64-gnu@4.12.0:
@@ -7619,6 +7709,7 @@ packages:
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
+    dev: true
     optional: true
 
   /@rollup/rollup-linux-s390x-gnu@4.17.2:
@@ -7626,6 +7717,7 @@ packages:
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
+    dev: true
     optional: true
 
   /@rollup/rollup-linux-x64-gnu@4.12.0:
@@ -7641,6 +7733,7 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
+    dev: true
     optional: true
 
   /@rollup/rollup-linux-x64-musl@4.12.0:
@@ -7656,6 +7749,7 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
+    dev: true
     optional: true
 
   /@rollup/rollup-win32-arm64-msvc@4.12.0:
@@ -7671,6 +7765,7 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
+    dev: true
     optional: true
 
   /@rollup/rollup-win32-ia32-msvc@4.12.0:
@@ -7686,6 +7781,7 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
+    dev: true
     optional: true
 
   /@rollup/rollup-win32-x64-msvc@4.12.0:
@@ -7701,6 +7797,7 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
+    dev: true
     optional: true
 
   /@sentry/core@6.19.7:
@@ -8836,6 +8933,10 @@ packages:
   /@socket.io/component-emitter@3.1.0:
     resolution: {integrity: sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==}
 
+  /@swc/wasm@1.5.25:
+    resolution: {integrity: sha512-RNh3AE02oDW+74/sRwZIMDF/sEaUZBnWwC8AdLI+F3O2TX0k7AAEJZXI+e9d3LheNdPnZ1BX5okDVwPs4wSNqQ==}
+    dev: false
+
   /@techpass/passport-openidconnect@0.3.3:
     resolution: {integrity: sha512-i2X/CofjnGBqpTmw6b+Ex3Co/NrR2xjnIHvnOJk62XIlJJHNSTwmhJ1PkXoA5RGKlxZWchADFGjLTJnebvRj7A==}
     engines: {node: '>= 0.6.0'}
@@ -9153,7 +9254,7 @@ packages:
       '@tiptap/extension-bubble-menu': 2.4.0(@tiptap/core@2.4.0)(@tiptap/pm@2.4.0)
       '@tiptap/extension-floating-menu': 2.4.0(@tiptap/core@2.4.0)(@tiptap/pm@2.4.0)
       '@tiptap/pm': 2.4.0
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     dev: false
 
   /@tootallnate/once@1.1.2:
@@ -9381,6 +9482,10 @@ packages:
       '@types/node': 20.11.30
     dev: true
 
+  /@types/html-entities-decoder@1.0.3:
+    resolution: {integrity: sha512-6yGIJdXY5jdeNdL0gx6EPHxoIuevLQijaNgGl5L7bl47bfzzP5HZ9K72zkwpUtLj92V10xcDLVtg7dG3t5SQjA==}
+    dev: true
+
   /@types/http-errors@2.0.1:
     resolution: {integrity: sha512-/K3ds8TRAfBvi5vfjuz8y6+GiAYBZ0x4tXv1Av6CWBWn0IlADc+ZX9pMq7oU0fNQPnBwIZl3rmeLp6SBApbxSQ==}
     dev: true
@@ -9615,7 +9720,6 @@ packages:
 
   /@types/resolve@1.20.2:
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
-    dev: true
 
   /@types/semver@7.5.0:
     resolution: {integrity: sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==}
@@ -9647,7 +9751,7 @@ packages:
   /@types/splitpanes@2.2.6:
     resolution: {integrity: sha512-3dV5sO1Ht74iER4jJU03mreL3f+Q2h47ZqXS6Sfbqc6hkCvsDrX1GA0NbYWRdNvZemPyTDzUoApWKeoGbALwkQ==}
     dependencies:
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     transitivePeerDependencies:
       - typescript
     dev: true
@@ -9710,7 +9814,7 @@ packages:
   /@types/vue-barcode-reader@0.0.3:
     resolution: {integrity: sha512-klrzMKXdc1eHFnMQXl5QwTGuKki09hh+hxV0AlNjg72VpMRifEbW+roGbDK0LHCK+LTcz13Ebx2/bMKgQr0Ovw==}
     dependencies:
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     transitivePeerDependencies:
       - typescript
     dev: true
@@ -10203,7 +10307,7 @@ packages:
       '@unhead/shared': 1.9.10
       hookable: 5.5.3
       unhead: 1.9.10
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     dev: true
 
   /@unocss/astro@0.58.9(vite@4.5.3):
@@ -10228,7 +10332,7 @@ packages:
     hasBin: true
     dependencies:
       '@ampproject/remapping': 2.3.0
-      '@rollup/pluginutils': 5.1.0(rollup@4.17.2)
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
       '@unocss/config': 0.58.9
       '@unocss/core': 0.58.9
       '@unocss/preset-uno': 0.58.9
@@ -10431,7 +10535,7 @@ packages:
       vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0
     dependencies:
       '@ampproject/remapping': 2.3.0
-      '@rollup/pluginutils': 5.1.0(rollup@4.17.2)
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
       '@unocss/config': 0.58.9
       '@unocss/core': 0.58.9
       '@unocss/inspector': 0.58.9
@@ -10451,7 +10555,7 @@ packages:
       webpack: ^4 || ^5
     dependencies:
       '@ampproject/remapping': 2.3.0
-      '@rollup/pluginutils': 5.1.0(rollup@4.17.2)
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
       '@unocss/config': 0.58.9
       '@unocss/core': 0.58.9
       chokidar: 3.6.0
@@ -10497,7 +10601,7 @@ packages:
       '@babel/plugin-transform-typescript': 7.24.1(@babel/core@7.24.3)
       '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.24.3)
       vite: 5.2.11(sass@1.71.1)
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -10510,7 +10614,7 @@ packages:
       vue: latest
     dependencies:
       vite: 5.2.11(sass@1.71.1)
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     dev: true
 
   /@vitest/expect@1.2.2:
@@ -10584,7 +10688,7 @@ packages:
       '@vue-flow/core': 1.31.0(vue@3.4.27)
       d3-selection: 3.0.0
       d3-zoom: 3.0.0
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     dev: false
 
   /@vue-flow/core@1.31.0(vue@3.4.27):
@@ -10596,7 +10700,7 @@ packages:
       d3-drag: 3.0.0
       d3-selection: 3.0.0
       d3-zoom: 3.0.0
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     transitivePeerDependencies:
       - '@vue/composition-api'
     dev: false
@@ -10611,12 +10715,12 @@ packages:
         optional: true
     dependencies:
       '@babel/types': 7.24.0
-      '@rollup/pluginutils': 5.1.0(rollup@4.17.2)
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
       '@vue/compiler-sfc': 3.4.27
       ast-kit: 0.11.2
       local-pkg: 0.4.3
       magic-string-ast: 0.3.0
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     transitivePeerDependencies:
       - rollup
     dev: true
@@ -10698,7 +10802,7 @@ packages:
       perfect-debounce: 1.0.0
       shiki: 1.5.2
       splitpanes: 3.1.5
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
       vue-virtual-scroller: 2.0.0-beta.8(vue@3.4.27)
     transitivePeerDependencies:
       - '@unocss/reset'
@@ -10743,7 +10847,7 @@ packages:
       mitt: 3.0.1
       perfect-debounce: 1.0.0
       speakingurl: 14.0.1
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     dev: true
 
   /@vue/devtools-shared@7.2.0:
@@ -10769,7 +10873,7 @@ packages:
       floating-vue: 5.2.2(vue@3.4.27)
       focus-trap: 7.5.4
       unocss: 0.58.9(@unocss/webpack@0.58.9)(postcss@8.4.38)(vite@4.5.3)
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - async-validator
@@ -10810,7 +10914,7 @@ packages:
     dependencies:
       '@vue/compiler-ssr': 3.4.27
       '@vue/shared': 3.4.27
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
 
   /@vue/shared@3.4.21:
     resolution: {integrity: sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==}
@@ -10835,7 +10939,7 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
       vue-demi: 0.13.11(vue@3.4.27)
     dev: false
 
@@ -10848,7 +10952,7 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
       vue-demi: 0.13.11(vue@3.4.27)
     dev: false
 
@@ -10898,7 +11002,7 @@ packages:
         optional: true
     dependencies:
       '@vueuse/shared': 7.7.1(vue@3.4.27)
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
       vue-demi: 0.14.8(vue@3.4.27)
     dev: false
 
@@ -11062,7 +11166,7 @@ packages:
       vue:
         optional: true
     dependencies:
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
       vue-demi: 0.14.8(vue@3.4.27)
     dev: false
 
@@ -11636,7 +11740,7 @@ packages:
       resize-observer-polyfill: 1.5.1
       scroll-into-view-if-needed: 2.2.31
       shallow-equal: 1.2.1
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
       vue-types: 3.0.2(vue@3.4.27)
       warning: 4.0.3
     dev: false
@@ -11958,7 +12062,7 @@ packages:
     engines: {node: '>=16.14.0'}
     dependencies:
       '@babel/parser': 7.24.5
-      '@rollup/pluginutils': 5.1.0(rollup@4.17.2)
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
       pathe: 1.1.2
     transitivePeerDependencies:
       - rollup
@@ -11969,7 +12073,7 @@ packages:
     engines: {node: '>=16.14.0'}
     dependencies:
       '@babel/parser': 7.24.5
-      '@rollup/pluginutils': 5.1.0(rollup@4.17.2)
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
       pathe: 1.1.2
     transitivePeerDependencies:
       - rollup
@@ -12043,7 +12147,6 @@ packages:
       picocolors: 1.0.0
       postcss: 8.4.38
       postcss-value-parser: 4.2.0
-    dev: true
 
   /available-typed-arrays@1.0.5:
     resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
@@ -12509,7 +12612,6 @@ packages:
   /builtin-modules@3.3.0:
     resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
     engines: {node: '>=6'}
-    dev: true
 
   /builtins@1.0.3:
     resolution: {integrity: sha512-uYBjakWipfaO/bXI7E8rq6kpwHRZK5cNYrUv2OzZSI/FvmdMyXJ2tG9dKcjEC5YHmHpUAwsargWIZNWdxb/bnQ==}
@@ -12722,14 +12824,12 @@ packages:
       caniuse-lite: 1.0.30001588
       lodash.memoize: 4.1.2
       lodash.uniq: 4.5.0
-    dev: true
 
   /caniuse-lite@1.0.30001588:
     resolution: {integrity: sha512-+hVY9jE44uKLkH0SrUTqxjxqNTOWHsbnQDIKjwkZ3lNTzUUVdBLBGXtj/q5Mp5u98r3droaZAewQuEDzjQdZlQ==}
 
   /caniuse-lite@1.0.30001618:
     resolution: {integrity: sha512-p407+D1tIkDvsEAPS22lJxLQQaG8OTBEqo0KhzfABGk0TU4juBNDSfH0hyAp/HRyx+M8L17z/ltyhxh27FTfQg==}
-    dev: true
 
   /case-anything@2.1.13:
     resolution: {integrity: sha512-zlOQ80VrQ2Ue+ymH5OuM/DlDq64mEm+B9UTdHULv5osUMD6HalNTblf2b1u/m6QecjsnOkBpqVZ+XPwIVsy7Ng==}
@@ -12797,7 +12897,6 @@ packages:
   /chalk@5.3.0:
     resolution: {integrity: sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==}
     engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
-    dev: true
 
   /char-regex@1.0.2:
     resolution: {integrity: sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==}
@@ -12922,7 +13021,6 @@ packages:
     resolution: {integrity: sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==}
     dependencies:
       consola: 3.2.3
-    dev: true
 
   /cjs-module-lexer@1.2.3:
     resolution: {integrity: sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==}
@@ -13157,7 +13255,6 @@ packages:
 
   /colord@2.9.3:
     resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
-    dev: true
 
   /colorette@2.0.19:
     resolution: {integrity: sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==}
@@ -13247,7 +13344,6 @@ packages:
 
   /commondir@1.0.1:
     resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
-    dev: true
 
   /compare-func@2.0.0:
     resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==}
@@ -13327,7 +13423,6 @@ packages:
 
   /confbox@0.1.7:
     resolution: {integrity: sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==}
-    dev: true
 
   /config-chain@1.1.13:
     resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
@@ -13799,7 +13894,6 @@ packages:
       postcss: ^8.0.9
     dependencies:
       postcss: 8.4.38
-    dev: true
 
   /css-select@5.1.0:
     resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
@@ -13837,7 +13931,6 @@ packages:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
-    dev: true
 
   /cssfilter@0.0.10:
     resolution: {integrity: sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==}
@@ -13884,6 +13977,45 @@ packages:
       postcss-unique-selectors: 6.0.4(postcss@8.4.38)
     dev: true
 
+  /cssnano-preset-default@7.0.2(postcss@8.4.38):
+    resolution: {integrity: sha512-z95kGKZx8VWHfERj7LFzuiTxylbvEp07ZEYaFu+t6bFyNOXLd/+3oPyNaY7ISwcrfHFCkt8OfRo4IZxVRJZ7dg==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      browserslist: 4.23.0
+      css-declaration-sorter: 7.2.0(postcss@8.4.38)
+      cssnano-utils: 5.0.0(postcss@8.4.38)
+      postcss: 8.4.38
+      postcss-calc: 10.0.0(postcss@8.4.38)
+      postcss-colormin: 7.0.0(postcss@8.4.38)
+      postcss-convert-values: 7.0.0(postcss@8.4.38)
+      postcss-discard-comments: 7.0.0(postcss@8.4.38)
+      postcss-discard-duplicates: 7.0.0(postcss@8.4.38)
+      postcss-discard-empty: 7.0.0(postcss@8.4.38)
+      postcss-discard-overridden: 7.0.0(postcss@8.4.38)
+      postcss-merge-longhand: 7.0.1(postcss@8.4.38)
+      postcss-merge-rules: 7.0.1(postcss@8.4.38)
+      postcss-minify-font-values: 7.0.0(postcss@8.4.38)
+      postcss-minify-gradients: 7.0.0(postcss@8.4.38)
+      postcss-minify-params: 7.0.0(postcss@8.4.38)
+      postcss-minify-selectors: 7.0.1(postcss@8.4.38)
+      postcss-normalize-charset: 7.0.0(postcss@8.4.38)
+      postcss-normalize-display-values: 7.0.0(postcss@8.4.38)
+      postcss-normalize-positions: 7.0.0(postcss@8.4.38)
+      postcss-normalize-repeat-style: 7.0.0(postcss@8.4.38)
+      postcss-normalize-string: 7.0.0(postcss@8.4.38)
+      postcss-normalize-timing-functions: 7.0.0(postcss@8.4.38)
+      postcss-normalize-unicode: 7.0.0(postcss@8.4.38)
+      postcss-normalize-url: 7.0.0(postcss@8.4.38)
+      postcss-normalize-whitespace: 7.0.0(postcss@8.4.38)
+      postcss-ordered-values: 7.0.0(postcss@8.4.38)
+      postcss-reduce-initial: 7.0.0(postcss@8.4.38)
+      postcss-reduce-transforms: 7.0.0(postcss@8.4.38)
+      postcss-svgo: 7.0.1(postcss@8.4.38)
+      postcss-unique-selectors: 7.0.1(postcss@8.4.38)
+    dev: false
+
   /cssnano-utils@4.0.2(postcss@8.4.38):
     resolution: {integrity: sha512-ZR1jHg+wZ8o4c3zqf1SIUSTIvm/9mU343FMR6Obe/unskbvpGhZOo1J6d/r8D1pzkRQYuwbcH3hToOuoA2G7oQ==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -13893,6 +14025,15 @@ packages:
       postcss: 8.4.38
     dev: true
 
+  /cssnano-utils@5.0.0(postcss@8.4.38):
+    resolution: {integrity: sha512-Uij0Xdxc24L6SirFr25MlwC2rCFX6scyUmuKpzI+JQ7cyqDEwD42fJ0xfB3yLfOnRDU5LKGgjQ9FA6LYh76GWQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      postcss: 8.4.38
+    dev: false
+
   /cssnano@6.1.2(postcss@8.4.38):
     resolution: {integrity: sha512-rYk5UeX7VAM/u0lNqewCdasdtPK81CgX8wJFLEIXHbV2oldWRgJAsZrdhRXkV1NJzA2g850KiFm9mMU2HxNxMA==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -13904,6 +14045,17 @@ packages:
       postcss: 8.4.38
     dev: true
 
+  /cssnano@7.0.2(postcss@8.4.38):
+    resolution: {integrity: sha512-LXm/Xx6TNLzfHM2lBaIQHfvtdW5QfdbyLzfJAWZrclCAb47yVa0/yJG69+amcw3Lq0YZ+kyU40rbsMPLcMt9aw==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      cssnano-preset-default: 7.0.2(postcss@8.4.38)
+      lilconfig: 3.1.1
+      postcss: 8.4.38
+    dev: false
+
   /csso@5.0.5:
     resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
@@ -14377,7 +14529,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       path-type: 4.0.0
-    dev: true
 
   /doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
@@ -14561,7 +14712,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.22.11
       core-js: 3.32.1
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     dev: false
 
   /emoji-regex@8.0.0:
@@ -14893,38 +15044,248 @@ packages:
       is-date-object: 1.0.5
       is-symbol: 1.0.4
 
-  /esbuild@0.18.20:
-    resolution: {integrity: sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==}
+  /esbuild-android-64@0.15.18:
+    resolution: {integrity: sha512-wnpt3OXRhcjfIDSZu9bnzT4/TNTDsOUvip0foZOUBG7QbSt//w3QV4FInVJxNhKc/ErhUxc5z4QjHtMi7/TbgA==}
     engines: {node: '>=12'}
-    hasBin: true
+    cpu: [x64]
+    os: [android]
     requiresBuild: true
-    optionalDependencies:
-      '@esbuild/android-arm': 0.18.20
-      '@esbuild/android-arm64': 0.18.20
-      '@esbuild/android-x64': 0.18.20
-      '@esbuild/darwin-arm64': 0.18.20
-      '@esbuild/darwin-x64': 0.18.20
-      '@esbuild/freebsd-arm64': 0.18.20
-      '@esbuild/freebsd-x64': 0.18.20
-      '@esbuild/linux-arm': 0.18.20
-      '@esbuild/linux-arm64': 0.18.20
-      '@esbuild/linux-ia32': 0.18.20
-      '@esbuild/linux-loong64': 0.18.20
-      '@esbuild/linux-mips64el': 0.18.20
-      '@esbuild/linux-ppc64': 0.18.20
-      '@esbuild/linux-riscv64': 0.18.20
-      '@esbuild/linux-s390x': 0.18.20
-      '@esbuild/linux-x64': 0.18.20
-      '@esbuild/netbsd-x64': 0.18.20
-      '@esbuild/openbsd-x64': 0.18.20
-      '@esbuild/sunos-x64': 0.18.20
-      '@esbuild/win32-arm64': 0.18.20
-      '@esbuild/win32-ia32': 0.18.20
-      '@esbuild/win32-x64': 0.18.20
-    dev: true
+    dev: false
+    optional: true
 
-  /esbuild@0.19.11:
-    resolution: {integrity: sha512-HJ96Hev2hX/6i5cDVwcqiJBBtuo9+FeIJOtZ9W1kA5M6AMJRHUZlpYZ1/SbEwtO0ioNAW8rUooVpC/WehY2SfA==}
+  /esbuild-android-arm64@0.15.18:
+    resolution: {integrity: sha512-G4xu89B8FCzav9XU8EjsXacCKSG2FT7wW9J6hOc18soEHJdtWu03L3TQDGf0geNxfLTtxENKBzMSq9LlbjS8OQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /esbuild-darwin-64@0.15.18:
+    resolution: {integrity: sha512-2WAvs95uPnVJPuYKP0Eqx+Dl/jaYseZEUUT1sjg97TJa4oBtbAKnPnl3b5M9l51/nbx7+QAEtuummJZW0sBEmg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /esbuild-darwin-arm64@0.15.18:
+    resolution: {integrity: sha512-tKPSxcTJ5OmNb1btVikATJ8NftlyNlc8BVNtyT/UAr62JFOhwHlnoPrhYWz09akBLHI9nElFVfWSTSRsrZiDUA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /esbuild-freebsd-64@0.15.18:
+    resolution: {integrity: sha512-TT3uBUxkteAjR1QbsmvSsjpKjOX6UkCstr8nMr+q7zi3NuZ1oIpa8U41Y8I8dJH2fJgdC3Dj3CXO5biLQpfdZA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /esbuild-freebsd-arm64@0.15.18:
+    resolution: {integrity: sha512-R/oVr+X3Tkh+S0+tL41wRMbdWtpWB8hEAMsOXDumSSa6qJR89U0S/PpLXrGF7Wk/JykfpWNokERUpCeHDl47wA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /esbuild-linux-32@0.15.18:
+    resolution: {integrity: sha512-lphF3HiCSYtaa9p1DtXndiQEeQDKPl9eN/XNoBf2amEghugNuqXNZA/ZovthNE2aa4EN43WroO0B85xVSjYkbg==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /esbuild-linux-64@0.15.18:
+    resolution: {integrity: sha512-hNSeP97IviD7oxLKFuii5sDPJ+QHeiFTFLoLm7NZQligur8poNOWGIgpQ7Qf8Balb69hptMZzyOBIPtY09GZYw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /esbuild-linux-arm64@0.15.18:
+    resolution: {integrity: sha512-54qr8kg/6ilcxd+0V3h9rjT4qmjc0CccMVWrjOEM/pEcUzt8X62HfBSeZfT2ECpM7104mk4yfQXkosY8Quptug==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /esbuild-linux-arm@0.15.18:
+    resolution: {integrity: sha512-UH779gstRblS4aoS2qpMl3wjg7U0j+ygu3GjIeTonCcN79ZvpPee12Qun3vcdxX+37O5LFxz39XeW2I9bybMVA==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /esbuild-linux-mips64le@0.15.18:
+    resolution: {integrity: sha512-Mk6Ppwzzz3YbMl/ZZL2P0q1tnYqh/trYZ1VfNP47C31yT0K8t9s7Z077QrDA/guU60tGNp2GOwCQnp+DYv7bxQ==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /esbuild-linux-ppc64le@0.15.18:
+    resolution: {integrity: sha512-b0XkN4pL9WUulPTa/VKHx2wLCgvIAbgwABGnKMY19WhKZPT+8BxhZdqz6EgkqCLld7X5qiCY2F/bfpUUlnFZ9w==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /esbuild-linux-riscv64@0.15.18:
+    resolution: {integrity: sha512-ba2COaoF5wL6VLZWn04k+ACZjZ6NYniMSQStodFKH/Pu6RxzQqzsmjR1t9QC89VYJxBeyVPTaHuBMCejl3O/xg==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /esbuild-linux-s390x@0.15.18:
+    resolution: {integrity: sha512-VbpGuXEl5FCs1wDVp93O8UIzl3ZrglgnSQ+Hu79g7hZu6te6/YHgVJxCM2SqfIila0J3k0csfnf8VD2W7u2kzQ==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /esbuild-netbsd-64@0.15.18:
+    resolution: {integrity: sha512-98ukeCdvdX7wr1vUYQzKo4kQ0N2p27H7I11maINv73fVEXt2kyh4K4m9f35U1K43Xc2QGXlzAw0K9yoU7JUjOg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /esbuild-openbsd-64@0.15.18:
+    resolution: {integrity: sha512-yK5NCcH31Uae076AyQAXeJzt/vxIo9+omZRKj1pauhk3ITuADzuOx5N2fdHrAKPxN+zH3w96uFKlY7yIn490xQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /esbuild-sunos-64@0.15.18:
+    resolution: {integrity: sha512-On22LLFlBeLNj/YF3FT+cXcyKPEI263nflYlAhz5crxtp3yRG1Ugfr7ITyxmCmjm4vbN/dGrb/B7w7U8yJR9yw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /esbuild-windows-32@0.15.18:
+    resolution: {integrity: sha512-o+eyLu2MjVny/nt+E0uPnBxYuJHBvho8vWsC2lV61A7wwTWC3jkN2w36jtA+yv1UgYkHRihPuQsL23hsCYGcOQ==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /esbuild-windows-64@0.15.18:
+    resolution: {integrity: sha512-qinug1iTTaIIrCorAUjR0fcBk24fjzEedFYhhispP8Oc7SFvs+XeW3YpAKiKp8dRpizl4YYAhxMjlftAMJiaUw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /esbuild-windows-arm64@0.15.18:
+    resolution: {integrity: sha512-q9bsYzegpZcLziq0zgUi5KqGVtfhjxGbnksaBFYmWLxeV/S1fK4OLdq2DFYnXcLMjlZw2L0jLsk1eGoB522WXQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /esbuild@0.15.18:
+    resolution: {integrity: sha512-x/R72SmW3sSFRm5zrrIjAhCeQSAWoni3CmHEqfQrZIQTM3lVCdehdwuIqaOtfC2slvpdlLa62GYoN8SxT23m6Q==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@esbuild/android-arm': 0.15.18
+      '@esbuild/linux-loong64': 0.15.18
+      esbuild-android-64: 0.15.18
+      esbuild-android-arm64: 0.15.18
+      esbuild-darwin-64: 0.15.18
+      esbuild-darwin-arm64: 0.15.18
+      esbuild-freebsd-64: 0.15.18
+      esbuild-freebsd-arm64: 0.15.18
+      esbuild-linux-32: 0.15.18
+      esbuild-linux-64: 0.15.18
+      esbuild-linux-arm: 0.15.18
+      esbuild-linux-arm64: 0.15.18
+      esbuild-linux-mips64le: 0.15.18
+      esbuild-linux-ppc64le: 0.15.18
+      esbuild-linux-riscv64: 0.15.18
+      esbuild-linux-s390x: 0.15.18
+      esbuild-netbsd-64: 0.15.18
+      esbuild-openbsd-64: 0.15.18
+      esbuild-sunos-64: 0.15.18
+      esbuild-windows-32: 0.15.18
+      esbuild-windows-64: 0.15.18
+      esbuild-windows-arm64: 0.15.18
+    dev: false
+
+  /esbuild@0.18.20:
+    resolution: {integrity: sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@esbuild/android-arm': 0.18.20
+      '@esbuild/android-arm64': 0.18.20
+      '@esbuild/android-x64': 0.18.20
+      '@esbuild/darwin-arm64': 0.18.20
+      '@esbuild/darwin-x64': 0.18.20
+      '@esbuild/freebsd-arm64': 0.18.20
+      '@esbuild/freebsd-x64': 0.18.20
+      '@esbuild/linux-arm': 0.18.20
+      '@esbuild/linux-arm64': 0.18.20
+      '@esbuild/linux-ia32': 0.18.20
+      '@esbuild/linux-loong64': 0.18.20
+      '@esbuild/linux-mips64el': 0.18.20
+      '@esbuild/linux-ppc64': 0.18.20
+      '@esbuild/linux-riscv64': 0.18.20
+      '@esbuild/linux-s390x': 0.18.20
+      '@esbuild/linux-x64': 0.18.20
+      '@esbuild/netbsd-x64': 0.18.20
+      '@esbuild/openbsd-x64': 0.18.20
+      '@esbuild/sunos-x64': 0.18.20
+      '@esbuild/win32-arm64': 0.18.20
+      '@esbuild/win32-ia32': 0.18.20
+      '@esbuild/win32-x64': 0.18.20
+    dev: true
+
+  /esbuild@0.19.11:
+    resolution: {integrity: sha512-HJ96Hev2hX/6i5cDVwcqiJBBtuo9+FeIJOtZ9W1kA5M6AMJRHUZlpYZ1/SbEwtO0ioNAW8rUooVpC/WehY2SfA==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
@@ -14952,7 +15313,6 @@ packages:
       '@esbuild/win32-arm64': 0.19.11
       '@esbuild/win32-ia32': 0.19.11
       '@esbuild/win32-x64': 0.19.11
-    dev: true
 
   /esbuild@0.20.2:
     resolution: {integrity: sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==}
@@ -14983,7 +15343,6 @@ packages:
       '@esbuild/win32-arm64': 0.20.2
       '@esbuild/win32-ia32': 0.20.2
       '@esbuild/win32-x64': 0.20.2
-    dev: true
 
   /escalade@3.1.1:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
@@ -16313,7 +16672,7 @@ packages:
         optional: true
     dependencies:
       '@floating-ui/dom': 1.1.1
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
       vue-resize: 2.0.0-alpha.1(vue@3.4.27)
     dev: true
 
@@ -16376,7 +16735,7 @@ packages:
     resolution: {integrity: sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==}
     dev: false
 
-  /fork-ts-checker-webpack-plugin@9.0.2(typescript@5.3.3)(webpack@5.90.1):
+  /fork-ts-checker-webpack-plugin@9.0.2(typescript@5.4.5)(webpack@5.90.1):
     resolution: {integrity: sha512-Uochze2R8peoN1XqlSi/rGUkDQpRogtLFocP9+PGu68zk1BDAKXfdeCdyVZpgTk8V8WFVQXdEz426VKjXLO1Gg==}
     engines: {node: '>=12.13.0', yarn: '>=1.0.0'}
     peerDependencies:
@@ -16395,7 +16754,7 @@ packages:
       schema-utils: 3.3.0
       semver: 7.6.2
       tapable: 2.2.1
-      typescript: 5.3.3
+      typescript: 5.4.5
       webpack: 5.90.1(webpack-cli@5.1.4)
     dev: true
 
@@ -16470,7 +16829,6 @@ packages:
 
   /fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
-    dev: true
 
   /fresh@0.5.2:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
@@ -16509,7 +16867,6 @@ packages:
       graceful-fs: 4.2.11
       jsonfile: 6.1.0
       universalify: 2.0.0
-    dev: true
 
   /fs-extra@8.1.0:
     resolution: {integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==}
@@ -16820,6 +17177,12 @@ packages:
       get-intrinsic: 1.2.4
     dev: true
 
+  /get-tsconfig@4.7.5:
+    resolution: {integrity: sha512-ZCuZCnlqNzjb4QprAzXKdpp/gh6KTxSJuw3IBsPnV/7fV4NxC9ckB+vPTt8w7fJA0TaSD7c55BR47JD6MEDyDw==}
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+    dev: true
+
   /getopts@2.3.0:
     resolution: {integrity: sha512-5eDf9fuSXwxBL6q5HX+dhDj+dslFGWzU5thZ9kNKUkcPtaPdatmUFKwHFrLb/uf/WpA4BHET+AX3Scl56cAjpA==}
     dev: false
@@ -17045,7 +17408,6 @@ packages:
       ignore: 5.3.0
       merge2: 1.4.1
       slash: 4.0.0
-    dev: true
 
   /globby@14.0.0:
     resolution: {integrity: sha512-/1WM/LNHRAOH9lZta77uGbq0dAEQM+XjNesWwhlERDVenqothRbnzTrL3/LrIoEPPjeUHC3vrS6TwoyxeHs7MQ==}
@@ -17451,6 +17813,10 @@ packages:
       whatwg-encoding: 3.1.1
     dev: false
 
+  /html-entities-decoder@1.0.5:
+    resolution: {integrity: sha512-Cc/RSOGlojr7NDw1oXamUQenYBB0f/SISO8QWtRdZkDOmlO/hvbGZMjgyl+6+mh2PKPRrGXUKH4JhCU18LNS2g==}
+    dev: false
+
   /html-escaper@2.0.2:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
     dev: true
@@ -17707,6 +18073,16 @@ packages:
       resolve-cwd: 3.0.0
     dev: true
 
+  /import-string@0.1.2(typescript@5.4.5):
+    resolution: {integrity: sha512-tOL7q/mHqoibjr5cm+S5yJv51t6YXVyBCBC5/q6zIbkPiKlvlOEUfpSze5CQX5ygqTIXpjyfFsOJoxe6PqiCVQ==}
+    peerDependencies:
+      typescript: latest
+    dependencies:
+      '@swc/wasm': 1.5.25
+      module-from-string: 3.3.0
+      typescript: 5.4.5
+    dev: false
+
   /imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
@@ -18026,7 +18402,6 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       builtin-modules: 3.3.0
-    dev: true
 
   /is-callable@1.2.7:
     resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
@@ -18177,7 +18552,6 @@ packages:
 
   /is-module@1.0.0:
     resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
-    dev: true
 
   /is-negated-glob@1.0.0:
     resolution: {integrity: sha512-czXVVn/QEmgvej1f50BZ648vUI+em0xqMq2Sn+QncCLN4zj1UAxlT+kw/6ggQTOaZPd1HqKQGEqbpQVtJucWug==}
@@ -18264,7 +18638,6 @@ packages:
     resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
     dependencies:
       '@types/estree': 1.0.5
-    dev: true
 
   /is-regex@1.1.4:
     resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
@@ -19621,7 +19994,6 @@ packages:
   /lilconfig@3.1.1:
     resolution: {integrity: sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==}
     engines: {node: '>=14'}
-    dev: true
 
   /lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
@@ -19893,7 +20265,6 @@ packages:
 
   /lodash.memoize@4.1.2:
     resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
-    dev: true
 
   /lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
@@ -19922,7 +20293,6 @@ packages:
 
   /lodash.uniq@4.5.0:
     resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
-    dev: true
 
   /lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
@@ -20562,6 +20932,39 @@ packages:
     hasBin: true
     dev: false
 
+  /mkdist@1.5.1(typescript@5.4.5):
+    resolution: {integrity: sha512-lCu1spNiA52o7IaKgZnOjg28nNHwYqUDjBfXePXyUtzD7Xhe6rRTkGTalQ/ALfrZC/SrPw2+A/0qkeJ+fPDZtQ==}
+    hasBin: true
+    peerDependencies:
+      sass: ^1.75.0
+      typescript: latest
+      vue-tsc: ^1.8.27 || ^2.0.14
+    peerDependenciesMeta:
+      sass:
+        optional: true
+      typescript:
+        optional: true
+      vue-tsc:
+        optional: true
+    dependencies:
+      autoprefixer: 10.4.19(postcss@8.4.38)
+      citty: 0.1.6
+      cssnano: 7.0.2(postcss@8.4.38)
+      defu: 6.1.4
+      esbuild: 0.20.2
+      fs-extra: 11.2.0
+      globby: 14.0.1
+      jiti: 1.21.0
+      mlly: 1.7.0
+      mri: 1.2.0
+      pathe: 1.1.2
+      pkg-types: 1.1.1
+      postcss: 8.4.38
+      postcss-nested: 6.0.1(postcss@8.4.38)
+      semver: 7.6.2
+      typescript: 5.4.5
+    dev: false
+
   /mlly@1.5.0:
     resolution: {integrity: sha512-NPVQvAY1xr1QoVeG0cy8yUYC7FQcOx6evl/RjT1wL5FvzPnzOysoqB/jmx/DhssT2dYa8nxECLAaFI/+gVLhDQ==}
     dependencies:
@@ -20585,7 +20988,6 @@ packages:
       pathe: 1.1.2
       pkg-types: 1.1.1
       ufo: 1.5.3
-    dev: true
 
   /mocha@10.3.0:
     resolution: {integrity: sha512-uF2XJs+7xSLsrmIvn37i/wnc91nw7XjOQB8ccyx5aEgdnohr7n+rEiZP23WkCYHjilR6+EboEnbq/ZQDz4LSbg==}
@@ -20619,6 +21021,14 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /module-from-string@3.3.0:
+    resolution: {integrity: sha512-VsjwtQtXZloDF7ZpBXON53U4Zz02K1/njJmfZcK+QDlYKgdL0ETq8/FeuU0G9EHxdG5XiTaITcGaldDAqJpGXA==}
+    engines: {node: '>=12.20.0'}
+    dependencies:
+      esbuild: 0.15.18
+      nanoid: 3.3.7
+    dev: false
+
   /moment-timezone@0.5.43:
     resolution: {integrity: sha512-72j3aNyuIsDxdF1i7CEgV2FfxM1r6aaqJyLB2vwb33mXYyoyLly+F1zbWqhA3/bVIoJ4szlUoMbUnVdid32NUQ==}
     dependencies:
@@ -21308,7 +21718,6 @@ packages:
   /normalize-range@0.1.2:
     resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /npm-bundled@1.1.2:
     resolution: {integrity: sha512-x5DHup0SuyQcmL3s7Rx/YQ8sbw/Hzg0rj48eN0dV7hf5cmQq5PXIeioroH3raV1QC1yh3uTYuMThvEQF3iKgGQ==}
@@ -21587,12 +21996,12 @@ packages:
       uncrypto: 0.1.3
       unctx: 2.3.1
       unenv: 1.9.0
-      unimport: 3.7.1(rollup@4.17.2)
+      unimport: 3.7.1
       unplugin: 1.10.1
       unplugin-vue-router: 0.7.0(vue-router@4.3.0)(vue@3.4.27)
       unstorage: 1.10.2(ioredis@5.4.1)
       untyped: 1.4.2
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
       vue-bundle-renderer: 2.0.0
       vue-devtools-stub: 0.1.0
       vue-router: 4.3.0(vue@3.4.27)
@@ -22394,7 +22803,6 @@ packages:
   /path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
-    dev: true
 
   /path-type@5.0.0:
     resolution: {integrity: sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==}
@@ -22582,7 +22990,7 @@ packages:
         optional: true
     dependencies:
       '@vue/devtools-api': 6.5.0
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
       vue-demi: 0.14.6(vue@3.4.27)
     dev: false
 
@@ -22623,7 +23031,6 @@ packages:
       confbox: 0.1.7
       mlly: 1.7.0
       pathe: 1.1.2
-    dev: true
 
   /playwright-core@1.43.1:
     resolution: {integrity: sha512-EI36Mto2Vrx6VF7rm708qSnesVQKbxEWvPrfA1IPY6HgczBplDx7ENtx+K2n4kJ41sLLkuGfmb0ZLSSXlDhqPg==}
@@ -22661,6 +23068,17 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
+  /postcss-calc@10.0.0(postcss@8.4.38):
+    resolution: {integrity: sha512-OmjhudoNTP0QleZCwl1i6NeBwN+5MZbY5ersLZz69mjJiDVv/p57RjRuKDkHeDWr4T+S97wQfsqRTNoDHB2e3g==}
+    engines: {node: ^18.12 || ^20.9 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.38
+    dependencies:
+      postcss: 8.4.38
+      postcss-selector-parser: 6.0.16
+      postcss-value-parser: 4.2.0
+    dev: false
+
   /postcss-calc@9.0.1(postcss@8.4.38):
     resolution: {integrity: sha512-TipgjGyzP5QzEhsOZUaIkeO5mKeMFpebWzRogWG/ysonUlnHcq5aJe0jOjpfzUU8PeSaBQnrE8ehR0QA5vs8PQ==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -22685,6 +23103,19 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /postcss-colormin@7.0.0(postcss@8.4.38):
+    resolution: {integrity: sha512-5CN6fqtsEtEtwf3mFV3B4UaZnlYljPpzmGeDB4yCK067PnAtfLe9uX2aFZaEwxHE7HopG5rUkW8gyHrNAesHEg==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      browserslist: 4.23.0
+      caniuse-api: 3.0.0
+      colord: 2.9.3
+      postcss: 8.4.38
+      postcss-value-parser: 4.2.0
+    dev: false
+
   /postcss-convert-values@6.1.0(postcss@8.4.38):
     resolution: {integrity: sha512-zx8IwP/ts9WvUM6NkVSkiU902QZL1bwPhaVaLynPtCsOTqp+ZKbNi+s6XJg3rfqpKGA/oc7Oxk5t8pOQJcwl/w==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -22696,6 +23127,17 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /postcss-convert-values@7.0.0(postcss@8.4.38):
+    resolution: {integrity: sha512-bMuzDgXBbFbByPgj+/r6va8zNuIDUaIIbvAFgdO1t3zdgJZ77BZvu6dfWyd6gHEJnYzmeVr9ayUsAQL3/qLJ0w==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      browserslist: 4.23.0
+      postcss: 8.4.38
+      postcss-value-parser: 4.2.0
+    dev: false
+
   /postcss-discard-comments@6.0.2(postcss@8.4.38):
     resolution: {integrity: sha512-65w/uIqhSBBfQmYnG92FO1mWZjJ4GL5b8atm5Yw2UgrwD7HiNiSSNwJor1eCFGzUgYnN/iIknhNRVqjrrpuglw==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -22705,8 +23147,17 @@ packages:
       postcss: 8.4.38
     dev: true
 
-  /postcss-discard-duplicates@6.0.3(postcss@8.4.38):
-    resolution: {integrity: sha512-+JA0DCvc5XvFAxwx6f/e68gQu/7Z9ud584VLmcgto28eB8FqSFZwtrLwB5Kcp70eIoWP/HXqz4wpo8rD8gpsTw==}
+  /postcss-discard-comments@7.0.0(postcss@8.4.38):
+    resolution: {integrity: sha512-xpSdzRqYmy4YIVmjfGyYXKaI1SRnK6CTr+4Zmvyof8ANwvgfZgGdVtmgAvzh59gJm808mJCWQC9tFN0KF5dEXA==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      postcss: 8.4.38
+    dev: false
+
+  /postcss-discard-duplicates@6.0.3(postcss@8.4.38):
+    resolution: {integrity: sha512-+JA0DCvc5XvFAxwx6f/e68gQu/7Z9ud584VLmcgto28eB8FqSFZwtrLwB5Kcp70eIoWP/HXqz4wpo8rD8gpsTw==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
       postcss: ^8.4.31
@@ -22714,6 +23165,15 @@ packages:
       postcss: 8.4.38
     dev: true
 
+  /postcss-discard-duplicates@7.0.0(postcss@8.4.38):
+    resolution: {integrity: sha512-bAnSuBop5LpAIUmmOSsuvtKAAKREB6BBIYStWUTGq8oG5q9fClDMMuY8i4UPI/cEcDx2TN+7PMnXYIId20UVDw==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      postcss: 8.4.38
+    dev: false
+
   /postcss-discard-empty@6.0.3(postcss@8.4.38):
     resolution: {integrity: sha512-znyno9cHKQsK6PtxL5D19Fj9uwSzC2mB74cpT66fhgOadEUPyXFkbgwm5tvc3bt3NAy8ltE5MrghxovZRVnOjQ==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -22723,6 +23183,15 @@ packages:
       postcss: 8.4.38
     dev: true
 
+  /postcss-discard-empty@7.0.0(postcss@8.4.38):
+    resolution: {integrity: sha512-e+QzoReTZ8IAwhnSdp/++7gBZ/F+nBq9y6PomfwORfP7q9nBpK5AMP64kOt0bA+lShBFbBDcgpJ3X4etHg4lzA==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      postcss: 8.4.38
+    dev: false
+
   /postcss-discard-overridden@6.0.2(postcss@8.4.38):
     resolution: {integrity: sha512-j87xzI4LUggC5zND7KdjsI25APtyMuynXZSujByMaav2roV6OZX+8AaCUcZSWqckZpjAjRyFDdpqybgjFO0HJQ==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -22732,6 +23201,15 @@ packages:
       postcss: 8.4.38
     dev: true
 
+  /postcss-discard-overridden@7.0.0(postcss@8.4.38):
+    resolution: {integrity: sha512-GmNAzx88u3k2+sBTZrJSDauR0ccpE24omTQCVmaTTZFz1du6AasspjaUPMJ2ud4RslZpoFKyf+6MSPETLojc6w==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      postcss: 8.4.38
+    dev: false
+
   /postcss-import-resolver@2.0.0:
     resolution: {integrity: sha512-y001XYgGvVwgxyxw9J1a5kqM/vtmIQGzx34g0A0Oy44MFcy/ZboZw1hu/iN3VYFjSTRzbvd7zZJJz0Kh0AGkTw==}
     dependencies:
@@ -22749,6 +23227,17 @@ packages:
       stylehacks: 6.1.1(postcss@8.4.38)
     dev: true
 
+  /postcss-merge-longhand@7.0.1(postcss@8.4.38):
+    resolution: {integrity: sha512-qZlD26hnqSTMxSSOMS8+QCeRWtqOdMKeQHvHcBhjL3mJxKUs47cvO1Y1x3iTdYIk3ioMcRHTiy229TT0mEMH/A==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      postcss: 8.4.38
+      postcss-value-parser: 4.2.0
+      stylehacks: 7.0.1(postcss@8.4.38)
+    dev: false
+
   /postcss-merge-rules@6.1.1(postcss@8.4.38):
     resolution: {integrity: sha512-KOdWF0gju31AQPZiD+2Ar9Qjowz1LTChSjFFbS+e2sFgc4uHOp3ZvVX4sNeTlk0w2O31ecFGgrFzhO0RSWbWwQ==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -22762,6 +23251,19 @@ packages:
       postcss-selector-parser: 6.0.16
     dev: true
 
+  /postcss-merge-rules@7.0.1(postcss@8.4.38):
+    resolution: {integrity: sha512-bb8McYQbo2etgs0uVt6AfngajACK3FHSVP3sGLhprrjbtHJWgG03JZ4KKBlJ8/5Fb8/Rr+mMKaybMYeoYrAg0A==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      browserslist: 4.23.0
+      caniuse-api: 3.0.0
+      cssnano-utils: 5.0.0(postcss@8.4.38)
+      postcss: 8.4.38
+      postcss-selector-parser: 6.1.0
+    dev: false
+
   /postcss-minify-font-values@6.1.0(postcss@8.4.38):
     resolution: {integrity: sha512-gklfI/n+9rTh8nYaSJXlCo3nOKqMNkxuGpTn/Qm0gstL3ywTr9/WRKznE+oy6fvfolH6dF+QM4nCo8yPLdvGJg==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -22772,6 +23274,16 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /postcss-minify-font-values@7.0.0(postcss@8.4.38):
+    resolution: {integrity: sha512-2ckkZtgT0zG8SMc5aoNwtm5234eUx1GGFJKf2b1bSp8UflqaeFzR50lid4PfqVI9NtGqJ2J4Y7fwvnP/u1cQog==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      postcss: 8.4.38
+      postcss-value-parser: 4.2.0
+    dev: false
+
   /postcss-minify-gradients@6.0.3(postcss@8.4.38):
     resolution: {integrity: sha512-4KXAHrYlzF0Rr7uc4VrfwDJ2ajrtNEpNEuLxFgwkhFZ56/7gaE4Nr49nLsQDZyUe+ds+kEhf+YAUolJiYXF8+Q==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -22784,6 +23296,18 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /postcss-minify-gradients@7.0.0(postcss@8.4.38):
+    resolution: {integrity: sha512-pdUIIdj/C93ryCHew0UgBnL2DtUS3hfFa5XtERrs4x+hmpMYGhbzo6l/Ir5de41O0GaKVpK1ZbDNXSY6GkXvtg==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      colord: 2.9.3
+      cssnano-utils: 5.0.0(postcss@8.4.38)
+      postcss: 8.4.38
+      postcss-value-parser: 4.2.0
+    dev: false
+
   /postcss-minify-params@6.1.0(postcss@8.4.38):
     resolution: {integrity: sha512-bmSKnDtyyE8ujHQK0RQJDIKhQ20Jq1LYiez54WiaOoBtcSuflfK3Nm596LvbtlFcpipMjgClQGyGr7GAs+H1uA==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -22796,6 +23320,18 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /postcss-minify-params@7.0.0(postcss@8.4.38):
+    resolution: {integrity: sha512-XOJAuX8Q/9GT1sGxlUvaFEe2H9n50bniLZblXXsAT/BwSfFYvzSZeFG7uupwc0KbKpTnflnQ7aMwGzX6JUWliQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      browserslist: 4.23.0
+      cssnano-utils: 5.0.0(postcss@8.4.38)
+      postcss: 8.4.38
+      postcss-value-parser: 4.2.0
+    dev: false
+
   /postcss-minify-selectors@6.0.4(postcss@8.4.38):
     resolution: {integrity: sha512-L8dZSwNLgK7pjTto9PzWRoMbnLq5vsZSTu8+j1P/2GB8qdtGQfn+K1uSvFgYvgh83cbyxT5m43ZZhUMTJDSClQ==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -22806,6 +23342,26 @@ packages:
       postcss-selector-parser: 6.0.16
     dev: true
 
+  /postcss-minify-selectors@7.0.1(postcss@8.4.38):
+    resolution: {integrity: sha512-YfIbGtcgMFquPxV2L/ASs36ZS4DsgfcDX9tQ8cTEIvBTv+0GXFKtcvvpi9tCKto/+DWGWYKMCESFG3Pnan0Feg==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      postcss: 8.4.38
+      postcss-selector-parser: 6.1.0
+    dev: false
+
+  /postcss-nested@6.0.1(postcss@8.4.38):
+    resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+    dependencies:
+      postcss: 8.4.38
+      postcss-selector-parser: 6.0.16
+    dev: false
+
   /postcss-normalize-charset@6.0.2(postcss@8.4.38):
     resolution: {integrity: sha512-a8N9czmdnrjPHa3DeFlwqst5eaL5W8jYu3EBbTTkI5FHkfMhFZh1EGbku6jhHhIzTA6tquI2P42NtZ59M/H/kQ==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -22815,6 +23371,15 @@ packages:
       postcss: 8.4.38
     dev: true
 
+  /postcss-normalize-charset@7.0.0(postcss@8.4.38):
+    resolution: {integrity: sha512-ABisNUXMeZeDNzCQxPxBCkXexvBrUHV+p7/BXOY+ulxkcjUZO0cp8ekGBwvIh2LbCwnWbyMPNJVtBSdyhM2zYQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      postcss: 8.4.38
+    dev: false
+
   /postcss-normalize-display-values@6.0.2(postcss@8.4.38):
     resolution: {integrity: sha512-8H04Mxsb82ON/aAkPeq8kcBbAtI5Q2a64X/mnRRfPXBq7XeogoQvReqxEfc0B4WPq1KimjezNC8flUtC3Qz6jg==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -22825,6 +23390,16 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /postcss-normalize-display-values@7.0.0(postcss@8.4.38):
+    resolution: {integrity: sha512-lnFZzNPeDf5uGMPYgGOw7v0BfB45+irSRz9gHQStdkkhiM0gTfvWkWB5BMxpn0OqgOQuZG/mRlZyJxp0EImr2Q==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      postcss: 8.4.38
+      postcss-value-parser: 4.2.0
+    dev: false
+
   /postcss-normalize-positions@6.0.2(postcss@8.4.38):
     resolution: {integrity: sha512-/JFzI441OAB9O7VnLA+RtSNZvQ0NCFZDOtp6QPFo1iIyawyXg0YI3CYM9HBy1WvwCRHnPep/BvI1+dGPKoXx/Q==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -22835,6 +23410,16 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /postcss-normalize-positions@7.0.0(postcss@8.4.38):
+    resolution: {integrity: sha512-I0yt8wX529UKIGs2y/9Ybs2CelSvItfmvg/DBIjTnoUSrPxSV7Z0yZ8ShSVtKNaV/wAY+m7bgtyVQLhB00A1NQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      postcss: 8.4.38
+      postcss-value-parser: 4.2.0
+    dev: false
+
   /postcss-normalize-repeat-style@6.0.2(postcss@8.4.38):
     resolution: {integrity: sha512-YdCgsfHkJ2jEXwR4RR3Tm/iOxSfdRt7jplS6XRh9Js9PyCR/aka/FCb6TuHT2U8gQubbm/mPmF6L7FY9d79VwQ==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -22845,6 +23430,16 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /postcss-normalize-repeat-style@7.0.0(postcss@8.4.38):
+    resolution: {integrity: sha512-o3uSGYH+2q30ieM3ppu9GTjSXIzOrRdCUn8UOMGNw7Af61bmurHTWI87hRybrP6xDHvOe5WlAj3XzN6vEO8jLw==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      postcss: 8.4.38
+      postcss-value-parser: 4.2.0
+    dev: false
+
   /postcss-normalize-string@6.0.2(postcss@8.4.38):
     resolution: {integrity: sha512-vQZIivlxlfqqMp4L9PZsFE4YUkWniziKjQWUtsxUiVsSSPelQydwS8Wwcuw0+83ZjPWNTl02oxlIvXsmmG+CiQ==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -22855,6 +23450,16 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /postcss-normalize-string@7.0.0(postcss@8.4.38):
+    resolution: {integrity: sha512-w/qzL212DFVOpMy3UGyxrND+Kb0fvCiBBujiaONIihq7VvtC7bswjWgKQU/w4VcRyDD8gpfqUiBQ4DUOwEJ6Qg==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      postcss: 8.4.38
+      postcss-value-parser: 4.2.0
+    dev: false
+
   /postcss-normalize-timing-functions@6.0.2(postcss@8.4.38):
     resolution: {integrity: sha512-a+YrtMox4TBtId/AEwbA03VcJgtyW4dGBizPl7e88cTFULYsprgHWTbfyjSLyHeBcK/Q9JhXkt2ZXiwaVHoMzA==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -22865,6 +23470,16 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /postcss-normalize-timing-functions@7.0.0(postcss@8.4.38):
+    resolution: {integrity: sha512-tNgw3YV0LYoRwg43N3lTe3AEWZ66W7Dh7lVEpJbHoKOuHc1sLrzMLMFjP8SNULHaykzsonUEDbKedv8C+7ej6g==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      postcss: 8.4.38
+      postcss-value-parser: 4.2.0
+    dev: false
+
   /postcss-normalize-unicode@6.1.0(postcss@8.4.38):
     resolution: {integrity: sha512-QVC5TQHsVj33otj8/JD869Ndr5Xcc/+fwRh4HAsFsAeygQQXm+0PySrKbr/8tkDKzW+EVT3QkqZMfFrGiossDg==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -22876,6 +23491,17 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /postcss-normalize-unicode@7.0.0(postcss@8.4.38):
+    resolution: {integrity: sha512-OnKV52/VFFDAim4n0pdI+JAhsolLBdnCKxE6VV5lW5Q/JeVGFN8UM8ur6/A3EAMLsT1ZRm3fDHh/rBoBQpqi2w==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      browserslist: 4.23.0
+      postcss: 8.4.38
+      postcss-value-parser: 4.2.0
+    dev: false
+
   /postcss-normalize-url@6.0.2(postcss@8.4.38):
     resolution: {integrity: sha512-kVNcWhCeKAzZ8B4pv/DnrU1wNh458zBNp8dh4y5hhxih5RZQ12QWMuQrDgPRw3LRl8mN9vOVfHl7uhvHYMoXsQ==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -22886,6 +23512,16 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /postcss-normalize-url@7.0.0(postcss@8.4.38):
+    resolution: {integrity: sha512-+d7+PpE+jyPX1hDQZYG+NaFD+Nd2ris6r8fPTBAjE8z/U41n/bib3vze8x7rKs5H1uEw5ppe9IojewouHk0klQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      postcss: 8.4.38
+      postcss-value-parser: 4.2.0
+    dev: false
+
   /postcss-normalize-whitespace@6.0.2(postcss@8.4.38):
     resolution: {integrity: sha512-sXZ2Nj1icbJOKmdjXVT9pnyHQKiSAyuNQHSgRCUgThn2388Y9cGVDR+E9J9iAYbSbLHI+UUwLVl1Wzco/zgv0Q==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -22896,6 +23532,16 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /postcss-normalize-whitespace@7.0.0(postcss@8.4.38):
+    resolution: {integrity: sha512-37/toN4wwZErqohedXYqWgvcHUGlT8O/m2jVkAfAe9Bd4MzRqlBmXrJRePH0e9Wgnz2X7KymTgTOaaFizQe3AQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      postcss: 8.4.38
+      postcss-value-parser: 4.2.0
+    dev: false
+
   /postcss-ordered-values@6.0.2(postcss@8.4.38):
     resolution: {integrity: sha512-VRZSOB+JU32RsEAQrO94QPkClGPKJEL/Z9PCBImXMhIeK5KAYo6slP/hBYlLgrCjFxyqvn5VC81tycFEDBLG1Q==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -22907,6 +23553,17 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /postcss-ordered-values@7.0.0(postcss@8.4.38):
+    resolution: {integrity: sha512-KROvC63A8UQW1eYDljQe1dtwc1E/M+mMwDT6z7khV/weHYLWTghaLRLunU7x1xw85lWFwVZOAGakxekYvKV+0w==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      cssnano-utils: 5.0.0(postcss@8.4.38)
+      postcss: 8.4.38
+      postcss-value-parser: 4.2.0
+    dev: false
+
   /postcss-reduce-initial@6.1.0(postcss@8.4.38):
     resolution: {integrity: sha512-RarLgBK/CrL1qZags04oKbVbrrVK2wcxhvta3GCxrZO4zveibqbRPmm2VI8sSgCXwoUHEliRSbOfpR0b/VIoiw==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -22918,6 +23575,17 @@ packages:
       postcss: 8.4.38
     dev: true
 
+  /postcss-reduce-initial@7.0.0(postcss@8.4.38):
+    resolution: {integrity: sha512-iqGgmBxY9LrblZ0BKLjmrA1mC/cf9A/wYCCqSmD6tMi+xAyVl0+DfixZIHSVDMbCPRPjNmVF0DFGth/IDGelFQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      browserslist: 4.23.0
+      caniuse-api: 3.0.0
+      postcss: 8.4.38
+    dev: false
+
   /postcss-reduce-transforms@6.0.2(postcss@8.4.38):
     resolution: {integrity: sha512-sB+Ya++3Xj1WaT9+5LOOdirAxP7dJZms3GRcYheSPi1PiTMigsxHAdkrbItHxwYHr4kt1zL7mmcHstgMYT+aiA==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -22928,6 +23596,16 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /postcss-reduce-transforms@7.0.0(postcss@8.4.38):
+    resolution: {integrity: sha512-pnt1HKKZ07/idH8cpATX/ujMbtOGhUfE+m8gbqwJE05aTaNw8gbo34a2e3if0xc0dlu75sUOiqvwCGY3fzOHew==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      postcss: 8.4.38
+      postcss-value-parser: 4.2.0
+    dev: false
+
   /postcss-selector-parser@6.0.15:
     resolution: {integrity: sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==}
     engines: {node: '>=4'}
@@ -22942,7 +23620,14 @@ packages:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
-    dev: true
+
+  /postcss-selector-parser@6.1.0:
+    resolution: {integrity: sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==}
+    engines: {node: '>=4'}
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+    dev: false
 
   /postcss-svgo@6.0.3(postcss@8.4.38):
     resolution: {integrity: sha512-dlrahRmxP22bX6iKEjOM+c8/1p+81asjKT+V5lrgOH944ryx/OHpclnIbGsKVd3uWOXFLYJwCVf0eEkJGvO96g==}
@@ -22955,6 +23640,17 @@ packages:
       svgo: 3.2.0
     dev: true
 
+  /postcss-svgo@7.0.1(postcss@8.4.38):
+    resolution: {integrity: sha512-0WBUlSL4lhD9rA5k1e5D8EN5wCEyZD6HJk0jIvRxl+FDVOMlJ7DePHYWGGVc5QRqrJ3/06FTXM0bxjmJpmTPSA==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >= 18}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      postcss: 8.4.38
+      postcss-value-parser: 4.2.0
+      svgo: 3.3.2
+    dev: false
+
   /postcss-unique-selectors@6.0.4(postcss@8.4.38):
     resolution: {integrity: sha512-K38OCaIrO8+PzpArzkLKB42dSARtC2tmG6PvD4b1o1Q2E9Os8jzfWFfSy/rixsHwohtsDdFtAWGjFVFUdwYaMg==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -22965,9 +23661,18 @@ packages:
       postcss-selector-parser: 6.0.16
     dev: true
 
+  /postcss-unique-selectors@7.0.1(postcss@8.4.38):
+    resolution: {integrity: sha512-MH7QE/eKUftTB5ta40xcHLl7hkZjgDFydpfTK+QWXeHxghVt3VoPqYL5/G+zYZPPIs+8GuqFXSTgxBSoB1RZtQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      postcss: 8.4.38
+      postcss-selector-parser: 6.1.0
+    dev: false
+
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: true
 
   /postcss@8.4.38:
     resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==}
@@ -23053,7 +23758,6 @@ packages:
   /pretty-bytes@6.1.1:
     resolution: {integrity: sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==}
     engines: {node: ^14.13.1 || >=16.0.0}
-    dev: true
 
   /pretty-format@29.7.0:
     resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
@@ -23803,6 +24507,10 @@ packages:
       global-dirs: 0.1.1
     dev: true
 
+  /resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+    dev: true
+
   /resolve.exports@2.0.2:
     resolution: {integrity: sha512-X2UW6Nw3n/aMgDVy+0rSqgHlv39WZAlZrXCdnbyEiKm17DSqHX4MmQMaST3FbeWR5FTuRcUwYAziZajji0Y7mg==}
     engines: {node: '>=10'}
@@ -23901,6 +24609,20 @@ packages:
       node.flow: 1.2.3
     dev: false
 
+  /rollup-plugin-dts@6.1.1(rollup@3.29.4)(typescript@5.4.5):
+    resolution: {integrity: sha512-aSHRcJ6KG2IHIioYlvAOcEq6U99sVtqDDKVhnwt70rW6tsz3tv5OSjEiWcgzfsHdLyGXZ/3b/7b/+Za3Y6r1XA==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      rollup: ^3.29.4 || ^4
+      typescript: latest
+    dependencies:
+      magic-string: 0.30.10
+      rollup: 3.29.4
+      typescript: 5.4.5
+    optionalDependencies:
+      '@babel/code-frame': 7.24.2
+    dev: false
+
   /rollup-plugin-inject@3.0.2:
     resolution: {integrity: sha512-ptg9PQwzs3orn4jkgXJ74bfs5vYz1NCZlSQMBUA0wKcGp5i5pA1AO3fOUEte8enhGUC+iapTCzEWw2jEFFUO/w==}
     deprecated: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.
@@ -23956,7 +24678,6 @@ packages:
     hasBin: true
     optionalDependencies:
       fsevents: 2.3.3
-    dev: true
 
   /rollup@4.12.0:
     resolution: {integrity: sha512-wz66wn4t1OHIJw3+XU7mJJQV/2NAfw5OAk6G6Hoo3zcvz/XOfQ52Vgi+AN4Uxoxi0KBBwk2g8zPrTDA4btSB/Q==}
@@ -24005,6 +24726,7 @@ packages:
       '@rollup/rollup-win32-ia32-msvc': 4.17.2
       '@rollup/rollup-win32-x64-msvc': 4.17.2
       fsevents: 2.3.3
+    dev: true
 
   /rope-sequence@1.3.4:
     resolution: {integrity: sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==}
@@ -24504,7 +25226,6 @@ packages:
   /slash@4.0.0:
     resolution: {integrity: sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==}
     engines: {node: '>=12'}
-    dev: true
 
   /slash@5.1.0:
     resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
@@ -25192,6 +25913,17 @@ packages:
       postcss-selector-parser: 6.0.16
     dev: true
 
+  /stylehacks@7.0.1(postcss@8.4.38):
+    resolution: {integrity: sha512-PnrT4HzajnxbjfChpeBKLSpSykilnGBlD+pIffCoT5KbLur9fcL8uKRQJJap85byR2wCYZl/4Otk5eq76qeZxQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+    dependencies:
+      browserslist: 4.23.0
+      postcss: 8.4.38
+      postcss-selector-parser: 6.1.0
+    dev: false
+
   /subscriptions-transport-ws@0.11.0(graphql@15.8.0):
     resolution: {integrity: sha512-8D4C6DIH5tGiAIpp5I0wD/xRlNiZAPGHygzCe7VzyzUoxHtawzjNAY9SUTXU05/EY2NMY9/9GF0ycizkXr1CWQ==}
     deprecated: The `subscriptions-transport-ws` package is no longer maintained. We recommend you use `graphql-ws` instead. For help migrating Apollo software to `graphql-ws`, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws    For general help using `graphql-ws`, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md
@@ -25289,6 +26021,20 @@ packages:
       csso: 5.0.5
       picocolors: 1.0.0
 
+  /svgo@3.3.2:
+    resolution: {integrity: sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      '@trysound/sax': 0.2.0
+      commander: 7.2.0
+      css-select: 5.1.0
+      css-tree: 2.3.1
+      css-what: 6.1.0
+      csso: 5.0.5
+      picocolors: 1.0.0
+    dev: false
+
   /symbol-observable@1.2.0:
     resolution: {integrity: sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==}
     engines: {node: '>=0.10.0'}
@@ -25829,7 +26575,7 @@ packages:
       globby: 10.0.2
       is-negated-glob: 1.0.0
       multimatch: 4.0.0
-      typescript: 5.3.2
+      typescript: 5.4.5
     dev: true
 
   /ts-node@10.9.2(@types/node@20.11.30)(typescript@5.3.2):
@@ -25943,6 +26689,17 @@ packages:
     resolution: {integrity: sha512-GG6xbOP85giXXom0dS6z9uyDsxktznjpa1AuDlPrIXDqDnbhjr9Vk6Us8iz6U1nENL4CPS2jZDvIjEdaZsmc4Q==}
     dev: false
 
+  /tsx@4.12.0:
+    resolution: {integrity: sha512-642NAWAbDqPZINjmL32Lh/B+pd8vbVj6LHPsWm09IIHqQuWhCrNfcPTjRlHFWvv3FfM4vt9NLReBIjUNj5ZhDg==}
+    engines: {node: '>=18.0.0'}
+    hasBin: true
+    dependencies:
+      esbuild: 0.20.2
+      get-tsconfig: 4.7.5
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: true
+
   /tuf-js@1.1.7:
     resolution: {integrity: sha512-i3P9Kgw3ytjELUfpuKVDNBJvk4u5bXL6gskv572mcevPbSKCV3zt3djhmlEQ65yERjIbOSncy7U4cQJaB1CBCg==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -26125,6 +26882,11 @@ packages:
     hasBin: true
     dev: true
 
+  /typescript@5.4.5:
+    resolution: {integrity: sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
   /uc.micro@2.0.0:
     resolution: {integrity: sha512-DffL94LsNOccVn4hyfRe5rdKa273swqeA5DJpMOeFmEn1wCDc7nAbbB0gXlgBCL7TNzeTv6G7XVWzan7iJtfig==}
     dev: false
@@ -26161,6 +26923,46 @@ packages:
       has-symbols: 1.0.3
       which-boxed-primitive: 1.0.2
 
+  /unbuild@2.0.0(typescript@5.4.5):
+    resolution: {integrity: sha512-JWCUYx3Oxdzvw2J9kTAp+DKE8df/BnH/JTSj6JyA4SH40ECdFu7FoJJcrm8G92B7TjofQ6GZGjJs50TRxoH6Wg==}
+    hasBin: true
+    peerDependencies:
+      typescript: latest
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@rollup/plugin-alias': 5.1.0(rollup@3.29.4)
+      '@rollup/plugin-commonjs': 25.0.7(rollup@3.29.4)
+      '@rollup/plugin-json': 6.1.0(rollup@3.29.4)
+      '@rollup/plugin-node-resolve': 15.2.3(rollup@3.29.4)
+      '@rollup/plugin-replace': 5.0.5(rollup@3.29.4)
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
+      chalk: 5.3.0
+      citty: 0.1.6
+      consola: 3.2.3
+      defu: 6.1.4
+      esbuild: 0.19.11
+      globby: 13.2.2
+      hookable: 5.5.3
+      jiti: 1.21.0
+      magic-string: 0.30.10
+      mkdist: 1.5.1(typescript@5.4.5)
+      mlly: 1.7.0
+      pathe: 1.1.2
+      pkg-types: 1.1.1
+      pretty-bytes: 6.1.1
+      rollup: 3.29.4
+      rollup-plugin-dts: 6.1.1(rollup@3.29.4)(typescript@5.4.5)
+      scule: 1.3.0
+      typescript: 5.4.5
+      untyped: 1.4.2
+    transitivePeerDependencies:
+      - sass
+      - supports-color
+      - vue-tsc
+    dev: false
+
   /unc-path-regex@0.1.2:
     resolution: {integrity: sha512-eXL4nmJT7oCpkZsHZUOJo8hcX3GbsiDOa0Qu9F646fi8dT3XuSVopVqAcEiVzSKKH7UoDti23wNX3qGFxcW5Qg==}
     engines: {node: '>=0.10.0'}
@@ -26233,6 +27035,25 @@ packages:
     resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
     engines: {node: '>=18'}
 
+  /unimport@3.7.1:
+    resolution: {integrity: sha512-V9HpXYfsZye5bPPYUgs0Otn3ODS1mDUciaBlXljI4C2fTwfFpvFZRywmlOu943puN9sncxROMZhsZCjNXEpzEQ==}
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
+      acorn: 8.11.3
+      escape-string-regexp: 5.0.0
+      estree-walker: 3.0.3
+      fast-glob: 3.3.2
+      local-pkg: 0.5.0
+      magic-string: 0.30.10
+      mlly: 1.6.1
+      pathe: 1.1.2
+      pkg-types: 1.0.3
+      scule: 1.3.0
+      strip-literal: 1.3.0
+      unplugin: 1.10.0
+    transitivePeerDependencies:
+      - rollup
+
   /unimport@3.7.1(rollup@4.17.2):
     resolution: {integrity: sha512-V9HpXYfsZye5bPPYUgs0Otn3ODS1mDUciaBlXljI4C2fTwfFpvFZRywmlOu943puN9sncxROMZhsZCjNXEpzEQ==}
     dependencies:
@@ -26251,6 +27072,7 @@ packages:
       unplugin: 1.10.0
     transitivePeerDependencies:
       - rollup
+    dev: true
 
   /unique-filename@1.1.1:
     resolution: {integrity: sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==}
@@ -26406,7 +27228,7 @@ packages:
         optional: true
     dependencies:
       '@antfu/utils': 0.7.6
-      '@rollup/pluginutils': 5.1.0(rollup@4.17.2)
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
       chokidar: 3.6.0
       debug: 4.3.4(supports-color@5.5.0)
       fast-glob: 3.3.2
@@ -26415,7 +27237,7 @@ packages:
       minimatch: 9.0.3
       resolve: 1.22.4
       unplugin: 1.7.1
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -26430,7 +27252,7 @@ packages:
         optional: true
     dependencies:
       '@babel/types': 7.24.0
-      '@rollup/pluginutils': 5.1.0(rollup@4.17.2)
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
       '@vue-macros/common': 1.8.0(vue@3.4.27)
       ast-walker-scope: 0.5.0
       chokidar: 3.6.0
@@ -26965,7 +27787,7 @@ packages:
     dependencies:
       '@antfu/utils': 0.7.8
       '@nuxt/kit': 3.11.2
-      '@rollup/pluginutils': 5.1.0(rollup@4.17.2)
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
       debug: 4.3.4(supports-color@5.5.0)
       error-stack-parser-es: 0.1.1
       fs-extra: 11.2.0
@@ -27268,7 +28090,7 @@ packages:
       classnames: 2.5.1
       debounce: 1.2.1
       easy-bem: 1.1.1
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     dev: false
 
   /vue-barcode-reader@1.0.3:
@@ -27290,7 +28112,7 @@ packages:
       vue: latest
     dependencies:
       chart.js: 4.4.2
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     dev: false
 
   /vue-component-type-helpers@2.0.6:
@@ -27309,7 +28131,7 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     dev: false
 
   /vue-demi@0.14.6(vue@3.4.27):
@@ -27324,7 +28146,7 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     dev: false
 
   /vue-demi@0.14.7(vue@3.4.27):
@@ -27339,7 +28161,7 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
 
   /vue-demi@0.14.8(vue@3.4.27):
     resolution: {integrity: sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==}
@@ -27353,7 +28175,7 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
 
   /vue-devtools-stub@0.1.0:
     resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
@@ -27365,7 +28187,7 @@ packages:
       vue: latest
     dependencies:
       dompurify: 2.4.7
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
       vue-demi: 0.13.11(vue@3.4.27)
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -27389,6 +28211,21 @@ packages:
       - supports-color
     dev: true
 
+  /vue-extensible-mail@0.0.3(typescript@5.4.5):
+    resolution: {integrity: sha512-X9oEe/ent1mfmAX65lld/WDVCGRBxULvXbHC21j+mOU2EVmL73xLBEh6TRENc+BPyInzm4jjLa9JnhuEzbwNmQ==}
+    dependencies:
+      '@vue/server-renderer': 3.4.27(vue@3.4.27)
+      import-string: 0.1.2(typescript@5.4.5)
+      scule: 1.3.0
+      unbuild: 2.0.0(typescript@5.4.5)
+      vue: 3.4.27(typescript@5.4.5)
+    transitivePeerDependencies:
+      - sass
+      - supports-color
+      - typescript
+      - vue-tsc
+    dev: false
+
   /vue-github-button@3.1.0:
     resolution: {integrity: sha512-S69NFalucetUW4AjMkLlHY/fgTWu6LEGEtehMewXRNLnjODhDvJj4lwt0u0BSPXLTDB+PLk1tWlwx3pw+ItLgQ==}
     dependencies:
@@ -27404,14 +28241,14 @@ packages:
       '@intlify/core-base': 9.9.1
       '@intlify/shared': 9.9.1
       '@vue/devtools-api': 6.5.0
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
 
   /vue-observe-visibility@2.0.0-alpha.1(vue@3.4.27):
     resolution: {integrity: sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==}
     peerDependencies:
       vue: latest
     dependencies:
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     dev: true
 
   /vue-qrcode-reader@3.1.9:
@@ -27420,7 +28257,7 @@ packages:
       barcode-detector: 1.0.4
       callforth: 0.3.1
       core-js: 3.32.1
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
       webrtc-adapter: 7.7.0
     transitivePeerDependencies:
       - typescript
@@ -27431,7 +28268,7 @@ packages:
     peerDependencies:
       vue: latest
     dependencies:
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     dev: true
 
   /vue-router@4.3.0(vue@3.4.27):
@@ -27440,7 +28277,7 @@ packages:
       vue: latest
     dependencies:
       '@vue/devtools-api': 6.6.1
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     dev: true
 
   /vue-types@3.0.2(vue@3.4.27):
@@ -27450,7 +28287,7 @@ packages:
       vue: latest
     dependencies:
       is-plain-object: 3.0.1
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     dev: false
 
   /vue-virtual-scroller@2.0.0-beta.8(vue@3.4.27):
@@ -27459,7 +28296,7 @@ packages:
       vue: latest
     dependencies:
       mitt: 2.1.0
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
       vue-observe-visibility: 2.0.0-alpha.1(vue@3.4.27)
       vue-resize: 2.0.0-alpha.1(vue@3.4.27)
     dev: true
@@ -27472,7 +28309,7 @@ packages:
       vue: latest
     dependencies:
       tippy.js: 6.3.7
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     dev: false
 
   /vue3-contextmenu@0.2.12:
@@ -27480,7 +28317,7 @@ packages:
     dependencies:
       core-js: 3.32.1
       mitt: 2.1.0
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     transitivePeerDependencies:
       - typescript
     dev: false
@@ -27508,10 +28345,10 @@ packages:
       vue: latest
     dependencies:
       resize-detector: 0.3.0
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     dev: false
 
-  /vue@3.4.27:
+  /vue@3.4.27(typescript@5.4.5):
     resolution: {integrity: sha512-8s/56uK6r01r1icG/aEOHqyMVxd1bkYcSe9j8HcKtr/xTOFWvnzIVTehNW+5Yt89f+DLBe4A569pnZLS5HzAMA==}
     peerDependencies:
       typescript: latest
@@ -27524,6 +28361,7 @@ packages:
       '@vue/runtime-dom': 3.4.27
       '@vue/server-renderer': 3.4.27(vue@3.4.27)
       '@vue/shared': 3.4.27
+      typescript: 5.4.5
 
   /vuedraggable@4.1.0(vue@3.4.27):
     resolution: {integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==}
@@ -27531,7 +28369,7 @@ packages:
       vue: latest
     dependencies:
       sortablejs: 1.14.0
-      vue: 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
     dev: false
 
   /w3c-keyname@2.2.8:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 4ba755aac1..19ce0a4174 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,5 +1,6 @@
 packages:
   - 'packages/nocodb-sdk'
   - 'packages/nc-gui'
+  - 'packages/nc-mail-templates'
   - 'packages/nocodb'
   - 'tests/playwright'
\ No newline at end of file
diff --git a/tests/playwright/setup/index.ts b/tests/playwright/setup/index.ts
index f67022df7b..30773c2dbf 100644
--- a/tests/playwright/setup/index.ts
+++ b/tests/playwright/setup/index.ts
@@ -465,7 +465,11 @@ const setup = async ({
     baseUrl = url ? url : `/#/nc/${base.id}`;
   }
 
-  await page.goto(baseUrl, { waitUntil: 'networkidle' });
+  await page.addInitScript(() => (window.isPlaywright = true));
+
+  await page.goto(baseUrl, {
+    waitUntil: 'networkidle',
+  });
 
   console.timeEnd('Setup');