[WIP] Add Action Bar to relations section

* Adds relation action bar
* Adds blankslate

app/components/work_package_relations_tab/index_component.html.erb

@@ -1,32 +1,63 @@
 <%= turbo_frame_tag "work-package-relations-tab-content" do %>
   <%= 
-    blah_blah = "Blah blah"
-    flex_layout(classes: "work-package-relations-tab--list-container") do |flex|
-      relations.group_by(&:relation_type).each do |relation_type, relations_of_type|
-        flex.with_row do
-          render(border_box_container(padding: :condensed)) do |border_box|
-            border_box.with_header(py: 3) do
-              flex_layout(align_items: :center) do |flex|
-                flex.with_column(mr: 2) do
-                  render(Primer::Beta::Text.new(font_size: :normal, font_weight: :bold)) do
-                    t(relations_of_type.first.label_for(work_package)).capitalize
+    flex_layout do |action_bar|
+      action_bar.with_column do
+        render(Primer::Beta::Text.new(color: :muted)) do
+          "Add relations to other work packages to create a link between them."
+        end
+      end
+      action_bar.with_column do
+        render(Primer::Alpha::ActionMenu.new(menu_id: "relations-list-action-menu")) do |menu|
+          menu.with_show_button do |button|
+            button.with_leading_visual_icon(icon: :"plus")
+
+            button.with_trailing_action_icon(icon: :"triangle-down")
+            "Relation"
+          end
+          Relation::TYPES.values.each do |type_configuration_hash|
+            menu.with_item(label: t(type_configuration_hash[:name]).capitalize) do |item|
+              item.with_description.with_content("blugh")
+            end
+          end
+        end
+      end
+    end
+  %>
+  <%=
+    if relations.any?
+      flex_layout(classes: "work-package-relations-tab--list-container") do |flex|
+        relations.group_by(&:relation_type).each do |relation_type, relations_of_type|
+          flex.with_row do
+            render(border_box_container(padding: :condensed)) do |border_box|
+              border_box.with_header(py: 3) do
+                flex_layout(align_items: :center) do |flex|
+                  flex.with_column(mr: 2) do
+                    render(Primer::Beta::Text.new(font_size: :normal, font_weight: :bold)) do
+                      t(relations_of_type.first.label_for(work_package)).capitalize
+                    end
+                  end
+                  flex.with_column do
+                    render(Primer::Beta::Counter.new(count: relations_of_type.size,
+                                                    round: true,
+                                                    scheme: :primary))
                   end
-                end
-                flex.with_column do
-                  render(Primer::Beta::Counter.new(count: relations_of_type.size,
-                                                   round: true,
-                                                   scheme: :primary))
                 end
               end
-            end
-            relations_of_type.each do |relation|
-              border_box.with_row(style: "padding-top: 12px; padding-bottom: 12px;") do
-                render(WorkPackageRelationsTab::RelationComponent.new(work_package: relation.to))
+              relations_of_type.each do |relation|
+                border_box.with_row(style: "padding-top: 12px; padding-bottom: 12px;") do
+                  render(WorkPackageRelationsTab::RelationComponent.new(work_package: relation.to))
+                end
               end
             end
           end
         end
       end
+    else
+      render Primer::Beta::Blankslate.new(border: true) do |component|
+        component.with_visual_icon(icon: "package-dependents")
+        component.with_heading(tag: :h2).with_content("No relations")
+        component.with_description { "This work package does not yet have any relations." }
+      end
     end
   %>
 <% end %>

app/components/work_package_relations_tab/index_component.sass

@@ -1,3 +1,5 @@
 .work-package-relations-tab
   &--list-container
     gap: 1.5rem
+#relations-list-action-menu-list
+  max-height: 300px

app/components/work_package_relations_tab/relation_component.html.erb

@@ -1,6 +1,7 @@
 <%= flex_layout(direction: :column, style: "gap: 0.25rem;") do |flex|
   flex.with_row(flex_layout: true,
                 justify_content: :flex_start,
+                align_items: :center,
                 style: "gap: 0.5rem;") do |meta_information_row|
     meta_information_row.with_column do
       render(Primer::Beta::Text.new(font_size: :small,
@@ -13,7 +14,9 @@
                                     color: :muted)) { "##{work_package.id}" }
     end
     meta_information_row.with_column do
-      render(Primer::Beta::Label.new(font_weight: :bold)) { work_package.status.name }
+      render(Primer::Beta::Text.new(classes: "__hl_inline_status_#{work_package.status.id}")) do
+        work_package.status.name
+      end
     end
   end
 
@@ -28,11 +31,13 @@
     end
   end
 
-  flex.with_row(flex_layout: true, justify_content: :flex_start) do |description_row|
-    description_row.with_column do
-      render(Primer::Beta::Text.new(font_size: :small,
-                                    color: :muted)) do
-        format_text(work_package, :description)
+  if work_package.description.present?
+    flex.with_row(flex_layout: true, justify_content: :flex_start) do |description_row|
+      description_row.with_column do
+        render(Primer::Beta::Text.new(font_size: :small,
+                                      color: :muted)) do
+          format_text(work_package, :description)
+        end
       end
     end
   end