pg_reports 0.9.0 → 0.9.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8a307810bc4ac9d34917eddd4d3a231a4a9fd0010f2b8bd1d1f56a654336028b
-  data.tar.gz: 175e0568589ca06b81a7482550d6eb1e3bfe05089ea1fda74b47fc33901aa4d0
+  metadata.gz: e2063c9302c5b737dc5272ef382242464d7f11d1dbc7d926bd5db0b55a842b54
+  data.tar.gz: 61ca606a24d3e6fed362acb58270a2c03526803c18c7c89e2e31cd13cc35f3ad
 SHA512:
-  metadata.gz: 2f817ec173d59b77e7a70ec69b15292bd9a7eb9e074d7c5edd1cd82003f76bd382efdecc754313a453e5f851d3c1bd5c447cf6bd29723afae49110f49e95631e
-  data.tar.gz: 7188d4caa875624d210c4b00fbd4d3e3046b0df7bce877b5484d3ebad919d8a19df908e6c923fe2f48ac62e0595cfa5a48699accfccfc5c4cb4bc603e9dba5db
+  metadata.gz: bf7867350c74791dfb0a36ec2ad013e7f42ef5186f8a29209472599e36ca147b76117039f2009bac86d456370e41bca9d49e45a4b6c51ae34d0829bf1ae0d300
+  data.tar.gz: 75910cc42fc73da32e88f2161b10054ffe1775e8cbfce8085c488d419355eacc3b8a5ed42af1b9149198c64f4a252a6ee0178aeb99ccc2b63fba4a7847c40466

data/CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.9.1] - 2026-09-16
+
+### Added
+
+- **Settings modal.** The gear used to open an IDE-only dialog that existed as two separate copies — one inlined in the dashboard, one in the report-page partial, each with its own duplicate of the JavaScript. It is now a single shared partial with one copy of the script in the layout, titled **Settings** and split into sections, so there is somewhere to put the next preference. Language is the first section; the IDE choice is the second. Picking a language reloads the page (everything on it has to re-render in the new language), so the modal is reopened afterwards rather than vanishing mid-edit.
+- **Language switcher on the dashboard.** The engine ships English, Russian and Ukrainian translations covering the whole UI — including category and report names — but there was no way to choose between them; the dashboard simply followed the host application's `I18n.locale`. A section in the settings modal now stores the choice in the session (the same pattern as the database and target switchers) and it applies to every page. Only locales that actually carry `pg_reports` translations are offered, detected by probing a key rather than by listing the shipped files, so a host app supplying its own translation is offered too. The locale is applied with `I18n.with_locale` around the action: `I18n.locale` is process-global, and assigning it outright would carry the dashboard's language into the host application's own rendering.
+
 ## [0.9.0] - 2026-09-16
 
 ### Changed
@@ -18,6 +25,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **Buttons are solid, classic controls.** `.btn-primary` was a translucent tinted outline (`rgba(124,138,246,.14)` fill, accent text, accent border); it is now a filled button with white text, plus proper `:active` and `:focus-visible` states. `.btn-secondary`/`.btn-danger`/`.btn-muted`/`.btn-ghost`/`.btn-icon` share one height, radius and transition, and every variant is declared in exactly one place.
 - **Status is no longer signalled by coloured left stripes.** The live metric cards carried a 3px green/amber/rose `border-left` — "healthy" was as decorated as "critical". Status now reads from the corner dot, the value colour and the sparkline, with the card's own border tinting only for warning and critical. The same treatment replaced the coloured rails and `linear-gradient` washes on EXPLAIN summary cards, problem cards and stat tiles.
   - Table problem rows used `border-left` on `<tr>`, which does not render under `border-collapse: collapse`; they now use an inset shadow on the first cell, so the marker is actually visible.
+- **Dropped the status dot from the live metric cards.** In the healthy state it was a grey dot in the corner conveying nothing, and in the warning/critical state it was a fourth encoding of what the card border, the value colour and the sparkline already say. Status now reads from those three alone.
+- **Metric figures are right-aligned.** The value and its sub-label sit against the card's right edge, with the metric's name on the left — so each card reads name-then-number across, and the column of figures lines up down the row.
+- **The sparkline became the card's bottom band.** It used to float inset in the lower half with margins on every side, leaving the bottom of the card reading as dead space. It now spans the full width and sits flush with the bottom edge. A series that never moves is drawn mid-band rather than pinned to the floor, where a steady 100% cache hit looked like a stray underline at zero.
 - **Sparkline colour encodes state, not identity.** Each metric drew its trend in its own hue (blue/green/purple/amber/rose), which read as decoration. All five now draw in a muted neutral, switching to amber or rose only when that metric crosses its threshold.
 - **Emoji replaced with an inline SVG icon sprite.** Emoji were used as UI icons throughout — the header logo tile, category and metric icons, the settings gear, lock, play/pause, and as prefixes baked into ~48 locale strings per language (`"📋 Copy"`, `"⬇ Export"`, `"🔒 Requires pg_stat_statements"`). They rendered differently on every OS and could not be coloured. All are now stroke-drawn `<symbol>`s defined once in the layout and referenced with `<use>`, inheriting colour and size from their context. Locale strings carry text only.
 - **Removed the header logo tile.** The wordmark and version carry the branding.

data/app/controllers/pg_reports/dashboard_controller.rb

@@ -12,6 +12,7 @@ module PgReports
     protect_from_forgery with: :exception
 
     before_action :authenticate_dashboard!, if: -> { PgReports.config.dashboard_auth.present? }
+    around_action :within_selected_locale
     before_action :set_categories
     before_action :resolve_database_selection
     around_action :within_selected_database
@@ -24,6 +25,7 @@ module PgReports
     ]
 
     helper_method :category_disabled_reason, :category_disabled?
+    helper_method :dashboard_locales, :selected_locale
 
     def index
       @pg_stat_status = pg_stat_status
@@ -48,6 +50,21 @@ module PgReports
     # POST /switch_target
     # Persists the chosen target in session, clears the database choice (each
     # target has its own list of databases), and redirects back.
+    # POST /switch_locale
+    # Persists the chosen language in session; #within_selected_locale applies it
+    # to this and every later request.
+    def switch_locale
+      requested = params[:locale].to_s
+
+      if requested.empty?
+        session.delete(:pg_reports_locale)
+      elsif dashboard_locales.any? { |locale| locale.to_s == requested }
+        session[:pg_reports_locale] = requested
+      end
+
+      redirect_back fallback_location: root_path
+    end
+
     def switch_target
       requested = params[:target].to_s
 
@@ -629,6 +646,36 @@ module PgReports
       @categories = Dashboard::ReportsRegistry.all
     end
 
+    # I18n.locale is global to the process, so assigning it outright would leak
+    # the dashboard's language into the host application's own rendering (and
+    # into whatever request runs next on this thread). with_locale restores the
+    # previous value once the action and its view are done.
+    def within_selected_locale(&block)
+      I18n.with_locale(selected_locale, &block)
+    end
+
+    def selected_locale
+      @selected_locale ||= begin
+        stored = session[:pg_reports_locale].to_s
+        match = dashboard_locales.find { |locale| locale.to_s == stored }
+        match || I18n.locale
+      end
+    end
+
+    # Only locales that actually carry pg_reports translations. A host app can
+    # have dozens of its own locales while translating none of this dashboard,
+    # and offering those would just switch the UI to fallback English. Picked by
+    # probing one key rather than by listing the shipped files, so a host app
+    # that supplies its own pg_reports translations is offered too.
+    def dashboard_locales
+      @dashboard_locales ||= begin
+        translated = I18n.available_locales.select do |locale|
+          I18n.exists?("pg_reports.ui.branding.title", locale)
+        end
+        translated.presence || [I18n.default_locale]
+      end
+    end
+
     # Resolves which target/database every action should run against, based on:
     # 1. session[:pg_reports_target]   (set by #switch_target)
     # 2. session[:pg_reports_database] (set by #switch_database)

data/app/views/layouts/pg_reports/application.html.erb

@@ -1330,44 +1330,57 @@
       font-size: 0.9rem;
     }
 
-    .ide-options {
+    /* Settings modal sections. The option rows are shared by every section —
+       language, IDE, and whatever is added next. */
+    .settings-section-title {
+      font-size: 0.6875rem;
+      font-weight: 600;
+      line-height: 1.4;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      margin-bottom: 0.5rem;
+    }
+
+    .settings-options {
       display: flex;
       flex-direction: column;
-      gap: 0.5rem;
+      gap: 0.375rem;
     }
 
-    .ide-option {
+    .settings-option {
       display: flex;
       align-items: center;
-      gap: 0.75rem;
-      padding: 0.75rem 1rem;
+      gap: 0.625rem;
+      padding: 0.5rem 0.75rem;
       background: var(--bg-tertiary);
       border: 1px solid var(--border-color);
-      border-radius: 6px;
+      border-radius: var(--radius-sm);
       cursor: pointer;
-      transition: all 0.15s;
+      transition: background-color 0.12s ease, border-color 0.12s ease;
     }
 
-    .ide-option:hover {
+    .settings-option:hover {
       background: var(--bg-hover);
       border-color: var(--border-strong);
     }
 
-    .ide-option:has(input:checked) {
+    .settings-option:has(input:checked) {
       background: var(--purple-soft);
       border-color: var(--purple-line);
     }
 
-    .ide-option input[type="radio"] {
+    .settings-option input[type="radio"] {
       accent-color: var(--accent-purple);
+      flex: none;
     }
 
-    .ide-option span {
+    .settings-option span {
       color: var(--text-secondary);
-      font-size: 0.875rem;
+      font-size: 0.8125rem;
     }
 
-    .ide-option:has(input:checked) span {
+    .settings-option:has(input:checked) span {
       color: var(--text-primary);
     }
 
@@ -1634,6 +1647,76 @@
       ].join('');
     };
 
+    // Settings modal. Shared by the dashboard and the report pages; the language
+    // section posts a form (server-side session), the IDE section only writes
+    // localStorage, so there is nothing to submit for it.
+    // Picking a language posts a form and the page reloads (everything on it has
+    // to re-render in the new language), which would leave the user staring at a
+    // dashboard with the settings they were editing gone. Remember that the
+    // modal was open and bring it back on the way in.
+    const SETTINGS_REOPEN_KEY = 'pgReportsSettingsReopen';
+
+    function rememberSettingsOpen() {
+      try {
+        sessionStorage.setItem(SETTINGS_REOPEN_KEY, '1');
+      } catch (e) {
+        // Storage can be unavailable (private mode, blocked cookies); losing the
+        // reopen is a cosmetic downgrade, not a reason to block the switch.
+      }
+    }
+
+    function consumeSettingsReopen() {
+      try {
+        if (!sessionStorage.getItem(SETTINGS_REOPEN_KEY)) return false;
+        sessionStorage.removeItem(SETTINGS_REOPEN_KEY);
+        return true;
+      } catch (e) {
+        return false;
+      }
+    }
+
+    function showSettingsModal() {
+      const modal = document.getElementById('settings-modal');
+      if (!modal) return;
+
+      modal.style.display = 'flex';
+      loadSettingsState();
+    }
+
+    function closeSettingsModal() {
+      const modal = document.getElementById('settings-modal');
+      if (modal) modal.style.display = 'none';
+    }
+
+    function setDefaultIde(ideKey) {
+      if (ideKey) {
+        localStorage.setItem('pgReportsDefaultIde', ideKey);
+      } else {
+        localStorage.removeItem('pgReportsDefaultIde');
+      }
+    }
+
+    function getDefaultIde() {
+      return localStorage.getItem('pgReportsDefaultIde') || '';
+    }
+
+    // The language radios are rendered already checked by the server; only the
+    // IDE choice lives in localStorage and has to be restored on open.
+    function loadSettingsState() {
+      const currentIde = getDefaultIde();
+      document.querySelectorAll('input[name="default-ide"]').forEach(radio => {
+        radio.checked = (radio.value === currentIde);
+      });
+    }
+
+    document.addEventListener('DOMContentLoaded', function() {
+      document.getElementById('settings-modal')?.addEventListener('click', function(e) {
+        if (e.target === this) closeSettingsModal();
+      });
+
+      if (consumeSettingsReopen()) showSettingsModal();
+    });
+
     function showToast(message, type = 'success') {
       const toast = document.getElementById('toast');
       toast.textContent = message;

data/app/views/pg_reports/dashboard/_settings_modal.html.erb

@@ -0,0 +1,55 @@
+<%# Shared by the dashboard and the report pages. Language is persisted server
+    side (session, via a form post); the IDE choice is client side in
+    localStorage — hence one <form> section and one plain section. %>
+<div id="settings-modal" class="modal" style="display: none;">
+  <div class="modal-content modal-small">
+    <div class="modal-header">
+      <h3><%= t("pg_reports.ui.modals.settings_title") %></h3>
+      <button class="modal-close" onclick="closeSettingsModal()" aria-label="<%= t("pg_reports.ui.actions.cancel") %>">&times;</button>
+    </div>
+    <div class="modal-body">
+      <% if dashboard_locales.size > 1 %>
+        <section class="settings-section">
+          <h4 class="settings-section-title"><%= t("pg_reports.ui.language.label") %></h4>
+          <form class="settings-options"
+                action="<%= switch_locale_path %>"
+                method="post"
+                data-turbo="false">
+            <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
+            <% dashboard_locales.each do |locale| %>
+              <%# Each option is named in its own language, not the current one. %>
+              <label class="settings-option">
+                <input type="radio"
+                       name="locale"
+                       value="<%= locale %>"
+                       <%= "checked" if locale.to_s == selected_locale.to_s %>
+                       onchange="rememberSettingsOpen(); this.form.submit()">
+                <span><%= t("pg_reports.ui.language.name", locale: locale, default: locale.to_s.upcase) %></span>
+              </label>
+            <% end %>
+          </form>
+        </section>
+      <% end %>
+
+      <section class="settings-section">
+        <h4 class="settings-section-title"><%= t("pg_reports.ui.settings.default_ide_label") %></h4>
+        <div class="settings-options">
+          <% {
+               "" => "ide_show_menu",
+               "vscode-wsl" => "ide_vscode_wsl",
+               "vscode" => "ide_vscode",
+               "rubymine" => "ide_rubymine",
+               "intellij" => "ide_intellij",
+               "cursor-wsl" => "ide_cursor_wsl",
+               "cursor" => "ide_cursor"
+             }.each do |value, key| %>
+            <label class="settings-option">
+              <input type="radio" name="default-ide" value="<%= value %>" onchange="setDefaultIde('<%= value %>')">
+              <span><%= t("pg_reports.ui.settings.#{key}") %></span>
+            </label>
+          <% end %>
+        </div>
+      </section>
+    </div>
+  </div>
+</div>

data/app/views/pg_reports/dashboard/_show_modals.html.erb

@@ -1,45 +1,4 @@
-<!-- IDE Settings Modal -->
-<div id="ide-settings-modal" class="modal" style="display: none;">
-  <div class="modal-content modal-small">
-    <div class="modal-header">
-      <h3><%= t("pg_reports.ui.modals.ide_settings_title") %></h3>
-      <button class="modal-close" onclick="closeIdeSettingsModal()">&times;</button>
-    </div>
-    <div class="modal-body">
-      <p class="settings-label"><%= t("pg_reports.ui.settings.default_ide_label") %></p>
-      <div class="ide-options">
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="" onchange="setDefaultIde('')">
-          <span><%= t("pg_reports.ui.settings.ide_show_menu") %></span>
-        </label>
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="vscode-wsl" onchange="setDefaultIde('vscode-wsl')">
-          <span><%= t("pg_reports.ui.settings.ide_vscode_wsl") %></span>
-        </label>
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="vscode" onchange="setDefaultIde('vscode')">
-          <span><%= t("pg_reports.ui.settings.ide_vscode") %></span>
-        </label>
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="rubymine" onchange="setDefaultIde('rubymine')">
-          <span><%= t("pg_reports.ui.settings.ide_rubymine") %></span>
-        </label>
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="intellij" onchange="setDefaultIde('intellij')">
-          <span><%= t("pg_reports.ui.settings.ide_intellij") %></span>
-        </label>
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="cursor-wsl" onchange="setDefaultIde('cursor-wsl')">
-          <span><%= t("pg_reports.ui.settings.ide_cursor_wsl") %></span>
-        </label>
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="cursor" onchange="setDefaultIde('cursor')">
-          <span><%= t("pg_reports.ui.settings.ide_cursor") %></span>
-        </label>
-      </div>
-    </div>
-  </div>
-</div>
+<%= render "settings_modal" %>
 
 <!-- Problem Explanation Modal -->
 <div id="problem-modal" class="problem-modal" style="display: none;">

data/app/views/pg_reports/dashboard/_show_scripts.html.erb

@@ -854,7 +854,7 @@
   document.addEventListener('keydown', function(e) {
     if (e.key === 'Escape') {
       closeProblemModal();
-      closeIdeSettingsModal();
+      closeSettingsModal();
       closeExplainModal();
       closeMigrationModal();
     }
@@ -867,44 +867,6 @@
     }
   });
 
-  // IDE Settings functions
-  function showIdeSettingsModal() {
-    const modal = document.getElementById('ide-settings-modal');
-    modal.style.display = 'flex';
-    loadIdeSettingsState();
-  }
-
-  function closeIdeSettingsModal() {
-    document.getElementById('ide-settings-modal').style.display = 'none';
-  }
-
-  function setDefaultIde(ideKey) {
-    if (ideKey) {
-      localStorage.setItem('pgReportsDefaultIde', ideKey);
-    } else {
-      localStorage.removeItem('pgReportsDefaultIde');
-    }
-  }
-
-  function getDefaultIde() {
-    return localStorage.getItem('pgReportsDefaultIde') || '';
-  }
-
-  function loadIdeSettingsState() {
-    const currentIde = getDefaultIde();
-    const radios = document.querySelectorAll('input[name="default-ide"]');
-    radios.forEach(radio => {
-      radio.checked = (radio.value === currentIde);
-    });
-  }
-
-  // Close IDE settings modal on backdrop click
-  document.getElementById('ide-settings-modal')?.addEventListener('click', function(e) {
-    if (e.target === this) {
-      closeIdeSettingsModal();
-    }
-  });
-
   // ==========================================
   // SAVED RECORDS FUNCTIONALITY
   // ==========================================

data/app/views/pg_reports/dashboard/index.html.erb

@@ -28,7 +28,7 @@
         <%= t("pg_reports.ui.actions.reset_statistics") %>
       </button>
     <% end %>
-    <button type="button" class="btn-icon" onclick="showIdeSettingsModal()" title="<%= t("pg_reports.ui.actions.ide_settings_button_title") %>" aria-label="<%= t("pg_reports.ui.actions.ide_settings_button_title") %>">
+    <button type="button" class="btn-icon" onclick="showSettingsModal()" title="<%= t("pg_reports.ui.actions.settings_button_title") %>" aria-label="<%= t("pg_reports.ui.actions.settings_button_title") %>">
       <svg class="icon icon-lg"><use href="#i-settings"></use></svg>
     </button>
 
@@ -127,47 +127,7 @@ pg_stat_statements.track = all</pre>
 </div>
 
 <!-- IDE Settings Modal -->
-<div id="ide-settings-modal" class="modal" style="display: none;">
-  <div class="modal-content modal-small">
-    <div class="modal-header">
-      <h3><%= t("pg_reports.ui.modals.ide_settings_title") %></h3>
-      <button class="modal-close" onclick="closeIdeSettingsModal()">&times;</button>
-    </div>
-    <div class="modal-body">
-      <p class="settings-label"><%= t("pg_reports.ui.settings.default_ide_label") %></p>
-      <div class="ide-options">
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="" onchange="setDefaultIde('')">
-          <span><%= t("pg_reports.ui.settings.ide_show_menu") %></span>
-        </label>
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="vscode-wsl" onchange="setDefaultIde('vscode-wsl')">
-          <span><%= t("pg_reports.ui.settings.ide_vscode_wsl") %></span>
-        </label>
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="vscode" onchange="setDefaultIde('vscode')">
-          <span><%= t("pg_reports.ui.settings.ide_vscode") %></span>
-        </label>
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="rubymine" onchange="setDefaultIde('rubymine')">
-          <span><%= t("pg_reports.ui.settings.ide_rubymine") %></span>
-        </label>
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="intellij" onchange="setDefaultIde('intellij')">
-          <span><%= t("pg_reports.ui.settings.ide_intellij") %></span>
-        </label>
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="cursor-wsl" onchange="setDefaultIde('cursor-wsl')">
-          <span><%= t("pg_reports.ui.settings.ide_cursor_wsl") %></span>
-        </label>
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="cursor" onchange="setDefaultIde('cursor')">
-          <span><%= t("pg_reports.ui.settings.ide_cursor") %></span>
-        </label>
-      </div>
-    </div>
-  </div>
-</div>
+<%= render "settings_modal" %>
 
 <!-- Run Query Modal -->
 <div id="run-query-modal" class="modal" style="display: none;">
@@ -239,7 +199,6 @@ end</pre>
           <svg id="sparkline-connections" viewBox="0 0 100 30" preserveAspectRatio="none"></svg>
         </div>
       </div>
-      <div class="metric-status" id="status-connections"></div>
     </div>
 
     <!-- TPS -->
@@ -260,7 +219,6 @@ end</pre>
           <svg id="sparkline-tps" viewBox="0 0 100 30" preserveAspectRatio="none"></svg>
         </div>
       </div>
-      <div class="metric-status" id="status-tps"></div>
     </div>
 
     <!-- Cache Hit Ratio -->
@@ -279,7 +237,6 @@ end</pre>
           <svg id="sparkline-cache" viewBox="0 0 100 30" preserveAspectRatio="none"></svg>
         </div>
       </div>
-      <div class="metric-status" id="status-cache"></div>
     </div>
 
     <!-- Long Running Queries -->
@@ -298,7 +255,6 @@ end</pre>
           <svg id="sparkline-longrunning" viewBox="0 0 100 30" preserveAspectRatio="none"></svg>
         </div>
       </div>
-      <div class="metric-status" id="status-longrunning"></div>
     </div>
 
     <!-- Blocked Queries -->
@@ -317,7 +273,6 @@ end</pre>
           <svg id="sparkline-blocked" viewBox="0 0 100 30" preserveAspectRatio="none"></svg>
         </div>
       </div>
-      <div class="metric-status" id="status-blocked"></div>
     </div>
   </div>
 </div>
@@ -654,11 +609,14 @@ end</pre>
      value colour and the sparkline, never by a coloured edge: "healthy" is
      the common case and should read as quiet, not decorated. */
   .live-metric-card {
+    display: flex;
+    flex-direction: column;
     background: var(--bg-tertiary);
     border: 1px solid var(--border-color);
     border-radius: var(--radius);
     padding: 0.875rem 1rem;
-    position: relative;
+    /* The trend band below bleeds to the card's edges. */
+    overflow: hidden;
     transition: border-color 0.12s ease;
   }
 
@@ -674,7 +632,7 @@ end</pre>
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    margin-bottom: 0.625rem;
+    margin-bottom: 0.25rem;
   }
 
   .metric-icon {
@@ -693,6 +651,9 @@ end</pre>
   .metric-body {
     display: flex;
     flex-direction: column;
+    /* Figures hug the right edge; the trend band below opts back out. */
+    align-items: flex-end;
+    flex: 1;
     gap: 0.1875rem;
   }
 
@@ -719,17 +680,27 @@ end</pre>
   }
 
   .metric-detail {
+    max-width: 100%;
     font-size: 0.7rem;
     color: var(--text-muted);
+    text-align: right;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
-  /* Sparkline */
+  /* Trend band. Negative margins cancel the card's padding so it spans the full
+     width and sits flush with the bottom edge — as a floating inset line it left
+     the lower half of the card reading as dead space. `margin-top: auto` keeps
+     it pinned down when cards in a row differ in height. */
   .metric-sparkline {
-    height: 28px;
-    margin-top: 0.625rem;
+    /* Full width, regardless of the right-alignment its siblings use. */
+    align-self: stretch;
+    height: 2.25rem;
+    /* auto keeps the band on the bottom edge when cards in a row differ in
+       height; the negative side/bottom margins cancel the card's padding. */
+    margin: auto -1rem -0.875rem;
+    padding-top: 0.5rem;
     color: var(--text-muted);
   }
 
@@ -742,20 +713,6 @@ end</pre>
     display: block;
   }
 
-  /* Status indicator */
-  .metric-status {
-    position: absolute;
-    top: 0.75rem;
-    right: 0.75rem;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: var(--border-strong);
-  }
-
-  .metric-status.warning { background: var(--accent-amber); }
-  .metric-status.critical { background: var(--accent-rose); }
-
   /* Run Query Modal */
   .modal-run-query {
     max-width: 1100px;
@@ -1329,23 +1286,30 @@ end</pre>
 
     const width = 100;
     const height = 30;
+    // No horizontal inset: the band spans the card's full width, so the trace
+    // should reach both edges. Vertical inset only, to keep the stroke from
+    // being clipped at the extremes.
     const padding = 2;
 
     const min = Math.min(...data);
     const max = Math.max(...data);
-    const range = max - min || 1;
+    const range = max - min;
 
     const points = data.map((value, index) => {
-      const x = padding + (index / (data.length - 1)) * (width - 2 * padding);
-      const y = height - padding - ((value - min) / range) * (height - 2 * padding);
+      const x = (index / (data.length - 1)) * width;
+      // A series that never moves is drawn mid-band: pinned to the floor it
+      // reads as "zero" (or as a stray underline) rather than "steady".
+      const y = range === 0
+        ? height / 2
+        : height - padding - ((value - min) / range) * (height - 2 * padding);
       return { x, y };
     });
 
     const pathD = points.map((p, i) => (i === 0 ? `M ${p.x} ${p.y}` : `L ${p.x} ${p.y}`)).join(' ');
 
     const areaD = pathD +
-      ` L ${points[points.length - 1].x} ${height - padding}` +
-      ` L ${points[0].x} ${height - padding} Z`;
+      ` L ${points[points.length - 1].x} ${height}` +
+      ` L ${points[0].x} ${height} Z`;
 
     const area = document.createElementNS('http://www.w3.org/2000/svg', 'path');
     area.setAttribute('d', areaD);
@@ -1366,8 +1330,7 @@ end</pre>
 
   function updateStatus(metric, value, badDirection) {
     const card = document.querySelector(`[data-metric="${metric}"]`);
-    const statusDot = document.getElementById(`status-${metric}`);
-    if (!card || !statusDot) return;
+    if (!card) return;
 
     const thresholds = LIVE_CONFIG.thresholds[metric];
     let status = 'ok';
@@ -1384,8 +1347,6 @@ end</pre>
 
     card.classList.remove('status-ok', 'status-warning', 'status-critical');
     card.classList.add(`status-${status}`);
-    statusDot.classList.remove('ok', 'warning', 'critical');
-    statusDot.classList.add(status);
   }
 
   document.addEventListener('DOMContentLoaded', initLiveMonitoring);
@@ -1407,10 +1368,6 @@ end</pre>
     'cursor': 5
   };
 
-  function getDefaultIde() {
-    return localStorage.getItem('pgReportsDefaultIde') || '';
-  }
-
   function generateIdeUrls(filePath, lineNumber) {
     if (!filePath) return [];
 
@@ -1509,41 +1466,6 @@ end</pre>
     document.getElementById('ide-dropdown-overlay')?.classList.remove('show');
   }
 
-  function showIdeSettingsModal() {
-    const modal = document.getElementById('ide-settings-modal');
-    modal.style.display = 'flex';
-    loadIdeSettingsState();
-  }
-
-  function closeIdeSettingsModal() {
-    document.getElementById('ide-settings-modal').style.display = 'none';
-  }
-
-  function setDefaultIde(ideKey) {
-    if (ideKey) {
-      localStorage.setItem('pgReportsDefaultIde', ideKey);
-    } else {
-      localStorage.removeItem('pgReportsDefaultIde');
-    }
-  }
-
-  function loadIdeSettingsState() {
-    const currentIde = getDefaultIde();
-    const radios = document.querySelectorAll('input[name="default-ide"]');
-    radios.forEach(radio => {
-      radio.checked = (radio.value === currentIde);
-    });
-  }
-
-  // Close IDE settings modal on backdrop click
-  document.addEventListener('DOMContentLoaded', function() {
-    document.getElementById('ide-settings-modal')?.addEventListener('click', function(e) {
-      if (e.target === this) {
-        closeIdeSettingsModal();
-      }
-    });
-  });
-
   // ============================================
   // Query Monitoring
   // ============================================

data/app/views/pg_reports/dashboard/show.html.erb

@@ -48,7 +48,7 @@
           <%= t("pg_reports.ui.actions.send_telegram") %>
         </button>
       <% end %>
-      <button type="button" class="btn-icon" onclick="showIdeSettingsModal()" title="<%= t("pg_reports.ui.actions.ide_settings_button_title") %>" aria-label="<%= t("pg_reports.ui.actions.ide_settings_button_title") %>">
+      <button type="button" class="btn-icon" onclick="showSettingsModal()" title="<%= t("pg_reports.ui.actions.settings_button_title") %>" aria-label="<%= t("pg_reports.ui.actions.settings_button_title") %>">
         <svg class="icon icon-lg"><use href="#i-settings"></use></svg>
       </button>
     </div>

data/config/locales/en.yml

@@ -589,6 +589,9 @@ en:
         title: "PgReports"
         subtitle: "PostgreSQL Analysis Dashboard"
         page_title: "PgReports Dashboard"
+      language:
+        label: "Language"
+        name: "English"
       navigation:
         dashboard: "Dashboard"
         back: "Back"
@@ -619,7 +622,7 @@ en:
         confirm_reset: "Yes, Reset"
         create_extension: "Create Extension"
         creating: "Creating..."
-        ide_settings_button_title: "IDE Settings"
+        settings_button_title: "Settings"
         explain_analyze: "EXPLAIN ANALYZE"
         execute_query: "Execute Query"
         run_query: "SQL Console"
@@ -654,7 +657,7 @@ en:
         reset_stats_title: "Reset Statistics"
         reset_stats_confirm: "Are you sure you want to reset pg_stat_statements statistics?"
         reset_stats_warning: "This action will clear all collected query statistics and cannot be undone."
-        ide_settings_title: "IDE Settings"
+        settings_title: "Settings"
         problem_detected_title: "Problem Detected"
         query_analyzer_title: "Query Analyzer"
         query_label: "Query:"
@@ -670,7 +673,7 @@ en:
         run_query_title: "SQL Console"
         run_query_placeholder: "SELECT * FROM users LIMIT 10;"
       settings:
-        default_ide_label: "Default IDE for source links:"
+        default_ide_label: "Default IDE for source links"
         ide_show_menu: "Show menu (default)"
         ide_vscode_wsl: "VS Code (WSL)"
         ide_vscode: "VS Code"

data/config/locales/ru.yml

@@ -554,6 +554,9 @@ ru:
         title: "PgReports"
         subtitle: "Дашборд анализа PostgreSQL"
         page_title: "PgReports — Дашборд"
+      language:
+        label: "Язык"
+        name: "Русский"
       navigation:
         dashboard: "Дашборд"
         back: "Назад"
@@ -584,7 +587,7 @@ ru:
         confirm_reset: "Да, сбросить"
         create_extension: "Создать расширение"
         creating: "Создание..."
-        ide_settings_button_title: "Настройки IDE"
+        settings_button_title: "Настройки"
         explain_analyze: "EXPLAIN ANALYZE"
         execute_query: "Выполнить запрос"
         run_query: "SQL-консоль"
@@ -619,7 +622,7 @@ ru:
         reset_stats_title: "Сброс статистики"
         reset_stats_confirm: "Вы уверены, что хотите сбросить статистику pg_stat_statements?"
         reset_stats_warning: "Это действие очистит всю собранную статистику запросов и не может быть отменено."
-        ide_settings_title: "Настройки IDE"
+        settings_title: "Настройки"
         problem_detected_title: "Обнаружена проблема"
         query_analyzer_title: "Анализатор запроса"
         query_label: "Запрос:"
@@ -635,7 +638,7 @@ ru:
         run_query_title: "SQL-консоль"
         run_query_placeholder: "SELECT * FROM users LIMIT 10;"
       settings:
-        default_ide_label: "IDE по умолчанию для ссылок на исходники:"
+        default_ide_label: "IDE по умолчанию для ссылок на исходники"
         ide_show_menu: "Показывать меню (по умолчанию)"
         ide_vscode_wsl: "VS Code (WSL)"
         ide_vscode: "VS Code"

data/config/locales/uk.yml

@@ -554,6 +554,9 @@ uk:
         title: "PgReports"
         subtitle: "Дашборд аналізу PostgreSQL"
         page_title: "PgReports — Дашборд"
+      language:
+        label: "Мова"
+        name: "Українська"
       navigation:
         dashboard: "Дашборд"
         back: "Назад"
@@ -584,7 +587,7 @@ uk:
         confirm_reset: "Так, скинути"
         create_extension: "Створити розширення"
         creating: "Створення..."
-        ide_settings_button_title: "Налаштування IDE"
+        settings_button_title: "Налаштування"
         explain_analyze: "EXPLAIN ANALYZE"
         execute_query: "Виконати запит"
         run_query: "SQL-консоль"
@@ -619,7 +622,7 @@ uk:
         reset_stats_title: "Скидання статистики"
         reset_stats_confirm: "Ви впевнені, що хочете скинути статистику pg_stat_statements?"
         reset_stats_warning: "Ця дія очистить усю зібрану статистику запитів і не може бути скасована."
-        ide_settings_title: "Налаштування IDE"
+        settings_title: "Налаштування"
         problem_detected_title: "Виявлено проблему"
         query_analyzer_title: "Аналізатор запиту"
         query_label: "Запит:"
@@ -635,7 +638,7 @@ uk:
         run_query_title: "SQL-консоль"
         run_query_placeholder: "SELECT * FROM users LIMIT 10;"
       settings:
-        default_ide_label: "IDE за замовчуванням для посилань на джерела:"
+        default_ide_label: "IDE за замовчуванням для посилань на джерела"
         ide_show_menu: "Показувати меню (за замовчуванням)"
         ide_vscode_wsl: "VS Code (WSL)"
         ide_vscode: "VS Code"

data/config/routes.rb

@@ -9,6 +9,7 @@ PgReports::Engine.routes.draw do
 
   post "switch_database", to: "dashboard#switch_database", as: :switch_database
   post "switch_target", to: "dashboard#switch_target", as: :switch_target
+  post "switch_locale", to: "dashboard#switch_locale", as: :switch_locale
 
   post "enable_pg_stat_statements", to: "dashboard#enable_pg_stat_statements", as: :enable_pg_stat_statements
   post "reset_statistics", to: "dashboard#reset_statistics", as: :reset_statistics

data/lib/pg_reports/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module PgReports
-  VERSION = "0.9.0"
+  VERSION = "0.9.1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: pg_reports
 version: !ruby/object:Gem::Version
-  version: 0.9.0
+  version: 0.9.1
 platform: ruby
 authors:
 - Eldar Avatov
@@ -153,6 +153,7 @@ files:
 - app/views/layouts/pg_reports/application.html.erb
 - app/views/pg_reports/dashboard/_database_selector.html.erb
 - app/views/pg_reports/dashboard/_fake_source_data.html.erb
+- app/views/pg_reports/dashboard/_settings_modal.html.erb
 - app/views/pg_reports/dashboard/_show_modals.html.erb
 - app/views/pg_reports/dashboard/_show_scripts.html.erb
 - app/views/pg_reports/dashboard/_show_styles.html.erb