Add `QuestionComponent`

app/components/question_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+class QuestionComponent < ApplicationComponent
+  include ApplicationHelper
+  include BootstrapHelper
+  include UserHelper
+
+  def initialize(question:, context_user: nil, collapse: true, hide_avatar: false, profile_question: false)
+    @question = question
+    @context_user = context_user
+    @collapse = true
+    @hide_avatar = hide_avatar
+    @profile_question = profile_question
+  end
+
+  private
+
+  def author_identifier = @question.author_is_anonymous ? @question.author_identifier : nil
+
+  def follower_question? = !@question.author_is_anonymous && !@question.direct && @question.answer_count > 0
+
+  def hide_avatar? = @hide_avatar || @question.author_is_anonymous
+
+end

app/components/question_component/question_component.en.yml

@@ -0,0 +1,8 @@
+en:
+  answers:
+    zero: "0 answers"
+    one: "1 answer"
+    other: "%{count} answers"
+  asked_html: "%{user} asked %{time} ago"
+  visible_to_you: "Only visible to you as it was asked directly"
+  visible_mod_mode: "You can see this because you are in moderation view"

app/components/question_component/question_component.html.haml

@@ -0,0 +1,30 @@
+.d-flex
+  - unless hide_avatar?
+    .flex-shrink-0
+      %a{ href: user_path(@question.user) }
+        = render AvatarComponent.new(user: @question.user, size: "md", classes: ["question__avatar"])
+  .flex-grow-1
+    %h6.text-muted.question__user
+      - if @question.author_is_anonymous
+        %i.fas.fa-user-secret{ title: t(".anon_hint") }
+      - if @profile_question && @question.direct
+        - if user_signed_in? && @question.user == current_user
+          %i.fa.fa-eye-slash{ data: { bs_toggle: "tooltip", bs_title: t(".visible_to_you") } }
+        - elsif moderation_view?
+          %i.fa.fa-eye-slash{ data: { bs_toggle: "tooltip", bs_title: t(".visible_mod_mode") } }
+      = t(".asked_html", user: user_screen_name(@question.user, context_user: @context_user, author_identifier: author_identifier), time: time_tooltip(@question))
+      - if follower_question?
+        ·
+        %a{ href: question_path(@question.user.screen_name, @question.id), data: { selection_hotkey: "a" } }
+          = t(".answers", count: @question.answer_count)
+    .question__body{ data: { controller: @question.long? ? "collapse" : nil } }
+      .question__text{ class: @question.long? && @collapse ? "collapsed" : "", data: { collapse_target: "content" } }
+        = question_markdown @question.content
+      - if @question.long? && @collapse
+        = render "shared/collapse", type: "question"
+  - if user_signed_in?
+    .flex-shrink-0.ms-auto
+      .btn-group
+        %button.btn.btn-link.btn-sm.dropdown-toggle{ data: { bs_toggle: :dropdown }, aria: { expanded: false } }
+          %span.caret
+        = render "actions/question", question: @question