[notifications] Make text clickable if link is present

src/boot/store.ts

@@ -1,9 +1,13 @@
-import { createPinia } from 'pinia';
+import { createPinia, Pinia } from 'pinia';
 import { boot } from 'quasar/wrappers';
 import { useMainStore } from 'src/stores';
+import { ref } from 'vue';
+
+export const pinia = ref<Pinia>();
 
 export default boot(({ app }) => {
-  app.use(createPinia());
+  pinia.value = createPinia();
+  app.use(pinia.value);
 
   const store = useMainStore();
   void store.init();

src/components/Notification.vue

@@ -1,7 +1,13 @@
 <template>
-  <q-card bordered class="row q-ma-xs q-pa-xs" style="position: relative">
+  <q-card
+    bordered
+    class="row q-ma-xs q-pa-xs"
+    style="position: relative; min-height: 3em"
+    :class="{ 'cursor-pointer': modelValue.link }"
+    @click="click"
+  >
     <div class="col-12 text-weight-light">{{ dateString }}</div>
-    <div :id="`ntfctn-${modelValue.id}`" class="col-12" @click="click">{{ modelValue.text }}</div>
+    <div :id="`ntfctn-${modelValue.id}`" class="col-12">{{ modelValue.text }}</div>
     <q-btn
       round
       dense
@@ -16,11 +22,11 @@
       v-if="modelValue.accept !== undefined"
       round
       dense
-      icon="close"
+      icon="check"
       size="sm"
       color="positive"
       class="q-ma-xs"
-      style="position: absolute; top: 50px; right: 0"
+      style="position: absolute; top: 0; right: 3em"
       @click="accept"
     />
   </q-card>
@@ -52,15 +58,15 @@ export default defineComponent({
     }
 
     function accept() {
-      if (props.modelValue.accept)
-        void props.modelValue.accept().then(() => emit('remove', props.modelValue.id));
+      if (typeof props.modelValue.accept === 'function')
+        void props.modelValue.accept().finally(() => emit('remove', props.modelValue.id));
       else emit('remove', props.modelValue.id);
     }
 
     function remove() {
-      if (props.modelValue.reject)
-        void props.modelValue.reject().then(() => emit('remove', props.modelValue.id));
-      emit('remove', props.modelValue.id);
+      if (typeof props.modelValue.reject === 'function')
+        void props.modelValue.reject().finally(() => emit('remove', props.modelValue.id));
+      else emit('remove', props.modelValue.id);
     }
 
     return { accept, click, dateString, remove };