@morscherlab/mint-sdk 1.3.11 → 1.4.0-beta.10

package/src/components/AppTopBar.story.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import AppTopBar from './AppTopBar.vue'
+import Avatar from './Avatar.vue'
+import PluginIcon from './PluginIcon.vue'
 import { ExperimentProvider } from '../__stories__/experiment-helpers'
+import { providePluginIdentity } from '../composables/pluginIdentity'
+import type { App } from 'vue'
 import type {
   TopBarVariant,
   PillNavItem,
   PageSelectorItem,
-  AccountMenuItem,
   PluginInfo,
 } from '../types'
 
@@ -40,8 +43,6 @@ const samplePageSelector: PageSelectorItem[] = [
   { id: 'admin', label: 'Admin' },
 ]
 
-// Theme is now surfaced as a top-level icon button (show-theme-toggle),
-// not as an account-menu item. Menu holds identity-level actions only.
 const samplePluginPages: PageSelectorItem[] = [
   { id: 'peaks', label: 'Peak integration' },
   { id: 'calibration', label: 'Calibration' },
@@ -51,17 +52,34 @@ const samplePluginPages: PageSelectorItem[] = [
 const samplePlugin: PluginInfo = {
   id: 'lcms-analysis',
   name: 'LC-MS Analysis',
+  display_name: 'LC-MS Analysis',
   version: '2.4.0',
+  plugin_type: 'analysis',
   icon: 'activity',
   color: 'cyan',
   route_prefix: '/lcms',
   api_prefix: '/api/lcms',
+  settings_api: 'platform',
 }
 
-const sampleAccountMenu: AccountMenuItem[] = [
-  { id: 'profile', label: 'Profile' },
-  { id: 'settings', label: 'Settings' },
-]
+const samplePluginWithSubtitle: PluginInfo = {
+  ...samplePlugin,
+  id: 'ms-planner',
+  name: 'ms-planner',
+  display_name: 'MS Planner',
+  subtitle: 'Experiment Scheduler',
+  icon: 'calendar',
+  route_prefix: '/ms-planner',
+  api_prefix: '/api/ms-planner',
+}
+
+// The seed is module state: clear it when the variant unmounts.
+function seedIdentity({ app }: { app: App }) {
+  providePluginIdentity({
+    plugin: { name: 'ms-planner', displayName: 'MS Planner', subtitle: 'Experiment Scheduler', icon: 'calendar' },
+  })
+  app.onUnmount(() => providePluginIdentity({ plugin: { name: '' } }))
+}
 
 </script>
 
@@ -71,37 +89,22 @@ const sampleAccountMenu: AccountMenuItem[] = [
 
     <Variant title="Refresh · Experiments-view layout">
       <!-- Exact layout used by the platform's Experiments and Projects pages:
-           title+subtitle on the left, pill-nav centered, theme-toggle +
-           avatar-with-name on the right. -->
+           title+subtitle on the left, pill-nav centered, theme toggle on
+           the right. The platform renders its account menu in #account. -->
       <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
         <AppTopBar
-          variant="card"
+          :spec="{
+            pills: samplePillNav.slice(1, 3),
+            themeToggle: true,
+            homePath: '',
+            standaloneLabel: false,
+          }"
           title="Experiments"
           subtitle="Manage and track your experiments"
-          :pill-nav="samplePillNav.slice(1, 3)"
-          current-pill-id="experiments"
-          show-theme-toggle
-          show-admin
-          :show-standalone-label="false"
-          :account-menu="sampleAccountMenu"
-          user-name="Estrella"
-          user-initial="ES"
-          user-email="estrella@morscher.lab"
-          home-path=""
+          pill="experiments"
         >
           <template #icon>
-            <div
-              style="width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #F97316 0%, #FB923C 100%);"
-            >
-              <svg
-                style="width: 1.25rem; height: 1.25rem; color: white;"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
-              </svg>
-            </div>
+            <PluginIcon size="topbar" />
           </template>
         </AppTopBar>
       </div>
@@ -110,19 +113,10 @@ const sampleAccountMenu: AccountMenuItem[] = [
     <Variant title="Refresh · Workspace">
       <div style="padding: 2rem; background: var(--bg-primary); min-height: 22rem;">
         <AppTopBar
+          :spec="{ pills: samplePillNav, themeToggle: true, homePath: '' }"
           :page-selector="samplePageSelector"
           current-page-selector-id="workspace"
-          :pill-nav="samplePillNav"
-          current-pill-id="workspace"
-          show-theme-toggle
-          show-admin
-          :account-menu="sampleAccountMenu"
-          user-name="Estrella"
-          user-initial="ES"
-          user-email="estrella@morscher.lab"
-          :show-notifications="true"
-          :has-notification-dot="true"
-          home-path=""
+          pill="workspace"
         />
       </div>
     </Variant>
@@ -131,18 +125,10 @@ const sampleAccountMenu: AccountMenuItem[] = [
       <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
         <ExperimentProvider>
           <AppTopBar
+            :spec="{ pills: samplePillNav, themeToggle: true, homePath: '' }"
             :page-selector="samplePageSelector"
             current-page-selector-id="experiments"
-            :pill-nav="samplePillNav"
-            current-pill-id="experiments"
-            show-theme-toggle
-            show-admin
-            :account-menu="sampleAccountMenu"
-            user-name="Estrella"
-            user-initial="ES"
-            user-email="estrella@morscher.lab"
-            :show-notifications="true"
-            home-path=""
+            pill="experiments"
           />
         </ExperimentProvider>
       </div>
@@ -152,17 +138,10 @@ const sampleAccountMenu: AccountMenuItem[] = [
       <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
         <ExperimentProvider :plugin="samplePlugin">
           <AppTopBar
+            :spec="{ pills: samplePillNav, themeToggle: true, homePath: '' }"
             :page-selector="samplePluginPages"
             current-page-selector-id="peaks"
-            :pill-nav="samplePillNav"
-            current-pill-id="experiments"
-            show-theme-toggle
-            :account-menu="sampleAccountMenu"
-            user-name="Estrella"
-            user-initial="ES"
-            user-email="estrella@morscher.lab"
-            :show-notifications="true"
-            home-path=""
+            pill="experiments"
           />
         </ExperimentProvider>
       </div>
@@ -171,17 +150,10 @@ const sampleAccountMenu: AccountMenuItem[] = [
     <Variant title="Refresh · Admin">
       <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
         <AppTopBar
+          :spec="{ pills: samplePillNav, themeToggle: true, homePath: '' }"
           :page-selector="samplePageSelector"
           current-page-selector-id="admin"
-          :pill-nav="samplePillNav"
-          current-pill-id="admin"
-          show-theme-toggle
-          :account-menu="sampleAccountMenu"
-          user-name="Estrella"
-          user-initial="ES"
-          user-email="estrella@morscher.lab"
-          :show-notifications="true"
-          home-path=""
+          pill="admin"
         />
       </div>
     </Variant>
@@ -190,37 +162,33 @@ const sampleAccountMenu: AccountMenuItem[] = [
       <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
         <ExperimentProvider :preselect="false">
           <AppTopBar
+            :spec="{ pills: samplePillNav, themeToggle: true, homePath: '' }"
             :page-selector="samplePageSelector"
             current-page-selector-id="workspace"
-            :pill-nav="samplePillNav"
-            current-pill-id="workspace"
-            show-theme-toggle
-            :account-menu="sampleAccountMenu"
-            user-name="Estrella"
-            user-initial="ES"
-            user-email="estrella@morscher.lab"
-            :show-notifications="true"
-            home-path=""
+            pill="workspace"
           />
         </ExperimentProvider>
       </div>
     </Variant>
 
-    <Variant title="Refresh · Avatar without username (signed-out / dev)">
-      <!-- When no `user-name` is passed, the trigger collapses to the avatar
-           circle only. Matches platform's dev-mode (auth disabled) state. -->
+    <Variant title="Refresh · Account slot">
+      <!-- The host application renders its account controls in #account. -->
       <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
         <AppTopBar
-          variant="card"
+          :spec="{
+            pills: samplePillNav.slice(1, 3),
+            themeToggle: true,
+            homePath: '',
+            standaloneLabel: false,
+          }"
           title="Experiments"
           subtitle="Manage and track your experiments"
-          :pill-nav="samplePillNav.slice(1, 3)"
-          current-pill-id="experiments"
-          show-theme-toggle
-          :show-standalone-label="false"
-          :account-menu="sampleAccountMenu"
-          home-path=""
-        />
+          pill="experiments"
+        >
+          <template #account>
+            <Avatar name="Estrella" size="sm" />
+          </template>
+        </AppTopBar>
       </div>
     </Variant>
 
@@ -230,12 +198,14 @@ const sampleAccountMenu: AccountMenuItem[] = [
       <template #default="{ state }">
         <div style="padding: 2rem;">
           <AppTopBar
+            :spec="{
+              variant: state.variant,
+              logo: state.showLogo,
+              themeToggle: state.showThemeToggle,
+              homePath: state.homePath,
+            }"
             :title="state.title"
             :subtitle="state.subtitle"
-            :variant="state.variant"
-            :show-logo="state.showLogo"
-            :show-theme-toggle="state.showThemeToggle"
-            :home-path="state.homePath"
           />
         </div>
       </template>
@@ -257,22 +227,34 @@ const sampleAccountMenu: AccountMenuItem[] = [
     <Variant title="Base · Title + Subtitle">
       <div style="padding: 2rem;">
         <AppTopBar
+          :spec="{ themeToggle: true }"
           title="Dose-Response Analysis"
           subtitle="Experiment EXP-2024-001"
-          :show-theme-toggle="true"
         />
       </div>
     </Variant>
 
+    <Variant title="Identity · Integrated with subtitle">
+      <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
+        <ExperimentProvider :plugin="samplePluginWithSubtitle">
+          <AppTopBar :spec="{ pills: samplePillNav, homePath: '' }" pill="workspace" />
+        </ExperimentProvider>
+      </div>
+    </Variant>
+
+    <Variant title="Identity · Standalone seeded" :setup-app="seedIdentity">
+      <div style="padding: 2rem;">
+        <AppTopBar :spec="{ pills: samplePillNav, homePath: '' }" pill="workspace" />
+      </div>
+    </Variant>
+
     <Variant title="Navigation · Page selector">
       <div style="padding: 2rem;">
         <AppTopBar
+          :spec="{ themeToggle: true, homePath: '' }"
           title="Results"
           :page-selector="samplePageSelector"
           current-page-selector-id="plugins"
-          variant="card"
-          :show-theme-toggle="true"
-          home-path=""
         />
       </div>
     </Variant>
@@ -280,11 +262,19 @@ const sampleAccountMenu: AccountMenuItem[] = [
     <Variant title="Navigation · Pill nav">
       <div style="padding: 2rem;">
         <AppTopBar
+          :spec="{ pills: samplePillNav.slice(0, 3), homePath: '' }"
           title="Experiment View"
-          :pill-nav="samplePillNav.slice(0, 3)"
-          current-pill-id="workspace"
-          variant="card"
-          home-path=""
+          pill="workspace"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Navigation · Pill nav overflow (More)">
+      <div style="padding: 2rem; min-height: 14rem;">
+        <AppTopBar
+          :spec="{ pills: ['Queue', 'Calendar', 'Utilization', 'Instruments', 'Reports', 'Settings', 'Logs'], homePath: '' }"
+          title="MS Planner"
+          pill="Reports"
         />
       </div>
     </Variant>
@@ -292,18 +282,16 @@ const sampleAccountMenu: AccountMenuItem[] = [
     <Variant title="Navigation · Pill nav with dropdown and dot">
       <div style="padding: 2rem;">
         <AppTopBar
+          :spec="{ pills: platformPillNav, homePath: '' }"
           title="Projects"
-          :pill-nav="platformPillNav"
-          current-pill-id="projects"
-          variant="card"
-          home-path=""
+          pill="projects"
         />
       </div>
     </Variant>
 
     <Variant title="Base · Minimal (logo only)">
       <div style="padding: 2rem;">
-        <AppTopBar :show-logo="true" home-path="/" />
+        <AppTopBar :spec="{ logo: true, homePath: '/' }" />
       </div>
     </Variant>
 
@@ -311,10 +299,8 @@ const sampleAccountMenu: AccountMenuItem[] = [
       <div style="padding: 2rem;">
         <ExperimentProvider>
           <AppTopBar
+            :spec="{ themeToggle: true, homePath: '' }"
             title="Analysis"
-            variant="card"
-            :show-theme-toggle="true"
-            home-path=""
           />
         </ExperimentProvider>
       </div>