Add note to follower asking modal if on a user profile

app/javascript/retrospring/controllers/questionbox_focus_controller.ts

@@ -0,0 +1,12 @@
+import { Controller } from '@hotwired/stimulus';
+import { Modal } from 'bootstrap';
+
+export default class extends Controller {
+  click(): void {
+    const modal = Modal.getInstance(this.element.closest('.modal'));
+    const questionbox = document.querySelector((this.element as HTMLAnchorElement).href);
+
+    modal.hide();
+    questionbox.scrollIntoView();
+  }
+}

app/javascript/retrospring/initializers/stimulus.ts

@@ -15,6 +15,7 @@ import PwaBadgeController from "retrospring/controllers/pwa_badge_controller";
 import NavigationController from "retrospring/controllers/navigation_controller";
 import ShareController from "retrospring/controllers/share_controller";
 import ClipboardController from "retrospring/controllers/clipboard_controller";
+import QuestionboxFocusController from "retrospring/controllers/questionbox_focus_controller";
 
 /**
  * This module sets up Stimulus and our controllers
@@ -41,4 +42,5 @@ export default function (): void {
   window['Stimulus'].register('toast', ToastController);
   window['Stimulus'].register('share', ShareController);
   window['Stimulus'].register('clipboard', ClipboardController);
+  window['Stimulus'].register('questionbox-focus', QuestionboxFocusController);
 }

app/views/application/_questionbox.html.haml

@@ -1,4 +1,4 @@
-.card
+.card#question-card
   .card-header
     - if user.profile.motivation_header.blank?
       = t(".title")

app/views/modal/_ask.html.haml

@@ -6,6 +6,8 @@
         %button.btn-close{ data: { bs_dismiss: :modal }, type: :button }
           %span.visually-hidden= t("voc.close")
       .modal-body
+        - if @user
+          .alert.alert-info.d-sm-none= t(".user_note_html", user: @user.profile.safe_name)
         .form-group.has-feedback
           %textarea.form-control{ name: "qb-all-question", placeholder: t(".placeholder"), data: { "character-count-warning-target": "input" } }
           .alert.alert-warning.mt-3.d-none{ data: { "character-count-warning-target": "warning" } }= t('.long_question_warning')

config/locales/views.en.yml

@@ -262,6 +262,11 @@ en:
       confirm: "I understand the risk, proceed!"
   modal:
     ask:
+      user_note_html: |
+        <strong>Do you want to ask %{user} a question?</strong>
+        This dialog asks a question to all your followers.
+        <a href="#question-card" data-controller="questionbox-focus" data-action="click">Click here</a>
+        to ask them a question directly!
       title: "Ask your followers"
       placeholder: "Type your question here…"
       action: "Ask"