From 9e290c8d3459f9018abf85867a040801f3357a29 Mon Sep 17 00:00:00 2001
From: ankitsejwal <ankit@sejw.al>
Date: Sun, 23 Nov 2025 22:14:28 +0530
Subject: [PATCH] feat: add parameter overlay toggle button with responsive
 behavior

- Add toggle button in header to show/hide parameter overlay
- Persist toggle state in localStorage
- Automatically hide overlay when window width < 1400px
- Position toggle button to avoid overlap with connection buttons
- Only show toggle on Query tab when parameters are present

ref #28
---
 CHANGELOG.md       |  18 ++++++-
 static/css/app.css |  20 +++++++-
 static/index.html  |   6 +++
 static/js/app.js   | 115 ++++++++++++++++++++++++++++++++++++++++-----
 4 files changed, 146 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index af71851a6..07f0b6701 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,22 @@
 ## Changelog
 
-Current [release](https://github.com/flowbi/pgweb/releases) is `0.16.14`.
+Current [release](https://github.com/flowbi/pgweb/releases) is `0.16.17`.
+
+## 0.16.17 - 2025-11-23
+
+- `NEW` Add parameter overlay toggle button with localStorage persistence and responsive behavior
+- `NEW` Toggle automatically hides overlay when window width < 1400px
+- `FIX` Parameter overlay toggle button positioned to avoid overlap with connection buttons
+
+## 0.16.16 - 2025-11-23
+
+- `FIX` Unwanted gap between cursor and typed character in ACE editor
+
+## 0.16.15 - 2025-11-23
+
+- `NEW` Enhance development script and documentation for PostgreSQL setup
+- `FIX` Issue with custom fonts
+- `FIX` Docker compose file name and command in development script
 
 ## 0.16.14 - 2025-09-01
 
diff --git a/static/css/app.css b/static/css/app.css
index dd4cc3650..7f9adda0b 100644
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -749,18 +749,36 @@ body, html {
 }
 
 .connection-actions {
-  position: fixed;
+  position: absolute;
+  right: 8px;
+  top: 10px;
+  display: none;
+}
+
+.parameter-toggle-action {
+  position: absolute;
   right: 8px;
   top: 10px;
   display: none;
 }
 
+/* When both are visible, shift parameter toggle to the left */
+.connection-actions:not([style*="display: none"]) ~ .parameter-toggle-action {
+  right: 200px;
+}
+
 #edit_connection, #close_connection {
   background: var(--pgweb-primary-color);
   color: var(--pgweb-primary-text);
   border-color: var(--pgweb-primary-text);
 }
 
+#toggle_param_overlay {
+  background: var(--pgweb-primary-color);
+  color: var(--pgweb-primary-text);
+  border-color: var(--pgweb-primary-text);
+}
+
 #edit_connection i {
   margin-right: 4px;
 }
diff --git a/static/index.html b/static/index.html
index 234a4ec22..4fe15e8f8 100644
--- a/static/index.html
+++ b/static/index.html
@@ -40,6 +40,12 @@
         <a href="#" id="edit_connection" class="btn btn-default btn-sm"><i class="fa fa-database"></i> Connect</a>
         <a href="#" id="close_connection" class="btn btn-default btn-sm">Disconnect</a>
       </div>
+
+      <div class="parameter-toggle-action">
+        <a href="#" id="toggle_param_overlay" class="btn btn-default btn-sm" title="Toggle parameter overlay">
+          <i class="fa fa-toggle-off"></i>
+        </a>
+      </div>
     </div>
     <div id="sidebar">
       <div class="current-database">
diff --git a/static/js/app.js b/static/js/app.js
index 3ba2eda36..f42870ef1 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -792,11 +792,16 @@ function setCurrentTab(id) {
 
   // Persist tab selection into the session storage
   sessionStorage.setItem("tab", id);
-  
+
   // Update parameter overlay visibility based on new tab
   if (typeof updateParameterOverlay === 'function') {
     updateParameterOverlay(id);
   }
+
+  // Update parameter toggle button visibility based on new tab
+  if (typeof updateParamToggleVisibility === 'function') {
+    updateParamToggleVisibility(id);
+  }
 }
 
 function showQueryHistory() {
@@ -1408,6 +1413,62 @@ function addShortcutTooltips() {
 // Global variables for parameter overlay management
 var globalSqlParamsForOverlay = {};
 var shouldShowParamIndicator = false;
+var paramOverlayManuallySet = false; // Track if user manually toggled
+
+// Get parameter overlay preference from localStorage
+function getParamOverlayPreference() {
+  var pref = localStorage.getItem("param_overlay_enabled");
+  return pref === null ? null : pref === "true";
+}
+
+// Set parameter overlay preference to localStorage
+function setParamOverlayPreference(enabled) {
+  localStorage.setItem("param_overlay_enabled", enabled.toString());
+}
+
+// Check if screen width is >= 1400px
+function isWideScreen() {
+  return window.innerWidth >= 1400;
+}
+
+// Determine if overlay should be visible based on toggle state and screen size
+function shouldShowOverlay() {
+  var preference = getParamOverlayPreference();
+
+  // If user has set a preference, use it
+  if (preference !== null) {
+    return preference;
+  }
+
+  // Default: show on wide screens, hide on narrow screens
+  return isWideScreen();
+}
+
+// Update toggle button icon and overlay visibility
+function updateParamToggleState() {
+  var showOverlay = shouldShowOverlay();
+  var currentTab = $('#nav ul li.selected').attr('id') || 'table_query';
+
+  // Update toggle button icon
+  if (showOverlay) {
+    $('#toggle_param_overlay i').removeClass('fa-toggle-off').addClass('fa-toggle-on');
+  } else {
+    $('#toggle_param_overlay i').removeClass('fa-toggle-on').addClass('fa-toggle-off');
+  }
+
+  // Update overlay visibility based on toggle state
+  shouldShowParamIndicator = showOverlay && Object.keys(globalSqlParamsForOverlay).length > 0;
+  updateParameterOverlay(currentTab);
+}
+
+// Show/hide toggle button based on current tab
+function updateParamToggleVisibility(currentTabId) {
+  if (currentTabId === 'table_query' && Object.keys(globalSqlParamsForOverlay).length > 0) {
+    $('.parameter-toggle-action').show();
+  } else {
+    $('.parameter-toggle-action').hide();
+  }
+}
 
 function updateParameterOverlay(currentTabId) {
   // Remove existing indicator
@@ -1429,24 +1490,23 @@ function updateParameterOverlay(currentTabId) {
 
 function displayURLParameters() {
   var urlParams = new URLSearchParams(window.location.search);
-  var hideIndicator = urlParams.get('hideParamIndicator') === 'true';
 
   // Extract SQL parameters and store them globally (always do this for substitution to work)
   var sqlParams = extractSqlParameters();
   var hasParams = Object.keys(sqlParams).length > 0;
 
-  // Store parameters and indicator preference globally
+  // Store parameters globally
   globalSqlParamsForOverlay = sqlParams;
-  shouldShowParamIndicator = hasParams && !hideIndicator;
-  
-  // Show overlay for current tab (will be managed by setCurrentTab from now on)
-  if (shouldShowParamIndicator) {
-    var currentTab = $('#nav ul li.selected').attr('id') || 'table_query';
-    updateParameterOverlay(currentTab);
-  }
-  
+
   if (hasParams) {
     console.log('URL parameters available for query substitution:', sqlParams);
+
+    // Initialize toggle state and overlay visibility
+    updateParamToggleState();
+
+    // Show toggle button if on query tab
+    var currentTab = $('#nav ul li.selected').attr('id') || 'table_query';
+    updateParamToggleVisibility(currentTab);
   }
 }
 
@@ -2262,6 +2322,39 @@ $(document).ready(function() {
   addShortcutTooltips();
   bindDatabaseObjectsFilter();
 
+  // Parameter overlay toggle button click handler
+  $("#toggle_param_overlay").on("click", function(e) {
+    e.preventDefault();
+
+    // Toggle the preference
+    var currentPreference = shouldShowOverlay();
+    var newPreference = !currentPreference;
+
+    // Save to localStorage
+    setParamOverlayPreference(newPreference);
+
+    // Update toggle state and overlay visibility
+    updateParamToggleState();
+  });
+
+  // Window resize handler for responsive behavior
+  $(window).on("resize", function() {
+    // Only update if there are parameters
+    if (Object.keys(globalSqlParamsForOverlay).length > 0) {
+      var preference = getParamOverlayPreference();
+
+      // If preference is set to ON but screen is now narrow, turn it OFF
+      if (preference && !isWideScreen()) {
+        setParamOverlayPreference(false);
+        updateParamToggleState();
+      }
+      // If no preference is set (null), update based on screen size
+      else if (preference === null) {
+        updateParamToggleState();
+      }
+    }
+  });
+
   // Set session from the url
   var reqUrl = new URL(window.location);
   var sessionId = reqUrl.searchParams.get("session");