style(attestation): group tags by section

app/components/tags_button_list_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class TagsButtonListComponent < ApplicationComponent
+  attr_reader :tags
+
+  def initialize(tags:)
+    @tags = tags
+  end
+
+  def button_label(tag)
+    tag[:libelle].truncate_words(12)
+  end
+
+  def button_title(tag)
+    tag[:description].presence || tag[:libelle]
+  end
+end

app/components/tags_button_list_component/tags_button_list_component.en.yml

@@ -0,0 +1,8 @@
+---
+en:
+  categories:
+    individual: Identity
+    etablissement: Establishment
+    dossier: File
+    champ_public: Form data
+    champ_private: Private annotations

app/components/tags_button_list_component/tags_button_list_component.fr.yml

@@ -0,0 +1,8 @@
+---
+fr:
+  categories:
+    individual: Identité
+    etablissement: Établissement
+    dossier: Dossier
+    champ_public: Formulaire
+    champ_private: Annotations privées

app/components/tags_button_list_component/tags_button_list_component.html.haml

@@ -0,0 +1,9 @@
+- tags.each_pair do |category, tags|
+  %p.fr-label.fr-text--sm.fr-text--bold.fr-mb-1w= t(category, scope: ".categories")
+  %ul.fr-tags-group
+    - tags.each do |tag|
+      %li
+        - label = button_label(tag)
+        %button.fr-tag.fr-tag--sm{ type: "button", title: button_title(tag), data: { action: 'click->tiptap#insertTag', tiptap_target: 'tag', tag_id: tag[:id], tag_label: label } }
+          = label
+

app/models/concerns/tags_substitution_concern.rb

@@ -240,6 +240,17 @@ module TagsSubstitutionConcern
     tags_for_dossier_state(identity_tags + dossier_tags + champ_public_tags + champ_private_tags + routage_tags)
   end
 
+  def tags_categorized
+    identity_key = procedure.for_individual? ? :individual : :etablissement
+
+    {
+      identity_key => tags_for_dossier_state(identity_tags),
+      dossier: tags_for_dossier_state(dossier_tags + routage_tags),
+      champ_public: tags_for_dossier_state(champ_public_tags),
+      champ_private: tags_for_dossier_state(champ_private_tags)
+    }.reject { |_, ary| ary.empty? }
+  end
+
   def used_type_de_champ_tags(text)
     used_tags_and_libelle_for(text).filter_map do |(tag, libelle)|
       if tag.nil?

app/views/administrateurs/attestation_template_v2s/edit.html.haml

@@ -40,7 +40,7 @@
                 Je souhaite générer une attestation à la charte de l’état (logo avec Marianne)
 
           .fr-fieldset__element.fr-mt-2w
-            %h2.fr-h6 En-tête
+            %h2.fr-h4 En-tête
 
           .fr-fieldset__element{ class: class_names("hidden" => !@attestation_template.official_layout?), data: { "attestation-target": 'logoMarianneLabelFieldset'} }
             = render Dsfr::InputComponent.new(form: f, attribute: :label_logo, input_type: :text_area, required: @attestation_template.official_layout?, opts: { rows: 3, data: { controller: :textarea, textarea_max_rows_value: 3 } }) do |c|
@@ -64,7 +64,7 @@
               - c.with_hint { "Exemple: Direction interministérielle du numérique. 2 lignes maximum" }
 
           .fr-fieldset__element.fr-mt-2w
-            %label.fr-label.fr-h6
+            %label.fr-label.fr-h4
               = AttestationTemplate.human_attribute_name :body
               = render EditableChamp::AsteriskMandatoryComponent.new
 
@@ -80,18 +80,17 @@
                       = label
 
           .fr-fieldset__element
-            %ul.fr-tags-group
-              - @attestation_template.tags.each do |tag|
-                %li
-                  %button.fr-tag.fr-tag--sm{ title: tag[:description], data: { action: 'click->tiptap#insertTag', tiptap_target: 'tag', tag_id: tag[:id], tag_label: tag[:libelle] } }
-                    = tag[:libelle]
+            %label.fr-label
+              Balises
+            %p.fr-hint-text
+              Intégrez à l’attestation du texte issu du dossier. Cliquez sur un bouton de balise pour l’ajouter là où se trouve le curseur, ou tapez dans l’éditeur le caractère
+              %code @
+              suivi du nom de la balise. Les balises pour les champs conditionnés ne sont pas disponibles.
 
-            = render Dsfr::AlertComponent.new(state: :info, title: "Balises sur le conditionnel", heading_level: 'h3', size: :sm) do |c|
-              - c.with_body do
-                Les balises pour les champs conditionnés ne sont pas disponibles.
+            = render TagsButtonListComponent.new(tags: @attestation_template.tags_categorized)
 
           .fr-fieldset__element.fr-mt-2w
-            %h2.fr-h6 Pied de page
+            %h2.fr-h4 Pied de page
 
           .fr-fieldset__element
             %label.fr-label{ for: field_id(@attestation_template, :signature) } Tampon ou signature