@sapui5/sap.cux.home 1.142.0 → 1.142.1

package/src/sap/cux/home/AppsAdditionPanel.ts

@@ -9,19 +9,24 @@ import Button from "sap/m/Button";
 import CustomListItem from "sap/m/CustomListItem";
 import ExpandableText from "sap/m/ExpandableText";
 import FlexBox from "sap/m/FlexBox";
+import FlexItemData from "sap/m/FlexItemData";
 import GenericTile, { GenericTile$PressEvent } from "sap/m/GenericTile";
 import HBox from "sap/m/HBox";
+import IllustratedMessage from "sap/m/IllustratedMessage";
 import Label from "sap/m/Label";
-import { ButtonType, URLHelper } from "sap/m/library";
+import { ButtonType, FlexAlignItems, FlexDirection, FlexJustifyContent, FlexRendertype, URLHelper } from "sap/m/library";
 import List from "sap/m/List";
 import { ListBase$SelectionChangeEvent } from "sap/m/ListBase";
 import MessageToast from "sap/m/MessageToast";
-import Text from "sap/m/Text";
+import ObjectStatus from "sap/m/ObjectStatus";
+import SegmentedButton from "sap/m/SegmentedButton";
+import SegmentedButtonItem from "sap/m/SegmentedButtonItem";
 import TextArea, { TextArea$LiveChangeEvent } from "sap/m/TextArea";
+import Title from "sap/m/Title";
 import VBox from "sap/m/VBox";
 import Control from "sap/ui/core/Control";
 import Fragment from "sap/ui/core/Fragment";
-import { ValueState } from "sap/ui/core/library";
+import { TitleLevel, ValueState } from "sap/ui/core/library";
 import ChangeReason from "sap/ui/model/ChangeReason";
 import Context from "sap/ui/model/Context";
 import JSONModel from "sap/ui/model/json/JSONModel";
@@ -36,8 +41,8 @@ import BaseLayout from "./BaseLayout";
 import BaseSettingsPanel from "./BaseSettingsPanel";
 import ContentAdditionDialog from "./ContentAdditionDialog";
 import FavAppPanel from "./FavAppPanel";
-import InsightsContainer from "./InsightsContainer";
 import { ICustomVisualization, ICustomVizInstance, IVisualization } from "./interface/AppsInterface";
+import TilesContainer from "./TilesContainer";
 import AppManager from "./utils/AppManager";
 import {
 	AI_APP_FINDER_API,
@@ -56,7 +61,8 @@ import { triggerPXIntegration } from "./utils/PXFeedback";
 const Constants = {
 	DeprecatedInfoText: "deprecated",
 	MinQueryLength: 2,
-	MaxDescriptionLength: 2000
+	MaxQueryLength: 2000,
+	MaxDescriptionLength: 300
 };
 
 enum SearchStatus {
@@ -71,7 +77,8 @@ enum ErrorType {
 }
 
 enum TileType {
-	Static = "STATIC"
+	Static = "STATIC",
+	Dynamic = "DYNAMIC"
 }
 
 interface RawAppData {
@@ -83,16 +90,17 @@ interface RawAppData {
 	iconUrl: string;
 	configuration: string;
 }
-interface SuggestedApp {
+export interface SuggestedApp {
 	icon: string;
 	title: string;
 	chipID: string;
-	status: string[];
 	subTitle: string;
 	description: string;
 	isStaticApp: boolean;
-	addedToHomePage: boolean;
+	addedToApps?: boolean;
+	addedToInsights?: boolean;
 	vizData?: IVisualization;
+	isDeprecated?: boolean;
 }
 
 interface QueryResponse {
@@ -202,89 +210,95 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 		this.vizInstantiationService = await Container.getServiceAsync<VisualizationInstantiation>("VisualizationInstantiation");
 
 		//load ui fragment
-		const panelContent = (await Fragment.load({
-			id: `${this.getId()}-content`,
-			name: "sap.cux.home.utils.fragment.appsAdditionContent",
-			controller: this
-		})) as Control;
-		this.addAggregation("content", panelContent);
-
-		//initialize ui model
-		this.model = new JSONModel({
-			query: "",
-			hasError: false,
-			errorType: ErrorType.NoResultsFound,
-			errorDescription: "",
-			searchStatus: SearchStatus.Idle,
-			loadingAnimations: this._generateSearchingAnimations(),
-			suggestedAppsCount: 0,
-			userSelectedApps: [],
-			suggestedApps: [],
-			aiPolicyText: this._generateAIPolicyText(),
-			invalidQuery: true,
-			feedback: {
-				thumbsUp: false,
-				thumbsDown: false
-			},
-			sampleQueries: [
-				{
-					index: 1,
-					query: this._i18nBundle.getText("sampleQuery_1") as string
-				},
-				{
-					index: 2,
-					query: this._i18nBundle.getText("sampleQuery_2") as string
+		try {
+			const panelContent = (await Fragment.load({
+				id: recycleId(`${this.getId()}-content`),
+				name: "sap.cux.home.utils.fragment.appsAdditionContent",
+				controller: this
+			})) as Control;
+			this.addAggregation("content", panelContent);
+
+			//initialize ui model
+			this.model = new JSONModel({
+				query: "",
+				hasError: false,
+				errorType: ErrorType.NoResultsFound,
+				errorDescription: "",
+				searchStatus: SearchStatus.Idle,
+				loadingAnimations: this._generateSearchingAnimations(),
+				suggestedAppsCount: 0,
+				userSelectedApps: [],
+				suggestedApps: [],
+				aiPolicyText: this._generateAIPolicyText(),
+				invalidQuery: true,
+				feedback: {
+					thumbsUp: false,
+					thumbsDown: false
 				},
-				{
-					index: 3,
-					query: this._i18nBundle.getText("sampleQuery_3") as string
-				}
-			]
-		});
-
-		panelContent.setModel(this.model);
-		panelContent.setModel(new ResourceModel({ bundleName: "sap.cux.home.i18n.messagebundle" }), "i18n");
-		this.addAppsButton.setModel(this.model);
-
-		//bind suggested apps list
-		this.appSuggestionList = Fragment.byId(`${this.getId()}-content`, "appsList") as List;
-		this.appSuggestionList.bindAggregation("items", {
-			path: "/suggestedApps",
-			factory: this._generateListItem.bind(this),
-			sorter: new Sorter({
-				path: "status",
-				comparator: (firstApp: string[], secondApp: string[]) => {
-					const getPriority = (statusArray: string[]) => {
-						if (statusArray.length === 0) return 0; // Empty array has highest priority
-
-						const hasAlreadyAdded = statusArray.includes(this._i18nBundle.getText("alreadyAddedApp") as string);
-						const hasDeprecated = statusArray.includes(this._i18nBundle.getText("deprecatedApp") as string);
-
-						if (hasAlreadyAdded && hasDeprecated) return 3; // Both statuses - lowest priority
-						if (hasAlreadyAdded) return 1; // Only "Already Added"
-						if (hasDeprecated) return 2; // Only "Deprecated"
-
-						return 4; // Any other combination (fallback)
-					};
-
-					const firstPriority = getPriority(firstApp);
-					const secondPriority = getPriority(secondApp);
-
-					return firstPriority - secondPriority;
+				sampleQueries: [
+					{
+						index: 1,
+						query: this._i18nBundle.getText("sampleQuery_1") as string
+					},
+					{
+						index: 2,
+						query: this._i18nBundle.getText("sampleQuery_2") as string
+					},
+					{
+						index: 3,
+						query: this._i18nBundle.getText("sampleQuery_3") as string
+					}
+				]
+			});
+
+			panelContent.setModel(this.model);
+			panelContent.setModel(new ResourceModel({ bundleName: "sap.cux.home.i18n.messagebundle" }), "i18n");
+			this.addAppsButton.setModel(this.model);
+
+			//bind suggested apps list
+			this.appSuggestionList = Fragment.byId(`${this.getId()}-content`, "appsList") as List;
+			this.appSuggestionList.bindAggregation("items", {
+				path: "/suggestedApps",
+				factory: this._generateListItem.bind(this),
+				sorter: new Sorter({
+					path: "",
+					comparator: (firstApp: SuggestedApp, secondApp: SuggestedApp) => {
+						const getPriority = (app: SuggestedApp) => {
+							const hasAlreadyAdded = app.isStaticApp ? app.addedToApps : app.addedToInsights;
+							const hasDeprecated = app.isDeprecated;
+
+							if (!hasAlreadyAdded && !hasDeprecated) return 0; // Neither status - highest priority
+							if (hasAlreadyAdded && hasDeprecated) return 3; // Both statuses - lowest priority
+							if (hasAlreadyAdded) return 1; // Only "Already Added"
+							if (hasDeprecated) return 2; // Only "Deprecated"
+
+							return 4; // Any other combination (fallback)
+						};
+
+						const firstPriority = getPriority(firstApp);
+						const secondPriority = getPriority(secondApp);
+
+						return firstPriority - secondPriority;
+					}
+				})
+			});
+
+			//focus on the first item when the list is updated
+			this.appSuggestionList.attachUpdateFinished(() => {
+				if (
+					this.model.getProperty("/suggestedAppsCount") > 0 &&
+					this.model.getProperty("/searchStatus") === SearchStatus.Complete
+				) {
+					this.appSuggestionList.getItems()?.[0]?.focus();
 				}
-			})
-		});
+			});
 
-		//focus on the first item when the list is updated
-		this.appSuggestionList.attachUpdateFinished(() => {
-			if (this.model.getProperty("/suggestedAppsCount") > 0 && this.model.getProperty("/searchStatus") === SearchStatus.Complete) {
-				this.appSuggestionList.getItems()?.[0]?.focus();
-			}
-		});
-
-		//bind search field
-		const searchTextArea = Fragment.byId(`${this.getId()}-content`, "searchTextArea") as TextArea;
-		searchTextArea.onsapenter = this.onPressGo.bind(this);
+			//bind search field
+			const searchTextArea = Fragment.byId(`${this.getId()}-content`, "searchTextArea") as TextArea;
+			searchTextArea.onsapenter = this.onPressGo.bind(this);
+		} catch (error) {
+			Log.error("Failed to load panel content for AppsAdditionPanel:", error as Error);
+		}
 	}
 
 	/**
@@ -296,29 +310,54 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 	 * @returns {CustomListItem} The generated list item control.
 	 */
 	private _generateListItem(id: string, context: Context): CustomListItem {
-		const isStaticApp = context.getProperty("isStaticApp") as boolean;
 		const langTag = Localization.getLanguageTag();
 		const currentLanguage = langTag.language.toLowerCase();
 		const isEnglishLanguage = currentLanguage.startsWith("en");
 		const listItem = new CustomListItem(id, {
-			selected: context.getProperty("addedToHomePage") as boolean,
+			//when toggled b/w app and tile view, the selection should update according to whether the app is already added to selected section
+			selected: {
+				path: "selectedView",
+				formatter: () => {
+					const isAppAlreadyAdded = this.isAppAlreadyAdded(context);
+					//bind associated checkbox to disable it when the app is already added
+					listItem.getMultiSelectControl(true).setEnabled(!isAppAlreadyAdded);
+					// if app is already added or if user has selected the app, mark it as selected
+					return isAppAlreadyAdded || this.userSelectedApps.has(listItem);
+				}
+			},
 			content: [
 				new FlexBox(recycleId(`${id}-result-container`), {
-					renderType: "Bare",
-					direction: isEnglishLanguage && isStaticApp ? "Column" : "Row",
-					alignItems: isEnglishLanguage && isStaticApp ? "Start" : "Center",
-					items: [this._getAppPreviewContainer(id, context), this._getAppDetailsContainer(id, context, isEnglishLanguage)]
-				}).addStyleClass("sapUiSmallMargin")
+					renderType: FlexRendertype.Bare,
+					direction: FlexDirection.Row,
+					gap: "1.5rem",
+					items: [this._getAppDetailsContainer(id, context, isEnglishLanguage), this._getAppPreviewContainer(id, context)]
+				}).addStyleClass("sapUiSmallMargin sapUiTinyMarginBegin")
 			]
 		});
 
-		//bind associated checkbox to disable it when the app is already added to home page
-		listItem.getMultiSelectControl(true).setEnabled(!context.getProperty("addedToHomePage"));
-
 		return listItem;
 	}
 
 	/**
+	 * Cleans up resources when exiting the panel.
+	 *
+	 * @public
+	 * @override
+	 */
+	public exit(): void {
+		// Destroy fragments if they exist
+		const dialogId = `${this.getId()}-content`;
+
+		["number", "query", "searchingAnimation"].forEach((elementId) => {
+			const element = Fragment.byId(dialogId, elementId);
+			element?.destroy();
+		});
+
+		super.exit();
+	}
+
+	/**
+
 	 * Creates a preview container for the suggested app.
 	 *
 	 * @private
@@ -328,37 +367,45 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 	 */
 	private _getAppPreviewContainer(id: string, context: Context): HBox {
 		const container = new HBox(recycleId(`${id}-suggestedAppContainer`), {
-			renderType: "Bare"
+			renderType: FlexRendertype.Bare,
+			width: "19rem",
+			layoutData: new FlexItemData({
+				growFactor: 0,
+				shrinkFactor: 0,
+				alignSelf: FlexAlignItems.Center
+			}),
+			justifyContent: FlexJustifyContent.Center
 		});
+		container.addItem(
+			new GenericTile(recycleId(`${id}-staticApp`), {
+				mode: "IconMode",
+				frameType: "TwoByHalf",
+				width: "19rem",
+				header: context.getProperty("title") as string,
+				subheader: context.getProperty("subTitle") as string,
+				tileIcon: (context.getProperty("icon") as string) || DEFAULT_APP_ICON,
+				visible: "{= ${selectedView} === 'STATIC'}",
+				url: context.getProperty("url") as string,
+				press: (event: GenericTile$PressEvent) => {
+					this._persistDialog(this.getParent() as ContentAdditionDialog);
+					URLHelper.redirect(event.getSource()?.getUrl(), false);
+				}
+			}).addStyleClass("suggestedTile")
+		);
+
+		const vizData = context.getProperty("vizData") as IVisualization;
+		// instantiate visualization for dynamic app
+		const vizInstance = this.vizInstantiationService.instantiateVisualization(vizData) as ICustomVizInstance;
+		vizInstance?.setActive(true);
+		vizInstance?.setProperty("sizeBehavior", "Small", true);
+		vizInstance?.attachPress(() => this._persistDialog(this.getParent() as ContentAdditionDialog));
+		vizInstance.bindProperty("visible", {
+			parts: ["selectedView"],
+			formatter: (selectedView: TileType) => selectedView !== TileType.Static
+		});
+		container.addItem(vizInstance);
 
-		if (context.getProperty("isStaticApp") as boolean) {
-			// create generic tile for static app
-			container.addItem(
-				new GenericTile(recycleId(`${id}-staticApp`), {
-					mode: "IconMode",
-					frameType: "TwoByHalf",
-					width: "19rem",
-					header: context.getProperty("title") as string,
-					subheader: context.getProperty("subTitle") as string,
-					tileIcon: (context.getProperty("icon") as string) || DEFAULT_APP_ICON,
-					visible: context.getProperty("isStaticApp") as boolean,
-					url: context.getProperty("url") as string,
-					press: (event: GenericTile$PressEvent) => {
-						this._persistDialog(this.getParent() as ContentAdditionDialog);
-						URLHelper.redirect(event.getSource()?.getUrl(), false);
-					}
-				}).addStyleClass("suggestedTile")
-			);
-		} else {
-			// create custom visualization for other apps
-			const vizData = context.getProperty("vizData") as ICustomVisualization;
-			const instance = this.vizInstantiationService.instantiateVisualization(vizData) as ICustomVizInstance;
-			instance?.setActive(true);
-			instance?.attachPress(() => this._persistDialog(this.getParent() as ContentAdditionDialog));
-			container.addItem(instance);
-		}
-
-		return container;
+		return container.addStyleClass("suggestedAppPreviewContainer");
 	}
 
 	/**
@@ -375,29 +422,58 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 			? (context.getProperty("description") as string)
 			: (this._i18nBundle.getText("NoDescriptionAvailable") as string);
 		return new VBox(recycleId(`${id}-app-details-container`), {
-			renderType: "Bare",
-			gap: "0.5rem",
+			renderType: FlexRendertype.Bare,
+			gap: "1rem",
+			layoutData: new FlexItemData({
+				growFactor: 1
+			}),
 			items: [
+				new HBox(recycleId(`${id}-title-container`), {
+					gap: "0.5rem",
+					alignItems: FlexAlignItems.Center,
+					renderType: FlexRendertype.Bare,
+					items: [
+						new Title(recycleId(`${id}-app-title`), {
+							text: context.getProperty("title") as string,
+							titleStyle: TitleLevel.H6
+						}),
+						new ObjectStatus(recycleId(`${id}-deprecatedApp`), {
+							text: this._i18nBundle.getText("deprecatedApp") as string,
+							icon: "sap-icon://alert",
+							state: ValueState.Warning,
+							visible: context.getProperty("isDeprecated") as boolean
+						})
+					]
+				}),
 				new ExpandableText(recycleId(`${id}-description`), {
 					text: description,
-					maxCharacters: Constants.MaxDescriptionLength
+					maxCharacters: Constants.MaxDescriptionLength,
+					layoutData: new FlexItemData({
+						growFactor: 1
+					})
 				}),
-				new HBox(recycleId(`${id}-app-status-container`), {
-					renderType: "Bare",
-					visible: (context.getProperty("status") as string[]).length > 0,
+				// app actions container
+				new HBox(recycleId(`${id}-app-actions-container`), {
+					renderType: FlexRendertype.Bare,
+					gap: "1.5rem",
+					alignItems: FlexAlignItems.Center,
 					items: [
-						new Label(recycleId(`${id}-appStatusLabel`), {
-							text: this._i18nBundle.getText("appStatus"),
-							showColon: true
-						}),
-						new HBox(recycleId(`${id}-app-status-texts`), {
-							renderType: "Bare",
-							items: this._generateStatusTexts(id, context.getProperty("status") as string[])
-						}).addStyleClass("sapUiTinyMarginBegin statusTextsContainer")
+						this.getAppViewTypeAction(id),
+						new ObjectStatus(recycleId(`${id}-alreadyAddedStatus`), {
+							text: "{i18n>alreadyAddedApp}",
+							icon: "sap-icon://sys-enter-2",
+							state: "Success",
+							visible: {
+								parts: ["selectedView"],
+								formatter: () => {
+									return this.isAppAlreadyAdded(context);
+								}
+							}
+						})
 					]
 				})
 			]
-		}).addStyleClass(isEnglishLanguage && context.getProperty("isStaticApp") ? "sapUiSmallMarginTop" : "sapUiSmallMarginBegin");
+		});
 	}
 
 	/**
@@ -468,15 +544,19 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 			`<svg height="167" fill="none">
 				${loadingShimmer}
 				<rect x="16" y="75" width="16" height="16" rx="4" fill="var(--sapContent_Placeholderloading_Background)"/>
-				<rect x="48" y="16" width="37%" height="70" rx="16" fill="url(#loadingShimmer)"/>
-				<rect x="48" y="102" width="93%" height="48" rx="4" fill="url(#loadingShimmer)"/>
+				<rect x="48" y="16" width="30%" height="16" rx="4" fill="url(#loadingShimmer)"/>
+				<rect x="48" y="54" width="57%" height="64" rx="4" fill="url(#loadingShimmer)"/>
+				<rect x="48" y="130" width="16%" height="24" rx="4" fill="url(#loadingShimmer)"/>
+				<rect x="600" y="50" width="303" height="70" rx="16" fill="url(#loadingShimmer)"/>
 			</svg>`,
 			`<svg height="180" fill="none">
 				${loadingShimmer}
 				<rect x="16" y="82" width="16" height="16" rx="4" fill="var(--sapContent_Placeholderloading_Background)"/>
-				<rect x="48" y="16" width="148" height="148" rx="16" fill="url(#loadingShimmer)"/>
-				<rect x="212" y="54" width="75%" height="48" rx="4" fill="url(#loadingShimmer)"/>
-				<rect x="212" y="110" width="13%" height="16" rx="4" fill="url(#loadingShimmer)"/>
+				<rect x="48" y="16" width="30%" height="16" rx="4" fill="url(#loadingShimmer)"/>
+				<rect x="48" y="54" width="57%" height="64" rx="4" fill="url(#loadingShimmer)"/>
+				<rect x="48" y="140" width="16%" height="24" rx="4" fill="url(#loadingShimmer)"/>
+				<rect x="210" y="140" width="10%" height="24" rx="4" fill="url(#loadingShimmer)"/>
+				<rect x="675" y="16" width="148" height="148" rx="16" fill="url(#loadingShimmer)"/>
 			</svg>`
 		];
 	}
@@ -521,6 +601,21 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 		this.userSelectedApps?.clear();
 	}
 
+	public setIllustrationSize(): void {
+		const containerDom = (Fragment.byId(`${this.getId()}-content`, "container") as VBox)?.getDomRef() as HTMLElement;
+		if (containerDom) {
+			const clientHeight = containerDom.clientHeight;
+			const illustratedMessage = Fragment.byId(`${this.getId()}-content`, "beforeSearch") as IllustratedMessage;
+			if (clientHeight <= 500) {
+				illustratedMessage.setIllustrationSize("ExtraSmall");
+			} else if (500 < clientHeight && clientHeight < 650) {
+				illustratedMessage.setIllustrationSize("Small");
+			} else {
+				illustratedMessage.setIllustrationSize("Medium");
+			}
+		}
+	}
+
 	/**
 	 * Handles the "Go" button press event for searching suggested apps.
 	 *
@@ -544,7 +639,7 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 				const insightsApps = await this.appManagerInstance.fetchInsightApps(true, this._i18nBundle.getText("insights") as string);
 
 				// generate suggested apps
-				const apps = this._generateApps(rawApps, allVisualizations, [...favoriteApps, ...insightsApps]);
+				const apps = this._generateApps(rawApps, allVisualizations, favoriteApps, insightsApps);
 				const suggestedApps = await this._filterUnsupportedApps(apps);
 
 				if (suggestedApps.length === 0 && !this.model.getProperty("/hasError")) {
@@ -590,17 +685,21 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 	 * @private
 	 * @param {RawAppData[]} rawApps - The raw app data to process.
 	 * @param {IVisualization[]} allVisualizations - All available visualizations.
-	 * @param {ICustomVisualization[]} homePageVisualizations - Visualizations available in homepage.
+	 * @param {ICustomVisualization[]} favoriteApps - Favorite apps available in homepage.
+	 * @param {ICustomVisualization[]} insightsApps - Insights apps available in homepage.
 	 * @returns {SuggestedApp[]} The list of suggested apps.
 	 */
 	private _generateApps(
 		rawApps: RawAppData[],
 		allVisualizations: IVisualization[],
-		homePageVisualizations: ICustomVisualization[]
+		favoriteApps: ICustomVisualization[],
+		insightsApps: ICustomVisualization[]
 	): SuggestedApp[] {
 		return rawApps.map((app) => {
 			const vizData = allVisualizations.find((viz) => viz.vizId === app.chipID);
-			const addedToHomePage = homePageVisualizations.some((viz) => viz.visualization?.vizId === app.chipID);
+			const addedToApps = favoriteApps.some((viz) => viz.visualization?.vizId === app.chipID);
+			const addedToInsights = insightsApps.some((viz) => viz.visualization?.vizId === app.chipID);
+			const tileConfig = this.parseTileConfiguration(app.configuration);
 			return {
 				title: app.title,
 				chipID: app.chipID,
@@ -608,10 +707,12 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 				description: app.appDescription,
 				icon: app.iconUrl,
 				vizData,
-				addedToHomePage,
+				addedToApps,
+				addedToInsights,
 				isStaticApp: app.tileType === TileType.Static,
-				status: this.getAppStatusTexts(app.configuration, addedToHomePage),
-				url: vizData?.targetURL || ""
+				url: vizData?.targetURL || "",
+				isDeprecated: (tileConfig?.display_info_text || "").toLowerCase() === Constants.DeprecatedInfoText,
+				selectedView: app.tileType === TileType.Static ? TileType.Static : TileType.Dynamic
 			};
 		}) as SuggestedApp[];
 	}
@@ -625,7 +726,7 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 	 */
 	private isValidQuery(query: string = ""): boolean {
 		query = query?.trim();
-		return query.length >= Constants.MinQueryLength && query.length <= Constants.MaxDescriptionLength;
+		return query.length >= Constants.MinQueryLength && query.length <= Constants.MaxQueryLength;
 	}
 
 	/**
@@ -695,70 +796,6 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 		return queryResult.value || [];
 	}
 
-	/**
-	 * Retrieves status texts for an app based on its configuration and homepage status.
-	 *
-	 * @private
-	 * @param {string} configuration - The app's configuration string.
-	 * @param {boolean} addedToHomePage - Indicates if the app is already added to the homepage.
-	 * @returns {string[]} An array of status texts for the app.
-	 */
-	private getAppStatusTexts(configuration: string, addedToHomePage: boolean): string[] {
-		let statusTexts = [];
-
-		if (configuration) {
-			try {
-				const parsedConfig = JSON.parse(configuration) as Configuration;
-				const tileConfig = JSON.parse(parsedConfig?.tileConfiguration) as TileConfig;
-				const infoText = (tileConfig?.display_info_text || "").toLowerCase();
-				if (infoText === Constants.DeprecatedInfoText) {
-					statusTexts.push(this._i18nBundle.getText("deprecatedApp") as string);
-				}
-			} catch (error: unknown) {
-				Log.warning((error as Error).message);
-			}
-		}
-
-		if (addedToHomePage) {
-			statusTexts.push(this._i18nBundle.getText("alreadyAddedApp") as string);
-		}
-
-		return statusTexts;
-	}
-
-	/**
-	 * Generates status text controls for the provided status texts.
-	 *
-	 * @private
-	 * @param {string} id - The id of the list item.
-	 * @param {string[]} stausTexts - The list of status texts.
-	 * @returns {Text[]} An array of Text controls with applied styles.
-	 */
-	private _generateStatusTexts(id: string, stausTexts: string[]): Text[] {
-		return stausTexts.map((status, index) => {
-			return new Text(recycleId(`${id}-statusText-${index}`), {
-				text: status
-			}).addStyleClass(this.applyStatusClass(status));
-		});
-	}
-
-	/**
-	 * Applies a CSS class to the status text based on its type.
-	 *
-	 * @private
-	 * @param {string} status - The status text to classify.
-	 * @returns {string} The CSS class for the status text.
-	 */
-	public applyStatusClass(status: string): string {
-		if (status === this._i18nBundle.getText("alreadyAddedApp")) {
-			return "addedAppStatusText";
-		} else if (status === this._i18nBundle.getText("deprecatedApp")) {
-			return "deprecatedAppStatusText";
-		} else {
-			return "";
-		}
-	}
-
 	/**
 	 * Handles the "Add Apps" button press event to add selected apps to favorites.
 	 *
@@ -772,7 +809,7 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 		let dynamicAppsPresent = false;
 
 		for (const app of userSelectedApps) {
-			const isStaticApp = app.getBindingContext()?.getProperty("isStaticApp") as boolean;
+			const isStaticApp = app.getBindingContext()?.getProperty("selectedView") === TileType.Static;
 			if (isStaticApp) staticAppsPresent = true;
 			else dynamicAppsPresent = true;
 
@@ -845,25 +882,25 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 	}
 
 	/**
-	 * Retrieves the InsightsContainer instance from the parent layout.
+	 * Retrieves the TilesContainer instance from the parent layout.
 	 *
 	 * @private
-	 * @returns {InsightsContainer | undefined} The AppsContainer instance or undefined if not found.
+	 * @returns {TilesContainer | undefined} The AppsContainer instance or undefined if not found.
 	 */
-	private getInsightsContainer(): InsightsContainer | undefined {
+	private getTilesContainer(): TilesContainer | undefined {
 		return this.getLayout()
 			?.getItems()
-			.find((container) => container instanceof InsightsContainer);
+			.find((container) => container instanceof TilesContainer);
 	}
 
 	/**
-	 * Refreshes the Insights tiles panel in the InsightsContainer.
+	 * Refreshes the Insights tiles panel in the TilesContainer.
 	 *
 	 * @private
 	 * @async
 	 */
 	private async refreshInsightsApps(): Promise<void> {
-		await this.getInsightsContainer()?.refreshData("tiles");
+		await this.getTilesContainer()?.refreshData("tiles");
 	}
 
 	/**
@@ -879,8 +916,7 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 		if (!selected) this.userSelectedApps.delete(listItem);
 		else {
 			const context = listItem.getBindingContext();
-			const addedToHomePage = context?.getProperty("addedToHomePage") as boolean;
-			if (!addedToHomePage) this.userSelectedApps.add(listItem);
+			if (context && !this.isAppAlreadyAdded(context)) this.userSelectedApps.add(listItem);
 		}
 
 		this.model.setProperty("/userSelectedApps", Array.from(this.userSelectedApps));
@@ -930,7 +966,7 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 		if (query.length !== 0 && query.length < Constants.MinQueryLength) {
 			textArea.setValueState(ValueState.Information);
 			textArea.setValueStateText(this._i18nBundle.getText("minLengthRequired"));
-		} else if (query.length > Constants.MaxDescriptionLength) {
+		} else if (query.length > Constants.MaxQueryLength) {
 			textArea.setValueState(ValueState.Warning);
 			textArea.setValueStateText(this._i18nBundle.getText("maxLengthExceeded"));
 		} else {
@@ -977,4 +1013,82 @@ export default class AppsAdditionPanel extends BaseSettingsPanel {
 			width: "20em"
 		});
 	}
+
+	/**
+	 * Creates the action to change view type (App / Tile) for suggested app.
+	 *
+	 * @private
+	 * @param {string} id - The unique ID for the container.
+	 * @returns {HBox} The app view action container.
+	 */
+	private getAppViewTypeAction(id: string): HBox {
+		const appViewToggleButton = new SegmentedButton(recycleId(`${id}-app-addAs-segmentedBtn`), {
+			selectedKey: "{selectedView}",
+			items: [
+				new SegmentedButtonItem(recycleId(`${id}-addAs-app`), {
+					key: TileType.Static,
+					text: this._i18nBundle.getText("addAsApp")
+				}),
+				new SegmentedButtonItem(recycleId(`${id}-addAs-tile`), {
+					key: TileType.Dynamic,
+					text: this._i18nBundle.getText("addAsTile")
+				})
+			]
+		});
+
+		const appViewLabel = new Label(recycleId(`${id}-addAsLabel`), {
+			text: this._i18nBundle.getText("addAs"),
+			showColon: true
+		});
+
+		try {
+			appViewToggleButton.setProperty("contentMode", "ContentFit");
+			appViewLabel.setWidth("100%");
+		} catch (error) {
+			Log.error(error instanceof Error ? error.message : (error as string));
+		}
+
+		return new HBox(recycleId(`${id}-app-addAs-container`), {
+			renderType: FlexRendertype.Bare,
+			alignItems: FlexAlignItems.Center,
+			gap: "0.25rem",
+			items: [appViewLabel, appViewToggleButton]
+		});
+	}
+
+	/**
+	 * Determines if an app is already added to the appropriate section based on its type and selected view.
+	 * For static apps or apps with Static view selected, checks if added to favorites apps section.
+	 * For dynamic apps with Dynamic view selected, checks if added to insights section.
+	 *
+	 * @private
+	 * @param {Context} context - The binding context for the app to check.
+	 * @returns {boolean} True if the app is already added to the corresponding section, false otherwise.
+	 */
+	private isAppAlreadyAdded(context: Context): boolean {
+		const selectedAppView = context.getProperty("selectedView") as TileType;
+		return (
+			selectedAppView === TileType.Static ? context.getProperty("addedToApps") : context.getProperty("addedToInsights")
+		) as boolean;
+	}
+
+	/**
+	 * Parses the tile configuration string from raw app configuration.
+	 *
+	 * @private
+	 * @param {string} configuration - The raw app configuration string containing tile settings.
+	 * @returns {TileConfig | null} The parsed tile configuration object or null if parsing fails.
+	 */
+	private parseTileConfiguration(configuration: string): TileConfig | null {
+		if (configuration) {
+			try {
+				const parsedConfig = JSON.parse(configuration) as Configuration;
+				const tileConfig = JSON.parse(parsedConfig?.tileConfiguration) as TileConfig;
+				return tileConfig;
+			} catch (error: unknown) {
+				Log.warning((error as Error).message);
+			}
+		}
+		return null;
+	}
 }