WIP on new theme

app/Drupal/laszlo/components/content/comment/comment.css

@@ -2,6 +2,9 @@
   padding: var(--spacing-6);
   border-radius: var(--spacing-2);
   background: var(--color-surface-container-low);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
 }
 
 .comment__body {

app/Drupal/laszlo/laszlo.theme

@@ -7,6 +7,7 @@ use Drupal\laszlo\Hook\Theme\PreprocessComment;
 use Drupal\laszlo\Hook\Theme\PreprocessInput;
 use Drupal\laszlo\Hook\Theme\PreprocessLaszloPageFooter;
 use Drupal\laszlo\Hook\Theme\PreprocessLaszloPageHeader;
+use Drupal\laszlo\Hook\Theme\PreprocessLinks;
 use Drupal\laszlo\Hook\Theme\PreprocessNode;
 use Drupal\laszlo\Hook\Theme\PreprocessPage;
 use Drupal\laszlo\Hook\Theme\ThemeSuggestionsTaxonomyTermAlter;
@@ -81,4 +82,11 @@ function laszlo_theme_suggestions_taxonomy_term_alter(array &$suggestions, array
  */
 function laszlo_preprocess_comment(array &$variables): void {
   \Drupal::classResolver(PreprocessComment::class)($variables);
+}
+
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function laszlo_preprocess_links(array &$variables): void {
+  \Drupal::classResolver(PreprocessLinks::class)($variables);
 }

app/Drupal/laszlo/src/Hook/Theme/PreprocessLinks.php

@@ -0,0 +1,30 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\laszlo\Hook\Theme;
+
+final readonly class PreprocessLinks {
+
+  public function __invoke(array &$variables): void {
+    match ($variables['theme_hook_original']) {
+      default => NULL,
+      'links__comment' => $this->preprocessComment($variables),
+    };
+  }
+
+  private function preprocessComment(array &$variables): void {
+    $links_to_simplify = ['comment-delete', 'comment-edit', 'comment-reply'];
+
+    foreach ($links_to_simplify as $link_to_simplify) {
+      if (array_key_exists($link_to_simplify, $variables['links'])) {
+        $key = \str_replace('-', '_', $link_to_simplify);
+        $variables[$key] = [
+          'label' => $variables['links'][$link_to_simplify]['text'],
+          'url' => $variables['links'][$link_to_simplify]['link']['#url']->toString(),
+        ];
+      }
+    }
+  }
+
+}

app/Drupal/laszlo/templates/content/comment/links--comment.html.twig

@@ -1,13 +1,30 @@
-<ul{{ attributes }}>
-  {%- for item in links -%}
-    <li{{ item.attributes }}>
-      {%- if item.link -%}
-        {{ item.link }}
-      {%- elseif item.text_attributes -%}
-        <span{{ item.text_attributes }}>{{ item.text }}</span>
-      {%- else -%}
-        {{ item.text }}
-      {%- endif -%}
-    </li>
-  {%- endfor -%}
-</ul>
+{% if comment_reply %}
+  {{ _self.action(comment_reply.label, comment_reply.url, 'reply') }}
+{% endif %}
+{% if comment_edit %}
+  {{ _self.action(comment_edit.label, comment_edit.url, 'edit') }}
+{% endif %}
+{% if comment_delete %}
+  {{ _self.action(comment_delete.label, comment_delete.url, 'trash', 'danger') }}
+{% endif %}
+
+{% macro action(label, href, icon, color = 'primary') %}
+  {% embed 'laszlo:button' with {
+    attributes: create_attribute({
+      'class': ['comment-action'],
+    }),
+    variant: 'text',
+    color,
+    href,
+    label,
+    icon,
+    size: 'small',
+  } only %}
+    {% block start_icon %}
+      {% include 'laszlo:icon' with { icon } only %}
+    {% endblock %}
+    {% block children %}
+      {{ label }}
+    {% endblock %}
+  {% endembed %}
+{% endmacro %}