@vc-shell/framework 1.2.4-beta.8 → 2.0.0-alpha.0

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

@@ -1,123 +0,0 @@
-<template>
-  <div
-    class="sidebar-content"
-    :class="{ 'sidebar-content--no-header': !headerVisible }"
-  >
-    <VcScrollableContainer
-      v-if="!disableMenu"
-      ref="scrollContainer"
-      class="sidebar-content__menu"
-    >
-      <slot
-        name="menu"
-        :expanded="expanded"
-        :on-item-click="handleMenuItemClick"
-      >
-        <VcAppMenu
-          :expanded="expanded"
-          @item:click="handleMenuItemClick"
-        />
-      </slot>
-    </VcScrollableContainer>
-
-    <div class="sidebar-content__footer">
-      <slot
-        name="sidebar-footer"
-        :avatar="avatar"
-        :name="userName"
-        :role="userRole"
-      >
-        <UserDropdownButton
-          v-if="!isEmbedded"
-          :avatar-url="avatar"
-          :name="userName"
-          :role="userRole"
-        />
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { inject, ref, onMounted, nextTick } from "vue";
-import VcAppMenu from "@ui/components/organisms/vc-app/_internal/menu/VcAppMenu.vue";
-import { VcScrollableContainer } from "@ui/components/atoms/vc-scrollable-container";
-import { UserDropdownButton } from "@shared/components/user-dropdown-button";
-import { EmbeddedModeKey } from "@framework/injection-keys";
-import type { MenuItem } from "@core/types";
-
-export interface Props {
-  expanded?: boolean;
-  avatar?: string;
-  userName?: string;
-  userRole?: string;
-  disableMenu?: boolean;
-  headerVisible?: boolean;
-}
-
-withDefaults(defineProps<Props>(), {
-  expanded: true,
-  disableMenu: false,
-  headerVisible: true,
-});
-
-const emit = defineEmits<{
-  (event: "item:click", item: MenuItem): void;
-}>();
-
-defineSlots<{
-  menu?: (props: { expanded: boolean; onItemClick: (item: MenuItem) => void }) => unknown;
-  "sidebar-footer"?: (props: { avatar?: string; name?: string; role?: string }) => unknown;
-}>();
-
-const isEmbedded = inject(EmbeddedModeKey, false);
-
-const scrollContainer = ref<InstanceType<typeof VcScrollableContainer> | null>(null);
-
-onMounted(() => {
-  nextTick(() => scrollContainer.value?.updateScrollState());
-});
-
-const handleMenuItemClick = (item: MenuItem) => {
-  emit("item:click", item);
-};
-</script>
-
-<style lang="scss">
-.sidebar-content {
-  @apply tw-flex tw-flex-col;
-  height: calc(100% - var(--app-bar-height));
-
-  &__menu {
-    @apply tw-flex-grow 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;
-    }
-  }
-
-  &__footer {
-    @apply tw-flex-none tw-mt-auto;
-  }
-
-  &--no-header {
-    height: 100%;
-  }
-
-  &:before {
-    content: "";
-    @apply tw-absolute tw-left-0 tw-top-[-1px] tw-w-full tw-h-[1px] tw-z-[1];
-    background-color: var(--app-bar-border);
-  }
-}
-</style>

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

@@ -1,242 +0,0 @@
-<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 && !isMobile"
-          class="sidebar-header__accent sidebar-header__accent--logo"
-        />
-      </div>
-
-      <template v-if="isMobile && showMobileTitle">
-        <p class="sidebar-header__blade-title">
-          {{ mobileTitle }}
-        </p>
-      </template>
-    </div>
-
-    <div
-      v-if="expanded && !isMobile"
-      class="sidebar-header__toolbar"
-    >
-      <button
-        class="sidebar-header__notification-bell"
-        aria-label="Notifications"
-        @click="$emit('toggle-notifications', $event)"
-      >
-        <div class="sidebar-header__notification-bell-wrap">
-          <Transition
-            name="burger-fade"
-            mode="out-in"
-          >
-            <VcIcon
-              v-if="isNotificationsOpen"
-              key="close"
-              icon="lucide-x"
-              size="m"
-            />
-            <VcIcon
-              v-else
-              key="bell"
-              icon="lucide-bell"
-              size="m"
-            />
-          </Transition>
-          <div
-            v-if="hasUnread && !isNotificationsOpen"
-            class="sidebar-header__accent"
-          />
-        </div>
-      </button>
-
-      <div
-        v-if="$slots.actions"
-        class="sidebar-header__actions"
-      >
-        <slot name="actions" />
-      </div>
-
-      <button
-        v-if="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>
-      </button>
-    </div>
-
-    <!-- Mobile actions (rendered outside desktop toolbar) -->
-    <div
-      v-if="isMobile && $slots.actions"
-      class="sidebar-header__actions"
-    >
-      <slot name="actions" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { inject, ref } from "vue";
-import { VcIcon } from "@ui/components/atoms/vc-icon";
-import { ShellIndicatorsKey } from "@framework/injection-keys";
-
-export interface Props {
-  logo?: string;
-  expanded?: boolean;
-  showBurger?: boolean;
-  isMenuOpen?: boolean;
-  isNotificationsOpen?: boolean;
-  isVisible?: boolean;
-  isMobile?: boolean;
-  mobileTitle?: string;
-  showMobileTitle?: boolean;
-}
-
-withDefaults(defineProps<Props>(), {
-  expanded: true,
-  showBurger: false,
-  isMenuOpen: false,
-  isNotificationsOpen: false,
-  isVisible: true,
-  isMobile: false,
-  mobileTitle: "",
-  showMobileTitle: false,
-});
-
-defineEmits<{
-  (e: "logo:click"): void;
-  (e: "toggle-menu", event: MouseEvent): void;
-  (e: "toggle-notifications", 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-0 tw-top-0
-      tw-w-[5px] tw-h-[5px] tw-rounded-full tw-z-[1]
-      tw-bg-[var(--app-bar-accent-color,var(--danger-500))];
-  }
-
-  &__accent--logo {
-    @apply tw-right-[-7px] tw-top-[-5px];
-  }
-
-  &__toolbar {
-    @apply tw-flex tw-items-center tw-gap-3;
-  }
-
-  &__actions {
-    @apply tw-flex tw-items-center;
-  }
-
-  &__blade-title {
-    @apply tw-text-lg tw-font-bold tw-text-[var(--app-bar-header-blade-title)];
-  }
-
-  &__notification-bell {
-    @apply tw-cursor-pointer tw-relative;
-
-    &-wrap {
-      @apply tw-relative;
-    }
-  }
-
-  &__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

@@ -1,222 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { ref, effectScope } from "vue";
-
-// ── Mocks for all service providers ────────────────────────────────
-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 === 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 {
-  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 mobile button", () => {
-    it("registers notifications to mobile-topbar when not embedded", () => {
-      bootstrapInScope(createOptions({ isEmbedded: false }));
-
-      expect(mockRegisterMobileButton).toHaveBeenCalledWith(
-        expect.objectContaining({ id: "notifications", 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);
-    });
-  });
-});

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

@@ -1,101 +0,0 @@
-import { provide, inject, computed } from "vue";
-import { provideAppBarMobileButtonsService } from "@core/composables/useAppBarMobileButtons";
-import { provideGlobalSearch } from "@core/composables/useGlobalSearch";
-import { provideDashboardService } from "@core/composables/useDashboard";
-import {
-  SettingsMenuServiceKey,
-  EmbeddedModeKey,
-  DynamicModulesKey,
-  ShellIndicatorsKey,
-  InternalRoutesKey,
-} from "@framework/injection-keys";
-import { hasUnreadNotifications } from "@core/composables/useNotifications";
-import { NotificationDropdown } from "@shared/components/notification-dropdown";
-import { LanguageSelector } from "@shared/components/language-selector";
-import { ThemeSelector } from "@shared/components/theme-selector";
-import { ChangePasswordButton } from "@shared/components/change-password-button";
-import { LogoutButton } from "@shared/components/logout-button";
-import { provideAiAgentService } from "@core/plugins/ai-agent";
-import type { IAiAgentConfig } from "@core/plugins/ai-agent";
-import type { BladeRoutesRecord } from "@shared/components/blade-navigation/types";
-import type { AppBarButtonContent } from "@core/services/app-bar-mobile-buttons-service";
-import type { RegisterSettingsMenuItemOptions } from "@core/services/settings-menu-service";
-
-export interface ShellBootstrapOptions {
-  isEmbedded: boolean;
-  internalRoutes?: BladeRoutesRecord[];
-  dynamicModules?: typeof window.VcShellDynamicModules;
-  aiAgentConfig?: IAiAgentConfig;
-  aiAgentAddGlobalToolbarButton?: boolean;
-}
-
-export function useShellBootstrap(options: ShellBootstrapOptions) {
-  // 1a. App-level services (created by framework plugin install)
-  const settingsMenuService = inject(SettingsMenuServiceKey)!;
-
-  // 1b. Component-scoped services (created here for VcApp descendants)
-  const mobileButtons = provideAppBarMobileButtonsService();
-  provideGlobalSearch();
-  provideDashboardService();
-
-  // 2. Provide injection keys
-  provide(EmbeddedModeKey, options.isEmbedded);
-  if (options.internalRoutes) {
-    provide(InternalRoutesKey, options.internalRoutes);
-  }
-  if (options.dynamicModules !== undefined) {
-    provide(DynamicModulesKey, options.dynamicModules);
-  }
-
-  // 3. AI agent (conditional)
-  if (options.aiAgentConfig?.url) {
-    provideAiAgentService({
-      config: options.aiAgentConfig,
-      addGlobalToolbarButton: options.aiAgentAddGlobalToolbarButton ?? true,
-    });
-  }
-
-  // 4. Register default shell UI
-  useShellDefaults({
-    isEmbedded: options.isEmbedded,
-    registerMobileButton: mobileButtons.register,
-    registerSettingsMenuItem: settingsMenuService.register,
-  });
-}
-
-// ── Internal: default UI element registration ─────────────────────
-interface ShellDefaultsContext {
-  isEmbedded: boolean;
-  registerMobileButton: (button: AppBarButtonContent) => void;
-  registerSettingsMenuItem: (options: RegisterSettingsMenuItemOptions) => string;
-}
-
-function useShellDefaults(ctx: ShellDefaultsContext) {
-  if (!ctx.isEmbedded) {
-    ctx.registerMobileButton({
-      id: "notifications",
-      component: NotificationDropdown,
-      icon: "lucide-bell",
-      order: 10,
-      isVisible: true,
-      badge: computed(() => hasUnreadNotifications.value),
-    });
-  }
-
-  // Settings menu items
-  ctx.registerSettingsMenuItem({ id: "theme-selector", component: ThemeSelector, group: "preferences", order: 10 });
-  ctx.registerSettingsMenuItem({
-    id: "language-selector",
-    component: LanguageSelector,
-    group: "preferences",
-    order: 20,
-  });
-  ctx.registerSettingsMenuItem({ id: "change-password", component: ChangePasswordButton, group: "account", order: 30 });
-  ctx.registerSettingsMenuItem({ id: "logout", component: LogoutButton, group: "account", order: 100 });
-
-  // Shell indicator state for SidebarHeader
-  provide(
-    ShellIndicatorsKey,
-    computed(() => hasUnreadNotifications.value),
-  );
-}