Separate Dataset buttons form metadata field

modules/quanthub_core/quanthub_core.module

@@ -124,6 +124,13 @@ function quanthub_core_theme() {
       ],
       'template' => 'powerbi-embed-formatter',
     ],
+    'dataset_buttons' => [
+      'variables' => [
+        'quanthub_urn' => NULL,
+        'langcode' => NULL,
+      ],
+      'template' => 'dataset-buttons',
+    ],
   ];
 }
 
@@ -279,3 +286,32 @@ function quanthub_core_language_switch_links_alter(array &$links, $type, Url $ur
     }
   }
 }
+
+/**
+ * Implements hook_entity_extra_field_info().
+ */
+function quanthub_core_entity_extra_field_info() {
+  $extra = [];
+
+  $extra['node']['dataset']['display']['dataset_buttons'] = [
+    'label' => t('Dataset Buttons'),
+    'description' => t('Download, Explore, and Metadata buttons'),
+    'weight' => 100,
+    'visible' => TRUE,
+  ];
+
+  return $extra;
+}
+
+/**
+ * Implements hook_ENTITY_TYPE_view().
+ */
+function quanthub_core_node_view(array &$build, $entity, $display, $view_mode) {
+  if ($entity->bundle() === 'dataset' && $display->getComponent('dataset_buttons')) {
+    $build['dataset_buttons'] = [
+      '#theme' => 'dataset_buttons',
+      '#quanthub_urn' => $entity->get('field_quanthub_urn')->value ?? '',
+      '#langcode' => \Drupal::languageManager()->getCurrentLanguage()->getId(),
+    ];
+  }
+}

modules/quanthub_core/templates/dataset-buttons.html.twig

@@ -0,0 +1,17 @@
+{#
+/**
+ * @file
+ * Minimal template for Dataset buttons.
+ *
+ * This template provides basic structure. Theme should override for styling.
+ *
+ */
+#}
+
+<div class="dataset-buttons">
+  <div class="dataset-buttons__download" data-urn="{{ quanthub_urn }}"></div>
+  <div class="dataset-buttons__explore">
+    <a href="/{{ langcode }}/explorer?urn={{ quanthub_urn }}">{{ 'Explore'|t }}</a>
+  </div>
+  <div class="dataset-buttons__metadata" data-urn="{{ quanthub_urn }}"></div>
+</div>

themes/quanthub_tailwindcss/templates/dataset-buttons.html.twig

@@ -0,0 +1,35 @@
+{#
+/**
+ * Template for Quanthub dataset buttons.
+ */
+#}
+
+{{ attach_library('quanthub_download_button/download-button') }}
+{{ attach_library('quanthub_metadata_button/metadata-button') }}
+
+<ul class="flex gap-4 py-4 border-bottom">
+  <li>
+    <div class="download_button_id"
+         data-btn-class="primary-button"
+         data-urn="{{ quanthub_urn }}">
+    </div>
+  </li>
+  <li>
+    <a href="/{{ langcode }}/explorer?urn={{ quanthub_urn }}"
+       class="secondary-button">
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
+           xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M8.00001 1.33333C4.32001 1.33333 1.33334 4.31999 1.33334 8C1.33334 11.68 4.32001 14.6667 8.00001 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8C14.6667 4.31999 11.68 1.33333 8.00001 1.33333ZM8.00001 13.3333C5.06001 13.3333 2.66668 10.94 2.66668 8C2.66668 5.06 5.06001 2.66666 8.00001 2.66666C10.94 2.66666 13.3333 5.06 13.3333 8C13.3333 10.94 10.94 13.3333 8.00001 13.3333ZM4.33334 11.6667L9.34001 9.34L11.6667 4.33333L6.66001 6.66L4.33334 11.6667ZM8.00001 7.26666C8.40668 7.26666 8.73334 7.59333 8.73334 8C8.73334 8.40666 8.40668 8.73333 8.00001 8.73333C7.59334 8.73333 7.26668 8.40666 7.26668 8C7.26668 7.59333 7.59334 7.26666 8.00001 7.26666Z"
+          fill="#424A9C"/>
+      </svg>
+      {{ '@explore'|t({'@explore': "Explore" }) }}
+    </a>
+  </li>
+  <li>
+    <div class="metadata_button_id"
+         data-btn-class="secondary-button"
+         data-urn="{{ quanthub_urn }}">
+    </div>
+  </li>
+</ul>

themes/quanthub_tailwindcss/templates/field/field--node--field-metadata--dataset--full.html.twig

@@ -38,9 +38,6 @@
  */
 #}
 
-{{ attach_library('quanthub_download_button/download-button') }}
-{{ attach_library('quanthub_metadata_button/metadata-button') }}
-
 {%
   set classes = [
     'field',
@@ -83,26 +80,3 @@
     {% endif %}
   </div>
 {% endif %}
-
-<ul class="flex gap-4 py-4 border-bottom">
-  <li>
-    <div class="download_button_id" data-btn-class="primary-button"
-         data-urn="{{ quanthub_urn }}"></div>
-  </li>
-  <li>
-    <a href="/{{ langcode }}/explorer?urn={{ quanthub_urn }}"
-       class="secondary-button">
-      <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
-           xmlns="http://www.w3.org/2000/svg">
-        <path
-          d="M8.00001 1.33333C4.32001 1.33333 1.33334 4.31999 1.33334 8C1.33334 11.68 4.32001 14.6667 8.00001 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8C14.6667 4.31999 11.68 1.33333 8.00001 1.33333ZM8.00001 13.3333C5.06001 13.3333 2.66668 10.94 2.66668 8C2.66668 5.06 5.06001 2.66666 8.00001 2.66666C10.94 2.66666 13.3333 5.06 13.3333 8C13.3333 10.94 10.94 13.3333 8.00001 13.3333ZM4.33334 11.6667L9.34001 9.34L11.6667 4.33333L6.66001 6.66L4.33334 11.6667ZM8.00001 7.26666C8.40668 7.26666 8.73334 7.59333 8.73334 8C8.73334 8.40666 8.40668 8.73333 8.00001 8.73333C7.59334 8.73333 7.26668 8.40666 7.26668 8C7.26668 7.59333 7.59334 7.26666 8.00001 7.26666Z"
-          fill="#424A9C" />
-      </svg>
-      {{ '@explore'|t({'@explore': "Explore" }) }}
-    </a>
-  </li>
-  <li>
-    <div class="metadata_button_id" data-btn-class="secondary-button"
-         data-urn="{{ quanthub_urn }}"></div>
-  </li>
-</ul>