Show plan badge in section headers if feature is not included

dashboard/src/components/Section.vue

@@ -6,6 +6,10 @@ defineProps({
     type: Boolean,
     default: true,
   },
+  titleBadge: {
+    type: String,
+    default: '',
+  },
 });
 
 </script>
@@ -13,7 +17,10 @@ defineProps({
 <template>
   <div class="section" :class="{ 'section-extra-padding': padding }">
     <h2 class="section-header">
-      <slot name="header-title">{{ title }}</slot>
+      <div>
+        <slot name="header-title">{{ title }}</slot>
+        <div class="section-header-title-badge" v-if="titleBadge">{{ titleBadge }}</div>
+      </div>
       <div><slot name="header-buttons"></slot></div>
     </h2>
     <hr class="section-divider"/>
@@ -46,6 +53,7 @@ defineProps({
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
+  align-items: center;
 }
 
 .section-divider {
@@ -73,4 +81,15 @@ defineProps({
   padding-right: 25px;
 }
 
+.section-header-title-badge {
+  display: inline-block;
+  font-size: 12px;
+  font-weight: 700;
+  color: white;
+  border-radius: 20px;
+  background-color: #00c383;
+  padding: 2px 10px;
+  margin-left: 10px;
+}
+
 </style>