docbrown/app/views/articles/_actions.html.erb

<div class="crayons-article-actions print-hidden">
  <div class="crayons-article-actions__inner">
    <% if @article.published? %>

      <%= render partial: "articles/reaction_button",
                 locals: {
                   category: :like,
                   description: t("views.reactions.like.title"),
                   image_path: "heart.svg",
                   image_active_path: "heart-filled.svg",
                   aria_label: t("views.reactions.like.aria_label")
                 } %>

     <% if FeatureFlag.enabled?(:replace_unicorn_with_jump_to_comments) %>
        <button
          id="reaction-butt-comment"
          aria-label="<%= t("views.articles.jump_to_comments.aria_label") %>"
          aria-pressed="false"
          class="crayons-reaction crayons-reaction--comment crayons-tooltip__activator relative"
          data-category="comment">
            <span class="crayons-reaction__icon crayons-reaction__icon--inactive">
              <%= crayons_icon_tag("comment.svg", aria_hidden: true) %>
            </span>
            <span class="crayons-reaction__count" id="reaction-number-comment"><%= @article.comments_count %></span>

            <span data-testid="tooltip" class="crayons-tooltip__content">
              <%= t("views.articles.jump_to_comments.label") %>
            </span>
        </button>
      <% else %>
        <%= render partial: "articles/reaction_button",
                   locals: {
                     category: :unicorn,
                     description: t("views.reactions.unicorn.title"),
                     image_path: "unicorn.svg",
                     image_active_path: "unicorn-filled.svg",
                     aria_label: t("views.reactions.unicorn.aria_label")
                   } %>
      <% end %>

      <%= render partial: "articles/reaction_button",
                 locals: {
                   category: :readinglist,
                   description: t("views.reactions.readingList.title"),
                   image_path: "save.svg",
                   image_active_path: "save-filled.svg",
                   aria_label: t("views.reactions.readingList.aria_label")
                 } %>
    <% end %>
    <div id="mod-actions-menu-btn-area" class="print-hidden hidden align-center"></div>
    <div class="align-center m:relative">
      <button id="article-show-more-button" aria-controls="article-show-more-dropdown" aria-expanded="false" aria-haspopup="true" class="dropbtn crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon-rounded" aria-label="<%= t("views.actions.more.aria_label") %>">
        <%= crayons_icon_tag("overflow-horizontal", class: "dropdown-icon", aria_hidden: true, title: t("views.actions.more.title")) %>
      </button>

      <div id="article-show-more-dropdown" class="crayons-dropdown side-bar left-2 right-2 m:right-auto m:left-100 s:left-auto mb-1 m:mb-0 top-unset bottom-100 m:top-0 m:bottom-unset">
        <div>
          <button
            id="copy-post-url-button"
            class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0"
            data-postUrl="<%= article_url(@article) %>">
            <span class="fw-bold"><%= t("views.actions.copy.button") %></span>
            <%= crayons_icon_tag(:copy, class: "mx-2 shrink-0", id: "article-copy-icon", aria_hidden: true, title: t("views.actions.copy.button")) %>
          </button>
          <div id="article-copy-link-announcer" aria-live="polite" class="crayons-notice crayons-notice--success my-2 p-1" aria-live="polite" hidden><%= t("views.actions.copy.text") %></div>
        </div>

        <div class="Desktop-only">
          <a
            target="_blank"
            class="crayons-link crayons-link--block"
            rel="noopener"
            href='https://twitter.com/intent/tweet?text=<%= u t("views.actions.share.twitter.query",
                                                                article: @article.title.strip,
                                                                author: @article.user.twitter_username ? "@#{@article.user.twitter_username}" : @article.user.name) %><%= u " #{Settings::General.twitter_hashtag}" %><%= u " #{article_url(@article)}" %>'>
            <%= t("views.actions.share.twitter.text") %>
          </a>
          <a
            target="_blank"
            class="crayons-link crayons-link--block"
            rel="noopener"
            href="https://www.linkedin.com/shareArticle?mini=true&url=<%= u article_url(@article) %>&title=<%= u @article.title %>&summary=<%= u @article.description %>&source=<%= u community_name %>">
            <%= t("views.actions.share.linkedin.text") %>
          </a>
          <a
            target="_blank"
            class="crayons-link crayons-link--block"
            rel="noopener"
            href="https://www.reddit.com/submit?url=<%= u article_url(@article) %>&title=<%= u @article.title %>">
            <%= t("views.actions.share.reddit.text") %>
          </a>
          <a
            target="_blank"
            class="crayons-link crayons-link--block"
            rel="noopener"
            href="https://news.ycombinator.com/submitlink?u=<%= u article_url(@article) %>&t=<%= u @article.title %>">
            <%= t("views.actions.share.hackernews.text") %>
          </a>
          <a
            target="_blank"
            class="crayons-link crayons-link--block"
            rel="noopener"
            href="https://www.facebook.com/sharer.php?u=<%= u article_url(@article) %>">
            <%= t("views.actions.share.facebook.text") %>
          </a>
        </div>

        <web-share-wrapper shareurl="<%= article_url(@article) %>" sharetitle="<%= @article.title %>" sharetext="<%= @article.description %>" template="web-share-button">
        </web-share-wrapper>
        <template id="web-share-button">
          <a href="#" class="dropdown-link-row crayons-link crayons-link--block"><%= t("views.actions.share.link") %></a>
        </template>

        <a href="/report-abuse" class="crayons-link crayons-link--block"><%= t("views.actions.share.report") %></a>
      </div>
    </div>
  </div>
</div>