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>