Show subscription required dialog on section title badge click

dashboard/src/components/Section.vue

@@ -1,5 +1,7 @@
 <script setup>
 
+import { inject } from 'vue';
+
 defineProps({
   title: String,
   padding: {
@@ -12,6 +14,12 @@ defineProps({
   },
 });
 
+const subscriptionRequiredDialog = inject('subscriptionRequiredDialog');
+
+function onTitleBadge() {
+  subscriptionRequiredDialog.value.open();
+}
+
 </script>
 
 <template>
@@ -19,7 +27,7 @@ defineProps({
     <h2 class="section-header">
       <div>
         <slot name="header-title">{{ title }}</slot>
-        <div class="section-header-title-badge" v-if="titleBadge">{{ titleBadge }}</div>
+        <div class="section-header-title-badge" v-if="titleBadge" @click="onTitleBadge()">{{ titleBadge }}</div>
       </div>
       <div><slot name="header-buttons"></slot></div>
     </h2>
@@ -90,6 +98,7 @@ defineProps({
   background-color: #00c383;
   padding: 2px 10px;
   margin-left: 10px;
+  cursor: pointer;
 }
 
 </style>