@vc-shell/framework 1.0.290 → 1.0.292

package/shared/components/blade-navigation/composables/useBladeNavigation/index.ts

@@ -104,7 +104,10 @@ const utils = (router: Router) => {
 
   function getURLQuery() {
     if (route.query && Object.keys(route.query).length) {
-      return { params: new URLSearchParams(route.query as Record<string, string>).toString(), obj: route.query };
+      return {
+        params: new URLSearchParams(route.query as Record<string, string>).toString(),
+        obj: route.query,
+      };
     }
 
     const [, query] = window.location.href.split("#")[1].split("?");
@@ -125,12 +128,12 @@ const useBladeNavigationSingleton = createSharedComposable(() => {
   const route = useRoute();
   const { setupPageTracking } = useAppInsights();
 
-  const instance: BladeComponentInternalInstance = getCurrentInstance() as BladeComponentInternalInstance;
+  const instance = getCurrentInstance() as BladeComponentInternalInstance;
   const navigationInstance =
     (instance !== null && inject<BladeNavigationPlugin>("bladeNavigationPlugin")) || bladeNavigationInstance;
   const router = navigationInstance?.router;
 
-  const { parseUrl, parseWorkspaceUrl, getURLQuery } = utils(router);
+  const { parseUrl, parseWorkspaceUrl, getURLQuery, routes } = utils(router);
 
   watch(
     () => route.path,
@@ -161,7 +164,9 @@ const useBladeNavigationSingleton = createSharedComposable(() => {
   }
 
   function updateActiveWorkspace(wsRouteComponent: BladeVNode) {
-    wsRouteComponent.props.navigation.idx = 0;
+    if (wsRouteComponent.props?.navigation) {
+      wsRouteComponent.props.navigation.idx = 0;
+    }
     navigationInstance.blades.value[0] = wsRouteComponent;
     activeWorkspace.value = wsRouteComponent;
     closeBlade(1);
@@ -202,8 +207,10 @@ const useBladeNavigationSingleton = createSharedComposable(() => {
     const wsBladeUrl = workspace?.type.url;
     const lastBladeUrl = lastBlade?.type.url;
     const param = lastBlade?.props?.param;
-    if (lastBlade && wsBladeUrl) {
-      return "/" + parseUrl(wsBladeUrl)?.workspace + lastBladeUrl + (param ? "/" + param : "");
+    const parsedWorkspaceUrl = parseUrl(wsBladeUrl || "")?.workspace;
+
+    if (lastBlade && wsBladeUrl && parsedWorkspaceUrl) {
+      return "/" + parsedWorkspaceUrl + lastBladeUrl + (param ? "/" + param : "");
     } else {
       return wsBladeUrl;
     }
@@ -234,8 +241,8 @@ const useBladeNavigationSingleton = createSharedComposable(() => {
     try {
       const children = navigationInstance.blades.value.slice(index).reverse();
       let isPrevented = false;
-      for (let index = 0; index < children.length; index++) {
-        const element = children[index];
+      for (let i = 0; i < children.length; i++) {
+        const element = children[i];
 
         if (element.props?.navigation?.onBeforeClose) {
           const result = await element.props.navigation.onBeforeClose();
@@ -250,7 +257,7 @@ const useBladeNavigationSingleton = createSharedComposable(() => {
       }
 
       if (!isPrevented) {
-        if (navigationInstance.blades.value[index - 1]?.props?.navigation?.isVisible === false) {
+        if (index > 0 && navigationInstance.blades.value[index - 1]?.props?.navigation?.isVisible === false) {
           navigationInstance.blades.value[index - 1].props.navigation.isVisible = true;
         }
         navigationInstance.blades.value.splice(index);
@@ -276,11 +283,14 @@ export function useBladeNavigation(): IUseBladeNavigation {
 
   const { hasAccess } = usePermissions();
 
-  const instance: BladeComponentInternalInstance = getCurrentInstance() as BladeComponentInternalInstance;
+  const instance = getCurrentInstance() as BladeComponentInternalInstance;
 
   const { router, route, navigationInstance, closeBlade, setupPageTracking } = useBladeNavigationSingleton();
   const { parseUrl, getURLQuery, routes: routerRoutes } = utils(router);
-  const mainRoute = routerRoutes.find((r) => r.meta?.root)!;
+  const mainRoute = routerRoutes.find((r) => r.meta?.root);
+  if (!mainRoute) {
+    throw new Error("Main route not found");
+  }
 
   async function openWorkspace<Blade extends Component>(
     { blade, param, options }: IBladeEvent<Blade>,
@@ -312,11 +322,12 @@ export function useBladeNavigation(): IUseBladeNavigation {
 
       if (!isPrevented && createdComponent.type?.url) {
         if (hasAccess(blade.permissions)) {
-          // If the blade is the same as the one we want to open, do nothing. It prevents the loose of the instance state
-          if (navigationInstance.blades.value.length > 0) {
-            if (navigationInstance.blades.value[0].type.url === createdComponent.type.url) {
-              return;
-            }
+          if (
+            hasAccess(blade.permissions) &&
+            navigationInstance.blades.value.length > 0 &&
+            navigationInstance.blades.value[0].type.url === createdComponent.type.url
+          ) {
+            return;
           }
           navigationInstance.blades.value = [createdComponent];
           // Find the route with the matching URL and update the components.default property with the new component
@@ -324,15 +335,21 @@ export function useBladeNavigation(): IUseBladeNavigation {
           if (wsroute && wsroute.components) {
             wsroute.components.default = createdComponent;
           }
-          return await router.push({ name: wsroute?.name, params: { ...params, ...route.params }, query, replace });
-        } else
+          return await router.push({
+            name: wsroute?.name,
+            params: { ...params, ...route.params },
+            query,
+            replace,
+          });
+        } else {
           notification.error(i18n.global.t("PERMISSION_MESSAGES.ACCESS_RESTRICTED"), {
             timeout: 3000,
           });
+        }
       }
     } catch (e) {
       console.error(e);
-      throw new Error(`Opening workspace '${blade.type.name}' is prevented`);
+      throw new Error(`Opening workspace '${blade?.type?.name || "Unknown"}' is prevented`);
     }
   }
 
@@ -367,7 +384,14 @@ export function useBladeNavigation(): IUseBladeNavigation {
 
       const currentBladeIdx = instanceComponent.props?.navigation?.idx ?? 0;
 
-      const bladeNode = createBladeNode<Blade>({ blade, currentBladeIdx, options, param, onClose, onOpen });
+      const bladeNode = createBladeNode<Blade>({
+        blade,
+        currentBladeIdx,
+        options,
+        param,
+        onClose,
+        onOpen,
+      });
 
       if (!isPrevented) {
         if (hasAccess(blade.permissions)) {
@@ -386,8 +410,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
   }
 
   function findInstanceComponentIndex(instanceComponent: BladeVNode) {
-    return navigationInstance.blades.value /* @ts-expect-error  - findLastIndex is not parsed correctly by ts */
-      .findLastIndex((x) => _.isEqual(x.type, instanceComponent.type));
+    return _.findLastIndex(navigationInstance.blades.value, (x) => _.isEqual(x.type, instanceComponent.type));
   }
 
   function createBladeNode<Blade extends Component>(args: {
@@ -419,7 +442,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
     console.debug(`vc-app#onParentCall({ method: ${args.method} }) called.`);
 
     if (args.method && parentExposedMethods && typeof parentExposedMethods[args.method] === "function") {
-      const method = parentExposedMethods[args.method] as (args: unknown) => Promise<unknown>;
+      const method = parentExposedMethods[args.method];
       const result = await method(args.args);
 
       if (typeof args.callback === "function") {
@@ -436,7 +459,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
     if (!instance) {
       warn("resolveComponentByName can only be used in setup().");
 
-      return null as any; // Return type inferred as any due to the early return
+      return null as unknown as BladeInstanceConstructor;
     }
 
     if (!name) {
@@ -475,7 +498,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
     const params = Object.fromEntries(Object.entries(to.params).filter(([key]) => key !== "pathMatch"));
 
     // Get the raw path of the main route.
-    const parentRawPath = routerRoutes.find((route) => route.name === mainRoute.name)?.path;
+    const parentRawPath = routerRoutes.find((route) => route.name === mainRoute?.name)?.path;
 
     // Determine the parent path based on the parameters.
     const parentPath =
@@ -568,11 +591,12 @@ export function useBladeNavigation(): IUseBladeNavigation {
   }
 
   function setNavigationQuery(query: Record<string, string | number>) {
-    if (instance.vnode.props.navigation.idx === 0) {
+    const typeName = instance.vnode.type.name?.toLowerCase();
+    if (typeName && instance.vnode.props.navigation.idx === 0) {
       // add blade name to query keys
       const namedQuery = _.mapKeys(
         _.mapValues(query, (value) => value?.toString()),
-        (value, key) => instance.vnode.type.name?.toLowerCase() + "_" + key,
+        (value, key) => typeName + "_" + key,
       );
       const cleanQuery = _.omitBy(namedQuery, _.isNil);
 
@@ -585,12 +609,13 @@ export function useBladeNavigation(): IUseBladeNavigation {
   }
 
   function getNavigationQuery() {
-    if (instance.vnode.props.navigation.idx === 0) {
+    const typeName = instance.vnode.type.name?.toLowerCase();
+    if (typeName && instance.vnode.props.navigation.idx === 0) {
       const queryKeys = Array.from(Object.keys(route.query));
-      const bladeQueryKeys = queryKeys.filter((key) => key.startsWith(instance.vnode.type.name?.toLowerCase() ?? ""));
+      const bladeQueryKeys = queryKeys.filter((key) => key.startsWith(typeName));
 
       const namedQuery = _.mapKeys(_.pick(route.query, bladeQueryKeys), (value, key) =>
-        key.replace(instance.vnode.type.name?.toLowerCase() + "_", ""),
+        key.replace(typeName + "_", ""),
       ) as Record<string, string | number>;
 
       const obj: typeof namedQuery = {};

package/shared/components/change-password/change-password.vue

@@ -118,7 +118,7 @@
         <VcHint
           v-for="(err, i) in form.errors"
           :key="i"
-          class="tw-mt-3 !tw-text-[#f14e4e]"
+          class="tw-mt-3 !tw-text-[color:var(--change-password-error-color)]"
         >
           <!-- TODO: stylizing-->
           {{
@@ -219,3 +219,9 @@ function validate() {
   });
 }
 </script>
+
+<style lang="scss">
+:root {
+  --change-password-error-color: var(--base-error-color, var(--danger-500));
+}
+</style>

package/shared/components/common/popup/vc-popup-error.vue

@@ -39,6 +39,6 @@ defineEmits<Emits>();
 
 <style lang="scss">
 :root {
-  --confirm-button-color: #6b7987;
+  --confirm-button-color: var(--secondary-700);
 }
 </style>

package/shared/components/common/popup/vc-popup-warning.vue

@@ -42,6 +42,6 @@ defineEmits<Emits>();
 
 <style lang="scss">
 :root {
-  --confirm-button-color: #6b7987;
+  --confirm-button-color: var(--secondary-700);
 }
 </style>

package/shared/components/index.ts

@@ -8,3 +8,6 @@ export * from "./language-selector";
 export * from "./user-dropdown-button";
 export * from "./notification-dropdown";
 export * from "./notification-template";
+export * from "./app-bar-button";
+export * from "./sidebar";
+export * from "./theme-selector";

package/shared/components/language-selector/language-selector.vue

@@ -1,54 +1,44 @@
 <template>
-  <div
-    v-on-click-outside="
-      () => {
-        isDropActive = false;
-      }
-    "
-    class="tw-relative"
+  <AppBarButtonTemplate
     :title="$t('COMPONENTS.LANGUAGE_SELECTOR.TITLE')"
-    @click.stop="isDropActive = !isDropActive"
+    icon="fas fa-globe"
+    position="bottom-end"
   >
-    <div
-      :class="[
-        {
-          'tw-shadow-[0_-6px_6px_white,1px_1px_22px_rgba(126,142,157,0.2)] [clip-path:inset(0px_-20px_0px_-20px)] tw-bg-white tw-z-[10000]':
-            isDropActive,
-        },
-        'tw-relative tw-h-full tw-flex tw-items-center tw-justify-center tw-w-[var(--app-bar-button-width)] tw-border-l tw-border-solid tw-border-l-[color:var(--app-bar-button-border-color)] tw-cursor-pointer tw-text-[color:var(--app-bar-button-color)] tw-bg-[color:var(--app-bar-button-background-color)]  tw-transition-[color]  tw-duration-200 hover:tw-text-[color:var(--app-bar-button-color-hover)] hover:tw-bg-[color:var(--app-bar-button-background-color-hover)]',
-      ]"
-    >
-      <VcIcon
-        icon="fas fa-globe"
-        size="xl"
-      ></VcIcon>
-    </div>
-    <div
-      v-if="isDropActive"
-      class="tw-absolute tw-right-0 tw-top-[var(--app-bar-height)] tw-bg-white tw-shadow-[0_-6px_6px_white,1px_1px_22px_rgba(126,142,157,0.2)] tw-w-min tw-z-[10000]"
-    >
-      <div
-        v-for="(lang, i) in languageItems"
-        :key="i"
-        class="tw-p-3 tw-text-lg tw-text-black tw-border-l tw-border-solid tw-border-l-[#eef0f2] tw-border-b tw-border-b-[#eef0f2] tw-white tw-cursor-pointer hover:tw-bg-[#eff7fc]"
-        @click="lang.hasOwnProperty('clickHandler') && lang.clickHandler(lang.lang)"
+    <template #dropdown-content="{ opened, toggle }">
+      <Sidebar
+        :is-expanded="$isMobile.value ? opened : false"
+        position="right"
+        render="mobile"
+        @close="toggle"
       >
-        {{ lang.title }}
-      </div>
-    </div>
-  </div>
+        <template #content>
+          <div
+            v-if="opened"
+            class="vc-language-selector__dropdown"
+          >
+            <div
+              v-for="(lang, i) in languageItems"
+              :key="i"
+              class="vc-language-selector__item"
+              @click="lang.hasOwnProperty('clickHandler') && lang.clickHandler(lang.lang)"
+            >
+              {{ lang.title }}
+            </div>
+          </div>
+        </template>
+      </Sidebar>
+    </template>
+  </AppBarButtonTemplate>
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "./../../../ui/components";
-import { ref } from "vue";
-import { vOnClickOutside } from "@vueuse/components";
 import { useI18n } from "vue-i18n";
 import { useLanguages } from "../../../core/composables";
+import { AppBarButtonTemplate } from "./../app-bar-button";
+import { Sidebar } from "./../sidebar";
 
 const { availableLocales, getLocaleMessage } = useI18n({ useScope: "global" });
 const { setLocale } = useLanguages();
-const isDropActive = ref(false);
 
 const languageItems = availableLocales
   .map((locale: string) => ({
@@ -60,3 +50,29 @@ const languageItems = availableLocales
   }))
   .filter((item) => item.title);
 </script>
+
+<style lang="scss">
+:root {
+  --language-selector-bg-color: var(--additional-50);
+  --language-selector-text-color: var(--base-text-color, var(--neutrals-950));
+  --language-selector-border-color: var(--app-bar-divider-color);
+  --language-selector-hover-bg-color: var(--primary-50);
+}
+
+.vc-language-selector {
+  &__dropdown {
+    @apply tw-bg-[color:var(--language-selector-bg-color)] tw-w-full;
+  }
+
+  &__item {
+    @apply tw-p-3 tw-text-sm tw-text-[color:var(--language-selector-text-color)]
+      tw-border-l tw-border-solid tw-border-l-[var(--language-selector-border-color)]
+      tw-border-b tw-border-b-[var(--language-selector-border-color)] tw-w-full tw-cursor-pointer;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: var(--language-selector-hover-bg-color);
+    }
+  }
+}
+</style>

package/shared/components/notification-dropdown/_internal/notification/notification.vue

@@ -43,7 +43,7 @@ const props = defineProps<Props>();
 const emit = defineEmits<Emits>();
 
 const notificationStyle = computed(() => ({
-  color: "#A9BCCD",
+  color: "var(--notification-icon-color)",
   icon: "fas fa-info",
 }));
 
@@ -58,3 +58,9 @@ function notificationTemplateRenderer() {
   );
 }
 </script>
+
+<style lang="scss">
+:root {
+  --notification-icon-color: var(--secondary-600);
+}
+</style>

package/shared/components/notification-dropdown/notification-dropdown.vue

@@ -1,114 +1,90 @@
 <template>
-  <div
-    v-on-click-outside="
-      () => {
-        isDropdownVisible = false;
-      }
-    "
-    class="tw-relative tw-flex tw-items-center tw-h-full"
+  <AppBarButtonTemplate
     :title="$t('COMPONENTS.NOTIFICATION_DROPDOWN.TITLE')"
-    @click.stop="toggleNotificationsDrop"
+    position="bottom-end"
+    @toggle="onOpen"
   >
-    <div
-      :class="[
-        'tw-relative tw-h-full tw-flex tw-items-center tw-justify-center tw-w-[var(--app-bar-button-width)] tw-border-l tw-border-solid tw-border-l-[color:var(--app-bar-button-border-color)] tw-cursor-pointer tw-text-[color:var(--app-bar-button-color)] tw-bg-[color:var(--app-bar-button-background-color)]  tw-transition-[color]  tw-duration-200 hover:tw-text-[color:var(--app-bar-button-color-hover)] hover:tw-bg-[color:var(--app-bar-button-background-color-hover)]',
-        {
-          'tw-shadow-[0_-6px_6px_white,1px_1px_22px_rgba(126,142,157,0.2)] [clip-path:inset(0px_-20px_0px_-20px)] tw-bg-white tw-z-[10001]':
-            isDropdownVisible && !$isMobile.value,
-        },
-      ]"
-    >
-      <VcIcon
-        icon="fas fa-bell"
-        size="xl"
-      ></VcIcon>
-      <div
-        :class="{
-          'tw-block tw-absolute tw-right-[12px] tw-top-[18px] tw-w-[7px] tw-h-[7px] tw-bg-[#ff4a4a] tw-rounded-full tw-z-[1]':
-            isAccent,
-        }"
-      ></div>
-    </div>
-    <div
-      v-if="$isMobile.value && isDropdownVisible"
-      class="tw-fixed tw-left-0 tw-top-0 tw-right-0 tw-bottom-0 tw-z-[10000] tw-bg-[#808c99] tw-opacity-60"
-      @click.stop="toggleNotificationsDrop"
-    ></div>
-    <div
-      v-if="isDropdownVisible"
-      class="tw-absolute tw-top-[var(--app-bar-height)] tw-z-[10000] tw-drop-shadow-[0px_4px_15px_rgba(43,67,84,0.15)] tw-bg-white tw-rounded-b-[6px] tw-w-[439px] tw-max-h-[350px] tw-min-h-[50px] tw-right-0 tw-overflow-hidden tw-flex tw-flex-col"
-      :class="{
-        'tw-hidden !tw-fixed !tw-right-0 !tw-top-0 !tw-max-h-full !tw-max-w-[300px] !tw-w-full !tw-bottom-0 !tw-z-[10000] !tw-border-0':
-          $isMobile.value,
-        '!tw-flex': $isMobile.value && isDropdownVisible,
-      }"
-    >
-      <div
-        v-if="$isMobile.value"
-        class="tw-text-[#319ed4] tw-flex tw-justify-end tw-items-center tw-p-4 tw-cursor-pointer"
-      >
+    <template #button>
+      <div class="vc-notification-dropdown__button">
         <VcIcon
-          icon="fas fa-times"
+          icon="fas fa-bell"
           size="xl"
-          @click.stop="isDropdownVisible = false"
         ></VcIcon>
+        <div
+          :class="{
+            'vc-notification-dropdown__accent': isAccent,
+          }"
+        ></div>
       </div>
-      <VcContainer
-        :no-padding="true"
-        @click.stop
+    </template>
+
+    <template #dropdown-content="{ opened, toggle }">
+      <Sidebar
+        :is-expanded="$isMobile.value ? opened : false"
+        position="right"
+        render="mobile"
+        @close="toggle"
       >
-        <VcCol v-if="notifications && notifications.length">
+        <template #content>
           <div
-            v-for="item in notifications"
-            :key="`notification_${item.id}`"
-            class="tw-py-[18px] tw-px-[15px] tw-border-b tw-border-solid tw-border-b-[#e3e7ec] tw-cursor-pointer last-of-type:tw-border-b-0"
+            v-if="opened"
+            :class="[
+              'vc-notification-dropdown__dropdown',
+              { 'vc-notification-dropdown__dropdown--mobile': $isMobile.value },
+            ]"
           >
-            <NotificationItem
-              :notification="item"
-              :templates="notificationTemplates || []"
-              @on-click="() => (isDropdownVisible = false)"
-            />
+            <VcContainer
+              :no-padding="true"
+              @click.stop
+            >
+              <VcCol v-if="notifications && notifications.length">
+                <div
+                  v-for="item in notifications"
+                  :key="`notification_${item.id}`"
+                  class="vc-notification-dropdown__item"
+                >
+                  <NotificationItem
+                    :notification="item"
+                    :templates="notificationTemplates || []"
+                    @on-click="toggle"
+                  />
+                </div>
+              </VcCol>
+              <div
+                v-else
+                class="vc-notification-dropdown__empty"
+              >
+                {{ t("COMPONENTS.NOTIFICATION_DROPDOWN.EMPTY") }}
+              </div>
+            </VcContainer>
           </div>
-        </VcCol>
-        <div
-          v-else
-          class="tw-flex tw-justify-center tw-items-center tw-p-4"
-        >
-          {{ t("COMPONENTS.NOTIFICATION_DROPDOWN.EMPTY") }}
-        </div>
-      </VcContainer>
-    </div>
-  </div>
+        </template>
+      </Sidebar>
+    </template>
+  </AppBarButtonTemplate>
 </template>
 
 <script lang="ts" setup>
-import { ref, inject, computed } from "vue";
+import { inject, computed } from "vue";
 import NotificationItem from "./_internal/notification/notification.vue";
 import { VcCol, VcContainer, VcIcon } from "../../../ui/components";
-import { vOnClickOutside } from "@vueuse/components";
 import { useI18n } from "vue-i18n";
 import { NotificationTemplateConstructor } from "../../../core/types";
 import { useNotifications } from "../../../core/composables";
+import { AppBarButtonTemplate } from "./../app-bar-button";
+import { Sidebar } from "./../sidebar";
 
 const notificationTemplates = inject<NotificationTemplateConstructor[]>("notificationTemplates");
 
 const { t } = useI18n({ useScope: "global" });
 const { notifications, markAllAsRead } = useNotifications();
 
-const isDropdownVisible = ref(false);
-
 const isAccent = computed(() => {
   return notifications.value.some((item) => item.isNew);
 });
 
-function toggleNotificationsDrop() {
-  isDropdownVisible.value = !isDropdownVisible.value;
-
-  onOpen();
-}
-
-function onOpen() {
-  if (notifications.value.some((x) => x.isNew)) {
+function onOpen(state: boolean) {
+  if (state && notifications.value.some((x) => x.isNew)) {
     markAllAsRead();
   }
 }
@@ -116,6 +92,43 @@ function onOpen() {
 
 <style lang="scss">
 :root {
-  --notification-color-error: #f14e4e;
+  --notification-dropdown-border-color: var(--additional-50);
+  --notification-dropdown-bg-color: var(--additional-50);
+  --notification-dropdown-accent-color: var(--danger-500);
+  --notification-dropdown-button-width: var(--app-bar-button-width);
+}
+
+.vc-notification-dropdown {
+  &__accent {
+    @apply tw-block tw-absolute tw-right-[12px] tw-top-[18px] tw-w-[7px] tw-h-[7px] tw-bg-[--notification-dropdown-accent-color] tw-rounded-full tw-z-[1];
+  }
+
+  &__dropdown {
+    @apply tw-bg-[--notification-dropdown-bg-color] tw-rounded-b-[6px] tw-w-[439px]
+      tw-max-h-[350px] tw-min-h-[50px] tw-overflow-hidden tw-flex tw-flex-col;
+
+    &--mobile {
+      @apply tw-max-h-full tw-w-full;
+      display: flex !important;
+    }
+  }
+
+  &__button {
+    @apply tw-w-[var(--notification-dropdown-button-width)] tw-h-full tw-flex tw-items-center tw-justify-center tw-relative;
+  }
+
+  &__item {
+    @apply tw-py-[18px] tw-px-[15px] tw-border-b tw-border-solid
+      tw-border-b-[var(--notification-dropdown-border-color)] tw-cursor-pointer;
+    transition: background-color 0.2s;
+
+    &:last-of-type {
+      @apply tw-border-b-0;
+    }
+  }
+
+  &__empty {
+    @apply tw-flex tw-justify-center tw-items-center tw-p-4 tw-text-sm;
+  }
 }
 </style>