From 6a953220de986e10dd2e89fa90adfa9196059c19 Mon Sep 17 00:00:00 2001
From: Behrokh Satarnejad <b.satarnejad@openproject.com>
Date: Sat, 16 Nov 2024 13:06:44 +0100
Subject: [PATCH] update page header in forum and messages pages

---
 app/views/forums/index.html.erb  |  2 +-
 app/views/forums/show.html.erb   | 12 ++--
 app/views/messages/edit.html.erb |  9 ++-
 app/views/messages/show.html.erb | 95 +++++++++++++++++++-------------
 4 files changed, 74 insertions(+), 44 deletions(-)

diff --git a/app/views/forums/index.html.erb b/app/views/forums/index.html.erb
index efca46174d5..b228b5921e3 100644
--- a/app/views/forums/index.html.erb
+++ b/app/views/forums/index.html.erb
@@ -31,7 +31,7 @@ See COPYRIGHT and LICENSE files for more details.
 <%=
   render Primer::OpenProject::PageHeader.new do |header|
     header.with_title { t(:label_forum_plural) }
-    header.with_breadcrumbs( [{ href: project_overview_path(@project.id), text: @project.name  },
+    header.with_breadcrumbs( [{ href: project_overview_path(@project.id), text: @project.name },
                                t(:label_forum_plural)
                              ]) end %>
 
diff --git a/app/views/forums/show.html.erb b/app/views/forums/show.html.erb
index be022da75b6..67bebc2b1be 100644
--- a/app/views/forums/show.html.erb
+++ b/app/views/forums/show.html.erb
@@ -53,6 +53,13 @@ See COPYRIGHT and LICENSE files for more details.
     header.with_breadcrumbs([{ href: project_overview_path(@project.id), text: @project.name },
                              { href: project_forums_path(@project), text: t(:label_forum_plural) },
                              @forum.name])
+    unless User.current.anonymous?
+      watcher_button_args = watcher_button_arguments(@forum, User.current)
+      header.with_action_button(**watcher_button_args) do |button|
+        button.with_leading_visual_icon(icon: watcher_button_args[:mobile_icon])
+        watcher_button_args[:mobile_label]
+      end
+    end
   end
 %>
 <% if authorize_for(:messages, :new) %>
@@ -69,11 +76,6 @@ See COPYRIGHT and LICENSE files for more details.
           t(:label_message)
         end
       end
-      unless User.current.anonymous?
-        subheader.with_action_component do
-          watcher_link(@forum, User.current)
-        end
-      end
     end
   %>
 <% end %>
diff --git a/app/views/messages/edit.html.erb b/app/views/messages/edit.html.erb
index 7f69e748fb8..fa2fad4d8bc 100644
--- a/app/views/messages/edit.html.erb
+++ b/app/views/messages/edit.html.erb
@@ -27,7 +27,14 @@ See COPYRIGHT and LICENSE files for more details.
 
 ++#%>
 
-<h2><%= link_to h(@forum.name), controller: '/forums', action: 'show', project_id: @project, id: @forum %> &#187; <%=h @message.subject %></h2>
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title { @message.subject }
+    header.with_breadcrumbs( [{ href: project_overview_path(@project.id), text: @project.name },
+                              { href: project_forums_path(@project), text: t(:label_forum_plural) },
+                              { href: project_forum_path(@project, @forum), text: @forum.name },
+                             "#{ @message.subject }: <b>#{t(:label_edit)}</b>".html_safe], selected_item_font_weight: :normal)
+  end %>
 
 <%= labelled_tabular_form_for @message,
                               url: topic_path(@message),
diff --git a/app/views/messages/show.html.erb b/app/views/messages/show.html.erb
index 5df6a85b5f8..f8d16f78a43 100644
--- a/app/views/messages/show.html.erb
+++ b/app/views/messages/show.html.erb
@@ -27,48 +27,69 @@ See COPYRIGHT and LICENSE files for more details.
 
 ++#%>
 
-<% breadcrumb_paths(
-     link_to(t(:label_forum_plural), project_forums_path(@project)),
-     link_to(h(@forum.name), project_forum_path(@project, @forum)))
-%>
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title { @topic.subject }
+    header.with_breadcrumbs( [{ href: project_overview_path(@project.id), text: @project.name },
+                              { href: project_forums_path(@project), text: t(:label_forum_plural) },
+                              { href: project_forum_path(@project, @forum), text: @forum.name },
+                              @topic.subject
+                             ])
+    watcher_button_args = watcher_button_arguments(@topic, User.current)
+    header.with_action_button(**watcher_button_args) do |button|
+      button.with_leading_visual_icon(icon: watcher_button_args[:mobile_icon])
+      watcher_button_args[:mobile_label]
+    end
+    if !@topic.locked? && authorize_for('messages', 'reply')
+      header.with_action_button(tag: :a,
+                                scheme: :default,
+                                mobile_icon: :quote,
+                                mobile_label: t(:button_quote),
+                                size: :medium,
+                                href: url_for({ action: 'quote', id: @topic }),
+                                aria: { label: I18n.t(:button_delete) },
+                                data: { 'action': 'forum-messages#quote' },
+                                title: t(:button_quote)) do |button|
+        button.with_leading_visual_icon(icon: :quote)
+        t(:button_quote)
+      end
+    end
+    if @message.editable_by?(User.current)
+      header.with_action_button(tag: :a,
+                                scheme: :default,
+                                mobile_icon: :pencil,
+                                mobile_label: t(:button_edit),
+                                size: :medium,
+                                href: edit_topic_path(@topic),
+                                aria: { label: t(:button_edit) },
+                                title: t(:button_edit)) do |button|
+        button.with_leading_visual_icon(icon: :pencil)
+        t(:button_edit)
+      end
+    end
+    if @message.destroyable_by?(User.current)
+      header.with_action_button(tag: :a,
+                                scheme: :danger,
+                                mobile_icon: :trash,
+                                mobile_label: t(:button_delete),
+                                size: :medium,
+                                href: topic_path(@topic),
+                                aria: { label: I18n.t(:button_delete) },
+                                data: {
+                                  confirm: I18n.t(:text_are_you_sure),
+                                  method: :delete
+                                },
+                                title: I18n.t(:button_delete)) do |button|
+        button.with_leading_visual_icon(icon: :trash)
+        t(:button_delete)
+      end
+    end
+  end %>
 
 <% content_controller 'forum-messages',
                       dynamic: true %>
 
 <% title avatar(@topic.author) + h(@topic.subject) %>
-<%= toolbar title: title do %>
-  <li class="toolbar-item hidden-for-tablet">
-    <%= watcher_link(@topic, User.current) %>
-  </li>
-  <li class="toolbar-item hidden-for-tablet">
-    <% if !@topic.locked? && authorize_for('messages', 'reply') %>
-      <%= link_to(
-            { action: 'quote', id: @topic },
-            data: { 'action': 'forum-messages#quote' },
-            class: 'boards--quote-button button'
-          ) do %>
-        <%= op_icon('button--icon icon-quote') %>
-        <span class="button--text"><%= t(:button_quote) %></span>
-      <% end %>
-    <% end %>
-  </li>
-  <li class="toolbar-item">
-    <% if @message.editable_by?(User.current) %>
-      <%= link_to(edit_topic_path(@topic), accesskey: accesskey(:edit), class: 'button') do %>
-        <%= op_icon('button--icon icon-edit') %>
-        <span class="button--text"><%= t(:button_edit) %></span>
-      <% end %>
-    <% end %>
-  </li>
-  <li class="toolbar-item">
-    <% if @message.destroyable_by?(User.current) %>
-      <%= link_to(topic_path(@topic), method: :delete, data: { confirm: t(:text_are_you_sure) }, class: 'button') do %>
-        <%= op_icon('button--icon icon-delete') %>
-        <span class="button--text"><%= t(:button_delete) %></span>
-      <% end %>
-    <% end %>
-  </li>
-<% end %>
 
 <div class="forum-message">
   <p class="author additional-information"><%= authoring @topic.created_at, @topic.author %></p>