UX: Add "ago" to the bottom of the timeline when relative

app/assets/javascripts/discourse/lib/formatter.js.es6

@@ -125,19 +125,22 @@ export function autoUpdatingRelativeAge(date,options) {
   return "<span class='relative-date" + append + "' data-time='" + date.getTime() + "' data-format='" + format +  "'>" + relAge  + "</span>";
 }
 
+function wrapAgo(dateStr) {
+  return I18n.t("dates.wrap_ago", { date: dateStr });
+}
 
-function relativeAgeTiny(date){
+function relativeAgeTiny(date, ageOpts) {
   const format = "tiny";
   const distance = Math.round((new Date() - date) / 1000);
   const distanceInMinutes = Math.round(distance / 60.0);
 
   let formatted;
   const t = function(key, opts) {
-    return I18n.t("dates." + format + "." + key, opts);
+    const result = I18n.t("dates." + format + "." + key, opts);
+    return (ageOpts && ageOpts.addAgo) ? wrapAgo(result) : result;
   };
 
   switch(true) {
-
     case(distanceInMinutes < 1):
       formatted = t("less_than_x_minutes", {count: 1});
       break;

app/assets/javascripts/discourse/widgets/topic-timeline.js.es6

@@ -236,7 +236,7 @@ export default createWidget('topic-timeline', {
         this.attach('link', {
           className: 'now-date',
           icon: 'dot-circle-o',
-          rawLabel: relativeAge(new Date(topic.last_posted_at)),
+          rawLabel: relativeAge(new Date(topic.last_posted_at), { addAgo: true }),
           action: 'jumpBottom'
         })
       ]);

config/locales/client.en.yml

@@ -49,6 +49,9 @@ en:
       long_date_with_year_without_time: "MMM D, 'YY"
       long_date_without_year_with_linebreak: "MMM D <br/>LT"
       long_date_with_year_with_linebreak: "MMM D, 'YY <br/>LT"
+
+      wrap_ago: "%{date} ago"
+
       tiny:
         half_a_minute: "< 1m"
         less_than_x_seconds: