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

package/ui/components/organisms/vc-app/_internal/sidebar/SidebarHeader.vue

@@ -1,23 +1,23 @@
-<template>
-  <div
-    v-if="isVisible"
-    class="sidebar-header"
-    :class="{
-      'sidebar-header--collapsed': !expanded,
-      'sidebar-header--mobile': isMobile,
-    }"
-  >
+<template>
+  <div
+    v-if="isVisible"
+    class="sidebar-header"
+    :class="{
+      'sidebar-header--collapsed': !expanded,
+      'sidebar-header--mobile': isMobile,
+    }"
+  >
     <div class="sidebar-header__logo-container">
       <div class="sidebar-header__logo">
         <img
-          class="sidebar-header__logo-image"
-          :class="{ 'sidebar-header__logo-image--mobile': isMobile }"
-          alt="logo"
-          :src="logo"
-          @click="$emit('logo:click')"
-        />
-        <div
-          v-if="hasUnread && !expanded"
+          class="sidebar-header__logo-image"
+          :class="{ 'sidebar-header__logo-image--mobile': isMobile }"
+          alt="logo"
+          :src="logo"
+          @click="$emit('logo:click')"
+        />
+        <div
+          v-if="hasUnread && !expanded"
           class="sidebar-header__accent"
         />
       </div>
@@ -28,121 +28,127 @@
         </p>
       </template>
     </div>
-
-    <div
-      v-if="$slots.actions"
-      class="sidebar-header__actions"
-    >
-      <slot name="actions" />
-    </div>
-
-    <Transition
-      name="burger-fade"
-      mode="out-in"
-    >
-      <button
-        v-if="expanded && showBurger"
-        class="sidebar-header__menu-button"
-        @click="$emit('toggle-menu')"
-      >
-        <div class="sidebar-header__menu-button-wrap">
-          <VcIcon
-            :icon="MenuBurgerIcon"
-            size="xs"
-          />
-          <div
-            v-if="hasUnread"
-            class="sidebar-header__accent"
-          />
-        </div>
-      </button>
-    </Transition>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from "vue";
-import { VcIcon } from "../../../../";
-import { MenuBurgerIcon } from "../../../../atoms/vc-icon/icons";
-import { useNotifications } from "../../../../../../core/composables";
-
+
+    <div
+      v-if="$slots.actions"
+      class="sidebar-header__actions"
+    >
+      <slot name="actions" />
+    </div>
+
+    <button
+      v-if="expanded && showBurger"
+      class="sidebar-header__menu-button"
+      @click="$emit('toggle-menu', $event)"
+    >
+      <div class="sidebar-header__menu-button-wrap">
+        <Transition
+          name="burger-fade"
+          mode="out-in"
+        >
+          <VcIcon
+            v-if="isMenuOpen"
+            key="close"
+            icon="lucide-x"
+            size="m"
+          />
+          <VcIcon
+            v-else
+            key="burger"
+            icon="lucide-menu"
+            size="m"
+          />
+        </Transition>
+        <div
+          v-if="hasUnread && !isMenuOpen"
+          class="sidebar-header__accent"
+        />
+      </div>
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { inject, ref } from "vue";
+import { VcIcon } from "@ui/components";
+import { MenuBurgerIcon } from "@ui/components/atoms/vc-icon/icons";
+import { ShellIndicatorsKey } from "@framework/injection-keys";
+
 export interface Props {
   logo?: string;
   expanded?: boolean;
   showBurger?: boolean;
+  isMenuOpen?: boolean;
   isVisible?: boolean;
   isMobile?: boolean;
   mobileTitle?: string;
   showMobileTitle?: boolean;
 }
-
-withDefaults(defineProps<Props>(), {
-  expanded: true,
+
+withDefaults(defineProps<Props>(), {
+  expanded: true,
   showBurger: false,
+  isMenuOpen: false,
   isVisible: true,
   isMobile: false,
   mobileTitle: "",
   showMobileTitle: false,
-});
-
-defineEmits<{
-  (e: "logo:click"): void;
-  (e: "toggle-menu"): void;
-}>();
-
-const { notifications } = useNotifications();
-
-const hasUnread = computed(() => {
-  return notifications.value.some((item) => item.isNew);
-});
-</script>
-
-<style lang="scss">
-:root {
-  --app-bar-header-padding-top: 18px;
-  --app-bar-header-blade-title: var(--neutrals-950);
-  --app-bar-accent-color: var(--danger-500);
-
-  --app-bar-header-actions-button-color: var(--neutrals-500);
-  --app-bar-header-actions-button-active-color: var(--primary-500);
-}
-
-.sidebar-header {
-  @apply tw-flex tw-flex-row tw-items-center tw-justify-between
-    tw-px-[var(--app-bar-padding)] tw-h-[var(--app-bar-height)]
-    tw-py-[var(--app-bar-header-padding-top,18px)];
-
-  &--collapsed {
-    @apply tw-items-center tw-justify-between tw-border-0 tw-gap-[16px];
-  }
-
-  &--mobile {
-    @apply tw-h-[var(--app-bar-mobile-height)] tw-px-[var(--app-bar-padding-mobile)];
-  }
-
-  &__logo {
-    @apply tw-w-auto tw-flex tw-items-center tw-h-full tw-relative;
-
-    &-container {
-      @apply tw-flex tw-flex-row tw-gap-3 tw-items-center;
-    }
-
-    &-image {
-      @apply tw-cursor-pointer tw-max-w-[var(--app-bar-logo-width)] tw-max-h-[var(--app-bar-logo-height)]
-        tw-overflow-hidden tw-w-full tw-shrink-0;
-
-      &--mobile {
-        @apply tw-mx-1 tw-max-w-[var(--app-bar-logo-mobile-width)] tw-max-h-[var(--app-bar-logo-mobile-height)] tw-rounded-full;
-      }
-    }
-  }
-
-  &__accent {
-    @apply tw-block tw-absolute tw-right-[-7px] tw-top-[-5px]
-      tw-w-[5px] tw-h-[5px] tw-rounded-full tw-z-[1]
-      tw-bg-[var(--app-bar-accent-color,var(--danger-500))];
-  }
-
+});
+
+defineEmits<{
+  (e: "logo:click"): void;
+  (e: "toggle-menu", event: MouseEvent): void;
+}>();
+
+const hasUnread = inject(ShellIndicatorsKey, ref(false));
+</script>
+
+<style lang="scss">
+:root {
+  --app-bar-header-padding-top: 18px;
+  --app-bar-header-blade-title: var(--neutrals-950);
+  --app-bar-accent-color: var(--danger-500);
+
+  --app-bar-header-actions-button-color: var(--neutrals-500);
+  --app-bar-header-actions-button-active-color: var(--primary-500);
+}
+
+.sidebar-header {
+  @apply tw-flex tw-flex-row tw-items-center tw-justify-between
+    tw-px-[var(--app-bar-padding)] tw-h-[var(--app-bar-height)]
+    tw-py-[var(--app-bar-header-padding-top,18px)];
+
+  &--collapsed {
+    @apply tw-items-center tw-justify-between tw-border-0 tw-gap-[16px];
+  }
+
+  &--mobile {
+    @apply tw-h-[var(--app-bar-mobile-height)] tw-px-[var(--app-bar-padding-mobile)];
+  }
+
+  &__logo {
+    @apply tw-w-auto tw-flex tw-items-center tw-h-full tw-relative;
+
+    &-container {
+      @apply tw-flex tw-flex-row tw-gap-3 tw-items-center;
+    }
+
+    &-image {
+      @apply tw-cursor-pointer tw-max-w-[var(--app-bar-logo-width)] tw-max-h-[var(--app-bar-logo-height)]
+        tw-overflow-hidden tw-w-full tw-shrink-0;
+
+      &--mobile {
+        @apply tw-mx-1 tw-max-w-[var(--app-bar-logo-mobile-width)] tw-max-h-[var(--app-bar-logo-mobile-height)] tw-rounded-full;
+      }
+    }
+  }
+
+  &__accent {
+    @apply tw-block tw-absolute tw-right-[-7px] tw-top-[-5px]
+      tw-w-[5px] tw-h-[5px] tw-rounded-full tw-z-[1]
+      tw-bg-[var(--app-bar-accent-color,var(--danger-500))];
+  }
+
   &__actions {
     @apply tw-flex tw-items-center;
   }
@@ -150,23 +156,30 @@ const hasUnread = computed(() => {
   &__blade-title {
     @apply tw-text-lg tw-font-bold tw-text-[var(--app-bar-header-blade-title)];
   }
-
-  &__menu-button {
-    @apply tw-cursor-pointer tw-relative;
-
-    &-wrap {
-      @apply tw-relative;
-    }
-  }
-}
-
-.burger-fade-enter-active,
-.burger-fade-leave-active {
-  transition: opacity 0.1s ease;
-}
-
-.burger-fade-enter-from,
-.burger-fade-leave-to {
-  opacity: 0;
-}
-</style>
+
+  &__menu-button {
+    @apply tw-cursor-pointer tw-relative;
+
+    &-wrap {
+      @apply tw-relative;
+    }
+  }
+}
+
+.burger-fade-enter-active,
+.burger-fade-leave-active {
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease;
+}
+
+.burger-fade-enter-from {
+  opacity: 0;
+  transform: rotate(90deg);
+}
+
+.burger-fade-leave-to {
+  opacity: 0;
+  transform: rotate(-90deg);
+}
+</style>

package/ui/components/organisms/vc-app/composables/useShellBootstrap.test.ts

@@ -0,0 +1,233 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { ref, effectScope } from "vue";
+
+// ── Mocks for all service providers ────────────────────────────────
+const mockRegisterWidget = vi.fn();
+const mockRegisterMobileButton = vi.fn();
+const mockRegisterSettingsMenuItem = vi.fn();
+const mockProvide = vi.fn();
+const mockProvideAiAgentService = vi.fn();
+
+vi.mock("vue", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("vue")>();
+  return {
+    ...actual,
+    provide: (...args: unknown[]) => mockProvide(...args),
+    inject: (key: unknown) => {
+      if (key === AppBarWidgetServiceKey) return { register: mockRegisterWidget };
+      if (key === SettingsMenuServiceKey) return { register: mockRegisterSettingsMenuItem };
+      return undefined;
+    },
+    onScopeDispose: actual.onScopeDispose,
+  };
+});
+
+vi.mock("../../../../../core/composables/useAppBarMobileButtons", () => ({
+  provideAppBarMobileButtonsService: () => ({ register: mockRegisterMobileButton }),
+}));
+
+vi.mock("../../../../../core/composables/useGlobalSearch", () => ({
+  provideGlobalSearch: vi.fn(),
+}));
+
+vi.mock("../../../../../core/composables/useDashboard", () => ({
+  provideDashboardService: vi.fn(),
+}));
+
+vi.mock("../../../../../core/composables/useNotifications", () => ({
+  hasUnreadNotifications: ref(false),
+}));
+
+vi.mock("../../../../../shared/components", () => ({
+  NotificationDropdown: { template: "<div />" },
+}));
+
+vi.mock("../../../../../shared/components/language-selector", () => ({
+  LanguageSelector: { template: "<div />" },
+}));
+
+vi.mock("../../../../../shared/components/theme-selector", () => ({
+  ThemeSelector: { template: "<div />" },
+}));
+
+vi.mock("../../../../../shared/components/change-password-button", () => ({
+  ChangePasswordButton: { template: "<div />" },
+}));
+
+vi.mock("../../../../../shared/components/logout-button", () => ({
+  LogoutButton: { template: "<div />" },
+}));
+
+vi.mock("../../../../../core/plugins/ai-agent", () => ({
+  provideAiAgentService: (...args: unknown[]) => mockProvideAiAgentService(...args),
+}));
+
+// ── Import after mocks ─────────────────────────────────────────────
+import { useShellBootstrap, type ShellBootstrapOptions } from "@ui/components/organisms/vc-app/composables/useShellBootstrap";
+import {
+  AppBarWidgetServiceKey,
+  SettingsMenuServiceKey,
+  EmbeddedModeKey,
+  DynamicModulesKey,
+  ShellIndicatorsKey,
+  InternalRoutesKey,
+} from "@framework/injection-keys";
+import { hasUnreadNotifications } from "@core/composables/useNotifications";
+
+// ── Helpers ─────────────────────────────────────────────────────────
+function createOptions(overrides: Partial<ShellBootstrapOptions> = {}): ShellBootstrapOptions {
+  return {
+    isEmbedded: false,
+    ...overrides,
+  };
+}
+
+function bootstrapInScope(options: ShellBootstrapOptions) {
+  const scope = effectScope();
+  scope.run(() => useShellBootstrap(options));
+  return scope;
+}
+
+// ── Tests ───────────────────────────────────────────────────────────
+describe("useShellBootstrap", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    (hasUnreadNotifications as unknown as { value: boolean }).value = false;
+  });
+
+  describe("default notifications widget", () => {
+    it("registers notification-dropdown to app-bar", () => {
+      bootstrapInScope(createOptions());
+
+      expect(mockRegisterWidget).toHaveBeenCalledWith(
+        expect.objectContaining({ id: "notification-dropdown", icon: "lucide-bell", order: 10 }),
+      );
+    });
+
+    it("registers notification-dropdown to mobile-topbar when not embedded", () => {
+      bootstrapInScope(createOptions({ isEmbedded: false }));
+
+      expect(mockRegisterMobileButton).toHaveBeenCalledWith(
+        expect.objectContaining({ id: "notification-dropdown", isVisible: true }),
+      );
+    });
+
+    it("does NOT register mobile button when embedded", () => {
+      bootstrapInScope(createOptions({ isEmbedded: true }));
+
+      expect(mockRegisterMobileButton).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("default settings menu items", () => {
+    it("registers 4 default settings items", () => {
+      bootstrapInScope(createOptions());
+
+      expect(mockRegisterSettingsMenuItem).toHaveBeenCalledTimes(4);
+      const ids = mockRegisterSettingsMenuItem.mock.calls.map((c: unknown[]) => (c[0] as { id: string }).id);
+      expect(ids).toEqual(["theme-selector", "language-selector", "change-password", "logout"]);
+    });
+
+    it("registers items with correct groups", () => {
+      bootstrapInScope(createOptions());
+
+      expect(mockRegisterSettingsMenuItem).toHaveBeenCalledWith(
+        expect.objectContaining({ id: "theme-selector", group: "preferences" }),
+      );
+      expect(mockRegisterSettingsMenuItem).toHaveBeenCalledWith(
+        expect.objectContaining({ id: "logout", group: "account", order: 100 }),
+      );
+    });
+  });
+
+  describe("indicator state (ShellIndicatorsKey)", () => {
+    it("provides false when no unread notifications", () => {
+      bootstrapInScope(createOptions());
+
+      const provideCall = mockProvide.mock.calls.find(
+        ([key]: [unknown]) => key === ShellIndicatorsKey,
+      );
+      expect(provideCall).toBeDefined();
+      expect(provideCall![1].value).toBe(false);
+    });
+
+    it("reacts to hasUnreadNotifications changes", () => {
+      bootstrapInScope(createOptions());
+
+      const provideCall = mockProvide.mock.calls.find(
+        ([key]: [unknown]) => key === ShellIndicatorsKey,
+      );
+      expect(provideCall![1].value).toBe(false);
+
+      (hasUnreadNotifications as unknown as { value: boolean }).value = true;
+      expect(provideCall![1].value).toBe(true);
+    });
+  });
+
+  describe("ai-agent", () => {
+    it("does NOT provide AI agent service when no config", () => {
+      bootstrapInScope(createOptions());
+
+      expect(mockProvideAiAgentService).not.toHaveBeenCalled();
+    });
+
+    it("provides AI agent service when aiAgentConfig has url", () => {
+      bootstrapInScope(
+        createOptions({
+          aiAgentConfig: { url: "https://ai.example.com" } as any,
+          aiAgentAddGlobalToolbarButton: false,
+        }),
+      );
+
+      expect(mockProvideAiAgentService).toHaveBeenCalledWith({
+        config: expect.objectContaining({ url: "https://ai.example.com" }),
+        addGlobalToolbarButton: false,
+      });
+    });
+
+    it("defaults addGlobalToolbarButton to true", () => {
+      bootstrapInScope(
+        createOptions({
+          aiAgentConfig: { url: "https://ai.example.com" } as any,
+        }),
+      );
+
+      expect(mockProvideAiAgentService).toHaveBeenCalledWith(
+        expect.objectContaining({ addGlobalToolbarButton: true }),
+      );
+    });
+  });
+
+  describe("injection keys", () => {
+    it("provides EmbeddedModeKey", () => {
+      bootstrapInScope(createOptions({ isEmbedded: true }));
+
+      expect(mockProvide).toHaveBeenCalledWith(EmbeddedModeKey, true);
+    });
+
+    it("provides DynamicModulesKey when dynamicModules is defined", () => {
+      const modules = { testModule: {} };
+      bootstrapInScope(
+        createOptions({ dynamicModules: modules as unknown as typeof window.VcShellDynamicModules }),
+      );
+
+      expect(mockProvide).toHaveBeenCalledWith(DynamicModulesKey, modules);
+    });
+
+    it("does not provide DynamicModulesKey when dynamicModules is undefined", () => {
+      bootstrapInScope(createOptions());
+
+      const dynamicModulesCall = mockProvide.mock.calls.find(
+        ([key]: [unknown]) => key === DynamicModulesKey,
+      );
+      expect(dynamicModulesCall).toBeUndefined();
+    });
+
+    it("provides internalRoutes when specified", () => {
+      const routes = [{ path: "/test", component: {} }] as unknown as ShellBootstrapOptions["internalRoutes"];
+      bootstrapInScope(createOptions({ internalRoutes: routes }));
+
+      expect(mockProvide).toHaveBeenCalledWith(InternalRoutesKey, routes);
+    });
+  });
+});