Initial move from angular shell to vue

dashboard/src/components/Headerbar.vue

@@ -0,0 +1,63 @@
+<script setup>
+
+const props = defineProps(['profile', 'subscription']);
+
+</script>
+
+<template>
+  <div class="headerbar">
+    <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>
+    <a v-show="profile.isAtLeastAdmin" href="#/notifications">
+      <i class="fas fa-bell" v-if="notificationCount"></i>
+      <i class="far fa-bell" v-else></i>
+      <span v-show="notificationCount">{{ notificationCount === 100 ? '100+' : notificationCount }}</span>
+    </a>
+    <a v-show="profile.isAtLeastAdmin" href="#/support">
+      <i class="fa fa-question fa-fw"></i>
+    </a>
+    <a href="#/profile">
+      <img :src="profile.avatarUrl" class="headerbar-avatar"/> {{ profile.username }}
+    </a>
+  </div>
+</template>
+
+<style scoped>
+
+.headerbar {
+  display: flex;
+  padding: 10px;
+  align-items: center;
+  gap: 15px;
+}
+
+.headerbar a {
+  display: flex;
+  align-items: center;
+  padding: 6px 15px;
+  border-radius: var(--pankow-border-radius);
+  color: var(--pankow-text-color);
+}
+
+.headerbar a:focus,
+.headerbar a:active,
+.headerbar a:hover {
+  text-decoration: none;
+  background-color: var(--pankow-color-background-hover);
+}
+
+.headerbar-avatar {
+  width: 32px;
+  height: 32px;
+  margin-right: 10px;
+  border-radius: var(--pankow-border-radius);
+}
+
+</style>