feat: add interfaces for secondary menu items with various types and functionalities

ts_web/elements/interfaces/appconfig.ts

@@ -2,6 +2,7 @@ import type { TemplateResult } from '@design.estate/dees-element';
 import type { IAppBarMenuItem } from './appbarmenuitem.js';
 import type { IMenuItem } from './tab.js';
 import type { IMenuGroup } from './menugroup.js';
+import type { ISecondaryMenuGroup, ISecondaryMenuItem } from './secondarymenu.js';
 
 // Forward declaration for circular reference
 export type TDeesAppui = HTMLElement & {
@@ -25,9 +26,9 @@ export type TDeesAppui = HTMLElement & {
   setContentTabsAutoHide: (enabled: boolean, threshold?: number) => void;
   setMainMenuBadge: (tabKey: string, badge: string | number) => void;
   clearMainMenuBadge: (tabKey: string) => void;
-  setSecondaryMenu: (config: { heading?: string; groups: IMenuGroup[] }) => void;
-  updateSecondaryMenuGroup: (groupName: string, update: Partial<IMenuGroup>) => void;
-  addSecondaryMenuItem: (groupName: string, item: IMenuGroup['items'][0]) => void;
+  setSecondaryMenu: (config: { heading?: string; groups: ISecondaryMenuGroup[] }) => void;
+  updateSecondaryMenuGroup: (groupName: string, update: Partial<ISecondaryMenuGroup>) => void;
+  addSecondaryMenuItem: (groupName: string, item: ISecondaryMenuItem) => void;
   setSecondaryMenuSelection: (itemKey: string) => void;
   clearSecondaryMenu: () => void;
   setContentTabs: (tabs: IMenuItem[]) => void;
@@ -36,6 +37,9 @@ export type TDeesAppui = HTMLElement & {
   selectContentTab: (tabKey: string) => void;
   getSelectedContentTab: () => IMenuItem | undefined;
   activityLog: IActivityLogAPI;
+  setActivityLogVisible: (visible: boolean) => void;
+  toggleActivityLog: () => void;
+  getActivityLogVisible: () => boolean;
   navigateToView: (viewId: string, params?: Record<string, string>) => Promise<boolean>;
   getCurrentView: () => IViewDefinition | undefined;
 };
@@ -136,7 +140,7 @@ export interface IViewDefinition {
     | (() => TemplateResult)
     | (() => Promise<string | (new () => HTMLElement) | (() => TemplateResult)>);
   /** Secondary menu items specific to this view */
-  secondaryMenu?: IMenuGroup[];
+  secondaryMenu?: ISecondaryMenuGroup[];
   /** Content tabs specific to this view */
   contentTabs?: IMenuItem[];
   /** Optional route path (defaults to id). Supports params like 'settings/:section' */

ts_web/elements/interfaces/index.ts

@@ -2,3 +2,4 @@ export * from './tab.js';
 export * from './appbarmenuitem.js';
 export * from './menugroup.js';
 export * from './appconfig.js';
+export * from './secondarymenu.js';

ts_web/elements/interfaces/secondarymenu.ts

@@ -0,0 +1,93 @@
+/**
+ * Secondary Menu Item Types
+ *
+ * Supports 8 item types:
+ * 1. Tab - selectable, stays highlighted (existing behavior)
+ * 2. Action - executes without selection (primary = blue)
+ * 3. Danger Action - red styling with optional confirmation
+ * 4. Filter - checkbox toggle, emits immediately
+ * 5. Multi-Filter - collapsible box with multiple checkboxes
+ * 6. Divider - visual separator
+ * 7. Header - non-interactive label
+ * 8. Link - opens URL
+ */
+
+// Base properties shared by interactive items
+export interface ISecondaryMenuItemBase {
+  key: string;
+  iconName?: string;
+  disabled?: boolean;
+  hidden?: boolean;
+}
+
+// 1. Tab - existing behavior (selectable, stays highlighted)
+export interface ISecondaryMenuItemTab extends ISecondaryMenuItemBase {
+  type?: 'tab'; // default if omitted for backward compatibility
+  action: () => void;
+  badge?: string | number;
+  badgeVariant?: 'default' | 'success' | 'warning' | 'error';
+}
+
+// 2 & 3. Action - executes without selection
+export interface ISecondaryMenuItemAction extends ISecondaryMenuItemBase {
+  type: 'action';
+  action: () => void | Promise<void>;
+  variant?: 'primary' | 'danger'; // primary = blue (default), danger = red
+  confirmMessage?: string; // Shows confirmation dialog before executing
+}
+
+// 4. Single filter toggle
+export interface ISecondaryMenuItemFilter extends ISecondaryMenuItemBase {
+  type: 'filter';
+  active: boolean;
+  onToggle: (active: boolean) => void;
+}
+
+// 5. Multi-select filter group (collapsible)
+export interface ISecondaryMenuItemMultiFilter extends ISecondaryMenuItemBase {
+  type: 'multiFilter';
+  collapsed?: boolean; // Accordion state
+  options: Array<{
+    key: string;
+    label: string;
+    checked: boolean;
+    iconName?: string;
+  }>;
+  onChange: (selectedKeys: string[]) => void;
+}
+
+// 6. Divider
+export interface ISecondaryMenuItemDivider {
+  type: 'divider';
+}
+
+// 7. Header/Label
+export interface ISecondaryMenuItemHeader {
+  type: 'header';
+  label: string;
+}
+
+// 8. External link
+export interface ISecondaryMenuItemLink extends ISecondaryMenuItemBase {
+  type: 'link';
+  href: string;
+  external?: boolean; // Opens in new tab (default: true if href starts with http)
+}
+
+// Union type for all secondary menu items
+export type ISecondaryMenuItem =
+  | ISecondaryMenuItemTab
+  | ISecondaryMenuItemAction
+  | ISecondaryMenuItemFilter
+  | ISecondaryMenuItemMultiFilter
+  | ISecondaryMenuItemDivider
+  | ISecondaryMenuItemHeader
+  | ISecondaryMenuItemLink;
+
+// Group interface for secondary menu
+export interface ISecondaryMenuGroup {
+  name: string;
+  iconName?: string;
+  collapsed?: boolean;
+  items: ISecondaryMenuItem[];
+}