i18n_proofreading 0.10.6 → 0.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ca180baf5c569ccbce1681b0a26d914f7846225fef225ce0f3f5bb3a52b5e1f6
-  data.tar.gz: bbd44a938dcc053bc63d466cdca8b9ef65ec4360b8cabac2ac7e92b25304991f
+  metadata.gz: 3b4d3167c04697942a2b695b1f4b81554a4f12daabc6a8d730b0d4374bb31292
+  data.tar.gz: 95f184235ea7319ebdd254592924c25f8503ac0fee7943282cd939478d037a54
 SHA512:
-  metadata.gz: 7ff93f334e19313d03ee861c7da265fb8bb98047ca02e189a5d48e0660cc6012578da93508aa91b75dba64a8e4e70405a88a50ac935b93955771358fb3794399
-  data.tar.gz: 68f52f53cc1f2067a5f75920d282412de882463c394470276ac7495ba439d7a1a04f1fe0270b130b5bfbb706c6fc5893024e4829247bbd3624cf3de58641f714
+  metadata.gz: 564ff0282d7ba45a0ef399c82ff6b287dfe54108512aa91356769a6e652fa66875bb3a04c195aed57bce3507eabf50a0d7505ec386ebbe34ed0186e7c8ff065f
+  data.tar.gz: de5b07512272838e8f15483978cb536d0f4ae55e33fe6c5f17d1d3d7b4b5430badf6bfc54c96a01f37802976565afc287c78f5ccc3d40924e41f7e54137fae7e

data/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## 0.11.0
+
+- **`config.admin_layout` now works on its own.** The dashboard's stylesheet was
+  declared in the gem's layout, so replacing that layout dropped it and the
+  dashboard rendered unstyled. It moves into the views, so every layout gets it
+  with nothing asked of the host.
+- **The dashboard stylesheet no longer claims selectors it does not own.** It
+  styled bare `*`, `body` and `a`, and its `.container`, `.card` and `.tabs` are
+  names other frameworks use too. Component rules now nest inside an
+  `.ip-dashboard` wrapper the views render, and every custom property is `--ip-`
+  prefixed — that collision ran both ways, so a host defining `--bg` recoloured
+  the dashboard just as easily.
+- **Added `config.base_controller_class`.** Name the controller your own admin
+  inherits from and the dashboard adopts its layout, helpers, authentication and
+  request context. Default is unchanged.
+- **The widget's endpoints moved to `I18nProofreading::SubmissionsController`.**
+  One controller served both them and the triage dashboard, so
+  `base_controller_class` would have put staff authentication in front of every
+  proofreader. `POST /suggestions` and `GET /suggestions/context` now route
+  there; both URLs are unchanged, and the per-IP rate limiter moved with the
+  action. If you referenced `SuggestionsController#create` or `#context`, that is
+  the breaking change in this release.
+- **Migrations follow the host's `primary_key_type`,** the same
+  `Rails.configuration.generators` lookup Rails' own Active Storage migration
+  does, so a uuid-keyed host gets a uuid table.
+- A `BackboneTest` now fails the build on any of the above regressing.
+
 ## [Unreleased]
 
 ## [0.10.6]

data/README.md

@@ -105,6 +105,7 @@ Everything is optional — the defaults work out of the box in development. In
 | `enabled_environments` | `%w[development staging]` | Environments the tool is active in |
 | `enabled` | everyone | Extra per-request gate. `false` hides the tool |
 | `authorize_admin` | development only | **Who can open the review board.** Independent of the gates above |
+| `base_controller_class` | `ActionController::Base` | Controller the dashboard inherits — name your admin's and it adopts its layout, helpers and auth |
 | `current_user` | `nil` | Attribute a suggestion to a user. Receives the request |
 | `author_label` | the user's `email` | Label shown for the author |
 | `available_locales` | `I18n.available_locales` | Which locales a suggestion may target |

data/app/controllers/concerns/i18n_proofreading/request_context.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module I18nProofreading
+  # Who is asking, and the gates that answer it.
+  #
+  # A concern rather than inherited behaviour because the engine has two
+  # controller roots: the public endpoints hang off ActionController::Base, and
+  # the dashboard hangs off whatever the host set as `base_controller_class`.
+  module RequestContext
+    extend ActiveSupport::Concern
+
+    private
+
+    def i18n_proofreading_admin_layout
+      I18nProofreading.config.admin_layout
+    end
+
+    # 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 I18nProofreading.available?(request)
+    end
+
+    # Gate for the triage dashboard. Independent of #require_available (see
+    # I18nProofreading.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 I18nProofreading.admin?(request)
+
+      render plain: 'Forbidden. Set I18nProofreading.config.authorize_admin to grant access.',
+             status: :forbidden
+    end
+
+    def current_author
+      return @current_author if defined?(@current_author)
+
+      @current_author = I18nProofreading.config.current_user.call(request)
+    end
+  end
+end

data/app/controllers/i18n_proofreading/application_controller.rb

@@ -1,36 +1,16 @@
 # frozen_string_literal: true
 
 module I18nProofreading
+  # Root of the engine's PUBLIC surface: widget.js, the context lookup and the
+  # suggestion endpoint. These stay on a plain ActionController::Base
+  # deliberately — a proofreader suggesting a translation must not be routed
+  # through a host's admin controller, which would demand a staff session.
+  #
+  # The dashboard's root is DashboardController, and that is where
+  # `config.base_controller_class` applies.
   class ApplicationController < ActionController::Base
-    protect_from_forgery with: :exception
-
-    private
-
-    def i18n_proofreading_admin_layout
-      I18nProofreading.config.admin_layout
-    end
-
-    # 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 I18nProofreading.available?(request)
-    end
+    include RequestContext
 
-    # Gate for the triage dashboard. Independent of #require_available (see
-    # I18nProofreading.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 I18nProofreading.admin?(request)
-
-      render plain: 'Forbidden. Set I18nProofreading.config.authorize_admin to grant access.',
-             status: :forbidden
-    end
-
-    def current_author
-      return @current_author if defined?(@current_author)
-
-      @current_author = I18nProofreading.config.current_user.call(request)
-    end
+    protect_from_forgery with: :exception
   end
 end

data/app/controllers/i18n_proofreading/dashboard_controller.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module I18nProofreading
+  # Root of the STAFF surface: the suggestion triage dashboard.
+  #
+  # Inherits from `config.base_controller_class` — by default a plain
+  # ActionController::Base, which is why `authorize_admin` exists. Point it at
+  # the controller your own admin already inherits from and the dashboard picks
+  # up that stack wholesale: your layout, your helpers, your authentication, and
+  # whatever request context your before_actions establish.
+  #
+  # Only the dashboard hangs off it. The widget's endpoints stay on
+  # ApplicationController, so wiring an admin base controller here can never
+  # demand a staff session from someone suggesting a translation.
+  class DashboardController < I18nProofreading.base_controller
+    include RequestContext
+
+    # A host base controller brings its own layout, and declaring one here would
+    # override it. So the gem only claims the layout when it owns the decision:
+    # no host base controller, or a host that named an `admin_layout` explicitly.
+    layout :i18n_proofreading_admin_layout unless superclass != ActionController::Base &&
+                                                  I18nProofreading.config.admin_layout == Configuration::DEFAULT_ADMIN_LAYOUT
+
+    before_action :require_admin
+
+    # A host base controller has configured CSRF already; declaring it twice
+    # would run the check twice.
+    protect_from_forgery with: :exception if superclass == ActionController::Base
+  end
+end

data/app/controllers/i18n_proofreading/submissions_controller.rb

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+module I18nProofreading
+  # The widget's public API: the context lookup it reads and the suggestion it
+  # posts.
+  #
+  # Public, so it stays on ApplicationController and never inherits a host's
+  # admin base controller — a proofreader must not be asked for a staff session.
+  # The triage actions live in SuggestionsController, which does inherit it.
+  class SubmissionsController < ApplicationController
+    before_action :require_available
+
+    # 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 —
+    # read once at boot, after the host's initializer.
+    if respond_to?(:rate_limit) && I18nProofreading.config.rate_limit
+      rate_limit(**I18nProofreading.config.rate_limit,
+                 only: :create,
+                 with: lambda {
+                   render json: { errors: ['Too many suggestions. Please slow down and try again.'] },
+                          status: :too_many_requests
+                 })
+    end
+
+    # Pending suggestions for one key/locale, shown as read-only context when the
+    # proofreader reopens the popover for a string someone already flagged.
+    def context
+      suggestions = Suggestion
+                    .where(translation_key: params[:key], locale: params[:locale])
+                    .status_pending
+                    .newest_first
+                    .limit(20)
+
+      render json: suggestions.map { |suggestion| suggestion_json(suggestion) }
+    end
+
+    def create
+      suggestion = Suggestion.new(suggestion_params)
+      attribute_author(suggestion)
+
+      if suggestion.save
+        I18nProofreading.config.on_submit.call(suggestion)
+        head :created
+      else
+        render json: { errors: suggestion.errors.full_messages }, status: :unprocessable_entity
+      end
+    end
+
+    private
+
+    def attribute_author(suggestion)
+      author = current_author
+      return unless author
+
+      suggestion.author_id = author.id.to_s if author.respond_to?(:id)
+      suggestion.author_label = I18nProofreading.config.author_label.call(author)
+    end
+
+    def suggestion_json(suggestion)
+      {
+        proposed_value: suggestion.proposed_value,
+        author_label: suggestion.author_label,
+        created_at: suggestion.created_at.iso8601
+      }
+    end
+
+    def suggestion_params
+      params
+        .require(:suggestion)
+        .permit(:translation_key, :locale, :old_value, :proposed_value, :comment, :page_url)
+    end
+  end
+end

data/app/controllers/i18n_proofreading/suggestions_controller.rb

@@ -1,29 +1,12 @@
 # frozen_string_literal: true
 
 module I18nProofreading
-  class SuggestionsController < ApplicationController
+  class SuggestionsController < DashboardController
     PER_PAGE = 50
 
     # Public widget API is available-gated; the read-only dashboard is admin-gated.
-    before_action :require_available, only: %i[context create]
-    before_action :require_admin, only: %i[index show]
     before_action :set_suggestion, only: :show
 
-    layout :i18n_proofreading_admin_layout, only: %i[index show]
-
-    # 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 —
-    # read once at boot, after the host's initializer.
-    if respond_to?(:rate_limit) && I18nProofreading.config.rate_limit
-      rate_limit(**I18nProofreading.config.rate_limit,
-                 only: :create,
-                 with: lambda {
-                   render json: { errors: ['Too many suggestions. Please slow down and try again.'] },
-                          status: :too_many_requests
-                 })
-    end
-
     # --- triage dashboard (admin) --------------------------------------------
 
     def index
@@ -46,56 +29,10 @@ module I18nProofreading
 
     # --- 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 context
-      suggestions = Suggestion
-                    .where(translation_key: params[:key], locale: params[:locale])
-                    .status_pending
-                    .newest_first
-                    .limit(20)
-
-      render json: suggestions.map { |suggestion| suggestion_json(suggestion) }
-    end
-
-    def create
-      suggestion = Suggestion.new(suggestion_params)
-      attribute_author(suggestion)
-
-      if suggestion.save
-        I18nProofreading.config.on_submit.call(suggestion)
-        head :created
-      else
-        render json: { errors: suggestion.errors.full_messages }, status: :unprocessable_entity
-      end
-    end
-
     private
 
     def set_suggestion
       @suggestion = Suggestion.find(params[:id])
     end
-
-    def attribute_author(suggestion)
-      author = current_author
-      return unless author
-
-      suggestion.author_id = author.id.to_s if author.respond_to?(:id)
-      suggestion.author_label = I18nProofreading.config.author_label.call(author)
-    end
-
-    def suggestion_json(suggestion)
-      {
-        proposed_value: suggestion.proposed_value,
-        author_label: suggestion.author_label,
-        created_at: suggestion.created_at.iso8601
-      }
-    end
-
-    def suggestion_params
-      params
-        .require(:suggestion)
-        .permit(:translation_key, :locale, :old_value, :proposed_value, :comment, :page_url)
-    end
   end
 end

data/app/views/i18n_proofreading/shared/_dashboard.html.erb

@@ -0,0 +1,13 @@
+<%# The dashboard's own shell, rendered by the views rather than the layout.
+    That is deliberate: `config.admin_layout` and `config.base_controller_class`
+    both let a host replace the layout, and a stylesheet declared in a layout the
+    host replaces simply vanishes — the dashboard then renders unstyled.
+    Declaring it here means every layout works, host or gem.
+
+    The `ip-dashboard` wrapper is what scopes dashboard.css (see the comment at
+    the top of that file), so it has to enclose the content, not precede it. %>
+<%= stylesheet_link_tag "#{dashboard_stylesheet_path}?v=#{I18nProofreading::Widget.dashboard_stylesheet_fingerprint}",
+                        'data-turbo-track': 'reload' %>
+<div class="ip-dashboard">
+  <%= yield %>
+</div>

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

@@ -1,99 +1,101 @@
 <% content_for :body_class, 'ip-index' %>
 
-<header class="page">
-  <h1><%= t('i18n_proofreading.dashboard.title', default: 'I18nProofreading') %></h1>
-  <p class="lede"><%= t('i18n_proofreading.dashboard.subtitle', default: 'Review what reviewers proposed, then apply it to your locale files.') %></p>
-</header>
+<%= render layout: 'i18n_proofreading/shared/dashboard' do %>
+  <header class="page">
+    <h1><%= t('i18n_proofreading.dashboard.title', default: 'I18nProofreading') %></h1>
+    <p class="lede"><%= t('i18n_proofreading.dashboard.subtitle', default: 'Review what reviewers proposed, then apply it to your locale files.') %></p>
+  </header>
 
-<div class="review-shell <%= 'has-selected' if @selected_suggestion %>">
-  <aside class="review-sidebar" aria-label="<%= t('i18n_proofreading.dashboard.suggestions', default: 'Suggestions') %>">
-    <nav class="tabs">
-      <% I18nProofreading::Suggestion::STATUSES.each do |status| %>
-        <%= link_to suggestions_path(status: status, locale: @locale),
-                    class: ('active' if status == @status) do %>
-          <%= t("i18n_proofreading.statuses.#{status}", default: status.humanize) %>
-          <span class="count"><%= @counts.fetch(status, 0) %></span>
+  <div class="review-shell <%= 'has-selected' if @selected_suggestion %>">
+    <aside class="review-sidebar" aria-label="<%= t('i18n_proofreading.dashboard.suggestions', default: 'Suggestions') %>">
+      <nav class="tabs">
+        <% I18nProofreading::Suggestion::STATUSES.each do |status| %>
+          <%= link_to suggestions_path(status: status, locale: @locale),
+                      class: ('active' if status == @status) do %>
+            <%= t("i18n_proofreading.statuses.#{status}", default: status.humanize) %>
+            <span class="count"><%= @counts.fetch(status, 0) %></span>
+          <% end %>
         <% end %>
-      <% end %>
-    </nav>
+      </nav>
 
-    <% if @locales.many? %>
-      <form class="filters" method="get">
-        <input type="hidden" name="status" value="<%= @status %>">
-        <label for="i18np-locale"><%= t('i18n_proofreading.dashboard.locale', default: 'Locale') %></label>
-        <select id="i18np-locale" name="locale" onchange="this.form.submit()">
-          <option value=""><%= t('i18n_proofreading.dashboard.all_locales', default: 'All locales') %></option>
-          <% @locales.each do |locale| %>
-            <option value="<%= locale %>" <%= 'selected' if locale == @locale %>><%= locale %></option>
-          <% end %>
-        </select>
-        <%# Inline onchange auto-submits where allowed; this button is the reliable
-            path where a strict CSP blocks inline handlers, or with JS off. %>
-        <button><%= t('i18n_proofreading.dashboard.filter', default: 'Filter') %></button>
-      </form>
-    <% end %>
+      <% if @locales.many? %>
+        <form class="filters" method="get">
+          <input type="hidden" name="status" value="<%= @status %>">
+          <label for="i18np-locale"><%= t('i18n_proofreading.dashboard.locale', default: 'Locale') %></label>
+          <select id="i18np-locale" name="locale" onchange="this.form.submit()">
+            <option value=""><%= t('i18n_proofreading.dashboard.all_locales', default: 'All locales') %></option>
+            <% @locales.each do |locale| %>
+              <option value="<%= locale %>" <%= 'selected' if locale == @locale %>><%= locale %></option>
+            <% end %>
+          </select>
+          <%# Inline onchange auto-submits where allowed; this button is the reliable
+              path where a strict CSP blocks inline handlers, or with JS off. %>
+          <button><%= t('i18n_proofreading.dashboard.filter', default: 'Filter') %></button>
+        </form>
+      <% end %>
 
-    <div class="suggestion-list">
-      <% if @suggestions.any? %>
-        <% @suggestions.each do |suggestion| %>
-          <%= link_to suggestions_path(status: @status, locale: @locale, page: @page,
-                                       suggestion_id: suggestion.id),
-                      class: ['suggestion-row', ('active' if @selected_suggestion&.id == suggestion.id)].compact do %>
-            <span class="suggestion-main">
-              <span class="suggestion-topline">
-                <code class="key"><%= suggestion.translation_key %></code>
-                <span class="badge locale"><%= suggestion.locale %></span>
-                <span class="muted suggestion-time" title="<%= suggestion.created_at %>">
-                  <%= time_ago_in_words(suggestion.created_at) %> <%= t('i18n_proofreading.dashboard.ago', default: 'ago') %>
+      <div class="suggestion-list">
+        <% if @suggestions.any? %>
+          <% @suggestions.each do |suggestion| %>
+            <%= link_to suggestions_path(status: @status, locale: @locale, page: @page,
+                                         suggestion_id: suggestion.id),
+                        class: ['suggestion-row', ('active' if @selected_suggestion&.id == suggestion.id)].compact do %>
+              <span class="suggestion-main">
+                <span class="suggestion-topline">
+                  <code class="key"><%= suggestion.translation_key %></code>
+                  <span class="badge locale"><%= suggestion.locale %></span>
+                  <span class="muted suggestion-time" title="<%= suggestion.created_at %>">
+                    <%= time_ago_in_words(suggestion.created_at) %> <%= t('i18n_proofreading.dashboard.ago', default: 'ago') %>
+                  </span>
+                </span>
+                <span class="suggestion-copy" dir="auto"><%= truncate(suggestion.proposed_value, length: 110) %></span>
+                <span class="muted suggestion-meta">
+                  <span>#<%= suggestion.id %></span>
+                  <% if suggestion.author_label.present? %>
+                    <span><%= suggestion.author_label %></span>
+                  <% end %>
                 </span>
               </span>
-              <span class="suggestion-copy" dir="auto"><%= truncate(suggestion.proposed_value, length: 110) %></span>
-              <span class="muted suggestion-meta">
-                <span>#<%= suggestion.id %></span>
-                <% if suggestion.author_label.present? %>
-                  <span><%= suggestion.author_label %></span>
-                <% end %>
+              <span class="badge status-<%= suggestion.status %>">
+                <%= t("i18n_proofreading.statuses.#{suggestion.status}", default: suggestion.status.humanize) %>
               </span>
-            </span>
-            <span class="badge status-<%= suggestion.status %>">
-              <%= t("i18n_proofreading.statuses.#{suggestion.status}", default: suggestion.status.humanize) %>
-            </span>
+            <% end %>
           <% end %>
+        <% else %>
+          <div class="empty"><%= t('i18n_proofreading.dashboard.empty', default: 'Nothing here yet.') %></div>
         <% end %>
-      <% else %>
-        <div class="empty"><%= t('i18n_proofreading.dashboard.empty', default: 'Nothing here yet.') %></div>
-      <% end %>
-    </div>
+      </div>
 
-    <nav class="pager">
-      <span>
-        <% if @page > 1 %>
-          <%= link_to t('i18n_proofreading.dashboard.newer', default: '← Newer'),
-                      suggestions_path(status: @status, locale: @locale, page: @page - 1) %>
-        <% end %>
-      </span>
-      <span>
-        <% if @more %>
-          <%= link_to t('i18n_proofreading.dashboard.older', default: 'Older →'),
-                      suggestions_path(status: @status, locale: @locale, page: @page + 1) %>
-        <% end %>
-      </span>
-    </nav>
-  </aside>
+      <nav class="pager">
+        <span>
+          <% if @page > 1 %>
+            <%= link_to t('i18n_proofreading.dashboard.newer', default: '← Newer'),
+                        suggestions_path(status: @status, locale: @locale, page: @page - 1) %>
+          <% end %>
+        </span>
+        <span>
+          <% if @more %>
+            <%= link_to t('i18n_proofreading.dashboard.older', default: 'Older →'),
+                        suggestions_path(status: @status, locale: @locale, page: @page + 1) %>
+          <% end %>
+        </span>
+      </nav>
+    </aside>
 
-  <main class="review-detail" aria-label="<%= t('i18n_proofreading.dashboard.current_suggestion', default: 'Current suggestion') %>">
-    <% if @selected_suggestion %>
-      <p class="mobile-back">
-        <%= link_to t('i18n_proofreading.dashboard.back', default: '← All suggestions'),
-                    suggestions_path(status: @status, locale: @locale, page: @page) %>
-      </p>
-      <%= render 'suggestion_panel', suggestion: @selected_suggestion %>
-    <% else %>
-      <div class="empty-state">
-        <h2><%= t('i18n_proofreading.dashboard.select_suggestion', default: 'Select a suggestion') %></h2>
-        <p class="muted"><%= t('i18n_proofreading.dashboard.select_suggestion_hint',
-                               default: 'Open a row to review the proposed wording beside the queue.') %></p>
-      </div>
-    <% end %>
-  </main>
-</div>
+    <main class="review-detail" aria-label="<%= t('i18n_proofreading.dashboard.current_suggestion', default: 'Current suggestion') %>">
+      <% if @selected_suggestion %>
+        <p class="mobile-back">
+          <%= link_to t('i18n_proofreading.dashboard.back', default: '← All suggestions'),
+                      suggestions_path(status: @status, locale: @locale, page: @page) %>
+        </p>
+        <%= render 'suggestion_panel', suggestion: @selected_suggestion %>
+      <% else %>
+        <div class="empty-state">
+          <h2><%= t('i18n_proofreading.dashboard.select_suggestion', default: 'Select a suggestion') %></h2>
+          <p class="muted"><%= t('i18n_proofreading.dashboard.select_suggestion_hint',
+                                 default: 'Open a row to review the proposed wording beside the queue.') %></p>
+        </div>
+      <% end %>
+    </main>
+  </div>
+<% end %>

data/app/views/i18n_proofreading/suggestions/show.html.erb

@@ -1,8 +1,10 @@
 <% content_for :body_class, 'ip-show' %>
 
-<p class="breadcrumb">
-  <%= link_to t('i18n_proofreading.dashboard.title', default: 'I18nProofreading'), suggestions_path %>
-  / #<%= @suggestion.id %>
-</p>
+<%= render layout: 'i18n_proofreading/shared/dashboard' do %>
+  <p class="breadcrumb">
+    <%= link_to t('i18n_proofreading.dashboard.title', default: 'I18nProofreading'), suggestions_path %>
+    / #<%= @suggestion.id %>
+  </p>
 
-<%= render 'suggestion_panel', suggestion: @suggestion %>
+  <%= render 'suggestion_panel', suggestion: @suggestion %>
+<% end %>

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

@@ -6,12 +6,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
-    <%= stylesheet_link_tag "#{dashboard_stylesheet_path}?v=#{I18nProofreading::Widget.dashboard_stylesheet_fingerprint}",
-                            'data-turbo-track': 'reload' %>
+    <%# The dashboard's stylesheet is declared by the views
+        (i18n_proofreading/shared/_dashboard), not here, so it survives a
+        host replacing this layout via config.admin_layout or config.base_controller_class. %>
   </head>
-  <body class="<%= content_for?(:body_class) ? yield(:body_class) : '' %>">
-    <div class="container">
-      <%= yield %>
+  <body class="ip-page <%= content_for?(:body_class) ? yield(:body_class) : '' %>">
+    <div class="ip-dashboard">
+      <div class="container">
+        <%= yield %>
+      </div>
     </div>
   </body>
 </html>

data/config/routes.rb

@@ -10,9 +10,13 @@ I18nProofreading::Engine.routes.draw do
   # route are the widget's public API (see SuggestionsController). There is
   # deliberately no update/destroy — the tool never mutates suggestions from the
   # UI, since it can't write to the host's locale files.
-  resources :suggestions, only: %i[index show create] do
-    get :context, on: :collection
-  end
+  # The widget's two endpoints go to SubmissionsController: they are public and
+  # the dashboard is staff-only, and only the staff half inherits
+  # config.base_controller_class. Sharing one controller would put a host's admin
+  # authentication in front of every proofreader. URLs are unchanged.
+  get 'suggestions/context', to: 'submissions#context', as: :context_suggestions
+  post 'suggestions', to: 'submissions#create', as: :submissions
+  resources :suggestions, only: %i[index show]
 
   root to: 'suggestions#index'
 end

data/lib/generators/i18n_proofreading/install/install_generator.rb

@@ -2,11 +2,13 @@
 
 require 'rails/generators'
 require 'rails/generators/active_record'
+require_relative '../migration_helpers'
 
 module I18nProofreading
   module Generators
     class InstallGenerator < Rails::Generators::Base
       include ActiveRecord::Generators::Migration
+      include MigrationHelpers
 
       source_root File.expand_path('templates', __dir__)
 
@@ -30,12 +32,6 @@ module I18nProofreading
         say 'Optional: run `bin/rails i18n_proofreading:seed_demo` for sample suggestions.'
         say "and look for the “Suggest edits” pill in the bottom-left corner.\n"
       end
-
-      private
-
-      def migration_version
-        "[#{ActiveRecord::VERSION::MAJOR}.#{ActiveRecord::VERSION::MINOR}]"
-      end
     end
   end
 end

data/lib/generators/i18n_proofreading/install/templates/create_i18n_proofreading_suggestions.rb.tt

@@ -2,7 +2,7 @@
 
 class CreateI18nProofreadingSuggestions < ActiveRecord::Migration<%= migration_version %>
   def change
-    create_table :i18n_proofreading_suggestions do |t|
+    create_table :i18n_proofreading_suggestions<%= primary_key_type_option %> do |t|
       t.string :translation_key, null: false
       t.string :locale, null: false
       t.text :old_value

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

@@ -20,6 +20,14 @@ I18nProofreading.configure do |config|
   # Render the dashboard inside your app's admin layout. Default: the gem's
   # standalone dashboard layout.
   #
+  # Two ways to put the dashboard inside an admin you already have.
+  #
+  # The whole stack — your layout, helpers, authentication and any request
+  # context your before_actions set up. Only the dashboard inherits it; the
+  # widget's endpoints stay public, so this cannot gate a proofreader.
+  # config.base_controller_class = "Admin::BaseController"
+  #
+  # Or the layout alone:
   # config.admin_layout = "admin/application"
 
   # Attribute a suggestion to a user (optional). Return an object responding to

data/lib/generators/i18n_proofreading/migration_helpers.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module I18nProofreading
+  module Generators
+    # Shared bits every migration-writing generator needs.
+    module MigrationHelpers
+      private
+
+      def migration_version
+        "[#{ActiveRecord::VERSION::MAJOR}.#{ActiveRecord::VERSION::MINOR}]"
+      end
+
+      # Follow the host's own key type instead of forcing bigint, the same
+      # `Rails.configuration.generators` lookup Rails' own Active Storage,
+      # Action Text and Action Mailbox migrations do — so a host that set it
+      # once gets consistent tables from all of them.
+      #
+      # Rendered as a `create_table` option rather than a bare value, because a
+      # template is expanded at generate time: emitting the method name would
+      # put `id: primary_key_type` in the migration, where nothing defines it.
+      def primary_key_type_option
+        config = Rails.configuration.generators
+        type = config.options[config.orm][:primary_key_type]
+        type ? ", id: :#{type}" : ''
+      end
+    end
+  end
+end

data/lib/i18n_proofreading/configuration.rb

@@ -5,6 +5,10 @@ module I18nProofreading
   # with zero configuration in development; the hooks below let an app decide who
   # sees the tool and how suggestions are attributed.
   class Configuration
+    # The gem's own dashboard layout. Compared against, so DashboardController
+    # can tell "the host left this alone" from "the host chose this".
+    DEFAULT_ADMIN_LAYOUT = 'i18n_proofreading/application'
+
     # Environments the tool is active in. It is never active anywhere else, so a
     # production deploy can't accidentally expose the key markers or the endpoint.
     attr_accessor :enabled_environments
@@ -27,6 +31,21 @@ module I18nProofreading
     # your app's admin shell, e.g. "admin/application".
     attr_accessor :admin_layout
 
+    # The controller the DASHBOARD inherits from, as a String so it resolves
+    # lazily rather than at config time. Default: a plain
+    # 'ActionController::Base', where `authorize_admin` is the only gate.
+    #
+    # Name the controller your own admin already inherits from and the dashboard
+    # adopts that whole stack — layout, helpers, authentication, and any request
+    # context your before_actions set up. `admin_layout` covers only the layout,
+    # which leaves a host layout calling its own helpers to raise NameError under
+    # the engine's isolated namespace.
+    #
+    # Only the dashboard uses it. The widget's endpoints stay on the engine's own
+    # public controller, so an admin base controller here can never demand a
+    # staff session from someone suggesting a translation.
+    attr_accessor :base_controller_class
+
     # Resolve the current user for attribution (optional). Return an object
     # responding to #id, or nil. Receives the Rack::Request.
     attr_accessor :current_user
@@ -74,7 +93,8 @@ module I18nProofreading
       @enabled_environments = %w[development staging]
       @enabled = ->(_request) { true }
       @authorize_admin = ->(_request) { Rails.env.development? }
-      @admin_layout = 'i18n_proofreading/application'
+      @admin_layout = DEFAULT_ADMIN_LAYOUT
+      @base_controller_class = 'ActionController::Base'
       @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_proofreading/dashboard.css

@@ -1,161 +1,158 @@
-      :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 label { color: var(--muted); font-size: 13px; }
-      .filters select {
-        padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px;
-        background: var(--surface); color: var(--text); font: inherit;
-      }
+/* Dashboard styles.
+ *
+ * Three layers, and the split is what lets a host replace the layout:
+ *
+ *   :root            custom properties, all `--ip-` prefixed so they can
+ *                    neither overwrite a host's nor be overwritten by them.
+ *   .ip-page          the page frame (was bare html/body). Only the gem's own
+ *                    layout puts this class on <body>, so inside a host admin
+ *                    these rules simply do not apply.
+ *   .ip-dashboard     everything else, nested. Names like .container, .card
+ *                    and .tabs are confined to the dashboard's own markup, so
+ *                    loading this file inside a host cannot restyle its chrome.
+ *
+ * Nothing here styles a bare `body`, `a`, `table` or `*` at the top level.
+ */
 
-      .card {
-        background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
-        padding: 14px 16px; margin-bottom: 12px;
-      }
-      .card.pad { margin: 0; }
-      .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; }
-
-      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); }
-      :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); }
-      .breadcrumb { margin: 0 0 12px; font-size: 13px; }
-      .case-id { color: var(--muted); font-weight: 400; font-size: 15px; }
-      .panel-head { flex: 0 0 auto; }
-      .panel-head h1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
-      .detail-scroll { min-height: 0; display: flex; flex-direction: column; gap: 12px; }
-      .suggestion-panel { min-width: 0; display: flex; flex-direction: column; }
-      .meta-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
-      .meta-list dt { color: var(--muted); font-size: 13px; }
-      .meta-list dd { margin: 0; overflow-wrap: anywhere; }
+:root {
+        color-scheme: light dark;
+        --ip-bg: #f6f7f9; --ip-surface: #fff; --ip-text: #1c2024; --ip-muted: #6b7280;
+        --ip-border: #e5e7eb; --ip-accent: #2563eb; --ip-accent-text: #fff; --ip-code: #f0f1f3;
+        --ip-pending: #d97706; --ip-applied: #16a34a; --ip-rejected: #6b7280;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+          --ip-bg: #111418; --ip-surface: #1a1f26; --ip-text: #e6e8ea; --ip-muted: #9aa2ab;
+          --ip-border: #2a313a; --ip-accent: #3b82f6; --ip-code: #232a33;
+}
+}
+@media (max-width: 760px) {
+  .ip-page { font-size: 14px; }
+  .ip-index, .ip-show { overflow-x: hidden; }
+  .ip-index { overflow-y: auto; overflow-x: hidden; }
+  .ip-index, .ip-index .container { min-height: 100vh; height: auto; }
+  .ip-index .container { padding-bottom: 10px; }
+  .ip-dashboard {
+  & .container { padding: 14px 10px 24px; }
+  & .review-detail,
+  & .suggestion-panel,
+  & .detail-scroll,
+  & .card,
+  & dl,
+  & dd { min-width: 0; max-width: 100%; }
+  & .suggestion-panel .card { width: calc(100vw - 20px); }
+  & .lede,
+  & dd,
+  & .comment { max-width: calc(100vw - 54px); white-space: normal; overflow-wrap: anywhere; }
+  & .review-shell { display: block; min-height: calc(100vh - 76px); }
+  & .review-sidebar,
+  & .review-detail { min-height: calc(100vh - 76px); }
+  & .review-shell.has-selected .review-sidebar { display: none; }
+  & .review-shell:not(.has-selected) .review-detail { display: none; }
+  & .suggestion-list { overflow: visible; }
+  & .suggestion-row { padding: 12px; }
+  & .suggestion-meta { display: none; }
+  & .review-detail .suggestion-panel { min-height: calc(100vh - 64px); }
+  & .mobile-back { display: block; flex: 0 0 auto; margin: 10px 10px 0; font-size: 13px; }
+  & .panel-head h1 { font-size: 18px; }
+  & .panel-head .key { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
+  & dl.diff,
+  & .meta-list { grid-template-columns: 1fr; gap: 3px; }
+  }
+}
 
-      /* Desktop review: queue on the left, selected suggestion on the right. */
-      .ip-index, .ip-index .container { height: 100vh; height: 100dvh; }
-      .ip-index { overflow: hidden; }
-      .ip-index .container { max-width: 1280px; display: flex; flex-direction: column; padding-bottom: 16px; }
-      .ip-index header.page { flex: 0 0 auto; margin-bottom: 14px; }
-      .review-shell { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(330px, 430px) 1fr;
-                      gap: 16px; }
-      .review-sidebar { min-width: 0; min-height: 0; display: flex; flex-direction: column;
-                        background: var(--surface); border: 1px solid var(--border);
-                        border-radius: 8px; overflow: hidden; }
-      .review-sidebar .tabs { flex: 0 0 auto; margin: 12px 12px 0; padding: 0; background: transparent;
-                              border: 0; border-radius: 0; gap: 6px; flex-wrap: nowrap; }
-      .review-sidebar .tabs a { flex: 1 1 0; position: relative; display: flex; align-items: center;
-                                justify-content: center; gap: 6px; min-height: 34px; padding: 5px 10px 8px;
-                                border-radius: 8px; color: var(--muted); font-weight: 600; }
-      .review-sidebar .tabs a.active { color: var(--text); border: 0; background: transparent; box-shadow: none; margin: 0; }
-      .review-sidebar .tabs a.active::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0;
-                                              height: 2px; border-radius: 999px; background: var(--accent); }
-      .review-sidebar .tabs a:not(.active):hover { text-decoration: none; color: var(--text); background: var(--bg); }
-      .review-sidebar .tabs .count { margin-left: 0; background: color-mix(in srgb, var(--muted) 14%, transparent); }
-      .review-sidebar .tabs a.active .count { background: var(--border); }
-      .review-sidebar .filters { flex: 0 0 auto; margin: 0; padding: 12px; border-bottom: 1px solid var(--border); }
-      .suggestion-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
-      .suggestion-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 13px 14px;
-                        color: var(--text); border-bottom: 1px solid var(--border); }
-      .suggestion-row > .badge { align-self: start; }
-      .suggestion-row:hover { text-decoration: none; background: var(--bg); }
-      .suggestion-row.active { background: color-mix(in srgb, var(--accent) 9%, var(--surface));
-                               box-shadow: inset 3px 0 0 var(--accent); }
-      .suggestion-main { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
-      .suggestion-topline, .suggestion-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
-      .suggestion-topline .key { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-      .suggestion-copy, .suggestion-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-      .suggestion-copy { display: block; font-weight: 600; }
-      .suggestion-time { margin-left: auto; white-space: nowrap; }
-      .review-sidebar .pager { flex: 0 0 auto; margin: 0; padding: 10px 12px; border-top: 1px solid var(--border); }
-      .review-detail { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
-      .review-detail .suggestion-panel { flex: 1 1 auto; min-height: 0; }
-      .review-detail .detail-scroll { flex: 1 1 auto; overflow-y: auto; padding-right: 2px; }
-      .empty-state { margin: auto; max-width: 320px; padding: 24px; text-align: center; }
-      .empty-state h2 { margin: 0 0 6px; font-size: 18px; }
-      .empty-state p { margin: 0; }
-      .mobile-back { display: none; }
+/* Page frame — the gem's own layout only. */
+.ip-page { margin: 0; background: var(--ip-bg); color: var(--ip-text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
+.ip-index { overflow: hidden; }
+.ip-index .container { max-width: 1280px; display: flex; flex-direction: column; padding-bottom: 16px; }
+.ip-index header.page { flex: 0 0 auto; margin-bottom: 14px; }
+.ip-show .detail-scroll { overflow: visible; }
 
-      /* Standalone show pages keep normal page scrolling. */
+/* Dashboard components — any layout. */
+.ip-dashboard {
+  & * { box-sizing: border-box; }
+  & a { color: var(--ip-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(--ip-muted); margin: 4px 0 0; }
+  & header.page { margin-bottom: 20px; }
+  & .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ip-border); margin-bottom: 16px; flex-wrap: wrap; }
+  & .tabs a { padding: 8px 14px; border-radius: 8px 8px 0 0; color: var(--ip-muted); }
+  & .tabs a.active { color: var(--ip-text); font-weight: 600; border: 1px solid var(--ip-border); border-bottom: 2px solid var(--ip-surface); background: var(--ip-surface); margin-bottom: -1px; }
+  & .tabs a:hover { text-decoration: none; color: var(--ip-text); }
+  & .count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--ip-border); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
+  & .filters { margin-bottom: 16px; display: flex; gap: 8px; align-items: center; }
+  & .filters label { color: var(--ip-muted); font-size: 13px; }
+  & .filters select { padding: 6px 8px; border: 1px solid var(--ip-border); border-radius: 8px; background: var(--ip-surface); color: var(--ip-text); font: inherit; }
+  & .card { background: var(--ip-surface); border: 1px solid var(--ip-border); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
+  & .card.pad { margin: 0; }
+  & .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(--ip-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(--ip-pending); }
+  & .badge.status-applied { background: var(--ip-applied); }
+  & .badge.status-rejected { background: var(--ip-rejected); }
+  & .badge.locale { background: transparent; color: var(--ip-muted); border: 1px solid var(--ip-border); }
+  & .spacer { flex: 1; }
+  & .meta { color: var(--ip-muted); font-size: 13px; }
+  & dl.diff { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
+  & dl.diff dt { color: var(--ip-muted); font-size: 13px; }
+  & dl.diff dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
+  & dd .old { color: var(--ip-muted); }
+  & dd .new { font-weight: 600; }
+  & .comment { margin-top: 10px; padding: 8px 10px; background: var(--ip-code); border-radius: 8px; font-size: 14px; overflow-wrap: anywhere; }
+  & button { padding: 7px 13px; border: 1px solid var(--ip-border); border-radius: 8px; cursor: pointer; background: var(--ip-surface); color: var(--ip-text); font: inherit; font-size: 14px; font-weight: 600; }
+  & button:hover { border-color: var(--ip-muted); }
+  & :focus-visible { outline: 2px solid var(--ip-accent); outline-offset: 2px; }
+  & .empty { padding: 48px 16px; text-align: center; color: var(--ip-muted); border: 1px dashed var(--ip-border); border-radius: 12px; }
+  & .pager { margin-top: 16px; display: flex; justify-content: space-between; }
+  & .pager .muted { color: var(--ip-muted); }
+  & .breadcrumb { margin: 0 0 12px; font-size: 13px; }
+  & .case-id { color: var(--ip-muted); font-weight: 400; font-size: 15px; }
+  & .panel-head { flex: 0 0 auto; }
+  & .panel-head h1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
+  & .detail-scroll { min-height: 0; display: flex; flex-direction: column; gap: 12px; }
+  & .suggestion-panel { min-width: 0; display: flex; flex-direction: column; }
+  & .meta-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
+  & .meta-list dt { color: var(--ip-muted); font-size: 13px; }
+  & .meta-list dd { margin: 0; overflow-wrap: anywhere; }
+  & /* Desktop review: queue on the left,
+  & selected suggestion on the right. */
+      .ip-index,
+  & .ip-index .container { height: 100vh; height: 100dvh; }
+  & .review-shell { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(330px, 430px) 1fr; gap: 16px; }
+  & .review-sidebar { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--ip-surface); border: 1px solid var(--ip-border); border-radius: 8px; overflow: hidden; }
+  & .review-sidebar .tabs { flex: 0 0 auto; margin: 12px 12px 0; padding: 0; background: transparent; border: 0; border-radius: 0; gap: 6px; flex-wrap: nowrap; }
+  & .review-sidebar .tabs a { flex: 1 1 0; position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 5px 10px 8px; border-radius: 8px; color: var(--ip-muted); font-weight: 600; }
+  & .review-sidebar .tabs a.active { color: var(--ip-text); border: 0; background: transparent; box-shadow: none; margin: 0; }
+  & .review-sidebar .tabs a.active::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 2px; border-radius: 999px; background: var(--ip-accent); }
+  & .review-sidebar .tabs a:not(.active):hover { text-decoration: none; color: var(--ip-text); background: var(--ip-bg); }
+  & .review-sidebar .tabs .count { margin-left: 0; background: color-mix(in srgb, var(--ip-muted) 14%, transparent); }
+  & .review-sidebar .tabs a.active .count { background: var(--ip-border); }
+  & .review-sidebar .filters { flex: 0 0 auto; margin: 0; padding: 12px; border-bottom: 1px solid var(--ip-border); }
+  & .suggestion-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
+  & .suggestion-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 13px 14px; color: var(--ip-text); border-bottom: 1px solid var(--ip-border); }
+  & .suggestion-row > .badge { align-self: start; }
+  & .suggestion-row:hover { text-decoration: none; background: var(--ip-bg); }
+  & .suggestion-row.active { background: color-mix(in srgb, var(--ip-accent) 9%, var(--ip-surface)); box-shadow: inset 3px 0 0 var(--ip-accent); }
+  & .suggestion-main { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
+  & .suggestion-topline,
+  & .suggestion-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
+  & .suggestion-topline .key { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  & .suggestion-copy,
+  & .suggestion-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  & .suggestion-copy { display: block; font-weight: 600; }
+  & .suggestion-time { margin-left: auto; white-space: nowrap; }
+  & .review-sidebar .pager { flex: 0 0 auto; margin: 0; padding: 10px 12px; border-top: 1px solid var(--ip-border); }
+  & .review-detail { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
+  & .review-detail .suggestion-panel { flex: 1 1 auto; min-height: 0; }
+  & .review-detail .detail-scroll { flex: 1 1 auto; overflow-y: auto; padding-right: 2px; }
+  & .empty-state { margin: auto; max-width: 320px; padding: 24px; text-align: center; }
+  & .empty-state h2 { margin: 0 0 6px; font-size: 18px; }
+  & .empty-state p { margin: 0; }
+  & .mobile-back { display: none; }
+  & /* Standalone show pages keep normal page scrolling. */
       .ip-show { min-height: 100vh; overflow: auto; }
-      .ip-show .detail-scroll { overflow: visible; }
-      @media (max-width: 760px) {
-        body { font-size: 14px; }
-        .container { padding: 14px 10px 24px; }
-        .ip-index, .ip-show { overflow-x: hidden; }
-        .review-detail, .suggestion-panel, .detail-scroll, .card, dl, dd { min-width: 0; max-width: 100%; }
-        .suggestion-panel .card { width: calc(100vw - 20px); }
-        .lede, dd, .comment { max-width: calc(100vw - 54px); white-space: normal; overflow-wrap: anywhere; }
-        .ip-index { overflow-y: auto; overflow-x: hidden; }
-        .ip-index, .ip-index .container { min-height: 100vh; height: auto; }
-        .ip-index .container { padding-bottom: 10px; }
-        .review-shell { display: block; min-height: calc(100vh - 76px); }
-        .review-sidebar, .review-detail { min-height: calc(100vh - 76px); }
-        .review-shell.has-selected .review-sidebar { display: none; }
-        .review-shell:not(.has-selected) .review-detail { display: none; }
-        .suggestion-list { overflow: visible; }
-        .suggestion-row { padding: 12px; }
-        .suggestion-meta { display: none; }
-        .review-detail .suggestion-panel { min-height: calc(100vh - 64px); }
-        .mobile-back { display: block; flex: 0 0 auto; margin: 10px 10px 0; font-size: 13px; }
-        .panel-head h1 { font-size: 18px; }
-        .panel-head .key { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
-        dl.diff, .meta-list { grid-template-columns: 1fr; gap: 3px; }
-      }
+}

data/lib/i18n_proofreading/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module I18nProofreading
-  VERSION = '0.10.6'
+  VERSION = '0.11.0'
 end

data/lib/i18n_proofreading.rb

@@ -31,6 +31,14 @@ module I18nProofreading
     # 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.
+    # The class I18nProofreading::DashboardController inherits from. Resolved on
+    # every call rather than memoized, so a host that reassigns
+    # base_controller_class in a reloadable initializer is not pinned to a stale,
+    # unloaded constant.
+    def base_controller
+      config.base_controller_class.to_s.constantize
+    end
+
     def admin?(request)
       !!config.authorize_admin.call(request)
     end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: i18n_proofreading
 version: !ruby/object:Gem::Version
-  version: 0.10.6
+  version: 0.11.0
 platform: ruby
 authors:
 - Yaroslav Shmarov
@@ -39,12 +39,16 @@ files:
 - MIT-LICENSE
 - README.md
 - Rakefile
+- app/controllers/concerns/i18n_proofreading/request_context.rb
 - app/controllers/i18n_proofreading/application_controller.rb
+- app/controllers/i18n_proofreading/dashboard_controller.rb
+- app/controllers/i18n_proofreading/submissions_controller.rb
 - app/controllers/i18n_proofreading/suggestions_controller.rb
 - app/controllers/i18n_proofreading/widgets_controller.rb
 - app/helpers/i18n_proofreading/tag_helper.rb
 - app/models/i18n_proofreading/application_record.rb
 - app/models/i18n_proofreading/suggestion.rb
+- app/views/i18n_proofreading/shared/_dashboard.html.erb
 - app/views/i18n_proofreading/suggestions/_suggestion_panel.html.erb
 - app/views/i18n_proofreading/suggestions/index.html.erb
 - app/views/i18n_proofreading/suggestions/show.html.erb
@@ -79,6 +83,7 @@ files:
 - lib/generators/i18n_proofreading/install/install_generator.rb
 - lib/generators/i18n_proofreading/install/templates/create_i18n_proofreading_suggestions.rb.tt
 - lib/generators/i18n_proofreading/install/templates/initializer.rb
+- lib/generators/i18n_proofreading/migration_helpers.rb
 - lib/i18n_proofreading.rb
 - lib/i18n_proofreading/configuration.rb
 - lib/i18n_proofreading/dashboard.css