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

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

@@ -1,168 +1,185 @@
-<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__accent"
-        />
-      </div>
-
-      <template v-if="isMobile && showMobileTitle">
-        <p class="sidebar-header__blade-title">
-          {{ mobileTitle }}
-        </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', $event)"
-      >
-        <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 { 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;
-  isVisible?: boolean;
-  isMobile?: boolean;
-  mobileTitle?: string;
-  showMobileTitle?: boolean;
-}
-
-withDefaults(defineProps<Props>(), {
-  expanded: true,
-  showBurger: false,
-  isVisible: true,
-  isMobile: false,
-  mobileTitle: "",
-  showMobileTitle: false,
-});
-
+<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__accent"
+        />
+      </div>
+
+      <template v-if="isMobile && showMobileTitle">
+        <p class="sidebar-header__blade-title">
+          {{ mobileTitle }}
+        </p>
+      </template>
+    </div>
+
+    <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,
+  showBurger: false,
+  isMenuOpen: false,
+  isVisible: true,
+  isMobile: false,
+  mobileTitle: "",
+  showMobileTitle: false,
+});
+
 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;
-  }
-
-  &__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>
+
+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;
+  }
+
+  &__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.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.ts

@@ -1,106 +1,114 @@
-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 {
-  AppBarWidgetServiceKey,
-  SettingsMenuServiceKey,
-  EmbeddedModeKey,
-  DynamicModulesKey,
-  ShellIndicatorsKey,
-  InternalRoutesKey,
-} from "@framework/injection-keys";
-import { hasUnreadNotifications } from "@core/composables/useNotifications";
-import { NotificationDropdown } from "@shared/components";
-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";
-import type { registerAppBarWidgetOptions } from "@core/services/app-bar-menu-service";
-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 appBarWidgetService = inject(AppBarWidgetServiceKey)!;
-  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,
-    registerWidget: appBarWidgetService.register,
-    registerMobileButton: mobileButtons.register,
-    registerSettingsMenuItem: settingsMenuService.register,
-  });
-}
-
-// ── Internal: default UI element registration ─────────────────────
-interface ShellDefaultsContext {
-  isEmbedded: boolean;
-  registerWidget: (options: registerAppBarWidgetOptions) => string;
-  registerMobileButton: (button: AppBarButtonContent) => void;
-  registerSettingsMenuItem: (options: RegisterSettingsMenuItemOptions) => string;
-}
-
-function useShellDefaults(ctx: ShellDefaultsContext) {
-  // Notification widget
-  ctx.registerWidget({
-    id: "notification-dropdown",
-    component: NotificationDropdown,
-    icon: "lucide-bell",
-    order: 10,
-    badge: () => hasUnreadNotifications.value,
-  });
-
-  if (!ctx.isEmbedded) {
-    ctx.registerMobileButton({
-      id: "notification-dropdown",
-      component: NotificationDropdown,
-      icon: "lucide-bell",
-      order: 10,
-      isVisible: true,
-    });
-  }
-
-  // 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));
-}
+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 {
+  AppBarWidgetServiceKey,
+  SettingsMenuServiceKey,
+  EmbeddedModeKey,
+  DynamicModulesKey,
+  ShellIndicatorsKey,
+  InternalRoutesKey,
+} from "@framework/injection-keys";
+import { hasUnreadNotifications } from "@core/composables/useNotifications";
+import { NotificationDropdown } from "@shared/components";
+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";
+import type { registerAppBarWidgetOptions } from "@core/services/app-bar-menu-service";
+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 appBarWidgetService = inject(AppBarWidgetServiceKey)!;
+  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,
+    registerWidget: appBarWidgetService.register,
+    registerMobileButton: mobileButtons.register,
+    registerSettingsMenuItem: settingsMenuService.register,
+  });
+}
+
+// ── Internal: default UI element registration ─────────────────────
+interface ShellDefaultsContext {
+  isEmbedded: boolean;
+  registerWidget: (options: registerAppBarWidgetOptions) => string;
+  registerMobileButton: (button: AppBarButtonContent) => void;
+  registerSettingsMenuItem: (options: RegisterSettingsMenuItemOptions) => string;
+}
+
+function useShellDefaults(ctx: ShellDefaultsContext) {
+  // Notification widget
+  ctx.registerWidget({
+    id: "notifications",
+    component: NotificationDropdown,
+    icon: "lucide-bell",
+    order: 10,
+    badge: () => hasUnreadNotifications.value,
+  });
+
+  if (!ctx.isEmbedded) {
+    ctx.registerMobileButton({
+      id: "notifications",
+      component: NotificationDropdown,
+      icon: "lucide-bell",
+      order: 10,
+      isVisible: true,
+    });
+  }
+
+  // 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),
+  );
+}