@vc-shell/framework 1.2.4-beta.4 → 1.2.4-beta.5

package/ui/components/organisms/vc-app/_internal/app-bar/components/AppBarMobileActions.vue

@@ -6,6 +6,7 @@
     <div
       v-for="button in getButtons"
       :key="button.id"
+      class="app-bar-mobile-actions__button-wrap"
     >
       <VcButton
         v-if="button.isVisible !== undefined ? button.isVisible : true"
@@ -16,33 +17,39 @@
         icon-size="l"
         @click="handleButtonClick(button)"
       />
+      <span
+        v-if="isBadgeActive(button)"
+        class="app-bar-mobile-actions__badge"
+      />
     </div>
 
-    <Transition name="overlay">
-      <AppBarOverlay
-        v-if="isAnyActionVisible && currentAction?.component"
-        :is-sidebar-mode="props.isSidebarMode"
-        :expanded="props.expanded"
-      >
-        <component
-          :is="currentAction?.component"
-          v-bind="currentAction?.props || {}"
-          v-on-click-outside="[handleClose, { ignore: ['.app-bar-mobile-actions__button'] }]"
-          @close="handleClose()"
-        />
-      </AppBarOverlay>
-    </Transition>
+    <VcSidebar
+      :model-value="isAnyActionVisible && !!currentAction?.component"
+      position="bottom"
+      size="sm"
+      draggable
+      drag-handle
+      :close-button="false"
+      :inset="false"
+      @update:model-value="!$event && handleClose()"
+    >
+      <component
+        :is="currentAction?.component"
+        v-if="currentAction?.component"
+        v-bind="currentAction?.props || {}"
+        @close="handleClose()"
+      />
+    </VcSidebar>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { VcButton } from "@ui/components";
+import { VcButton } from "@ui/components/atoms/vc-button";
 import { useAppBarMobileButtons } from "@core/composables/useAppBarMobileButtons";
-import AppBarOverlay from "@ui/components/organisms/vc-app/_internal/app-bar/components/AppBarOverlay.vue";
+import { VcSidebar } from "@ui/components/organisms/vc-sidebar";
 import { useAppBarMobileActions } from "@ui/components/organisms/vc-app/_internal/app-bar/composables/useAppBarMobileActions";
-import { type MaybeRef, watch } from "vue";
-import { vOnClickOutside } from "@vueuse/components";
-import type { AppBarButtonContent } from "@core/services";
+import { type MaybeRef, toValue, watch } from "vue";
+import type { AppBarButtonContent } from "@core/services/app-bar-mobile-buttons-service";
 import { useRoute } from "vue-router";
 export interface Props {
   isSidebarMode: boolean;
@@ -77,20 +84,20 @@ const handleButtonClick = (button: AppBarButtonContent) => {
   }
 };
 
-const resolveActionToClose = (value?: AppBarButtonContent | Event) => {
+const handleClose = (value?: AppBarButtonContent | Event) => {
   if (value && typeof value === "object" && "id" in value) {
-    return value as AppBarButtonContent;
+    (value as AppBarButtonContent).onClose?.();
+  } else {
+    currentAction.value?.onClose?.();
   }
-
-  return currentAction.value ?? undefined;
-};
-
-const handleClose = (value?: AppBarButtonContent | Event) => {
-  const actionToClose = resolveActionToClose(value);
-  actionToClose?.onClose?.();
   hideAllActions();
 };
 
+function isBadgeActive(button: AppBarButtonContent): boolean {
+  if (button.badge === undefined) return false;
+  return !!toValue(button.badge);
+}
+
 // Hide actions on route change or sidebar mode toggle
 watch([() => route.fullPath, () => props.isSidebarMode], () => {
   hideAllActions();
@@ -101,6 +108,10 @@ watch([() => route.fullPath, () => props.isSidebarMode], () => {
 .app-bar-mobile-actions {
   @apply tw-relative tw-flex tw-flex-row tw-gap-[30px];
 
+  &__button-wrap {
+    @apply tw-relative;
+  }
+
   &__button {
     @apply tw-cursor-pointer tw-text-[var(--app-bar-header-actions-button-color)] #{!important};
 
@@ -108,5 +119,10 @@ watch([() => route.fullPath, () => props.isSidebarMode], () => {
       @apply tw-text-[var(--app-bar-header-actions-button-active-color)] #{!important};
     }
   }
+
+  &__badge {
+    @apply tw-absolute tw-right-0 tw-top-0 tw-w-[5px] tw-h-[5px] tw-rounded-full tw-z-[1] tw-pointer-events-none;
+    background-color: var(--app-bar-accent-color, var(--danger-500));
+  }
 }
 </style>

package/ui/components/organisms/vc-app/_internal/app-bar/components/AppBarOverlay.vue

@@ -1,5 +1,5 @@
 <template>
-  <Teleport v-if="appRootEl" :to="appRootEl" defer>
+  <Teleport v-if="appRootEl" :to="appRootEl">
     <div
       class="app-bar-overlay"
       :class="{

package/ui/components/organisms/vc-app/_internal/app-bar/components/AppBarWidgetsMenu.vue

@@ -62,9 +62,9 @@
 
 <script lang="ts" setup>
 import AppBarWidgetItem from "@ui/components/organisms/vc-app/_internal/app-bar/components/AppBarWidgetItem.vue";
-import { VcIcon } from "@ui/components";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
 import { useAppBarWidget } from "@core/composables";
-import type { AppBarWidget } from "@core/services";
+import type { AppBarWidget } from "@core/services/app-bar-menu-service";
 
 const { items } = useAppBarWidget();
 

package/ui/components/organisms/vc-app/_internal/app-bar/components/AppHubContent.vue

@@ -57,7 +57,7 @@
               >
                 <img
                   v-if="app.iconUrl"
-                  :src="app.iconUrl"
+                  :src="normalizeIconUrl(app.iconUrl)"
                   :alt="app.title || app.id || 'app icon'"
                   class="app-hub-content__item-icon app-hub-content__item-icon--tile"
                 />
@@ -187,12 +187,14 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, toRef, useSlots, watch } from "vue";
+import { computed, nextTick, onBeforeUnmount, ref, toRef, useSlots, watch } from "vue";
 import type { AppDescriptor } from "@core/api/platform";
-import type { AppBarWidget } from "@core/services";
+import type { AppBarWidget } from "@core/services/app-bar-menu-service";
 import { useAppBarWidget } from "@core/composables";
-import { hasUnreadNotifications } from "@core/composables/useNotifications";
-import { VcButton, VcIcon, VcInput, VcScrollableContainer } from "@ui/components";
+import { VcButton } from "@ui/components/atoms/vc-button";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
+import { VcInput } from "@ui/components/molecules/vc-input";
+import { VcScrollableContainer } from "@ui/components/atoms/vc-scrollable-container";
 import { useAppHub } from "@ui/components/organisms/vc-app/_internal/app-bar/composables/useAppHub";
 import { useAppBarWidgets } from "@ui/components/organisms/vc-app/_internal/app-bar/composables/useAppBarWidgets";
 import AppBarWidgetContent from "@ui/components/organisms/vc-app/_internal/app-bar/components/AppBarWidgetContent.vue";
@@ -222,7 +224,7 @@ const appsScrollContainerRef = ref<InstanceType<typeof VcScrollableContainer> |
 const widgetsScrollContainerRef = ref<InstanceType<typeof VcScrollableContainer> | null>(null);
 
 const { items } = useAppBarWidget();
-const { currentWidget, hideAllWidgets, isAnyWidgetVisible, toggleWidget, showWidget } = useAppBarWidgets();
+const { currentWidget, hideAllWidgets, isAnyWidgetVisible, toggleWidget } = useAppBarWidgets();
 
 const PROGRESSIVE_RENDER_THRESHOLD = 120;
 const INITIAL_RENDER_BATCH_SIZE = 120;
@@ -308,17 +310,19 @@ watch(
   { immediate: true },
 );
 
-onMounted(() => {
-  if (!props.mobile && hasUnreadNotifications.value) {
-    showWidget("notifications");
-  }
-});
-
 onBeforeUnmount(() => {
   resolveScrollViewport(appsScrollContainerRef.value)?.removeEventListener("scroll", handleAppsScroll);
   resolveScrollViewport(widgetsScrollContainerRef.value)?.removeEventListener("scroll", handleWidgetsScroll);
 });
 
+function normalizeIconUrl(url: string): string {
+  if (!url || url.startsWith("/") || url.startsWith("http://") || url.startsWith("https://") || url.startsWith("data:")) {
+    return url;
+  }
+
+  return `/${url}`;
+}
+
 function isAppActive(app: AppDescriptor): boolean {
   if (typeof window === "undefined") {
     return false;
@@ -485,7 +489,7 @@ function isBadgeActive(widget: AppBarWidget): boolean {
   min-height: 0;
 
   &--mobile {
-    @apply tw-w-full tw-max-w-full tw-h-auto;
+    @apply tw-w-full tw-max-w-full tw-h-auto tw-overflow-visible;
   }
 
   &__search {
@@ -510,6 +514,17 @@ function isBadgeActive(widget: AppBarWidget): boolean {
         min-height: 0;
       }
 
+      .app-hub-content__section--apps {
+        @apply tw-border-r-0 tw-border-b tw-border-solid;
+        border-color: var(--app-hub-divider-color);
+      }
+
+      // In mobile flex-column layout, widgets-inner must NOT be absolute
+      // (absolute is only for the desktop two-column grid where apps drive row height).
+      .app-hub-content__widgets-inner {
+        @apply tw-relative tw-inset-auto;
+      }
+
       .app-hub-content__section--widgets .app-hub-content__scroll {
         max-height: 220px;
       }

package/ui/components/organisms/vc-app/_internal/app-bar/components/AppHubPopover.vue

@@ -29,7 +29,7 @@
 <script lang="ts" setup>
 import { computed, watch } from "vue";
 import type { AppDescriptor } from "@core/api/platform";
-import { VcDropdownPanel } from "@ui/components";
+import { VcDropdownPanel } from "@ui/components/molecules/vc-dropdown-panel";
 import { useAppBarWidgets } from "@ui/components/organisms/vc-app/_internal/app-bar/composables/useAppBarWidgets";
 import AppHubContent from "@ui/components/organisms/vc-app/_internal/app-bar/components/AppHubContent.vue";
 

package/ui/components/organisms/vc-app/_internal/app-bar/components/MenuSidebar.vue

@@ -45,12 +45,9 @@
         </div>
 
         <template v-if="isMobile">
-          <VcScrollableContainer
-            ref="scrollContainer"
-            class="menu-sidebar__navmenu-container"
-          >
+          <div class="menu-sidebar__navmenu-container">
             <slot name="navmenu" />
-          </VcScrollableContainer>
+          </div>
 
           <div class="menu-sidebar__user">
             <slot name="user-dropdown" />
@@ -67,9 +64,10 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref, watch, nextTick, useSlots, type MaybeRef, type Ref } from "vue";
+import { computed, inject, ref, useSlots, type MaybeRef, type Ref } from "vue";
 import { EmbeddedModeKey, IsDesktopKey } from "@framework/injection-keys";
-import { VcButton, VcScrollableContainer, VcSidebar } from "@ui/components";
+import { VcButton } from "@ui/components/atoms/vc-button";
+import { VcSidebar } from "@ui/components/organisms/vc-sidebar";
 
 const props = defineProps<{
   isOpened: boolean;
@@ -93,19 +91,8 @@ const isMobile = inject<Ref<boolean>>("isMobile", ref(false));
 const isDesktop = inject(IsDesktopKey, ref(false));
 const slots = useSlots();
 
-const scrollContainer = ref<InstanceType<typeof VcScrollableContainer> | null>(null);
 const showHeader = computed(() => !isEmbedded && (isDesktop.value || Boolean(slots.widgets)));
 
-// Recalculate scroll state when sidebar opens
-watch(
-  () => props.isOpened,
-  (opened) => {
-    if (opened) {
-      nextTick(() => scrollContainer.value?.updateScrollState());
-    }
-  },
-);
-
 const wrapperComponent = computed(() => (isMobile.value ? VcSidebar : "div"));
 
 const wrapperProps = computed<Record<string, unknown>>(() => {
@@ -166,20 +153,6 @@ const wrapperProps = computed<Record<string, unknown>>(() => {
 
   &__navmenu-container {
     @apply tw-flex-auto tw-min-h-0;
-
-    .vc-scrollable-container__viewport {
-      padding: 0 var(--app-bar-padding);
-    }
-
-    // Make nested containers transparent — the viewport is the sole scroll viewport
-    .vc-app-menu,
-    .vc-container {
-      @apply tw-h-auto tw-overflow-visible;
-    }
-
-    .vc-container__inner {
-      @apply tw-overflow-visible;
-    }
   }
 
   &__user {

package/ui/components/organisms/vc-app/_internal/app-bar/composables/useAppBarWidgets.ts

@@ -1,4 +1,4 @@
-import { useAppBarWidget } from "@core/composables";
+import { useAppBarWidget } from "@core/composables/useAppBarWidget";
 import { useToggleableContent } from "@ui/components/organisms/vc-app/_internal/app-bar/composables/useToggleableContent";
 import { useAppBarState } from "@ui/components/organisms/vc-app/_internal/app-bar/composables/useAppBarState";
 

package/ui/components/organisms/vc-app/_internal/app-bar/composables/useAppHub.ts

@@ -1,6 +1,7 @@
 import { computed, ref, type Ref } from "vue";
 import type { AppDescriptor } from "@core/api/platform";
-import type { AppBarWidget } from "@core/services";
+import type { AppBarWidget } from "@core/services/app-bar-menu-service";
+import { usePermissions } from "@core/composables/usePermissions";
 
 export interface UseAppHubOptions {
   appsList: Ref<AppDescriptor[]>;
@@ -10,21 +11,24 @@ export interface UseAppHubOptions {
 }
 
 export function useAppHub(options: UseAppHubOptions) {
+  const { hasAccess } = usePermissions();
   const searchQuery = ref<string | null>("");
 
   const normalizedQuery = computed(() => (searchQuery.value ?? "").trim().toLowerCase());
   const hasQuery = computed(() => normalizedQuery.value.length > 0);
 
+  const accessibleApps = computed(() => options.appsList.value.filter((app) => hasAccess(app.permission)));
+
   const filteredApps = computed(() => {
     if (!options.showApplications.value) {
       return [];
     }
 
     if (!hasQuery.value) {
-      return options.appsList.value;
+      return accessibleApps.value;
     }
 
-    return options.appsList.value.filter((app) => {
+    return accessibleApps.value.filter((app) => {
       const haystack = [app.title, app.description, app.id, app.relativeUrl].filter(Boolean).join(" ").toLowerCase();
       return haystack.includes(normalizedQuery.value);
     });

package/ui/components/organisms/vc-app/_internal/layouts/DesktopLayout.vue

@@ -46,9 +46,11 @@
           :expanded="sidebar.isExpanded.value"
           :show-burger="sidebar.isExpanded.value"
           :is-menu-open="sidebar.isMenuOpen.value"
+          :is-notifications-open="isNotificationsOpen"
           class="desktop-layout__header"
           @logo:click="$emit('logo:click')"
           @toggle-menu="handleToggleMenu"
+          @toggle-notifications="handleToggleNotifications"
         />
       </slot>
 
@@ -102,6 +104,15 @@
       />
     </template>
   </AppHubPopover>
+
+  <VcDropdownPanel
+    v-model:show="isNotificationsOpen"
+    :anchor-ref="notificationAnchorRef"
+    placement="right-start"
+    width="320px"
+  >
+    <NotificationDropdown />
+  </VcDropdownPanel>
 </template>
 
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
@@ -116,6 +127,8 @@ import SidebarHeader from "@ui/components/organisms/vc-app/_internal/sidebar/Sid
 import SidebarContent from "@ui/components/organisms/vc-app/_internal/sidebar/SidebarContent.vue";
 import SidebarCollapseButton from "@ui/components/organisms/vc-app/_internal/sidebar/SidebarCollapseButton.vue";
 import AppHubPopover from "@ui/components/organisms/vc-app/_internal/app-bar/components/AppHubPopover.vue";
+import { NotificationDropdown } from "@shared/components/notification-dropdown";
+import { VcDropdownPanel } from "@ui/components/molecules/vc-dropdown-panel";
 
 export interface Props {
   logo?: string;
@@ -151,6 +164,8 @@ const sidebar = useSidebarState();
 const isEmbedded = inject(EmbeddedModeKey, false);
 const route = useRoute();
 const appHubAnchorRef = ref<HTMLElement | null>(null);
+const isNotificationsOpen = ref(false);
+const notificationAnchorRef = ref<HTMLElement | null>(null);
 
 const showHeader = computed(() => !isEmbedded);
 
@@ -160,6 +175,7 @@ watch(
     if (sidebar.isMenuOpen.value) {
       sidebar.closeMenu();
     }
+    isNotificationsOpen.value = false;
   },
 );
 
@@ -173,9 +189,25 @@ const handleToggleMenu = (event: MouseEvent) => {
     return;
   }
 
+  // Close notifications when opening AppHub
+  isNotificationsOpen.value = false;
+
   sidebar.openMenu();
 };
 
+const handleToggleNotifications = (event: MouseEvent) => {
+  if (event.currentTarget instanceof HTMLElement) {
+    notificationAnchorRef.value = event.currentTarget;
+  }
+
+  isNotificationsOpen.value = !isNotificationsOpen.value;
+
+  // Close AppHub when opening notifications
+  if (isNotificationsOpen.value && sidebar.isMenuOpen.value) {
+    sidebar.closeMenu();
+  }
+};
+
 const handleAppHubVisibility = (value: boolean) => {
   if (!value) {
     sidebar.closeMenu();

package/ui/components/organisms/vc-app/_internal/layouts/MobileLayout.test.ts

@@ -0,0 +1,151 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { defineComponent, h, nextTick, ref } from "vue";
+import { mount } from "@vue/test-utils";
+import MobileLayout from "@ui/components/organisms/vc-app/_internal/layouts/MobileLayout.vue";
+
+const sidebarState = {
+  isMenuOpen: ref(false),
+  openMenu: vi.fn(() => {
+    sidebarState.isMenuOpen.value = true;
+  }),
+  closeMenu: vi.fn(() => {
+    sidebarState.isMenuOpen.value = false;
+  }),
+};
+
+const blades = ref([{ props: { navigation: { instance: { title: "Dashboard" } } } }] as unknown[]);
+const currentBladeNavigationData = ref({ instance: { title: "Dashboard" } } as Record<string, unknown>);
+const widgetItems = ref<Record<string, unknown>[]>([]);
+
+vi.mock("@core/composables/useSidebarState", () => ({
+  useSidebarState: () => sidebarState,
+}));
+
+vi.mock("@core/composables", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@core/composables")>();
+
+  return {
+    ...actual,
+    useAppBarWidget: () => ({
+      items: widgetItems,
+    }),
+  };
+});
+
+vi.mock("@shared/components", () => ({
+  useBladeNavigation: () => ({
+    blades,
+    currentBladeNavigationData,
+  }),
+  UserDropdownButton: defineComponent({
+    name: "UserDropdownButton",
+    setup() {
+      return () => h("div", { class: "stub-user-dropdown" });
+    },
+  }),
+}));
+
+const SidebarHeaderStub = defineComponent({
+  name: "SidebarHeader",
+  setup(_, { slots }) {
+    return () => h("div", { class: "stub-sidebar-header" }, slots.actions?.());
+  },
+});
+
+const MenuSidebarStub = defineComponent({
+  name: "MenuSidebar",
+  setup(_, { slots }) {
+    return () => h("div", { class: "stub-menu-sidebar" }, [slots.navmenu?.(), slots["user-dropdown"]?.()]);
+  },
+});
+
+const AppHubContentStub = defineComponent({
+  name: "AppHubContent",
+  setup(_, { slots }) {
+    return () =>
+      h("div", { class: "stub-hub" }, slots.applications?.({ appsList: [], switchApp: vi.fn() }));
+  },
+});
+
+const VcAppMenuStub = defineComponent({
+  name: "VcAppMenu",
+  setup() {
+    return () => h("div", { class: "stub-menu" });
+  },
+});
+
+const VcScrollableContainerStub = defineComponent({
+  name: "VcScrollableContainer",
+  setup(_, { slots }) {
+    return () => h("div", { class: "stub-scroll" }, slots.default?.());
+  },
+});
+
+function mountLayout(props?: Record<string, unknown>) {
+  return mount(MobileLayout, {
+    props,
+    global: {
+      mocks: {
+        $t: (key: string) => key,
+      },
+      stubs: {
+        SidebarHeader: SidebarHeaderStub,
+        AppBarMobileActions: true,
+        MenuSidebar: MenuSidebarStub,
+        AppHubContent: AppHubContentStub,
+        VcAppMenu: VcAppMenuStub,
+        VcScrollableContainer: VcScrollableContainerStub,
+      },
+    },
+  });
+}
+
+describe("MobileLayout", () => {
+  beforeEach(() => {
+    sidebarState.isMenuOpen.value = false;
+    widgetItems.value = [];
+    vi.clearAllMocks();
+  });
+
+  it("renders menu only when hub tab is unavailable", () => {
+    const wrapper = mountLayout({
+      appsList: [],
+    });
+
+    expect(wrapper.find(".mobile-layout__tabs").exists()).toBe(false);
+    expect(wrapper.find(".stub-menu").exists()).toBe(true);
+    expect(wrapper.find(".stub-hub").exists()).toBe(false);
+  });
+
+  it("renders hub only when menu is disabled", () => {
+    const wrapper = mountLayout({
+      disableMenu: true,
+      appsList: [],
+    });
+
+    expect(wrapper.find(".mobile-layout__tabs").exists()).toBe(false);
+    expect(wrapper.find(".stub-menu").exists()).toBe(false);
+    expect(wrapper.find(".stub-hub").exists()).toBe(true);
+  });
+
+  it("shows tabs when hub content exists and resets active tab when sidebar closes", async () => {
+    sidebarState.isMenuOpen.value = true;
+    widgetItems.value = [{ id: "notifications", badge: true }];
+
+    const wrapper = mountLayout({
+      appsList: [],
+    });
+
+    const tabButtons = wrapper.findAll(".mobile-layout__tab");
+    expect(tabButtons).toHaveLength(2);
+    expect(tabButtons[0].classes()).toContain("mobile-layout__tab--active");
+
+    await tabButtons[1].trigger("click");
+    expect(tabButtons[1].classes()).toContain("mobile-layout__tab--active");
+
+    sidebarState.isMenuOpen.value = false;
+    await nextTick();
+
+    expect(tabButtons[0].classes()).toContain("mobile-layout__tab--active");
+  });
+});