Test some way of hiding feature sections if upgrade is required

dashboard/src/components/Section.vue

@@ -6,12 +6,16 @@ defineProps({
     type: Boolean,
     default: true,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 </script>
 
 <template>
-  <div class="section" :class="{ 'section-extra-padding': padding }">
+  <div class="section" :class="{ 'section-extra-padding': padding }" :disabled="disabled || null">
     <h2 class="section-header">
       <slot name="header-title">{{ title }}</slot>
       <div><slot name="header-buttons"></slot></div>
@@ -20,6 +24,9 @@ defineProps({
     <div class="section-body">
       <slot></slot>
     </div>
+    <div class="section-overlay">
+      <slot name="overlay"></slot>
+    </div>
   </div>
 </template>
 
@@ -27,6 +34,7 @@ defineProps({
 
 .section {
   margin-bottom: 30px;
+  position: relative;
 }
 
 .section-header {
@@ -72,4 +80,18 @@ defineProps({
   padding-right: 25px;
 }
 
+.section-overlay {
+  display: none;
+}
+
+.section[disabled] .section-overlay {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backdrop-filter: blur(2px);
+}
+
 </style>