rails_den 2.0.0

data/app/views/rails_den/posts/history.html.erb

@@ -0,0 +1,123 @@
+<div class="rails-den-community">
+  <div class="rails-den-breadcrumbs">
+    <%= link_to "Community", root_path %>
+
+    <span class="rails-den-breadcrumb-separator">
+      /
+    </span>
+
+    <span>
+      <%= @topic.board.category.title %>
+    </span>
+
+    <span class="rails-den-breadcrumb-separator">
+      /
+    </span>
+
+    <%= link_to @topic.board.title,
+                board_path(@topic.board) %>
+
+    <span class="rails-den-breadcrumb-separator">
+      /
+    </span>
+
+    <%= link_to @topic.title,
+                topic_path(
+                  @topic,
+                  page: @page,
+                  anchor: "post-#{@post.id}"
+                ) %>
+
+    <span class="rails-den-breadcrumb-separator">
+      /
+    </span>
+
+    <span>
+      Revision History
+    </span>
+  </div>
+
+  <header class="rails-den-board-page-header">
+    <div>
+      <p class="rails-den-board-page-category">
+        <%= RailsDen.user_display_name(@post.author) %>
+      </p>
+
+      <h1 class="rails-den-board-page-title">
+        Post revision history
+      </h1>
+
+      <p class="rails-den-board-page-description">
+        Current version and previously saved versions of this post.
+      </p>
+    </div>
+  </header>
+
+  <section class="rails-den-topics">
+    <header class="rails-den-topics-header">
+      <h2 class="rails-den-topics-title">
+        Current version
+      </h2>
+    </header>
+
+    <div class="rails-den-board-list">
+      <article class="rails-den-board">
+        <div class="rails-den-board-content">
+          <p class="rails-den-board-description">
+            Current
+          </p>
+
+          <div class="rails-den-post-body">
+            <%= RailsDen.format(@post.body) %>
+          </div>
+        </div>
+      </article>
+    </div>
+  </section>
+
+  <section class="rails-den-topics">
+    <header class="rails-den-topics-header">
+      <h2 class="rails-den-topics-title">
+        Previous versions
+      </h2>
+    </header>
+
+    <% if @revisions.any? %>
+      <div class="rails-den-board-list">
+        <% @revisions.each do |revision| %>
+          <article class="rails-den-board">
+            <div class="rails-den-board-content">
+              <p class="rails-den-board-description">
+                Edited
+                <%= time_ago_in_words(revision.created_at) %>
+                ago by
+                <%= RailsDen.user_display_name(
+                  revision.editor
+                ) %>
+              </p>
+
+              <% if revision.edit_reason.present? %>
+                <p class="rails-den-board-description">
+                  <strong>Reason:</strong>
+                  <%= revision.edit_reason %>
+                </p>
+              <% end %>
+
+              <div class="rails-den-post-body">
+                <%= RailsDen.format(revision.body) %>
+              </div>
+            </div>
+          </article>
+        <% end %>
+      </div>
+    <% else %>
+      <div class="rails-den-topics-empty">
+        <h3>No revisions yet</h3>
+
+        <p>
+          This post has not been edited.
+        </p>
+      </div>
+    <% end %>
+  </section>
+</div>

data/app/views/rails_den/presence/_directory_body.html.erb

@@ -0,0 +1,155 @@
+<% unless directory.visible? %>
+  <section class="rails-den-presence-directory-message">
+    <h2>Presence is not available</h2>
+
+    <p>
+      Member presence is not visible to you.
+    </p>
+  </section>
+
+<% else %>
+  <% unless directory.available? %>
+    <section class="rails-den-presence-directory-message">
+      <h2>Presence is temporarily unavailable</h2>
+
+      <p>
+        The community is still available, but live presence could not be loaded.
+      </p>
+    </section>
+
+  <% else %>
+    <section class="rails-den-presence-directory-section">
+      <div class="rails-den-presence-directory-section-header">
+        <h2>Here now</h2>
+
+        <span>
+          <%= pluralize(
+                directory.live_entries.size,
+                "member"
+              ) %>
+        </span>
+      </div>
+
+      <% if directory.live_entries.any? %>
+        <div class="rails-den-presence-directory-list">
+          <% directory.live_entries.each do |entry| %>
+            <article class="rails-den-presence-directory-member is-presence-<%= entry.status %>">
+              <%= link_to rails_den_member_path_for(entry.identity),
+                          class: "rails-den-presence-directory-avatar-link" do %>
+                <%= render "rails_den/member_profiles/avatar",
+                           presenter: entry.presenter,
+                           size: :small %>
+              <% end %>
+
+              <div class="rails-den-presence-directory-member-main">
+                <div class="rails-den-presence-directory-identity">
+                  <%= link_to entry.presenter.display_name,
+                              rails_den_member_path_for(entry.identity),
+                              class: "rails-den-presence-directory-name" %>
+
+                  <% if entry.presenter.mention_name.present? %>
+                    <span class="rails-den-presence-directory-mention">
+                      @<%= entry.presenter.mention_name %>
+                    </span>
+                  <% end %>
+                </div>
+
+                <div class="rails-den-presence-directory-details">
+                  <span class="rails-den-presence-directory-status">
+                    <span class="rails-den-presence-directory-dot"
+                          aria-hidden="true"></span>
+
+                    <%= entry.status.to_s.capitalize %>
+                  </span>
+
+                  <% if entry.board %>
+                    <span aria-hidden="true">·</span>
+
+                    <span>
+                      Viewing
+                      <%= link_to entry.board.title,
+                                  board_path(entry.board) %>
+                    </span>
+                  <% end %>
+                </div>
+              </div>
+            </article>
+          <% end %>
+        </div>
+      <% else %>
+        <div class="rails-den-presence-directory-empty">
+          Nobody is showing as online right now.
+        </div>
+      <% end %>
+    </section>
+
+    <section class="rails-den-presence-directory-section">
+      <div class="rails-den-presence-directory-section-header">
+        <h2>Recently active</h2>
+
+        <span>
+          Last
+          <%= distance_of_time_in_words(
+                RailsDen::Presence.recently_active_window
+              ) %>
+        </span>
+      </div>
+
+      <% if directory.recent_entries.any? %>
+        <div class="rails-den-presence-directory-list">
+          <% directory.recent_entries.each do |entry| %>
+            <article class="rails-den-presence-directory-member is-presence-offline">
+              <%= link_to rails_den_member_path_for(entry.identity),
+                          class: "rails-den-presence-directory-avatar-link" do %>
+                <%= render "rails_den/member_profiles/avatar",
+                           presenter: entry.presenter,
+                           size: :small %>
+              <% end %>
+
+              <div class="rails-den-presence-directory-member-main">
+                <div class="rails-den-presence-directory-identity">
+                  <%= link_to entry.presenter.display_name,
+                              rails_den_member_path_for(entry.identity),
+                              class: "rails-den-presence-directory-name" %>
+
+                  <% if entry.presenter.mention_name.present? %>
+                    <span class="rails-den-presence-directory-mention">
+                      @<%= entry.presenter.mention_name %>
+                    </span>
+                  <% end %>
+                </div>
+
+                <div class="rails-den-presence-directory-details">
+                  <span class="rails-den-presence-directory-status">
+                    <span class="rails-den-presence-directory-dot"
+                          aria-hidden="true"></span>
+
+                    Offline
+                  </span>
+
+                  <% if entry.last_seen_at %>
+                    <span aria-hidden="true">·</span>
+
+                    <span>
+                      Last seen
+                      <%= time_tag entry.last_seen_at,
+                                   "#{time_ago_in_words(entry.last_seen_at)} ago",
+                                   title: l(
+                                     entry.last_seen_at,
+                                     format: :long
+                                   ) %>
+                    </span>
+                  <% end %>
+                </div>
+              </div>
+            </article>
+          <% end %>
+        </div>
+      <% else %>
+        <div class="rails-den-presence-directory-empty">
+          No recently active members to show.
+        </div>
+      <% end %>
+    </section>
+  <% end %>
+<% end %>

data/app/views/rails_den/presence/_summary.html.erb

@@ -0,0 +1,26 @@
+<% if directory.visible? &&
+      directory.available? %>
+  <div class="rails-den-presence-directory-summary">
+    <span class="is-presence-online">
+      <span class="rails-den-presence-directory-dot"
+            aria-hidden="true"></span>
+
+      <strong>
+        <%= directory.online_count %>
+      </strong>
+
+      online
+    </span>
+
+    <span class="is-presence-away">
+      <span class="rails-den-presence-directory-dot"
+            aria-hidden="true"></span>
+
+      <strong>
+        <%= directory.away_count %>
+      </strong>
+
+      away
+    </span>
+  </div>
+<% end %>

data/app/views/rails_den/presence/index.html.erb

@@ -0,0 +1,29 @@
+<% content_for :head do %>
+  <%= stylesheet_link_tag "rails_den/presence_directory",
+                          "data-turbo-track": "reload" %>
+<% end %>
+
+<div class="rails-den-community rails-den-presence-directory"
+     data-rails-den-presence-snapshot-url="<%= presence_snapshot_path %>">
+  <header class="rails-den-community-header">
+    <div>
+      <h1 class="rails-den-community-title">
+        Who’s Online
+      </h1>
+
+      <p class="rails-den-community-tagline">
+        See who’s around the community right now and who was recently active.
+      </p>
+    </div>
+
+    <div data-rails-den-presence-directory-summary-region>
+      <%= render "rails_den/presence/summary",
+                 directory: @presence_directory %>
+    </div>
+  </header>
+
+  <div data-rails-den-presence-directory-body-region>
+    <%= render "rails_den/presence/directory_body",
+               directory: @presence_directory %>
+  </div>
+</div>

data/app/views/rails_den/private_conversations/_composer.html.erb

@@ -0,0 +1,28 @@
+<%= form_with url: reply ? private_conversation_replies_path(@conversation) : private_messages_path,
+              scope: :private_message,
+              class: "rails-den-private-composer",
+              data: { rails_den_private_composer: true, preview_url: preview_path, candidates_url: mention_candidates_path } do |form| %>
+  <% if errors.any? %><div class="rails-den-private-errors" role="alert"><%= errors.to_sentence %></div><% end %>
+  <% unless reply %>
+    <div class="rails-den-private-field rails-den-private-recipient">
+      <%= form.label :to, "To" %>
+      <%= form.text_field :to, value: recipient_mention_name, required: true, autocomplete: "off", aria: { autocomplete: "list", controls: "private-message-candidates" } %>
+      <div id="private-message-candidates" class="rails-den-private-candidates" role="listbox" hidden></div>
+    </div>
+    <div class="rails-den-private-field">
+      <%= form.label :subject, "Subject" %>
+      <%= form.text_field :subject, value: subject, required: true, maxlength: 200 %>
+      <small>Maximum 200 characters.</small>
+    </div>
+  <% end %>
+  <div class="rails-den-private-field">
+    <%= form.label :body, reply ? "Reply" : "Message" %>
+    <%= form.text_area :body, value: body, required: true, maxlength: 50_000, rows: 10, data: { rails_den_private_body: true } %>
+    <small>Markdown, code, spoilers, and emoji formatting are supported.</small>
+  </div>
+  <div class="rails-den-private-composer-actions">
+    <%= form.submit reply ? "Send Reply" : "Send Message", class: "rails-den-navbar-button" %>
+    <button type="button" class="rails-den-private-preview-button" data-rails-den-private-preview-button>Preview</button>
+  </div>
+  <section class="rails-den-private-preview" data-rails-den-private-preview aria-live="polite" hidden></section>
+<% end %>

data/app/views/rails_den/private_conversations/_conversation_row.html.erb

@@ -0,0 +1,19 @@
+<article class="rails-den-private-conversation <%= "is-unread" if entry.unread? && mailbox == :inbox %>">
+  <div class="rails-den-private-conversation-main">
+    <div class="rails-den-private-counterpart">
+      <strong><%= RailsDen.user_display_name(entry.counterpart) %></strong>
+      <span>@<%= RailsDen.user_mention_name(entry.counterpart) %></span>
+      <% if entry.unread? && mailbox == :inbox %>
+        <span class="rails-den-private-unread"><%= entry.unread_count %> unread</span>
+      <% end %>
+    </div>
+    <h2><%= link_to entry.conversation.subject, private_conversation_path(entry.conversation) %></h2>
+    <p class="rails-den-private-excerpt"><%= truncate(strip_tags(RailsDen.format(entry.latest_message.body)).squish, length: 140) %></p>
+    <p class="rails-den-private-meta"><%= RailsDen.user_display_name(entry.latest_message.sender) %> · <%= time_ago_in_words(entry.latest_message.created_at) %> ago</p>
+  </div>
+  <%= button_to mailbox == :inbox ? "Delete from Inbox" : "Delete from Sent",
+                mailbox == :inbox ? private_conversation_inbox_path(entry.conversation) : private_conversation_sent_path(entry.conversation),
+                method: :delete,
+                class: "rails-den-private-delete",
+                form: { data: { turbo_confirm: "This removes the thread only from this mailbox. The other member's copy is not erased." } } %>
+</article>

data/app/views/rails_den/private_conversations/_mailbox_nav.html.erb

@@ -0,0 +1,7 @@
+<nav class="rails-den-private-mailbox-nav" aria-label="Private messages">
+  <div>
+    <%= link_to "Inbox", private_messages_path, class: ["rails-den-private-tab", ("is-active" if mailbox == :inbox)].compact %>
+    <%= link_to "Sent", sent_private_messages_path, class: ["rails-den-private-tab", ("is-active" if mailbox == :sent)].compact %>
+  </div>
+  <%= link_to "New Message", new_private_message_path, class: "rails-den-navbar-button" %>
+</nav>

data/app/views/rails_den/private_conversations/_message.html.erb

@@ -0,0 +1,4 @@
+<article id="private-message-<%= message.id %>" class="rails-den-private-message <%= "is-own" if message.sender == current_rails_den_user %>">
+  <header><strong><%= RailsDen.user_display_name(message.sender) %></strong><span>@<%= RailsDen.user_mention_name(message.sender) %></span><time datetime="<%= message.created_at.iso8601 %>"><%= l(message.created_at, format: :long) %></time></header>
+  <div class="rails-den-private-message-body"><%= RailsDen.format(message.body) %></div>
+</article>

data/app/views/rails_den/private_conversations/_pagination.html.erb

@@ -0,0 +1,6 @@
+<nav class="rails-den-pagination" aria-label="Private message pages">
+  <% path = mailbox == :inbox ? method(:private_messages_path) : method(:sent_private_messages_path) %>
+  <%= link_to "Previous", path.call(page: @page - 1), class: "rails-den-navbar-button" if @page > 1 %>
+  <span class="rails-den-pagination-status">Page <%= @page %> of <%= @total_pages %></span>
+  <%= link_to "Next", path.call(page: @page + 1), class: "rails-den-navbar-button" if @page < @total_pages %>
+</nav>

data/app/views/rails_den/private_conversations/index.html.erb

@@ -0,0 +1,11 @@
+<div class="rails-den-community rails-den-private-messages">
+  <div class="rails-den-breadcrumbs"><%= link_to "Community", root_path %><span>/</span><span>Private Messages</span></div>
+  <header class="rails-den-private-header"><h1>Inbox</h1><p>Private correspondence sent to you.</p></header>
+  <%= render "mailbox_nav", mailbox: :inbox %>
+  <% if @entries.any? %>
+    <div class="rails-den-private-list"><%= render partial: "conversation_row", collection: @entries, as: :entry, locals: { mailbox: :inbox } %></div>
+  <% else %>
+    <section class="rails-den-private-empty"><h2>No private messages yet.</h2><%= link_to "New Message", new_private_message_path, class: "rails-den-navbar-button" %></section>
+  <% end %>
+  <%= render "pagination", mailbox: :inbox if @total_pages > 1 %>
+</div>

data/app/views/rails_den/private_conversations/new.html.erb

@@ -0,0 +1,5 @@
+<div class="rails-den-community rails-den-private-messages">
+  <div class="rails-den-breadcrumbs"><%= link_to "Community", root_path %><span>/</span><%= link_to "Private Messages", private_messages_path %><span>/</span><span>New</span></div>
+  <header class="rails-den-private-header"><h1>New Message</h1><p>Start private correspondence with one member.</p></header>
+  <%= render "composer", recipient_mention_name: @recipient_mention_name, subject: @subject, body: @body, errors: @errors, reply: false %>
+</div>

data/app/views/rails_den/private_conversations/sent.html.erb

@@ -0,0 +1,11 @@
+<div class="rails-den-community rails-den-private-messages">
+  <div class="rails-den-breadcrumbs"><%= link_to "Community", root_path %><span>/</span><span>Private Messages</span><span>/</span><span>Sent</span></div>
+  <header class="rails-den-private-header"><h1>Sent</h1><p>Conversations you've written in.</p></header>
+  <%= render "mailbox_nav", mailbox: :sent %>
+  <% if @entries.any? %>
+    <div class="rails-den-private-list"><%= render partial: "conversation_row", collection: @entries, as: :entry, locals: { mailbox: :sent } %></div>
+  <% else %>
+    <section class="rails-den-private-empty"><h2>You haven't sent any private messages yet.</h2><%= link_to "New Message", new_private_message_path, class: "rails-den-navbar-button" %></section>
+  <% end %>
+  <%= render "pagination", mailbox: :sent if @total_pages > 1 %>
+</div>

data/app/views/rails_den/private_conversations/show.html.erb

@@ -0,0 +1,23 @@
+<div class="rails-den-community rails-den-private-messages">
+  <div class="rails-den-breadcrumbs"><%= link_to "Community", root_path %><span>/</span><%= link_to "Private Messages", private_messages_path %><span>/</span><span><%= @conversation.subject %></span></div>
+  <header class="rails-den-private-thread-header">
+    <div><h1><%= @conversation.subject %></h1><p>Correspondence with <%= link_to RailsDen.user_display_name(@counterpart), rails_den_member_path_for(@counterpart) %> <span>@<%= RailsDen.user_mention_name(@counterpart) %></span></p></div>
+    <div class="rails-den-private-thread-actions">
+      <%= button_to "Delete from Inbox", private_conversation_inbox_path(@conversation), method: :delete, class: "rails-den-private-delete", form: { data: { turbo_confirm: "This removes the thread only from your Inbox." } } %>
+      <%= button_to "Delete from Sent", private_conversation_sent_path(@conversation), method: :delete, class: "rails-den-private-delete", form: { data: { turbo_confirm: "This removes the thread only from your Sent mailbox." } } %>
+    </div>
+  </header>
+  <% if @total_pages > 1 %>
+    <nav class="rails-den-pagination" aria-label="Conversation pages">
+      <%= link_to "Older", private_conversation_path(@conversation, page: @page - 1), class: "rails-den-navbar-button" if @page > 1 %>
+      <span class="rails-den-pagination-status">Page <%= @page %> of <%= @total_pages %></span>
+      <%= link_to "Newer", private_conversation_path(@conversation, page: @page + 1), class: "rails-den-navbar-button" if @page < @total_pages %>
+    </nav>
+  <% end %>
+  <div class="rails-den-private-history"><%= render partial: "rails_den/private_conversations/message", collection: @messages %></div>
+  <% if @can_send %>
+    <section class="rails-den-private-reply"><h2>Reply</h2><p>Subject: <strong><%= @conversation.subject %></strong></p><%= render "composer", recipient_mention_name: nil, subject: nil, body: @reply_body, errors: @errors, reply: true %></section>
+  <% else %>
+    <section class="rails-den-private-unavailable"><h2>Replies are currently unavailable</h2><p>You can continue to read this correspondence, but your current permissions or account state do not allow sending.</p></section>
+  <% end %>
+</div>

data/app/views/rails_den/reactions/_picker_options.html.erb

@@ -0,0 +1,14 @@
+<% if reaction_types.any? %>
+  <% reaction_types.each do |reaction_type| %>
+    <%= button_to topic_post_reactions_path(post.topic, post),
+                  method: :post,
+                  params: { reaction_type_id: reaction_type.id },
+                  class: "rails-den-reaction-option",
+                  form: { data: { rails_den_reaction_form: true } } do %>
+      <span aria-hidden="true"><%= reaction_type.emoji %></span>
+      <span><%= reaction_type.name %></span>
+    <% end %>
+  <% end %>
+<% else %>
+  <p class="rails-den-reaction-no-results">No matching reactions found.</p>
+<% end %>

data/app/views/rails_den/reactions/_post_reactions.html.erb

@@ -0,0 +1,87 @@
+<%
+  can_react = rails_den_can_react_to_post?(post)
+  available_types = picker_reaction_types.reject do |type|
+    summaries.any? { |summary| summary.reaction_type.id == type.id && summary.viewer_reaction_id }
+  end
+  show_bar = summaries.any? || (can_react && enabled_reactions_exist)
+%>
+
+<% if show_bar %>
+  <div class="rails-den-reactions"
+       data-rails-den-reactions
+       data-post-id="<%= post.id %>">
+    <div class="rails-den-reaction-row">
+      <% summaries.each do |summary| %>
+        <div class="rails-den-reaction-chip <%= "is-selected" if summary.viewer_reaction_id %>">
+          <% if summary.viewer_reaction_id && can_react %>
+            <%= button_to topic_post_reaction_path(post.topic, post, summary.viewer_reaction_id),
+                          method: :delete,
+                          class: "rails-den-reaction-toggle",
+                          form: { data: { rails_den_reaction_form: true } },
+                          aria: {
+                            pressed: true,
+                            label: "Remove #{summary.reaction_type.name} reaction"
+                          } do %>
+              <span aria-hidden="true"><%= summary.reaction_type.emoji %></span>
+              <span class="rails-den-reaction-selected-mark" aria-hidden="true">✓</span>
+            <% end %>
+          <% else %>
+            <span class="rails-den-reaction-emoji"
+                  title="<%= summary.reaction_type.name %>"
+                  aria-label="<%= summary.reaction_type.name %>">
+              <%= summary.reaction_type.emoji %>
+            </span>
+          <% end %>
+
+          <%= link_to summary.count,
+                      topic_post_reactions_path(
+                        post.topic,
+                        post,
+                        reaction_type_id: summary.reaction_type.id
+                      ),
+                      class: "rails-den-reaction-count",
+                      data: { rails_den_reactor_list: true },
+                      aria: {
+                        label: "View #{summary.count} member#{"s" unless summary.count == 1} who reacted #{summary.reaction_type.name}"
+                      } %>
+        </div>
+      <% end %>
+
+      <% if can_react && enabled_reactions_exist %>
+        <details class="rails-den-reaction-picker">
+          <summary class="rails-den-add-reaction">Add reaction</summary>
+          <div class="rails-den-reaction-picker-menu" aria-label="Choose a reaction">
+            <%= form_with url: picker_topic_post_reactions_path(post.topic, post),
+                          method: :get,
+                          class: "rails-den-reaction-search",
+                          data: { rails_den_reaction_search: true } do |form| %>
+              <%= form.label :q, "Search reactions", class: "rails-den-visually-hidden" %>
+              <%= form.search_field :q,
+                                    placeholder: "Search emoji",
+                                    autocomplete: "off",
+                                    data: { rails_den_reaction_query: true } %>
+              <%= form.submit "Search", class: "rails-den-reaction-search-submit" %>
+            <% end %>
+            <div class="rails-den-reaction-options" data-rails-den-reaction-options role="group" aria-label="Available reactions">
+              <%= render "rails_den/reactions/picker_options",
+                         post: post,
+                         reaction_types: available_types %>
+            </div>
+            <%= link_to "Browse all reactions",
+                        picker_topic_post_reactions_path(post.topic, post),
+                        class: "rails-den-reaction-browse-all" %>
+          </div>
+        </details>
+      <% end %>
+    </div>
+
+    <p class="rails-den-reaction-error" data-rails-den-reaction-error hidden></p>
+    <dialog class="rails-den-reactor-dialog" data-rails-den-reactor-dialog aria-labelledby="reactor-dialog-title-<%= post.id %>">
+      <div class="rails-den-reactor-dialog-header">
+        <h2 id="reactor-dialog-title-<%= post.id %>">Who reacted</h2>
+        <button type="button" class="rails-den-reactor-dialog-close" data-rails-den-dialog-close aria-label="Close">×</button>
+      </div>
+      <div data-rails-den-reactor-dialog-content></div>
+    </dialog>
+  </div>
+<% end %>

data/app/views/rails_den/reactions/_reactor_list.html.erb

@@ -0,0 +1,16 @@
+<% if reactions.any? %>
+  <ul class="rails-den-reactor-list">
+    <% reactions.each do |reaction| %>
+      <li>
+        <% member_path = rails_den_member_path_for(reaction.reactor) %>
+        <% if member_path %>
+          <%= link_to RailsDen.user_display_name(reaction.reactor), member_path %>
+        <% else %>
+          <%= RailsDen.user_display_name(reaction.reactor) %>
+        <% end %>
+      </li>
+    <% end %>
+  </ul>
+<% else %>
+  <p class="rails-den-reactor-list-empty">Nobody has this reaction yet.</p>
+<% end %>

data/app/views/rails_den/reactions/index.html.erb

@@ -0,0 +1,34 @@
+<div class="rails-den-community rails-den-reaction-index">
+  <div class="rails-den-breadcrumbs">
+    <%= link_to "Community", root_path %>
+    <span class="rails-den-breadcrumb-separator">/</span>
+    <%= link_to @topic.title,
+                topic_path(@topic, page: @topic.posts_page_for(@post), anchor: "post-#{@post.id}") %>
+    <span class="rails-den-breadcrumb-separator">/</span>
+    <span>Reactions</span>
+  </div>
+
+  <section class="rails-den-reactor-page-card">
+    <header>
+      <span class="rails-den-reactor-page-emoji" aria-hidden="true"><%= @reaction_type.emoji %></span>
+      <div>
+        <p class="rails-den-reactor-page-context">Reactions to a post in <%= @topic.title %></p>
+        <h1><%= @reaction_type.name %></h1>
+      </div>
+    </header>
+
+    <%= render "rails_den/reactions/reactor_list", reactions: @reactions %>
+
+    <% if @total_pages > 1 %>
+      <nav class="rails-den-pagination" aria-label="Reaction pages">
+        <% if @page > 1 %>
+          <%= link_to "Previous", topic_post_reactions_path(@topic, @post, reaction_type_id: @reaction_type.id, page: @page - 1), class: "rails-den-navbar-button" %>
+        <% end %>
+        <span class="rails-den-pagination-status">Page <%= @page %> of <%= @total_pages %></span>
+        <% if @page < @total_pages %>
+          <%= link_to "Next", topic_post_reactions_path(@topic, @post, reaction_type_id: @reaction_type.id, page: @page + 1), class: "rails-den-navbar-button" %>
+        <% end %>
+      </nav>
+    <% end %>
+  </section>
+</div>

data/app/views/rails_den/reactions/picker.html.erb

@@ -0,0 +1,14 @@
+<div class="rails-den-community rails-den-reaction-index">
+  <div class="rails-den-breadcrumbs">
+    <%= link_to "Community", root_path %><span class="rails-den-breadcrumb-separator">/</span>
+    <%= link_to @topic.title, topic_path(@topic, page: @topic.posts_page_for(@post), anchor: "post-#{@post.id}") %><span class="rails-den-breadcrumb-separator">/</span><span>Add reaction</span>
+  </div>
+  <section class="rails-den-reactor-page-card">
+    <header><div><p class="rails-den-reactor-page-context">React to a post in <%= @topic.title %></p><h1>Add reaction</h1></div></header>
+    <%= form_with url: picker_topic_post_reactions_path(@topic, @post), method: :get, class: "rails-den-reaction-picker-page-search" do |form| %>
+      <%= form.label :q, "Search reactions" %>
+      <div><%= form.search_field :q, value: params[:q], placeholder: "Search by emoji name or keyword", autofocus: true %><%= form.submit "Search", class: "rails-den-navbar-button" %></div>
+    <% end %>
+    <div class="rails-den-reaction-picker-page-results"><%= render "rails_den/reactions/picker_options", post: @post, reaction_types: @picker_reaction_types %></div>
+  </section>
+</div>