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

package/src/components/AppTopBar.vue

@@ -0,0 +1,474 @@
+<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>