product_tours 0.1.0

data/app/controllers/product_tours/widgets_controller.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module ProductTours
+  class WidgetsController < ApplicationController
+    skip_forgery_protection
+
+    def show
+      serve(Widget.javascript, Widget.fingerprint)
+    end
+
+    def dashboard
+      serve(Widget.dashboard_javascript, Widget.dashboard_fingerprint, 'text/javascript')
+    end
+
+    def dashboard_stylesheet
+      serve(Widget.dashboard_stylesheet, Widget.dashboard_stylesheet_fingerprint, 'text/css')
+    end
+
+    private
+
+    def serve(source, fingerprint, content_type = 'text/javascript')
+      expires_in 1.year, public: true if params[:v] == fingerprint
+      return unless stale?(etag: [ProductTours::VERSION, fingerprint])
+
+      render plain: source, content_type: content_type
+    end
+  end
+end

data/app/helpers/product_tours/posts_helper.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module ProductTours
+  module PostsHelper
+    LOCALE_NAMES = {
+      'ar' => 'Arabic', 'bg' => 'Bulgarian', 'bn' => 'Bengali', 'de' => 'German', 'el' => 'Greek',
+      'en' => 'English', 'es' => 'Spanish', 'fr' => 'French', 'hi' => 'Hindi', 'hr' => 'Croatian',
+      'id' => 'Indonesian', 'it' => 'Italian', 'ja' => 'Japanese', 'ko' => 'Korean',
+      'lb' => 'Luxembourgish', 'nl' => 'Dutch', 'pl' => 'Polish', 'pt' => 'Portuguese',
+      'ro' => 'Romanian', 'ru' => 'Russian', 'th' => 'Thai', 'tr' => 'Turkish', 'uk' => 'Ukrainian',
+      'ur' => 'Urdu', 'vi' => 'Vietnamese', 'zh-CN' => 'Chinese (Simplified)'
+    }.freeze
+
+    def product_tours_locale_name(locale)
+      code = locale.to_s
+      "#{LOCALE_NAMES.fetch(code, code.upcase)} (#{code})"
+    end
+  end
+end

data/app/helpers/product_tours/widget_helper.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module ProductTours
+  module WidgetHelper
+    def product_tours_tag
+      return unless ProductTours.enabled?(request)
+
+      ProductTours::Widget.snippet(
+        locale: ProductTours.locale(request),
+        nonce: (content_security_policy_nonce if respond_to?(:content_security_policy_nonce))
+      ).html_safe
+    end
+  end
+end

data/app/models/product_tours/application_record.rb

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

data/app/models/product_tours/post.rb

@@ -0,0 +1,128 @@
+# frozen_string_literal: true
+
+require 'uri'
+
+module ProductTours
+  class Post < ApplicationRecord
+    KEY_FORMAT = /\A[a-z0-9]+(?:[._-][a-z0-9]+)*\z/
+    STATUSES = %w[draft published].freeze
+    DASHBOARD_STATUSES = %w[published draft].freeze
+
+    enum :status, STATUSES.index_by(&:itself), default: :draft
+
+    has_rich_text :description if respond_to?(:has_rich_text)
+
+    has_one_attached :video, service: ProductTours.config.storage_service if defined?(::ActiveStorage)
+
+    validates :key, presence: true, format: { with: KEY_FORMAT }, uniqueness: { scope: :locale }
+    validates :locale, presence: true
+    validates :status, inclusion: { in: STATUSES }
+    validates :title, presence: true
+    validate :action_has_one_destination
+    validate :action_post_is_linkable
+    validate :action_url_is_safe
+    validate :video_url_is_supported
+    validate :uploaded_file_is_video
+
+    before_validation :set_default_locale
+    before_validation :derive_video_metadata, if: :will_save_change_to_video_url?
+
+    scope :newest_first, -> { order(updated_at: :desc, id: :desc) }
+
+    def self.description_supported?
+      reflect_on_association(:rich_text_description).present? &&
+        ActionText::RichText.table_exists?
+    rescue ActiveRecord::NoDatabaseError, ActiveRecord::StatementInvalid, NameError
+      false
+    end
+
+    def self.video_upload_supported?
+      reflect_on_association(:video_attachment).present? &&
+        ActiveStorage::Blob.table_exists? && ActiveStorage::Attachment.table_exists?
+    rescue ActiveRecord::NoDatabaseError, ActiveRecord::StatementInvalid, NameError
+      false
+    end
+
+    def uploaded_video?
+      self.class.video_upload_supported? && video.attached?
+    end
+
+    def resolved_video
+      return { kind: 'upload', provider: 'upload', url: nil } if uploaded_video?
+
+      resolved = VideoResolver.resolve(video_url)
+      return if resolved.nil?
+
+      {
+        kind: resolved.kind,
+        provider: resolved.provider,
+        url: resolved.url,
+        thumbnail_url: video_metadata.to_h['thumbnail_url']
+      }.compact
+    end
+
+    def action_post
+      return if action_post_key.blank?
+
+      self.class.find_by(locale: locale, key: action_post_key)
+    end
+
+    private
+
+    def set_default_locale
+      self.locale = I18n.default_locale.to_s if locale.blank?
+    end
+
+    def derive_video_metadata
+      resolved = VideoResolver.resolve(video_url)
+      self.video_metadata = resolved ? video_metadata.to_h.merge(resolved.metadata) : {}
+    end
+
+    def video_url_is_supported
+      return if video_url.blank? || VideoResolver.resolve(video_url)
+
+      errors.add(:video_url, 'must be an HTTPS YouTube, Vimeo, Loom, Tella, Voomly, MP4, or WebM URL')
+    end
+
+    def action_url_is_safe
+      return if action_url.blank?
+      return if action_url.start_with?('/') && !action_url.start_with?('//')
+
+      uri = URI.parse(action_url)
+      return if uri.is_a?(URI::HTTP) && %w[http https].include?(uri.scheme) && uri.host.present? && uri.userinfo.nil?
+
+      errors.add(:action_url, 'must be a relative path or an HTTP(S) URL')
+    rescue URI::InvalidURIError
+      errors.add(:action_url, 'must be a relative path or an HTTP(S) URL')
+    end
+
+    def action_has_one_destination
+      return unless action_url.present? && action_post_key.present?
+
+      errors.add(:base, 'Primary action can open a URL or another post, not both')
+    end
+
+    def action_post_is_linkable
+      return if action_post_key.blank?
+
+      unless action_post_key.match?(KEY_FORMAT)
+        errors.add(:action_post_key, 'must use a valid post key')
+        return
+      end
+      if action_post_key == key
+        errors.add(:action_post_key, 'cannot link to the same post')
+        return
+      end
+      return if locale.blank? || self.class.exists?(locale: locale, key: action_post_key)
+
+      errors.add(:action_post_key, 'must identify an existing post in the same locale')
+    end
+
+    def uploaded_file_is_video
+      return unless uploaded_video?
+      return if video.blob.content_type.to_s.start_with?('video/')
+
+      errors.add(:video, 'must be a video file')
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title><%= t("product_tours.dashboard.title", default: "Product tours") %></title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+  <%= stylesheet_link_tag "#{dashboard_stylesheet_path}?v=#{ProductTours::Widget.dashboard_stylesheet_fingerprint}",
+                          "data-turbo-track": "reload" %>
+  <%= javascript_include_tag "#{dashboard_script_path}?v=#{ProductTours::Widget.dashboard_fingerprint}",
+                             "data-turbo-track": "reload", defer: true, nonce: true %>
+</head>
+<body class="<%= content_for?(:body_class) ? yield(:body_class) : '' %>">
+  <div class="container">
+    <% if notice.present? %><div class="flash notice"><%= notice %></div><% end %>
+    <% if alert.present? %><div class="flash alert"><%= alert %></div><% end %>
+    <%= yield %>
+  </div>
+</body>
+</html>

data/app/views/product_tours/posts/_form.html.erb

@@ -0,0 +1,177 @@
+<%= form_with model: post, class: "post-form" do |form| %>
+  <% action_target = post.action_post_key.present? ? "post" : (post.action_url.present? ? "url" : "close") %>
+  <% linkable_posts = @linkable_posts.map do |candidate|
+       { id: candidate.id, key: candidate.key, locale: candidate.locale, status: candidate.status,
+         label: "#{candidate.title} — #{candidate.key} (#{candidate.status})" }
+     end %>
+  <% video_source = params[:video_source].presence || (post.uploaded_video? ? "upload" : "url") %>
+  <% if post.errors.any? %>
+    <div class="errors" role="alert">
+      <strong><%= t("product_tours.dashboard.fix_errors", default: "Fix the following fields:") %></strong>
+      <ul><% post.errors.full_messages.each do |message| %><li><%= message %></li><% end %></ul>
+    </div>
+  <% end %>
+
+  <div class="form-card">
+  <section class="form-section">
+    <h2><%= t("product_tours.dashboard.identity", default: "Tutorial details") %></h2>
+    <div class="field">
+      <%= form.label :title %>
+      <%= form.text_field :title, required: true, autofocus: true %>
+    </div>
+    <div class="field">
+      <%= form.label :key, t("product_tours.dashboard.trigger_key", default: "Trigger key") %>
+      <%= form.text_field :key, required: true, disabled: @identity_locked,
+                          pattern: "[a-z0-9]+([._-][a-z0-9]+)*",
+                          data: { product_tour_key: true }, placeholder: "billing_setup" %>
+      <small>
+        <% if @identity_locked %>
+          <%= t("product_tours.dashboard.key_locked_hint", default: "Shared by this tutorial and its translations.") %>
+        <% else %>
+          <%= t("product_tours.dashboard.key_hint", default: "Used by your app to open this tutorial. Lowercase letters and numbers, separated by ., _, or -.") %>
+        <% end %>
+      </small>
+    </div>
+    <div class="field">
+      <%= form.label :locale, t("product_tours.dashboard.language", default: "Language") %>
+      <%= form.text_field :locale, disabled: true %>
+      <small>
+        <% if post.new_record? %>
+          <%= t("product_tours.dashboard.default_language_hint", default: "New tutorials start in your app's default language. Add translations from the tutorial page.") %>
+        <% else %>
+          <%= t("product_tours.dashboard.language_locked_hint", default: "Add and open other languages from the tutorial page.") %>
+        <% end %>
+      </small>
+    </div>
+    <div class="field">
+      <%= form.label :status, t("product_tours.dashboard.publication_status", default: "Publication status") %>
+      <%= form.select :status, ProductTours::Post::STATUSES.map { |status| [status.humanize, status] } %>
+    </div>
+  </section>
+
+  <% if ProductTours::Post.description_supported? %>
+    <section class="form-section">
+      <h2><%= t("product_tours.dashboard.description", default: "Description") %></h2>
+      <div class="rich-editor" data-rich-editor>
+        <div class="rich-toolbar" role="toolbar" aria-label="<%= t("product_tours.dashboard.formatting", default: "Formatting") %>">
+          <button type="button" data-rich-command="bold" aria-label="<%= t("product_tours.dashboard.bold", default: "Bold") %>"><strong>B</strong></button>
+          <button type="button" data-rich-command="italic" aria-label="<%= t("product_tours.dashboard.italic", default: "Italic") %>"><em>I</em></button>
+          <button type="button" data-rich-command="insertUnorderedList" aria-label="<%= t("product_tours.dashboard.bullet_list", default: "Bulleted list") %>">•</button>
+          <button type="button" data-rich-command="insertOrderedList" aria-label="<%= t("product_tours.dashboard.numbered_list", default: "Numbered list") %>">1.</button>
+          <button type="button" data-rich-command="createLink" aria-label="<%= t("product_tours.dashboard.link", default: "Link") %>">↗</button>
+        </div>
+        <%= form.hidden_field :description, value: post.description.body.to_s, data: { rich_input: true } %>
+        <div class="rich-content" contenteditable="true" role="textbox" aria-multiline="true"
+             aria-label="<%= t("product_tours.dashboard.description", default: "Description") %>"
+             data-rich-content><%= post.description.body.to_s.html_safe %></div>
+      </div>
+    </section>
+  <% end %>
+
+  <section class="form-section">
+    <h2><%= t("product_tours.dashboard.video", default: "Video") %></h2>
+    <% if ProductTours::Post.video_upload_supported? %>
+      <fieldset class="video-source-picker" data-video-source-picker data-has-upload="<%= post.uploaded_video? %>">
+        <legend class="sr-only"><%= t("product_tours.dashboard.video_source", default: "Video source") %></legend>
+        <label class="action-choice">
+          <%= radio_button_tag :video_source, "url", video_source == "url", data: { video_source: true } %>
+          <span><strong><%= t("product_tours.dashboard.video_link", default: "Use a video link") %></strong>
+            <small><%= t("product_tours.dashboard.video_link_hint", default: "Paste a link from a supported provider or a direct video URL.") %></small></span>
+        </label>
+        <label class="action-choice">
+          <%= radio_button_tag :video_source, "upload", video_source == "upload", data: { video_source: true } %>
+          <span><strong><%= t("product_tours.dashboard.video_upload", default: "Upload a video") %></strong>
+            <small><%= t("product_tours.dashboard.video_upload_hint", default: "Choose a video file from your computer.") %></small></span>
+        </label>
+      </fieldset>
+    <% end %>
+
+    <div data-video-source-fields="url" <%= "hidden" unless video_source == "url" %>>
+      <div class="field">
+        <%= form.label :video_url, t("product_tours.dashboard.video_url", default: "Video URL") %>
+        <%= form.url_field :video_url, placeholder: "https://www.loom.com/share/...",
+                           disabled: video_source != "url", data: { video_preview_input: true } %>
+        <small><%= t("product_tours.dashboard.video_hint", default: "YouTube, Vimeo, Loom, Tella, Voomly, or a direct MP4/WebM URL.") %></small>
+      </div>
+      <div class="form-video-preview" data-video-preview
+           data-endpoint="<%= video_preview_posts_path %>"
+           data-loading="<%= t("product_tours.dashboard.video_loading", default: "Loading preview…") %>"
+           data-error="<%= t("product_tours.dashboard.video_preview_failed", default: "This video could not be previewed.") %>"
+           hidden>
+        <div class="video-preview" data-video-preview-frame></div>
+        <small data-video-preview-status role="status"></small>
+      </div>
+    </div>
+
+    <% if ProductTours::Post.video_upload_supported? %>
+      <div data-video-source-fields="upload" <%= "hidden" unless video_source == "upload" %>>
+        <div class="field">
+          <%= form.label :video, t("product_tours.dashboard.video_file", default: "Video file") %>
+          <%= form.file_field :video, accept: "video/*", disabled: video_source != "upload",
+                              required: video_source == "upload" && !post.uploaded_video? %>
+          <% if post.uploaded_video? %>
+            <small><%= t("product_tours.dashboard.current_video", default: "Current file: %{filename}", filename: post.video.filename) %></small>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  </section>
+
+  <section class="form-section">
+    <h2><%= t("product_tours.dashboard.action", default: "Primary action") %></h2>
+    <p class="section-intro"><%= t("product_tours.dashboard.action_intro", default: "Choose what happens when the visitor clicks the main button.") %></p>
+    <fieldset class="action-picker" data-action-picker>
+      <legend class="sr-only"><%= t("product_tours.dashboard.action_destination", default: "Button destination") %></legend>
+      <label class="action-choice">
+        <%= radio_button_tag :action_target, "close", action_target == "close", data: { action_target: true } %>
+        <span><strong><%= t("product_tours.dashboard.action_finish", default: "Finish and close") %></strong>
+          <small><%= t("product_tours.dashboard.action_finish_hint", default: "Marks this tutorial complete and closes the modal.") %></small></span>
+      </label>
+      <label class="action-choice">
+        <%= radio_button_tag :action_target, "post", action_target == "post", data: { action_target: true } %>
+        <span><strong><%= t("product_tours.dashboard.action_post", default: "Continue to another tutorial") %></strong>
+          <small><%= t("product_tours.dashboard.action_post_hint", default: "Opens it in the same modal and automatically adds a Back button.") %></small></span>
+      </label>
+      <label class="action-choice">
+        <%= radio_button_tag :action_target, "url", action_target == "url", data: { action_target: true } %>
+        <span><strong><%= t("product_tours.dashboard.action_url_choice", default: "Open a page") %></strong>
+          <small><%= t("product_tours.dashboard.action_url_hint", default: "Marks this tutorial complete, then sends the visitor to a URL.") %></small></span>
+      </label>
+    </fieldset>
+
+    <div class="field">
+      <%= form.label :action_label, t("product_tours.dashboard.action_label", default: "Button label") %>
+      <%= form.text_field :action_label, placeholder: action_target == "post" ? t("product_tours.next", default: "Next") : t("product_tours.done", default: "Done"),
+                          data: { action_label: true } %>
+      <small><%= t("product_tours.dashboard.action_label_hint", default: "Optional. A sensible label is used when left blank.") %></small>
+    </div>
+
+    <div data-action-fields="post">
+      <div class="field">
+        <%= form.label :action_post_key, t("product_tours.dashboard.next_post", default: "Next tutorial") %>
+        <% same_locale_posts = @linkable_posts.select { |candidate| candidate.locale == post.locale } %>
+        <% post_options = same_locale_posts.map { |candidate| ["#{candidate.title} — #{candidate.key} (#{candidate.status})", candidate.key] } %>
+        <%= form.select :action_post_key, options_for_select(post_options, post.action_post_key),
+                        { include_blank: t("product_tours.dashboard.select_next_post", default: "Select the next tutorial…") },
+                        required: true, data: { action_post_select: true, selected_key: post.action_post_key,
+                                                current_post_id: post.id } %>
+        <small><%= t("product_tours.dashboard.next_post_hint", default: "Tutorials must use the same language. Draft tutorials can be linked while you prepare the sequence.") %></small>
+      </div>
+    </div>
+
+    <div data-action-fields="url">
+      <div class="field">
+        <%= form.label :action_url %>
+        <%= form.text_field :action_url, placeholder: "/settings", required: true %>
+        <small><%= t("product_tours.dashboard.action_hint", default: "Use an app path such as /settings or a complete HTTP(S) URL.") %></small>
+      </div>
+    </div>
+    <script type="application/json" data-action-post-options><%= raw json_escape(linkable_posts.to_json) %></script>
+  </section>
+
+  <div class="form-actions">
+    <%= form.submit(post.persisted? ? t("product_tours.dashboard.save", default: "Save changes") : t("product_tours.dashboard.create", default: "Create tutorial"), class: "button primary") %>
+    <%= link_to t("product_tours.dashboard.cancel", default: "Cancel"), post.persisted? ? post_path(post) : posts_path, class: "button" %>
+  </div>
+  </div>
+<% end %>

data/app/views/product_tours/posts/_post_panel.html.erb

@@ -0,0 +1,111 @@
+<section class="post-panel">
+  <div class="detail-scroll">
+    <article class="card pad preview-card">
+      <h2><%= post.title %></h2>
+      <% video = post.resolved_video %>
+      <% if video %>
+        <div class="video-preview">
+          <% if video[:kind] == "iframe" %>
+            <iframe src="<%= video[:url] %>" title="<%= post.title %>" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
+          <% else %>
+            <video src="<%= post.uploaded_video? ? media_path(post) : video[:url] %>" controls playsinline preload="metadata"
+                   <% if video[:thumbnail_url].present? %>poster="<%= video[:thumbnail_url] %>"<% end %>
+                   data-video-first-frame></video>
+          <% end %>
+        </div>
+      <% end %>
+      <% if ProductTours::Post.description_supported? && post.description.present? %>
+        <div class="description-preview"><%= post.description %></div>
+      <% end %>
+      <div class="preview-action">
+        <% default_label = post.action_post_key.present? ? t("product_tours.next", default: "Next") : t("product_tours.done", default: "Done") %>
+        <% if post.action_post_key.present? %><span class="preview-back"><%= t("product_tours.back", default: "Back") %></span><% end %>
+        <span class="button primary"><%= post.action_label.presence || default_label %></span>
+      </div>
+    </article>
+
+    <article class="card pad details-card">
+      <dl>
+        <% target_post = post.action_post %>
+        <dt><%= t("product_tours.dashboard.key", default: "Key") %></dt>
+        <dd><code class="key"><%= post.key %></code></dd>
+        <dt><%= t("product_tours.dashboard.language", default: "Language") %></dt>
+        <dd><span class="badge locale"><%= post.locale %></span></dd>
+        <dt><%= t("product_tours.dashboard.publication_status", default: "Publication status") %></dt>
+        <dd><span class="badge status-<%= post.status %>"><%= post.status.humanize %></span></dd>
+        <dt><%= t("product_tours.dashboard.video_url", default: "Video URL") %></dt><dd><%= post.video_url.presence || "—" %></dd>
+        <dt><%= t("product_tours.dashboard.action_label", default: "Action label") %></dt><dd><%= post.action_label.presence || default_label %></dd>
+        <dt><%= t("product_tours.dashboard.action_url", default: "Action URL") %></dt><dd><%= post.action_url.presence || "—" %></dd>
+        <dt><%= t("product_tours.dashboard.next_post", default: "Next tutorial") %></dt>
+        <dd>
+          <% if target_post %>
+            <%= link_to target_post.title, post_path(target_post) %> <code class="key"><%= post.action_post_key %></code>
+          <% else %>
+            —
+          <% end %>
+        </dd>
+      </dl>
+      <% if post.video_url.present? %>
+        <%= button_to t("product_tours.dashboard.refresh_metadata", default: "Refresh video data"),
+                      refresh_video_metadata_post_path(post), class: "button small refresh-button" %>
+      <% end %>
+      <% if post.video_metadata.present? %><pre class="metadata"><%= JSON.pretty_generate(post.video_metadata) %></pre><% end %>
+
+      <div class="actions details-actions">
+        <% if post.draft? %>
+          <%= button_to t("product_tours.dashboard.publish", default: "Publish"), publish_post_path(post), method: :patch,
+                        class: "button primary" %>
+          <%= link_to t("product_tours.dashboard.edit", default: "Edit"), edit_post_path(post), class: "button" %>
+        <% else %>
+          <%= link_to t("product_tours.dashboard.edit", default: "Edit"), edit_post_path(post), class: "button primary" %>
+          <%= button_to t("product_tours.dashboard.unpublish", default: "Move to drafts"), unpublish_post_path(post),
+                        method: :patch, class: "button" %>
+        <% end %>
+        <%= button_to t("product_tours.dashboard.delete", default: "Delete"), post_path(post), method: :delete,
+                      class: "danger", form: { data: { confirm: t("product_tours.dashboard.delete_confirm", default: "Delete this tutorial?") } } %>
+      </div>
+    </article>
+
+    <article class="card pad translations-card">
+      <h2><%= t("product_tours.dashboard.languages", default: "Languages") %></h2>
+      <div class="translation-list">
+        <% @translations.each do |translation| %>
+          <div class="translation-row">
+            <span class="translation-name">
+              <span class="badge locale"><%= product_tours_locale_name(translation.locale) %></span>
+              <% if translation.locale == I18n.default_locale.to_s %>
+                <span class="muted"><%= t("product_tours.dashboard.default_language", default: "Default") %></span>
+              <% end %>
+              <span class="badge status-<%= translation.status %>"><%= translation.status.humanize %></span>
+            </span>
+            <% if translation.id == post.id %>
+              <span class="muted"><%= t("product_tours.dashboard.current_language", default: "Current") %></span>
+            <% else %>
+              <% translation_path = if sidebar_context
+                                      posts_path(status: @status, q: @query, page: @page,
+                                                 post_id: translation.id)
+                                    else
+                                      post_path(translation)
+                                    end %>
+              <%= link_to t("product_tours.dashboard.open", default: "Open"), translation_path %>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+
+      <% if @missing_translation_locales.any? %>
+        <%= form_with url: add_translation_post_path(post), method: :post, class: "translation-form" do |form| %>
+          <div class="field">
+            <%= form.label :locale, t("product_tours.dashboard.add_language", default: "Add another language") %>
+            <%= form.select :locale,
+                            options_for_select(@missing_translation_locales.map { |locale| [product_tours_locale_name(locale), locale] }) %>
+          </div>
+          <%= form.submit t("product_tours.dashboard.add_translation", default: "Add translation"), class: "button" %>
+        <% end %>
+      <% else %>
+        <p class="muted translation-complete"><%= t("product_tours.dashboard.all_languages_added", default: "All available languages have been added.") %></p>
+      <% end %>
+    </article>
+
+  </div>
+</section>

data/app/views/product_tours/posts/edit.html.erb

@@ -0,0 +1,5 @@
+<% content_for :body_class, "pt-form-page" %>
+
+<div class="breadcrumb"><%= link_to t("product_tours.dashboard.title", default: "Product tours"), posts_path %> / <%= link_to @post.title, post_path(@post) %> / <%= t("product_tours.dashboard.edit", default: "Edit") %></div>
+<h1><%= t("product_tours.dashboard.edit_post", default: "Edit tutorial") %></h1>
+<%= render "form", post: @post %>

data/app/views/product_tours/posts/index.html.erb

@@ -0,0 +1,92 @@
+<% content_for :body_class, "pt-index" %>
+
+<div class="page-head">
+  <h1><%= t("product_tours.dashboard.title", default: "Product tours") %></h1>
+  <%= link_to t("product_tours.dashboard.new_post", default: "New product tour"), new_post_path, class: "button primary" %>
+</div>
+
+<div class="dashboard-shell <%= "has-selected" if @selected_post %>">
+  <aside class="dashboard-sidebar" aria-label="<%= t("product_tours.dashboard.posts", default: "Tutorials") %>">
+    <nav class="tabs">
+      <% ProductTours::Post::DASHBOARD_STATUSES.each do |status| %>
+        <%= link_to posts_path(status: status, q: @query),
+                    class: ("active" if status == @status) do %>
+          <%= status.humanize %>
+          <span class="count"><%= @counts.fetch(status, 0) %></span>
+        <% end %>
+      <% end %>
+    </nav>
+
+    <%= form_with url: posts_path, method: :get, class: "filters" do |form| %>
+      <%= form.hidden_field :status, value: @status %>
+      <%= form.search_field :q, value: @query,
+                            list: "product-tour-key-options",
+                            placeholder: t("product_tours.dashboard.search_key", default: "Search key"),
+                            aria: { label: t("product_tours.dashboard.search", default: "Search") } %>
+      <datalist id="product-tour-key-options">
+        <% @keys.each do |key| %>
+          <%= tag.option value: key %>
+        <% end %>
+      </datalist>
+      <%= form.submit t("product_tours.dashboard.search", default: "Search") %>
+      <% if @query.present? %>
+        <%= link_to t("product_tours.dashboard.clear_filters", default: "Clear"), posts_path,
+                    class: "button filters-clear" %>
+      <% end %>
+    <% end %>
+
+    <div class="record-list">
+      <% if @posts.any? %>
+        <% @posts.each do |post| %>
+          <% provider = post.resolved_video&.dig(:provider) %>
+          <%= link_to posts_path(status: @status, q: @query, page: @page, post_id: post.id),
+                      class: ["record-row", ("active" if @selected_post&.id == post.id)].compact do %>
+            <span class="record-main">
+              <span class="record-topline">
+                <span class="badge status-<%= post.status %>"><%= post.status.humanize %></span>
+              </span>
+              <span class="record-copy"><%= post.title %></span>
+              <span class="muted record-meta">
+                <code class="key"><%= post.key %></code>
+                <% if provider %><span><%= provider.humanize %></span><% end %>
+              </span>
+            </span>
+            <span class="record-side" aria-hidden="true"><%= provider ? "▶" : "→" %></span>
+          <% end %>
+        <% end %>
+      <% else %>
+        <div class="empty"><%= t("product_tours.dashboard.empty", default: "Nothing here yet.") %></div>
+      <% end %>
+    </div>
+
+    <nav class="pager">
+      <span>
+        <% if @page > 1 %>
+          <%= link_to t("product_tours.dashboard.newer", default: "← Newer"),
+                      posts_path(status: @status, q: @query, page: @page - 1) %>
+        <% end %>
+      </span>
+      <span>
+        <% if @more %>
+          <%= link_to t("product_tours.dashboard.older", default: "Older →"),
+                      posts_path(status: @status, q: @query, page: @page + 1) %>
+        <% end %>
+      </span>
+    </nav>
+  </aside>
+
+  <main class="dashboard-detail" aria-label="<%= t("product_tours.dashboard.current_post", default: "Current tutorial") %>">
+    <% if @selected_post %>
+      <p class="mobile-back">
+        <%= link_to t("product_tours.dashboard.back", default: "All tutorials"),
+                    posts_path(status: @status, q: @query, page: @page) %>
+      </p>
+      <%= render "post_panel", post: @selected_post, sidebar_context: true %>
+    <% else %>
+      <div class="empty-state">
+        <h2><%= t("product_tours.dashboard.select_post", default: "Select a tutorial") %></h2>
+        <p class="muted"><%= t("product_tours.dashboard.select_post_hint", default: "Open a tutorial to preview or edit it.") %></p>
+      </div>
+    <% end %>
+  </main>
+</div>

data/app/views/product_tours/posts/new.html.erb

@@ -0,0 +1,5 @@
+<% content_for :body_class, "pt-form-page" %>
+
+<div class="breadcrumb"><%= link_to t("product_tours.dashboard.title", default: "Product tours"), posts_path %> / <%= t("product_tours.dashboard.new_post", default: "New product tour") %></div>
+<h1><%= t("product_tours.dashboard.new_post", default: "New product tour") %></h1>
+<%= render "form", post: @post %>

data/app/views/product_tours/posts/show.html.erb

@@ -0,0 +1,5 @@
+<% content_for :body_class, "pt-show" %>
+
+<p class="breadcrumb"><%= link_to t("product_tours.dashboard.title", default: "Product tours"), posts_path %> / <%= @post.title %></p>
+
+<%= render "post_panel", post: @post, sidebar_context: false %>

data/config/locales/product_tours.ar.yml

@@ -0,0 +1,11 @@
+ar:
+  product_tours:
+    close: "إغلاق"
+    back: "رجوع"
+    next: "التالي"
+    done: "تم"
+    dialog: "دليل المنتج"
+    video: "فيديو تعليمي"
+    unavailable: "هذا الدليل غير متاح."
+    dashboard:
+      title: "جولات المنتج"