From 138b8517373aec69b4ec37659dd694cea95c0334 Mon Sep 17 00:00:00 2001
From: entermex <max@infinity.labs.ooo>
Date: Fri, 14 Jul 2023 13:05:07 +0200
Subject: [PATCH 01/38] Change color red to green on cancel buttons of post and
 comments

---
 webapp/components/CommentForm/CommentForm.vue           | 1 -
 webapp/components/ContributionForm/ContributionForm.vue | 1 -
 2 files changed, 2 deletions(-)

diff --git a/webapp/components/CommentForm/CommentForm.vue b/webapp/components/CommentForm/CommentForm.vue
index 5f6a2420d..6d9b59de6 100644
--- a/webapp/components/CommentForm/CommentForm.vue
+++ b/webapp/components/CommentForm/CommentForm.vue
@@ -8,7 +8,6 @@
             :disabled="disabled && !update"
             @click="handleCancel"
             data-test="cancel-button"
-            danger
           >
             {{ $t('actions.cancel') }}
           </base-button>
diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index 0067dab72..261c1d28d 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -173,7 +173,6 @@
               data-test="cancel-button"
               :disabled="loading"
               @click="$router.back()"
-              danger
             >
               {{ $t('actions.cancel') }}
             </base-button>

From 0b96388a42cc77bbf306f24a71ab3e8b61d0b031 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 18 Jul 2023 11:47:05 +0200
Subject: [PATCH 02/38] Remove '*.js' on imports in 'Editor.vue'

---
 webapp/components/Editor/Editor.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/webapp/components/Editor/Editor.vue b/webapp/components/Editor/Editor.vue
index cf0fd710b..8bc0a04d3 100644
--- a/webapp/components/Editor/Editor.vue
+++ b/webapp/components/Editor/Editor.vue
@@ -28,10 +28,10 @@ import { replace, build } from 'xregexp/xregexp-all.js'
 
 import * as key from '../../constants/keycodes'
 import { HASHTAG, MENTION } from '../../constants/editor'
-import defaultExtensions from './defaultExtensions.js'
-import EventHandler from './plugins/eventHandler.js'
-import Hashtag from './nodes/Hashtag.js'
-import Mention from './nodes/Mention.js'
+import defaultExtensions from './defaultExtensions'
+import EventHandler from './plugins/eventHandler'
+import Hashtag from './nodes/Hashtag'
+import Mention from './nodes/Mention'
 import MenuBar from './MenuBar'
 import ContextMenu from './ContextMenu'
 import SuggestionList from './SuggestionList'

From 85e68795a3a422f492e863252f14957fc6fc18af Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Wed, 19 Jul 2023 10:09:04 +0200
Subject: [PATCH 03/38] [fix] all group related pages are now under one route,
 so link highlighting works

---
 webapp/components/ContentMenu/GroupContentMenu.vue            | 4 ++--
 webapp/components/Group/GroupTeaser.vue                       | 2 +-
 webapp/components/Notification/Notification.vue               | 2 +-
 webapp/components/NotificationsTable/NotificationsTable.vue   | 2 +-
 webapp/components/UserTeaser/UserTeaser.vue                   | 2 +-
 webapp/components/generic/SearchableInput/SearchableInput.vue | 2 +-
 webapp/pages/{group => groups}/_id.spec.js                    | 0
 webapp/pages/{group => groups}/_id.vue                        | 2 +-
 webapp/pages/{group => groups}/_id/_slug.spec.js              | 0
 webapp/pages/{group => groups}/_id/_slug.vue                  | 0
 webapp/pages/{group => groups}/create.vue                     | 2 +-
 webapp/pages/{group => groups}/edit/_id.vue                   | 4 ++--
 webapp/pages/{group => groups}/edit/_id/index.vue             | 2 +-
 webapp/pages/{group => groups}/edit/_id/members.vue           | 0
 webapp/pages/{groups.spec.js => groups/index.spec.js}         | 2 +-
 webapp/pages/{groups.vue => groups/index.vue}                 | 2 +-
 16 files changed, 14 insertions(+), 14 deletions(-)
 rename webapp/pages/{group => groups}/_id.spec.js (100%)
 rename webapp/pages/{group => groups}/_id.vue (96%)
 rename webapp/pages/{group => groups}/_id/_slug.spec.js (100%)
 rename webapp/pages/{group => groups}/_id/_slug.vue (100%)
 rename webapp/pages/{group => groups}/create.vue (98%)
 rename webapp/pages/{group => groups}/edit/_id.vue (93%)
 rename webapp/pages/{group => groups}/edit/_id/index.vue (97%)
 rename webapp/pages/{group => groups}/edit/_id/members.vue (100%)
 rename webapp/pages/{groups.spec.js => groups/index.spec.js} (94%)
 rename webapp/pages/{groups.vue => groups/index.vue} (98%)

diff --git a/webapp/components/ContentMenu/GroupContentMenu.vue b/webapp/components/ContentMenu/GroupContentMenu.vue
index 7a7737320..1ca1b5b33 100644
--- a/webapp/components/ContentMenu/GroupContentMenu.vue
+++ b/webapp/components/ContentMenu/GroupContentMenu.vue
@@ -58,14 +58,14 @@ export default {
         routes.push({
           label: this.$t('group.contentMenu.visitGroupPage'),
           icon: 'home',
-          name: 'group-id-slug',
+          path: `/groups/${this.group.id}`,
           params: { id: this.group.id, slug: this.group.slug },
         })
       }
       if (this.group.myRole === 'owner') {
         routes.push({
           label: this.$t('admin.settings.name'),
-          path: `/group/edit/${this.group.id}`,
+          path: `/groups/edit/${this.group.id}`,
           icon: 'edit',
         })
       }
diff --git a/webapp/components/Group/GroupTeaser.vue b/webapp/components/Group/GroupTeaser.vue
index 791845c75..b75036057 100644
--- a/webapp/components/Group/GroupTeaser.vue
+++ b/webapp/components/Group/GroupTeaser.vue
@@ -1,7 +1,7 @@
 <template>
   <nuxt-link
     class="group-teaser"
-    :to="{ name: 'group-id-slug', params: { id: group.id, slug: group.slug } }"
+    :to="{ name: 'groups-id-slug', params: { id: group.id, slug: group.slug } }"
   >
     <base-card
       :class="{
diff --git a/webapp/components/Notification/Notification.vue b/webapp/components/Notification/Notification.vue
index 9b70da794..a657b10ba 100644
--- a/webapp/components/Notification/Notification.vue
+++ b/webapp/components/Notification/Notification.vue
@@ -9,7 +9,7 @@
     <p class="description">{{ $t(`notifications.reason.${notification.reason}`) }}</p>
     <nuxt-link
       class="link"
-      :to="{ name: isGroup ? 'group-id-slug' : 'post-id-slug', params, ...hashParam }"
+      :to="{ name: isGroup ? 'groups-id-slug' : 'post-id-slug', params, ...hashParam }"
       @click.native="$emit('read')"
     >
       <base-card wideContent>
diff --git a/webapp/components/NotificationsTable/NotificationsTable.vue b/webapp/components/NotificationsTable/NotificationsTable.vue
index 41d593a23..9ff106e62 100644
--- a/webapp/components/NotificationsTable/NotificationsTable.vue
+++ b/webapp/components/NotificationsTable/NotificationsTable.vue
@@ -65,7 +65,7 @@
                     class="notification-mention-post"
                     :class="{ 'notification-status': notification.read }"
                     :to="{
-                      name: isGroup(notification.from) ? 'group-id-slug' : 'post-id-slug',
+                      name: isGroup(notification.from) ? 'groups-id-slug' : 'post-id-slug',
                       params: params(notification.from),
                       hash: hashParam(notification.from),
                     }"
diff --git a/webapp/components/UserTeaser/UserTeaser.vue b/webapp/components/UserTeaser/UserTeaser.vue
index 9fa3252ff..a82b91039 100644
--- a/webapp/components/UserTeaser/UserTeaser.vue
+++ b/webapp/components/UserTeaser/UserTeaser.vue
@@ -96,7 +96,7 @@ export default {
     groupLink() {
       const { id, slug } = this.group
       if (!(id && slug)) return ''
-      return { name: 'group-id-slug', params: { slug, id } }
+      return { name: 'groups-id-slug', params: { slug, id } }
     },
     groupSlug() {
       const { slug } = this.group || {}
diff --git a/webapp/components/generic/SearchableInput/SearchableInput.vue b/webapp/components/generic/SearchableInput/SearchableInput.vue
index b0e813b45..d08655893 100644
--- a/webapp/components/generic/SearchableInput/SearchableInput.vue
+++ b/webapp/components/generic/SearchableInput/SearchableInput.vue
@@ -148,7 +148,7 @@ export default {
         case 'User':
           return 'profile-id-slug'
         case 'Group':
-          return 'group-id-slug'
+          return 'groups-id-slug'
         default:
           return null
       }
diff --git a/webapp/pages/group/_id.spec.js b/webapp/pages/groups/_id.spec.js
similarity index 100%
rename from webapp/pages/group/_id.spec.js
rename to webapp/pages/groups/_id.spec.js
diff --git a/webapp/pages/group/_id.vue b/webapp/pages/groups/_id.vue
similarity index 96%
rename from webapp/pages/group/_id.vue
rename to webapp/pages/groups/_id.vue
index d743633d1..ab8f3c41e 100644
--- a/webapp/pages/group/_id.vue
+++ b/webapp/pages/groups/_id.vue
@@ -24,7 +24,7 @@ const options = {
     }
   `,
   message: 'error-pages.group-not-found',
-  path: 'group',
+  path: 'groups',
 }
 const persistentLinks = PersistentLinks(options)
 
diff --git a/webapp/pages/group/_id/_slug.spec.js b/webapp/pages/groups/_id/_slug.spec.js
similarity index 100%
rename from webapp/pages/group/_id/_slug.spec.js
rename to webapp/pages/groups/_id/_slug.spec.js
diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/groups/_id/_slug.vue
similarity index 100%
rename from webapp/pages/group/_id/_slug.vue
rename to webapp/pages/groups/_id/_slug.vue
diff --git a/webapp/pages/group/create.vue b/webapp/pages/groups/create.vue
similarity index 98%
rename from webapp/pages/group/create.vue
rename to webapp/pages/groups/create.vue
index ebdbbe37c..8dd661d8d 100644
--- a/webapp/pages/group/create.vue
+++ b/webapp/pages/groups/create.vue
@@ -59,7 +59,7 @@ export default {
         })
         this.$toast.success(this.$t('group.groupCreated'))
         this.$router.history.push({
-          name: 'group-id-slug',
+          name: 'groups-id-slug',
           params: { id: responseId, slug: responseSlug },
         })
       } catch (error) {
diff --git a/webapp/pages/group/edit/_id.vue b/webapp/pages/groups/edit/_id.vue
similarity index 93%
rename from webapp/pages/group/edit/_id.vue
rename to webapp/pages/groups/edit/_id.vue
index 7a0f9d051..57c7d9f6a 100644
--- a/webapp/pages/group/edit/_id.vue
+++ b/webapp/pages/groups/edit/_id.vue
@@ -33,11 +33,11 @@ export default {
       return [
         {
           name: this.$t('group.general'),
-          path: `/group/edit/${this.group.id}`,
+          path: `/groups/edit/${this.group.id}`,
         },
         {
           name: this.$t('group.members'),
-          path: `/group/edit/${this.group.id}/members`,
+          path: `/groups/edit/${this.group.id}/members`,
         },
       ]
     },
diff --git a/webapp/pages/group/edit/_id/index.vue b/webapp/pages/groups/edit/_id/index.vue
similarity index 97%
rename from webapp/pages/group/edit/_id/index.vue
rename to webapp/pages/groups/edit/_id/index.vue
index e3c934dc5..70807b338 100644
--- a/webapp/pages/group/edit/_id/index.vue
+++ b/webapp/pages/groups/edit/_id/index.vue
@@ -60,7 +60,7 @@ export default {
         })
         this.$toast.success(this.$t('group.updatedGroup'))
         this.$router.history.push({
-          name: 'group-id-slug',
+          name: 'groups-id-slug',
           params: { id: responseId, slug: responseSlug },
         })
       } catch (error) {
diff --git a/webapp/pages/group/edit/_id/members.vue b/webapp/pages/groups/edit/_id/members.vue
similarity index 100%
rename from webapp/pages/group/edit/_id/members.vue
rename to webapp/pages/groups/edit/_id/members.vue
diff --git a/webapp/pages/groups.spec.js b/webapp/pages/groups/index.spec.js
similarity index 94%
rename from webapp/pages/groups.spec.js
rename to webapp/pages/groups/index.spec.js
index 3761f7ec2..ecb28c2c9 100644
--- a/webapp/pages/groups.spec.js
+++ b/webapp/pages/groups/index.spec.js
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import groups from './groups.vue'
+import groups from './index.vue'
 
 const localVue = global.localVue
 
diff --git a/webapp/pages/groups.vue b/webapp/pages/groups/index.vue
similarity index 98%
rename from webapp/pages/groups.vue
rename to webapp/pages/groups/index.vue
index 52366d0af..13002859b 100644
--- a/webapp/pages/groups.vue
+++ b/webapp/pages/groups/index.vue
@@ -7,7 +7,7 @@
     <ds-space>
       <!-- create group -->
       <ds-space centered>
-        <nuxt-link :to="{ name: 'group-create' }">
+        <nuxt-link :to="{ name: 'groups-create' }">
           <base-button
             class="group-add-button"
             icon="plus"

From 9f8f2635ab8516171f73f25c5bd8c81dbf4cb8ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 19 Jul 2023 12:19:45 +0200
Subject: [PATCH 04/38] Fix linting

---
 webapp/components/ContributionForm/ContributionForm.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index 261c1d28d..b595357f9 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -169,11 +169,7 @@
           </ds-flex-item>
           <ds-flex-item width="0.15" />
           <ds-flex-item class="action-buttons-group" width="2">
-            <base-button
-              data-test="cancel-button"
-              :disabled="loading"
-              @click="$router.back()"
-            >
+            <base-button data-test="cancel-button" :disabled="loading" @click="$router.back()">
               {{ $t('actions.cancel') }}
             </base-button>
             <base-button type="submit" icon="check" :loading="loading" :disabled="errors" filled>

From 5ecf6a7fee917cbb5e8fdd59cbdd55818fff0c43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 19 Jul 2023 12:31:52 +0200
Subject: [PATCH 05/38] Change cancel button in 'MySomethingList' from danger
 to green

---
 .../_new/features/MySomethingList/MySomethingList.vue           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/_new/features/MySomethingList/MySomethingList.vue b/webapp/components/_new/features/MySomethingList/MySomethingList.vue
index e4f625c11..5d904675e 100644
--- a/webapp/components/_new/features/MySomethingList/MySomethingList.vue
+++ b/webapp/components/_new/features/MySomethingList/MySomethingList.vue
@@ -56,7 +56,7 @@
         >
           {{ isEditing ? $t('actions.save') : texts.addButton }}
         </base-button>
-        <base-button v-if="isEditing" id="cancel" danger @click="handleCancel()">
+        <base-button v-if="isEditing" id="cancel" @click="handleCancel()">
           {{ $t('actions.cancel') }}
         </base-button>
       </ds-space>

From a114b8a12c3778798b91565fdb88fff815a06c05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 19 Jul 2023 14:06:38 +0200
Subject: [PATCH 06/38] Give the chat plus button a function and show hide the
 user search

---
 webapp/components/Chat/Chat.vue            | 11 ++++++++---
 webapp/components/Group/AddGroupMember.vue |  1 +
 webapp/pages/chat.vue                      | 17 +++++++++++++++--
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue
index d7864ebef..c02165248 100644
--- a/webapp/components/Chat/Chat.vue
+++ b/webapp/components/Chat/Chat.vue
@@ -19,12 +19,13 @@
         show-audio="false"
         :styles="JSON.stringify(computedChatStyle)"
         :show-footer="true"
-        @send-message="sendMessage($event.detail[0])"
-        @fetch-messages="fetchMessages($event.detail[0])"
-        @fetch-more-rooms="fetchRooms"
         :responsive-breakpoint="responsiveBreakpoint"
         :single-room="singleRoom"
         show-reaction-emojis="false"
+        @send-message="sendMessage($event.detail[0])"
+        @fetch-messages="fetchMessages($event.detail[0])"
+        @fetch-more-rooms="fetchRooms"
+        @add-room="addRoom"
         @show-demo-options="showDemoOptions = $event"
       >
         <div slot="menu-icon" @click.prevent.stop="$emit('close-single-room', true)">
@@ -361,6 +362,10 @@ export default {
       if (!fullname) return
       return fullname.match(/\b\w/g).join('').substring(0, 3).toUpperCase()
     },
+
+    addRoom() {
+      this.$emit('open-user-search')
+    }
   },
 }
 </script>
diff --git a/webapp/components/Group/AddGroupMember.vue b/webapp/components/Group/AddGroupMember.vue
index ff049ca4d..8e66c7be2 100644
--- a/webapp/components/Group/AddGroupMember.vue
+++ b/webapp/components/Group/AddGroupMember.vue
@@ -49,6 +49,7 @@
     </ds-space>
   </div>
 </template>
+
 <script>
 import { changeGroupMemberRoleMutation } from '~/graphql/groups.js'
 import { searchUsers } from '~/graphql/Search.js'
diff --git a/webapp/pages/chat.vue b/webapp/pages/chat.vue
index 920cbabe9..f28d3a880 100644
--- a/webapp/pages/chat.vue
+++ b/webapp/pages/chat.vue
@@ -1,16 +1,29 @@
 <template>
   <div>
     <ds-heading tag="h1">{{ $t('chat.page.headline') }}</ds-heading>
-    <chat :roomId="getShowChat.showChat ? getShowChat.roomID : null" />
+    <add-group-member
+      v-if="showUserSearch"
+      :groupId="0"
+      :groupMembers="[]"
+      @loadGroupMembers="null"
+    />
+    <ds-space margin-bottom="small" />
+    <chat :roomId="getShowChat.showChat ? getShowChat.roomID : null" @open-user-search="showUserSearch = !showUserSearch" />
   </div>
 </template>
 
 <script>
 import { mapGetters, mapMutations } from 'vuex'
+import AddGroupMember from '~/components/Group/AddGroupMember'
 import Chat from '../components/Chat/Chat.vue'
 
 export default {
-  components: { Chat },
+  components: { AddGroupMember, Chat },
+  data() {
+    return {
+      showUserSearch: false,
+    }
+  },
   mounted() {
     this.showChat({ showChat: false, roomID: null })
   },

From ffe51a0743cb9a586ba5b07a09f932ba89411f6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 19 Jul 2023 15:48:05 +0200
Subject: [PATCH 07/38] Separate 'ds-select' of 'AddGroupMember' into separate
 component 'SelectUserSearch'

---
 webapp/components/Chat/Chat.vue               |   2 +-
 webapp/components/Group/AddGroupMember.vue    |  94 ++-------------
 .../SelectUserSearch/SelectUserSearch.vue     | 109 ++++++++++++++++++
 webapp/pages/chat.vue                         |  10 +-
 4 files changed, 128 insertions(+), 87 deletions(-)
 create mode 100644 webapp/components/generic/SelectUserSearch/SelectUserSearch.vue

diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue
index c02165248..fccaee5b8 100644
--- a/webapp/components/Chat/Chat.vue
+++ b/webapp/components/Chat/Chat.vue
@@ -365,7 +365,7 @@ export default {
 
     addRoom() {
       this.$emit('open-user-search')
-    }
+    },
   },
 }
 </script>
diff --git a/webapp/components/Group/AddGroupMember.vue b/webapp/components/Group/AddGroupMember.vue
index 8e66c7be2..2cb71f011 100644
--- a/webapp/components/Group/AddGroupMember.vue
+++ b/webapp/components/Group/AddGroupMember.vue
@@ -3,33 +3,7 @@
     <h2 class="title">{{ $t('group.addUser') }}</h2>
     <ds-space margin-bottom="small" />
     <ds-space>
-      <ds-select
-        type="search"
-        icon="search"
-        label-prop="id"
-        v-model="query"
-        :id="id"
-        :icon-right="null"
-        :options="users"
-        :loading="$apollo.queries.searchUsers.loading"
-        :filter="(item) => item"
-        :no-options-available="$t('group.addUserNoOptions')"
-        :auto-reset-search="true"
-        :placeholder="$t('group.addUserPlaceholder')"
-        @focus.capture.native="onFocus"
-        @input.native="handleInput"
-        @keyup.enter.native="onEnter"
-        @keyup.delete.native="onDelete"
-        @keyup.esc.native="clear"
-        @blur.capture.native="onBlur"
-        @input.exact="onSelect"
-      >
-        <template #option="{ option }">
-          <p>
-            <user-teaser :user="option" :showPopover="false" :linkToProfile="false" />
-          </p>
-        </template>
-      </ds-select>
+      <select-user-search :id="id" ref="selectUserSearch" @select-user="selectUser" />
       <ds-modal
         v-if="isOpen"
         force
@@ -52,14 +26,14 @@
 
 <script>
 import { changeGroupMemberRoleMutation } from '~/graphql/groups.js'
-import { searchUsers } from '~/graphql/Search.js'
+import SelectUserSearch from '~/components/generic/SelectUserSearch/SelectUserSearch'
 import UserTeaser from '~/components/UserTeaser/UserTeaser.vue'
-import { isEmpty } from 'lodash'
 
 export default {
   name: 'AddGroupMember',
   components: {
     UserTeaser,
+    SelectUserSearch,
   },
   props: {
     groupId: {
@@ -73,62 +47,34 @@ export default {
   },
   data() {
     return {
-      users: [],
       id: 'search-user-to-add-to-group',
-      query: '',
       user: {},
       isOpen: false,
     }
   },
-  computed: {
-    startSearch() {
-      return this.query && this.query.length > 3
-    },
-  },
   methods: {
     cancelModal() {
-      this.clear()
+      this.$refs.selectUserSearch.clear()
       this.isOpen = false
     },
     closeModal() {
-      this.clear()
+      this.$refs.selectUserSearch.clear()
       this.isOpen = false
     },
     confirmModal() {
       this.addMemberToGroup()
       this.isOpen = false
-      this.clear()
+      this.$refs.selectUserSearch.clear()
     },
-    onFocus() {},
-    onBlur() {
-      this.query = ''
-    },
-    handleInput(event) {
-      this.query = event.target ? event.target.value.trim() : ''
-    },
-    onDelete(event) {
-      const value = event.target ? event.target.value.trim() : ''
-      if (isEmpty(value)) {
-        this.clear()
-      } else {
-        this.handleInput(event)
-      }
-    },
-    clear() {
-      this.query = ''
-      this.user = {}
-      this.users = []
-    },
-    onSelect(item) {
-      this.user = item
+    selectUser(user) {
+      this.user = user
       if (this.groupMembers.find((member) => member.id === this.user.id)) {
         this.$toast.error(this.$t('group.errors.userAlreadyMember', { name: this.user.name }))
-        this.clear()
+        this.$refs.selectUserSearch.clear()
         return
       }
       this.isOpen = true
     },
-    onEnter() {},
     async addMemberToGroup() {
       const newRole = 'usual'
       const username = this.user.name
@@ -149,29 +95,9 @@ export default {
       }
     },
   },
-  apollo: {
-    searchUsers: {
-      query() {
-        return searchUsers
-      },
-      variables() {
-        return {
-          query: this.query,
-          firstUsers: 5,
-          usersOffset: 0,
-        }
-      },
-      skip() {
-        return !this.startSearch
-      },
-      update({ searchUsers }) {
-        this.users = searchUsers.users
-      },
-      fetchPolicy: 'cache-and-network',
-    },
-  },
 }
 </script>
+
 <style lang="scss">
 .add-group-member {
   background-color: white;
diff --git a/webapp/components/generic/SelectUserSearch/SelectUserSearch.vue b/webapp/components/generic/SelectUserSearch/SelectUserSearch.vue
new file mode 100644
index 000000000..effa185f3
--- /dev/null
+++ b/webapp/components/generic/SelectUserSearch/SelectUserSearch.vue
@@ -0,0 +1,109 @@
+<template>
+  <ds-select
+    class="select-user-search"
+    type="search"
+    icon="search"
+    label-prop="id"
+    v-model="query"
+    :id="id"
+    :icon-right="null"
+    :options="users"
+    :loading="$apollo.queries.searchUsers.loading"
+    :filter="(item) => item"
+    :no-options-available="$t('group.addUserNoOptions')"
+    :auto-reset-search="true"
+    :placeholder="$t('group.addUserPlaceholder')"
+    @focus.capture.native="onFocus"
+    @input.native="handleInput"
+    @keyup.enter.native="onEnter"
+    @keyup.delete.native="onDelete"
+    @keyup.esc.native="clear"
+    @blur.capture.native="onBlur"
+    @input.exact="onSelect"
+  >
+    <template #option="{ option }">
+      <p>
+        <user-teaser :user="option" :showPopover="false" :linkToProfile="false" />
+      </p>
+    </template>
+  </ds-select>
+</template>
+
+<script>
+import { isEmpty } from 'lodash'
+import { searchUsers } from '~/graphql/Search.js'
+import UserTeaser from '~/components/UserTeaser/UserTeaser.vue'
+
+export default {
+  name: 'SelectUserSearch',
+  components: {
+    UserTeaser,
+  },
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      users: [],
+      query: '',
+      user: {},
+    }
+  },
+  computed: {
+    startSearch() {
+      return this.query && this.query.length > 3
+    },
+  },
+  methods: {
+    onFocus() {},
+    onBlur() {
+      this.query = ''
+    },
+    handleInput(event) {
+      this.query = event.target ? event.target.value.trim() : ''
+    },
+    onDelete(event) {
+      const value = event.target ? event.target.value.trim() : ''
+      if (isEmpty(value)) {
+        this.clear()
+      } else {
+        this.handleInput(event)
+      }
+    },
+    clear() {
+      this.query = ''
+      this.user = {}
+      this.users = []
+    },
+    onSelect(item) {
+      this.user = item
+      this.$emit('select-user', this.user)
+    },
+    onEnter() {},
+  },
+  apollo: {
+    searchUsers: {
+      query() {
+        return searchUsers
+      },
+      variables() {
+        return {
+          query: this.query,
+          firstUsers: 5,
+          usersOffset: 0,
+        }
+      },
+      skip() {
+        return !this.startSearch
+      },
+      update({ searchUsers }) {
+        this.users = searchUsers.users
+      },
+      fetchPolicy: 'cache-and-network',
+    },
+  },
+}
+</script>
diff --git a/webapp/pages/chat.vue b/webapp/pages/chat.vue
index f28d3a880..8d9d55e46 100644
--- a/webapp/pages/chat.vue
+++ b/webapp/pages/chat.vue
@@ -8,7 +8,10 @@
       @loadGroupMembers="null"
     />
     <ds-space margin-bottom="small" />
-    <chat :roomId="getShowChat.showChat ? getShowChat.roomID : null" @open-user-search="showUserSearch = !showUserSearch" />
+    <chat
+      :roomId="getShowChat.showChat ? getShowChat.roomID : null"
+      @open-user-search="showUserSearch = !showUserSearch"
+    />
   </div>
 </template>
 
@@ -18,7 +21,10 @@ import AddGroupMember from '~/components/Group/AddGroupMember'
 import Chat from '../components/Chat/Chat.vue'
 
 export default {
-  components: { AddGroupMember, Chat },
+  components: {
+    AddGroupMember,
+    Chat,
+  },
   data() {
     return {
       showUserSearch: false,

From 5bae7cbd949045ad08080aa1053dce959f051cb7 Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Wed, 19 Jul 2023 15:54:31 +0200
Subject: [PATCH 08/38] [feature] open chat page via link from single chat
 window and open the used room after loading

---
 webapp/components/Chat/Chat.vue | 59 +++++++++++++++++++++++++++------
 webapp/store/chat.js            |  3 ++
 2 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue
index d7864ebef..f947f4886 100644
--- a/webapp/components/Chat/Chat.vue
+++ b/webapp/components/Chat/Chat.vue
@@ -4,7 +4,7 @@
       <vue-advanced-chat
         :theme="theme"
         :current-user-id="currentUser.id"
-        :room-id="!singleRoom ? roomId : null"
+        :room-id="computedRoomId"
         :template-actions="JSON.stringify(templatesText)"
         :menu-actions="JSON.stringify(menuActions)"
         :text-messages="JSON.stringify(textMessages)"
@@ -27,10 +27,28 @@
         show-reaction-emojis="false"
         @show-demo-options="showDemoOptions = $event"
       >
-        <div slot="menu-icon" @click.prevent.stop="$emit('close-single-room', true)">
-          <div v-if="singleRoom">
-            <ds-icon name="close"></ds-icon>
-          </div>
+        <div
+          v-if="selectedRoom && selectedRoom.roomId"
+          slot="room-options"
+          class="chat-room-options"
+        >
+          <ds-flex v-if="singleRoom">
+            <ds-flex-item centered class="single-chat-bubble">
+              <nuxt-link :to="{ name: 'chat' }">
+                <base-icon name="chat-bubble" />
+              </nuxt-link>
+            </ds-flex-item>
+            <ds-flex-item centered>
+              <div
+                class="vac-svg-button vac-room-options"
+                @click="$emit('close-single-room', true)"
+              >
+                <slot name="menu-icon">
+                  <ds-icon name="close" />
+                </slot>
+              </div>
+            </ds-flex-item>
+          </ds-flex>
         </div>
 
         <div slot="room-header-avatar">
@@ -89,11 +107,6 @@ export default {
   data() {
     return {
       menuActions: [
-        // NOTE: if menuActions is empty, the related slot is not shown
-        {
-          name: 'dummyItem',
-          title: 'Just a dummy item',
-        },
         /*
             {
             name: 'inviteUser',
@@ -197,10 +210,24 @@ export default {
   computed: {
     ...mapGetters({
       currentUser: 'auth/user',
+      getStoreRoomId: 'chat/roomID',
     }),
     computedChatStyle() {
       return chatStyle.STYLE.light
     },
+    computedRoomId() {
+      let roomId = null
+
+      if (!this.singleRoom) {
+        roomId = this.roomId
+
+        if (this.getStoreRoomId.roomId) {
+          roomId = this.getStoreRoomId.roomId
+        }
+      }
+
+      return roomId
+    },
     textMessages() {
       return {
         ROOMS_EMPTY: this.$t('chat.roomsEmpty'),
@@ -221,6 +248,7 @@ export default {
   methods: {
     ...mapMutations({
       commitUnreadRoomCount: 'chat/UPDATE_ROOM_COUNT',
+      commitRoomIdFromSingleRoom: 'chat/UPDATE_ROOM_ID',
     }),
     async fetchRooms({ room } = {}) {
       this.roomsLoaded = false
@@ -253,6 +281,13 @@ export default {
           this.roomsLoaded = true
         }
         this.roomPage += 1
+
+        if (this.singleRoom && this.rooms.length > 0) {
+          this.commitRoomIdFromSingleRoom(this.rooms[0].roomId)
+        } else if (this.getStoreRoomId.roomId) {
+          // reset store room id
+          this.commitRoomIdFromSingleRoom(null)
+        }
       } catch (error) {
         this.rooms = []
         this.$toast.error(error.message)
@@ -389,4 +424,8 @@ body {
     transform: translate(-50%, -50%);
   }
 }
+
+.single-chat-bubble {
+  margin-right: 1em;
+}
 </style>
diff --git a/webapp/store/chat.js b/webapp/store/chat.js
index ed6b5256c..1e0b496ac 100644
--- a/webapp/store/chat.js
+++ b/webapp/store/chat.js
@@ -14,6 +14,9 @@ export const mutations = {
   UPDATE_ROOM_COUNT(state, count) {
     state.unreadRoomCount = count
   },
+  UPDATE_ROOM_ID(state, roomid) {
+    state.roomId = roomid || null
+  },
 }
 
 export const getters = {

From 26282c67b7bd6d44be3334342d6269068471bf4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 19 Jul 2023 16:41:23 +0200
Subject: [PATCH 09/38] =?UTF-8?q?Make=20user=20search=20in=20chats=20funct?=
 =?UTF-8?q?ion=20=E2=80=93=20second=20step?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Chat/AddChatRoomByUserSearch.vue          | 110 ++++++++++++++++++
 webapp/components/Chat/Chat.vue               |   2 +-
 webapp/pages/chat.vue                         |  18 +--
 3 files changed, 122 insertions(+), 8 deletions(-)
 create mode 100644 webapp/components/Chat/AddChatRoomByUserSearch.vue

diff --git a/webapp/components/Chat/AddChatRoomByUserSearch.vue b/webapp/components/Chat/AddChatRoomByUserSearch.vue
new file mode 100644
index 000000000..b5cf0fd4c
--- /dev/null
+++ b/webapp/components/Chat/AddChatRoomByUserSearch.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="add-chat-room-by-user-search">
+    <!-- Wolle -->
+    <h2 class="title">{{ $t('group.addUser') }}</h2>
+    <ds-space margin-bottom="small" />
+    <ds-space>
+      <select-user-search :id="id" ref="selectUserSearch" @select-user="selectUser" />
+      <!-- <ds-modal
+        v-if="isOpen"
+        force
+        extended
+        :confirm-label="$t('group.modal.confirm')"
+        :cancel-label="$t('group.modal.cancel')"
+        :title="$t('group.modal.confirmAddGroupMemberTitle')"
+        v-model="isOpen"
+        @close="closeModal"
+        @confirm="confirmModal"
+        @cancel="cancelModal"
+      >
+        <ds-text size="large">
+          {{ $t('group.modal.confirmAddGroupMemberText', { name: user.name }) }}
+        </ds-text>
+      </ds-modal> -->
+    </ds-space>
+  </div>
+</template>
+
+<script>
+// import { changeGroupMemberRoleMutation } from '~/graphql/groups.js'
+import SelectUserSearch from '~/components/generic/SelectUserSearch/SelectUserSearch'
+import UserTeaser from '~/components/UserTeaser/UserTeaser.vue'
+
+export default {
+  name: 'AddChatRoomByUserSearch',
+  components: {
+    UserTeaser,
+    SelectUserSearch,
+  },
+  props: {
+    // groupId: {
+    //   type: String,
+    //   required: true,
+    // },
+    // chatRooms: {
+    //   type: Array,
+    //   default: [],
+    // },
+  },
+  data() {
+    return {
+      id: 'search-user-to-add-to-group',
+      user: {},
+      // isOpen: false,
+    }
+  },
+  methods: {
+    // cancelModal() {
+    //   this.$refs.selectUserSearch.clear()
+    //   // this.isOpen = false
+    // },
+    // closeModal() {
+    //   this.$refs.selectUserSearch.clear()
+    //   // this.isOpen = false
+    // },
+    // confirmModal() {
+    //   this.addChatRoom()
+    //   // this.isOpen = false
+    //   this.$refs.selectUserSearch.clear()
+    // },
+    selectUser(user) {
+      this.user = user
+      // if (this.groupMembers.find((member) => member.id === this.user.id)) {
+      //   this.$toast.error(this.$t('group.errors.userAlreadyMember', { name: this.user.name }))
+      //   this.$refs.selectUserSearch.clear()
+      //   return
+      // }
+      this.$refs.selectUserSearch.clear()
+      this.$emit('close-user-search')
+      this.addChatRoom()
+    },
+    async addChatRoom() {
+      this.$emit('load-chat-rooms', 'XXX') // Wolle
+      // const newRole = 'usual'
+      // const username = this.user.name
+      // try {
+      //   await this.$apollo.mutate({
+      //     mutation: changeGroupMemberRoleMutation(),
+      //     variables: { groupId: this.groupId, userId: this.user.id, roleInGroup: newRole },
+      //   })
+      //   this.$toast.success(
+      //     this.$t('group.addMemberToGroupSuccess', {
+      //       role: this.$t(`group.roles.${newRole}`),
+      //       name: username,
+      //     }),
+      //   )
+      //   this.$emit('loadGroupMembers')
+      // } catch (error) {
+      //   this.$toast.error(error.message)
+      // }
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.add-chat-room-by-user-search {
+  background-color: white;
+  padding: $space-base;
+}
+</style>
diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue
index fccaee5b8..68abfe657 100644
--- a/webapp/components/Chat/Chat.vue
+++ b/webapp/components/Chat/Chat.vue
@@ -364,7 +364,7 @@ export default {
     },
 
     addRoom() {
-      this.$emit('open-user-search')
+      this.$emit('open-close-user-search')
     },
   },
 }
diff --git a/webapp/pages/chat.vue b/webapp/pages/chat.vue
index 8d9d55e46..bdc2a1ee2 100644
--- a/webapp/pages/chat.vue
+++ b/webapp/pages/chat.vue
@@ -1,33 +1,34 @@
 <template>
   <div>
     <ds-heading tag="h1">{{ $t('chat.page.headline') }}</ds-heading>
-    <add-group-member
+    <add-chat-room-by-user-search
       v-if="showUserSearch"
-      :groupId="0"
-      :groupMembers="[]"
-      @loadGroupMembers="null"
+      @load-chat-rooms="loadChatRooms"
+      @close-user-search="showUserSearch = false"
     />
+    <!-- Wolle :chatRooms="chatRooms" -->
     <ds-space margin-bottom="small" />
     <chat
       :roomId="getShowChat.showChat ? getShowChat.roomID : null"
-      @open-user-search="showUserSearch = !showUserSearch"
+      @open-close-user-search="showUserSearch = !showUserSearch"
     />
   </div>
 </template>
 
 <script>
 import { mapGetters, mapMutations } from 'vuex'
-import AddGroupMember from '~/components/Group/AddGroupMember'
+import AddChatRoomByUserSearch from '~/components/Chat/AddChatRoomByUserSearch'
 import Chat from '../components/Chat/Chat.vue'
 
 export default {
   components: {
-    AddGroupMember,
+    AddChatRoomByUserSearch,
     Chat,
   },
   data() {
     return {
       showUserSearch: false,
+      // chatRooms: [] // Wolle
     }
   },
   mounted() {
@@ -42,6 +43,9 @@ export default {
     ...mapMutations({
       showChat: 'chat/SET_OPEN_CHAT',
     }),
+    loadChatRooms(newChatRoomID) {
+      console.log('loadChatRooms !!! newChatRoomID: ', newChatRoomID)
+    },
   },
 }
 </script>

From 45dba25a7ad28852dcdf5c8acd9ffc9c8852b371 Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Wed, 19 Jul 2023 17:24:37 +0200
Subject: [PATCH 10/38] [fix] changed css rule for single chat icon

---
 webapp/components/Chat/Chat.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue
index f947f4886..139e30290 100644
--- a/webapp/components/Chat/Chat.vue
+++ b/webapp/components/Chat/Chat.vue
@@ -425,7 +425,7 @@ body {
   }
 }
 
-.single-chat-bubble {
+.ds-flex-item.single-chat-bubble {
   margin-right: 1em;
 }
 </style>

From 3d9a9cd5a096d4b1fbbf82b7597db53a03542b57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 19 Jul 2023 17:47:56 +0200
Subject: [PATCH 11/38] Create the chat room on user search in chats function

---
 .../Chat/AddChatRoomByUserSearch.vue          | 58 +------------------
 webapp/components/Chat/Chat.vue               | 36 +++++++-----
 webapp/pages/chat.vue                         |  8 ++-
 3 files changed, 28 insertions(+), 74 deletions(-)

diff --git a/webapp/components/Chat/AddChatRoomByUserSearch.vue b/webapp/components/Chat/AddChatRoomByUserSearch.vue
index b5cf0fd4c..a9a2a5bf6 100644
--- a/webapp/components/Chat/AddChatRoomByUserSearch.vue
+++ b/webapp/components/Chat/AddChatRoomByUserSearch.vue
@@ -5,28 +5,11 @@
     <ds-space margin-bottom="small" />
     <ds-space>
       <select-user-search :id="id" ref="selectUserSearch" @select-user="selectUser" />
-      <!-- <ds-modal
-        v-if="isOpen"
-        force
-        extended
-        :confirm-label="$t('group.modal.confirm')"
-        :cancel-label="$t('group.modal.cancel')"
-        :title="$t('group.modal.confirmAddGroupMemberTitle')"
-        v-model="isOpen"
-        @close="closeModal"
-        @confirm="confirmModal"
-        @cancel="cancelModal"
-      >
-        <ds-text size="large">
-          {{ $t('group.modal.confirmAddGroupMemberText', { name: user.name }) }}
-        </ds-text>
-      </ds-modal> -->
     </ds-space>
   </div>
 </template>
 
 <script>
-// import { changeGroupMemberRoleMutation } from '~/graphql/groups.js'
 import SelectUserSearch from '~/components/generic/SelectUserSearch/SelectUserSearch'
 import UserTeaser from '~/components/UserTeaser/UserTeaser.vue'
 
@@ -37,10 +20,6 @@ export default {
     SelectUserSearch,
   },
   props: {
-    // groupId: {
-    //   type: String,
-    //   required: true,
-    // },
     // chatRooms: {
     //   type: Array,
     //   default: [],
@@ -50,23 +29,9 @@ export default {
     return {
       id: 'search-user-to-add-to-group',
       user: {},
-      // isOpen: false,
     }
   },
   methods: {
-    // cancelModal() {
-    //   this.$refs.selectUserSearch.clear()
-    //   // this.isOpen = false
-    // },
-    // closeModal() {
-    //   this.$refs.selectUserSearch.clear()
-    //   // this.isOpen = false
-    // },
-    // confirmModal() {
-    //   this.addChatRoom()
-    //   // this.isOpen = false
-    //   this.$refs.selectUserSearch.clear()
-    // },
     selectUser(user) {
       this.user = user
       // if (this.groupMembers.find((member) => member.id === this.user.id)) {
@@ -76,27 +41,10 @@ export default {
       // }
       this.$refs.selectUserSearch.clear()
       this.$emit('close-user-search')
-      this.addChatRoom()
+      this.addChatRoom(this.user?.id)
     },
-    async addChatRoom() {
-      this.$emit('load-chat-rooms', 'XXX') // Wolle
-      // const newRole = 'usual'
-      // const username = this.user.name
-      // try {
-      //   await this.$apollo.mutate({
-      //     mutation: changeGroupMemberRoleMutation(),
-      //     variables: { groupId: this.groupId, userId: this.user.id, roleInGroup: newRole },
-      //   })
-      //   this.$toast.success(
-      //     this.$t('group.addMemberToGroupSuccess', {
-      //       role: this.$t(`group.roles.${newRole}`),
-      //       name: username,
-      //     }),
-      //   )
-      //   this.$emit('loadGroupMembers')
-      // } catch (error) {
-      //   this.$toast.error(error.message)
-      // }
+    async addChatRoom(userId) {
+      this.$emit('add-chat-room', userId)
     },
   },
 }
diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue
index 68abfe657..21843e498 100644
--- a/webapp/components/Chat/Chat.vue
+++ b/webapp/components/Chat/Chat.vue
@@ -160,22 +160,7 @@ export default {
   },
   mounted() {
     if (this.singleRoom) {
-      this.$apollo
-        .mutate({
-          mutation: createRoom(),
-          variables: {
-            userId: this.roomId,
-          },
-        })
-        .then(({ data: { CreateRoom } }) => {
-          this.fetchRooms({ room: CreateRoom })
-        })
-        .catch((error) => {
-          this.$toast.error(error)
-        })
-        .finally(() => {
-          // this.loading = false
-        })
+      this.newRoom(this.roomId)
     } else {
       this.fetchRooms()
     }
@@ -366,6 +351,25 @@ export default {
     addRoom() {
       this.$emit('open-close-user-search')
     },
+
+    newRoom(userId) {
+      this.$apollo
+        .mutate({
+          mutation: createRoom(),
+          variables: {
+            userId,
+          },
+        })
+        .then(({ data: { CreateRoom } }) => {
+          this.fetchRooms({ room: CreateRoom })
+        })
+        .catch((error) => {
+          this.$toast.error(error)
+        })
+        .finally(() => {
+          // this.loading = false
+        })
+    },
   },
 }
 </script>
diff --git a/webapp/pages/chat.vue b/webapp/pages/chat.vue
index bdc2a1ee2..a16fca5c5 100644
--- a/webapp/pages/chat.vue
+++ b/webapp/pages/chat.vue
@@ -3,13 +3,14 @@
     <ds-heading tag="h1">{{ $t('chat.page.headline') }}</ds-heading>
     <add-chat-room-by-user-search
       v-if="showUserSearch"
-      @load-chat-rooms="loadChatRooms"
+      @add-chat-room="addChatRoom"
       @close-user-search="showUserSearch = false"
     />
     <!-- Wolle :chatRooms="chatRooms" -->
     <ds-space margin-bottom="small" />
     <chat
       :roomId="getShowChat.showChat ? getShowChat.roomID : null"
+      ref="chat"
       @open-close-user-search="showUserSearch = !showUserSearch"
     />
   </div>
@@ -43,8 +44,9 @@ export default {
     ...mapMutations({
       showChat: 'chat/SET_OPEN_CHAT',
     }),
-    loadChatRooms(newChatRoomID) {
-      console.log('loadChatRooms !!! newChatRoomID: ', newChatRoomID)
+    addChatRoom(userID) {
+      console.log('addChatRoom !!! newChatRoomID: ', userID)
+      this.$refs.chat.newRoom(userID)
     },
   },
 }

From 419261229346941f99f92dbc487b36795721c290 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 19 Jul 2023 17:51:05 +0200
Subject: [PATCH 12/38] Fix linting

---
 webapp/components/Chat/AddChatRoomByUserSearch.vue | 2 --
 webapp/components/Group/AddGroupMember.vue         | 2 --
 webapp/pages/chat.vue                              | 3 +--
 3 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/webapp/components/Chat/AddChatRoomByUserSearch.vue b/webapp/components/Chat/AddChatRoomByUserSearch.vue
index a9a2a5bf6..0e7b243d8 100644
--- a/webapp/components/Chat/AddChatRoomByUserSearch.vue
+++ b/webapp/components/Chat/AddChatRoomByUserSearch.vue
@@ -11,12 +11,10 @@
 
 <script>
 import SelectUserSearch from '~/components/generic/SelectUserSearch/SelectUserSearch'
-import UserTeaser from '~/components/UserTeaser/UserTeaser.vue'
 
 export default {
   name: 'AddChatRoomByUserSearch',
   components: {
-    UserTeaser,
     SelectUserSearch,
   },
   props: {
diff --git a/webapp/components/Group/AddGroupMember.vue b/webapp/components/Group/AddGroupMember.vue
index 2cb71f011..cc3e3b1e8 100644
--- a/webapp/components/Group/AddGroupMember.vue
+++ b/webapp/components/Group/AddGroupMember.vue
@@ -27,12 +27,10 @@
 <script>
 import { changeGroupMemberRoleMutation } from '~/graphql/groups.js'
 import SelectUserSearch from '~/components/generic/SelectUserSearch/SelectUserSearch'
-import UserTeaser from '~/components/UserTeaser/UserTeaser.vue'
 
 export default {
   name: 'AddGroupMember',
   components: {
-    UserTeaser,
     SelectUserSearch,
   },
   props: {
diff --git a/webapp/pages/chat.vue b/webapp/pages/chat.vue
index a16fca5c5..c988493c5 100644
--- a/webapp/pages/chat.vue
+++ b/webapp/pages/chat.vue
@@ -29,7 +29,7 @@ export default {
   data() {
     return {
       showUserSearch: false,
-      // chatRooms: [] // Wolle
+      // excludeUsers: [] // Wolle
     }
   },
   mounted() {
@@ -45,7 +45,6 @@ export default {
       showChat: 'chat/SET_OPEN_CHAT',
     }),
     addChatRoom(userID) {
-      console.log('addChatRoom !!! newChatRoomID: ', userID)
       this.$refs.chat.newRoom(userID)
     },
   },

From 20e6fb51222cc421ff3b6685c61fb64bb28474c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 19 Jul 2023 17:59:20 +0200
Subject: [PATCH 13/38] Change headline for search user for new chat on chat
 page

---
 webapp/components/Chat/AddChatRoomByUserSearch.vue | 2 +-
 webapp/locales/de.json                             | 1 +
 webapp/locales/en.json                             | 3 ++-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/webapp/components/Chat/AddChatRoomByUserSearch.vue b/webapp/components/Chat/AddChatRoomByUserSearch.vue
index 0e7b243d8..b5cf5a063 100644
--- a/webapp/components/Chat/AddChatRoomByUserSearch.vue
+++ b/webapp/components/Chat/AddChatRoomByUserSearch.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="add-chat-room-by-user-search">
     <!-- Wolle -->
-    <h2 class="title">{{ $t('group.addUser') }}</h2>
+    <h2 class="title">{{ $t('chat.addRoomHeadline') }}</h2>
     <ds-space margin-bottom="small" />
     <ds-space>
       <select-user-search :id="id" ref="selectUserSearch" @select-user="selectUser" />
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index cafa030ff..372703214 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -78,6 +78,7 @@
     }
   },
   "chat": {
+    "addRoomHeadline": "Suche Nutzer für neuen Chat",
     "cancelSelectMessage": "Abbrechen",
     "conversationStarted": "Unterhaltung startete am:",
     "isOnline": "online",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 29df284bd..7e914612e 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -78,6 +78,7 @@
     }
   },
   "chat": {
+    "addRoomHeadline": "Search User for new Chat",
     "cancelSelectMessage": "Cancel",
     "conversationStarted": "Conversation started on:",
     "isOnline": "is online",
@@ -475,7 +476,7 @@
     "addMemberToGroupSuccess": "“{name}” was added to the group with the role “{role}”!",
     "addUser": "Add User",
     "addUserNoOptions": "No users found!",
-    "addUserPlaceholder": " Username",
+    "addUserPlaceholder": " User name",
     "allGroups": "All Groups",
     "button": {
       "tooltip": "Show groups"

From 6659238fa1a29f97a8bf4e0b109df1ebfae9d16f Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Thu, 20 Jul 2023 10:15:15 +0200
Subject: [PATCH 14/38] Add fetchRooms option & check null on content.

---
 webapp/components/Chat/Chat.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue
index abaaf8f0c..2480b487c 100644
--- a/webapp/components/Chat/Chat.vue
+++ b/webapp/components/Chat/Chat.vue
@@ -261,7 +261,7 @@ export default {
               index: r.lastMessage?.date,
               lastMessage: {
                 ...r.lastMessage,
-                content: r.lastMessage?.content.trim().substring(0, 30),
+                content: r.lastMessage?.content?.trim().substring(0, 30),
               },
               users: r.users.map((u) => {
                 return { ...u, username: u.name, avatar: u.avatar?.url }
@@ -415,7 +415,7 @@ export default {
           },
         })
         .then(({ data: { CreateRoom } }) => {
-          this.fetchRooms({ room: CreateRoom })
+          this.fetchRooms({ room: CreateRoom, options: { refetch: true } })
         })
         .catch((error) => {
           this.$toast.error(error)

From 858e3fdee8a2ca6de0f590bc2d052a9116c5e6bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 20 Jul 2023 10:40:04 +0200
Subject: [PATCH 15/38] Rename 'addRoom' to 'toggleUserSearch' in chat
 component

---
 webapp/components/Chat/Chat.vue | 13 +++++++------
 webapp/locales/en.json          |  2 +-
 webapp/pages/chat.vue           |  2 +-
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue
index 2480b487c..d1a60a87d 100644
--- a/webapp/components/Chat/Chat.vue
+++ b/webapp/components/Chat/Chat.vue
@@ -25,7 +25,7 @@
         @send-message="sendMessage($event.detail[0])"
         @fetch-messages="fetchMessages($event.detail[0])"
         @fetch-more-rooms="fetchRooms"
-        @add-room="addRoom"
+        @add-room="toggleUserSearch"
         @show-demo-options="showDemoOptions = $event"
       >
         <div
@@ -236,9 +236,10 @@ export default {
       commitUnreadRoomCount: 'chat/UPDATE_ROOM_COUNT',
       commitRoomIdFromSingleRoom: 'chat/UPDATE_ROOM_ID',
     }),
-    async fetchRooms({ room, options = {} } = {}) {
-      this.roomsLoaded = options.refetch ? this.roomsLoaded : false
-      const offset = (options.refetch ? 0 : this.roomPage) * this.roomPageSize
+
+    async fetchRooms({ room } = {}) {
+      this.roomsLoaded = false
+      const offset = this.roomPage * this.roomPageSize
       try {
         const {
           data: { Room },
@@ -402,8 +403,8 @@ export default {
       return fullname.match(/\b\w/g).join('').substring(0, 3).toUpperCase()
     },
 
-    addRoom() {
-      this.$emit('open-close-user-search')
+    toggleUserSearch() {
+      this.$emit('toggle-user-search')
     },
 
     newRoom(userId) {
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 7e914612e..e5bdee4fc 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -476,7 +476,7 @@
     "addMemberToGroupSuccess": "“{name}” was added to the group with the role “{role}”!",
     "addUser": "Add User",
     "addUserNoOptions": "No users found!",
-    "addUserPlaceholder": " User name",
+    "addUserPlaceholder": "User name",
     "allGroups": "All Groups",
     "button": {
       "tooltip": "Show groups"
diff --git a/webapp/pages/chat.vue b/webapp/pages/chat.vue
index c988493c5..acb186f4e 100644
--- a/webapp/pages/chat.vue
+++ b/webapp/pages/chat.vue
@@ -11,7 +11,7 @@
     <chat
       :roomId="getShowChat.showChat ? getShowChat.roomID : null"
       ref="chat"
-      @open-close-user-search="showUserSearch = !showUserSearch"
+      @toggle-user-search="showUserSearch = !showUserSearch"
     />
   </div>
 </template>

From b76802f59fc4cd4339e5a4372e5d8660eb65c7a8 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Thu, 20 Jul 2023 11:01:18 +0200
Subject: [PATCH 16/38] Add close button and style the headline of the
 UserSearch.

---
 .../components/Chat/AddChatRoomByUserSearch.vue  | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/webapp/components/Chat/AddChatRoomByUserSearch.vue b/webapp/components/Chat/AddChatRoomByUserSearch.vue
index b5cf5a063..f88b4f1e6 100644
--- a/webapp/components/Chat/AddChatRoomByUserSearch.vue
+++ b/webapp/components/Chat/AddChatRoomByUserSearch.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="add-chat-room-by-user-search">
     <!-- Wolle -->
-    <h2 class="title">{{ $t('chat.addRoomHeadline') }}</h2>
+    <ds-flex class="headline">
+      <h2 class="title">{{ $t('chat.addRoomHeadline') }}</h2>
+      <base-button class="close-button" icon="close" circle @click="closeUserSearch"/>
+    </ds-flex>
     <ds-space margin-bottom="small" />
     <ds-space>
       <select-user-search :id="id" ref="selectUserSearch" @select-user="selectUser" />
@@ -15,7 +18,7 @@ import SelectUserSearch from '~/components/generic/SelectUserSearch/SelectUserSe
 export default {
   name: 'AddChatRoomByUserSearch',
   components: {
-    SelectUserSearch,
+    SelectUserSearch
   },
   props: {
     // chatRooms: {
@@ -44,6 +47,9 @@ export default {
     async addChatRoom(userId) {
       this.$emit('add-chat-room', userId)
     },
+    closeUserSearch() {
+      this.$emit('close-user-search')
+    },
   },
 }
 </script>
@@ -53,4 +59,10 @@ export default {
   background-color: white;
   padding: $space-base;
 }
+.ds-flex.headline {
+  justify-content: space-between;
+}
+.ds-flex.headline .close-button {
+  margin-top: -6px;
+}
 </style>

From a82d245f636230be4030f1b75a5703ece532fa3f Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Thu, 20 Jul 2023 11:03:20 +0200
Subject: [PATCH 17/38] Change toast error to error.message.

---
 webapp/components/Chat/Chat.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue
index d1a60a87d..39dd465e2 100644
--- a/webapp/components/Chat/Chat.vue
+++ b/webapp/components/Chat/Chat.vue
@@ -419,7 +419,7 @@ export default {
           this.fetchRooms({ room: CreateRoom, options: { refetch: true } })
         })
         .catch((error) => {
-          this.$toast.error(error)
+          this.$toast.error(error.message)
         })
         .finally(() => {
           // this.loading = false

From 13da3ba3f46482c1488fab85300d1075c183255e Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Thu, 20 Jul 2023 11:35:06 +0200
Subject: [PATCH 18/38] Add returned properties to the CreateRoom mutation, add
 emit to change the roomID.

---
 webapp/components/Chat/Chat.vue |  2 ++
 webapp/graphql/Rooms.js         | 12 ++++++++++++
 webapp/pages/chat.vue           |  4 ++++
 3 files changed, 18 insertions(+)

diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue
index 39dd465e2..0cc9bc28b 100644
--- a/webapp/components/Chat/Chat.vue
+++ b/webapp/components/Chat/Chat.vue
@@ -417,6 +417,8 @@ export default {
         })
         .then(({ data: { CreateRoom } }) => {
           this.fetchRooms({ room: CreateRoom, options: { refetch: true } })
+          this.roomId = CreateRoom.id
+          this.$emit('show-chat', CreateRoom.id)
         })
         .catch((error) => {
           this.$toast.error(error.message)
diff --git a/webapp/graphql/Rooms.js b/webapp/graphql/Rooms.js
index 757a6cfa4..3433a84a7 100644
--- a/webapp/graphql/Rooms.js
+++ b/webapp/graphql/Rooms.js
@@ -5,6 +5,18 @@ export const createRoom = () => gql`
     CreateRoom(userId: $userId) {
       id
       roomId
+      roomName
+      lastMessageAt
+      unreadCount
+      #avatar
+      users {
+        _id
+        id
+        name
+        avatar {
+          url
+        }
+      }
     }
   }
 `
diff --git a/webapp/pages/chat.vue b/webapp/pages/chat.vue
index acb186f4e..96df8cc6b 100644
--- a/webapp/pages/chat.vue
+++ b/webapp/pages/chat.vue
@@ -12,6 +12,7 @@
       :roomId="getShowChat.showChat ? getShowChat.roomID : null"
       ref="chat"
       @toggle-user-search="showUserSearch = !showUserSearch"
+      :show-room="showRoom"
     />
   </div>
 </template>
@@ -47,6 +48,9 @@ export default {
     addChatRoom(userID) {
       this.$refs.chat.newRoom(userID)
     },
+    showRoom(roomId) {
+      this.showChat({ showChat: true, roomID: roomId })
+    }
   },
 }
 </script>

From dee77df5f60da57449faa72645985447d44ba6ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 20 Jul 2023 12:02:24 +0200
Subject: [PATCH 19/38] Cleanup

---
 webapp/components/Chat/AddChatRoomByUserSearch.vue | 1 -
 webapp/pages/chat.vue                              | 2 --
 2 files changed, 3 deletions(-)

diff --git a/webapp/components/Chat/AddChatRoomByUserSearch.vue b/webapp/components/Chat/AddChatRoomByUserSearch.vue
index f88b4f1e6..10a4d2bc4 100644
--- a/webapp/components/Chat/AddChatRoomByUserSearch.vue
+++ b/webapp/components/Chat/AddChatRoomByUserSearch.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="add-chat-room-by-user-search">
-    <!-- Wolle -->
     <ds-flex class="headline">
       <h2 class="title">{{ $t('chat.addRoomHeadline') }}</h2>
       <base-button class="close-button" icon="close" circle @click="closeUserSearch"/>
diff --git a/webapp/pages/chat.vue b/webapp/pages/chat.vue
index 96df8cc6b..7524bc0ad 100644
--- a/webapp/pages/chat.vue
+++ b/webapp/pages/chat.vue
@@ -6,7 +6,6 @@
       @add-chat-room="addChatRoom"
       @close-user-search="showUserSearch = false"
     />
-    <!-- Wolle :chatRooms="chatRooms" -->
     <ds-space margin-bottom="small" />
     <chat
       :roomId="getShowChat.showChat ? getShowChat.roomID : null"
@@ -30,7 +29,6 @@ export default {
   data() {
     return {
       showUserSearch: false,
-      // excludeUsers: [] // Wolle
     }
   },
   mounted() {

From 883d7d89ab58f78e5524a63a071c3e826530f31e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 20 Jul 2023 12:04:37 +0200
Subject: [PATCH 20/38] Fix linting

---
 webapp/components/Chat/AddChatRoomByUserSearch.vue | 4 ++--
 webapp/pages/chat.vue                              | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/webapp/components/Chat/AddChatRoomByUserSearch.vue b/webapp/components/Chat/AddChatRoomByUserSearch.vue
index 10a4d2bc4..b48120603 100644
--- a/webapp/components/Chat/AddChatRoomByUserSearch.vue
+++ b/webapp/components/Chat/AddChatRoomByUserSearch.vue
@@ -2,7 +2,7 @@
   <div class="add-chat-room-by-user-search">
     <ds-flex class="headline">
       <h2 class="title">{{ $t('chat.addRoomHeadline') }}</h2>
-      <base-button class="close-button" icon="close" circle @click="closeUserSearch"/>
+      <base-button class="close-button" icon="close" circle @click="closeUserSearch" />
     </ds-flex>
     <ds-space margin-bottom="small" />
     <ds-space>
@@ -17,7 +17,7 @@ import SelectUserSearch from '~/components/generic/SelectUserSearch/SelectUserSe
 export default {
   name: 'AddChatRoomByUserSearch',
   components: {
-    SelectUserSearch
+    SelectUserSearch,
   },
   props: {
     // chatRooms: {
diff --git a/webapp/pages/chat.vue b/webapp/pages/chat.vue
index 7524bc0ad..9f93fabcb 100644
--- a/webapp/pages/chat.vue
+++ b/webapp/pages/chat.vue
@@ -48,7 +48,7 @@ export default {
     },
     showRoom(roomId) {
       this.showChat({ showChat: true, roomID: roomId })
-    }
+    },
   },
 }
 </script>

From 0b64fce5aa5dcc8043e9f694d38879490fc88cf1 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Thu, 20 Jul 2023 12:19:32 +0200
Subject: [PATCH 21/38] Add selectedRoom equaling the createdRoom

---
 webapp/components/Chat/Chat.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue
index 0cc9bc28b..a0c7deedd 100644
--- a/webapp/components/Chat/Chat.vue
+++ b/webapp/components/Chat/Chat.vue
@@ -417,7 +417,7 @@ export default {
         })
         .then(({ data: { CreateRoom } }) => {
           this.fetchRooms({ room: CreateRoom, options: { refetch: true } })
-          this.roomId = CreateRoom.id
+          this.selectedRoom = CreateRoom
           this.$emit('show-chat', CreateRoom.id)
         })
         .catch((error) => {

From 999255b2b5e2a74ba94f75ed3d6a3fb4d09bf604 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 20 Jul 2023 12:38:43 +0200
Subject: [PATCH 22/38] Change general search hint

---
 webapp/locales/de.json | 2 +-
 webapp/locales/en.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index cafa030ff..1ad5b0926 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -901,7 +901,7 @@
       "Tag": "Hashtag ::: Hashtags",
       "User": "Nutzer ::: Nutzer"
     },
-    "hint": "Wonach suchst Du? Nutze !… für Beiträge, @… für Mitglieder, &… für Gruppen, #… für Hashtags",
+    "hint": "!... sucht Beiträge, @... sucht Nutzer, &... sucht Gruppen, #… sucht Hashtags",
     "no-results": "Keine Ergebnisse für \"{search}\" gefunden. Versuch' es mit einem anderen Begriff!",
     "page": "Seite",
     "placeholder": "Suchen",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 29df284bd..9d7ce1a5f 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -901,7 +901,7 @@
       "Tag": "Hashtag ::: Hashtags",
       "User": "User ::: Users"
     },
-    "hint": "What are you searching for? Use !… for posts, @… for users, &… for groups, #… for hashtags.",
+    "hint": "!... searches posts, @... searches users, &... searches groups, #… searches hashtags",
     "no-results": "No results found for \"{search}\". Try a different search term!",
     "page": "Page",
     "placeholder": "Search",

From 624f379677623969deae1a3efe4c96fe7adc40e0 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Thu, 20 Jul 2023 12:57:18 +0200
Subject: [PATCH 23/38] fix new room mechanic

---
 webapp/components/Chat/Chat.vue | 23 +++++++++++++++++++----
 webapp/graphql/Rooms.js         |  2 +-
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue
index a0c7deedd..59f3eefc3 100644
--- a/webapp/components/Chat/Chat.vue
+++ b/webapp/components/Chat/Chat.vue
@@ -260,10 +260,10 @@ export default {
             rms.push({
               ...r,
               index: r.lastMessage?.date,
-              lastMessage: {
+              lastMessage: r.lastMessage ? {
                 ...r.lastMessage,
                 content: r.lastMessage?.content?.trim().substring(0, 30),
-              },
+              }: null,
               users: r.users.map((u) => {
                 return { ...u, username: u.name, avatar: u.avatar?.url }
               }),
@@ -416,8 +416,23 @@ export default {
           },
         })
         .then(({ data: { CreateRoom } }) => {
-          this.fetchRooms({ room: CreateRoom, options: { refetch: true } })
-          this.selectedRoom = CreateRoom
+          const roomIndex = this.rooms.findIndex((r) => r.id === CreateRoom.roomId)
+          const room = {...CreateRoom, index: CreateRoom.lastMessage?.date, lastMessage: CreateRoom.lastMessage ? {
+                ...CreateRoom.lastMessage,
+                content: CreateRoom.lastMessage?.content?.trim().substring(0, 30),
+              }: null,
+              users: CreateRoom.users.map((u) => {
+                return { ...u, username: u.name, avatar: u.avatar?.url }
+              })
+            }
+
+          // as long as we cannot query avatar on CreateRoom
+          room.avatar = room.users.find((u) => u.id === this.currentUser.id).avatar
+
+          if(roomIndex === -1){
+            this.rooms = [room, ...this.rooms]
+          }
+          this.fetchMessages({room, options: { refetch: true }})
           this.$emit('show-chat', CreateRoom.id)
         })
         .catch((error) => {
diff --git a/webapp/graphql/Rooms.js b/webapp/graphql/Rooms.js
index 3433a84a7..34c1b2fd6 100644
--- a/webapp/graphql/Rooms.js
+++ b/webapp/graphql/Rooms.js
@@ -23,7 +23,7 @@ export const createRoom = () => gql`
 
 export const roomQuery = () => gql`
   query Room($first: Int, $offset: Int, $id: ID) {
-    Room(first: $first, offset: $offset, id: $id, orderBy: lastMessageAt_desc) {
+    Room(first: $first, offset: $offset, id: $id, orderBy: [lastMessageAt_desc createdAt_desc] ) {
       id
       roomId
       roomName

From 01fb28da3cae4b5050c50bcafc5a76c28918621f Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Thu, 20 Jul 2023 13:09:38 +0200
Subject: [PATCH 24/38] unify function to fix room result, propose order
 fix(not 100%)

---
 webapp/components/Chat/Chat.vue | 48 ++++++++++++++++++---------------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue
index 59f3eefc3..9b2c28fe5 100644
--- a/webapp/components/Chat/Chat.vue
+++ b/webapp/components/Chat/Chat.vue
@@ -257,17 +257,7 @@ export default {
         const rmsIds = []
         ;[...Room, ...this.rooms].forEach((r) => {
           if (!rmsIds.find((v) => v === r.id)) {
-            rms.push({
-              ...r,
-              index: r.lastMessage?.date,
-              lastMessage: r.lastMessage ? {
-                ...r.lastMessage,
-                content: r.lastMessage?.content?.trim().substring(0, 30),
-              }: null,
-              users: r.users.map((u) => {
-                return { ...u, username: u.name, avatar: u.avatar?.url }
-              }),
-            })
+            rms.push(this.fixRoomObject(r))
             rmsIds.push(r.id)
           }
         })
@@ -388,6 +378,10 @@ export default {
         const changedRoom = { ...this.rooms[roomIndex] }
         changedRoom.lastMessage = createdMessage
         changedRoom.lastMessage.content = changedRoom.lastMessage.content.trim().substring(0, 30)
+        // move current room to top (not 100% working)
+        // const rooms = [...this.rooms]
+        // rooms.splice(roomIndex,1)
+        // this.rooms = [changedRoom, ...rooms]
         this.rooms[roomIndex] = changedRoom
       } catch (error) {
         this.$toast.error(error.message)
@@ -407,6 +401,26 @@ export default {
       this.$emit('toggle-user-search')
     },
 
+    fixRoomObject(room){
+      // This fixes the room object which arrives from the backend
+      const fixedRoom = {
+        ...room,
+        index: room.lastMessage?.date,
+        lastMessage: room.lastMessage ? {
+          ...room.lastMessage,
+          content: room.lastMessage?.content?.trim().substring(0, 30),
+        }: null,
+        users: room.users.map((u) => {
+          return { ...u, username: u.name, avatar: u.avatar?.url }
+        })
+      }
+      if(!fixedRoom.avatar){
+        // as long as we cannot query avatar on CreateRoom
+        fixedRoom.avatar = fixedRoom.users.find((u) => u.id !== this.currentUser.id).avatar
+      }
+      return fixedRoom
+    },
+
     newRoom(userId) {
       this.$apollo
         .mutate({
@@ -417,17 +431,7 @@ export default {
         })
         .then(({ data: { CreateRoom } }) => {
           const roomIndex = this.rooms.findIndex((r) => r.id === CreateRoom.roomId)
-          const room = {...CreateRoom, index: CreateRoom.lastMessage?.date, lastMessage: CreateRoom.lastMessage ? {
-                ...CreateRoom.lastMessage,
-                content: CreateRoom.lastMessage?.content?.trim().substring(0, 30),
-              }: null,
-              users: CreateRoom.users.map((u) => {
-                return { ...u, username: u.name, avatar: u.avatar?.url }
-              })
-            }
-
-          // as long as we cannot query avatar on CreateRoom
-          room.avatar = room.users.find((u) => u.id === this.currentUser.id).avatar
+          const room = this.fixRoomObject(CreateRoom)
 
           if(roomIndex === -1){
             this.rooms = [room, ...this.rooms]

From 70a1c521650c84ef4c5e64cdf12051f311faaa93 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Thu, 20 Jul 2023 13:10:25 +0200
Subject: [PATCH 25/38] lint fixes

---
 webapp/components/Chat/Chat.vue | 20 +++++++++++---------
 webapp/graphql/Rooms.js         |  2 +-
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue
index 9b2c28fe5..fedaeedba 100644
--- a/webapp/components/Chat/Chat.vue
+++ b/webapp/components/Chat/Chat.vue
@@ -401,20 +401,22 @@ export default {
       this.$emit('toggle-user-search')
     },
 
-    fixRoomObject(room){
+    fixRoomObject(room) {
       // This fixes the room object which arrives from the backend
       const fixedRoom = {
         ...room,
         index: room.lastMessage?.date,
-        lastMessage: room.lastMessage ? {
-          ...room.lastMessage,
-          content: room.lastMessage?.content?.trim().substring(0, 30),
-        }: null,
+        lastMessage: room.lastMessage
+          ? {
+              ...room.lastMessage,
+              content: room.lastMessage?.content?.trim().substring(0, 30),
+            }
+          : null,
         users: room.users.map((u) => {
           return { ...u, username: u.name, avatar: u.avatar?.url }
-        })
+        }),
       }
-      if(!fixedRoom.avatar){
+      if (!fixedRoom.avatar) {
         // as long as we cannot query avatar on CreateRoom
         fixedRoom.avatar = fixedRoom.users.find((u) => u.id !== this.currentUser.id).avatar
       }
@@ -433,10 +435,10 @@ export default {
           const roomIndex = this.rooms.findIndex((r) => r.id === CreateRoom.roomId)
           const room = this.fixRoomObject(CreateRoom)
 
-          if(roomIndex === -1){
+          if (roomIndex === -1) {
             this.rooms = [room, ...this.rooms]
           }
-          this.fetchMessages({room, options: { refetch: true }})
+          this.fetchMessages({ room, options: { refetch: true } })
           this.$emit('show-chat', CreateRoom.id)
         })
         .catch((error) => {
diff --git a/webapp/graphql/Rooms.js b/webapp/graphql/Rooms.js
index 34c1b2fd6..077d73f9a 100644
--- a/webapp/graphql/Rooms.js
+++ b/webapp/graphql/Rooms.js
@@ -23,7 +23,7 @@ export const createRoom = () => gql`
 
 export const roomQuery = () => gql`
   query Room($first: Int, $offset: Int, $id: ID) {
-    Room(first: $first, offset: $offset, id: $id, orderBy: [lastMessageAt_desc createdAt_desc] ) {
+    Room(first: $first, offset: $offset, id: $id, orderBy: [lastMessageAt_desc, createdAt_desc]) {
       id
       roomId
       roomName

From e2c23ad4a2fc054dab4181af80587c57f7ff86d3 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Thu, 20 Jul 2023 13:10:32 +0200
Subject: [PATCH 26/38] more lint fixes

---
 backend/src/schema/types/type/Room.gql | 1 +
 1 file changed, 1 insertion(+)

diff --git a/backend/src/schema/types/type/Room.gql b/backend/src/schema/types/type/Room.gql
index 0cf5b22c8..d758808bb 100644
--- a/backend/src/schema/types/type/Room.gql
+++ b/backend/src/schema/types/type/Room.gql
@@ -8,6 +8,7 @@
 # TODO change this to last message date
 enum _RoomOrdering {
   lastMessageAt_desc
+  createdAt_desc
 }
 
 type Room {

From 2decf90b6b2f9ebb62b35b34292e6b5c44fbdb0c Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Thu, 20 Jul 2023 13:40:29 +0200
Subject: [PATCH 27/38] Change the background color of my messages to the same
 color as the one in side menu.

---
 webapp/constants/chat.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/constants/chat.js b/webapp/constants/chat.js
index 181d88e0e..082d018f3 100644
--- a/webapp/constants/chat.js
+++ b/webapp/constants/chat.js
@@ -58,7 +58,7 @@ const STYLE = {
 
     message: {
       background: styleData.chatMessageBgOthers,
-      backgroundMe: styleData.chatMessageBgMe,
+      backgroundMe: styleData.colorPrimaryLight,
       color: styleData.chatMessageColor,
       colorStarted: '#9ca6af',
       backgroundDeleted: '#dadfe2',

From 1b8b356432e753ba0919f63bd7629f1c5adabd97 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Thu, 20 Jul 2023 13:41:59 +0200
Subject: [PATCH 28/38] notification subscription

---
 backend/src/schema/resolvers/notifications.ts           | 4 ++--
 backend/src/schema/types/type/NOTIFIED.gql              | 2 +-
 webapp/components/NotificationMenu/NotificationMenu.vue | 5 -----
 webapp/graphql/User.js                                  | 4 ++--
 4 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/backend/src/schema/resolvers/notifications.ts b/backend/src/schema/resolvers/notifications.ts
index e427de227..6a3e232cc 100644
--- a/backend/src/schema/resolvers/notifications.ts
+++ b/backend/src/schema/resolvers/notifications.ts
@@ -7,8 +7,8 @@ export default {
     notificationAdded: {
       subscribe: withFilter(
         () => pubsub.asyncIterator(NOTIFICATION_ADDED),
-        (payload, variables) => {
-          return payload.notificationAdded.to.id === variables.userId
+        (payload, variables, context) => {
+          return payload.notificationAdded.to.id === context.user?.id
         },
       ),
     },
diff --git a/backend/src/schema/types/type/NOTIFIED.gql b/backend/src/schema/types/type/NOTIFIED.gql
index 62a1f3696..1f825decc 100644
--- a/backend/src/schema/types/type/NOTIFIED.gql
+++ b/backend/src/schema/types/type/NOTIFIED.gql
@@ -38,5 +38,5 @@ type Mutation {
 }
 
 type Subscription {
-  notificationAdded(userId: ID!): NOTIFIED
+  notificationAdded: NOTIFIED
 }
diff --git a/webapp/components/NotificationMenu/NotificationMenu.vue b/webapp/components/NotificationMenu/NotificationMenu.vue
index 9e94e07d7..d0e21bf96 100644
--- a/webapp/components/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/NotificationMenu/NotificationMenu.vue
@@ -137,11 +137,6 @@ export default {
       },
       subscribeToMore: {
         document: notificationAdded(),
-        variables() {
-          return {
-            userId: this.user.id,
-          }
-        },
         updateQuery: (previousResult, { subscriptionData }) => {
           const {
             data: { notificationAdded: newNotification },
diff --git a/webapp/graphql/User.js b/webapp/graphql/User.js
index fcdac0989..4b743a0e3 100644
--- a/webapp/graphql/User.js
+++ b/webapp/graphql/User.js
@@ -245,8 +245,8 @@ export const notificationAdded = () => {
     ${postFragment}
     ${groupFragment}
 
-    subscription notifications($userId: ID!) {
-      notificationAdded(userId: $userId) {
+    subscription notifications {
+      notificationAdded {
         id
         read
         reason

From f7c381efd820e11f872544516df3c35ec0c6e850 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Thu, 20 Jul 2023 13:44:04 +0200
Subject: [PATCH 29/38] subscription chatMessageAdded security fix

---
 backend/src/schema/resolvers/messages.ts  | 4 ++--
 backend/src/schema/types/type/Message.gql | 2 +-
 webapp/components/Chat/Chat.vue           | 3 ---
 webapp/graphql/Messages.js                | 4 ++--
 4 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/backend/src/schema/resolvers/messages.ts b/backend/src/schema/resolvers/messages.ts
index b7e7a7a73..c1381045f 100644
--- a/backend/src/schema/resolvers/messages.ts
+++ b/backend/src/schema/resolvers/messages.ts
@@ -25,8 +25,8 @@ export default {
     chatMessageAdded: {
       subscribe: withFilter(
         () => pubsub.asyncIterator(CHAT_MESSAGE_ADDED),
-        (payload, variables) => {
-          return payload.userId === variables.userId
+        (payload, variables, context) => {
+          return payload.userId === context.user?.id
         },
       ),
     },
diff --git a/backend/src/schema/types/type/Message.gql b/backend/src/schema/types/type/Message.gql
index 71d175e1c..16e458151 100644
--- a/backend/src/schema/types/type/Message.gql
+++ b/backend/src/schema/types/type/Message.gql
@@ -46,5 +46,5 @@ type Query {
 }
 
 type Subscription {
-  chatMessageAdded(userId: ID!): Message
+  chatMessageAdded: Message
 }
diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue
index c2c7c412c..a1e5adf01 100644
--- a/webapp/components/Chat/Chat.vue
+++ b/webapp/components/Chat/Chat.vue
@@ -195,9 +195,6 @@ export default {
     // Subscriptions
     const observer = this.$apollo.subscribe({
       query: chatMessageAdded(),
-      variables: {
-        userId: this.currentUser.id,
-      },
     })
 
     observer.subscribe({
diff --git a/webapp/graphql/Messages.js b/webapp/graphql/Messages.js
index cb5d37df9..ffa2760f9 100644
--- a/webapp/graphql/Messages.js
+++ b/webapp/graphql/Messages.js
@@ -54,8 +54,8 @@ export const messageQuery = () => {
 
 export const chatMessageAdded = () => {
   return gql`
-    subscription chatMessageAdded($userId: ID!) {
-      chatMessageAdded(userId: $userId) {
+    subscription chatMessageAdded {
+      chatMessageAdded {
         _id
         id
         indexId

From 604e1d8465bc6054eebc1f16b6778c6d34507cb9 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Thu, 20 Jul 2023 13:44:23 +0200
Subject: [PATCH 30/38] subscription roomCountUpdated security fix

---
 backend/src/schema/resolvers/rooms.ts                        | 4 ++--
 backend/src/schema/types/type/Room.gql                       | 2 +-
 .../components/ChatNotificationMenu/ChatNotificationMenu.vue | 5 -----
 webapp/graphql/Rooms.js                                      | 4 ++--
 4 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/backend/src/schema/resolvers/rooms.ts b/backend/src/schema/resolvers/rooms.ts
index 5e931a446..5382c5ee7 100644
--- a/backend/src/schema/resolvers/rooms.ts
+++ b/backend/src/schema/resolvers/rooms.ts
@@ -20,8 +20,8 @@ export default {
     roomCountUpdated: {
       subscribe: withFilter(
         () => pubsub.asyncIterator(ROOM_COUNT_UPDATED),
-        (payload, variables) => {
-          return payload.userId === variables.userId
+        (payload, variables, context) => {
+          return payload.userId === context.user?.id
         },
       ),
     },
diff --git a/backend/src/schema/types/type/Room.gql b/backend/src/schema/types/type/Room.gql
index 0cf5b22c8..221df8299 100644
--- a/backend/src/schema/types/type/Room.gql
+++ b/backend/src/schema/types/type/Room.gql
@@ -57,5 +57,5 @@ type Query {
 }
 
 type Subscription {
-  roomCountUpdated(userId: ID!): Int
+  roomCountUpdated: Int
 }
diff --git a/webapp/components/ChatNotificationMenu/ChatNotificationMenu.vue b/webapp/components/ChatNotificationMenu/ChatNotificationMenu.vue
index ec3f9fbc7..dd36b965a 100644
--- a/webapp/components/ChatNotificationMenu/ChatNotificationMenu.vue
+++ b/webapp/components/ChatNotificationMenu/ChatNotificationMenu.vue
@@ -44,11 +44,6 @@ export default {
       },
       subscribeToMore: {
         document: roomCountUpdated(),
-        variables() {
-          return {
-            userId: this.user.id,
-          }
-        },
         updateQuery: (previousResult, { subscriptionData }) => {
           return { UnreadRooms: subscriptionData.data.roomCountUpdated }
         },
diff --git a/webapp/graphql/Rooms.js b/webapp/graphql/Rooms.js
index 757a6cfa4..577eb8eff 100644
--- a/webapp/graphql/Rooms.js
+++ b/webapp/graphql/Rooms.js
@@ -52,8 +52,8 @@ export const unreadRoomsQuery = () => {
 
 export const roomCountUpdated = () => {
   return gql`
-    subscription roomCountUpdated($userId: ID!) {
-      roomCountUpdated(userId: $userId)
+    subscription roomCountUpdated {
+      roomCountUpdated
     }
   `
 }

From 21124bcd71d925654212229783101c1867ddc8b1 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Thu, 20 Jul 2023 14:18:25 +0200
Subject: [PATCH 31/38] Fix: Order of rooms.

---
 webapp/components/Chat/Chat.vue | 4 ++--
 webapp/graphql/Rooms.js         | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue
index fedaeedba..dd724d200 100644
--- a/webapp/components/Chat/Chat.vue
+++ b/webapp/components/Chat/Chat.vue
@@ -257,7 +257,7 @@ export default {
         const rmsIds = []
         ;[...Room, ...this.rooms].forEach((r) => {
           if (!rmsIds.find((v) => v === r.id)) {
-            rms.push(this.fixRoomObject(r))
+            rms.unshift(this.fixRoomObject(r))
             rmsIds.push(r.id)
           }
         })
@@ -405,7 +405,7 @@ export default {
       // This fixes the room object which arrives from the backend
       const fixedRoom = {
         ...room,
-        index: room.lastMessage?.date,
+        index: room.lastMessage? room.lastMessage.date : room.createdAt,
         lastMessage: room.lastMessage
           ? {
               ...room.lastMessage,
diff --git a/webapp/graphql/Rooms.js b/webapp/graphql/Rooms.js
index 077d73f9a..4e9cd0209 100644
--- a/webapp/graphql/Rooms.js
+++ b/webapp/graphql/Rooms.js
@@ -7,6 +7,7 @@ export const createRoom = () => gql`
       roomId
       roomName
       lastMessageAt
+      createdAt
       unreadCount
       #avatar
       users {
@@ -29,6 +30,7 @@ export const roomQuery = () => gql`
       roomName
       avatar
       lastMessageAt
+      createdAt
       unreadCount
       lastMessage {
         _id

From 074711dd907fc216d386f78dfc9d9a1423e36664 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Thu, 20 Jul 2023 14:31:57 +0200
Subject: [PATCH 32/38] Fix: order createdAt_desc & lastMessageAt_desc

---
 webapp/components/Chat/Chat.vue | 2 +-
 webapp/graphql/Rooms.js         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue
index dd724d200..fd14ced6e 100644
--- a/webapp/components/Chat/Chat.vue
+++ b/webapp/components/Chat/Chat.vue
@@ -257,7 +257,7 @@ export default {
         const rmsIds = []
         ;[...Room, ...this.rooms].forEach((r) => {
           if (!rmsIds.find((v) => v === r.id)) {
-            rms.unshift(this.fixRoomObject(r))
+            rms.push(this.fixRoomObject(r))
             rmsIds.push(r.id)
           }
         })
diff --git a/webapp/graphql/Rooms.js b/webapp/graphql/Rooms.js
index 4e9cd0209..46f089e36 100644
--- a/webapp/graphql/Rooms.js
+++ b/webapp/graphql/Rooms.js
@@ -24,7 +24,7 @@ export const createRoom = () => gql`
 
 export const roomQuery = () => gql`
   query Room($first: Int, $offset: Int, $id: ID) {
-    Room(first: $first, offset: $offset, id: $id, orderBy: [lastMessageAt_desc, createdAt_desc]) {
+    Room(first: $first, offset: $offset, id: $id, orderBy: [createdAt_desc, lastMessageAt_desc]) {
       id
       roomId
       roomName

From db3c625dfb0100c7c5b294d22c23e1bf0ad1e7e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 20 Jul 2023 15:39:11 +0200
Subject: [PATCH 33/38] Revert general change of PR

---
 webapp/constants/chat.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/constants/chat.js b/webapp/constants/chat.js
index 082d018f3..181d88e0e 100644
--- a/webapp/constants/chat.js
+++ b/webapp/constants/chat.js
@@ -58,7 +58,7 @@ const STYLE = {
 
     message: {
       background: styleData.chatMessageBgOthers,
-      backgroundMe: styleData.colorPrimaryLight,
+      backgroundMe: styleData.chatMessageBgMe,
       color: styleData.chatMessageColor,
       colorStarted: '#9ca6af',
       backgroundDeleted: '#dadfe2',

From 65e5545c9a2396340699632b8ba755160e938acd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 20 Jul 2023 15:40:21 +0200
Subject: [PATCH 34/38] Test branding

---
 webapp/assets/styles/imports/_branding.scss | 127 +++++++++++++++++++-
 1 file changed, 126 insertions(+), 1 deletion(-)

diff --git a/webapp/assets/styles/imports/_branding.scss b/webapp/assets/styles/imports/_branding.scss
index 75058595d..1bb4291af 100644
--- a/webapp/assets/styles/imports/_branding.scss
+++ b/webapp/assets/styles/imports/_branding.scss
@@ -2,4 +2,129 @@
     *
     * Here, all SCSS variables and classes can be adapted to your custom design. 
     *
-*/
\ No newline at end of file
+*/
+
+$color-primary: rgb(110, 139, 135);
+$color-primary-light: rgb(161, 179, 177);
+$color-primary-dark: rgb(81, 99, 97);
+$color-primary-active: rgb(123, 160, 149);
+$color-primary-inverse: rgb(241, 248, 243);
+
+$color-secondary: rgb(166, 255, 0);
+$color-secondary-active: rgb(188, 255, 130);
+$color-secondary-inverse: rgb(241, 255, 225);
+
+$font-family-heading: 'Overpass', Helvetica, Arial, Lucida, sans-serif;
+$font-family-text: 'Overpass', Helvetica, Arial, Lucida, sans-serif;
+
+$color-header-background: $color-primary;
+$color-footer-background: $color-secondary;
+
+$color-locale-menu: $color-secondary;
+
+$color-donation-bar: $color-secondary;
+
+$color-toast-blue: rgb(0, 142, 230);
+$color-toast-green: $color-primary;
+
+$chat-message-bg-me: $color-primary-light;
+// $chat-message-color: $text-color-base;
+// $chat-message-bg-others: $color-neutral-80;
+// $chat-sidemenu-bg: $color-secondary-active;
+// $chat-new-message-color: $color-secondary-active;
+// $chat-message-timestamp: $text-color-soft;
+$chat-message-checkmark-seen: $color-secondary;
+$chat-message-checkmark: $text-color-inverse;
+
+
+.main-navigation a {
+  color: #fff;
+  text-transform: uppercase;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.main-navigation a:hover {
+  color: hsla(0, 0%, 100%, .8);
+}
+
+.main-navigation .router-link-exact-active {
+  color: #A6FF00 !important;
+}
+
+.main-navigation .locale-menu {
+  color: #fff;
+}
+
+.main-navigation .base-button {
+  color: #fff;
+}
+
+#nav-search-box .hc-hashtag a {
+  color: #17b53f;
+}
+
+#footer {
+  background-color: $color-secondary;
+}
+
+#footer a {
+  color: $color-primary;
+}
+
+.avatar-menu .profile-avatar {
+  color: $color-primary;
+}
+
+.profile-avatar .initials {
+  color: $color-primary;
+}
+
+.branding-menu .ds-text {
+  font-family: 'Overpass', Helvetica, Arial, Lucida, sans-serif;
+  font-weight: 500;
+  text-transform: uppercase;
+  font-size: 16px;
+}
+
+/* avoid uppercase for user slug */
+span.slug {
+  text-transform: none;
+}
+
+.ds-footer {
+  font-family: 'Overpass', Helvetica, Arial, Lucida, sans-serif;
+  text-transform: uppercase;
+  font-size: 16px;
+  font-weight: 300;
+}
+
+/* chips on group teaser */
+a.group-teaser footer .ds-chip-primary {
+  background-color: $color-primary;
+}
+
+/* chips on group profile */
+.group-profile .ds-chip-primary {
+  background-color: $color-primary;
+}
+
+/* number count color */
+div.ds-number>p.ds-number-count {
+  color: $color-primary;
+}
+
+/* active tab border bottom color */
+div.tab-navigation li.Tabs__tab {
+  border-bottom-color: $color-primary;
+}
+
+/* submit button color group form */
+form.group-form button.ds-button-primary {
+  background-color: $color-primary;
+}
+
+/* color of active filter tags in post teaser */
+span.category-tag.filterActive {
+  background-color: $color-primary;
+}
\ No newline at end of file

From b26e4545629a29b2c718fbbdb031afe35c727199 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 20 Jul 2023 15:42:40 +0200
Subject: [PATCH 35/38] Fix linting

---
 webapp/components/Chat/Chat.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue
index fd14ced6e..c18c12a58 100644
--- a/webapp/components/Chat/Chat.vue
+++ b/webapp/components/Chat/Chat.vue
@@ -405,7 +405,7 @@ export default {
       // This fixes the room object which arrives from the backend
       const fixedRoom = {
         ...room,
-        index: room.lastMessage? room.lastMessage.date : room.createdAt,
+        index: room.lastMessage ? room.lastMessage.date : room.createdAt,
         lastMessage: room.lastMessage
           ? {
               ...room.lastMessage,

From 39eef13a51a561b3a015e8502ea6cc1bb80ce174 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Thu, 20 Jul 2023 16:45:44 +0200
Subject: [PATCH 36/38] Change the ocelot chat room badge color

---
 webapp/assets/_new/styles/export.scss       | 3 +++
 webapp/assets/_new/styles/tokens.scss       | 2 ++
 webapp/assets/styles/imports/_branding.scss | 7 ++-----
 webapp/constants/chat.js                    | 4 ++--
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/webapp/assets/_new/styles/export.scss b/webapp/assets/_new/styles/export.scss
index 5b866d6b7..e29c014e2 100644
--- a/webapp/assets/_new/styles/export.scss
+++ b/webapp/assets/_new/styles/export.scss
@@ -31,4 +31,7 @@
     chatMessageTimestamp: $chat-message-timestamp;
     chatMessageCheckmarkSeen: $chat-message-checkmark-seen;
     chatMessageCheckmark: $chat-message-checkmark;
+
+    chatRoomBackgroundCounterBadge: $chat-room-background-counter-badge;
+    chatRoomColorCounterBadge: $chat-room-color-counter-badge;
   }
\ No newline at end of file
diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss
index ef5086240..3e189abf2 100644
--- a/webapp/assets/_new/styles/tokens.scss
+++ b/webapp/assets/_new/styles/tokens.scss
@@ -420,3 +420,5 @@ $chat-new-message-color: $color-secondary-active;
 $chat-message-timestamp: $text-color-soft;
 $chat-message-checkmark-seen: $text-color-secondary;
 $chat-message-checkmark: $text-color-soft;
+$chat-room-color-counter-badge: $color-primary;
+$chat-room-background-counter-badge: $color-secondary;
diff --git a/webapp/assets/styles/imports/_branding.scss b/webapp/assets/styles/imports/_branding.scss
index 1bb4291af..733f2856c 100644
--- a/webapp/assets/styles/imports/_branding.scss
+++ b/webapp/assets/styles/imports/_branding.scss
@@ -28,13 +28,10 @@ $color-toast-blue: rgb(0, 142, 230);
 $color-toast-green: $color-primary;
 
 $chat-message-bg-me: $color-primary-light;
-// $chat-message-color: $text-color-base;
-// $chat-message-bg-others: $color-neutral-80;
-// $chat-sidemenu-bg: $color-secondary-active;
-// $chat-new-message-color: $color-secondary-active;
-// $chat-message-timestamp: $text-color-soft;
 $chat-message-checkmark-seen: $color-secondary;
 $chat-message-checkmark: $text-color-inverse;
+$chat-room-color-counter-badge: $color-primary;
+$chat-room-background-counter-badge: $color-secondary;
 
 
 .main-navigation a {
diff --git a/webapp/constants/chat.js b/webapp/constants/chat.js
index 181d88e0e..de391707d 100644
--- a/webapp/constants/chat.js
+++ b/webapp/constants/chat.js
@@ -109,8 +109,8 @@ const STYLE = {
       colorTimestamp: '#a2aeb8',
       colorStateOnline: '#4caf50',
       colorStateOffline: '#9ca6af',
-      backgroundCounterBadge: '#0696c7',
-      colorCounterBadge: '#fff',
+      backgroundCounterBadge: styleData.chatRoomBackgroundCounterBadge,
+      colorCounterBadge: styleData.chatRoomColorCounterBadge,
     },
 
     emoji: {

From 69394d800b6766e87a39c6a065359d90746cdf91 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Thu, 20 Jul 2023 16:53:10 +0200
Subject: [PATCH 37/38] Change default ocelot badge color to
 text-color-inverted.

---
 webapp/assets/_new/styles/tokens.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss
index 3e189abf2..dd3a042d1 100644
--- a/webapp/assets/_new/styles/tokens.scss
+++ b/webapp/assets/_new/styles/tokens.scss
@@ -420,5 +420,5 @@ $chat-new-message-color: $color-secondary-active;
 $chat-message-timestamp: $text-color-soft;
 $chat-message-checkmark-seen: $text-color-secondary;
 $chat-message-checkmark: $text-color-soft;
-$chat-room-color-counter-badge: $color-primary;
+$chat-room-color-counter-badge: $text-color-inverse;
 $chat-room-background-counter-badge: $color-secondary;

From fa9b8390812a7f89648719876f351b1d8110df56 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Thu, 20 Jul 2023 16:56:33 +0200
Subject: [PATCH 38/38] Remove client customizing.

---
 webapp/assets/styles/imports/_branding.scss | 124 +-------------------
 1 file changed, 1 insertion(+), 123 deletions(-)

diff --git a/webapp/assets/styles/imports/_branding.scss b/webapp/assets/styles/imports/_branding.scss
index 733f2856c..75058595d 100644
--- a/webapp/assets/styles/imports/_branding.scss
+++ b/webapp/assets/styles/imports/_branding.scss
@@ -2,126 +2,4 @@
     *
     * Here, all SCSS variables and classes can be adapted to your custom design. 
     *
-*/
-
-$color-primary: rgb(110, 139, 135);
-$color-primary-light: rgb(161, 179, 177);
-$color-primary-dark: rgb(81, 99, 97);
-$color-primary-active: rgb(123, 160, 149);
-$color-primary-inverse: rgb(241, 248, 243);
-
-$color-secondary: rgb(166, 255, 0);
-$color-secondary-active: rgb(188, 255, 130);
-$color-secondary-inverse: rgb(241, 255, 225);
-
-$font-family-heading: 'Overpass', Helvetica, Arial, Lucida, sans-serif;
-$font-family-text: 'Overpass', Helvetica, Arial, Lucida, sans-serif;
-
-$color-header-background: $color-primary;
-$color-footer-background: $color-secondary;
-
-$color-locale-menu: $color-secondary;
-
-$color-donation-bar: $color-secondary;
-
-$color-toast-blue: rgb(0, 142, 230);
-$color-toast-green: $color-primary;
-
-$chat-message-bg-me: $color-primary-light;
-$chat-message-checkmark-seen: $color-secondary;
-$chat-message-checkmark: $text-color-inverse;
-$chat-room-color-counter-badge: $color-primary;
-$chat-room-background-counter-badge: $color-secondary;
-
-
-.main-navigation a {
-  color: #fff;
-  text-transform: uppercase;
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.main-navigation a:hover {
-  color: hsla(0, 0%, 100%, .8);
-}
-
-.main-navigation .router-link-exact-active {
-  color: #A6FF00 !important;
-}
-
-.main-navigation .locale-menu {
-  color: #fff;
-}
-
-.main-navigation .base-button {
-  color: #fff;
-}
-
-#nav-search-box .hc-hashtag a {
-  color: #17b53f;
-}
-
-#footer {
-  background-color: $color-secondary;
-}
-
-#footer a {
-  color: $color-primary;
-}
-
-.avatar-menu .profile-avatar {
-  color: $color-primary;
-}
-
-.profile-avatar .initials {
-  color: $color-primary;
-}
-
-.branding-menu .ds-text {
-  font-family: 'Overpass', Helvetica, Arial, Lucida, sans-serif;
-  font-weight: 500;
-  text-transform: uppercase;
-  font-size: 16px;
-}
-
-/* avoid uppercase for user slug */
-span.slug {
-  text-transform: none;
-}
-
-.ds-footer {
-  font-family: 'Overpass', Helvetica, Arial, Lucida, sans-serif;
-  text-transform: uppercase;
-  font-size: 16px;
-  font-weight: 300;
-}
-
-/* chips on group teaser */
-a.group-teaser footer .ds-chip-primary {
-  background-color: $color-primary;
-}
-
-/* chips on group profile */
-.group-profile .ds-chip-primary {
-  background-color: $color-primary;
-}
-
-/* number count color */
-div.ds-number>p.ds-number-count {
-  color: $color-primary;
-}
-
-/* active tab border bottom color */
-div.tab-navigation li.Tabs__tab {
-  border-bottom-color: $color-primary;
-}
-
-/* submit button color group form */
-form.group-form button.ds-button-primary {
-  background-color: $color-primary;
-}
-
-/* color of active filter tags in post teaser */
-span.category-tag.filterActive {
-  background-color: $color-primary;
-}
\ No newline at end of file
+*/
\ No newline at end of file