FEATURE: Show 'marked solved by' in OP when topic is solved (#343)

Depends on: https://github.com/discourse/discourse-solved/pull/342

This feature adds the "Marked solved as" information to the solved post appended to OP.

Originally, I had moved the widget usage to a [component](https://github.com/discourse/discourse-solved/blob/39baa0be4a889fdbff108e887a677d9a298d27d4/assets/javascripts/discourse/components/solved-post.gjs), but due to "cooking quotes", after some internal discussion (t/95318/25) we will stick to widgets for now as the post-stream gets modernized.

assets/javascripts/discourse/components/solved-accept-answer-button.gjs

@@ -19,7 +19,7 @@ export default class SolvedAcceptAnswerButton extends Component {
 
   @action
   acceptAnswer() {
-    acceptAnswer(this.args.post, this.appEvents);
+    acceptAnswer(this.args.post, this.appEvents, this.currentUser);
   }
 
   <template>
@@ -34,9 +34,9 @@ export default class SolvedAcceptAnswerButton extends Component {
   </template>
 }
 
-export function acceptAnswer(post, appEvents) {
+export function acceptAnswer(post, appEvents, acceptingUser) {
   // TODO (glimmer-post-menu): Remove this exported function and move the code into the button action after the widget code is removed
-  acceptPost(post);
+  acceptPost(post, acceptingUser);
 
   appEvents.trigger("discourse-solved:solution-toggled", post);
 
@@ -46,7 +46,7 @@ export function acceptAnswer(post, appEvents) {
   });
 }
 
-function acceptPost(post) {
+function acceptPost(post, acceptingUser) {
   const topic = post.topic;
 
   clearAccepted(topic);
@@ -62,6 +62,8 @@ function acceptPost(post) {
     name: post.name,
     post_number: post.post_number,
     excerpt: post.cooked,
+    accepter_username: acceptingUser.username,
+    accepter_name: acceptingUser.name,
   });
 
   ajax("/solution/accept", {

assets/javascripts/discourse/initializers/extend-for-solved-button.js

@@ -36,30 +36,24 @@ function initializeWithApi(api) {
         const topic = postModel.topic;
         if (topic.accepted_answer) {
           const hasExcerpt = !!topic.accepted_answer.excerpt;
-
-          const withExcerpt = `
-            <aside class='quote accepted-answer' data-post="${
-              topic.get("accepted_answer").post_number
-            }" data-topic="${topic.id}">
-              <div class='title'>
-                ${topic.acceptedAnswerHtml} <div class="quote-controls"><\/div>
+          const excerpt = hasExcerpt
+            ? ` <blockquote> ${topic.accepted_answer.excerpt} </blockquote> `
+            : "";
+          const solvedQuote = `
+            <aside class='quote accepted-answer' data-post="${topic.get("accepted_answer").post_number}" data-topic="${topic.id}">
+              <div class='title ${hasExcerpt ? "" : "title-only"}'>
+                <div class="accepted-answer--solver">
+                  ${topic.solvedByHtml}
+                <\/div>
+                <div class="accepted-answer--accepter">
+                  ${topic.accepterHtml}
+                <\/div>
+                <div class="quote-controls"><\/div>
               </div>
-              <blockquote>
-                ${topic.accepted_answer.excerpt}
-              </blockquote>
+              ${excerpt}
             </aside>`;
 
-          const withoutExcerpt = `
-            <aside class='quote accepted-answer'>
-              <div class='title title-only'>
-                ${topic.acceptedAnswerHtml}
-              </div>
-            </aside>`;
-
-          const cooked = new PostCooked(
-            { cooked: hasExcerpt ? withExcerpt : withoutExcerpt },
-            dec
-          );
+          const cooked = new PostCooked({ cooked: solvedQuote }, dec);
           return dec.rawHtml(cooked.init());
         }
       }
@@ -67,7 +61,7 @@ function initializeWithApi(api) {
   });
 
   api.attachWidgetAction("post", "acceptAnswer", function () {
-    acceptAnswer(this.model, this.appEvents);
+    acceptAnswer(this.model, this.appEvents, this.currentUser);
   });
 
   api.attachWidgetAction("post", "unacceptAnswer", function () {
@@ -173,7 +167,7 @@ export default {
   initialize() {
     Topic.reopen({
       // keeping this here cause there is complex localization
-      acceptedAnswerHtml: computed("accepted_answer", "id", function () {
+      solvedByHtml: computed("accepted_answer", "id", function () {
         const username = this.get("accepted_answer.username");
         const name = this.get("accepted_answer.name");
         const postNumber = this.get("accepted_answer.post_number");
@@ -196,6 +190,18 @@ export default {
           user_path: User.create({ username }).path,
         });
       }),
+      accepterHtml: computed("accepted_answer", function () {
+        const username = this.get("accepted_answer.accepter_username");
+        const name = this.get("accepted_answer.accepter_name");
+        const formattedUsername =
+          this.siteSettings.display_name_on_posts && name
+            ? name
+            : formatUsername(username);
+        return i18n("solved.marked_solved_by", {
+          username: formattedUsername,
+          username_lower: username.toLowerCase(),
+        });
+      }),
     });
 
     withPluginApi("2.0.0", (api) => {