Favourites:

- dispatch event when adding / removing preference
- favourite widgets listen for event to update

api/js/etemplate/Et2Favorites/Et2Favorites.ts

@@ -345,20 +345,21 @@ export class Et2Favorites extends Et2DropdownButton implements et2_INextmatchHea
 			// Hide the trash
 			trash.remove();
 
-			// Delete preference server side
-			Favorite.remove(this.egw(), this.app, line.value).then(response =>
+			// Delete preference server side, returns boolean
+			Favorite.remove(this.egw(), this.app, line.value).then(result =>
 			{
 				line.classList.remove("loading");
 
-				let result = response.response.find(r => r.type == "data");
+				this.dispatchEvent(new CustomEvent("preferenceChange", {
+					bubbles: true,
+					composed: true,
+					detail: {
+						application: this.application,
+						preference: line.value
+					}
+				}));
 
-				// Could not find the result we want
-				if(!result || result.type !== "data")
-				{
-					return;
-				}
-
-				if(typeof result.data == 'boolean' && result.data)
+				if(result)
 				{
 					// Remove line from list
 					line.remove();

api/js/etemplate/Et2Favorites/Et2FavoritesMenu.ts

@@ -46,6 +46,9 @@ export class Et2FavoritesMenu extends Et2Widget(LitElement)
 	@property()
 	application : string;
 
+	@property()
+	noAdd : boolean = false;
+
 	private favorites : { [name : string] : Favorite } = {
 		'blank': {
 			name: typeof this.egw()?.lang == "function" ? this.egw().lang("No filters") : "No filters",
@@ -55,24 +58,63 @@ export class Et2FavoritesMenu extends Et2Widget(LitElement)
 	};
 	private loadingPromise = Promise.resolve();
 
+	constructor()
+	{
+		super();
+		this.handlePreferenceChange = this.handlePreferenceChange.bind(this);
+	}
 	connectedCallback()
 	{
 		super.connectedCallback();
 
 		if(this.application)
 		{
-			this.loadingPromise = Favorite.load(this.egw(), this.application).then((favorites) =>
-			{
-				this.favorites = favorites;
-			});
+			this._load();
+		}
+		document.addEventListener("preferenceChange", this.handlePreferenceChange);
+	}
+
+	disconnectedCallback()
+	{
+		super.disconnectedCallback();
+		document.removeEventListener("preferenceChange", this.handlePreferenceChange);
+	}
+
+	private _load()
+	{
+		this.loadingPromise = Favorite.load(this.egw(), this.application).then((favorites) =>
+		{
+			this.favorites = favorites;
+		});
+	}
+
+	handlePreferenceChange(e)
+	{
+		if(e && e.detail?.application == this.application)
+		{
+			this._load();
+			this.requestUpdate();
 		}
 	}
 
 	handleSelect(event)
 	{
+		if(event.detail.item.value == Favorite.ADD_VALUE)
+		{
+			return this.handleAdd(event);
+		}
 		Favorite.applyFavorite(this.egw(), this.application, event.detail.item.value);
 	}
 
+	handleAdd(event)
+	{
+		event.stopPropagation();
+		if(this.egw().window && this.egw().window.app[this.application])
+		{
+			this.egw().window.app[this.application].add_favorite({});
+		}
+	}
+
 	handleDelete(event)
 	{
 		// Don't trigger click
@@ -89,6 +131,18 @@ export class Et2FavoritesMenu extends Et2Widget(LitElement)
 			// Remove from widget
 			delete this.favorites[favoriteName];
 			this.requestUpdate();
+
+			this.updateComplete.then(() =>
+			{
+				this.dispatchEvent(new CustomEvent("preferenceChange", {
+					bubbles: true,
+					composed: true,
+					detail: {
+						application: this.application,
+						preference: favoriteName
+					}
+				}));
+			});
 		});
 
 		this.requestUpdate();
@@ -123,12 +177,21 @@ export class Et2FavoritesMenu extends Et2Widget(LitElement)
 		{
 			return html`
                 <sl-menu
+                        part="menu"
                         @sl-select=${this.handleSelect}
                 >
                     ${this.label ? html`
                         <sl-menu-label>${this.label}</sl-menu-label>` : nothing}
                     ${repeat(Object.keys(this.favorites), (i) => this.menuItemTemplate(i, this.favorites[i]))}
                     <slot></slot>
+                    ${this.noAdd ? nothing : html`
+                        <sl-menu-item value=${Favorite.ADD_VALUE}
+                                      @sl-select=${this.handleAdd}
+                        >
+                            <sl-icon name="plus" slot="prefix"></sl-icon>
+                            ${this.egw().lang("Current view as favourite")}
+                        </sl-menu-item>`
+                    }
                 </sl-menu>
 			`;
 		});

api/js/jsapi/egw_app.ts

@@ -1230,6 +1230,15 @@ export abstract class EgwApp
 					this.egw.set_preference(this.appname, favorite_pref, favorite);
 				}
 
+				// Trigger event so widgets can update
+				document.dispatchEvent(new CustomEvent("preferenceChange", {
+					bubbles: true,
+					detail: {
+						application: this.appname,
+						preference: favorite_pref
+					}
+				}));
+
 				// Add to list immediately
 				if(this.sidebox)
 				{