i18n_feedback 0.7.1 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2d40ced592fbef71b06b90a276fdf459549df06666ee3dcfe2b2d91cf3fd3e0a
-  data.tar.gz: 19ad82f30538a1611c260d132493423d36d6bba763c67e94392b3ff281612772
+  metadata.gz: 675e56ff8164412361ecd15886a56ef5eb7a97fdda9a766246b0d690c602d2e1
+  data.tar.gz: 36c511550f1b042de8052e995afeab43c27645410d0dea5246a4ffde9e9d598f
 SHA512:
-  metadata.gz: 9800f7f1019390b0452a2605d6d66be2099346cadc2e5b89674353934214457e99b3e67b2c53cb2e17ca124b824a65bbd48d470d7ba9da5047a27f3b7f5f1e08
-  data.tar.gz: 14e4e70d37756b56d425313d16c1b582da719257002d4a65384a7021b6d7a6670c965822c59cf0994b1fbfe5f3fdbd9d40578fdc952f6623ff3f37c65f644b9a
+  metadata.gz: fc37ff253e157cc2c2b619e8007bdbe698a1669a96c19c5243b5e326db8185344ee1fa49bdaf40f355240fb6322d90d84bc2e7944bef84b19c77bc381bdcf859
+  data.tar.gz: f9136776bb4abeb8bb1a6271e8f924178486fad4ab3923eed3e9826110daa56501ca8773962ffc8caee9b340c9b294c6747b500c38b989ed6e412ada137d6237

data/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 ## [Unreleased]
 
+## [0.8.0]
+
+- Add a built-in **triage dashboard**, mounted at the engine root (your
+  `mount_path`, default `/i18n_feedback`): pending / applied / rejected tabs
+  with counts, a per-locale filter, each suggestion shown current-vs-proposed,
+  and one-click Apply / Reject / Reopen / Delete. Plain server-rendered HTML
+  with its own self-contained styling (light + dark via `prefers-color-scheme`)
+  — no host assets or JS framework required.
+- Every dashboard string renders through Rails I18n under `i18n_feedback.dashboard.*`
+  and `i18n_feedback.statuses.*`, with English fallbacks, so a host can translate
+  or reword any of it from its own locale files.
+- Add `config.authorize_admin` — the dashboard's gate, **defaulting to
+  development only** so a fresh install never exposes it in production. It is
+  independent of `enabled` / `enabled_environments`, so a maintainer can triage
+  from production even where the widget is off.
+- The widget's "already suggested" context now loads from
+  `GET {mount_path}/suggestions/context` (was the collection index, now the
+  dashboard). Internal to the gem; the bundled widget was updated in lockstep.
+
 ## [0.7.1]
 
 - The `i18n_feedback.stop` toggle label now reads "Stop suggesting (Esc)" in

data/README.md

@@ -97,6 +97,10 @@ I18nFeedback.configure do |config|
   # Extra per-request gate. Return false to hide the tool. Receives the request.
   config.enabled = ->(request) { true }
 
+  # Who may open the triage dashboard. Independent of the gates above; defaults
+  # to development only. Wire it to your own admin check to open it elsewhere.
+  config.authorize_admin = ->(request) { Rails.env.development? }
+
   # Attribute a suggestion to a user (optional). Return an object responding to
   # #id, or nil. Receives the request.
   config.current_user = ->(request) { nil }
@@ -233,7 +237,28 @@ blue accent stays the same in both.
 
 ## Reviewing suggestions
 
-Suggestions are ordinary records:
+### Triage dashboard
+
+Mounted at your `mount_path` (default `/i18n_feedback`), the engine root is a
+built-in triage dashboard: pending / applied / rejected tabs with counts, a
+per-locale filter, each suggestion shown as current-vs-proposed, and one-click
+**Apply** / **Reject** / **Reopen** / **Delete**. It's plain server-rendered
+HTML with its own styling — no host assets or JS framework needed.
+
+It has its own gate, `config.authorize_admin`, **defaulting to development
+only** — so a fresh install never exposes it in production. Point it at your own
+admin check to open it elsewhere:
+
+```ruby
+config.authorize_admin = ->(request) { request.env["warden"]&.user&.admin? }
+```
+
+The gate is independent of `enabled` / `enabled_environments`: the widget can be
+dev/staging-only while a maintainer still triages from production.
+
+### From the console
+
+Suggestions are also ordinary records:
 
 ```ruby
 I18nFeedback::Suggestion.where(status: "pending").newest_first.each do |s|

data/app/controllers/i18n_feedback/application_controller.rb

@@ -4,16 +4,25 @@ module I18nFeedback
   class ApplicationController < ActionController::Base
     protect_from_forgery with: :exception
 
-    before_action :require_available
-
     private
 
-    # Server-side gate. The client can set the cookie, but it can never reach the
-    # endpoints unless the app itself says the tool is available for this request.
+    # Gate for the widget's public API (submit a suggestion, read prior context).
+    # The client can set the cookie, but it can never reach the endpoints unless
+    # the app itself says the tool is available for this request.
     def require_available
       head :forbidden unless I18nFeedback.available?(request)
     end
 
+    # Gate for the triage dashboard. Independent of #require_available (see
+    # I18nFeedback.admin?). Renders a plain 403 with a hint rather than a bare
+    # head, since a human is usually looking at it.
+    def require_admin
+      return if I18nFeedback.admin?(request)
+
+      render plain: 'Forbidden. Set I18nFeedback.config.authorize_admin to grant access.',
+             status: :forbidden
+    end
+
     def current_author
       return @current_author if defined?(@current_author)
 

data/app/controllers/i18n_feedback/suggestions_controller.rb

@@ -2,6 +2,15 @@
 
 module I18nFeedback
   class SuggestionsController < ApplicationController
+    PER_PAGE = 50
+
+    # Public widget API is available-gated; the triage dashboard is admin-gated.
+    before_action :require_available, only: %i[context create]
+    before_action :require_admin, only: %i[index update destroy]
+    before_action :set_suggestion, only: %i[update destroy]
+
+    layout 'i18n_feedback/application', only: :index
+
     # Throttle the public submission endpoint per IP so one user or bot can't
     # flood the table. Uses the rate limiter built into Rails 7.2+ (backed by
     # Rails.cache); a no-op on Rails 7.1. Tune or disable via config.rate_limit —
@@ -15,9 +24,40 @@ module I18nFeedback
                  })
     end
 
+    # --- triage dashboard (admin) --------------------------------------------
+
+    def index
+      @status = Suggestion::STATUSES.include?(params[:status]) ? params[:status] : 'pending'
+      @locale = params[:locale].presence
+      @counts = Suggestion.group(:status).count
+      @locales = Suggestion.distinct.pluck(:locale).compact.sort
+
+      scope = Suggestion.where(status: @status)
+      scope = scope.where(locale: @locale) if @locale
+      @page = [params[:page].to_i, 1].max
+      rows = scope.newest_first.offset((@page - 1) * PER_PAGE).limit(PER_PAGE + 1).to_a
+      @more = rows.size > PER_PAGE
+      @suggestions = rows.first(PER_PAGE)
+    end
+
+    def update
+      # status arrives from a dashboard button; ignore anything not a real state
+      # (an AR enum would otherwise raise on an unknown value).
+      status = params[:status].to_s
+      @suggestion.update!(status: status) if Suggestion::STATUSES.include?(status)
+      redirect_back fallback_location: root_path, status: :see_other
+    end
+
+    def destroy
+      @suggestion.destroy!
+      redirect_back fallback_location: root_path, status: :see_other
+    end
+
+    # --- widget API (public) -------------------------------------------------
+
     # Pending suggestions for one key/locale, shown as read-only context when the
     # proofreader reopens the popover for a string someone already flagged.
-    def index
+    def context
       suggestions = Suggestion
                     .where(translation_key: params[:key], locale: params[:locale])
                     .status_pending
@@ -41,6 +81,10 @@ module I18nFeedback
 
     private
 
+    def set_suggestion
+      @suggestion = Suggestion.find(params[:id])
+    end
+
     def attribute_author(suggestion)
       author = current_author
       return unless author

data/app/views/i18n_feedback/suggestions/index.html.erb

@@ -0,0 +1,93 @@
+<header class="page">
+  <h1><%= t('i18n_feedback.dashboard.title', default: 'Translation suggestions') %></h1>
+  <p class="lede"><%= t('i18n_feedback.dashboard.subtitle', default: 'Review what reviewers proposed, then apply it to your locale files.') %></p>
+</header>
+
+<nav class="tabs">
+  <% I18nFeedback::Suggestion::STATUSES.each do |status| %>
+    <%= link_to suggestions_path(status: status, locale: @locale),
+                class: ('active' if status == @status) do %>
+      <%= t("i18n_feedback.statuses.#{status}", default: status.humanize) %>
+      <span class="count"><%= @counts.fetch(status, 0) %></span>
+    <% end %>
+  <% end %>
+</nav>
+
+<% if @locales.many? %>
+  <form class="filters" method="get">
+    <input type="hidden" name="status" value="<%= @status %>">
+    <select name="locale" onchange="this.form.requestSubmit()"
+            aria-label="<%= t('i18n_feedback.dashboard.filter', default: 'Filter by locale') %>">
+      <option value=""><%= t('i18n_feedback.dashboard.all_locales', default: 'All locales') %></option>
+      <% @locales.each do |locale| %>
+        <option value="<%= locale %>" <%= 'selected' if locale == @locale %>><%= locale %></option>
+      <% end %>
+    </select>
+    <noscript><button><%= t('i18n_feedback.dashboard.filter', default: 'Filter') %></button></noscript>
+  </form>
+<% end %>
+
+<% if @suggestions.any? %>
+  <% @suggestions.each do |suggestion| %>
+    <article class="card">
+      <div class="row-top">
+        <code class="key"><%= suggestion.translation_key %></code>
+        <span class="badge locale"><%= suggestion.locale %></span>
+        <span class="badge status-<%= suggestion.status %>">
+          <%= t("i18n_feedback.statuses.#{suggestion.status}", default: suggestion.status.humanize) %>
+        </span>
+        <span class="spacer"></span>
+        <span class="meta">
+          <% if suggestion.author_label.present? %><%= suggestion.author_label %> · <% end %>
+          <span title="<%= suggestion.created_at %>"><%= time_ago_in_words(suggestion.created_at) %> <%= t('i18n_feedback.dashboard.ago', default: 'ago') %></span>
+        </span>
+      </div>
+
+      <dl class="diff">
+        <dt><%= t('i18n_feedback.dashboard.current', default: 'Current') %></dt>
+        <dd><span class="old" dir="auto"><%= suggestion.old_value.presence || '—' %></span></dd>
+        <dt><%= t('i18n_feedback.dashboard.suggested', default: 'Suggested') %></dt>
+        <dd><span class="new" dir="auto"><%= suggestion.proposed_value %></span></dd>
+      </dl>
+
+      <% if suggestion.comment.present? %>
+        <div class="comment" dir="auto"><%= suggestion.comment %></div>
+      <% end %>
+
+      <div class="actions">
+        <% unless suggestion.status_applied? %>
+          <%= button_to t('i18n_feedback.dashboard.apply', default: 'Apply'),
+                        suggestion_path(suggestion, status: 'applied'), method: :patch, class: 'primary' %>
+        <% end %>
+        <% unless suggestion.status_rejected? %>
+          <%= button_to t('i18n_feedback.dashboard.reject', default: 'Reject'),
+                        suggestion_path(suggestion, status: 'rejected'), method: :patch %>
+        <% end %>
+        <% unless suggestion.status_pending? %>
+          <%= button_to t('i18n_feedback.dashboard.reopen', default: 'Reopen'),
+                        suggestion_path(suggestion, status: 'pending'), method: :patch %>
+        <% end %>
+        <%= button_to t('i18n_feedback.dashboard.delete', default: 'Delete'),
+                      suggestion_path(suggestion), method: :delete, class: 'danger',
+                      form: { data: { turbo_confirm: t('i18n_feedback.dashboard.delete_confirm', default: 'Delete this suggestion?') } } %>
+      </div>
+    </article>
+  <% end %>
+
+  <nav class="pager">
+    <span>
+      <% if @page > 1 %>
+        <%= link_to t('i18n_feedback.dashboard.newer', default: '← Newer'),
+                    suggestions_path(status: @status, locale: @locale, page: @page - 1) %>
+      <% end %>
+    </span>
+    <span>
+      <% if @more %>
+        <%= link_to t('i18n_feedback.dashboard.older', default: 'Older →'),
+                    suggestions_path(status: @status, locale: @locale, page: @page + 1) %>
+      <% end %>
+    </span>
+  </nav>
+<% else %>
+  <div class="empty"><%= t('i18n_feedback.dashboard.empty', default: 'Nothing here yet.') %></div>
+<% end %>

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

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="<%= I18n.locale %>">
+  <head>
+    <meta charset="utf-8">
+    <title><%= t('i18n_feedback.dashboard.title', default: 'Translation suggestions') %></title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <%= csrf_meta_tags %>
+    <style>
+      :root {
+        color-scheme: light dark;
+        --bg: #f6f7f9; --surface: #fff; --text: #1c2024; --muted: #6b7280;
+        --border: #e5e7eb; --accent: #2563eb; --accent-text: #fff; --code: #f0f1f3;
+        --pending: #d97706; --applied: #16a34a; --rejected: #6b7280;
+      }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --bg: #111418; --surface: #1a1f26; --text: #e6e8ea; --muted: #9aa2ab;
+          --border: #2a313a; --accent: #3b82f6; --code: #232a33;
+        }
+      }
+      * { box-sizing: border-box; }
+      body {
+        margin: 0; background: var(--bg); color: var(--text);
+        font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
+      }
+      a { color: var(--accent); text-decoration: none; }
+      a:hover { text-decoration: underline; }
+      .container { max-width: 960px; margin: 0 auto; padding: 24px 16px 64px; }
+      h1 { font-size: 22px; margin: 0; }
+      .lede { color: var(--muted); margin: 4px 0 0; }
+      header.page { margin-bottom: 20px; }
+
+      .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
+      .tabs a { padding: 8px 14px; border-radius: 8px 8px 0 0; color: var(--muted); }
+      .tabs a.active {
+        color: var(--text); font-weight: 600; border: 1px solid var(--border);
+        border-bottom: 2px solid var(--surface); background: var(--surface); margin-bottom: -1px;
+      }
+      .tabs a:hover { text-decoration: none; color: var(--text); }
+      .count {
+        display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px;
+        background: var(--border); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums;
+      }
+
+      .filters { margin-bottom: 16px; display: flex; gap: 8px; align-items: center; }
+      .filters select {
+        padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px;
+        background: var(--surface); color: var(--text); font: inherit;
+      }
+
+      .card {
+        background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
+        padding: 14px 16px; margin-bottom: 12px;
+      }
+      .row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
+      code.key {
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
+        background: var(--code); padding: 2px 7px; border-radius: 6px; overflow-wrap: anywhere;
+      }
+      .badge {
+        display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
+        color: #fff; white-space: nowrap;
+      }
+      .badge.status-pending { background: var(--pending); }
+      .badge.status-applied { background: var(--applied); }
+      .badge.status-rejected { background: var(--rejected); }
+      .badge.locale { background: transparent; color: var(--muted); border: 1px solid var(--border); }
+      .spacer { flex: 1; }
+      .meta { color: var(--muted); font-size: 13px; }
+
+      dl.diff { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
+      dl.diff dt { color: var(--muted); font-size: 13px; }
+      dl.diff dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
+      dd .old { color: var(--muted); }
+      dd .new { font-weight: 600; }
+      .comment { margin-top: 10px; padding: 8px 10px; background: var(--code); border-radius: 8px; font-size: 14px; overflow-wrap: anywhere; }
+
+      .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
+      .actions form { display: inline; margin: 0; }
+      button {
+        padding: 7px 13px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
+        background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 600;
+      }
+      button:hover { border-color: var(--muted); }
+      button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
+      button.danger { color: var(--rejected); border-color: transparent; }
+      :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+      .empty { padding: 48px 16px; text-align: center; color: var(--muted); border: 1px dashed var(--border); border-radius: 12px; }
+      .pager { margin-top: 16px; display: flex; justify-content: space-between; }
+      .pager .muted { color: var(--muted); }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <%= yield %>
+    </div>
+  </body>
+</html>

data/config/locales/i18n_feedback.en.yml

@@ -14,3 +14,26 @@ en:
     save: "Send suggestion"
     error_blank: "Please enter a suggestion."
     error_save: "Could not save the suggestion."
+    # Triage dashboard. English-only by default (an admin-facing surface); every
+    # string is rendered through I18n with these as fallbacks, so a host can
+    # translate or reword any of them under its own `i18n_feedback.*` scope.
+    statuses:
+      pending: "Pending"
+      applied: "Applied"
+      rejected: "Rejected"
+    dashboard:
+      title: "Translation suggestions"
+      subtitle: "Review what reviewers proposed, then apply it to your locale files."
+      filter: "Filter by locale"
+      all_locales: "All locales"
+      current: "Current"
+      suggested: "Suggested"
+      ago: "ago"
+      apply: "Apply"
+      reject: "Reject"
+      reopen: "Reopen"
+      delete: "Delete"
+      delete_confirm: "Delete this suggestion?"
+      empty: "Nothing here yet."
+      newer: "← Newer"
+      older: "Older →"

data/config/routes.rb

@@ -1,5 +1,11 @@
 # frozen_string_literal: true
 
 I18nFeedback::Engine.routes.draw do
-  resources :suggestions, only: %i[index create]
+  # index/update/destroy are the admin triage dashboard; create + the `context`
+  # collection route are the widget's public API (see SuggestionsController).
+  resources :suggestions, only: %i[index create update destroy] do
+    get :context, on: :collection
+  end
+
+  root to: 'suggestions#index'
 end

data/lib/generators/i18n_feedback/install/templates/initializer.rb

@@ -10,6 +10,13 @@ I18nFeedback.configure do |config|
   #
   # config.enabled = ->(request) { true }
 
+  # Who may open the triage dashboard (mounted at your `mount_path`) to review,
+  # apply, and delete suggestions. Independent of the checks above — the widget
+  # is dev/staging-only, but you may want to triage from production. Defaults to
+  # development only; wire it to your own admin check to open it elsewhere.
+  #
+  # config.authorize_admin = ->(request) { request.env["warden"]&.user&.admin? }
+
   # Attribute a suggestion to a user (optional). Return an object responding to
   # #id (ideally #email too), or nil. Receives the Rack::Request. You resolve the
   # user however your app does — session, Warden, a token, etc.

data/lib/i18n_feedback/configuration.rb

@@ -14,6 +14,13 @@ module I18nFeedback
     # feature flag, an allowlist, etc.
     attr_accessor :enabled
 
+    # Per-request gate for the triage dashboard (browse suggestions, change their
+    # status, delete). Independent of `enabled` and `enabled_environments`: the
+    # widget is dev/staging-only, but a maintainer may want to triage from
+    # production. Defaults to development only, so a fresh install never exposes
+    # the dashboard until you wire it to your own admin check.
+    attr_accessor :authorize_admin
+
     # Resolve the current user for attribution (optional). Return an object
     # responding to #id, or nil. Receives the Rack::Request.
     attr_accessor :current_user
@@ -60,6 +67,7 @@ module I18nFeedback
     def initialize
       @enabled_environments = %w[development staging]
       @enabled = ->(_request) { true }
+      @authorize_admin = ->(_request) { Rails.env.development? }
       @current_user = ->(_request) {}
       @author_label = ->(user) { user.respond_to?(:email) ? user.email : user&.to_s }
       @available_locales = -> { I18n.available_locales.map(&:to_s) }

data/lib/i18n_feedback/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module I18nFeedback
-  VERSION = '0.7.1'
+  VERSION = '0.8.0'
 end

data/lib/i18n_feedback/widget.js

@@ -221,7 +221,7 @@
 
   function loadPrior(key) {
     var params = new URLSearchParams({ key: key, locale: config.locale });
-    fetch(config.endpoint + "?" + params.toString(), { headers: { Accept: "application/json" } })
+    fetch(config.endpoint + "/context?" + params.toString(), { headers: { Accept: "application/json" } })
       .then(function (response) {
         return response.ok ? response.json() : [];
       })

data/lib/i18n_feedback.rb

@@ -26,5 +26,12 @@ module I18nFeedback
     def available?(request)
       config.environment_enabled? && !!config.enabled.call(request)
     end
+
+    # May this request browse and triage the dashboard? Independent of
+    # `available?` — the dashboard has its own gate so maintainers can review
+    # suggestions from production even where the widget itself is off.
+    def admin?(request)
+      !!config.authorize_admin.call(request)
+    end
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: i18n_feedback
 version: !ruby/object:Gem::Version
-  version: 0.7.1
+  version: 0.8.0
 platform: ruby
 authors:
 - Yaroslav Shmarov
@@ -43,6 +43,8 @@ files:
 - app/helpers/i18n_feedback/tag_helper.rb
 - app/models/i18n_feedback/application_record.rb
 - app/models/i18n_feedback/suggestion.rb
+- app/views/i18n_feedback/suggestions/index.html.erb
+- app/views/layouts/i18n_feedback/application.html.erb
 - config/locales/i18n_feedback.ar.yml
 - config/locales/i18n_feedback.bg.yml
 - config/locales/i18n_feedback.bn.yml