DEV: Prettify negative numbers in reviewable score explanation (#23642)

This is an aesthetic change. Currently, if one of the scores involved in the reviewable score explanation is negative, we display it as: + -value. This changes that.

I also made an attempt at converting the component into GJS format. This is done as a separate commit.

app/assets/javascripts/discourse/app/components/modal/explain-reviewable.hbs

@@ -14,26 +14,19 @@
           {{#each this.reviewableExplanation.scores as |s|}}
             <tr>
               <td>
-                <ScoreValue @value="1.0" @tagName="" />
+                <ScoreValue @value="1.0" />
-                <ScoreValue
+                <ScoreValue @value={{s.type_bonus}} @label="type_bonus" />
-                  @value={{s.type_bonus}}
-                  @label="type_bonus"
-                  @tagName=""
-                />
                 <ScoreValue
                   @value={{s.take_action_bonus}}
                   @label="take_action_bonus"
-                  @tagName=""
                 />
                 <ScoreValue
                   @value={{s.trust_level_bonus}}
                   @label="trust_level_bonus"
-                  @tagName=""
                 />
                 <ScoreValue
                   @value={{s.user_accuracy_bonus}}
                   @label="user_accuracy_bonus"
-                  @tagName=""
                 />
               </td>
               <td class="sum">{{float s.score}}</td>

app/assets/javascripts/discourse/app/components/score-value.gjs

@@ -0,0 +1,34 @@
+import Component from "@glimmer/component";
+import I18n from "I18n";
+
+export default class ScoreValue extends Component {
+  <template>
+    {{#if @value}}
+      <span class="op">{{if this.isNegative "-" "+"}}</span>
+      <span class="score-value">
+        <span class="score-number">{{this.numericValue}}</span>
+        {{#if @label}}
+          <span title={{this.explanationTitle}} class="score-value-type">
+            {{this.explanationContent}}
+          </span>
+        {{/if}}
+      </span>
+    {{/if}}
+  </template>
+
+  get numericValue() {
+    return parseFloat(Math.abs(this.args.value)).toFixed(1);
+  }
+
+  get isNegative() {
+    return this.args.value < 0;
+  }
+
+  get explanationTitle() {
+    return I18n.t(`review.explain.${this.args.label}.title`);
+  }
+
+  get explanationContent() {
+    return I18n.t(`review.explain.${this.args.label}.name`);
+  }
+}

app/assets/javascripts/discourse/app/components/score-value.hbs

@@ -1,14 +0,0 @@
-{{#if this.value}}
-  <span class="score-value">
-    <span class="score-number">{{float this.value}}</span>
-    {{#if this.label}}
-      <span
-        title={{i18n (concat "review.explain." this.label ".title")}}
-        class="score-value-type"
-      >
-        {{i18n (concat "review.explain." this.label ".name")}}
-      </span>
-    {{/if}}
-  </span>
-  <span class="op">+</span>
-{{/if}}

app/assets/javascripts/discourse/app/components/score-value.js

@@ -1,3 +0,0 @@
-import Component from "@ember/component";
-
-export default Component.extend({});

app/assets/stylesheets/common/base/explain-reviewable.scss

@@ -31,7 +31,7 @@
     color: var(--primary-medium);
   }
 
-  .op:last-of-type {
+  .op:first-of-type {
     display: none;
   }
 }