Add initial hooks for subscription required dialog on unpaid or expired

dashboard/src/components/Headerbar.vue

@@ -7,6 +7,7 @@ import { Button, Popover, Icon } from 'pankow';
 import NotificationsModel from '../models/NotificationsModel.js';
 
 const props = defineProps(['config', 'profile', 'subscription']);
+const emits = defineEmits(['subscriptionRequired']);
 
 const notificationModel = NotificationsModel.create();
 const notificationButton = useTemplateRef('notificationButton');
@@ -52,6 +53,10 @@ async function refresh() {
   notifications.value = result;
 }
 
+function onSubscriptionRequired() {
+  emits('subscriptionRequired');
+}
+
 onMounted(async () => {
   if (props.profile.isAtLeastAdmin) await refresh();
 });
@@ -89,14 +94,9 @@ onMounted(async () => {
 
     <div style="flex-grow: 1;"></div>
 
-    <div v-show="profile.isAtLeastOwner && (subscription.plan.id === 'free' || subscription.plan.id === 'expired')" ng-click="openSubscriptionSetup()" style="cursor: pointer">
-      <span class="badge" ng-class="{'badge-danger': subscription.plan.id !== 'free', 'badge-success': subscription.plan.id === 'free' }">
-        {{ $t(subscription.plan.id === 'free' ? 'settings.appstoreAccount.subscriptionSetupAction' : 'settings.appstoreAccount.subscriptionReactivateAction') }}
-      </span>
-    </div>
-    <div v-show="!profile.isAtLeastOwner && subscription.plan.id === 'expired'">
-      <span class="badge badge-danger">Subscription Expired</span>
-    </div>
+    <!-- Warnings if subscription is expired or unpaid -->
+    <div v-if="profile.isAtLeastOwner && subscription.plan.id === 'expired'" class="headerbar-action subscription-expired" style="gap: 6px" @click="onSubscriptionRequired()">Subscription Expired</div>
+
     <div class="headerbar-action" style="gap: 6px" v-if="profile.isAtLeastAdmin" ref="notificationButton" @click="onOpenNotifications(notificationPopover, $event, notificationButton)"><Icon :icon="notifications.length ? 'fas fa-bell' : 'far fa-bell'"/> {{ notifications.length > 99 ? '99+' : notifications.length }}</div>
     <a class="headerbar-action"  v-if="profile.isAtLeastAdmin" href="#/support"><Icon icon="fa fa-question"/></a>
     <a class="headerbar-action" href="#/profile"><img :src="profile.avatarUrl" /> {{ profile.username }}</a>
@@ -155,4 +155,15 @@ onMounted(async () => {
   visibility: visible;
 }
 
+.subscription-expired {
+  background-color: var(--pankow-color-danger);
+  color: white;
+  border-radius: 20px;
+}
+
+.subscription-expired:hover {
+  color: white;
+  background-color: var(--pankow-color-danger-hover);
+}
+
 </style>