@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/components/AppTopBar.vue

@@ -0,0 +1,661 @@
+<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, onMounted, onUnmounted } from 'vue'
+import type {
+  TopBarPage,
+  TopBarTab,
+  TopBarTabOption,
+  TopBarSettingsConfig,
+  TopBarVariant,
+  PillNavItem,
+  PageSelectorItem,
+  PluginSwitcherInfo,
+  PluginSwitcherPlugin,
+  AccountMenuItem,
+} from '../types/components'
+import ThemeToggle from './ThemeToggle.vue'
+import SettingsModal from './SettingsModal.vue'
+import ExperimentPopover from './ExperimentPopover.vue'
+import ExperimentSelectorModal from './ExperimentSelectorModal.vue'
+import AppPageSelector from './AppPageSelector.vue'
+import AppPillNav from './AppPillNav.vue'
+import AppAvatarMenu from './AppAvatarMenu.vue'
+import AppPluginSwitcher from './AppPluginSwitcher.vue'
+import { usePlatformContext } from '../composables/usePlatformContext'
+import { APP_EXPERIMENT_KEY } from '../composables/useAppExperiment'
+
+const SVG_PATH_PREFIX = 'M'
+
+interface Props {
+  // Legacy title & breadcrumb
+  title?: string
+  subtitle?: string
+  showLogo?: boolean
+  variant?: TopBarVariant
+  pluginName?: string
+  pages?: TopBarPage[]
+  currentPageId?: string
+  tabs?: TopBarTab[]
+  currentTabId?: string
+  homePath?: string
+
+  // New layout — left page selector / plugin switcher
+  pageSelector?: PageSelectorItem[]
+  currentPageSelectorId?: string
+  pluginSwitcher?: PluginSwitcherInfo
+
+  // New layout — centered pill nav
+  pillNav?: PillNavItem[]
+  currentPillId?: string
+
+  // New right cluster — avatar menu + optional notifications
+  accountMenu?: AccountMenuItem[]
+  showNotifications?: boolean
+  hasNotificationDot?: boolean
+
+  // Legacy right cluster (still works; AvatarMenu takes precedence over Profile)
+  showThemeToggle?: boolean
+  showSettings?: boolean
+  settingsConfig?: TopBarSettingsConfig
+  showStandaloneLabel?: boolean
+  standaloneLabel?: string
+  showAdmin?: boolean
+  adminPath?: string
+  showProfile?: boolean
+  userName?: string
+  userInitial?: string
+  userEmail?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showLogo: true,
+  variant: 'card',
+  homePath: '/',
+  showThemeToggle: false,
+  showSettings: false,
+  showStandaloneLabel: true,
+  standaloneLabel: 'Standalone',
+  showAdmin: false,
+  adminPath: '/admin',
+  showProfile: false,
+  showNotifications: false,
+  hasNotificationDot: false,
+})
+
+const emit = defineEmits<{
+  'page-select': [page: TopBarPage]
+  'tab-select': [tab: TopBarTab]
+  'tab-option-select': [option: TopBarTabOption, tab: TopBarTab]
+  'profile-click': []
+  'admin-click': []
+  // New
+  'page-selector-select': [page: PageSelectorItem]
+  'pill-select': [item: PillNavItem]
+  'plugin-switcher-select': [plugin: PluginSwitcherPlugin]
+  'plugin-switcher-install': []
+  'account-menu-select': [item: AccountMenuItem]
+  'sign-out': []
+  'notifications-click': []
+}>()
+
+const settingsOpen = ref(false)
+const { isIntegrated, plugin } = usePlatformContext()
+const isStandalone = computed(() => !isIntegrated.value)
+const appExperiment = inject(APP_EXPERIMENT_KEY, null)
+
+const pluginIcon = computed(() => {
+  const icon = plugin.value?.icon
+  return icon && icon.startsWith(SVG_PATH_PREFIX) ? icon : null
+})
+
+const profileInitial = computed(() => {
+  if (props.userInitial) return props.userInitial
+  if (props.userName) return props.userName.charAt(0).toUpperCase()
+  return 'U'
+})
+
+const hasPageSelector = computed(() => !!props.pageSelector?.length)
+const hasPluginSwitcher = computed(() => !!props.pluginSwitcher)
+const hasPillNav = computed(() => !!props.pillNav?.length)
+const hasAccountMenu = computed(() => !!props.accountMenu?.length)
+const hasLegacyBreadcrumb = computed(
+  () => !hasPageSelector.value && !hasPluginSwitcher.value && (!!props.pluginName || !!props.pages?.length),
+)
+const hasTitleGroup = computed(
+  () =>
+    !hasPageSelector.value &&
+    !hasPluginSwitcher.value &&
+    !!props.title &&
+    !!props.subtitle &&
+    !props.pluginName &&
+    !props.pages?.length,
+)
+const hasTitleOnly = computed(
+  () =>
+    !hasPageSelector.value &&
+    !hasPluginSwitcher.value &&
+    !hasTitleGroup.value &&
+    !hasLegacyBreadcrumb.value &&
+    !!props.title,
+)
+
+const showPagesDropdown = ref(false)
+const dropdownRef = ref<HTMLElement | null>(null)
+const openTabDropdown = ref<string | null>(null)
+const tabDropdownRefs = ref<Map<string, HTMLElement>>(new Map())
+
+function togglePagesDropdown() {
+  showPagesDropdown.value = !showPagesDropdown.value
+  openTabDropdown.value = null
+}
+
+function handlePageClick(page: TopBarPage) {
+  if (page.disabled) return
+  emit('page-select', page)
+  showPagesDropdown.value = false
+}
+
+function toggleTabDropdown(tabId: string) {
+  showPagesDropdown.value = false
+  openTabDropdown.value = openTabDropdown.value === tabId ? null : tabId
+}
+
+function handleTabClick(tab: TopBarTab) {
+  if (tab.disabled) return
+  if (tab.children?.length) {
+    toggleTabDropdown(tab.id)
+  } else {
+    emit('tab-select', tab)
+    openTabDropdown.value = null
+  }
+}
+
+function handleTabOptionClick(option: TopBarTabOption, tab: TopBarTab) {
+  if (option.disabled) return
+  emit('tab-option-select', option, tab)
+  openTabDropdown.value = null
+}
+
+function setTabDropdownRef(el: HTMLElement | null, tabId: string) {
+  if (el) {
+    tabDropdownRefs.value.set(tabId, el)
+  } else {
+    tabDropdownRefs.value.delete(tabId)
+  }
+}
+
+function handleClickOutside(event: MouseEvent) {
+  const target = event.target as Node
+
+  if (showPagesDropdown.value && dropdownRef.value && !dropdownRef.value.contains(target)) {
+    showPagesDropdown.value = false
+  }
+
+  if (openTabDropdown.value !== null) {
+    const clickedInside = Array.from(tabDropdownRefs.value.values()).some((el) => el.contains(target))
+    if (!clickedInside) {
+      openTabDropdown.value = null
+    }
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+</script>
+
+<template>
+  <header
+    :class="[
+      'mld-topbar',
+      `mld-topbar--${props.variant}`,
+    ]"
+  >
+    <div class="mld-topbar__container">
+      <!-- Left: brand -->
+      <div class="mld-topbar__brand">
+        <a
+          v-if="homePath && (homePath.startsWith('http') || homePath.startsWith('/'))"
+          :href="homePath"
+          class="mld-topbar-home-link"
+        >
+          <slot name="icon">
+            <div v-if="pluginIcon" class="mld-topbar__logo">
+              <div class="mld-topbar__logo-icon">
+                <svg class="mld-topbar__logo-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path :d="pluginIcon" />
+                </svg>
+              </div>
+            </div>
+            <slot v-else name="logo">
+              <div v-if="showLogo" class="mld-topbar__logo">
+                <div class="mld-topbar__logo-icon">
+                  <span class="mld-topbar__logo-text">M</span>
+                </div>
+              </div>
+            </slot>
+          </slot>
+        </a>
+        <router-link
+          v-else-if="homePath"
+          :to="homePath"
+          class="mld-topbar-home-link"
+        >
+          <slot name="icon">
+            <div v-if="pluginIcon" class="mld-topbar__logo">
+              <div class="mld-topbar__logo-icon">
+                <svg class="mld-topbar__logo-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path :d="pluginIcon" />
+                </svg>
+              </div>
+            </div>
+            <slot v-else name="logo">
+              <div v-if="showLogo" class="mld-topbar__logo">
+                <div class="mld-topbar__logo-icon">
+                  <span class="mld-topbar__logo-text">M</span>
+                </div>
+              </div>
+            </slot>
+          </slot>
+        </router-link>
+        <template v-else>
+          <slot name="icon">
+            <div v-if="pluginIcon" class="mld-topbar__logo">
+              <div class="mld-topbar__logo-icon">
+                <svg class="mld-topbar__logo-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path :d="pluginIcon" />
+                </svg>
+              </div>
+            </div>
+            <slot v-else name="logo">
+              <div v-if="showLogo" class="mld-topbar__logo">
+                <div class="mld-topbar__logo-icon">
+                  <span class="mld-topbar__logo-text">M</span>
+                </div>
+              </div>
+            </slot>
+          </slot>
+        </template>
+      </div>
+
+      <!-- Left: page selector or plugin switcher (new) -->
+      <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')"
+      />
+      <AppPageSelector
+        v-else-if="hasPageSelector && pageSelector"
+        :pages="pageSelector"
+        :current-page-id="currentPageSelectorId"
+        @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>
+      </AppPageSelector>
+
+      <!-- Left: legacy title / breadcrumb (backward compat) -->
+      <div v-if="hasTitleGroup" class="mld-topbar-title-group">
+        <span class="mld-topbar-title">{{ title }}</span>
+        <span class="mld-topbar-subtitle">{{ subtitle }}</span>
+      </div>
+
+      <div v-else-if="hasLegacyBreadcrumb" ref="dropdownRef" class="mld-topbar-breadcrumb">
+        <button
+          v-if="pages?.length"
+          type="button"
+          class="mld-topbar-plugin-name"
+          @click.stop="togglePagesDropdown"
+        >
+          {{ pluginName }}
+          <svg
+            class="mld-topbar-chevron"
+            :class="{ 'mld-topbar-chevron--open': showPagesDropdown }"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="m6 9 6 6 6-6" />
+          </svg>
+        </button>
+        <span v-else class="mld-topbar-plugin-name--static">{{ pluginName }}</span>
+
+        <svg
+          v-if="title"
+          class="mld-topbar-separator"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="m9 18 6-6-6-6" />
+        </svg>
+        <span v-if="title" class="mld-topbar-current-page">{{ title }}</span>
+
+        <div v-show="showPagesDropdown" class="mld-topbar-dropdown">
+          <template v-for="page in pages" :key="page.id">
+            <a
+              v-if="page.href"
+              :href="page.href"
+              :class="['mld-topbar-dropdown-item', { 'mld-topbar-dropdown-item--active': page.id === currentPageId, 'mld-topbar-dropdown-item--disabled': page.disabled }]"
+              @click="showPagesDropdown = false"
+            >
+              <span class="mld-topbar-dropdown-item__label">{{ page.label }}</span>
+              <span v-if="page.description" class="mld-topbar-dropdown-item__description">{{ page.description }}</span>
+            </a>
+            <router-link
+              v-else-if="page.to"
+              :to="page.to"
+              :class="['mld-topbar-dropdown-item', { 'mld-topbar-dropdown-item--active': page.id === currentPageId, 'mld-topbar-dropdown-item--disabled': page.disabled }]"
+              @click="showPagesDropdown = false"
+            >
+              <span class="mld-topbar-dropdown-item__label">{{ page.label }}</span>
+              <span v-if="page.description" class="mld-topbar-dropdown-item__description">{{ page.description }}</span>
+            </router-link>
+            <button
+              v-else
+              type="button"
+              :class="['mld-topbar-dropdown-item', { 'mld-topbar-dropdown-item--active': page.id === currentPageId, 'mld-topbar-dropdown-item--disabled': page.disabled }]"
+              @click="handlePageClick(page)"
+            >
+              <span class="mld-topbar-dropdown-item__label">{{ page.label }}</span>
+              <span v-if="page.description" class="mld-topbar-dropdown-item__description">{{ page.description }}</span>
+            </button>
+          </template>
+        </div>
+      </div>
+
+      <span v-else-if="hasTitleOnly" class="mld-topbar__title-only">{{ title }}</span>
+
+      <!-- Nav slot (inline, after brand/selector) -->
+      <slot name="nav" />
+
+      <!-- Center: pill nav (new) -->
+      <div v-if="hasPillNav || $slots.center" class="mld-topbar__center">
+        <slot name="center">
+          <AppPillNav
+            v-if="hasPillNav && pillNav"
+            :items="pillNav"
+            :current-item-id="currentPillId"
+            @select="emit('pill-select', $event)"
+          />
+        </slot>
+      </div>
+
+      <!-- Center: legacy tabs (when no pillNav) — wrapped in the same centered
+           container as AppPillNav so legacy :tabs consumers get centered pill
+           layout without migrating to :pill-nav. -->
+      <div v-if="!hasPillNav && tabs?.length" class="mld-topbar__center">
+        <div class="mld-topbar__tabs">
+          <template v-for="tab in tabs" :key="tab.id">
+          <div
+            :ref="(el) => tab.children?.length ? setTabDropdownRef(el as HTMLElement, tab.id) : null"
+            class="mld-topbar-tab-wrapper"
+          >
+            <button
+              v-if="tab.children?.length"
+              type="button"
+              :class="[
+                'mld-topbar-tab',
+                { 'mld-topbar-tab--active': tab.id === currentTabId || tab.children.some(c => c.id === currentTabId) },
+                { 'mld-topbar-tab--disabled': tab.disabled }
+              ]"
+              @click.stop="handleTabClick(tab)"
+            >
+              {{ tab.label }}
+              <svg
+                class="mld-topbar-tab-chevron"
+                :class="{ 'mld-topbar-tab-chevron--open': openTabDropdown === tab.id }"
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="m6 9 6 6 6-6" />
+              </svg>
+            </button>
+
+            <a
+              v-else-if="tab.href"
+              :href="tab.href"
+              :class="[
+                'mld-topbar-tab',
+                { 'mld-topbar-tab--active': tab.id === currentTabId },
+                { 'mld-topbar-tab--disabled': tab.disabled }
+              ]"
+            >
+              {{ tab.label }}
+            </a>
+            <router-link
+              v-else-if="tab.to"
+              :to="tab.to"
+              :class="[
+                'mld-topbar-tab',
+                { 'mld-topbar-tab--active': tab.id === currentTabId },
+                { 'mld-topbar-tab--disabled': tab.disabled }
+              ]"
+            >
+              {{ tab.label }}
+            </router-link>
+            <button
+              v-else
+              type="button"
+              :class="[
+                'mld-topbar-tab',
+                { 'mld-topbar-tab--active': tab.id === currentTabId },
+                { 'mld-topbar-tab--disabled': tab.disabled }
+              ]"
+              @click="handleTabClick(tab)"
+            >
+              {{ tab.label }}
+            </button>
+
+            <div v-if="tab.children?.length" v-show="openTabDropdown === tab.id" class="mld-topbar-tab-dropdown">
+              <template v-for="option in tab.children" :key="option.id">
+                <a
+                  v-if="option.href"
+                  :href="option.href"
+                  :class="[
+                    'mld-topbar-dropdown-item',
+                    { 'mld-topbar-dropdown-item--active': option.id === currentTabId },
+                    { 'mld-topbar-dropdown-item--disabled': option.disabled }
+                  ]"
+                  @click="openTabDropdown = null"
+                >
+                  <span class="mld-topbar-dropdown-item__label">{{ option.label }}</span>
+                  <span v-if="option.description" class="mld-topbar-dropdown-item__description">{{ option.description }}</span>
+                </a>
+                <router-link
+                  v-else-if="option.to"
+                  :to="option.to"
+                  :class="[
+                    'mld-topbar-dropdown-item',
+                    { 'mld-topbar-dropdown-item--active': option.id === currentTabId },
+                    { 'mld-topbar-dropdown-item--disabled': option.disabled }
+                  ]"
+                  @click="openTabDropdown = null"
+                >
+                  <span class="mld-topbar-dropdown-item__label">{{ option.label }}</span>
+                  <span v-if="option.description" class="mld-topbar-dropdown-item__description">{{ option.description }}</span>
+                </router-link>
+                <button
+                  v-else
+                  type="button"
+                  :class="[
+                    'mld-topbar-dropdown-item',
+                    { 'mld-topbar-dropdown-item--active': option.id === currentTabId },
+                    { 'mld-topbar-dropdown-item--disabled': option.disabled }
+                  ]"
+                  @click="handleTabOptionClick(option, tab)"
+                >
+                  <span class="mld-topbar-dropdown-item__label">{{ option.label }}</span>
+                  <span v-if="option.description" class="mld-topbar-dropdown-item__description">{{ option.description }}</span>
+                </button>
+              </template>
+            </div>
+          </div>
+        </template>
+        </div>
+      </div>
+
+      <!-- Right section -->
+      <div class="mld-topbar__right">
+        <span v-if="showStandaloneLabel && isStandalone && !appExperiment" class="mld-topbar__standalone-badge">
+          {{ standaloneLabel }}
+        </span>
+
+        <ExperimentPopover
+          v-if="appExperiment && !isStandalone"
+          :experiment-name="appExperiment.experimentName.value"
+          :experiment-code="appExperiment.experimentCode.value"
+          :experiment-status="appExperiment.experimentStatus.value"
+          :show-save="appExperiment.showSave.value"
+          :show-detach="appExperiment.showDetach.value"
+          :save-disabled="appExperiment.saveDisabled.value"
+          :save-disabled-message="appExperiment.saveDisabledMessage.value"
+          :save-loading="appExperiment.saveLoading.value"
+          :save-success-message="appExperiment.saveSuccessMessage.value"
+          @select="appExperiment.openModal()"
+          @save="appExperiment.handleSave()"
+          @detach="appExperiment.handleDetach()"
+        />
+
+        <span v-if="appExperiment && isStandalone" class="mld-topbar__standalone-badge">
+          {{ standaloneLabel }}
+        </span>
+
+        <slot name="actions" />
+
+        <!-- Notifications (new) -->
+        <button
+          v-if="showNotifications"
+          type="button"
+          class="mld-topbar__icon-btn"
+          aria-label="Notifications"
+          @click="emit('notifications-click')"
+        >
+          <svg class="mld-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="mld-topbar__icon-btn-dot" aria-hidden="true" />
+        </button>
+
+        <!-- Legacy: theme toggle -->
+        <ThemeToggle v-if="showThemeToggle" size="sm" />
+
+        <!-- Legacy: settings gear -->
+        <button
+          v-if="showSettings"
+          type="button"
+          class="mld-topbar__settings-btn"
+          aria-label="Open settings"
+          @click="settingsOpen = true"
+        >
+          <svg class="mld-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>
+
+        <!-- Legacy: admin link -->
+        <router-link
+          v-if="showAdmin"
+          :to="adminPath"
+          class="mld-topbar__admin-btn"
+          aria-label="Admin Dashboard"
+          @click="emit('admin-click')"
+        >
+          <svg class="mld-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>
+
+        <!-- New: avatar menu (takes precedence over legacy profile button) -->
+        <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>
+
+        <!-- Legacy: profile button (only when avatar menu not provided) -->
+        <button
+          v-else-if="showProfile"
+          type="button"
+          class="mld-topbar__profile-btn"
+          aria-label="Edit profile"
+          @click="emit('profile-click')"
+        >
+          <div class="mld-topbar__profile-avatar">
+            {{ profileInitial }}
+          </div>
+          <span v-if="userName" class="mld-topbar__profile-name">{{ userName }}</span>
+        </button>
+      </div>
+    </div>
+  </header>
+
+  <SettingsModal
+    v-if="showSettings"
+    v-model="settingsOpen"
+    :title="settingsConfig?.title"
+    :tabs="settingsConfig?.tabs"
+    :show-appearance="settingsConfig?.showAppearance ?? true"
+    :size="settingsConfig?.size"
+  >
+    <template v-for="tab in (settingsConfig?.tabs ?? [])" :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"
+    :model-value="appExperiment.showModal.value"
+    :current-experiment-id="appExperiment.experimentId.value"
+    @update:model-value="$event ? appExperiment.openModal() : appExperiment.closeModal()"
+    @select="appExperiment.handleSelect($event)"
+    @deselect="appExperiment.handleDetach()"
+  />
+</template>
+
+<style>
+@import '../styles/components/app-top-bar.css';
+</style>