@xh/hoist 77.0.0-SNAPSHOT.1759334906779 → 77.0.0-SNAPSHOT.1759338550975

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ## 77.0.0-SNAPSHOT - unreleased
 
+### 🎁 New Features
+
+* `DashCanvasView` and `DashContainerView` components now have a public `@bindable` `titleDetails`
+  property on their models to support displaying additional information in the title bar of these
+  components.  `titleDetails` is not persisted, and is expected to be set programmatically by the
+  application as needed.
+
 ## 76.0.0 - 2025-09-26
 
 ### 💥 Breaking Changes (upgrade difficulty: 🟠 MEDIUM - AG Grid update, Hoist React upgrade)

package/build/types/desktop/cmp/dash/DashViewModel.d.ts

@@ -25,6 +25,12 @@ export declare class DashViewModel<T extends DashViewSpec = DashViewSpec> extend
     containerModel: any;
     /** Title with which to initialize the view. */
     title: string;
+    /**
+     * Additional info that will be displayed after the title.
+     * Applications can bind to this property to provide dynamic title details.
+     * Value is not persisted.
+     **/
+    titleDetails: string;
     /** Icon with which to initialize the view. */
     icon: ReactElement;
     /** State with which to initialize the view. */

package/desktop/cmp/dash/DashViewModel.ts

@@ -47,6 +47,13 @@ export class DashViewModel<T extends DashViewSpec = DashViewSpec> extends HoistM
     /** Title with which to initialize the view. */
     @bindable title: string;
 
+    /**
+     * Additional info that will be displayed after the title.
+     * Applications can bind to this property to provide dynamic title details.
+     * Value is not persisted.
+     **/
+    @bindable titleDetails: string;
+
     /** Icon with which to initialize the view. */
     @bindable.ref icon: ReactElement;
 

package/desktop/cmp/dash/canvas/impl/DashCanvasView.ts

@@ -34,13 +34,14 @@ export const dashCanvasView = hoistCmp.factory({
     model: uses(DashCanvasViewModel, {publishMode: 'limited'}),
 
     render({model, className}) {
-        const {viewSpec, ref, hidePanelHeader, headerItems, autoHeight} = model,
+        const {viewSpec, ref, hidePanelHeader, headerItems, autoHeight, titleDetails, title, icon} =
+                model,
             headerProps = hidePanelHeader
                 ? {}
                 : {
                       compactHeader: true,
-                      title: model.title,
-                      icon: model.icon,
+                      title: title + (titleDetails ? ' ' + titleDetails : ''),
+                      icon,
                       headerItems: [...headerItems, headerMenu({model})]
                   };
         return panel({

package/desktop/cmp/dash/container/DashContainerModel.ts

@@ -338,7 +338,7 @@ export class DashContainerModel
     renameView(id: string) {
         const view = this.getItemByViewModel(id);
         if (!view) return;
-        this.showTitleForm(view.tab.element);
+        this.showTitleForm(view.tab.element, this.getViewModel(id));
     }
 
     onResize() {
@@ -558,8 +558,18 @@ export class DashContainerModel
 
             if (viewSpec.allowRename) {
                 this.insertTitleForm($el, viewModel);
-                $titleEl.off('dblclick').dblclick(() => this.showTitleForm($el));
+                $titleEl.off('dblclick').dblclick(() => this.showTitleForm($el, viewModel));
             }
+
+            viewModel.addReaction({
+                track: () => viewModel.titleDetails,
+                run: () => {
+                    const currentTitle = $titleEl.text(),
+                        {title, titleDetails} = viewModel,
+                        newTitle = title + (titleDetails ? ' ' + titleDetails : '');
+                    if (currentTitle !== newTitle) $titleEl.text(newTitle);
+                }
+            });
         });
     }
 
@@ -588,12 +598,11 @@ export class DashContainerModel
         });
     }
 
-    private showTitleForm($tabEl) {
+    private showTitleForm($tabEl, viewModel: DashViewModel) {
         if (this.renameLocked) return;
 
-        const $titleEl = $tabEl.find('.lm_title').first(),
-            $inputEl = $tabEl.find('.title-form input').first(),
-            currentTitle = $titleEl.text();
+        const $inputEl = $tabEl.find('.title-form input').first(),
+            currentTitle = viewModel.title;
 
         $tabEl.addClass('show-title-form');
         $inputEl.val(currentTitle);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "77.0.0-SNAPSHOT.1759334906779",
+  "version": "77.0.0-SNAPSHOT.1759338550975",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",