Worked on several new features:

- ProfilePictures for users are now pulled from the backend
- added a component for chat settings (WIP)
- added a loading screen when the backend is not available
- reworked the "add chat" feature
- started to implement the general send-message functionality

src/components/ChatSettingsComponent.vue

@@ -0,0 +1,83 @@
+<template>
+  <q-dialog v-bind:model-value="internalShowDialog" @update:model-value="closeDialog" style="overflow: auto;" full-width>
+    <q-card style="margin: 3rem 20rem;height: 80vh;padding: 20px;overflow: auto !important;">
+      <q-card-section class="row items-center q-pb-none">
+        <div class="text-h4">{{ props.chat!.displayName }}</div>
+        <q-space />
+        <q-btn icon="close" flat round dense v-close-popup />
+      </q-card-section>
+
+      <div class="grid-container">
+        <q-card-section>
+          <div class="text-h5">Mitglieder</div>
+          <table>
+            <tr v-for="user in props.chat!.members">
+              <td>
+                <ProfileCardComponent :user="user" :selected="false"></ProfileCardComponent>
+              </td>
+              <td v-if="user.id != userStore.user!.id">
+                <q-btn round flat icon="person_remove" style="color: darkred;" title="Nutzer entfernen"></q-btn>
+                <q-btn round flat icon="key" title="Nutzer zum Admin machen"></q-btn>
+              </td>
+            </tr>
+          </table>
+        </q-card-section>
+
+        <!-- Namen des Chats ändern -->
+        <q-card-section>
+          <div class="text-h5">Namen ändern</div>
+          <q-input filled v-model="props.chat!.displayName" maxlength="256" counter />
+        </q-card-section>
+
+        <q-card-section>
+          <div class="text-h5">Aktionen</div>
+          <q-btn class="deleteButton">Gruppenchat verlassen</q-btn>
+          <q-btn class="deleteButton">Grupepnchat löschen</q-btn>
+        </q-card-section>
+      </div>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+  import { computed, ref } from 'vue';
+  import ProfileCardComponent from './ProfileCardComponent.vue';
+import { useUserStore } from 'src/stores/user-store';
+
+  const showDialog = ref(true);
+  const userStore = useUserStore();
+
+  const emit = defineEmits(['update:showDialog', 'showModal']);
+  const props = defineProps({
+    showDialog: Boolean,
+    chat: Object
+  });
+
+  const internalShowDialog = computed({
+      get: () => props.showDialog,
+      set: (value) => emit('update:showDialog', value)
+  });
+
+  const closeDialog = () => {
+    emit('showModal', true);
+  }
+</script>
+
+<style scoped>
+  .deleteButton {
+    color:darkred;
+    border:2px solid darkred;
+    border-radius: 6px;
+  }
+
+  .grid-container {
+    display: grid;
+    grid-template-columns: auto auto;
+    padding: 10px;
+  }
+
+  .grid-container > div:nth-child(odd) {
+    margin-right: 50px;
+    min-width: 30vw;
+  }
+</style>