Add indicator circle when new unseen menu items are available (#9220)

## Summary

Adds a little indicator circle when new workflow menu items are added
that the user has not seen

## Changes

- **What**: Adds a hidden setting to track menu items flagged as new
that have been seen

## Screenshots (if applicable)

<img width="164" height="120" alt="image"
src="https://github.com/user-attachments/assets/ac36673d-fbf1-42ff-9a9e-1371eb96115b"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9220-Add-indicator-circle-when-new-unseen-menu-items-are-available-3126d73d3650819cb8cde854d6b6510b)
by [Unito](https://www.unito.io)

src/components/appMode/AppModeToolbar.vue

@@ -43,7 +43,7 @@ function openTemplates() {
 <template>
   <div class="flex flex-col gap-2 pointer-events-auto">
     <WorkflowActionsDropdown source="app_mode_toolbar">
-      <template #button>
+      <template #button="{ hasUnseenItems }">
         <Button
           v-tooltip.right="{
             value: t('sideToolbar.labels.menu'),
@@ -52,10 +52,15 @@ function openTemplates() {
           variant="secondary"
           size="unset"
           :aria-label="t('sideToolbar.labels.menu')"
-          class="h-10 rounded-lg pl-3 pr-2 gap-1 data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface"
+          class="relative h-10 rounded-lg pl-3 pr-2 gap-1 data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface"
         >
           <i class="icon-[lucide--panels-top-left] size-4" />
           <i class="icon-[lucide--chevron-down] size-4 text-muted-foreground" />
+          <span
+            v-if="hasUnseenItems"
+            aria-hidden="true"
+            class="absolute -top-0.5 -right-0.5 size-2 rounded-full bg-primary-background"
+          />
         </Button>
       </template>
     </WorkflowActionsDropdown>

src/components/breadcrumb/SubgraphBreadcrumb.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     data-testid="subgraph-breadcrumb"
-    class="subgraph-breadcrumb flex w-auto drop-shadow-(--interface-panel-drop-shadow) items-center"
+    class="subgraph-breadcrumb flex w-auto drop-shadow-(--interface-panel-drop-shadow) items-center -mt-4 pt-4"
     :class="{
       'subgraph-breadcrumb-collapse': collapseTabs,
       'subgraph-breadcrumb-overflow': overflowingTabs

src/components/common/WorkflowActionsDropdown.vue

@@ -9,6 +9,7 @@ import { useI18n } from 'vue-i18n'
 
 import WorkflowActionsList from '@/components/common/WorkflowActionsList.vue'
 import Button from '@/components/ui/button/Button.vue'
+import { useNewMenuItemIndicator } from '@/composables/useNewMenuItemIndicator'
 import { useWorkflowActionsMenu } from '@/composables/useWorkflowActionsMenu'
 import { useTelemetry } from '@/platform/telemetry'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
@@ -27,8 +28,13 @@ const { menuItems } = useWorkflowActionsMenu(
   { isRoot: true }
 )
 
+const { hasUnseenItems, markAsSeen } = useNewMenuItemIndicator(
+  () => menuItems.value
+)
+
 function handleOpen(open: boolean) {
   if (open) {
+    markAsSeen()
     useTelemetry()?.trackUiButtonClicked({
       button_id: source
     })
@@ -39,7 +45,7 @@ function handleOpen(open: boolean) {
 <template>
   <DropdownMenuRoot @update:open="handleOpen">
     <DropdownMenuTrigger as-child>
-      <slot name="button">
+      <slot name="button" :has-unseen-items="hasUnseenItems">
         <Button
           v-tooltip="{
             value: t('breadcrumbsMenu.workflowActions'),
@@ -49,7 +55,7 @@ function handleOpen(open: boolean) {
           variant="secondary"
           size="unset"
           :aria-label="t('breadcrumbsMenu.workflowActions')"
-          class="h-10 rounded-lg pl-3 pr-2 pointer-events-auto gap-1 data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface"
+          class="relative h-10 rounded-lg pl-3 pr-2 pointer-events-auto gap-1 data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface"
         >
           <i
             class="size-4"
@@ -60,6 +66,11 @@ function handleOpen(open: boolean) {
             "
           />
           <i class="icon-[lucide--chevron-down] size-4 text-muted-foreground" />
+          <span
+            v-if="hasUnseenItems"
+            aria-hidden="true"
+            class="absolute -top-0.5 -right-0.5 size-2 rounded-full bg-primary-background"
+          />
         </Button>
       </slot>
     </DropdownMenuTrigger>

src/components/common/WorkflowActionsList.test.ts

@@ -17,7 +17,7 @@ function createWrapper(items: WorkflowMenuItem[]) {
 describe('WorkflowActionsList', () => {
   it('renders action items with label and icon', () => {
     const items: WorkflowMenuItem[] = [
-      { label: 'Save', icon: 'pi pi-save', command: vi.fn() }
+      { id: 'save', label: 'Save', icon: 'pi pi-save', command: vi.fn() }
     ]
 
     const wrapper = createWrapper(items)
@@ -28,9 +28,9 @@ describe('WorkflowActionsList', () => {
 
   it('renders separator items', () => {
     const items: WorkflowMenuItem[] = [
-      { label: 'Before', icon: 'pi pi-a', command: vi.fn() },
+      { id: 'before', label: 'Before', icon: 'pi pi-a', command: vi.fn() },
       { separator: true },
-      { label: 'After', icon: 'pi pi-b', command: vi.fn() }
+      { id: 'after', label: 'After', icon: 'pi pi-b', command: vi.fn() }
     ]
 
     const wrapper = createWrapper(items)
@@ -44,7 +44,7 @@ describe('WorkflowActionsList', () => {
   it('dispatches command on select', async () => {
     const command = vi.fn()
     const items: WorkflowMenuItem[] = [
-      { label: 'Action', icon: 'pi pi-play', command }
+      { id: 'action', label: 'Action', icon: 'pi pi-play', command }
     ]
 
     const wrapper = createWrapper(items)
@@ -57,6 +57,7 @@ describe('WorkflowActionsList', () => {
   it('renders badge when present', () => {
     const items: WorkflowMenuItem[] = [
       {
+        id: 'new-feature',
         label: 'New Feature',
         icon: 'pi pi-star',
         command: vi.fn(),
@@ -71,7 +72,7 @@ describe('WorkflowActionsList', () => {
 
   it('does not render badge when absent', () => {
     const items: WorkflowMenuAction[] = [
-      { label: 'Plain', icon: 'pi pi-check', command: vi.fn() }
+      { id: 'plain', label: 'Plain', icon: 'pi pi-check', command: vi.fn() }
     ]
 
     const wrapper = createWrapper(items)

src/components/topbar/WorkflowTab.vue

@@ -198,11 +198,13 @@ const contextMenuItems = computed<WorkflowMenuItem[]>(() => [
   ...baseMenuItems.value,
   { separator: true },
   {
+    id: 'close-tab',
     label: t('tabMenu.closeTab'),
     icon: 'pi pi-times',
     command: () => onCloseWorkflow(props.workflowOption)
   },
   {
+    id: 'close-tabs-to-left',
     label: t('tabMenu.closeTabsToLeft'),
     overlayIcon: {
       mainIcon: 'pi pi-times',
@@ -215,6 +217,7 @@ const contextMenuItems = computed<WorkflowMenuItem[]>(() => [
     disabled: props.isFirst
   },
   {
+    id: 'close-tabs-to-right',
     label: t('tabMenu.closeTabsToRight'),
     overlayIcon: {
       mainIcon: 'pi pi-times',
@@ -227,6 +230,7 @@ const contextMenuItems = computed<WorkflowMenuItem[]>(() => [
     disabled: props.isLast
   },
   {
+    id: 'close-other-tabs',
     label: t('tabMenu.closeOtherTabs'),
     overlayIcon: {
       mainIcon: 'pi pi-times',