feat: jump to best answer in discussion sidebar (#95)

* feat: jump to best answer in discussion sidebar

* feat: make jump button optional

extend.php

@@ -89,11 +89,13 @@
         ->default('fof-best-answer.store_log_output', false)
         ->default('fof-best-answer.enabled-tags', '[]')
         ->default('fof-best-answer.search.solution_search', true)
+        ->default('fof-best-answer.discussion_sidebar_jump_button', false)
         ->serializeToForum('canSelectBestAnswerOwnPost', 'fof-best-answer.allow_select_own_post', 'boolVal')
         ->serializeToForum('useAlternativeBestAnswerUi', 'fof-best-answer.use_alternative_ui', 'boolVal')
         ->serializeToForum('showBestAnswerFilterUi', 'fof-best-answer.show_filter_dropdown', 'boolVal')
         ->serializeToForum('fof-best-answer.show_max_lines', 'fof-best-answer.show_max_lines', 'intVal')
-        ->serializeToForum('solutionSearchEnabled', 'fof-best-answer.search.solution_search', 'boolVal'),
+        ->serializeToForum('solutionSearchEnabled', 'fof-best-answer.search.solution_search', 'boolVal')
+        ->serializeToForum('bestAnswerDiscussionSidebarJumpButton', 'fof-best-answer.discussion_sidebar_jump_button', 'boolVal'),
 
     (new Extend\ApiController(ShowDiscussionController::class))
         ->addInclude(['bestAnswerPost', 'bestAnswerUser'])

js/src/admin/components/BestAnswerSettingsPage.tsx

@@ -69,6 +69,12 @@ export default class BestAnswerSettingsPage extends ExtensionPage {
                   },
                 },
               })}
+              {this.buildSettingComponent({
+                setting: 'fof-best-answer.discussion_sidebar_jump_button',
+                type: 'boolean',
+                label: app.translator.trans('fof-best-answer.admin.settings.discussion_sidebar_jump_button'),
+                help: app.translator.trans('fof-best-answer.admin.settings.discussion_sidebar_jump_button_help'),
+              })}
             </div>
             <h3>{app.translator.trans('fof-best-answer.admin.settings.label.search')}</h3>
             <div className="Section">

js/src/common/extend.ts

@@ -1,4 +1,5 @@
 import Extend from 'flarum/common/extenders';
+// @ts-ignore
 import Tag from 'flarum/tags/models/Tag';
 
 export default [

js/src/forum/addBestAnswerView.js

@@ -9,6 +9,8 @@ import Link from 'flarum/common/components/Link';
 import classList from 'flarum/common/utils/classList';
 
 import SelectBestAnswerItem from './components/SelectBestAnswerItem';
+import DiscussionPage from 'flarum/forum/components/DiscussionPage';
+import Button from 'flarum/common/components/Button';
 
 export default () => {
   extend(CommentPost.prototype, 'headerItems', function (items) {
@@ -71,4 +73,21 @@ export default () => {
       elementAttrs.className ? (elementAttrs.className += ' Post--bestAnswer') : (elementAttrs.className = 'Post--bestAnswer');
     }
   });
+
+  extend(DiscussionPage.prototype, 'sidebarItems', function (items) {
+    if (!app.forum.attribute('bestAnswerDiscussionSidebarJumpButton')) return;
+
+    const discussion = this.discussion;
+    const post = discussion.hasBestAnswer() && discussion.bestAnswerPost();
+
+    if (post && !post.isHidden() && post.number() !== 1 && !discussion.bestAnswerPost().isHidden()) {
+      items.add(
+        'jumpToBestAnswer',
+        <Button className="Button Button-jumpBestAnswer" icon="fas fa-check" onclick={() => app.current.get('stream').goToNumber(post.number())}>
+          {app.translator.trans('fof-best-answer.forum.discussion.jump_to_best_answer_button')}
+        </Button>,
+        90
+      );
+    }
+  });
 };

resources/less/forum.less

@@ -5,6 +5,15 @@
   background-color: @best-answer-badge-color;
 }
 
+.Button-jumpBestAnswer {
+  background-color: @best-answer-badge-color;
+  color: @text-on-dark;
+  &:hover {
+    background-color: @best-answer-post-background;
+    color: @text-on-light;
+  }
+}
+
 .Post-header {
   & > ul > li.item-isBestAnswer {
     margin-top: 3px;

resources/locale/en.yml

@@ -37,6 +37,8 @@ fof-best-answer:
         When a tag is Best Answer enabled, assign permissions to each user group that may set answers (own discussion, any discussion). Permissions may be assigned globally (for any Best Answer anabled tag), or on a per tag basis.
       solution_search: Solution search
       solution_search_help: Enable the ability to search for discussions with Best Answers
+      discussion_sidebar_jump_button: Display jump to Best Answer button in discussion sidebar
+      discussion_sidebar_jump_button_help: Adds a button to the discussion sidebar which jumps to the Best Answer in the stream of posts.
     edit_tag:
       qna_label: Enable Best Answers to be set in this tag
       reminders: Send reminders to set a Best Answer for discussions in this tag
@@ -76,6 +78,8 @@ fof-best-answer:
     search:
       discussions_solutions_heading: "Discussions with solutions"
       all_discussions_solutions_button: "Search all discussions with solutions for \"{query}\""
+    discussion:
+      jump_to_best_answer_button: View Best Answer
   email:
     subject:
       awarded: Your post was set as the best answer by {display_name}