use InterpolatedTranslation

assets/javascripts/discourse/components/solved-accepted-answer.gjs

@@ -5,12 +5,13 @@ import { action } from "@ember/object";
 import { service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
 import AsyncContent from "discourse/components/async-content";
+import InterpolatedTranslation from "discourse/components/interpolated-translation";
 import PostCookedHtml from "discourse/components/post/cooked-html";
+import UserLink from "discourse/components/user-link";
 import concatClass from "discourse/helpers/concat-class";
 import icon from "discourse/helpers/d-icon";
 import { ajax } from "discourse/lib/ajax";
 import escape from "discourse/lib/escape";
-import { iconHTML } from "discourse/lib/icon-library";
 import { formatUsername } from "discourse/lib/utilities";
 import { i18n } from "discourse-i18n";
 
@@ -40,10 +41,6 @@ export default class SolvedAcceptedAnswer extends Component {
     const username = this.acceptedAnswer.accepter_username;
     const name = this.acceptedAnswer.accepter_name;
 
-    if (!this.siteSettings.show_who_marked_solved) {
-      return;
-    }
-
     const formattedUsername =
       this.siteSettings.display_name_on_posts && name
         ? escape(name)
@@ -57,30 +54,45 @@ export default class SolvedAcceptedAnswer extends Component {
     );
   }
 
-  get htmlSolvedBy() {
+  get showMarkedBy() {
+    return this.siteSettings.show_who_marked_solved;
+  }
+
+  get showSolvedBy() {
+    return !(!this.acceptedAnswer.username || !this.acceptedAnswer.post_number);
+  }
+
+  get postNumber() {
+    return i18n("solved.accepted_answer_post_number", {
+      post_number: this.acceptedAnswer.post_number,
+    });
+  }
+
+  get solverUsername() {
+    return this.acceptedAnswer.username;
+  }
+
+  get accepterUsername() {
+    return this.acceptedAnswer.accepter_username;
+  }
+
+  get solverDisplayName() {
     const username = this.acceptedAnswer.username;
     const name = this.acceptedAnswer.name;
+
+    return this.siteSettings.display_name_on_posts && name ? name : username;
+  }
+
+  get accepterDisplayName() {
+    const username = this.acceptedAnswer.accepter_username;
+    const name = this.acceptedAnswer.accepter_name;
+
+    return this.siteSettings.display_name_on_posts && name ? name : username;
+  }
+
+  get postPath() {
     const postNumber = this.acceptedAnswer.post_number;
-
+    return `${this.topic.url}/${postNumber}`;
-    if (!username || !postNumber) {
-      return;
-    }
-
-    const displayedUser =
-      this.siteSettings.display_name_on_posts && name
-        ? escape(name)
-        : formatUsername(username);
-
-    const data = {
-      icon: iconHTML("square-check", { class: "accepted" }),
-      username_lower: username.toLowerCase(),
-      username: displayedUser,
-      post_path: `${this.topic.url}/${postNumber}`,
-      post_number: postNumber,
-      user_path: this.store.createRecord("user", { username }).path,
-    };
-
-    return htmlSafe(i18n("solved.accepted_html", data));
   }
 
   @action
@@ -119,10 +131,38 @@ export default class SolvedAcceptedAnswer extends Component {
       >
         <div class="accepted-answer--solver-accepter">
           <div class="accepted-answer--solver">
-            {{this.htmlSolvedBy}}
+            {{#if this.showSolvedBy}}
+              {{icon "square-check" class="accepted"}}
+              <InterpolatedTranslation
+                @key="solved.accepted_answer_solver_info"
+                as |Placeholder|
+              >
+                <Placeholder @name="user">
+                  <UserLink
+                    @username={{this.solverUsername}}
+                  >{{this.solverDisplayName}}</UserLink>
+                </Placeholder>
+                <Placeholder @name="post">
+                  <a href={{this.postPath}}>{{this.postNumber}}</a>
+                </Placeholder>
+              </InterpolatedTranslation>
+              <br />
+            {{/if}}
+
           </div>
           <div class="accepted-answer--accepter">
-            {{this.htmlAccepter}}
+            {{#if this.showMarkedBy}}
+              <InterpolatedTranslation
+                @key="solved.marked_solved_by"
+                as |Placeholder|
+              >
+                <Placeholder @name="user">
+                  <UserLink
+                    @username={{this.accepterUsername}}
+                  >{{this.accepterDisplayName}}</UserLink>
+                </Placeholder>
+              </InterpolatedTranslation>
+            {{/if}}
           </div>
         </div>
         {{#if this.hasExcerpt}}

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

@@ -1,13 +1,12 @@
 import Component from "@glimmer/component";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
-import { htmlSafe } from "@ember/template";
 import DButton from "discourse/components/d-button";
+import InterpolatedTranslation from "discourse/components/interpolated-translation";
+import UserLink from "discourse/components/user-link";
 import icon from "discourse/helpers/d-icon";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import escape from "discourse/lib/escape";
-import { formatUsername } from "discourse/lib/utilities";
 import { i18n } from "discourse-i18n";
 import DTooltip from "float-kit/components/d-tooltip";
 
@@ -49,29 +48,27 @@ export default class SolvedUnacceptAnswerButton extends Component {
     });
   }
 
-  get solvedBy() {
+  get showAcceptedBy() {
-    if (!this.siteSettings.show_who_marked_solved) {
+    return !(
-      return;
+      !this.siteSettings.show_who_marked_solved ||
-    }
+      !this.args.post.topic.accepted_answer.accepter_username
+    );
+  }
 
+  get acceptedByUsername() {
+    return this.args.post.topic.accepted_answer.accepter_username;
+  }
+
+  get acceptedByDisplayName() {
     const username = this.args.post.topic.accepted_answer.accepter_username;
     const name = this.args.post.topic.accepted_answer.accepter_name;
-    const displayedName =
+    return this.siteSettings.display_name_on_posts && name ? name : username;
-      this.siteSettings.display_name_on_posts && name
-        ? escape(name)
-        : formatUsername(username);
-    if (this.args.post.topic.accepted_answer.accepter_username) {
-      return i18n("solved.marked_solved_by", {
-        username: displayedName,
-        username_lower: username,
-      });
-    }
   }
 
   <template>
     <span class="extra-buttons">
       {{#if @post.can_unaccept_answer}}
-        {{#if this.solvedBy}}
+        {{#if this.showAcceptedBy}}
           <DTooltip @identifier="post-action-menu__solved-accepted-tooltip">
             <:trigger>
               <DButton
@@ -84,7 +81,16 @@ export default class SolvedUnacceptAnswerButton extends Component {
               />
             </:trigger>
             <:content>
-              {{htmlSafe this.solvedBy}}
+              <InterpolatedTranslation
+                @key="solved.marked_solved_by"
+                as |Placeholder|
+              >
+                <Placeholder @name="user">
+                  <UserLink @username={{this.acceptedByUsername}}>
+                    {{this.acceptedByDisplayName}}
+                  </UserLink>
+                </Placeholder>
+              </InterpolatedTranslation>
             </:content>
           </DTooltip>
         {{else}}

config/locales/client.en.yml

@@ -24,7 +24,8 @@ en:
       solution_summary:
         one: "solution"
         other: "solutions"
-      accepted_html: "%{icon} Solved <span class='by'>by <a href data-user-card='%{username_lower}'>%{username}</a></span> in <a href='%{post_path}' class='back'>post #%{post_number}</a>"
+      accepted_answer_solver_info: "Solved by %{user} in %{post}"
+      accepted_answer_post_number: "post %{post_number}"
       accepted_notification: "<p><span>%{username}</span> %{description}</p>"
       topic_status_filter:
         all: "all"
@@ -33,7 +34,7 @@ en:
       no_solved_topics_title: "You haven’t solved any topics yet"
       no_solved_topics_title_others: "%{username} has not solved any topics yet"
       no_solved_topics_body: "When you provide a helpful reply to a topic, your reply might be selected as the solution by the topic owner or staff."
-      marked_solved_by: "Marked as solved by <a href data-user-card='%{username_lower}'>%{username}</a></span>"
+      marked_solved_by: "Marked as solved by %{user}"
 
       no_answer:
         title: Has your question been answered?