From b92baf957705b3b4d6beda2e55a00afeb32ec439 Mon Sep 17 00:00:00 2001
From: Hardeep Asrani <hardeepasrani@gmail.com>
Date: Tue, 17 Mar 2026 07:30:12 +0530
Subject: [PATCH 1/4] feat: add list view toggle to chart library with user
 meta persistence

Adds a grid/list view toggle to the Visualizer library page. List view
renders charts in a WP-style table. The selected view
is saved to user meta so it persists across visits without a redirect.

- List view: WP table layout, no canvas rendering, tooltips on actions
- Shortcode cell is clickable to copy to clipboard with visual feedback
- View preference saved via update_user_meta() with allowlist validation
- 10 Playwright e2e tests covering toggle, persistence, and table content
---
 classes/Visualizer/Render/Library.php | 185 +++++++++++-----
 css/library.css                       | 294 ++++++++++++++++++++++++++
 js/library.js                         |  23 ++
 tests/e2e/specs/library-view.spec.js  | 146 +++++++++++++
 4 files changed, 595 insertions(+), 53 deletions(-)
 create mode 100644 tests/e2e/specs/library-view.spec.js

diff --git a/classes/Visualizer/Render/Library.php b/classes/Visualizer/Render/Library.php
index 5a59d7fb1..b1d4c9802 100644
--- a/classes/Visualizer/Render/Library.php
+++ b/classes/Visualizer/Render/Library.php
@@ -28,6 +28,13 @@
  */
 class Visualizer_Render_Library extends Visualizer_Render {
 
+	/**
+	 * Cached result of _isListView() to avoid repeat DB reads per request.
+	 *
+	 * @var bool|null
+	 */
+	private $_list_view_cached = null;
+
 	/**
 	 * Renders library page.
 	 *
@@ -78,6 +85,8 @@ private function getDisplayForm() {
 		echo '<div class="visualizer-library-form">
 		<form action="' . admin_url( 'admin.php' ) . '">
 			<input type="hidden" name="page" value="' . Visualizer_Plugin::NAME . '"/>
+			<input type="hidden" name="view" value="' . esc_attr( $this->_isListView() ? 'list' : 'grid' ) . '"/>
+			<span class="viz-view-toggle-group">' . $this->_getViewToggleHTML() . '</span>
 				<select class="viz-filter" name="type">
 		';
 
@@ -282,34 +291,58 @@ private function _renderLibrary() {
 		echo '<div id="visualizer-content-wrapper">';
 		echo '<div id="tsdk_banner" class="visualizer-banner"></div>';
 		if ( ! empty( $this->charts ) ) {
-			echo '<div id="visualizer-library" class="visualizer-clearfix">';
-			$count = 0;
-			foreach ( $this->charts as $placeholder_id => $chart ) {
-				// show the sidebar after the first 3 charts.
-				++$count;
-				$enable_controls = false;
-				$settings = isset( $chart['settings'] ) ? $chart['settings'] : array();
-				if ( ! empty( $settings['controls']['controlType'] ) ) {
-					$column_index = $settings['controls']['filterColumnIndex'];
-					$column_label = $settings['controls']['filterColumnLabel'];
-					if ( 'false' !== $column_index || 'false' !== $column_label ) {
-						$enable_controls = true;
+			if ( $this->_isListView() ) {
+				echo '<div id="visualizer-library" class="visualizer-clearfix view-list">';
+				echo '<table class="wp-list-table widefat striped viz-charts-table">';
+				echo '<thead><tr>';
+				echo '<th class="col-id">' . esc_html__( 'ID', 'visualizer' ) . '</th>';
+				echo '<th class="col-title">' . esc_html__( 'Title', 'visualizer' ) . '</th>';
+				echo '<th class="col-type">' . esc_html__( 'Type', 'visualizer' ) . '</th>';
+				echo '<th class="col-shortcode">' . esc_html__( 'Shortcode', 'visualizer' ) . '</th>';
+				echo '<th class="col-actions">' . esc_html__( 'Actions', 'visualizer' ) . '</th>';
+				echo '</tr></thead><tbody>';
+				foreach ( $this->charts as $placeholder_id => $chart ) {
+					$enable_controls = false;
+					$settings        = isset( $chart['settings'] ) ? $chart['settings'] : array();
+					if ( ! empty( $settings['controls']['controlType'] ) ) {
+						$column_index = $settings['controls']['filterColumnIndex'];
+						$column_label = $settings['controls']['filterColumnLabel'];
+						if ( 'false' !== $column_index || 'false' !== $column_label ) {
+							$enable_controls = true;
+						}
 					}
-				}
-				if ( 3 === $count ) {
-					$this->_renderSidebar();
-					$this->_renderChartBox( $placeholder_id, $chart['id'], $enable_controls );
-				} else {
 					$this->_renderChartBox( $placeholder_id, $chart['id'], $enable_controls );
 				}
-			}
-			// show the sidebar if there are less than 3 charts.
-			if ( $count < 3 ) {
+				echo '</tbody></table>';
 				$this->_renderSidebar();
+				echo '</div>';
+			} else {
+				echo '<div id="visualizer-library" class="visualizer-clearfix view-grid">';
+				$count = 0;
+				foreach ( $this->charts as $placeholder_id => $chart ) {
+					// show the sidebar after the first 3 charts.
+					++$count;
+					$enable_controls = false;
+					$settings        = isset( $chart['settings'] ) ? $chart['settings'] : array();
+					if ( ! empty( $settings['controls']['controlType'] ) ) {
+						$column_index = $settings['controls']['filterColumnIndex'];
+						$column_label = $settings['controls']['filterColumnLabel'];
+						if ( 'false' !== $column_index || 'false' !== $column_label ) {
+							$enable_controls = true;
+						}
+					}
+					if ( 3 === $count ) {
+						$this->_renderSidebar();
+					}
+					$this->_renderChartBox( $placeholder_id, $chart['id'], $enable_controls );
+				}
+				if ( $count < 3 ) {
+					$this->_renderSidebar();
+				}
+				echo '</div>';
 			}
-			echo '</div>';
 		} else {
-			echo '<div id="visualizer-library" class="visualizer-clearfix">';
+			echo '<div id="visualizer-library" class="visualizer-clearfix view-grid">';
 			echo '<div class="items"><div class="visualizer-chart">';
 			echo '<div class="visualizer-chart-canvas visualizer-nochart-canvas">';
 			echo '<div class="visualizer-notfound">', esc_html__( 'No charts found', 'visualizer' ), '<p><h2><a href="javascript:;" class="add-new-h2 add-new-chart">', esc_html__( 'Add New', 'visualizer' ), '</a></h2></p></div>';
@@ -413,7 +446,28 @@ private function _renderChartBox( $placeholder_id, $chart_id, $with_filter = fal
 			$chart_status['title'] = __( 'Click to view the error', 'visualizer' );
 		}
 		$shortcode = sprintf( '[visualizer id="%s" class=""]', $chart_id );
-		echo '<div class="items"><div class="visualizer-chart"><div class="visualizer-chart-title">', esc_html( $title ), '</div>';
+
+		if ( $this->_isListView() ) {
+			// ── List view: table row ──
+			echo '<tr class="viz-list-row">';
+			echo '<td class="col-id">#' . esc_html( (string) $chart_id ) . '</td>';
+			echo '<td class="col-title">' . esc_html( $title ) . '</td>';
+			echo '<td class="col-type">' . ( ! empty( $chart_type ) ? '<span class="viz-chart-type-badge">' . esc_html( $chart_type ) . '</span>' : '&mdash;' ) . '</td>';
+			echo '<td class="col-shortcode"><code class="viz-shortcode-display">' . esc_html( $shortcode ) . '</code></td>';
+			echo '<td class="col-actions"><div class="visualizer-action-group">';
+			echo '<a class="visualizer-chart-action visualizer-chart-delete" href="' . $delete_url . '" onclick="return showNotice.warn();"><span class="dashicons dashicons-trash"></span><span class="tooltip-text">' . esc_html__( 'Delete', 'visualizer' ) . '</span></a>';
+			echo '<a class="visualizer-chart-action visualizer-chart-shortcode ' . esc_attr( $pro_class ) . '" href="javascript:;" data-clipboard-text="' . esc_attr( $shortcode ) . '"><span class="dashicons dashicons-shortcode ' . esc_attr( $pro_class ) . '"></span><span class="tooltip-text">' . esc_html__( 'Copy Shortcode', 'visualizer' ) . '</span></a>';
+			echo '<a class="visualizer-chart-action visualizer-chart-export ' . esc_attr( $pro_class ) . '" href="javascript:;" data-chart="' . $export_link . '"><span class="dashicons dashicons-download ' . esc_attr( $pro_class ) . '"></span><span class="tooltip-text">' . esc_html__( 'Export CSV', 'visualizer' ) . '</span></a>';
+			echo '<a class="visualizer-chart-action visualizer-chart-clone ' . esc_attr( $pro_class ) . '" href="' . $clone_url . '"><span class="dashicons dashicons-admin-page ' . esc_attr( $pro_class ) . '"></span><span class="tooltip-text">' . esc_html__( 'Duplicate', 'visualizer' ) . '</span></a>';
+			echo '<a class="visualizer-chart-action visualizer-chart-edit ' . esc_attr( $pro_class ) . '" href="javascript:;" data-chart="' . esc_attr( (string) $chart_id ) . '"><span class="dashicons dashicons-admin-generic ' . esc_attr( $pro_class ) . '"></span><span class="tooltip-text">' . esc_html__( 'Edit', 'visualizer' ) . '</span></a>';
+			echo '</div></td>';
+			echo '</tr>';
+			return;
+		}
+
+		// ── Grid view: card ──
+		$type_badge = ! empty( $chart_type ) ? '<span class="viz-chart-type-badge">' . esc_html( $chart_type ) . '</span>' : '';
+		echo '<div class="items"><div class="visualizer-chart"><div class="visualizer-chart-title"><span>' . esc_html( $title ) . '</span>' . $type_badge . '</div>';
 		if ( Visualizer_Module::is_pro() && $with_filter ) {
 			echo '<div id="chart_wrapper_' . $placeholder_id . '">';
 			echo '<div id="control_wrapper_' . $placeholder_id . '" class="vz-library-chart-filter"></div>';
@@ -426,14 +480,14 @@ private function _renderChartBox( $placeholder_id, $chart_id, $with_filter = fal
 		}
 		echo '<div class="visualizer-chart-footer visualizer-clearfix">';
 		echo '<div class="visualizer-action-group">';
-		echo '<a class="visualizer-chart-action visualizer-chart-delete" href="', $delete_url, '" onclick="return showNotice.warn();"><span class="dashicons dashicons-trash"></span><span class="tooltip-text">' . esc_attr__( 'Delete', 'visualizer' ) . '</span></a>';
-		echo '<a class="visualizer-chart-action visualizer-chart-shortcode ' . esc_attr( $pro_class ) . '" href="javascript:;" data-clipboard-text="', esc_attr( $shortcode ), '"><span class="dashicons dashicons-shortcode ' . esc_attr( $pro_class ) . '"></span><span class="tooltip-text">' . esc_attr__( 'Copy Shortcode', 'visualizer' ) . '</span></a>';
+		echo '<a class="visualizer-chart-action visualizer-chart-delete" href="', $delete_url, '" onclick="return showNotice.warn();"><span class="dashicons dashicons-trash"></span><span class="tooltip-text">' . esc_html__( 'Delete', 'visualizer' ) . '</span></a>';
+		echo '<a class="visualizer-chart-action visualizer-chart-shortcode ' . esc_attr( $pro_class ) . '" href="javascript:;" data-clipboard-text="', esc_attr( $shortcode ), '"><span class="dashicons dashicons-shortcode ' . esc_attr( $pro_class ) . '"></span><span class="tooltip-text">' . esc_html__( 'Copy Shortcode', 'visualizer' ) . '</span></a>';
 		if ( $this->can_chart_have_action( 'image', $chart_id ) ) {
-			echo '<a class="visualizer-chart-action visualizer-chart-image ' . esc_attr( $pro_class ) . '" href="javascript:;" data-chart="visualizer-', $chart_id, '" data-chart-title="', $title, '"><span class="dashicons dashicons-format-image ' . esc_attr( $pro_class ) . '"></span><span class="tooltip-text">' . esc_attr__( 'Download PNG', 'visualizer' ) . '</span></a>';
+			echo '<a class="visualizer-chart-action visualizer-chart-image ' . esc_attr( $pro_class ) . '" href="javascript:;" data-chart="visualizer-', $chart_id, '" data-chart-title="', $title, '"><span class="dashicons dashicons-format-image ' . esc_attr( $pro_class ) . '"></span><span class="tooltip-text">' . esc_html__( 'Download PNG', 'visualizer' ) . '</span></a>';
 		}
-		echo '<a class="visualizer-chart-action visualizer-chart-export ' . esc_attr( $pro_class ) . '" href="javascript:;" data-chart="', $export_link, '"><span class="dashicons dashicons-download ' . esc_attr( $pro_class ) . '"></span><span class="tooltip-text">' . esc_attr__( 'Export CSV', 'visualizer' ) . '</span></a>';
-		echo '<a class="visualizer-chart-action visualizer-chart-clone ' . esc_attr( $pro_class ) . '" href="', $clone_url, '"><span class="dashicons dashicons-admin-page ' . esc_attr( $pro_class ) . '"></span><span class="tooltip-text">' . esc_attr__( 'Duplicate', 'visualizer' ) . '</span></a>';
-		echo '<a class="visualizer-chart-action visualizer-chart-edit ' . esc_attr( $pro_class ) . '" href="javascript:;" data-chart="', $chart_id, '"><span class="dashicons dashicons-admin-generic ' . esc_attr( $pro_class ) . '"></span><span class="tooltip-text">' . esc_attr__( 'Edit', 'visualizer' ) . '</span></a>';
+		echo '<a class="visualizer-chart-action visualizer-chart-export ' . esc_attr( $pro_class ) . '" href="javascript:;" data-chart="', $export_link, '"><span class="dashicons dashicons-download ' . esc_attr( $pro_class ) . '"></span><span class="tooltip-text">' . esc_html__( 'Export CSV', 'visualizer' ) . '</span></a>';
+		echo '<a class="visualizer-chart-action visualizer-chart-clone ' . esc_attr( $pro_class ) . '" href="', $clone_url, '"><span class="dashicons dashicons-admin-page ' . esc_attr( $pro_class ) . '"></span><span class="tooltip-text">' . esc_html__( 'Duplicate', 'visualizer' ) . '</span></a>';
+		echo '<a class="visualizer-chart-action visualizer-chart-edit ' . esc_attr( $pro_class ) . '" href="javascript:;" data-chart="', $chart_id, '"><span class="dashicons dashicons-admin-generic ' . esc_attr( $pro_class ) . '"></span><span class="tooltip-text">' . esc_html__( 'Edit', 'visualizer' ) . '</span></a>';
 		echo '</div>';
 		do_action( 'visualizer_chart_languages', $chart_id );
 		echo '<hr><div class="visualizer-chart-status"><span title="' . __( 'Chart ID', 'visualizer' ) . '">(' . $chart_id . '):</span> <span class="visualizer-date" title="' . __( 'Last Updated', 'visualizer' ) . '">' . $chart_status['date'] . '</span><span class="visualizer-error"><i class="dashicons ' . $chart_status['icon'] . '" data-viz-error="' . esc_attr( str_replace( '"', "'", $chart_status['error'] ) ) . '" title="' . esc_attr( $chart_status['title'] ) . '"></i></span></div>';
@@ -441,36 +495,61 @@ private function _renderChartBox( $placeholder_id, $chart_id, $with_filter = fal
 		echo '</div></div>';
 	}
 
+	/**
+	 * Returns true when the library should render in list (no-preview) mode.
+	 *
+	 * Priority: ?view= URL param (saves to user meta) → saved user meta → grid default.
+	 *
+	 * No nonce needed: this is a bookmarkable UI preference URL. A nonce would expire
+	 * and break saved/shared links for zero real security gain — the value is allowlisted
+	 * to 'list'|'grid' before any write happens.
+	 */
+	private function _isListView(): bool {
+		if ( null !== $this->_list_view_cached ) {
+			return $this->_list_view_cached;
+		}
+		if ( isset( $_GET['view'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
+			$view = sanitize_text_field( wp_unslash( $_GET['view'] ) ); // phpcs:ignore WordPress.Security.NonceVerification.Recommended
+			if ( in_array( $view, array( 'list', 'grid' ), true ) ) {
+				update_user_meta( get_current_user_id(), 'visualizer_library_view', $view );
+			}
+			$this->_list_view_cached = ( 'list' === $view );
+		} else {
+			$saved                   = get_user_meta( get_current_user_id(), 'visualizer_library_view', true );
+			$this->_list_view_cached = ( 'list' === $saved );
+		}
+		return $this->_list_view_cached;
+	}
+
+	/**
+	 * Returns the HTML for the grid/list view toggle links.
+	 */
+	private function _getViewToggleHTML(): string {
+		$is_list  = $this->_isListView();
+		$grid_url = esc_url( add_query_arg( 'view', 'grid' ) );
+		$list_url = esc_url( add_query_arg( 'view', 'list' ) );
+		return '<a href="' . $grid_url . '" class="viz-view-toggle' . ( ! $is_list ? ' active' : '' ) . '" title="' . esc_attr__( 'Grid View', 'visualizer' ) . '"><span class="dashicons dashicons-screenoptions"></span></a>'
+			. '<a href="' . $list_url . '" class="viz-view-toggle' . ( $is_list ? ' active' : '' ) . '" title="' . esc_attr__( 'List View', 'visualizer' ) . '"><span class="dashicons dashicons-list-view"></span></a>';
+	}
+
 	/**
 	 * Render 2-col sidebar
 	 */
 	private function _renderSidebar() {
 		if ( ! Visualizer_Module::is_pro() ) {
-			echo '<div class="items">';
-			echo '<div class="viz-pro">';
-			echo '<div id="visualizer-sidebar" class="one-columns">';
-			echo '<div class="visualizer-sidebar-box">';
-			echo '<h3>' . __( 'Discover the power of PRO!', 'visualizer' ) . '</h3><ul>';
-			if ( Visualizer_Module_Admin::proFeaturesLocked() ) {
-				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( '6 more chart types', 'visualizer' );
-			} else {
-				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( '11 more chart types', 'visualizer' ) . '</li>';
-				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Synchronize Data Periodically', 'visualizer' ) . '</li>';
-				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'ChartJS Charts', 'visualizer' ) . '</li>';
-				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Table Google chart', 'visualizer' ) . '</li>';
-				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Frontend Actions(Print, Export, Copy, Download)', 'visualizer' ) . '</li>';
-			}
-			echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Spreadsheet like editor', 'visualizer' ) . '</li>';
-			echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Import from other charts', 'visualizer' ) . '</li>';
-			echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Use database query to create charts', 'visualizer' ) . '</li>';
-			echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Create charts from WordPress tables', 'visualizer' ) . '</li>';
-			echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Frontend editor', 'visualizer' ) . '</li>';
-			echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Private charts', 'visualizer' ) . '</li>';
-			echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'WPML support for translating charts', 'visualizer' ) . '</li>';
-			echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Integration with Woocommerce Data endpoints', 'visualizer' ) . '</li>';
-			echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Auto-sync with online files', 'visualizer' ) . '</li></ul>';
-			echo '<p class="vz-sidebar-box-action"><a href="' . tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'sidebarMenuUpgrade', 'index' ) . '#pro-features" target="_blank" class="button button-secondary">' . __( 'View more features', 'visualizer' ) . '</a><a href="' . tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'sidebarMenuUpgrade', 'index' ) . '#pricing" target="_blank" class="button button-primary">' . __( 'Upgrade Now', 'visualizer' ) . '</a></p>';
+			$upgrade_url  = tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'sidebarMenuUpgrade', 'index' );
+			$chart_types  = Visualizer_Module_Admin::proFeaturesLocked() ? __( '6 more chart types', 'visualizer' ) : __( '11 more chart types', 'visualizer' );
+			echo '<div class="items items--upsell">';
+			echo '<div class="viz-upsell-banner">';
+			echo '<span class="dashicons dashicons-star-filled viz-upsell-banner__icon"></span>';
+			echo '<div class="viz-upsell-banner__text">';
+			echo '<strong>' . esc_html__( 'Unlock the full power of Visualizer PRO!', 'visualizer' ) . '</strong>';
+			/* translators: %s: number of additional chart types (e.g. "11 more chart types") */
+			echo '<span>' . sprintf( esc_html__( '%s, periodic data sync, database queries, frontend editor, and more.', 'visualizer' ), esc_html( $chart_types ) ) . '</span>';
 			echo '</div>';
+			echo '<div class="viz-upsell-banner__actions">';
+			echo '<a href="' . esc_url( $upgrade_url . '#pro-features' ) . '" target="_blank" class="button button-secondary">' . esc_html__( 'View Features', 'visualizer' ) . '</a>';
+			echo '<a href="' . esc_url( $upgrade_url . '#pricing' ) . '" target="_blank" class="button button-primary">' . esc_html__( 'Upgrade Now', 'visualizer' ) . '</a>';
 			echo '</div>';
 			echo '</div>';
 			echo '</div>';
diff --git a/css/library.css b/css/library.css
index b11e71dbb..d30e10888 100644
--- a/css/library.css
+++ b/css/library.css
@@ -627,3 +627,297 @@ div#visualizer-types ul, div#visualizer-types form p {
 	text-align: inherit;
 	text-decoration: none;
 }
+
+/* ── View toggle buttons ── */
+span.viz-view-toggle-group {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	margin-left: 0;
+	margin-right: 8px;
+	vertical-align: middle;
+	border: 1px solid #c3c4c7;
+	border-radius: 4px;
+	padding: 1px;
+	background: #f6f7f7;
+}
+
+.viz-view-toggle {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
+	padding: 0;
+	cursor: pointer;
+	background: transparent;
+	border: none;
+	border-radius: 3px;
+	color: #646970;
+	line-height: 1;
+	text-decoration: none;
+}
+
+.viz-view-toggle.active {
+	background: #007CBA;
+	color: #fff;
+}
+
+.viz-view-toggle:hover:not(.active) {
+	background: #e0e0e0;
+	color: #1d2327;
+}
+
+.viz-view-toggle:focus {
+	outline: 2px solid #007CBA;
+	outline-offset: 0;
+	box-shadow: none;
+}
+
+/* ── Edit button — more visible ── */
+.visualizer-action-group:not(.visualizer-nochart) .visualizer-chart-action.visualizer-chart-edit {
+	background-color: #007CBA;
+	color: #fff;
+	border-radius: 4px;
+}
+
+.visualizer-action-group:not(.visualizer-nochart) .visualizer-chart-action.visualizer-chart-edit:hover,
+.visualizer-action-group:not(.visualizer-nochart) .visualizer-chart-action.visualizer-chart-edit:focus {
+	background-color: #0069a6 !important;
+	color: #fff !important;
+}
+
+/* ── Compact upsell banner ── */
+#visualizer-library .items--upsell {
+	width: 100%;
+}
+
+.viz-upsell-banner {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	background: #f0f6fc;
+	border: 1px solid #c3daf9;
+	border-left: 4px solid #007CBA;
+	border-radius: 4px;
+	padding: 12px 16px;
+	margin-bottom: 10px;
+}
+
+.viz-upsell-banner__icon {
+	color: #007CBA;
+	font-size: 20px;
+	flex-shrink: 0;
+}
+
+.viz-upsell-banner__text {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.viz-upsell-banner__text strong {
+	font-size: 13px;
+	font-weight: 600;
+	color: #1d2327;
+}
+
+.viz-upsell-banner__text span {
+	font-size: 12px;
+	color: #50575e;
+}
+
+.viz-upsell-banner__actions {
+	display: flex;
+	gap: 8px;
+	flex-shrink: 0;
+}
+
+/* ── Chart type badge (list view only) ── */
+.viz-chart-type-badge {
+	display: none;
+	font-size: 11px;
+	font-weight: 500;
+	text-transform: capitalize;
+	background: #e8f0f8;
+	color: #007CBA;
+	border: 1px solid #c3daf9;
+	border-radius: 10px;
+	padding: 2px 8px;
+	white-space: nowrap;
+	flex-shrink: 0;
+}
+
+/* ── List view: WP-style table ── */
+#visualizer-library.view-list {
+	display: block;
+	margin: 20px 0;
+}
+
+.viz-charts-table {
+	border-collapse: collapse;
+	width: 100%;
+}
+
+.viz-charts-table thead th {
+	padding: 10px 12px;
+	font-size: 12px;
+	font-weight: 700;
+	color: #1d2327;
+	text-align: left;
+	background: #f6f7f7;
+	border-bottom: 2px solid #c3c4c7;
+	white-space: nowrap;
+}
+
+.viz-charts-table tbody tr {
+	background: #fff;
+	border-bottom: 1px solid #f0f0f1;
+	transition: background 0.1s;
+}
+
+.viz-charts-table tbody tr:hover {
+	background: #f6f7f7;
+}
+
+.viz-charts-table td {
+	padding: 10px 12px;
+	vertical-align: middle;
+	font-size: 13px;
+	color: #3c434a;
+}
+
+/* Column widths */
+.viz-charts-table .col-id {
+	width: 50px;
+	font-weight: 600;
+	color: #787c82;
+}
+
+.viz-charts-table .col-title {
+	font-weight: 600;
+	color: #1d2327;
+}
+
+.viz-charts-table .col-type {
+	width: 110px;
+}
+
+.viz-charts-table .col-shortcode {
+	width: 260px;
+}
+
+.viz-charts-table .col-actions {
+	width: 1%;
+	white-space: nowrap;
+}
+
+/* Type badge in table */
+.viz-charts-table .viz-chart-type-badge {
+	display: inline-block;
+}
+
+/* Shortcode cell */
+.viz-shortcode-display {
+	display: inline-block;
+	font-size: 11px;
+	background: #f6f7f7;
+	border: 1px solid #ddd;
+	border-radius: 3px;
+	padding: 3px 7px;
+	color: #50575e;
+	white-space: nowrap;
+	max-width: 260px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	vertical-align: middle;
+	font-family: Consolas, Monaco, monospace;
+	cursor: pointer;
+	transition: background 0.15s, border-color 0.15s;
+}
+
+.viz-shortcode-display:hover {
+	background: #e8f0f8;
+	border-color: #bfdbfe;
+	color: #1d2327;
+}
+
+.viz-shortcode-display.viz-shortcode-copied {
+	background: #dcfce7;
+	border-color: #86efac;
+	color: #15803d;
+}
+
+/* Action buttons in table: colored bordered icon buttons */
+.viz-charts-table .visualizer-action-group {
+	display: flex;
+	flex-wrap: nowrap;
+	gap: 4px;
+	justify-content: flex-end;
+}
+
+.viz-charts-table .visualizer-chart-action {
+	width: 32px;
+	height: 32px;
+	border: 1px solid #c3c4c7;
+	border-radius: 4px;
+	background: #fff;
+	color: #646970;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.viz-charts-table .visualizer-chart-action:hover {
+	background: #f6f7f7;
+}
+
+.viz-charts-table .visualizer-chart-action.visualizer-chart-delete {
+	border-color: #fca5a5;
+	color: #dc2626;
+	margin-right: 0;
+}
+
+.viz-charts-table .visualizer-chart-action.visualizer-chart-delete:hover {
+	background: #fef2f2;
+}
+
+.viz-charts-table .visualizer-chart-action.visualizer-chart-shortcode {
+	color: #2563eb;
+	border-color: #bfdbfe;
+}
+
+.viz-charts-table .visualizer-chart-action.visualizer-chart-shortcode:hover {
+	background: #eff6ff;
+}
+
+.viz-charts-table .visualizer-chart-action.visualizer-chart-clone,
+.viz-charts-table .visualizer-chart-action.visualizer-chart-export {
+	color: #64748b;
+	border-color: #cbd5e1;
+}
+
+.viz-charts-table .visualizer-chart-action.visualizer-chart-clone:hover,
+.viz-charts-table .visualizer-chart-action.visualizer-chart-export:hover {
+	background: #f8fafc;
+}
+
+/* Edit button stays blue in table */
+.viz-charts-table .visualizer-action-group .visualizer-chart-action.visualizer-chart-edit {
+	background-color: #007CBA;
+	border-color: #007CBA;
+	color: #fff;
+	border-radius: 4px;
+}
+
+.viz-charts-table .visualizer-action-group .visualizer-chart-action.visualizer-chart-edit:hover {
+	background-color: #0069a6 !important;
+	border-color: #0069a6 !important;
+	color: #fff !important;
+}
+
+/* Upsell banner after the table */
+#visualizer-library.view-list .items--upsell {
+	margin-top: 12px;
+}
diff --git a/js/library.js b/js/library.js
index d0efddd14..046ed7b53 100644
--- a/js/library.js
+++ b/js/library.js
@@ -46,6 +46,9 @@ function createPopupProBlocker( $ , e ) {
     var resizeTimeout;
 
     $.fn.adjust = function () {
+        if ( $( '#visualizer-library' ).hasClass( 'view-list' ) ) {
+            return this;
+        }
         return $(this).each(function () {
             var width = $('#visualizer-library').width(),
                 margin = width * 0.02;
@@ -85,6 +88,26 @@ function createPopupProBlocker( $ , e ) {
             $(this).parent('form').submit();
         });
 
+        // Copy shortcode when clicking the code display in list view.
+        $( document ).on( 'click', '.viz-shortcode-display', function () {
+            var text = $( this ).text();
+            var el   = this;
+            if ( navigator.clipboard ) {
+                navigator.clipboard.writeText( text );
+            } else {
+                var ta = document.createElement( 'textarea' );
+                ta.value = text;
+                document.body.appendChild( ta );
+                ta.select();
+                document.execCommand( 'copy' );
+                document.body.removeChild( ta );
+            }
+            $( el ).addClass( 'viz-shortcode-copied' );
+            setTimeout( function () {
+                $( el ).removeClass( 'viz-shortcode-copied' );
+            }, 1200 );
+        } );
+
         $('.visualizer-chart-shortcode').click(function (event) {
 
             if ( createPopupProBlocker( $, event ) ) {
diff --git a/tests/e2e/specs/library-view.spec.js b/tests/e2e/specs/library-view.spec.js
new file mode 100644
index 000000000..b002d2b25
--- /dev/null
+++ b/tests/e2e/specs/library-view.spec.js
@@ -0,0 +1,146 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+/**
+ * Internal dependencies
+ */
+const { createChartWithAdmin, deleteAllCharts, waitForLibraryToLoad } = require( '../utils/common' );
+
+test.describe( 'Library View Toggle', () => {
+
+	test.beforeEach( async ( { admin, requestUtils } ) => {
+		await deleteAllCharts( requestUtils );
+		// Explicitly start in grid view and reset user meta preference.
+		await admin.visitAdminPage( 'admin.php?page=visualizer&view=grid' );
+	} );
+
+	test.afterEach( async ( { admin } ) => {
+		// Reset view preference to grid so other test suites start in a clean state.
+		await admin.visitAdminPage( 'admin.php?page=visualizer&view=grid' );
+	} );
+
+	test( 'view toggle buttons are visible', async ( { page } ) => {
+		await expect( page.locator( '.viz-view-toggle-group' ) ).toBeVisible();
+		await expect( page.locator( 'a.viz-view-toggle' ).count() ).resolves.toBe( 2 );
+
+		// Grid toggle is active by default.
+		await expect( page.locator( 'a.viz-view-toggle.active[title="Grid View"]' ) ).toBeVisible();
+		await expect( page.locator( 'a.viz-view-toggle:not(.active)[title="List View"]' ) ).toBeVisible();
+	} );
+
+	test( 'default view is grid', async ( { page } ) => {
+		await expect( page.locator( '#visualizer-library.view-grid' ) ).toBeVisible();
+		await expect( page.locator( '#visualizer-library.view-list' ) ).toHaveCount( 0 );
+	} );
+
+	test( 'clicking list toggle navigates to list view and flips active state', async ( { page } ) => {
+		await page.locator( 'a.viz-view-toggle[title="List View"]' ).click();
+		await page.waitForURL( '**/admin.php**view=list**' );
+
+		await expect( page ).toHaveURL( /view=list/ );
+		// Active state should flip.
+		await expect( page.locator( 'a.viz-view-toggle.active[title="List View"]' ) ).toBeVisible();
+		await expect( page.locator( 'a.viz-view-toggle:not(.active)[title="Grid View"]' ) ).toBeVisible();
+	} );
+
+	test( 'list view table has correct column headers', async ( { admin, page } ) => {
+		await createChartWithAdmin( admin, page );
+		await admin.visitAdminPage( 'admin.php?page=visualizer&view=list' );
+		await waitForLibraryToLoad( page );
+
+		const headers = page.locator( 'table.viz-charts-table thead th' );
+		await expect( headers ).toHaveCount( 5 );
+		await expect( headers.nth( 0 ) ).toHaveText( 'ID' );
+		await expect( headers.nth( 1 ) ).toHaveText( 'Title' );
+		await expect( headers.nth( 2 ) ).toHaveText( 'Type' );
+		await expect( headers.nth( 3 ) ).toHaveText( 'Shortcode' );
+		await expect( headers.nth( 4 ) ).toHaveText( 'Actions' );
+	} );
+
+	test( 'list view shows chart data in table row', async ( { admin, page } ) => {
+		const chartId = await createChartWithAdmin( admin, page );
+		await admin.visitAdminPage( 'admin.php?page=visualizer&view=list' );
+		await waitForLibraryToLoad( page );
+
+		const row = page.locator( 'tr.viz-list-row' ).filter( { hasText: `#${ chartId }` } );
+		await expect( row ).toBeVisible();
+
+		// Shortcode cell contains the correct chart ID.
+		await expect( row.locator( 'code.viz-shortcode-display' ) ).toContainText( `[visualizer id="${ chartId }"` );
+
+		// All action buttons are present.
+		await expect( row.locator( 'a.visualizer-chart-edit' ) ).toBeVisible();
+		await expect( row.locator( 'a.visualizer-chart-delete' ) ).toBeVisible();
+		await expect( row.locator( 'a.visualizer-chart-clone' ) ).toBeVisible();
+		await expect( row.locator( 'a.visualizer-chart-export' ) ).toBeVisible();
+		await expect( row.locator( 'a.visualizer-chart-shortcode' ) ).toBeVisible();
+	} );
+
+	test( 'list view does not render chart canvas elements', async ( { admin, page } ) => {
+		const chartId = await createChartWithAdmin( admin, page );
+		await admin.visitAdminPage( 'admin.php?page=visualizer&view=list' );
+		await waitForLibraryToLoad( page );
+
+		// No canvas/chart preview elements — list view skips rendering them.
+		await expect( page.locator( `#visualizer-${ chartId }` ) ).toHaveCount( 0 );
+		await expect( page.locator( '.visualizer-chart-canvas' ) ).toHaveCount( 0 );
+	} );
+
+	test( 'clicking shortcode display copies shortcode to clipboard', async ( { admin, page } ) => {
+		const chartId = await createChartWithAdmin( admin, page );
+		await admin.visitAdminPage( 'admin.php?page=visualizer&view=list' );
+		await waitForLibraryToLoad( page );
+
+		const row = page.locator( 'tr.viz-list-row' ).filter( { hasText: `#${ chartId }` } );
+		await row.locator( 'code.viz-shortcode-display' ).click();
+
+		const clipboard = await page.evaluate( () => navigator.clipboard.readText() );
+		expect( clipboard ).toMatch( new RegExp( `\\[visualizer id="${ chartId }"` ) );
+	} );
+
+	test( 'view preference persists across page visits via user meta', async ( { admin, page } ) => {
+		await createChartWithAdmin( admin, page );
+		// createChartWithAdmin lands on admin.php?page=visualizer — chart exists, grid view (user meta = grid).
+
+		// Switch to list view — saves 'list' to user meta.
+		await page.locator( 'a.viz-view-toggle[title="List View"]' ).click();
+		await page.waitForURL( '**/admin.php**view=list**' );
+		await waitForLibraryToLoad( page );
+
+		// Navigate back without ?view= param — user meta should restore list view directly.
+		await admin.visitAdminPage( 'admin.php?page=visualizer' );
+		await waitForLibraryToLoad( page );
+
+		await expect( page.locator( '#visualizer-library.view-list' ) ).toBeVisible();
+		await expect( page.locator( 'table.viz-charts-table' ) ).toBeVisible();
+	} );
+
+	test( 'switching back to grid view works', async ( { admin, page } ) => {
+		await createChartWithAdmin( admin, page );
+		await admin.visitAdminPage( 'admin.php?page=visualizer&view=list' );
+		await waitForLibraryToLoad( page );
+		await expect( page.locator( '#visualizer-library.view-list' ) ).toBeVisible();
+
+		await page.locator( 'a.viz-view-toggle[title="Grid View"]' ).click();
+		await page.waitForURL( '**/admin.php**view=grid**' );
+		await waitForLibraryToLoad( page );
+
+		await expect( page.locator( '#visualizer-library.view-grid' ) ).toBeVisible();
+		await expect( page.locator( 'table.viz-charts-table' ) ).toHaveCount( 0 );
+	} );
+
+	test( 'applying filters preserves the current view', async ( { admin, page } ) => {
+		await createChartWithAdmin( admin, page );
+		await admin.visitAdminPage( 'admin.php?page=visualizer&view=list' );
+		await waitForLibraryToLoad( page );
+
+		// Submit the filter form — the hidden view input should carry list view through.
+		await page.getByRole( 'button', { name: 'Apply Filters' } ).click();
+		await waitForLibraryToLoad( page );
+
+		await expect( page.locator( '#visualizer-library.view-list' ) ).toBeVisible();
+	} );
+
+} );

From a406e7edd813dfa860101b237ff7329522c3f6ca Mon Sep 17 00:00:00 2001
From: Hardeep Asrani <hardeepasrani@gmail.com>
Date: Tue, 17 Mar 2026 16:45:00 +0530
Subject: [PATCH 2/4] fix: qa issues

---
 classes/Visualizer/Render/Library.php | 63 ++++++++++++++++++++-------
 1 file changed, 47 insertions(+), 16 deletions(-)

diff --git a/classes/Visualizer/Render/Library.php b/classes/Visualizer/Render/Library.php
index b1d4c9802..4e49d5437 100644
--- a/classes/Visualizer/Render/Library.php
+++ b/classes/Visualizer/Render/Library.php
@@ -537,22 +537,53 @@ private function _getViewToggleHTML(): string {
 	 */
 	private function _renderSidebar() {
 		if ( ! Visualizer_Module::is_pro() ) {
-			$upgrade_url  = tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'sidebarMenuUpgrade', 'index' );
-			$chart_types  = Visualizer_Module_Admin::proFeaturesLocked() ? __( '6 more chart types', 'visualizer' ) : __( '11 more chart types', 'visualizer' );
-			echo '<div class="items items--upsell">';
-			echo '<div class="viz-upsell-banner">';
-			echo '<span class="dashicons dashicons-star-filled viz-upsell-banner__icon"></span>';
-			echo '<div class="viz-upsell-banner__text">';
-			echo '<strong>' . esc_html__( 'Unlock the full power of Visualizer PRO!', 'visualizer' ) . '</strong>';
-			/* translators: %s: number of additional chart types (e.g. "11 more chart types") */
-			echo '<span>' . sprintf( esc_html__( '%s, periodic data sync, database queries, frontend editor, and more.', 'visualizer' ), esc_html( $chart_types ) ) . '</span>';
-			echo '</div>';
-			echo '<div class="viz-upsell-banner__actions">';
-			echo '<a href="' . esc_url( $upgrade_url . '#pro-features' ) . '" target="_blank" class="button button-secondary">' . esc_html__( 'View Features', 'visualizer' ) . '</a>';
-			echo '<a href="' . esc_url( $upgrade_url . '#pricing' ) . '" target="_blank" class="button button-primary">' . esc_html__( 'Upgrade Now', 'visualizer' ) . '</a>';
-			echo '</div>';
-			echo '</div>';
-			echo '</div>';
+			if ( $this->_isListView() ) {
+				$upgrade_url = tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'sidebarMenuUpgrade', 'index' );
+				$chart_types = Visualizer_Module_Admin::proFeaturesLocked() ? __( '6 more chart types', 'visualizer' ) : __( '11 more chart types', 'visualizer' );
+				echo '<div class="items items--upsell">';
+				echo '<div class="viz-upsell-banner">';
+				echo '<span class="dashicons dashicons-star-filled viz-upsell-banner__icon"></span>';
+				echo '<div class="viz-upsell-banner__text">';
+				echo '<strong>' . esc_html__( 'Unlock the full power of Visualizer PRO!', 'visualizer' ) . '</strong>';
+				/* translators: %s: number of additional chart types (e.g. "11 more chart types") */
+				echo '<span>' . sprintf( esc_html__( '%s, periodic data sync, database queries, frontend editor, and more.', 'visualizer' ), esc_html( $chart_types ) ) . '</span>';
+				echo '</div>';
+				echo '<div class="viz-upsell-banner__actions">';
+				echo '<a href="' . esc_url( $upgrade_url . '#pro-features' ) . '" target="_blank" class="button button-secondary">' . esc_html__( 'View Features', 'visualizer' ) . '</a>';
+				echo '<a href="' . esc_url( $upgrade_url . '#pricing' ) . '" target="_blank" class="button button-primary">' . esc_html__( 'Upgrade Now', 'visualizer' ) . '</a>';
+				echo '</div>';
+				echo '</div>';
+				echo '</div>';
+			} else {
+				echo '<div class="items">';
+				echo '<div class="viz-pro">';
+				echo '<div id="visualizer-sidebar" class="one-columns">';
+				echo '<div class="visualizer-sidebar-box">';
+				echo '<h3>' . __( 'Discover the power of PRO!', 'visualizer' ) . '</h3><ul>';
+				if ( Visualizer_Module_Admin::proFeaturesLocked() ) {
+					echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( '6 more chart types', 'visualizer' );
+				} else {
+					echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( '11 more chart types', 'visualizer' ) . '</li>';
+					echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Synchronize Data Periodically', 'visualizer' ) . '</li>';
+					echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'ChartJS Charts', 'visualizer' ) . '</li>';
+					echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Table Google chart', 'visualizer' ) . '</li>';
+					echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Frontend Actions(Print, Export, Copy, Download)', 'visualizer' ) . '</li>';
+				}
+				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Spreadsheet like editor', 'visualizer' ) . '</li>';
+				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Import from other charts', 'visualizer' ) . '</li>';
+				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Use database query to create charts', 'visualizer' ) . '</li>';
+				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Create charts from WordPress tables', 'visualizer' ) . '</li>';
+				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Frontend editor', 'visualizer' ) . '</li>';
+				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Private charts', 'visualizer' ) . '</li>';
+				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'WPML support for translating charts', 'visualizer' ) . '</li>';
+				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Integration with Woocommerce Data endpoints', 'visualizer' ) . '</li>';
+				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Auto-sync with online files', 'visualizer' ) . '</li></ul>';
+				echo '<p class="vz-sidebar-box-action"><a href="' . tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'sidebarMenuUpgrade', 'index' ) . '#pro-features" target="_blank" class="button button-secondary">' . __( 'View more features', 'visualizer' ) . '</a><a href="' . tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'sidebarMenuUpgrade', 'index' ) . '#pricing" target="_blank" class="button button-primary">' . __( 'Upgrade Now', 'visualizer' ) . '</a></p>';
+				echo '</div>';
+				echo '</div>';
+				echo '</div>';
+				echo '</div>';
+			}
 		}
 	}
 }

From 0010c709c86d9edf9df3f8ae14f37c41dbea119b Mon Sep 17 00:00:00 2001
From: Hardeep Asrani <hardeepasrani@gmail.com>
Date: Tue, 17 Mar 2026 19:03:43 +0530
Subject: [PATCH 3/4] chore: fix qa

---
 classes/Visualizer/Render/Library.php | 10 +++++-----
 css/library.css                       |  4 +---
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/classes/Visualizer/Render/Library.php b/classes/Visualizer/Render/Library.php
index 4e49d5437..9c1fcbe12 100644
--- a/classes/Visualizer/Render/Library.php
+++ b/classes/Visualizer/Render/Library.php
@@ -293,6 +293,7 @@ private function _renderLibrary() {
 		if ( ! empty( $this->charts ) ) {
 			if ( $this->_isListView() ) {
 				echo '<div id="visualizer-library" class="visualizer-clearfix view-list">';
+				$this->_renderSidebar();
 				echo '<table class="wp-list-table widefat striped viz-charts-table">';
 				echo '<thead><tr>';
 				echo '<th class="col-id">' . esc_html__( 'ID', 'visualizer' ) . '</th>';
@@ -314,7 +315,6 @@ private function _renderLibrary() {
 					$this->_renderChartBox( $placeholder_id, $chart['id'], $enable_controls );
 				}
 				echo '</tbody></table>';
-				$this->_renderSidebar();
 				echo '</div>';
 			} else {
 				echo '<div id="visualizer-library" class="visualizer-clearfix view-grid">';
@@ -354,7 +354,7 @@ private function _renderLibrary() {
 			echo '<span class="visualizer-chart-action visualizer-nochart-image"><span class="dashicons dashicons-format-image"></span></span>';
 			echo '<span class="visualizer-chart-action visualizer-nochart-export"><span class="dashicons dashicons-download"></span></span>';
 			echo '<span class="visualizer-chart-action visualizer-nochart-clone"><span class="dashicons dashicons-admin-page"></span></span>';
-			echo '<span class="visualizer-chart-action visualizer-nochart-edit"><span class="dashicons dashicons-admin-generic"></span></span>';
+			echo '<span class="visualizer-chart-action visualizer-nochart-edit"><span class="dashicons dashicons-edit"></span></span>';
 			echo '</div>';
 			echo '</div>';
 			echo '</div></div>';
@@ -459,7 +459,7 @@ private function _renderChartBox( $placeholder_id, $chart_id, $with_filter = fal
 			echo '<a class="visualizer-chart-action visualizer-chart-shortcode ' . esc_attr( $pro_class ) . '" href="javascript:;" data-clipboard-text="' . esc_attr( $shortcode ) . '"><span class="dashicons dashicons-shortcode ' . esc_attr( $pro_class ) . '"></span><span class="tooltip-text">' . esc_html__( 'Copy Shortcode', 'visualizer' ) . '</span></a>';
 			echo '<a class="visualizer-chart-action visualizer-chart-export ' . esc_attr( $pro_class ) . '" href="javascript:;" data-chart="' . $export_link . '"><span class="dashicons dashicons-download ' . esc_attr( $pro_class ) . '"></span><span class="tooltip-text">' . esc_html__( 'Export CSV', 'visualizer' ) . '</span></a>';
 			echo '<a class="visualizer-chart-action visualizer-chart-clone ' . esc_attr( $pro_class ) . '" href="' . $clone_url . '"><span class="dashicons dashicons-admin-page ' . esc_attr( $pro_class ) . '"></span><span class="tooltip-text">' . esc_html__( 'Duplicate', 'visualizer' ) . '</span></a>';
-			echo '<a class="visualizer-chart-action visualizer-chart-edit ' . esc_attr( $pro_class ) . '" href="javascript:;" data-chart="' . esc_attr( (string) $chart_id ) . '"><span class="dashicons dashicons-admin-generic ' . esc_attr( $pro_class ) . '"></span><span class="tooltip-text">' . esc_html__( 'Edit', 'visualizer' ) . '</span></a>';
+			echo '<a class="visualizer-chart-action visualizer-chart-edit ' . esc_attr( $pro_class ) . '" href="javascript:;" data-chart="' . esc_attr( (string) $chart_id ) . '"><span class="dashicons dashicons-edit ' . esc_attr( $pro_class ) . '"></span><span class="tooltip-text">' . esc_html__( 'Edit', 'visualizer' ) . '</span></a>';
 			echo '</div></td>';
 			echo '</tr>';
 			return;
@@ -487,7 +487,7 @@ private function _renderChartBox( $placeholder_id, $chart_id, $with_filter = fal
 		}
 		echo '<a class="visualizer-chart-action visualizer-chart-export ' . esc_attr( $pro_class ) . '" href="javascript:;" data-chart="', $export_link, '"><span class="dashicons dashicons-download ' . esc_attr( $pro_class ) . '"></span><span class="tooltip-text">' . esc_html__( 'Export CSV', 'visualizer' ) . '</span></a>';
 		echo '<a class="visualizer-chart-action visualizer-chart-clone ' . esc_attr( $pro_class ) . '" href="', $clone_url, '"><span class="dashicons dashicons-admin-page ' . esc_attr( $pro_class ) . '"></span><span class="tooltip-text">' . esc_html__( 'Duplicate', 'visualizer' ) . '</span></a>';
-		echo '<a class="visualizer-chart-action visualizer-chart-edit ' . esc_attr( $pro_class ) . '" href="javascript:;" data-chart="', $chart_id, '"><span class="dashicons dashicons-admin-generic ' . esc_attr( $pro_class ) . '"></span><span class="tooltip-text">' . esc_html__( 'Edit', 'visualizer' ) . '</span></a>';
+		echo '<a class="visualizer-chart-action visualizer-chart-edit ' . esc_attr( $pro_class ) . '" href="javascript:;" data-chart="', $chart_id, '"><span class="dashicons dashicons-edit ' . esc_attr( $pro_class ) . '"></span><span class="tooltip-text">' . esc_html__( 'Edit', 'visualizer' ) . '</span></a>';
 		echo '</div>';
 		do_action( 'visualizer_chart_languages', $chart_id );
 		echo '<hr><div class="visualizer-chart-status"><span title="' . __( 'Chart ID', 'visualizer' ) . '">(' . $chart_id . '):</span> <span class="visualizer-date" title="' . __( 'Last Updated', 'visualizer' ) . '">' . $chart_status['date'] . '</span><span class="visualizer-error"><i class="dashicons ' . $chart_status['icon'] . '" data-viz-error="' . esc_attr( str_replace( '"', "'", $chart_status['error'] ) ) . '" title="' . esc_attr( $chart_status['title'] ) . '"></i></span></div>';
@@ -540,7 +540,7 @@ private function _renderSidebar() {
 			if ( $this->_isListView() ) {
 				$upgrade_url = tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'sidebarMenuUpgrade', 'index' );
 				$chart_types = Visualizer_Module_Admin::proFeaturesLocked() ? __( '6 more chart types', 'visualizer' ) : __( '11 more chart types', 'visualizer' );
-				echo '<div class="items items--upsell">';
+				echo '<div class="items--upsell">';
 				echo '<div class="viz-upsell-banner">';
 				echo '<span class="dashicons dashicons-star-filled viz-upsell-banner__icon"></span>';
 				echo '<div class="viz-upsell-banner__text">';
diff --git a/css/library.css b/css/library.css
index d30e10888..20d700167 100644
--- a/css/library.css
+++ b/css/library.css
@@ -696,10 +696,8 @@ span.viz-view-toggle-group {
 	display: flex;
 	align-items: center;
 	gap: 12px;
-	background: #f0f6fc;
-	border: 1px solid #c3daf9;
+	background: #fff;
 	border-left: 4px solid #007CBA;
-	border-radius: 4px;
 	padding: 12px 16px;
 	margin-bottom: 10px;
 }

From a13042fda31a5c744a4922bb45fd0787b29758a2 Mon Sep 17 00:00:00 2001
From: Hardeep Asrani <hardeepasrani@gmail.com>
Date: Fri, 20 Mar 2026 21:50:16 +0530
Subject: [PATCH 4/4] chore fix: qa

---
 classes/Visualizer/Render/Library.php | 73 +++++++--------------------
 1 file changed, 17 insertions(+), 56 deletions(-)

diff --git a/classes/Visualizer/Render/Library.php b/classes/Visualizer/Render/Library.php
index e8fd45669..ccc57460f 100644
--- a/classes/Visualizer/Render/Library.php
+++ b/classes/Visualizer/Render/Library.php
@@ -318,10 +318,8 @@ private function _renderLibrary() {
 				echo '</div>';
 			} else {
 				echo '<div id="visualizer-library" class="visualizer-clearfix view-grid">';
-				$count = 0;
+				$this->_renderSidebar();
 				foreach ( $this->charts as $placeholder_id => $chart ) {
-					// show the sidebar after the first 3 charts.
-					++$count;
 					$enable_controls = false;
 					$settings        = isset( $chart['settings'] ) ? $chart['settings'] : array();
 					if ( ! empty( $settings['controls']['controlType'] ) ) {
@@ -331,14 +329,8 @@ private function _renderLibrary() {
 							$enable_controls = true;
 						}
 					}
-					if ( 3 === $count ) {
-						$this->_renderSidebar();
-					}
 					$this->_renderChartBox( $placeholder_id, $chart['id'], $enable_controls );
 				}
-				if ( $count < 3 ) {
-					$this->_renderSidebar();
-				}
 				echo '</div>';
 			}
 		} else {
@@ -537,53 +529,22 @@ private function _getViewToggleHTML(): string {
 	 */
 	private function _renderSidebar() {
 		if ( ! Visualizer_Module::is_pro() ) {
-			if ( $this->_isListView() ) {
-				$upgrade_url = tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'sidebarMenuUpgrade', 'index' );
-				$chart_types = Visualizer_Module_Admin::proFeaturesEnabled() ? __( '6 more chart types', 'visualizer' ) : __( '11 more chart types', 'visualizer' );
-				echo '<div class="items--upsell">';
-				echo '<div class="viz-upsell-banner">';
-				echo '<span class="dashicons dashicons-star-filled viz-upsell-banner__icon"></span>';
-				echo '<div class="viz-upsell-banner__text">';
-				echo '<strong>' . esc_html__( 'Unlock the full power of Visualizer PRO!', 'visualizer' ) . '</strong>';
-				/* translators: %s: number of additional chart types (e.g. "11 more chart types") */
-				echo '<span>' . sprintf( esc_html__( '%s, periodic data sync, database queries, frontend editor, and more.', 'visualizer' ), esc_html( $chart_types ) ) . '</span>';
-				echo '</div>';
-				echo '<div class="viz-upsell-banner__actions">';
-				echo '<a href="' . esc_url( $upgrade_url . '#pro-features' ) . '" target="_blank" class="button button-secondary">' . esc_html__( 'View Features', 'visualizer' ) . '</a>';
-				echo '<a href="' . esc_url( $upgrade_url . '#pricing' ) . '" target="_blank" class="button button-primary">' . esc_html__( 'Upgrade Now', 'visualizer' ) . '</a>';
-				echo '</div>';
-				echo '</div>';
-				echo '</div>';
-			} else {
-				echo '<div class="items">';
-				echo '<div class="viz-pro">';
-				echo '<div id="visualizer-sidebar" class="one-columns">';
-				echo '<div class="visualizer-sidebar-box">';
-				echo '<h3>' . __( 'Discover the power of PRO!', 'visualizer' ) . '</h3><ul>';
-				if ( Visualizer_Module_Admin::proFeaturesLocked() ) {
-					echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( '6 more chart types', 'visualizer' );
-				} else {
-					echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( '11 more chart types', 'visualizer' ) . '</li>';
-					echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Synchronize Data Periodically', 'visualizer' ) . '</li>';
-					echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'ChartJS Charts', 'visualizer' ) . '</li>';
-					echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Table Google chart', 'visualizer' ) . '</li>';
-					echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Frontend Actions(Print, Export, Copy, Download)', 'visualizer' ) . '</li>';
-				}
-				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Spreadsheet like editor', 'visualizer' ) . '</li>';
-				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Import from other charts', 'visualizer' ) . '</li>';
-				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Use database query to create charts', 'visualizer' ) . '</li>';
-				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Create charts from WordPress tables', 'visualizer' ) . '</li>';
-				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Frontend editor', 'visualizer' ) . '</li>';
-				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Private charts', 'visualizer' ) . '</li>';
-				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'WPML support for translating charts', 'visualizer' ) . '</li>';
-				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Integration with Woocommerce Data endpoints', 'visualizer' ) . '</li>';
-				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Auto-sync with online files', 'visualizer' ) . '</li></ul>';
-				echo '<p class="vz-sidebar-box-action"><a href="' . tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'sidebarMenuUpgrade', 'index' ) . '#pro-features" target="_blank" class="button button-secondary">' . __( 'View more features', 'visualizer' ) . '</a><a href="' . tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'sidebarMenuUpgrade', 'index' ) . '#pricing" target="_blank" class="button button-primary">' . __( 'Upgrade Now', 'visualizer' ) . '</a></p>';
-				echo '</div>';
-				echo '</div>';
-				echo '</div>';
-				echo '</div>';
-			}
+			$upgrade_url = tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'sidebarMenuUpgrade', 'index' );
+			$chart_types = Visualizer_Module_Admin::proFeaturesEnabled() ? __( '6 more chart types', 'visualizer' ) : __( '11 more chart types', 'visualizer' );
+			echo '<div class="items--upsell">';
+			echo '<div class="viz-upsell-banner">';
+			echo '<span class="dashicons dashicons-star-filled viz-upsell-banner__icon"></span>';
+			echo '<div class="viz-upsell-banner__text">';
+			echo '<strong>' . esc_html__( 'Unlock the full power of Visualizer PRO!', 'visualizer' ) . '</strong>';
+			/* translators: %s: number of additional chart types (e.g. "11 more chart types") */
+			echo '<span>' . sprintf( esc_html__( '%s, periodic data sync, database queries, frontend editor, and more.', 'visualizer' ), esc_html( $chart_types ) ) . '</span>';
+			echo '</div>';
+			echo '<div class="viz-upsell-banner__actions">';
+			echo '<a href="' . esc_url( $upgrade_url . '#pro-features' ) . '" target="_blank" class="button button-secondary">' . esc_html__( 'View Features', 'visualizer' ) . '</a>';
+			echo '<a href="' . esc_url( $upgrade_url . '#pricing' ) . '" target="_blank" class="button button-primary">' . esc_html__( 'Upgrade Now', 'visualizer' ) . '</a>';
+			echo '</div>';
+			echo '</div>';
+			echo '</div>';
 		}
 	}
 }