feat(appui): add dees-appui-bottombar component with config, programmatic API, demo and docs

ts_web/elements/interfaces/appconfig.ts

@@ -4,6 +4,104 @@ import type { IMenuItem } from './tab.js';
 import type { IMenuGroup } from './menugroup.js';
 import type { ISecondaryMenuGroup, ISecondaryMenuItem } from './secondarymenu.js';
 
+// ==========================================
+// BOTTOM BAR INTERFACES
+// ==========================================
+
+/**
+ * Bottom bar widget status for styling
+ */
+export type TBottomBarWidgetStatus = 'idle' | 'active' | 'success' | 'warning' | 'error';
+
+/**
+ * Generic status widget for the bottom bar
+ */
+export interface IBottomBarWidget {
+  /** Unique identifier for the widget */
+  id: string;
+  /** Icon to display (lucide icon name) */
+  iconName?: string;
+  /** Text label to display */
+  label?: string;
+  /** Status affects styling (colors) */
+  status?: TBottomBarWidgetStatus;
+  /** Tooltip text */
+  tooltip?: string;
+  /** Whether the widget shows a loading spinner */
+  loading?: boolean;
+  /** Click handler for the widget */
+  onClick?: () => void;
+  /** Optional context menu items on right-click */
+  contextMenuItems?: IBottomBarContextMenuItem[];
+  /** Position: 'left' (default) or 'right' */
+  position?: 'left' | 'right';
+  /** Order within position group (lower = earlier) */
+  order?: number;
+}
+
+/**
+ * Context menu item for bottom bar widgets
+ */
+export interface IBottomBarContextMenuItem {
+  name: string;
+  iconName?: string;
+  action: () => void | Promise<void>;
+  disabled?: boolean;
+  divider?: boolean;
+}
+
+/**
+ * Bottom bar action (quick action button)
+ */
+export interface IBottomBarAction {
+  /** Unique identifier */
+  id: string;
+  /** Icon to display */
+  iconName: string;
+  /** Tooltip */
+  tooltip?: string;
+  /** Click handler */
+  onClick: () => void | Promise<void>;
+  /** Whether action is disabled */
+  disabled?: boolean;
+  /** Position: 'left' or 'right' (default) */
+  position?: 'left' | 'right';
+}
+
+/**
+ * Bottom bar configuration
+ */
+export interface IBottomBarConfig {
+  /** Whether bottom bar is visible */
+  visible?: boolean;
+  /** Initial widgets */
+  widgets?: IBottomBarWidget[];
+  /** Initial actions */
+  actions?: IBottomBarAction[];
+}
+
+/**
+ * Bottom bar programmatic API
+ */
+export interface IBottomBarAPI {
+  /** Add a widget */
+  addWidget: (widget: IBottomBarWidget) => void;
+  /** Update an existing widget by ID */
+  updateWidget: (id: string, update: Partial<IBottomBarWidget>) => void;
+  /** Remove a widget by ID */
+  removeWidget: (id: string) => void;
+  /** Get a widget by ID */
+  getWidget: (id: string) => IBottomBarWidget | undefined;
+  /** Clear all widgets */
+  clearWidgets: () => void;
+  /** Add an action button */
+  addAction: (action: IBottomBarAction) => void;
+  /** Remove an action by ID */
+  removeAction: (id: string) => void;
+  /** Clear all actions */
+  clearActions: () => void;
+}
+
 // Forward declaration for circular reference
 export type TDeesAppui = HTMLElement & {
   setAppBarMenus: (menus: IAppBarMenuItem[]) => void;
@@ -42,6 +140,10 @@ export type TDeesAppui = HTMLElement & {
   getActivityLogVisible: () => boolean;
   navigateToView: (viewId: string, params?: Record<string, string>) => Promise<boolean>;
   getCurrentView: () => IViewDefinition | undefined;
+  // Bottom bar
+  bottomBar: IBottomBarAPI;
+  setBottomBarVisible: (visible: boolean) => void;
+  getBottomBarVisible: () => boolean;
 };
 
 /**
@@ -233,6 +335,9 @@ export interface IAppConfig {
   /** Activity log configuration */
   activityLog?: IActivityLogConfig;
 
+  /** Bottom bar configuration */
+  bottomBar?: IBottomBarConfig;
+
   /** Event callbacks */
   onViewChange?: (viewId: string, view: IViewDefinition) => void;
   onSearch?: (query: string) => void;