RubyGems - feedback_engine - Versions diffs - 0.1.0 - Mend

feedback_engine 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (50) hide show

checksums.yaml +7 -0
data/CHANGELOG.md +27 -0
data/MIT-LICENSE +20 -0
data/README.md +265 -0
data/Rakefile +8 -0
data/app/assets/feedback_engine/widget.js +368 -0
data/app/controllers/feedback_engine/application_controller.rb +15 -0
data/app/controllers/feedback_engine/feedbacks_controller.rb +120 -0
data/app/helpers/feedback_engine/widget_helper.rb +18 -0
data/app/models/feedback_engine/application_record.rb +7 -0
data/app/models/feedback_engine/feedback.rb +30 -0
data/app/views/feedback_engine/feedbacks/index.html.erb +75 -0
data/app/views/feedback_engine/feedbacks/show.html.erb +63 -0
data/app/views/layouts/feedback_engine/application.html.erb +75 -0
data/config/locales/feedback_engine.ar.yml +23 -0
data/config/locales/feedback_engine.bg.yml +23 -0
data/config/locales/feedback_engine.bn.yml +23 -0
data/config/locales/feedback_engine.de.yml +23 -0
data/config/locales/feedback_engine.el.yml +23 -0
data/config/locales/feedback_engine.en.yml +43 -0
data/config/locales/feedback_engine.es.yml +23 -0
data/config/locales/feedback_engine.fr.yml +23 -0
data/config/locales/feedback_engine.hi.yml +23 -0
data/config/locales/feedback_engine.hr.yml +23 -0
data/config/locales/feedback_engine.id.yml +23 -0
data/config/locales/feedback_engine.it.yml +23 -0
data/config/locales/feedback_engine.ja.yml +23 -0
data/config/locales/feedback_engine.ko.yml +23 -0
data/config/locales/feedback_engine.lb.yml +23 -0
data/config/locales/feedback_engine.nl.yml +23 -0
data/config/locales/feedback_engine.pl.yml +23 -0
data/config/locales/feedback_engine.pt.yml +23 -0
data/config/locales/feedback_engine.ro.yml +23 -0
data/config/locales/feedback_engine.ru.yml +23 -0
data/config/locales/feedback_engine.th.yml +23 -0
data/config/locales/feedback_engine.tr.yml +23 -0
data/config/locales/feedback_engine.uk.yml +23 -0
data/config/locales/feedback_engine.ur.yml +23 -0
data/config/locales/feedback_engine.vi.yml +23 -0
data/config/locales/feedback_engine.zh-CN.yml +23 -0
data/config/routes.rb +8 -0
data/lib/feedback_engine/configuration.rb +87 -0
data/lib/feedback_engine/engine.rb +13 -0
data/lib/feedback_engine/version.rb +5 -0
data/lib/feedback_engine/widget.rb +107 -0
data/lib/feedback_engine.rb +34 -0
data/lib/generators/feedback_engine/install/install_generator.rb +41 -0
data/lib/generators/feedback_engine/install/templates/create_feedback_engine_feedbacks.rb.tt +21 -0
data/lib/generators/feedback_engine/install/templates/initializer.rb +43 -0
metadata +110 -0

data/app/assets/feedback_engine/widget.js ADDED Viewed

@@ -0,0 +1,368 @@
+/*
+ * feedback_engine widget — self-contained, no framework, no build step.
+ *
+ * Reads its config from the <script type="application/json"
+ * data-feedback-engine-config> the server renders — re-read on every render so
+ * a Turbo visit always reflects the current page's config.
+ *
+ * A floating button (or any host element carrying `data-feedback-engine-open`)
+ * opens a small modal form: type, optional section, message, optional
+ * screenshots. The form POSTs multipart form data to the mounted engine with
+ * the page's CSRF token. Esc or the backdrop closes it.
+ */
+(function () {
+  "use strict";
+  var config = readConfig();
+  if (!config || window.__feedbackEngineLoaded) return;
+  window.__feedbackEngineLoaded = true;
+  var Z = 2147483000;
+  var overlay = null;
+  var lastFocused = null;
+  function ready(fn) {
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", fn);
+    } else {
+      fn();
+    }
+  }
+  ready(function () {
+    // Document-level listeners survive Turbo navigations; register them once.
+    document.addEventListener("keydown", handleKeydown);
+    document.addEventListener("click", handleOpenerClick, true);
+    // The button lives in <body>, which Turbo replaces on every visit, so
+    // re-run the per-page setup on each visit. render() also runs now for the
+    // initial (or non-Turbo) load.
+    render();
+    document.addEventListener("turbo:load", render);
+  });
+  function readConfig() {
+    var el = document.querySelector("script[data-feedback-engine-config]");
+    if (!el) return null;
+    try {
+      return JSON.parse(el.textContent);
+    } catch (e) {
+      return null;
+    }
+  }
+  function render() {
+    // Re-read on each visit: the config block is data (not an executed
+    // script), so it reflects the page Turbo just rendered.
+    config = readConfig() || config;
+    injectStyles();
+    if (config.showButton !== false) buildButton();
+  }
+  function handleOpenerClick(event) {
+    var opener = event.target && event.target.closest
+      ? event.target.closest("[data-feedback-engine-open]")
+      : null;
+    if (!opener) return;
+    event.preventDefault();
+    event.stopPropagation();
+    openForm();
+  }
+  function handleKeydown(event) {
+    if (event.key === "Escape" && overlay) closeForm();
+  }
+  // --- floating button --------------------------------------------------------
+  function buildButton() {
+    if (document.getElementById("fbe-button")) return;
+    var button = document.createElement("button");
+    button.id = "fbe-button";
+    button.type = "button";
+    button.setAttribute("data-feedback-engine-open", "");
+    button.textContent = config.buttonLabel || config.labels.button;
+    document.body.appendChild(button);
+  }
+  // --- form -------------------------------------------------------------------
+  function openForm() {
+    if (overlay) return;
+    lastFocused = document.activeElement;
+    overlay = document.createElement("div");
+    overlay.id = "fbe-overlay";
+    overlay.addEventListener("mousedown", function (event) {
+      if (event.target === overlay) closeForm();
+    });
+    var dialog = document.createElement("div");
+    dialog.id = "fbe-dialog";
+    dialog.setAttribute("role", "dialog");
+    dialog.setAttribute("aria-modal", "true");
+    dialog.setAttribute("aria-label", config.labels.title);
+    if (config.rtl) dialog.setAttribute("dir", "rtl");
+    dialog.appendChild(header());
+    dialog.appendChild(form());
+    overlay.appendChild(dialog);
+    document.body.appendChild(overlay);
+    var first = dialog.querySelector("select, textarea, input");
+    if (first) first.focus();
+  }
+  function closeForm() {
+    if (!overlay) return;
+    overlay.remove();
+    overlay = null;
+    if (lastFocused && lastFocused.focus) lastFocused.focus();
+  }
+  function header() {
+    var head = document.createElement("div");
+    head.className = "fbe-head";
+    var title = document.createElement("h2");
+    title.textContent = config.labels.title;
+    var close = document.createElement("button");
+    close.type = "button";
+    close.className = "fbe-x";
+    close.setAttribute("aria-label", config.labels.close);
+    close.textContent = "×";
+    close.addEventListener("click", closeForm);
+    head.appendChild(title);
+    head.appendChild(close);
+    return head;
+  }
+  function form() {
+    var form = document.createElement("form");
+    form.addEventListener("submit", function (event) {
+      event.preventDefault();
+      submit(form);
+    });
+    if (config.kinds.length > 1) form.appendChild(kindField());
+    if (config.sections.length > 0) form.appendChild(sectionField());
+    form.appendChild(messageField());
+    if (config.screenshots.enabled) form.appendChild(screenshotsField());
+    var error = document.createElement("p");
+    error.className = "fbe-error";
+    error.hidden = true;
+    form.appendChild(error);
+    var actions = document.createElement("div");
+    actions.className = "fbe-actions";
+    var cancel = document.createElement("button");
+    cancel.type = "button";
+    cancel.className = "fbe-secondary";
+    cancel.textContent = config.labels.cancel;
+    cancel.addEventListener("click", closeForm);
+    var save = document.createElement("button");
+    save.type = "submit";
+    save.className = "fbe-primary";
+    save.textContent = config.labels.submit;
+    actions.appendChild(cancel);
+    actions.appendChild(save);
+    form.appendChild(actions);
+    return form;
+  }
+  function field(labelText, control) {
+    var wrap = document.createElement("label");
+    wrap.className = "fbe-field";
+    var caption = document.createElement("span");
+    caption.textContent = labelText;
+    wrap.appendChild(caption);
+    wrap.appendChild(control);
+    return wrap;
+  }
+  function kindField() {
+    var select = document.createElement("select");
+    select.name = "kind";
+    config.kinds.forEach(function (kind) {
+      var option = document.createElement("option");
+      option.value = kind.value;
+      option.textContent = kind.label;
+      select.appendChild(option);
+    });
+    return field(config.labels.kind, select);
+  }
+  function sectionField() {
+    var select = document.createElement("select");
+    select.name = "section";
+    var blank = document.createElement("option");
+    blank.value = "";
+    blank.textContent = config.labels.sectionAny;
+    select.appendChild(blank);
+    config.sections.forEach(function (section) {
+      var option = document.createElement("option");
+      option.value = section;
+      option.textContent = section;
+      select.appendChild(option);
+    });
+    return field(config.labels.section, select);
+  }
+  function messageField() {
+    var textarea = document.createElement("textarea");
+    textarea.name = "message";
+    textarea.rows = 5;
+    textarea.placeholder = config.labels.messagePlaceholder;
+    return field(config.labels.message, textarea);
+  }
+  function screenshotsField() {
+    var input = document.createElement("input");
+    input.type = "file";
+    input.name = "screenshots";
+    input.multiple = true;
+    input.accept = "image/*";
+    var wrap = field(config.labels.screenshots, input);
+    var hint = document.createElement("span");
+    hint.className = "fbe-hint";
+    hint.textContent = config.labels.screenshotsHint;
+    wrap.appendChild(hint);
+    return wrap;
+  }
+  // --- submit -------------------------------------------------------------------
+  function submit(form) {
+    var message = form.querySelector("textarea[name=message]").value.trim();
+    if (!message) return showError(form, config.labels.errorBlank);
+    var files = fileList(form);
+    if (files.length > config.screenshots.max) {
+      return showError(form, config.labels.errorTooMany);
+    }
+    for (var i = 0; i < files.length; i++) {
+      if (files[i].size > config.screenshots.maxSize) {
+        return showError(form, config.labels.errorTooLarge);
+      }
+    }
+    var data = new FormData();
+    var kindSelect = form.querySelector("select[name=kind]");
+    data.append("feedback[kind]", kindSelect ? kindSelect.value : config.kinds[0].value);
+    var sectionSelect = form.querySelector("select[name=section]");
+    if (sectionSelect && sectionSelect.value) data.append("feedback[section]", sectionSelect.value);
+    data.append("feedback[message]", message);
+    data.append("feedback[page_url]", window.location.href);
+    files.forEach(function (file) {
+      data.append("feedback[screenshots][]", file);
+    });
+    var save = form.querySelector(".fbe-primary");
+    save.disabled = true;
+    fetch(config.endpoint, {
+      method: "POST",
+      headers: csrfHeaders(),
+      body: data,
+      credentials: "same-origin"
+    })
+      .then(function (response) {
+        if (response.ok) return thanks();
+        return response
+          .json()
+          .catch(function () { return {}; })
+          .then(function (body) {
+            var messages = body && body.errors;
+            showError(form, (messages && messages[0]) || config.labels.errorSave);
+          });
+      })
+      .catch(function () {
+        showError(form, config.labels.errorSave);
+      })
+      .finally(function () {
+        save.disabled = false;
+      });
+  }
+  function fileList(form) {
+    var input = form.querySelector("input[type=file]");
+    return input ? Array.prototype.slice.call(input.files) : [];
+  }
+  function csrfHeaders() {
+    var meta = document.querySelector('meta[name="csrf-token"]');
+    return meta ? { "X-CSRF-Token": meta.content } : {};
+  }
+  function showError(form, text) {
+    var error = form.querySelector(".fbe-error");
+    error.textContent = text;
+    error.hidden = false;
+  }
+  function thanks() {
+    if (!overlay) return;
+    var dialog = overlay.querySelector("#fbe-dialog");
+    dialog.textContent = "";
+    var note = document.createElement("p");
+    note.className = "fbe-thanks";
+    note.textContent = config.labels.thanks;
+    dialog.appendChild(note);
+    setTimeout(closeForm, 1600);
+  }
+  // --- styles -------------------------------------------------------------------
+  function injectStyles() {
+    if (document.getElementById("fbe-styles")) return;
+    var css = [
+      "#fbe-button{position:fixed;bottom:16px;right:16px;z-index:" + Z + ";",
+      "padding:10px 16px;border:0;border-radius:999px;cursor:pointer;",
+      "background:#2563eb;color:#fff;font:600 14px/1 system-ui,-apple-system,sans-serif;",
+      "box-shadow:0 4px 14px rgba(0,0,0,.25)}",
+      "#fbe-button:hover{background:#1d4ed8}",
+      "#fbe-overlay{position:fixed;inset:0;z-index:" + (Z + 1) + ";background:rgba(0,0,0,.45);",
+      "display:flex;align-items:center;justify-content:center;padding:16px}",
+      "#fbe-dialog{width:100%;max-width:420px;max-height:90vh;overflow:auto;",
+      "background:#fff;color:#1c2024;border-radius:14px;padding:20px;",
+      "font:14px/1.5 system-ui,-apple-system,sans-serif;box-shadow:0 20px 60px rgba(0,0,0,.35)}",
+      "#fbe-dialog .fbe-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}",
+      "#fbe-dialog h2{margin:0;font-size:17px}",
+      "#fbe-dialog .fbe-x{border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:inherit;padding:2px 6px}",
+      "#fbe-dialog .fbe-field{display:block;margin-bottom:12px}",
+      "#fbe-dialog .fbe-field>span{display:block;margin-bottom:4px;font-weight:600}",
+      "#fbe-dialog select,#fbe-dialog textarea,#fbe-dialog input[type=file]{width:100%;box-sizing:border-box;",
+      "padding:8px;border:1px solid #d1d5db;border-radius:8px;background:inherit;color:inherit;font:inherit}",
+      "#fbe-dialog input[type=file]{padding:6px;color:#6b7280;font-size:13px}",
+      "#fbe-dialog input[type=file]::file-selector-button{margin-inline-end:10px;padding:6px 12px;",
+      "border:1px solid #d1d5db;border-radius:6px;background:none;color:#1c2024;font:inherit;cursor:pointer}",
+      "#fbe-dialog textarea{resize:vertical}",
+      "#fbe-dialog .fbe-hint{display:block;margin-top:4px;font-size:12px;color:#6b7280;font-weight:400}",
+      "#fbe-dialog .fbe-error{color:#dc2626;margin:0 0 12px}",
+      "#fbe-dialog .fbe-actions{display:flex;justify-content:flex-end;gap:8px}",
+      "#fbe-dialog button{padding:8px 14px;border-radius:8px;cursor:pointer;font:inherit}",
+      "#fbe-dialog .fbe-secondary{border:1px solid #d1d5db;background:none;color:inherit}",
+      "#fbe-dialog .fbe-primary{border:0;background:#2563eb;color:#fff;font-weight:600}",
+      "#fbe-dialog .fbe-primary:disabled{opacity:.6;cursor:default}",
+      "#fbe-dialog .fbe-thanks{margin:8px 0;text-align:center;font-size:15px}",
+      "@media (prefers-color-scheme:dark){",
+      "#fbe-dialog{background:#1a1f26;color:#e6e8ea}",
+      "#fbe-dialog select,#fbe-dialog textarea,#fbe-dialog input[type=file]{border-color:#2a313a}",
+      "#fbe-dialog input[type=file]{color:#9aa2ab}",
+      "#fbe-dialog input[type=file]::file-selector-button{border-color:#2a313a;color:#e6e8ea}",
+      "#fbe-dialog .fbe-secondary{border-color:#2a313a}",
+      "#fbe-dialog .fbe-hint{color:#9aa2ab}",
+      "}"
+    ].join("");
+    var style = document.createElement("style");
+    style.id = "fbe-styles";
+    style.textContent = css;
+    document.head.appendChild(style);
+  }
+})();

data/app/controllers/feedback_engine/application_controller.rb ADDED Viewed

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+module FeedbackEngine
+  class ApplicationController < ActionController::Base
+    protect_from_forgery with: :exception
+    private
+    def current_author
+      return @current_author if defined?(@current_author)
+      @current_author = FeedbackEngine.config.current_user.call(request)
+    end
+  end
+end

data/app/controllers/feedback_engine/feedbacks_controller.rb ADDED Viewed

@@ -0,0 +1,120 @@
+# frozen_string_literal: true
+module FeedbackEngine
+  class FeedbacksController < ApplicationController
+    PER_PAGE = 50
+    layout 'feedback_engine/application', except: :create
+    # The widget posts here; everything else is the triage dashboard.
+    before_action :require_enabled, only: :create
+    before_action :require_admin, except: :create
+    before_action :set_feedback, only: %i[show update destroy]
+    def index
+      @status = Feedback::STATUSES.include?(params[:status]) ? params[:status] : 'open'
+      @kind = FeedbackEngine.config.kinds.map(&:to_s).include?(params[:kind]) ? params[:kind] : nil
+      @counts = Feedback.group(:status).count
+      scope = Feedback.where(status: @status)
+      scope = scope.where(kind: @kind) if @kind
+      @page = [params[:page].to_i, 1].max
+      @feedbacks = scope.newest_first.offset((@page - 1) * PER_PAGE).limit(PER_PAGE + 1).to_a
+      @more = @feedbacks.size > PER_PAGE
+      @feedbacks = @feedbacks.first(PER_PAGE)
+    end
+    def show; end
+    def create
+      feedback = Feedback.new(feedback_params)
+      feedback.user_agent = request.user_agent
+      attribute_author(feedback)
+      error = attach_screenshots(feedback)
+      return render json: { errors: [error] }, status: :unprocessable_entity if error
+      if feedback.save
+        FeedbackEngine.config.on_submit.call(feedback)
+        head :created
+      else
+        render json: { errors: feedback.errors.full_messages }, status: :unprocessable_entity
+      end
+    end
+    def update
+      @feedback.update!(params.require(:feedback).permit(:status))
+      redirect_back fallback_location: feedback_path(@feedback), status: :see_other
+    end
+    def destroy
+      @feedback.destroy!
+      redirect_to root_path, status: :see_other
+    end
+    private
+    def require_enabled
+      head :forbidden unless FeedbackEngine.enabled?(request)
+    end
+    # Server-side gate for the dashboard. Default: development only.
+    def require_admin
+      return if FeedbackEngine.admin?(request)
+      render plain: 'Forbidden. Set FeedbackEngine.config.authorize_admin to grant access.',
+             status: :forbidden
+    end
+    def set_feedback
+      @feedback = Feedback.find(params[:id])
+    end
+    def feedback_params
+      params.require(:feedback).permit(:kind, :section, :message, :page_url)
+    end
+    def attribute_author(feedback)
+      author = current_author
+      return unless author
+      feedback.author_id = author.id.to_s if author.respond_to?(:id)
+      feedback.author_label = FeedbackEngine.config.author_label.call(author)
+    end
+    # Validates and attaches uploads. Returns an error message, or nil when
+    # everything (including "no screenshots at all") is fine.
+    def attach_screenshots(feedback)
+      files = Array(params.dig(:feedback, :screenshots)).reject(&:blank?)
+      return nil if files.empty?
+      return t_error(:error_save) unless FeedbackEngine.config.screenshots_enabled?
+      return t_error(:error_too_many, count: FeedbackEngine.config.max_screenshots) if too_many?(files)
+      return t_error(:error_too_large, size: max_size_mb) if files.any? { |f| f.size > max_size }
+      return t_error(:error_save) unless files.all? { |f| f.content_type.to_s.start_with?('image/') }
+      feedback.screenshots.attach(files)
+      nil
+    end
+    def too_many?(files)
+      files.size > FeedbackEngine.config.max_screenshots
+    end
+    def max_size
+      FeedbackEngine.config.max_screenshot_size
+    end
+    def max_size_mb
+      max_size / (1024 * 1024)
+    end
+    def t_error(key, **args)
+      defaults = {
+        error_save: 'Could not send feedback. Please try again.',
+        error_too_many: 'Too many screenshots (max %{count}).',
+        error_too_large: 'A screenshot is too large (max %{size} MB).'
+      }
+      I18n.t(key, scope: :feedback_engine, default: defaults[key], **args)
+    end
+  end
+end

data/app/helpers/feedback_engine/widget_helper.rb ADDED Viewed

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+module FeedbackEngine
+  # Included into the host's ActionView. Drop `<%= feedback_engine_tag %>`
+  # before </body> in your layout; it renders nothing unless feedback is
+  # enabled for the request.
+  module WidgetHelper
+    def feedback_engine_tag
+      return unless FeedbackEngine.enabled?(request)
+      Widget.snippet(
+        endpoint: FeedbackEngine.config.feedbacks_endpoint,
+        locale: I18n.locale,
+        nonce: (content_security_policy_nonce if respond_to?(:content_security_policy_nonce))
+      ).html_safe
+    end
+  end
+end

data/app/models/feedback_engine/application_record.rb ADDED Viewed

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+module FeedbackEngine
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

data/app/models/feedback_engine/feedback.rb ADDED Viewed

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+module FeedbackEngine
+  # One piece of user feedback. Author attribution is optional and stored as
+  # loose fields (no foreign key to the host's user table) so the model is
+  # portable across apps with different user models.
+  class Feedback < ApplicationRecord
+    # Hand-rolled instead of an AR enum: `open` would collide with Kernel#open
+    # as a scope name, and three statuses don't need the machinery anyway.
+    STATUSES = %w[open in_review resolved].freeze
+    has_many_attached :screenshots if defined?(::ActiveStorage)
+    validates :message, presence: true
+    validates :status, inclusion: { in: STATUSES }
+    validates :kind,
+              presence: true,
+              inclusion: { in: ->(_) { FeedbackEngine.config.kinds.map(&:to_s) } }
+    scope :newest_first, -> { order(id: :desc) }
+    STATUSES.each do |status|
+      define_method(:"#{status}?") { self.status == status }
+    end
+    def screenshots?
+      respond_to?(:screenshots) && screenshots.attached?
+    end
+  end
+end

data/app/views/feedback_engine/feedbacks/index.html.erb ADDED Viewed

@@ -0,0 +1,75 @@
+<h1><%= t('feedback_engine.dashboard.title', default: 'Feedback') %></h1>
+<div class="tabs">
+  <% FeedbackEngine::Feedback::STATUSES.each do |status| %>
+    <%= link_to feedbacks_path(status: status, kind: @kind),
+                class: ('active' if status == @status) do %>
+      <%= t("feedback_engine.statuses.#{status}", default: status.humanize) %>
+      <span class="count"><%= @counts.fetch(status, 0) %></span>
+    <% end %>
+  <% end %>
+</div>
+<form class="filters" method="get">
+  <input type="hidden" name="status" value="<%= @status %>">
+  <select name="kind" onchange="this.form.submit()">
+    <option value=""><%= t('feedback_engine.dashboard.all_kinds', default: 'All types') %></option>
+    <% FeedbackEngine.config.kinds.each do |kind| %>
+      <option value="<%= kind %>" <%= 'selected' if kind.to_s == @kind %>>
+        <%= t("feedback_engine.kinds.#{kind}", default: kind.to_s.humanize) %>
+      </option>
+    <% end %>
+  </select>
+  <noscript><button><%= t('feedback_engine.dashboard.filter', default: 'Filter') %></button></noscript>
+</form>
+<div class="card">
+  <% if @feedbacks.any? %>
+    <table>
+      <thead>
+        <tr>
+          <th><%= t('feedback_engine.kind', default: 'Type') %></th>
+          <th><%= t('feedback_engine.message', default: 'Message') %></th>
+          <th><%= t('feedback_engine.section', default: 'Section') %></th>
+          <th><%= t('feedback_engine.dashboard.from', default: 'From') %></th>
+          <th><%= t('feedback_engine.dashboard.filed', default: 'Filed') %></th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @feedbacks.each do |feedback| %>
+          <tr>
+            <td>
+              <span class="badge kind-<%= feedback.kind.to_s.parameterize %>">
+                <%= t("feedback_engine.kinds.#{feedback.kind}", default: feedback.kind.humanize) %>
+              </span>
+            </td>
+            <td>
+              <%= link_to truncate(feedback.message, length: 120), feedback_path(feedback) %>
+              <% if feedback.screenshots? %>
+                <div class="muted">📎 <%= feedback.screenshots.count %></div>
+              <% end %>
+            </td>
+            <td><%= feedback.section %></td>
+            <td><%= feedback.author_label %></td>
+            <td class="muted" title="<%= feedback.created_at %>">
+              <%= time_ago_in_words(feedback.created_at) %>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  <% else %>
+    <div class="empty"><%= t('feedback_engine.dashboard.empty', default: 'Nothing here yet.') %></div>
+  <% end %>
+</div>
+<div class="pager">
+  <% if @page > 1 %>
+    <%= link_to t('feedback_engine.dashboard.newer', default: '← Newer'),
+                feedbacks_path(status: @status, kind: @kind, page: @page - 1) %>
+  <% end %>
+  <% if @more %>
+    <%= link_to t('feedback_engine.dashboard.older', default: 'Older →'),
+                feedbacks_path(status: @status, kind: @kind, page: @page + 1) %>
+  <% end %>
+</div>