Refactor grid InfoPanel: sticky, responsive, new icons

- Redesigned MgGridInfoPanel to use a sticky, scroll-aware layout via JavaScript for better UX when scrolling.
- InfoPanel now uses a responsive CSS grid layout with container queries for 1/2/3 column display based on width.
- Added new toolbar icons using SVG masks for a modern, consistent look; updated toolbar item class names.
- Added "Prev Row" and "Next Row" navigation buttons to the grid toolbar, with corresponding methods in grid base classes.
- Unified edit state enum naming to MgGridEditState and updated all references.
- Improved InfoPanel cell rendering for better text overflow handling and tooltips.
- Updated CSS for InfoPanel and grid, including sticky pane support and icon styles.
- Registered mgGridInfoPanel.js in App.razor and index.html for JS interop.
- Minor UI/UX tweaks: InfoPanel header, background colors, and panel sizing.

FruitBankHybrid.Shared/Components/MgGridBase.cs

@@ -24,7 +24,7 @@ public class MgGridBase : DxGrid, IMgGridBase
     public bool IsSyncing => false;
 
     /// <inheritdoc />
-    public MgEditState EditState { get; private set; } = MgEditState.None;
+    public MgGridEditState GridEditState { get; private set; } = MgGridEditState.None;
 
     [Inject] public required IEnumerable<IAcLogWriterClientBase> LogWriters { get; set; }
     [Inject] public required FruitBankSignalRClient FruitBankSignalRClient { get; set; }
@@ -145,6 +145,30 @@ public class MgGridBase : DxGrid, IMgGridBase
             //StateHasChanged();
         }
     }
+    /// <summary>
+    /// Navigates to the previous row in the grid
+    /// </summary>
+    public void StepPrevRow()
+    {
+        var currentIndex = GetFocusedRowIndex();
+        if (currentIndex > 0)
+        {
+            SetFocusedRowIndex(currentIndex - 1);
+        }
+    }
+
+    /// <summary>
+    /// Navigates to the next row in the grid
+    /// </summary>
+    public void StepNextRow()
+    {
+        var currentIndex = GetFocusedRowIndex();
+        var visibleRowCount = GetVisibleRowCount();
+        if (currentIndex >= 0 && currentIndex < visibleRowCount - 1)
+        {
+            SetFocusedRowIndex(currentIndex + 1);
+        }
+    }
 
     async Task Grid_LayoutAutoLoading(GridPersistentLayoutEventArgs e)
     {

FruitBankHybrid.Shared/Components/Toolbars/MgGridToolbarTemplate.razor

@@ -12,36 +12,40 @@
 @using FruitBankHybrid.Shared.Services.SignalRs
 
 @inject IEnumerable<IAcLogWriterClientBase> LogWriters
-@inject FruitBankSignalRClient FruitBankSignalRClient
 @inject LoggedInModel LoggedInModel;
 
 <ToolbarBase @ref="Toolbar" Grid="Grid" ItemRenderStyleMode="ToolbarRenderStyleMode.Plain">
-	<DxToolbarItem Text="New" Click="NewItem_Click" IconCssClass="grid-toolbar-new" 
+	<DxToolbarItem Text="New" Click="NewItem_Click" IconCssClass="grid-new-row"
 				   Visible="@(!IsEditing)" Enabled="@(!IsSyncing)" />
-	<DxToolbarItem Text="Edit" Click="EditItem_Click" IconCssClass="grid-toolbar-edit" 
+	<DxToolbarItem Text="Edit" Click="EditItem_Click" IconCssClass="grid-edit-row"
 				   Visible="@(!IsEditing)" Enabled="@(HasFocusedRow && !IsSyncing)" />
-	<DxToolbarItem Text="Delete" Click="DeleteItem_Click" IconCssClass="grid-toolbar-delete" 
+	<DxToolbarItem Text="Delete" Click="DeleteItem_Click" IconCssClass="grid-delete-row"
 				   Visible="@(!IsEditing)" Enabled="@(LoggedInModel.IsDeveloper && HasFocusedRow && !IsSyncing)" />
 
-	<DxToolbarItem Text="Save" Click="SaveItem_Click" IconCssClass="grid-toolbar-save" 
+	<DxToolbarItem Text="Save" Click="SaveItem_Click" IconCssClass="grid-save"
 				   Visible="@IsEditing" RenderStyle="ButtonRenderStyle.Primary" />
-	<DxToolbarItem Text="Cancel" Click="CancelEdit_Click" IconCssClass="grid-toolbar-cancel" 
+	<DxToolbarItem Text="Cancel" Click="CancelEdit_Click" IconCssClass="grid-cancel"
 				   Visible="@IsEditing" RenderStyle="ButtonRenderStyle.Secondary" />
 
 	@if (!OnlyGridEditTools)
 	{
-		<DxToolbarItem Text="Column Chooser" BeginGroup="true" Click="ColumnChooserItem_Click" IconCssClass="grid-toolbar-column-chooser"
+		<DxToolbarItem Text="Prev Row" BeginGroup="true" Click="PrevRow_Click" IconCssClass="grid-chevron-up"
+		               Visible="@(!IsEditing)" Enabled="@(HasFocusedRow && !IsSyncing)" />
+		<DxToolbarItem Text="Next Row" Click="NextRow_Click" IconCssClass="grid-chevron-down"
+		               Visible="@(!IsEditing)" Enabled="@(HasFocusedRow && !IsSyncing)" />
+
+		<DxToolbarItem Text="Column Chooser" BeginGroup="true" Click="ColumnChooserItem_Click" IconCssClass="grid-column-chooser"
 		               Visible="@(!IsEditing)"/>
-		<DxToolbarItem Text="Export" IconCssClass="grid-toolbar-export"
+		<DxToolbarItem Text="Export" IconCssClass="grid-export"
 		               Visible="@(!IsEditing)" Enabled="@(LoggedInModel.IsAdministrator && HasFocusedRow)">
 			<Items>
-				<DxToolbarItem Text="To CSV" Click="ExportCsvItem_Click"/>
-				<DxToolbarItem Text="To XLSX" Click="ExportXlsxItem_Click"/>
-				<DxToolbarItem Text="To XLS" Click="ExportXlsItem_Click"/>
-				<DxToolbarItem Text="To PDF" Click="ExportPdfItem_Click"/>
+				<DxToolbarItem Text="To CSV" Click="ExportCsvItem_Click" IconCssClass="grid-export-xlsx"/>
+				<DxToolbarItem Text="To XLSX" Click="ExportXlsxItem_Click" IconCssClass="grid-export-xlsx"/>
+				<DxToolbarItem Text="To XLS" Click="ExportXlsItem_Click" IconCssClass="grid-export-xlsx"/>
+				<DxToolbarItem Text="To PDF" Click="ExportPdfItem_Click" IconCssClass="grid-export-pdf"/>
 			</Items>
 		</DxToolbarItem>
-		<DxToolbarItem Text="Reload data" BeginGroup="true" Click="ReloadData_Click"
+		<DxToolbarItem Text="Reload data" BeginGroup="true" Click="ReloadData_Click" IconCssClass="grid-refresh"
 		               Visible="@(!IsEditing)" Enabled="@(!IsSyncing && !_isReloadInProgress)"/>
 		<DxToolbarItem BeginGroup="true">
 		</DxToolbarItem>
@@ -64,7 +68,7 @@
 	/// <summary>
 	/// Whether the grid is currently in edit mode (New or Edit)
 	/// </summary>
-	private bool IsEditing => Grid?.EditState != MgEditState.None;
+	private bool IsEditing => Grid?.GridEditState != MgGridEditState.None;
 
 	/// <summary>
 	/// Whether the grid is currently syncing data
@@ -121,6 +125,16 @@
 		await Grid.CancelEditAsync();
 	}
 
+	void PrevRow_Click()
+	{
+		Grid.StepPrevRow();
+	}
+
+	void NextRow_Click()
+	{
+		Grid.StepNextRow();
+	}
+
 	void ColumnChooserItem_Click(ToolbarItemClickEventArgs e)
 	{
 		Grid.ShowColumnChooser();

FruitBankHybrid.Web/Components/App.razor

@@ -24,6 +24,7 @@
 
 <body class="dxbl-theme-fluent">
 <Routes @rendermode="InteractiveWebAssembly" />
+	<script src="_content/AyCode.Blazor.Components/js/mgGridInfoPanel.js"></script>
 	<script src="@Assets["_framework/blazor.web.js"]"></script>
 </body>
 

FruitBankHybrid/wwwroot/index.html

@@ -10,6 +10,7 @@
     <link href="_content/DevExpress.Blazor.Themes.Fluent/global.min.css" data-theme-id="fluent-blueLight" rel="stylesheet" />
     <link href="_content/DevExpress.Blazor.Themes.Fluent/modes/light.min.css" data-theme-id="fluent-blueLight" rel="stylesheet" />
     <link href="_content/DevExpress.Blazor.Themes.Fluent/accents/blue.min.css" data-theme-id="fluent-blueLight" rel="stylesheet" />
+    <link href="_content/DevExpress.Blazor/dx-blazor.css" rel="stylesheet" />
     <link href="_content/FruitBankHybrid.Shared/bootstrap/bootstrap.min.css" rel="stylesheet" />
     <link href="_content/FruitBankHybrid.Shared/app.css" rel="stylesheet" />
     <link href="app.css" rel="stylesheet" />