@morscherlab/mint-sdk 1.2.0-beta.2 → 1.2.0-beta.3

package/src/components/AppTopBar.vue

@@ -1,474 +0,0 @@
-<script setup lang="ts">
-/** Full application top bar with brand logo, page selector or plugin switcher, centered pill nav, experiment popover, and avatar menu. */
-import { ref, computed, inject, defineAsyncComponent } from 'vue'
-import type {
-  PillNavOption,
-  TopBarSettingsConfig,
-  TopBarVariant,
-  PillNavItem,
-  PillNavItemInput,
-  PageSelectorItem,
-  PageSelectorItemInput,
-  PluginSwitcherInfo,
-  PluginSwitcherPlugin,
-  AccountMenuItem,
-  SettingsTab,
-} from '../types/components'
-import { normalizeItemInput } from '../utils/items'
-import ThemeToggle from './ThemeToggle.vue'
-import AppTopBarPageSelectorInternal from './internal/AppTopBarPageSelectorInternal.vue'
-import AppTopBarPillNavInternal from './internal/AppTopBarPillNavInternal.vue'
-import AppAvatarMenu from './AppAvatarMenu.vue'
-import AppPluginSwitcher from './AppPluginSwitcher.vue'
-import PluginIcon from './PluginIcon.vue'
-import RuntimeUpdateNotice from './RuntimeUpdateNotice.vue'
-import { usePlatformContext } from '../composables/usePlatformContext'
-import { usePresenceHeartbeat } from '../composables/usePresenceHeartbeat'
-import {
-  getInjectedFrontendRevision,
-  useRuntimeAlignment,
-} from '../composables/useRuntimeAlignment'
-import { APP_EXPERIMENT_KEY } from '../composables/useAppExperiment'
-import {
-  currentItemIdFromLocation,
-  pluginNavItemToPageSelectorItem,
-} from './AppTopBar.navigation'
-
-interface Props {
-  /** App or plugin title shown in the left title group when no page selector is present. */
-  title?: string
-  /** Secondary title copy shown under the title in title-group layouts. */
-  subtitle?: string
-  /** Show the default MINT logo when the icon/logo slot is not provided. */
-  showLogo?: boolean
-  /** Top bar visual treatment. */
-  variant?: TopBarVariant
-  /** Home link used by the brand icon. */
-  homePath?: string
-
-  /** Preferred route-level page switch entries for plugin and platform pages. Integrated plugins read platform plugin.nav_items metadata automatically when pageSelector is omitted. */
-  pageSelector?: PageSelectorItemInput[]
-  /** Active id for the preferred page selector. */
-  currentPageSelectorId?: string
-  /** Optional plugin switcher shown in the left navigation position instead of pageSelector. */
-  pluginSwitcher?: PluginSwitcherInfo
-
-  /** Preferred centered navigation for local modes inside the current route. */
-  pillNav?: PillNavItemInput[]
-  /** Active id for the preferred centered pill navigation. */
-  currentPillId?: string
-
-  /** Account dropdown entries. */
-  accountMenu?: AccountMenuItem[]
-  /** Show the notifications icon button. */
-  showNotifications?: boolean
-  /** Draw a notification dot on the notifications icon. */
-  hasNotificationDot?: boolean
-
-  /** Show the theme toggle button. */
-  showThemeToggle?: boolean
-  /** Show the settings button and modal. */
-  showSettings?: boolean
-  /** Built-in SettingsModal configuration. */
-  settingsConfig?: TopBarSettingsConfig
-  /** Show the standalone badge when the plugin is not integrated into the platform. */
-  showStandaloneLabel?: boolean
-  /** Custom standalone badge label. */
-  standaloneLabel?: string
-  /** Show the admin shortcut. */
-  showAdmin?: boolean
-  /** Route used by the admin shortcut. */
-  adminPath?: string
-  /** Account display name. */
-  userName?: string
-  /** Explicit account avatar initial. */
-  userInitial?: string
-  /** Account email shown in the avatar menu. */
-  userEmail?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  showLogo: true,
-  variant: 'card',
-  homePath: '/',
-  showThemeToggle: false,
-  showSettings: false,
-  showStandaloneLabel: true,
-  standaloneLabel: 'Standalone',
-  showAdmin: false,
-  adminPath: '/admin',
-  showNotifications: false,
-  hasNotificationDot: false,
-})
-
-const SettingsModal = defineAsyncComponent(() => import('./SettingsModal.vue'))
-const ExperimentPopover = defineAsyncComponent(() => import('./ExperimentPopover.vue'))
-const ExperimentSelectorModal = defineAsyncComponent(() => import('./ExperimentSelectorModal.vue'))
-
-const emit = defineEmits<{
-  'admin-click': []
-  'page-selector-select': [page: PageSelectorItem]
-  'pill-select': [item: PillNavItem]
-  'pill-option-select': [option: PillNavOption, item: PillNavItem]
-  'plugin-switcher-select': [plugin: PluginSwitcherPlugin]
-  'plugin-switcher-install': []
-  'account-menu-select': [item: AccountMenuItem]
-  'sign-out': []
-  'notifications-click': []
-  'settings-values-change': [data: Record<string, unknown>]
-}>()
-
-const settingsOpen = ref(false)
-const { isIntegrated, plugin } = usePlatformContext()
-const isStandalone = computed(() => !isIntegrated.value)
-const presenceScope = computed(() => plugin.value?.id || plugin.value?.name || '')
-const runtimeAlignment = useRuntimeAlignment({
-  currentRevision: getInjectedFrontendRevision(),
-})
-usePresenceHeartbeat({
-  enabled: isIntegrated,
-  scope: presenceScope,
-  onResponse: runtimeAlignment.observe,
-})
-const appExperiment = inject(APP_EXPERIMENT_KEY, null)
-const canBindExperiment = computed(() => plugin.value?.plugin_type !== 'static')
-
-const pluginIcon = computed(() => {
-  const currentPlugin = plugin.value
-  return currentPlugin?.icon
-    ? { icon: currentPlugin.icon, color: currentPlugin.color }
-    : null
-})
-
-const hasPlatformPageSelector = computed(() =>
-  props.pageSelector === undefined && (plugin.value?.nav_items?.length ?? 0) > 1,
-)
-const hasPageSelector = computed(() => (props.pageSelector?.length ?? 0) > 1 || hasPlatformPageSelector.value)
-const hasPluginSwitcher = computed(() => !!props.pluginSwitcher)
-const hasPillNav = computed(() => !!props.pillNav?.length)
-const hasAccountMenu = computed(() => !!props.accountMenu?.length)
-const hasTitleGroup = computed(
-  () =>
-    !hasPageSelector.value &&
-    !hasPluginSwitcher.value &&
-    !!props.title &&
-    !!props.subtitle
-)
-const hasTitleOnly = computed(
-  () =>
-    !hasPageSelector.value &&
-    !hasPluginSwitcher.value &&
-    !hasTitleGroup.value &&
-    !!props.title,
-)
-const platformPageSelector = computed<PageSelectorItem[]>(() =>
-  hasPlatformPageSelector.value
-    ? plugin.value?.nav_items?.map((item, index) =>
-      pluginNavItemToPageSelectorItem(item, index, {
-        pluginIcon: plugin.value?.icon,
-      })
-    ) ?? []
-    : [],
-)
-const normalizedPageSelector = computed<PageSelectorItem[]>(() =>
-  props.pageSelector !== undefined
-    ? props.pageSelector.map(normalizeItemInput)
-    : platformPageSelector.value,
-)
-const normalizedPillNav = computed<PillNavItemInput[]>(() => props.pillNav ?? [])
-const normalizedSettingsTabs = computed<SettingsTab[]>(() =>
-  props.settingsConfig?.tabs?.map(normalizeItemInput) ?? [],
-)
-const effectiveCurrentPageSelectorId = computed(() =>
-  props.currentPageSelectorId
-    ?? (hasPlatformPageSelector.value
-      ? currentItemIdFromLocation(
-        normalizedPageSelector.value,
-        typeof window === 'undefined' ? undefined : window.location.pathname,
-        plugin.value?.route_prefix,
-      )
-      : undefined)
-    ?? (hasPlatformPageSelector.value ? normalizedPageSelector.value[0]?.id : undefined),
-)
-</script>
-
-<template>
-  <header
-    :class="[
-      'mint-topbar',
-      `mint-topbar--${props.variant}`,
-    ]"
-  >
-    <div class="mint-topbar__container">
-      <!-- Left: brand -->
-      <div class="mint-topbar__brand">
-        <a
-          v-if="homePath && (homePath.startsWith('http') || homePath.startsWith('/'))"
-          :href="homePath"
-          class="mint-topbar-home-link"
-        >
-          <span v-if="isIntegrated || $slots.icon || $slots.logo || pluginIcon || showLogo" class="mint-topbar__identity">
-            <PluginIcon
-              v-if="isIntegrated"
-              class="mint-topbar__plugin-icon"
-              :icon="plugin?.icon"
-              :tone="plugin?.color"
-              size="topbar"
-              variant="solid"
-            />
-            <slot v-else name="icon">
-              <PluginIcon
-                v-if="pluginIcon"
-                class="mint-topbar__plugin-icon"
-                :icon="pluginIcon.icon"
-                :tone="pluginIcon.color"
-                size="topbar"
-                variant="solid"
-              />
-              <slot v-else name="logo">
-                <div v-if="showLogo" class="mint-topbar__logo">
-                  <div class="mint-topbar__logo-icon">
-                    <span class="mint-topbar__logo-text">M</span>
-                  </div>
-                </div>
-              </slot>
-            </slot>
-          </span>
-        </a>
-        <router-link
-          v-else-if="homePath"
-          :to="homePath"
-          class="mint-topbar-home-link"
-        >
-          <span v-if="isIntegrated || $slots.icon || $slots.logo || pluginIcon || showLogo" class="mint-topbar__identity">
-            <PluginIcon
-              v-if="isIntegrated"
-              class="mint-topbar__plugin-icon"
-              :icon="plugin?.icon"
-              :tone="plugin?.color"
-              size="topbar"
-              variant="solid"
-            />
-            <slot v-else name="icon">
-              <PluginIcon
-                v-if="pluginIcon"
-                class="mint-topbar__plugin-icon"
-                :icon="pluginIcon.icon"
-                :tone="pluginIcon.color"
-                size="topbar"
-                variant="solid"
-              />
-              <slot v-else name="logo">
-                <div v-if="showLogo" class="mint-topbar__logo">
-                  <div class="mint-topbar__logo-icon">
-                    <span class="mint-topbar__logo-text">M</span>
-                  </div>
-                </div>
-              </slot>
-            </slot>
-          </span>
-        </router-link>
-        <template v-else>
-          <span v-if="isIntegrated || $slots.icon || $slots.logo || pluginIcon || showLogo" class="mint-topbar__identity">
-            <PluginIcon
-              v-if="isIntegrated"
-              class="mint-topbar__plugin-icon"
-              :icon="plugin?.icon"
-              :tone="plugin?.color"
-              size="topbar"
-              variant="solid"
-            />
-            <slot v-else name="icon">
-              <PluginIcon
-                v-if="pluginIcon"
-                class="mint-topbar__plugin-icon"
-                :icon="pluginIcon.icon"
-                :tone="pluginIcon.color"
-                size="topbar"
-                variant="solid"
-              />
-              <slot v-else name="logo">
-                <div v-if="showLogo" class="mint-topbar__logo">
-                  <div class="mint-topbar__logo-icon">
-                    <span class="mint-topbar__logo-text">M</span>
-                  </div>
-                </div>
-              </slot>
-            </slot>
-          </span>
-        </template>
-      </div>
-
-      <!-- Left: page selector or plugin switcher -->
-      <AppPluginSwitcher
-        v-if="hasPluginSwitcher && pluginSwitcher"
-        :current="pluginSwitcher.current"
-        :plugins="pluginSwitcher.plugins"
-        :install-to="pluginSwitcher.installTo"
-        :install-href="pluginSwitcher.installHref"
-        @select="emit('plugin-switcher-select', $event)"
-        @install-click="emit('plugin-switcher-install')"
-      />
-      <AppTopBarPageSelectorInternal
-        v-else-if="hasPageSelector"
-        :pages="normalizedPageSelector"
-        :current-page-id="effectiveCurrentPageSelectorId"
-        @select="emit('page-selector-select', $event)"
-      >
-        <template v-if="$slots['page-selector-icon']" #icon="slotProps">
-          <slot name="page-selector-icon" v-bind="slotProps" />
-        </template>
-        <template v-if="$slots['page-selector-item-icon']" #item-icon="slotProps">
-          <slot name="page-selector-item-icon" v-bind="slotProps" />
-        </template>
-      </AppTopBarPageSelectorInternal>
-
-      <!-- Left: title -->
-      <div v-if="hasTitleGroup" class="mint-topbar-title-group">
-        <span class="mint-topbar-title">{{ title }}</span>
-        <span class="mint-topbar-subtitle">{{ subtitle }}</span>
-      </div>
-
-      <span v-else-if="hasTitleOnly" class="mint-topbar__title-only">{{ title }}</span>
-
-      <!-- Nav slot (inline, after brand/selector) -->
-      <slot name="nav" />
-
-      <!-- Center: pill nav -->
-      <div v-if="hasPillNav || $slots.center" class="mint-topbar__center">
-        <slot name="center">
-          <AppTopBarPillNavInternal
-            v-if="hasPillNav && pillNav"
-            :items="normalizedPillNav"
-            :current-item-id="currentPillId"
-            @select="emit('pill-select', $event)"
-            @option-select="(option, item) => emit('pill-option-select', option, item)"
-          />
-        </slot>
-      </div>
-
-      <!-- Right section -->
-      <div class="mint-topbar__right">
-        <span v-if="showStandaloneLabel && isStandalone && !appExperiment" class="mint-topbar__standalone-badge">
-          {{ standaloneLabel }}
-        </span>
-
-        <ExperimentPopover
-          v-if="appExperiment && !isStandalone && canBindExperiment"
-          v-bind="appExperiment.popover.value"
-          @select="appExperiment.openModal()"
-          @save="appExperiment.handleSave()"
-          @detach="appExperiment.handleDetach()"
-        />
-
-        <span v-if="appExperiment && isStandalone" class="mint-topbar__standalone-badge">
-          {{ standaloneLabel }}
-        </span>
-
-        <slot name="actions" />
-
-        <!-- Notifications -->
-        <button
-          v-if="showNotifications"
-          type="button"
-          class="mint-topbar__icon-btn"
-          aria-label="Notifications"
-          @click="emit('notifications-click')"
-        >
-          <svg class="mint-topbar__icon-btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
-            <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
-          </svg>
-          <span v-if="hasNotificationDot" class="mint-topbar__icon-btn-dot" aria-hidden="true" />
-        </button>
-
-        <!-- Theme toggle -->
-        <ThemeToggle v-if="showThemeToggle" size="sm" />
-
-        <!-- Settings -->
-        <button
-          v-if="showSettings"
-          type="button"
-          class="mint-topbar__settings-btn"
-          aria-label="Open settings"
-          @click="settingsOpen = true"
-        >
-          <svg class="mint-topbar__settings-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" /><circle cx="12" cy="12" r="3" />
-          </svg>
-        </button>
-
-        <!-- Admin link -->
-        <router-link
-          v-if="showAdmin"
-          :to="adminPath"
-          class="mint-topbar__admin-btn"
-          aria-label="Admin Dashboard"
-          @click="emit('admin-click')"
-        >
-          <svg class="mint-topbar__admin-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" /><path d="m9 12 2 2 4-4" />
-          </svg>
-        </router-link>
-
-        <!-- Account menu -->
-        <AppAvatarMenu
-          v-if="hasAccountMenu || $slots['account-menu-items']"
-          :user-name="userName"
-          :user-initial="userInitial"
-          :user-email="userEmail"
-          :items="accountMenu"
-          @select="emit('account-menu-select', $event)"
-          @sign-out="emit('sign-out')"
-        >
-          <template v-if="$slots['account-menu-items']" #items="slotProps">
-            <slot name="account-menu-items" v-bind="slotProps" />
-          </template>
-          <template v-if="$slots['account-menu-item-icon']" #item-icon="slotProps">
-            <slot name="account-menu-item-icon" v-bind="slotProps" />
-          </template>
-        </AppAvatarMenu>
-      </div>
-    </div>
-  </header>
-
-  <RuntimeUpdateNotice
-    :visible="runtimeAlignment.updateAvailable.value"
-    @reload="runtimeAlignment.reload"
-  />
-
-  <SettingsModal
-    v-if="showSettings && settingsOpen"
-    v-model="settingsOpen"
-    :title="settingsConfig?.title"
-    :tabs="normalizedSettingsTabs"
-    :show-appearance="settingsConfig?.showAppearance ?? true"
-    :size="settingsConfig?.size"
-    :layout="settingsConfig?.layout"
-    :schema="settingsConfig?.schema"
-    :model="settingsConfig?.model"
-    :controls="settingsConfig?.controls"
-    :control-options="settingsConfig?.controlOptions"
-    :values="settingsConfig?.values"
-    :enhancements="settingsConfig?.enhancements"
-    :user-type="settingsConfig?.userType"
-    @update:values="emit('settings-values-change', $event)"
-  >
-    <template v-for="tab in normalizedSettingsTabs" :key="tab.id" #[`tab-${tab.id}`]>
-      <slot :name="`settings-tab-${tab.id}`" />
-    </template>
-    <template #appearance>
-      <slot name="settings-appearance" />
-    </template>
-  </SettingsModal>
-
-  <ExperimentSelectorModal
-    v-if="appExperiment && !isStandalone && canBindExperiment && appExperiment.selectorModal.value.modelValue"
-    v-bind="appExperiment.selectorModal.value"
-    @update:model-value="$event ? appExperiment.openModal() : appExperiment.closeModal()"
-  />
-</template>
-
-<style>
-@import '../styles/components/app-top-bar.css';
-</style>