views/notifications i18n (#15056)

* views/notifications etc i18n

* notifications PR fixes

* remove ja.yml

* Update en.yml

* Update fr.yml

* Update en.yml

* Update fr.yml

* Update _comment.html.erb

* Update _comment.html.erb

* Update notifications_helper.rb

* Update notifications_helper.rb

* Update notifications_helper.rb

* Update notifications_helper.rb

Co-authored-by: Michael Kohl <citizen428@forem.com>

app/helpers/notifications_helper.rb

@@ -12,4 +12,17 @@ module NotificationsHelper
   def reaction_image(category)
     REACTION_IMAGES[category]
   end
+
+  def message_user_acted_maybe_org(data, action, if_org: "")
+    key_to_link = ->(key) { link_to(data[key]["name"], data[key]["path"], class: "crayons-link fw-bold") }
+    if if_org.present?
+      I18n.t(
+        action,
+        user: key_to_link.call("user"),
+        if_org: data["organization"] ? I18n.t(if_org, org: key_to_link.call("organization")) : "",
+      )
+    else
+      I18n.t(action, user: key_to_link.call("user"))
+    end.html_safe
+  end
 end

app/services/notifications/new_comment/send.rb

@@ -43,8 +43,8 @@ module Notifications
         PushNotifications::Send.call(
           user_ids: targets,
           title: "💬 New Comment",
-          body: "#{comment.user.username} commented on " \
-                "#{comment.commentable.title.strip}:\n" \
+          body: "#{I18n.t('views.notifications.comment.commented_html', user: comment.user.username,
+                                                                        title: comment.commentable.title.strip)}:\n" \
                 "#{strip_tags(comment.processed_html).strip}",
           payload: {
             url: URL.url(comment.path),

app/views/notifications/_article.html.erb

@@ -10,15 +10,9 @@
     <div class="notification__content">
       <header class="mb-4">
         <h2 class="fs-base fw-normal">
-          <a href="<%= json_data["user"]["path"] %>" class="crayons-link fw-bold">
-            <%= json_data["user"]["name"] %>
-          </a>
-          made a new post
-          <% if json_data["organization"] %>
-            under <a href="<%= json_data["organization"]["path"] %>" class="crayons-link fw-bold"><%= json_data["organization"]["name"] %></a>
-          <% end %>
+          <%= message_user_acted_maybe_org(json_data, "views.notifications.new_post.verb_html", if_org: "views.notifications.new_post.if_org_html") %>
         </h2>
-        <p class="lh-tight"><small class="fs-s color-base-60"><%= time_ago_in_words json_data["article"]["published_at"] %> ago</small></p>
+        <p class="lh-tight"><small class="fs-s color-base-60"><%= time_ago_in_words json_data["article"]["published_at"], scope: :"datetime.distance_in_words_ago" %></small></p>
       </header>
 
       <%= render "notifications/shared/article_preview", json_data: json_data, notification: notification, context: "default" %>

app/views/notifications/_badgeachievement.html.erb

@@ -2,7 +2,7 @@
 <div class="crayons-card notification notification--promoted grid gap-4">
     <header class="mb-2 m:mb-4">
       <h3 class="fw-normal fs-l s:fs-xl m:fs-2xl">
-      You received the <strong class="fw-bold"><%= sanitize(json_data["badge_achievement"]["badge"]["title"]) %></strong> badge
+      <%= t("views.notifications.badge.heading_html", badge: tag.strong(sanitize(json_data["badge_achievement"]["badge"]["title"]), class: "fw-bold")) %>
       </h3>
       <p class="fs-l"><%= json_data["badge_achievement"]["badge"]["description"] %></p>
     </header>
@@ -12,10 +12,13 @@
       <p class="color-base-70"><em><%= json_data["badge_achievement"]["rewarding_context_message"].to_s.html_safe %></em></p>
     </div>
 
-  <p class="self-stretch"><a href="<%= json_data["user"]["path"] %>" class="crayons-btn w-100 m:w-50">Visit your profile</a></p>
+  <p class="self-stretch"><a href="<%= json_data["user"]["path"] %>" class="crayons-btn w-100 m:w-50"><%= t("views.notifications.badge.profile") %></a></p>
   <% credits_awarded = json_data["badge_achievement"]["badge"]["credits_awarded"] %>
   <% unless credits_awarded.present? && credits_awarded.zero? %>
-    <p class="max-w-75 mx-auto">You also get <a href="/credits" class="crayons-link crayons-link--brand fw-bold"><%= json_data["badge_achievement"]["badge"]["credits_awarded"] %> new credits</a> to use for <a href="/listings">community listings</a> if you have anything you'd like to promote. 🎉</p>
-    <p class="fs-s"><a href="<%= about_listings_url %>" class="crayons-link crayons-link--secondary">More information about listings<a></p>
+    <p class="max-w-75 mx-auto">
+      <%= t("views.notifications.badge.awarded_html", credits: link_to(t("views.notifications.badge.credits", count: json_data["badge_achievement"]["badge"]["credits_awarded"]), "/credits", class: "crayons-link crayons-link--brand fw-bold"),
+                                                      listings: link_to(t("views.notifications.badge.listings"), "/listings")) %>
+    </p>
+    <p class="fs-s"><a href="<%= about_listings_url %>" class="crayons-link crayons-link--secondary"><%= t("views.notifications.badge.more") %><a></p>
   <% end %>
 </div>

app/views/notifications/_broadcast.html.erb

@@ -9,7 +9,7 @@
       <%= json_data["broadcast"]["processed_html"].html_safe %>
 
       <% if notification.json_data['broadcast']['type_of'] == "Welcome" %>
-        <p class="fs-base pt-6 color-base-70">Visit <a href="<%= user_settings_path(tab: :notifications) %>">Settings</a> to manage your notifications.</p>
+        <p class="fs-base pt-6 color-base-70"><%= t("views.notifications.broadcast.visit_html", settings: link_to(t("views.notifications.broadcast.settings"), user_settings_path(tab: :notifications))) %></p>
       <% end %>
     </div>
   <% end %>

app/views/notifications/_comment.html.erb

@@ -8,23 +8,18 @@
     <% end %>
 
     <div class="notification__content">
+      <% params = { user: link_to(json_data["user"]["name"], json_data["user"]["path"], class: "crayons-link fw-bold"), title: link_to(h(json_data["comment"]["commentable"]["title"]), json_data["comment"]["commentable"]["path"], class: "crayons-link fw-bold") } %>
       <% if notification.action.blank? %>
         <% if json_data["comment"]["created_at"] %>
           <header class="mb-4">
             <h2 class="fs-base fw-normal">
-              <a href="<%= json_data["user"]["path"] %>" class="crayons-link fw-bold">
-                <%= json_data["user"]["name"] %>
-              </a>
               <% if json_data["comment"]["depth"] && json_data["comment"]["depth"] > 0 %>
-                replied to a thread in
+                <%= t("views.notifications.comment.replied_html", **params) %>
               <% else %>
-                commented on
+                <%= t("views.notifications.comment.commented_html", **params) %>
               <% end %>
-              <a href="<%= json_data["comment"]["commentable"]["path"] %>" class="crayons-link fw-bold">
-                <%= h(json_data["comment"]["commentable"]["title"]) %>
-              </a>
             </h2>
-            <p class="lh-tight"><a href="<%= json_data["comment"]["path"] %>" class="crayons-link fs-s crayons-link--secondary"><%= time_ago_in_words json_data["comment"]["created_at"] %> ago</a></p>
+            <p class="lh-tight"><a href="<%= json_data["comment"]["path"] %>" class="crayons-link fs-s crayons-link--secondary"><%= time_ago_in_words json_data["comment"]["created_at"], scope: :"datetime.distance_in_words_ago" %></a></p>
           </header>
         <% end %>
 
@@ -33,31 +28,23 @@
       <% elsif notification.action == "Moderation" %>
         <header class="mb-4">
           <h2 class="fs-base fw-normal">
-            <a href="/<%= json_data["comment"]["path"].split("/")[1] %>" class="crayons-link fw-bold"><%= json_data["comment"]["path"].split("/")[1] %></a>
-            just left a comment on
-            <a href="<%= json_data["comment"]["commentable"]["path"] %>" class="crayons-link fw-bold">
-              <%= h(json_data["comment"]["commentable"]["title"]) %>
-            </a>.
+            <%= t("views.notifications.comment.left_html", user: link_to(json_data["comment"]["path"].split("/")[1], "/#{json_data['comment']['path'].split('/')[1]}", class: "crayons-link fw-bold"), title: params[:title]) %>
           </h2>
-          <p>Since they are new to the community, could you leave a nice reply to help them feel welcome? <strong>Thank you!</strong></p>
+          <p><%= t("views.notifications.comment.welcome_html") %></p>
         </header>
 
         <%= render "notifications/shared/comment_box", json_data: json_data, notification: notification, context: "moderation" %>
 
-        <p class="fs-s color-base-60 pt-4">All negative reactions are 100% private. If this comment violates the code of conduct, please downvote/report as inappropriate.</p>
+        <p class="fs-s color-base-60 pt-4"><%= t("views.notifications.comment.report") %></p>
 
       <% elsif notification.action == "First" %>
         <header class="mb-4">
           <h2 class="fs-base fw-normal">
-            <a href="<%= json_data["user"]["path"] %>" class="crayons-link fw-bold"><%= json_data["user"]["name"] %></a>
-            wrote their first comment on
-            <a href="<%= json_data["comment"]["commentable"]["path"] %>" class="crayons-link fw-bold">
-              <%= h(json_data["comment"]["commentable"]["title"]) %>
-            </a>
+            <%= t("views.notifications.comment.first_html", **params) %>
           </h2>
-          <p class="lh-tight"><small class="fs-s color-base-60"><%= time_ago_in_words notification.created_at %> ago</small></p>
+          <p class="lh-tight"><small class="fs-s color-base-60"><%= time_ago_in_words notification.created_at, scope: :"datetime.distance_in_words_ago" %></small></p>
 
-          <p>Give them their first reply! 🎉</p>
+          <p><%= t("views.notifications.comment.first_reply") %></p>
         </header>
 
         <%= render "notifications/shared/comment_box", activity: activity, context: "moderation" %>

app/views/notifications/_follow.html.erb

@@ -1,5 +1,6 @@
-<div class="crayons-card notification <% if notification.json_data["aggregated_siblings"].length == 1 %> notification--middle <% else %> flex-col items-center <% end %>">
-  <% if notification.json_data["aggregated_siblings"].length == 1 %>
+<% siblings = notification.json_data["aggregated_siblings"].length %>
+<div class="crayons-card notification <% if siblings == 1 %> notification--middle <% else %> flex-col items-center <% end %>">
+  <% if siblings == 1 %>
     <% first_notification = notification.json_data["aggregated_siblings"].first %>
     <% cache "activity-profile-pic-#{first_notification['id']}-#{first_notification['profile_image_90']}" do %>
       <a href="<%= first_notification["path"] %>" class="crayons-avatar crayons-avatar--l <% if notification.json_data["aggregated_siblings"].length == 1 %>m:crayons-avatar--xl<% end %> shrink-0" tabindex="-1" aria-hidden="true">
@@ -9,7 +10,7 @@
     <div class="notification__content">
       <% cache "activity-follow-button-#{first_notification['path']}-#{first_notification['name']}" do %>
         <div class="flex justify-between items-center">
-          <p><a href="<%= first_notification["path"] %>" class="crayons-link fw-bold"><%= first_notification["name"] %></a> followed you!</p>
+          <p><%= t("views.notifications.follow.single_html", name: link_to(first_notification["name"], first_notification["path"], class: "crayons-link fw-bold")) %></p>
           <%= follow_button(notification.decorate.mocked_object("user"), "follow-back") %>
         </div>
       <% end %>
@@ -24,12 +25,10 @@
       <% end %>
     </div>
     <p>
-      <% if notification.json_data["aggregated_siblings"].length == 2 %>
-        <a href="<%= json_data_array.first["path"] %>" class="crayons-link fw-bold"><%= json_data_array.first["name"] %></a> and
-        <a href="<%= json_data_array.second["path"] %>" class="crayons-link fw-bold"><%= json_data_array.second["name"] %></a> followed you!
+      <% if siblings == 2 %>
+        <%= t("views.notifications.follow.and_html", first: link_to(json_data_array.first["name"], json_data_array.first["path"], class: "crayons-link fw-bold"), second: link_to(json_data_array.second["name"], json_data_array.second["path"], class: "crayons-link fw-bold")) %>
       <% else %>
-        <a href="<%= json_data_array.first["path"] %>" class="crayons-link fw-bold"><%= json_data_array.first["name"] %></a>
-        and <%= notification.json_data["aggregated_siblings"].size - 1 %> others followed you!
+        <%= t("views.notifications.follow.and_other_html", first: link_to(json_data_array.first["name"], json_data_array.first["path"], class: "crayons-link fw-bold"), others: t("views.notifications.follow.others", count: siblings - 1), count: siblings) %>
       <% end %>
     </p>
   <% end %>

app/views/notifications/_mention.html.erb

@@ -8,21 +8,15 @@
     <% if notification.json_data["article"] %>
       <header class="mb-4">
         <h2 class="fs-base fw-normal">
-          <a href="<%= json_data["user"]["path"] %>" class="crayons-link fw-bold">
-            <%= json_data["user"]["name"] %>
-          </a>
-          mentioned you in a post
-          <% if json_data["organization"] %>
-            under <a href="<%= json_data["organization"]["path"] %>" class="crayons-link fw-bold"><%= json_data["organization"]["name"] %></a>
-          <% end %>
+          <%= message_user_acted_maybe_org(json_data, "views.notifications.mention.article_html", if_org: "views.notifications.mention.if_org_html") %>
         </h2>
-        <p class="lh-tight"><small class="fs-s color-base-60"><%= time_ago_in_words json_data["article"]["published_at"] %> ago</small></p>
+        <p class="lh-tight"><small class="fs-s color-base-60"><%= time_ago_in_words json_data["article"]["published_at"], scope: :"datetime.distance_in_words_ago" %></small></p>
       </header>
 
       <%= render "notifications/shared/article_preview", json_data: json_data, notification: notification, context: "default" %>
     <% elsif notification.json_data["comment"] %>
       <h2 class="fs-base fw-normal mb-4">
-        <a href="<%= json_data["user"]["path"] %>" class="crayons-link fw-bold"><%= json_data["user"]["name"] %></a> mentioned you in a comment
+        <%= message_user_acted_maybe_org(json_data, "views.notifications.mention.comment_html") %>
       </h2>
       <%= render "notifications/shared/comment_box", json_data: json_data, notification: notification, context: "default" %>
     <% end %>

app/views/notifications/_milestone.html.erb

@@ -1,9 +1,8 @@
 <% json_data = notification.json_data %>
 <div class="p-6 m:p-8 align-center w-100">
-  <p class="fs-l m:fs-2xl mb-4">🎉🎉🎉🎉🎉🎉🎉🎉</p>
+  <p class="fs-l m:fs-2xl mb-4"><%= t("views.notifications.milestone.intro") %></p>
   <h2 class="fw-normal fs-xl m:fs-2xl mb-4">
-    Your post
-    <a href="<%= json_data["article"]["path"] %>" class="crayons-link fw-bold"><%= h(json_data["article"]["title"]) %></a> passed <%= notification.milestone_count %> <%= notification.milestone_type.pluralize.downcase %>!
+    <%= t("views.notifications.milestone.heading_html", title: link_to(h(json_data["article"]["title"]), json_data["article"]["path"], class: "crayons-link fw-bold"), type: t("views.notifications.milestone.type.#{notification.milestone_type}", count: notification.milestone_count.to_i)) %>
   </h2>
 
   <a href="https://giphy.com/gifs/<%= json_data["gif_id"] %>" rel="noopener noreferrer" class="block my-4" target="_blank">
@@ -11,6 +10,6 @@
   </a>
 
   <a href="/dashboard" class="crayons-btn w-100 m:w-50">
-    Check your dashboard
+    <%= t("views.notifications.milestone.check") %>
   </a>
 </div>

app/views/notifications/_nav_menu.html.erb

@@ -4,7 +4,7 @@
 <% user_comments = comments_filter && params[:org_id].blank? %>
 <% user_posts = params[:filter].to_s.match?(/^posts$/i) && params[:org_id].blank? %>
 
-<nav class="hidden m:block pt-4" aria-label="Notifications">
+<nav class="hidden m:block pt-4" aria-label="<%= t("views.notifications.nav.aria_label") %>">
   <div>
     <% if @organizations.present? %>
       <h3 class="crayons-subtitle-3 mb-4 pl-2"><%= @user.name %></h3>
@@ -13,17 +13,17 @@
     <a
       class="crayons-link crayons-link--block <%= "crayons-link--current" if no_filter %>"
       href="<%= notifications_path %>">
-      <%= t("core.all") %>
+      <%= t("views.notifications.nav.all") %>
     </a>
     <a
       class="crayons-link crayons-link--block <%= "crayons-link--current" if user_comments %>"
       href="<%= notifications_filter_path(:comments) %>">
-      <%= t("core.comments") %>
+      <%= t("views.notifications.nav.comments") %>
     </a>
     <a
       class="crayons-link crayons-link--block <%= "crayons-link--current" if user_posts %>"
       href="<%= notifications_filter_path(:posts) %>">
-      <%= t("core.posts") %>
+      <%= t("views.notifications.nav.posts") %>
     </a>
   </div>
 
@@ -34,19 +34,19 @@
         <a
           class="crayons-link crayons-link--block <%= "crayons-link--current" if org_filter && params[:org_id].to_i == org.id %>"
           href="<%= notifications_filter_org_path(filter: :org, org_id: org.id) %>">
-          <%= t("core.all") %>
+          <%= t("views.notifications.nav.all") %>
         </a>
         <a
           class="crayons-link crayons-link--block <%= "crayons-link--current" if comments_filter && params[:org_id].to_i == org.id %>"
           href="<%= notifications_filter_org_path(filter: :comments, org_id: org.id) %>">
-          <%= t("core.comments") %>
+          <%= t("views.notifications.nav.comments") %>
         </a>
       </div>
     <% end %>
   <% end %>
 </nav>
 
-<nav class="block m:hidden px-4" aria-label="Notifications">
+<nav class="block m:hidden px-4" aria-label="<%= t("views.notifications.nav.aria_label") %>">
   <% if @organizations.present? %>
     <select id="notifications-filter__select" class="crayons-select mb-2">
       <option value="<%= notifications_path %>"><%= @user.name %></option>
@@ -64,7 +64,7 @@
           class="crayons-tabs__item <%= "crayons-tabs__item--current" if no_filter %>"
           href="<%= notifications_path %>"
           aria-current="<%= "page" if no_filter %>">
-          <%= t("core.all") %>
+          <%= t("views.notifications.nav.all") %>
         </a>
       </li>
       <li>
@@ -73,7 +73,7 @@
           class="crayons-tabs__item <%= "crayons-tabs__item--current" if user_comments %>"
           href="<%= notifications_filter_path(:comments) %>"
           aria-current="<%= "page" if user_comments %>">
-          <%= t("core.comments") %>
+          <%= t("views.notifications.nav.comments") %>
         </a>
       </li>
       <li>
@@ -82,7 +82,7 @@
           class="crayons-tabs__item <%= "crayons-tabs__item--current" if user_posts %>"
           href="<%= notifications_filter_path(:posts) %>"
           aria-current="<%= "page" if user_posts %>">
-          <%= t("core.posts") %>
+          <%= t("views.notifications.nav.posts") %>
         </a>
       </li>
     </ul>
@@ -95,13 +95,13 @@
           data-text="All"
           class="crayons-tabs__item <%= "crayons-tabs__item--current" if org_filter && params[:org_id].to_i == org.id %>"
           href="<%= notifications_filter_org_path(filter: :org, org_id: org.id) %>">
-          <%= t("core.all") %>
+          <%= t("views.notifications.nav.all") %>
         </a>
         <a
           data-text="Comments"
           class="crayons-tabs__item <%= "crayons-tabs__item--current" if comments_filter && params[:org_id].to_i == org.id %>"
           href="<%= notifications_filter_org_path(filter: :comments, org_id: org.id) %>">
-          <%= t("core.comments") %>
+          <%= t("views.notifications.nav.comments") %>
         </a>
       </div>
     <% end %>

app/views/notifications/_notifications_list.html.erb

@@ -9,8 +9,8 @@
   <% Honeybadger.notify(e, context: { notification_id: notification.id }) %>
 
   <div class="align-center p-9 py-10 color-base-80 crayons-card mb-2">
-    <h2 class="fw-bold fs-l">An error occurred!</h2>
-    <p class="color-base-60 pt-2">This has been logged and we're tracking it.</p>
+    <h2 class="fw-bold fs-l"><%= t("views.notifications.error.subtitle") %></h2>
+    <p class="color-base-60 pt-2"><%= t("views.notifications.error.desc") %></p>
   </div>
 <% end %>
 

app/views/notifications/_tagadjustment.html.erb

@@ -6,25 +6,21 @@
   <div class="notification__content">
     <% data = notification.json_data %>
     <% removal = data["adjustment_type"] == "removal" %>
-      <h3 class="mb-2 color-base-90">Hey there 👋</h3>
+      <h3 class="mb-2 color-base-90"><%= t("views.notifications.tag.heading") %></h3>
       <p class="mb-4">
-        Moderators <%= removal ? "removed" : "added" %> the
-        <strong><a href="/t/<%= data["tag_name"] %>">#<%= data["tag_name"] %></a></strong> tag
-        <%= removal ? "from" : "to" %> your post
-        <a href="<%= data["article"]["path"] %>"><%= h(data["article"]["title"]) %></a>.
-        <%= removal ? "Certain tags have special submission guidelines, and mods need to adjust tags to best fit the community." : "Mods felt this tag represented your article." %>
+        <%= t("views.notifications.tag.#{removal ? "remove" : "add"}_html", tag: link_to("##{data["tag_name"]}", "/t/#{data["tag_name"]}")), title: link_to(h(data["article"]["title"]), data["article"]["path"])) %>
       </p>
       <div class="crayons-card crayons-card--secondary p-4 mb-4">
         <p class="color-base-70">
-          <strong>Reason for action:</strong>
+          <strong><%= t("views.notifications.tag.reason") %></strong>
           <em><%= data["reason_for_adjustment"] %></em>
         </p>
       </div>
       <% if removal %>
-        <p class="mb-2">Check out <a href="/tags">other popular tags</a> which may be more appropriate</p>
+        <p class="mb-2"><%= t("views.notifications.tag.check_html", other: link_to(t("views.notifications.tag.other"), "/tags")) %></p>
       <% end %>
       <p>
-        Thanks for being part of <%= community_name %>! <%= t("contact_prompts.if_any_questions_html") %> 🤗
+        <%= t("views.notifications.tag.support_html", community: community_name, email: t("contact_prompts.if_any_questions_html")) %>
       </p>
   </div>
 </div>

app/views/notifications/index.html.erb

@@ -1,20 +1,20 @@
-<% title "Notifications" %>
+<% title t("views.notifications.heading") %>
 
 <%= content_for :page_meta do %>
   <link rel="canonical" href="<%= app_url("/notifications") %>" />
-  <meta name="description" content="Notifications inbox for <%= community_name %>">
+  <meta name="description" content="<%= t("views.notifications.meta.description", community: community_name) %>">
   <%= meta_keywords_default %>
 
   <meta property="og:type" content="article" />
   <meta property="og:url" content="<%= app_url("/notifications") %>" />
-  <meta property="og:title" content="Notifications - <%= community_name %>" />
-  <meta property="og:description" content="Notifications inbox for <%= community_name %>" />
+  <meta property="og:title" content="<%= t("views.notifications.meta.og.title", community: community_name) %>" />
+  <meta property="og:description" content="<%= t("views.notifications.meta.description", community: community_name) %>" />
   <meta property="og:site_name" content="<%= community_name %>" />
 
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:site" content="@<%= Settings::General.social_media_handles["twitter"] %>">
-  <meta name="twitter:title" content="Notifications - <%= community_name %>">
-  <meta name="twitter:description" content="Notifications inbox for <%= community_name %>">
+  <meta name="twitter:title" content="<%= t("views.notifications.meta.og.title", community: community_name) %>">
+  <meta name="twitter:description" content="<%= t("views.notifications.meta.description", community: community_name) %>">
 
    <%= javascript_packs_with_chunks_tag "notificationPage", defer: true %>
 <% end %>
@@ -43,9 +43,9 @@
 
 <% if user_signed_in? %>
   <main id="main-content">
-    <header class="crayons-layout crayons-layout--limited-l crayons-layout--1-col p-3 flex items-center justify-between">
-      <h1 class="crayons-title">Notifications</h1>
-      <a href="<%= user_settings_path(tab: :notifications) %>" class="crayons-btn crayons-btn--ghost">Settings</a>
+    <header class="crayons-layout crayons-layout--limited-l crayons-layout--1-col p-4 flex items-center justify-between">
+      <h1 class="crayons-title"><%= t("views.notifications.heading") %></h1>
+      <a href="<%= user_settings_path(tab: :notifications) %>" class="crayons-btn crayons-btn--ghost"><%= t("views.notifications.settings") %></a>
     </header>
 
     <div class="crayons-layout crayons-layout--limited-l crayons-layout--2-cols pt-0" id="notifications-container">
@@ -61,7 +61,7 @@
             won't be shown the "load more" button %>
         <% if @notifications.size >= @initial_page_size %>
           <button id="load-more-button" type="button" class="crayons-btn crayons-btn--secondary crayons-btn--l my-6 w-100">
-            Load More
+            <%= t("views.notifications.load") %>
           </button>
         <% end %>
       </div>

config/locales/en.yml

@@ -6,7 +6,6 @@ en:
     if_we_can_help_html: <a href="/contact">Contact us</a> if there is anything we can help with.
   core:
     add_comment: Add comment
-    all: All
     analytics: Analytics
     browse: Browse
     comment: Comment
@@ -75,6 +74,45 @@ en:
     page_title: Dashboard
     upload_a_video: Upload a video
     write_new_post: Write your first post now
+  datetime:
+    distance_in_words_ago: # https://github.com/openstreetmap/openstreetmap-website/issues/2255
+      about_x_hours:
+        one: about 1 hour ago
+        other: about %{count} hours ago
+      about_x_months:
+        one: about 1 month ago
+        other: about %{count} months ago
+      about_x_years:
+        one: about 1 year ago
+        other: about %{count} years ago
+      almost_x_years:
+        one: almost 1 year ago
+        other: almost %{count} years ago
+      half_a_minute: half a minute ago
+      less_than_x_seconds:
+        one: less than 1 second ago
+        other: less than %{count} seconds ago
+      less_than_x_minutes:
+        one: less than a minute ago
+        other: less than %{count} minutes ago
+      over_x_years:
+        one: over 1 year ago
+        other: over %{count} years ago
+      x_seconds:
+        one: 1 second ago
+        other: "%{count} seconds ago"
+      x_minutes:
+        one: 1 minute ago
+        other: "%{count} minutes ago"
+      x_days:
+        one: 1 day ago
+        other: "%{count} days ago"
+      x_months:
+        one: 1 month ago
+        other: "%{count} months ago"
+      x_years:
+        one: 1 year ago
+        other: "%{count} years ago"
   errors:
     messages:
       accepted: must be accepted

config/locales/fr.yml

@@ -6,7 +6,6 @@ fr:
     if_we_can_help_html: <a href="/contact">Contactez-nous</a> si nous pouvons vous aider.
   core:
     add_comment: Ajouter un commentaire
-    all: Tout
     analytics: Analytique
     browse: Parcourir
     comment: Commentaire
@@ -90,6 +89,45 @@ fr:
     - oct
     - nov
     - déc
+  datetime:
+    distance_in_words_ago: # https://github.com/openstreetmap/openstreetmap-website/issues/2255
+      about_x_hours:
+        one: il y a environ une heure
+        other: il y a environ %{count} heures
+      about_x_months:
+        one: il y a environ un mois
+        other: il y a environ %{count} mois
+      about_x_years:
+        one: il y a environ 1 an
+        other: il y a environ %{count} ans
+      almost_x_years:
+        one: il y a presque un an
+        other: il y a presque %{count} ans
+      half_a_minute: il y a une demi-minute
+      less_than_x_seconds:
+        one: il y a moins d’1 seconde
+        other: il y a moins de %{count} secondes
+      less_than_x_minutes:
+        one: il y a moins d’une minute
+        other: il y a moins de %{count} minutes
+      over_x_years:
+        one: il y a plus d’un an
+        other: il y a plus de %{count} ans
+      x_seconds:
+        one: il y a une seconde
+        other: il y a %{count} secondes
+      x_minutes:
+        one: il y a une minute
+        other: il y a %{count} minutes
+      x_days:
+        one: hier
+        other: il y a %{count} jours
+      x_months:
+        one: il y a un mois
+        other: il y a %{count} mois
+      x_years:
+        one: l’année dernière
+        other: il y a %{count} ans
   errors:
     messages:
       accepted: doit être accepté

config/locales/views/notifications/en.yml

@@ -0,0 +1,74 @@
+---
+en:
+  views:
+    notifications:
+      meta:
+        description: Notifications inbox for %{community}
+        og:
+          title: Notifications - %{community}
+      heading: Notifications
+      badge:
+        heading_html: You received the %{badge} badge
+        awarded_html: "You also get %{credits} to use for %{listings} if you have anything you'd like to promote. 🎉"
+        credits:
+          one: "%{count} new credits"
+          other: "%{count} new credits"
+        listings: community listings
+        more: More information about listings
+        profile: Visit your profile
+      broadcast:
+        visit_html: Visit %{settings} to manage your notifications.
+        settings: Settings
+      comment:
+        commented_html: "%{user} commented on %{title}"
+        first_html: "%{user} wrote their first comment on %{title}"
+        first_reply: "Give them their first reply! 🎉"
+        left_html: "%{user} just left a comment on %{title}."
+        replied_html: "%{user} replied to a thread in %{title}"
+        report: All negative reactions are 100% private. If this comment violates the code of conduct, please downvote/report as inappropriate.
+        welcome_html: Since they are new to the community, could you leave a nice reply to help them feel welcome? <strong>Thank you!</strong>
+      error:
+        subtitle: An error occurred!
+        desc: This has been logged and we're tracking it.
+      follow:
+        and_html: "%{first} and %{second} followed you!"
+        and_other_html:
+          one: "%{first} and %{others} followed you!"
+          other: "%{first} and %{others} followed you!"
+        others:
+          one: "%{count} others"
+          other: "%{count} others"
+        single_html: "%{name} followed you!"
+      load: Load More
+      mention:
+        article_html: "%{user} mentioned you in a post%{if_org}"
+        comment_html: "%{user} mentioned you in a comment"
+        if_org_html: " under %{org}"
+      milestone:
+        heading_html: Your post %{title} passed %{type}!
+        check: Check your dashboard
+        intro: "🎉🎉🎉🎉🎉🎉🎉🎉"
+        type:
+          View:
+            one: "%{count} views"
+            other: "%{count} views"
+          Reaction:
+            one: "%{count} reactions"
+            other: "%{count} reactions"
+      nav:
+        aria_label: Notifications
+        all: All
+        comments: Comments
+        posts: Posts
+      new_post:
+        if_org_html: " under %{org}"
+        verb_html: "%{user} made a new post%{if_org}"
+      settings: Settings
+      tag:
+        heading: "Hey there 👋"
+        add_html: Moderators added the <strong>%{tag}</strong> tag to your post %{title}. Mods felt this tag represented your article.
+        check_html: Check out %{other} which may be more appropriate
+        other: other popular tags
+        reason: 'Reason for action:'
+        remove_html: Moderators removed the <strong>%{tag}</strong> tag from your post %{title}. Certain tags have special submission guidelines, and mods need to adjust tags to best fit the community.
+        support_html: "Thanks for being part of %{community}! %{email} 🤗"

config/locales/views/notifications/fr.yml

@@ -0,0 +1,74 @@
+---
+fr:
+  views:
+    notifications:
+      meta:
+        description: Notifications inbox for %{community}
+        og:
+          title: Notifications - %{community}
+      heading: Notifications
+      badge:
+        heading_html: You received the %{badge} badge
+        awarded_html: "You also get %{credits} to use for %{listings} if you have anything you'd like to promote. 🎉"
+        credits:
+          one: "%{count} new credits"
+          other: "%{count} new credits"
+        listings: community listings
+        more: More information about listings
+        profile: Visit your profile
+      broadcast:
+        visit_html: Visit %{settings} to manage your notifications.
+        settings: Settings
+      comment:
+        commented_html: "%{user} commented on %{title}"
+        first_html: "%{user} wrote their first comment on %{title}"
+        first_reply: "Give them their first reply! 🎉"
+        left_html: "%{user} just left a comment on %{title}."
+        replied_html: "%{user} replied to a thread in %{title}"
+        report: All negative reactions are 100% private. If this comment violates the code of conduct, please downvote/report as inappropriate.
+        welcome_html: Since they are new to the community, could you leave a nice reply to help them feel welcome? <strong>Thank you!</strong>
+      error:
+        subtitle: An error occurred!
+        desc: This has been logged and we're tracking it.
+      follow:
+        and_html: "%{first} and %{second} followed you!"
+        and_other_html:
+          one: "%{first} and %{others} followed you!"
+          other: "%{first} and %{others} followed you!"
+        others:
+          one: "%{count} others"
+          other: "%{count} others"
+        single_html: "%{name} followed you!"
+      load: Load More
+      mention:
+        article_html: "%{user} mentioned you in a post%{if_org}"
+        comment_html: "%{user} mentioned you in a comment"
+        if_org_html: " under %{org}"
+      milestone:
+        heading_html: Your post %{title} passed %{type}!
+        check: Check your dashboard
+        intro: "🎉🎉🎉🎉🎉🎉🎉🎉"
+        type:
+          View:
+            one: "%{count} views"
+            other: "%{count} views"
+          Reaction:
+            one: "%{count} reactions"
+            other: "%{count} reactions"
+      nav:
+        aria_label: Notifications
+        all: Tout
+        comments: Commentaires
+        posts: Publications
+      new_post:
+        if_org_html: " under %{org}"
+        verb_html: "%{user} made a new post%{if_org}"
+      settings: Settings
+      tag:
+        heading: "Hey there 👋"
+        add_html: Moderators added the <strong>%{tag}</strong> tag to your post %{title}. Mods felt this tag represented your article.
+        check_html: Check out %{other} which may be more appropriate
+        other: other popular tags
+        reason: 'Reason for action:'
+        remove_html: Moderators removed the <strong>%{tag}</strong> tag from your post %{title}. Certain tags have special submission guidelines, and mods need to adjust tags to best fit the community.
+        support_html: "Thanks for being part of %{community}! %{email} 🤗"