fix(widget) Cleanup widget and use more shared api functions

src/components/Widget.vue

@@ -1,18 +1,15 @@
 <template>
   <q-card style="text-align: center">
     <q-card-section class="row justify-center content-stretch">
-      <div v-if="avatar" class="col-4">
-        <div style="width: 100%; padding-bottom: 100%; position: relative">
-          <q-avatar style="position: absolute; top: 0; left: 0; width: 100%; height: 100%">
-            <q-img
-              v-if="!avatarError"
-              :src="api.defaults.baseURL + avatarLink"
-              @error="avatarError = true"
-            />
-            <q-img v-else src="no-image.svg" />
+      <div class="col-4">
+        <q-avatar>
+          <q-img :src="avatar" style="min-height: 100%; min-width: 100%">
+            <template #error>
+              <img src="no-image.svg" style="height: 100%"/>
+            </template>
+          </q-img>
         </q-avatar>
       </div>
-      </div>
       <div class="col-8">
         <span class="text-h6">Hallo {{ name }}</span
         ><br />
@@ -31,11 +28,11 @@
 </template>
 
 <script lang="ts">
-import { useMainStore, useUserStore, api } from '@flaschengeist/api';
+import { avatarURL, useMainStore, useUserStore } from '@flaschengeist/api';
 import { computed, defineComponent, onMounted, ref } from 'vue';
 
 export default defineComponent({
-  name: 'Greeting',
+  name: 'GreetingsWidget',
   setup() {
     const mainStore = useMainStore();
     const userStore = useUserStore();
@@ -43,14 +40,8 @@ export default defineComponent({
     // Ensure users are loaded,so we can query birthdays
     onMounted(() => userStore.getUsers(false));
 
-    const avatar = ref(true);
     const name = ref(mainStore.currentUser.firstname);
-    const avatarLink = ref(mainStore.currentUser.avatar_url);
-    const avatarError = ref(false);
-
-    function error() {
-      avatar.value = false;
-    }
+    const avatar = computed(() => avatarURL(mainStore.currentUser));
 
     function userHasBirthday(user: FG.User) {
       const today = new Date();
@@ -71,7 +62,7 @@ export default defineComponent({
         .filter((user) => user.userid !== mainStore.currentUser.userid)
     );
 
-    return { avatar, avatarLink, error, name, hasBirthday, birthday, api, avatarError };
+    return { avatar, name, hasBirthday, birthday };
   },
 });
 </script>