Merge branch 'master' into 6500-refactor-filter-menu

.github/file-filters.yml

@@ -1,4 +1,5 @@
 backend: &backend
+  - '.github/workflows/test-backend.yml'
   - 'backend/**/*'
   - 'neo4j/**/*'
 
@@ -6,4 +7,5 @@ docker: &docker
   - 'docker-compose.*'
 
 webapp: &webapp
+  - '.github/workflows/test-webapp.yml'
   - 'webapp/**/*'

.github/workflows/cleanup-cache-at-pr-closing.yml

@@ -0,0 +1,42 @@
+###############################################################################
+# A Github repo has max 10 GB of cache.
+# https://github.blog/changelog/2021-11-23-github-actions-cache-size-is-now-increased-to-10gb-per-repository/
+#
+# To avoid "cache thrashing" by their cache eviction policy it is recommended
+# to apply a cache cleanup workflow at PR closing to dele cache leftovers of
+# the current branch:
+# https://docs.github.com/en/actions/using-workflows/caching-dependencies-to-speed-up-workflows#force-deleting-cache-entries
+###############################################################################
+
+name: ocelot.social cache cleanup on pr closing
+
+on:
+  pull_request:
+    types:
+      - closed
+
+jobs:
+  clean-branch-cache:
+    name: Cleanup branch cache
+    runs-on: ubuntu-latest
+    continue-on-error: true
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Cleanup
+        run: |
+          gh extension install actions/gh-actions-cache
+          REPO=${{ github.repository }}
+          BRANCH="refs/pull/${{ github.event.pull_request.number }}/merge"
+          echo "Fetching list of cache key"
+          cacheKeysForPR=$(gh actions-cache list -R $REPO -B $BRANCH | cut -f 1 )
+          set +e
+          echo "Deleting caches..."
+          for cacheKey in $cacheKeysForPR
+          do
+              gh actions-cache delete $cacheKey -R $REPO -B $BRANCH --confirm
+          done
+          echo "Done"
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test-backend.yml

@@ -1,7 +1,7 @@
 name: ocelot.social backend test CI
 
 
-on: [push]
+on: push
 
 jobs:
   files-changed:
@@ -13,7 +13,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3.3.0
 
-      - name: Check for frontend file changes
+      - name: Check for backend file changes
         uses: dorny/paths-filter@v2.11.1
         id: changes
         with:
@@ -34,12 +34,13 @@ jobs:
         run: |
           docker build --target community -t "ocelotsocialnetwork/neo4j-community:test" neo4j/
           docker save "ocelotsocialnetwork/neo4j-community:test" > /tmp/neo4j.tar
-
+      
-      - name: Upload Artifact
+      - name: Cache docker images
-        uses: actions/upload-artifact@v3
+        id: cache-neo4j
+        uses: actions/cache/save@v3.3.1
         with:
-          name: docker-neo4j-image
           path: /tmp/neo4j.tar
+          key: ${{ github.run_id }}-backend-neo4j-cache
 
   build_test_backend:
     name: Docker Build Test - Backend
@@ -54,12 +55,13 @@ jobs:
         run: |
           docker build --target test -t "ocelotsocialnetwork/backend:test" backend/
           docker save "ocelotsocialnetwork/backend:test" > /tmp/backend.tar
-
+      
-      - name: Upload Artifact
+      - name: Cache docker images
-        uses: actions/upload-artifact@v3
+        id: cache-backend
+        uses: actions/cache/save@v3.3.1
         with:
-          name: docker-backend-test
           path: /tmp/backend.tar
+          key: ${{ github.run_id }}-backend-cache
 
   lint_backend:
     name: Lint Backend
@@ -84,28 +86,29 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v3
 
-      - name: Download Docker Image (Neo4J)
+      - name: Restore Neo4J cache
-        uses: actions/download-artifact@v3
+        uses: actions/cache/restore@v3.3.1
         with:
-          name: docker-neo4j-image
+          path: /tmp/neo4j.tar
-          path: /tmp
+          key: ${{ github.run_id }}-backend-neo4j-cache
+          fail-on-cache-miss: true
 
-      - name: Load Docker Image
+      - name: Restore Backend cache
-        run: docker load < /tmp/neo4j.tar
+        uses: actions/cache/restore@v3.3.1
-
-      - name: Download Docker Image (Backend)
-        uses: actions/download-artifact@v3
         with:
-          name: docker-backend-test
+          path: /tmp/backend.tar
-          path: /tmp
+          key: ${{ github.run_id }}-backend-cache
+          fail-on-cache-miss: true
 
-      - name: Load Docker Image
+      - name: Load Docker Images
-        run: docker load < /tmp/backend.tar
+        run: |
+          docker load < /tmp/neo4j.tar
+          docker load < /tmp/backend.tar
 
-      - name: backend | copy env files webapp
+      - name: backend | copy env files
-        run: cp webapp/.env.template webapp/.env
+        run: |
-      - name: backend | copy env files backend
+          cp webapp/.env.template webapp/.env
-        run: cp backend/.env.template backend/.env
+          cp backend/.env.template backend/.env
 
       - name: backend | docker-compose
         run: docker-compose -f docker-compose.yml -f docker-compose.test.yml up --detach --no-deps neo4j backend
@@ -118,3 +121,20 @@ jobs:
 
       - name: backend | Unit test incl. coverage check
         run: docker-compose exec -T backend yarn test
+
+  cleanup:
+    name: Cleanup
+    if: ${{ needs.files-changed.outputs.backend == 'true' || needs.files-changed.outputs.docker == 'true' }}
+    needs: [files-changed, unit_test_backend]
+    runs-on: ubuntu-latest
+    continue-on-error: true
+    steps:
+      - name: Delete cache
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh extension install actions/gh-actions-cache
+          KEY="${{ github.run_id }}-backend-neo4j-cache"
+          gh actions-cache delete $KEY -R Ocelot-Social-Community/Ocelot-Social --confirm
+          KEY="${{ github.run_id }}-backend-cache"
+          gh actions-cache delete $KEY -R Ocelot-Social-Community/Ocelot-Social --confirm

.github/workflows/test-e2e.yml

@@ -1,9 +1,54 @@
 name: ocelot.social end-to-end test CI
+
 on: push
 
 jobs:
+  docker_preparation:
+    name: Fullstack test preparation
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Copy env files
+        run: |
+          cp webapp/.env.template webapp/.env
+          cp backend/.env.template backend/.env
+
+      - name: Build docker images
+        run: |
+          mkdir /tmp/images
+          docker build --target community -t "ocelotsocialnetwork/neo4j-community:test" neo4j/
+          docker save "ocelotsocialnetwork/neo4j-community:test" > /tmp/images/neo4j.tar
+          docker build --target test -t "ocelotsocialnetwork/backend:test" backend/
+          docker save "ocelotsocialnetwork/backend:test" > /tmp/images/backend.tar
+          docker build --target test -t "ocelotsocialnetwork/webapp:test" webapp/
+          docker save "ocelotsocialnetwork/webapp:test" > /tmp/images/webapp.tar
+
+      - name: Install cypress requirements
+        run: |
+          wget --no-verbose -O /opt/cucumber-json-formatter "https://github.com/cucumber/json-formatter/releases/download/v19.0.0/cucumber-json-formatter-linux-386"
+          cd backend
+          yarn install
+          yarn build
+          cd ..
+          yarn install
+      
+      - name: Cache docker images
+        id: cache
+        uses: actions/cache/save@v3.3.1
+        with:
+          path: |
+            /opt/cucumber-json-formatter
+            /home/runner/.cache/Cypress
+            /home/runner/work/Ocelot-Social/Ocelot-Social
+            /tmp/images/
+          key: ${{ github.run_id }}-e2e-preparation-cache
+
   fullstack_tests:
     name: Fullstack tests
+    if: success()
+    needs: docker_preparation
     runs-on: ubuntu-latest
     env:
       jobs: 8
@@ -12,34 +57,56 @@ jobs:
         # run copies of the current job in parallel
         job: [1, 2, 3, 4, 5, 6, 7, 8]
     steps:
-      - name: Checkout code
+      - name: Restore cache
-        uses: actions/checkout@v3
+        uses: actions/cache/restore@v3.3.1
+        id: cache
+        with:
+          path: |
+            /opt/cucumber-json-formatter
+            /home/runner/.cache/Cypress
+            /home/runner/work/Ocelot-Social/Ocelot-Social
+            /tmp/images/
+          key: ${{ github.run_id }}-e2e-preparation-cache
+          fail-on-cache-miss: true
 
-      - name: webapp | copy env file
+      - name: Boot up test system | docker-compose
-        run: cp webapp/.env.template webapp/.env
-
-      - name: backend | copy env file
-        run: cp backend/.env.template backend/.env
-
-      - name: boot up test system | docker-compose
-        run: docker-compose -f docker-compose.yml -f docker-compose.test.yml up --detach --no-deps webapp neo4j backend
-
-      - name: cypress | Fullstack tests
-        id: e2e-tests
         run: |
-          cd backend
+          chmod +x /opt/cucumber-json-formatter
-          yarn install
+          sudo ln -fs /opt/cucumber-json-formatter /usr/bin/cucumber-json-formatter
-          yarn build
+          docker load < /tmp/images/neo4j.tar
-          cd ..
+          docker load < /tmp/images/backend.tar
-          yarn install
+          docker load < /tmp/images/webapp.tar
-          yarn run cypress:run --spec $(cypress/parallel-features.sh ${{ matrix.job }} ${{ env.jobs }} )
+          docker-compose -f docker-compose.yml -f docker-compose.test.yml up --detach --no-deps webapp neo4j backend
+          sleep 90s
 
-      ##########################################################################
+      - name: Full stack tests | run tests
-      # UPLOAD SCREENSHOTS - IF TESTS FAIL #####################################
+        id: e2e-tests
-      ##########################################################################
+        run: yarn run cypress:run --spec $(cypress/parallel-features.sh ${{ matrix.job }} ${{ env.jobs }} )
-      - name: Full stack tests | if any test failed, upload screenshots
+
+      - name: Full stack tests | if tests failed, compile html report
+        if: ${{ failure() && steps.e2e-tests.conclusion == 'failure' }}
+        run: |
+          cd cypress/
+          node create-cucumber-html-report.js
+
+      - name: Full stack tests | if tests failed, upload report
+        id: e2e-report
         if: ${{ failure() && steps.e2e-tests.conclusion == 'failure' }}
         uses: actions/upload-artifact@v3
         with:
-          name: cypress-screenshots
+          name: ocelot-e2e-test-report-pr${{ needs.docker_preparation.outputs.pr-number }}
-          path: cypress/screenshots/
+          path: /home/runner/work/Ocelot-Social/Ocelot-Social/cypress/reports/cucumber_html_report
+
+  cleanup:
+    name: Cleanup
+    needs: [docker_preparation, fullstack_tests]
+    runs-on: ubuntu-latest
+    continue-on-error: true
+    steps:
+      - name: Delete cache
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh extension install actions/gh-actions-cache
+          KEY="${{ github.run_id }}-e2e-preparation-cache"
+          gh actions-cache delete $KEY -R Ocelot-Social-Community/Ocelot-Social --confirm

.github/workflows/test-webapp.yml

@@ -1,7 +1,7 @@
 name: ocelot.social webapp test CI
 
 
-on: [push]
+on: push
 
 jobs:
   files-changed:
@@ -23,7 +23,7 @@ jobs:
 
   prepare:
     name: Prepare
-    if: needs.files-changed.outputs.webapp
+    if: needs.files-changed.outputs.webapp == 'true'
     needs: files-changed
     runs-on: ubuntu-latest
     steps:
@@ -34,30 +34,30 @@ jobs:
         run: |
           scripts/translations/sort.sh
           scripts/translations/missing-keys.sh
-          
+
   build_test_webapp:
     name: Docker Build Test - Webapp
-    if: needs.files-changed.outputs.docker == 'true' || needs.files-changed.outputs.webapp
+    if: needs.files-changed.outputs.docker == 'true' || needs.files-changed.outputs.webapp == 'true'
     needs: [files-changed, prepare]
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
 
-      - name: webapp | Build 'test' image
+      - name: Webapp | Build 'test' image
         run: |
           docker build --target test -t "ocelotsocialnetwork/webapp:test" webapp/
           docker save "ocelotsocialnetwork/webapp:test" > /tmp/webapp.tar
 
-      - name: Upload Artifact
+      - name: Cache docker image
-        uses: actions/upload-artifact@v3
+        uses: actions/cache/save@v3.3.1
         with:
-          name: docker-webapp-test
           path: /tmp/webapp.tar
+          key: ${{ github.run_id }}-webapp-cache
 
   lint_webapp:
     name: Lint Webapp
-    if: needs.files-changed.outputs.webapp
+    if: needs.files-changed.outputs.webapp == 'true'
     needs: files-changed
     runs-on: ubuntu-latest
     steps:
@@ -69,7 +69,7 @@ jobs:
 
   unit_test_webapp:
     name: Unit Tests - Webapp
-    if: needs.files-changed.outputs.docker == 'true' || needs.files-changed.outputs.webapp
+    if: needs.files-changed.outputs.docker == 'true' || needs.files-changed.outputs.webapp == 'true'
     needs: [files-changed, build_test_webapp]
     runs-on: ubuntu-latest
     permissions: 
@@ -78,20 +78,19 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v3
 
-      - name: Download Docker Image (Webapp)
+      - name: Restore webapp cache
-        uses: actions/download-artifact@v3
+        uses: actions/cache/restore@v3.3.1
         with:
-          name: docker-webapp-test
+          path: /tmp/webapp.tar
-          path: /tmp
+          key: ${{ github.run_id }}-webapp-cache
 
       - name: Load Docker Image
         run: docker load < /tmp/webapp.tar
 
-      - name: backend | copy env files webapp
+      - name: Copy env files
-        run: cp webapp/.env.template webapp/.env
+        run: |
-
+          cp webapp/.env.template webapp/.env
-      - name: backend | copy env files backend
+          cp backend/.env.template backend/.env
-        run: cp backend/.env.template backend/.env
 
       - name: backend | docker-compose
         run: docker-compose -f docker-compose.yml -f docker-compose.test.yml up --detach --no-deps webapp
@@ -99,3 +98,18 @@ jobs:
       - name: webapp | Unit tests incl. coverage check
         run: docker-compose exec -T webapp yarn test
 
+  cleanup:
+    name: Cleanup
+    if: ${{ needs.files-changed.outputs.docker == 'true' || needs.files-changed.outputs.webapp == 'true' }}
+    needs: [files-changed, unit_test_webapp]
+    runs-on: ubuntu-latest
+    continue-on-error: true
+    steps:
+      - name: Delete cache
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh extension install actions/gh-actions-cache
+          KEY="${{ github.run_id }}-webapp-cache"
+          gh actions-cache delete $KEY -R Ocelot-Social-Community/Ocelot-Social --confirm
+

backend/jest.config.js

@@ -11,7 +11,7 @@ module.exports = {
   ],
   coverageThreshold: {
     global: {
-      lines: 70,
+      lines: 67,
     },
   },
   testMatch: ['**/src/**/?(*.)+(spec|test).ts?(x)'],

backend/src/graphql/messages.ts

@@ -6,6 +6,13 @@ export const createMessageMutation = () => {
       CreateMessage(roomId: $roomId, content: $content) {
         id
         content
+        senderId
+        username
+        avatar
+        date
+        saved
+        distributed
+        seen
       }
     }
   `
@@ -13,16 +20,31 @@ export const createMessageMutation = () => {
 
 export const messageQuery = () => {
   return gql`
-    query ($roomId: ID!) {
+    query ($roomId: ID!, $first: Int, $offset: Int) {
-      Message(roomId: $roomId) {
+      Message(roomId: $roomId, first: $first, offset: $offset, orderBy: indexId_desc) {
         _id
         id
+        indexId
         content
         senderId
+        author {
+          id
+        }
         username
         avatar
         date
+        saved
+        distributed
+        seen
       }
     }
   `
 }
+
+export const markMessagesAsSeen = () => {
+  return gql`
+    mutation ($messageIds: [String!]) {
+      MarkMessagesAsSeen(messageIds: $messageIds)
+    }
+  `
+}

backend/src/graphql/rooms.ts

@@ -6,18 +6,10 @@ export const createRoomMutation = () => {
       CreateRoom(userId: $userId) {
         id
         roomId
-      }
-    }
-  `
-}
-
-export const roomQuery = () => {
-  return gql`
-    query {
-      Room {
-        id
-        roomId
         roomName
+        lastMessageAt
+        unreadCount
+        #avatar
         users {
           _id
           id
@@ -30,3 +22,46 @@ export const roomQuery = () => {
     }
   `
 }
+
+export const roomQuery = () => {
+  return gql`
+    query Room($first: Int, $offset: Int, $id: ID) {
+      Room(first: $first, offset: $offset, id: $id, orderBy: lastMessageAt_desc) {
+        id
+        roomId
+        roomName
+        avatar
+        lastMessageAt
+        unreadCount
+        lastMessage {
+          _id
+          id
+          content
+          senderId
+          username
+          avatar
+          date
+          saved
+          distributed
+          seen
+        }
+        users {
+          _id
+          id
+          name
+          avatar {
+            url
+          }
+        }
+      }
+    }
+  `
+}
+
+export const unreadRoomsQuery = () => {
+  return gql`
+    query {
+      UnreadRooms
+    }
+  `
+}

backend/src/middleware/chatMiddleware.ts

@@ -0,0 +1,60 @@
+import { isArray } from 'lodash'
+
+const setRoomProps = (room) => {
+  if (room.users) {
+    room.users.forEach((user) => {
+      user._id = user.id
+    })
+  }
+  if (room.lastMessage) {
+    room.lastMessage._id = room.lastMessage.id
+  }
+}
+
+const setMessageProps = (message, context) => {
+  message._id = message.id
+  if (message.senderId !== context.user.id) {
+    message.distributed = true
+  }
+}
+
+const roomProperties = async (resolve, root, args, context, info) => {
+  const resolved = await resolve(root, args, context, info)
+  if (resolved) {
+    if (isArray(resolved)) {
+      resolved.forEach((room) => {
+        setRoomProps(room)
+      })
+    } else {
+      setRoomProps(resolved)
+    }
+  }
+  return resolved
+}
+
+const messageProperties = async (resolve, root, args, context, info) => {
+  const resolved = await resolve(root, args, context, info)
+  if (resolved) {
+    if (isArray(resolved)) {
+      resolved.forEach((message) => {
+        setMessageProps(message, context)
+      })
+    } else {
+      setMessageProps(resolved, context)
+    }
+  }
+  return resolved
+}
+
+export default {
+  Query: {
+    Room: roomProperties,
+    Message: messageProperties,
+  },
+  Mutation: {
+    CreateRoom: roomProperties,
+  },
+  Subscription: {
+    chatMessageAdded: messageProperties,
+  },
+}

backend/src/middleware/index.ts

@@ -14,6 +14,7 @@ import login from './login/loginMiddleware'
 import sentry from './sentryMiddleware'
 import languages from './languages/languages'
 import userInteractions from './userInteractions'
+import chatMiddleware from './chatMiddleware'
 
 export default (schema) => {
   const middlewares = {
@@ -31,6 +32,7 @@ export default (schema) => {
     orderBy,
     languages,
     userInteractions,
+    chatMiddleware,
   }
 
   let order = [
@@ -49,6 +51,7 @@ export default (schema) => {
     'softDelete',
     'includedFields',
     'orderBy',
+    'chatMiddleware',
   ]
 
   // add permisions middleware at the first position (unless we're seeding)

backend/src/middleware/permissionsMiddleware.ts

@@ -408,6 +408,7 @@ export default shield(
       getInviteCode: isAuthenticated, // and inviteRegistration
       Room: isAuthenticated,
       Message: isAuthenticated,
+      UnreadRooms: isAuthenticated,
     },
     Mutation: {
       '*': deny,
@@ -463,6 +464,7 @@ export default shield(
       saveCategorySettings: isAuthenticated,
       CreateRoom: isAuthenticated,
       CreateMessage: isAuthenticated,
+      MarkMessagesAsSeen: isAuthenticated,
     },
     User: {
       email: or(isMyOwn, isAdmin),

backend/src/schema/resolvers/messages.spec.ts

@@ -1,13 +1,15 @@
 import { createTestClient } from 'apollo-server-testing'
 import Factory, { cleanDatabase } from '../../db/factories'
 import { getNeode, getDriver } from '../../db/neo4j'
-import { createRoomMutation } from '../../graphql/rooms'
+import { createRoomMutation, roomQuery } from '../../graphql/rooms'
-import { createMessageMutation, messageQuery } from '../../graphql/messages'
+import { createMessageMutation, messageQuery, markMessagesAsSeen } from '../../graphql/messages'
-import createServer from '../../server'
+import createServer, { pubsub } from '../../server'
 
 const driver = getDriver()
 const neode = getNeode()
 
+const pubsubSpy = jest.spyOn(pubsub, 'publish')
+
 let query
 let mutate
 let authenticatedUser
@@ -22,6 +24,9 @@ beforeAll(async () => {
         driver,
         neode,
         user: authenticatedUser,
+        cypherParams: {
+          currentUserId: authenticatedUser ? authenticatedUser.id : null,
+        },
       }
     },
   })
@@ -55,6 +60,10 @@ describe('Message', () => {
   })
 
   describe('create message', () => {
+    beforeEach(() => {
+      jest.clearAllMocks()
+    })
+
     describe('unauthenticated', () => {
       it('throws authorization error', async () => {
         await expect(
@@ -77,7 +86,7 @@ describe('Message', () => {
       })
 
       describe('room does not exist', () => {
-        it('returns null', async () => {
+        it('returns null and does not publish subscription', async () => {
           await expect(
             mutate({
               mutation: createMessageMutation(),
@@ -92,6 +101,7 @@ describe('Message', () => {
               CreateMessage: null,
             },
           })
+          expect(pubsubSpy).not.toBeCalled()
         })
       })
 
@@ -107,7 +117,7 @@ describe('Message', () => {
         })
 
         describe('user chats in room', () => {
-          it('returns the message', async () => {
+          it('returns the message and publishes subscriptions', async () => {
             await expect(
               mutate({
                 mutation: createMessageMutation(),
@@ -122,9 +132,92 @@ describe('Message', () => {
                 CreateMessage: {
                   id: expect.any(String),
                   content: 'Some nice message to other chatting user',
+                  senderId: 'chatting-user',
+                  username: 'Chatting User',
+                  avatar: expect.any(String),
+                  date: expect.any(String),
+                  saved: true,
+                  distributed: false,
+                  seen: false,
                 },
               },
             })
+            expect(pubsubSpy).toBeCalledWith('ROOM_COUNT_UPDATED', {
+              roomCountUpdated: '1',
+              userId: 'other-chatting-user',
+            })
+            expect(pubsubSpy).toBeCalledWith('CHAT_MESSAGE_ADDED', {
+              chatMessageAdded: expect.objectContaining({
+                id: expect.any(String),
+                content: 'Some nice message to other chatting user',
+                senderId: 'chatting-user',
+                username: 'Chatting User',
+                avatar: expect.any(String),
+                date: expect.any(String),
+                saved: true,
+                distributed: false,
+                seen: false,
+              }),
+              userId: 'other-chatting-user',
+            })
+          })
+
+          describe('room is updated as well', () => {
+            it('has last message set', async () => {
+              const result = await query({ query: roomQuery() })
+              await expect(result).toMatchObject({
+                errors: undefined,
+                data: {
+                  Room: [
+                    expect.objectContaining({
+                      lastMessageAt: expect.any(String),
+                      unreadCount: 0,
+                      lastMessage: expect.objectContaining({
+                        _id: result.data.Room[0].lastMessage.id,
+                        id: expect.any(String),
+                        content: 'Some nice message to other chatting user',
+                        senderId: 'chatting-user',
+                        username: 'Chatting User',
+                        avatar: expect.any(String),
+                        date: expect.any(String),
+                        saved: true,
+                        distributed: false,
+                        seen: false,
+                      }),
+                    }),
+                  ],
+                },
+              })
+            })
+          })
+
+          describe('unread count for other user', () => {
+            it('has unread count = 1', async () => {
+              authenticatedUser = await otherChattingUser.toJson()
+              await expect(query({ query: roomQuery() })).resolves.toMatchObject({
+                errors: undefined,
+                data: {
+                  Room: [
+                    expect.objectContaining({
+                      lastMessageAt: expect.any(String),
+                      unreadCount: 1,
+                      lastMessage: expect.objectContaining({
+                        _id: expect.any(String),
+                        id: expect.any(String),
+                        content: 'Some nice message to other chatting user',
+                        senderId: 'chatting-user',
+                        username: 'Chatting User',
+                        avatar: expect.any(String),
+                        date: expect.any(String),
+                        saved: true,
+                        distributed: false,
+                        seen: false,
+                      }),
+                    }),
+                  ],
+                },
+              })
+            })
           })
         })
 
@@ -212,11 +305,15 @@ describe('Message', () => {
                 {
                   id: expect.any(String),
                   _id: result.data.Message[0].id,
+                  indexId: 0,
                   content: 'Some nice message to other chatting user',
                   senderId: 'chatting-user',
                   username: 'Chatting User',
                   avatar: expect.any(String),
                   date: expect.any(String),
+                  saved: true,
+                  distributed: true,
+                  seen: false,
                 },
               ],
             },
@@ -253,17 +350,65 @@ describe('Message', () => {
             ).resolves.toMatchObject({
               errors: undefined,
               data: {
-                Message: expect.arrayContaining([
+                Message: [
                   expect.objectContaining({
                     id: expect.any(String),
+                    indexId: 0,
                     content: 'Some nice message to other chatting user',
                     senderId: 'chatting-user',
                     username: 'Chatting User',
                     avatar: expect.any(String),
                     date: expect.any(String),
+                    saved: true,
+                    distributed: true,
+                    seen: false,
                   }),
                   expect.objectContaining({
                     id: expect.any(String),
+                    indexId: 1,
+                    content: 'A nice response message to chatting user',
+                    senderId: 'other-chatting-user',
+                    username: 'Other Chatting User',
+                    avatar: expect.any(String),
+                    date: expect.any(String),
+                    saved: true,
+                    distributed: true,
+                    seen: false,
+                  }),
+                  expect.objectContaining({
+                    id: expect.any(String),
+                    indexId: 2,
+                    content: 'And another nice message to other chatting user',
+                    senderId: 'chatting-user',
+                    username: 'Chatting User',
+                    avatar: expect.any(String),
+                    date: expect.any(String),
+                    saved: true,
+                    distributed: false,
+                    seen: false,
+                  }),
+                ],
+              },
+            })
+          })
+
+          it('returns the messages paginated', async () => {
+            await expect(
+              query({
+                query: messageQuery(),
+                variables: {
+                  roomId,
+                  first: 2,
+                  offset: 0,
+                },
+              }),
+            ).resolves.toMatchObject({
+              errors: undefined,
+              data: {
+                Message: [
+                  expect.objectContaining({
+                    id: expect.any(String),
+                    indexId: 1,
                     content: 'A nice response message to chatting user',
                     senderId: 'other-chatting-user',
                     username: 'Other Chatting User',
@@ -272,13 +417,40 @@ describe('Message', () => {
                   }),
                   expect.objectContaining({
                     id: expect.any(String),
+                    indexId: 2,
                     content: 'And another nice message to other chatting user',
                     senderId: 'chatting-user',
                     username: 'Chatting User',
                     avatar: expect.any(String),
                     date: expect.any(String),
                   }),
-                ]),
+                ],
+              },
+            })
+
+            await expect(
+              query({
+                query: messageQuery(),
+                variables: {
+                  roomId,
+                  first: 2,
+                  offset: 2,
+                },
+              }),
+            ).resolves.toMatchObject({
+              errors: undefined,
+              data: {
+                Message: [
+                  expect.objectContaining({
+                    id: expect.any(String),
+                    indexId: 0,
+                    content: 'Some nice message to other chatting user',
+                    senderId: 'chatting-user',
+                    username: 'Chatting User',
+                    avatar: expect.any(String),
+                    date: expect.any(String),
+                  }),
+                ],
               },
             })
           })
@@ -308,4 +480,74 @@ describe('Message', () => {
       })
     })
   })
+
+  describe('marks massges as seen', () => {
+    describe('unauthenticated', () => {
+      beforeAll(() => {
+        authenticatedUser = null
+      })
+
+      it('throws authorization error', async () => {
+        await expect(
+          mutate({
+            mutation: markMessagesAsSeen(),
+            variables: {
+              messageIds: ['some-id'],
+            },
+          }),
+        ).resolves.toMatchObject({
+          errors: [{ message: 'Not Authorized!' }],
+        })
+      })
+    })
+
+    describe('authenticated', () => {
+      const messageIds: string[] = []
+      beforeAll(async () => {
+        authenticatedUser = await otherChattingUser.toJson()
+        const msgs = await query({
+          query: messageQuery(),
+          variables: {
+            roomId,
+          },
+        })
+        msgs.data.Message.forEach((m) => messageIds.push(m.id))
+      })
+
+      it('returns true', async () => {
+        await expect(
+          mutate({
+            mutation: markMessagesAsSeen(),
+            variables: {
+              messageIds,
+            },
+          }),
+        ).resolves.toMatchObject({
+          errors: undefined,
+          data: {
+            MarkMessagesAsSeen: true,
+          },
+        })
+      })
+
+      it('has seen prop set to true', async () => {
+        await expect(
+          query({
+            query: messageQuery(),
+            variables: {
+              roomId,
+            },
+          }),
+        ).resolves.toMatchObject({
+          data: {
+            Message: [
+              expect.objectContaining({ seen: true }),
+              expect.objectContaining({ seen: false }),
+              expect.objectContaining({ seen: true }),
+            ],
+          },
+        })
+      })
+    })
+  })
 })

backend/src/schema/resolvers/messages.ts

@@ -1,7 +1,36 @@
 import { neo4jgraphql } from 'neo4j-graphql-js'
 import Resolver from './helpers/Resolver'
 
+import { getUnreadRoomsCount } from './rooms'
+import { pubsub, ROOM_COUNT_UPDATED, CHAT_MESSAGE_ADDED } from '../../server'
+import { withFilter } from 'graphql-subscriptions'
+
+const setMessagesAsDistributed = async (undistributedMessagesIds, session) => {
+  return session.writeTransaction(async (transaction) => {
+    const setDistributedCypher = `
+      MATCH (m:Message) WHERE m.id IN $undistributedMessagesIds
+      SET m.distributed = true
+      RETURN m { .* }
+    `
+    const setDistributedTxResponse = await transaction.run(setDistributedCypher, {
+      undistributedMessagesIds,
+    })
+    const messages = await setDistributedTxResponse.records.map((record) => record.get('m'))
+    return messages
+  })
+}
+
 export default {
+  Subscription: {
+    chatMessageAdded: {
+      subscribe: withFilter(
+        () => pubsub.asyncIterator(CHAT_MESSAGE_ADDED),
+        (payload, variables) => {
+          return payload.userId === variables.userId
+        },
+      ),
+    },
+  },
   Query: {
     Message: async (object, params, context, resolveInfo) => {
       const { roomId } = params
@@ -13,13 +42,24 @@ export default {
           id: context.user.id,
         },
       }
+
       const resolved = await neo4jgraphql(object, params, context, resolveInfo)
+
       if (resolved) {
-        resolved.forEach((message) => {
+        const undistributedMessagesIds = resolved
-          message._id = message.id
+          .filter((msg) => !msg.distributed && msg.senderId !== context.user.id)
-        })
+          .map((msg) => msg.id)
+        const session = context.driver.session()
+        try {
+          if (undistributedMessagesIds.length > 0) {
+            await setMessagesAsDistributed(undistributedMessagesIds, session)
+          }
+        } finally {
+          session.close()
+        }
+        // send subscription to author to updated the messages
       }
-      return resolved
+      return resolved.reverse()
     },
   },
   Mutation: {
@@ -32,25 +72,59 @@ export default {
       const writeTxResultPromise = session.writeTransaction(async (transaction) => {
         const createMessageCypher = `
           MATCH (currentUser:User { id: $currentUserId })-[:CHATS_IN]->(room:Room { id: $roomId })
+          OPTIONAL MATCH (currentUser)-[:AVATAR_IMAGE]->(image:Image)
+          OPTIONAL MATCH (m:Message)-[:INSIDE]->(room)
+          OPTIONAL MATCH (room)<-[:CHATS_IN]-(recipientUser:User)
+            WHERE NOT recipientUser.id = $currentUserId
+          WITH MAX(m.indexId) as maxIndex, room, currentUser, image, recipientUser 
           CREATE (currentUser)-[:CREATED]->(message:Message {
             createdAt: toString(datetime()),
             id: apoc.create.uuid(),
-            content: $content
+            indexId: CASE WHEN maxIndex IS NOT NULL THEN maxIndex + 1 ELSE 0 END,
+            content: $content,
+            saved: true,
+            distributed: false,
+            seen: false
           })-[:INSIDE]->(room)
-          RETURN message { .* }
+          SET room.lastMessageAt = toString(datetime())
+          RETURN message {
+            .*,
+            indexId: toString(message.indexId),
+            recipientId: recipientUser.id,
+            senderId: currentUser.id,
+            username: currentUser.name,
+            avatar: image.url,
+            date: message.createdAt
+          }
         `
         const createMessageTxResponse = await transaction.run(createMessageCypher, {
           currentUserId,
           roomId,
           content,
         })
+
         const [message] = await createMessageTxResponse.records.map((record) =>
           record.get('message'),
         )
+
         return message
       })
       try {
         const message = await writeTxResultPromise
+        if (message) {
+          const roomCountUpdated = await getUnreadRoomsCount(message.recipientId, session)
+
+          // send subscriptions
+          void pubsub.publish(ROOM_COUNT_UPDATED, {
+            roomCountUpdated,
+            userId: message.recipientId,
+          })
+          void pubsub.publish(CHAT_MESSAGE_ADDED, {
+            chatMessageAdded: message,
+            userId: message.recipientId,
+          })
+        }
+
         return message
       } catch (error) {
         throw new Error(error)
@@ -58,6 +132,32 @@ export default {
         session.close()
       }
     },
+    MarkMessagesAsSeen: async (_parent, params, context, _resolveInfo) => {
+      const { messageIds } = params
+      const currentUserId = context.user.id
+      const session = context.driver.session()
+      const writeTxResultPromise = session.writeTransaction(async (transaction) => {
+        const setSeenCypher = `
+          MATCH (m:Message)<-[:CREATED]-(user:User)
+          WHERE m.id IN $messageIds AND NOT user.id = $currentUserId
+          SET m.seen = true
+          RETURN m { .* }
+        `
+        const setSeenTxResponse = await transaction.run(setSeenCypher, {
+          messageIds,
+          currentUserId,
+        })
+        const messages = await setSeenTxResponse.records.map((record) => record.get('m'))
+        return messages
+      })
+      try {
+        await writeTxResultPromise
+        // send subscription to author to updated the messages
+        return true
+      } finally {
+        session.close()
+      }
+    },
   },
   Message: {
     ...Resolver('Message', {

backend/src/schema/resolvers/rooms.spec.ts

@@ -1,7 +1,8 @@
 import { createTestClient } from 'apollo-server-testing'
 import Factory, { cleanDatabase } from '../../db/factories'
 import { getNeode, getDriver } from '../../db/neo4j'
-import { createRoomMutation, roomQuery } from '../../graphql/rooms'
+import { createRoomMutation, roomQuery, unreadRoomsQuery } from '../../graphql/rooms'
+import { createMessageMutation } from '../../graphql/messages'
 import createServer from '../../server'
 
 const driver = getDriver()
@@ -21,6 +22,9 @@ beforeAll(async () => {
         driver,
         neode,
         user: authenticatedUser,
+        cypherParams: {
+          currentUserId: authenticatedUser ? authenticatedUser.id : null,
+        },
       }
     },
   })
@@ -34,6 +38,8 @@ afterAll(async () => {
 })
 
 describe('Room', () => {
+  let roomId: string
+
   beforeAll(async () => {
     ;[chattingUser, otherChattingUser, notChattingUser] = await Promise.all([
       Factory.build('user', {
@@ -48,6 +54,14 @@ describe('Room', () => {
         id: 'not-chatting-user',
         name: 'Not Chatting User',
       }),
+      Factory.build('user', {
+        id: 'second-chatting-user',
+        name: 'Second Chatting User',
+      }),
+      Factory.build('user', {
+        id: 'third-chatting-user',
+        name: 'Third Chatting User',
+      }),
     ])
   })
 
@@ -68,8 +82,6 @@ describe('Room', () => {
     })
 
     describe('authenticated', () => {
-      let roomId: string
-
       beforeAll(async () => {
         authenticatedUser = await chattingUser.toJson()
       })
@@ -122,6 +134,26 @@ describe('Room', () => {
               CreateRoom: {
                 id: expect.any(String),
                 roomId: result.data.CreateRoom.id,
+                roomName: 'Other Chatting User',
+                unreadCount: 0,
+                users: expect.arrayContaining([
+                  {
+                    _id: 'chatting-user',
+                    id: 'chatting-user',
+                    name: 'Chatting User',
+                    avatar: {
+                      url: expect.any(String),
+                    },
+                  },
+                  {
+                    _id: 'other-chatting-user',
+                    id: 'other-chatting-user',
+                    name: 'Other Chatting User',
+                    avatar: {
+                      url: expect.any(String),
+                    },
+                  },
+                ]),
               },
             },
           })
@@ -219,6 +251,7 @@ describe('Room', () => {
                   id: expect.any(String),
                   roomId: result.data.Room[0].id,
                   roomName: 'Chatting User',
+                  unreadCount: 0,
                   users: expect.arrayContaining([
                     {
                       _id: 'chatting-user',
@@ -260,4 +293,319 @@ describe('Room', () => {
       })
     })
   })
+
+  describe('unread rooms query', () => {
+    describe('unauthenticated', () => {
+      it('throws authorization error', async () => {
+        authenticatedUser = null
+        await expect(
+          query({
+            query: unreadRoomsQuery(),
+          }),
+        ).resolves.toMatchObject({
+          errors: [{ message: 'Not Authorized!' }],
+        })
+      })
+    })
+
+    describe('authenticated', () => {
+      let otherRoomId: string
+
+      beforeAll(async () => {
+        authenticatedUser = await chattingUser.toJson()
+        const result = await mutate({
+          mutation: createRoomMutation(),
+          variables: {
+            userId: 'not-chatting-user',
+          },
+        })
+        otherRoomId = result.data.CreateRoom.roomId
+        await mutate({
+          mutation: createMessageMutation(),
+          variables: {
+            roomId: otherRoomId,
+            content: 'Message to not chatting user',
+          },
+        })
+        await mutate({
+          mutation: createMessageMutation(),
+          variables: {
+            roomId,
+            content: '1st message to other chatting user',
+          },
+        })
+        await mutate({
+          mutation: createMessageMutation(),
+          variables: {
+            roomId,
+            content: '2nd message to other chatting user',
+          },
+        })
+        authenticatedUser = await otherChattingUser.toJson()
+        const result2 = await mutate({
+          mutation: createRoomMutation(),
+          variables: {
+            userId: 'not-chatting-user',
+          },
+        })
+        otherRoomId = result2.data.CreateRoom.roomId
+        await mutate({
+          mutation: createMessageMutation(),
+          variables: {
+            roomId: otherRoomId,
+            content: 'Other message to not chatting user',
+          },
+        })
+      })
+
+      describe('as chatting user', () => {
+        it('has 0 unread rooms', async () => {
+          authenticatedUser = await chattingUser.toJson()
+          await expect(
+            query({
+              query: unreadRoomsQuery(),
+            }),
+          ).resolves.toMatchObject({
+            data: {
+              UnreadRooms: 0,
+            },
+          })
+        })
+      })
+
+      describe('as other chatting user', () => {
+        it('has 1 unread rooms', async () => {
+          authenticatedUser = await otherChattingUser.toJson()
+          await expect(
+            query({
+              query: unreadRoomsQuery(),
+            }),
+          ).resolves.toMatchObject({
+            data: {
+              UnreadRooms: 1,
+            },
+          })
+        })
+      })
+
+      describe('as not chatting user', () => {
+        it('has 2 unread rooms', async () => {
+          authenticatedUser = await notChattingUser.toJson()
+          await expect(
+            query({
+              query: unreadRoomsQuery(),
+            }),
+          ).resolves.toMatchObject({
+            data: {
+              UnreadRooms: 2,
+            },
+          })
+        })
+      })
+    })
+  })
+
+  describe('query several rooms', () => {
+    beforeAll(async () => {
+      authenticatedUser = await chattingUser.toJson()
+      await mutate({
+        mutation: createRoomMutation(),
+        variables: {
+          userId: 'second-chatting-user',
+        },
+      })
+      await mutate({
+        mutation: createRoomMutation(),
+        variables: {
+          userId: 'third-chatting-user',
+        },
+      })
+    })
+
+    it('returns the rooms paginated', async () => {
+      await expect(
+        query({ query: roomQuery(), variables: { first: 3, offset: 0 } }),
+      ).resolves.toMatchObject({
+        errors: undefined,
+        data: {
+          Room: expect.arrayContaining([
+            expect.objectContaining({
+              id: expect.any(String),
+              roomId: expect.any(String),
+              roomName: 'Third Chatting User',
+              lastMessageAt: null,
+              unreadCount: 0,
+              lastMessage: null,
+              users: expect.arrayContaining([
+                expect.objectContaining({
+                  _id: 'chatting-user',
+                  id: 'chatting-user',
+                  name: 'Chatting User',
+                  avatar: {
+                    url: expect.any(String),
+                  },
+                }),
+                expect.objectContaining({
+                  _id: 'third-chatting-user',
+                  id: 'third-chatting-user',
+                  name: 'Third Chatting User',
+                  avatar: {
+                    url: expect.any(String),
+                  },
+                }),
+              ]),
+            }),
+            expect.objectContaining({
+              id: expect.any(String),
+              roomId: expect.any(String),
+              roomName: 'Second Chatting User',
+              lastMessageAt: null,
+              unreadCount: 0,
+              lastMessage: null,
+              users: expect.arrayContaining([
+                expect.objectContaining({
+                  _id: 'chatting-user',
+                  id: 'chatting-user',
+                  name: 'Chatting User',
+                  avatar: {
+                    url: expect.any(String),
+                  },
+                }),
+                expect.objectContaining({
+                  _id: 'second-chatting-user',
+                  id: 'second-chatting-user',
+                  name: 'Second Chatting User',
+                  avatar: {
+                    url: expect.any(String),
+                  },
+                }),
+              ]),
+            }),
+            expect.objectContaining({
+              id: expect.any(String),
+              roomId: expect.any(String),
+              roomName: 'Other Chatting User',
+              lastMessageAt: expect.any(String),
+              unreadCount: 0,
+              lastMessage: {
+                _id: expect.any(String),
+                id: expect.any(String),
+                content: '2nd message to other chatting user',
+                senderId: 'chatting-user',
+                username: 'Chatting User',
+                avatar: expect.any(String),
+                date: expect.any(String),
+                saved: true,
+                distributed: false,
+                seen: false,
+              },
+              users: expect.arrayContaining([
+                expect.objectContaining({
+                  _id: 'chatting-user',
+                  id: 'chatting-user',
+                  name: 'Chatting User',
+                  avatar: {
+                    url: expect.any(String),
+                  },
+                }),
+                expect.objectContaining({
+                  _id: 'other-chatting-user',
+                  id: 'other-chatting-user',
+                  name: 'Other Chatting User',
+                  avatar: {
+                    url: expect.any(String),
+                  },
+                }),
+              ]),
+            }),
+          ]),
+        },
+      })
+      await expect(
+        query({ query: roomQuery(), variables: { first: 3, offset: 3 } }),
+      ).resolves.toMatchObject({
+        errors: undefined,
+        data: {
+          Room: [
+            expect.objectContaining({
+              id: expect.any(String),
+              roomId: expect.any(String),
+              roomName: 'Not Chatting User',
+              users: expect.arrayContaining([
+                {
+                  _id: 'chatting-user',
+                  id: 'chatting-user',
+                  name: 'Chatting User',
+                  avatar: {
+                    url: expect.any(String),
+                  },
+                },
+                {
+                  _id: 'not-chatting-user',
+                  id: 'not-chatting-user',
+                  name: 'Not Chatting User',
+                  avatar: {
+                    url: expect.any(String),
+                  },
+                },
+              ]),
+            }),
+          ],
+        },
+      })
+    })
+  })
+
+  describe('query single room', () => {
+    let result: any = null
+
+    beforeAll(async () => {
+      authenticatedUser = await chattingUser.toJson()
+      result = await query({ query: roomQuery() })
+    })
+
+    describe('as chatter of room', () => {
+      it('returns the room', async () => {
+        expect(
+          await query({
+            query: roomQuery(),
+            variables: { first: 2, offset: 0, id: result.data.Room[0].id },
+          }),
+        ).toMatchObject({
+          errors: undefined,
+          data: {
+            Room: [
+              {
+                id: expect.any(String),
+                roomId: expect.any(String),
+                roomName: result.data.Room[0].roomName,
+                users: expect.any(Array),
+              },
+            ],
+          },
+        })
+      })
+
+      describe('as not chatter of room', () => {
+        beforeAll(async () => {
+          authenticatedUser = await notChattingUser.toJson()
+        })
+
+        it('returns no room', async () => {
+          authenticatedUser = await notChattingUser.toJson()
+          expect(
+            await query({
+              query: roomQuery(),
+              variables: { first: 2, offset: 0, id: result.data.Room[0].id },
+            }),
+          ).toMatchObject({
+            errors: undefined,
+            data: {
+              Room: [],
+            },
+          })
+        })
+      })
+    })
+  })
 })

backend/src/schema/resolvers/rooms.ts

@@ -1,29 +1,50 @@
 import { neo4jgraphql } from 'neo4j-graphql-js'
 import Resolver from './helpers/Resolver'
+import { pubsub, ROOM_COUNT_UPDATED } from '../../server'
+import { withFilter } from 'graphql-subscriptions'
+
+export const getUnreadRoomsCount = async (userId, session) => {
+  return session.readTransaction(async (transaction) => {
+    const unreadRoomsCypher = `
+      MATCH (:User { id: $userId })-[:CHATS_IN]->(room:Room)<-[:INSIDE]-(message:Message)<-[:CREATED]-(sender:User)
+      WHERE NOT sender.id = $userId AND NOT message.seen
+      RETURN toString(COUNT(DISTINCT room)) AS count
+    `
+    const unreadRoomsTxResponse = await transaction.run(unreadRoomsCypher, { userId })
+    return unreadRoomsTxResponse.records.map((record) => record.get('count'))[0]
+  })
+}
 
 export default {
+  Subscription: {
+    roomCountUpdated: {
+      subscribe: withFilter(
+        () => pubsub.asyncIterator(ROOM_COUNT_UPDATED),
+        (payload, variables) => {
+          return payload.userId === variables.userId
+        },
+      ),
+    },
+  },
   Query: {
     Room: async (object, params, context, resolveInfo) => {
       if (!params.filter) params.filter = {}
       params.filter.users_some = {
         id: context.user.id,
       }
-      const resolved = await neo4jgraphql(object, params, context, resolveInfo)
+      return neo4jgraphql(object, params, context, resolveInfo)
-      if (resolved) {
+    },
-        resolved.forEach((room) => {
+    UnreadRooms: async (object, params, context, resolveInfo) => {
-          if (room.users) {
+      const {
-            // buggy, you must query the username for this to function correctly
+        user: { id: currentUserId },
-            room.roomName = room.users.filter((user) => user.id !== context.user.id)[0].name
+      } = context
-            room.avatar =
+      const session = context.driver.session()
-              room.users.filter((user) => user.id !== context.user.id)[0].avatar?.url ||
+      try {
-              'default-avatar'
+        const count = await getUnreadRoomsCount(currentUserId, session)
-            room.users.forEach((user) => {
+        return count
-              user._id = user.id
+      } finally {
-            })
+        session.close()
-          }
-        })
       }
-      return resolved
     },
   },
   Mutation: {
@@ -44,7 +65,17 @@ export default {
           ON CREATE SET
             room.createdAt = toString(datetime()),
             room.id = apoc.create.uuid()
-          RETURN room { .* }
+          WITH room, user, currentUser
+          OPTIONAL MATCH (room)<-[:INSIDE]-(message:Message)<-[:CREATED]-(sender:User)
+          WHERE NOT sender.id = $currentUserId AND NOT message.seen
+          WITH room, user, currentUser, message,
+          user.name AS roomName
+          RETURN room {
+            .*,
+            users: [properties(currentUser), properties(user)],
+            roomName: roomName,
+            unreadCount: toString(COUNT(DISTINCT message))
+          }
         `
         const createRommTxResponse = await transaction.run(createRoomCypher, {
           userId,
@@ -68,6 +99,7 @@ export default {
   },
   Room: {
     ...Resolver('Room', {
+      undefinedToNull: ['lastMessageAt'],
       hasMany: {
         users: '<-[:CHATS_IN]-(related:User)',
       },

backend/src/schema/types/type/Location.gql

@@ -25,4 +25,3 @@ type LocationMapBox {
 type Query {
   queryLocations(place: String!, lang: String!): [LocationMapBox]!
 }
-

backend/src/schema/types/type/Message.gql

@@ -2,8 +2,13 @@
 #   room: _RoomFilter
 # }
 
+enum _MessageOrdering {
+  indexId_desc
+}
+
 type Message {
   id: ID!
+  indexId: Int!
   createdAt: String
   updatedAt: String
 
@@ -16,6 +21,10 @@ type Message {
   username: String! @cypher(statement: "MATCH (this)<-[:CREATED]-(user:User) RETURN user.name")
   avatar: String @cypher(statement: "MATCH (this)<-[:CREATED]-(:User)-[:AVATAR_IMAGE]->(image:Image) RETURN image.url")
   date: String!  @cypher(statement: "RETURN this.createdAt")
+
+  saved: Boolean
+  distributed: Boolean
+  seen: Boolean
 }
 
 type Mutation {
@@ -23,8 +32,19 @@ type Mutation {
     roomId: ID!
     content: String!
   ): Message
+
+  MarkMessagesAsSeen(messageIds: [String!]): Boolean
 }
 
 type Query {
-  Message(roomId: ID!): [Message]
+  Message(
+    roomId: ID!,
+    first: Int
+    offset: Int
+    orderBy: [_MessageOrdering]
+  ): [Message]
+}
+
+type Subscription {
+  chatMessageAdded(userId: ID!): Message
 }

backend/src/schema/types/type/Post.gql

@@ -84,8 +84,8 @@ input _PostFilter {
   group: _GroupFilter
   postsInMyGroups: Boolean
   postType_in: [PostType]
-  eventStart_gte: String 
+  eventStart_gte: String
-  eventEnd_gte: String 
+  eventEnd_gte: String
 }
 
 enum _PostOrdering {

backend/src/schema/types/type/Room.gql

@@ -5,6 +5,11 @@
 #   users_some: _UserFilter
 # }
 
+# TODO change this to last message date
+enum _RoomOrdering {
+  lastMessageAt_desc
+}
+
 type Room {
   id: ID!
   createdAt: String
@@ -13,8 +18,28 @@ type Room {
   users: [User]! @relation(name: "CHATS_IN", direction: "IN")
 
   roomId: String! @cypher(statement: "RETURN this.id")
-  roomName: String! ## @cypher(statement: "MATCH (this)<-[:CHATS_IN]-(user:User) WHERE NOT user.id = $cypherParams.currentUserId RETURN user[0].name")
+  roomName: String! @cypher(statement: "MATCH (this)<-[:CHATS_IN]-(user:User) WHERE NOT user.id = $cypherParams.currentUserId RETURN user.name")
-  avatar: String! ## @cypher match not own user in users array
+  avatar: String @cypher(statement: """
+    MATCH (this)<-[:CHATS_IN]-(user:User)
+    WHERE NOT user.id = $cypherParams.currentUserId
+    OPTIONAL MATCH (user)-[:AVATAR_IMAGE]->(image:Image)
+    RETURN image.url
+  """)
+
+  lastMessageAt: String
+
+  lastMessage: Message @cypher(statement: """
+    MATCH (this)<-[:INSIDE]-(message:Message)
+    WITH message ORDER BY message.indexId DESC LIMIT 1
+    RETURN message
+  """)
+
+  unreadCount: Int @cypher(statement: """
+    MATCH (this)<-[:INSIDE]-(message:Message)<-[:CREATED]-(user:User)
+    WHERE NOT user.id = $cypherParams.currentUserId
+      AND NOT message.seen 
+    RETURN count(message)
+  """)
 }
 
 type Mutation {
@@ -24,5 +49,13 @@ type Mutation {
 }
 
 type Query {
-  Room: [Room]
+  Room(
+    id: ID
+    orderBy: [_RoomOrdering]
+  ): [Room]
+  UnreadRooms: Int
+}
+
+type Subscription {
+  roomCountUpdated(userId: ID!): Int
 }

backend/src/server.ts

@@ -14,6 +14,8 @@ import bodyParser from 'body-parser'
 import { graphqlUploadExpress } from 'graphql-upload'
 
 export const NOTIFICATION_ADDED = 'NOTIFICATION_ADDED'
+export const CHAT_MESSAGE_ADDED = 'CHAT_MESSAGE_ADDED'
+export const ROOM_COUNT_UPDATED = 'ROOM_COUNT_UPDATED'
 const { REDIS_DOMAIN, REDIS_PORT, REDIS_PASSWORD } = CONFIG
 let prodPubsub, devPubsub
 const options = {

cypress/create-cucumber-html-report.js

@@ -0,0 +1,12 @@
+const report = require("multiple-cucumber-html-reporter");
+
+const reportTitle = "Ocelot webapp end-to-end test report"
+
+report.generate({
+  jsonDir: "reports/json_logs",
+  reportPath: "./reports/cucumber_html_report",
+  pageTitle: reportTitle,
+  reportName: reportTitle,
+  pageFooter: "<div></div>",
+  hideMetadata: true
+});

cypress/cypress.config.js

@@ -21,13 +21,7 @@ async function setupNodeEvents(on, config) {
       return testStore[name]
     },
   });
-
+  
-  on("after:run", (results) => {
-    if (results) {
-      console.log(results.status);
-    }
-  });
-
   return config;
 }
 
@@ -42,10 +36,7 @@ module.exports = defineConfig({
     baseUrl: "http://localhost:3000",
     specPattern: "cypress/e2e/**/*.feature",
     supportFile: "cypress/support/e2e.js",
-    retries: {
+    retries:  0,
-      runMode: 2,
-      openMode: 0,
-    },
     video: false,
     setupNodeEvents,
   },

cypress/support/commands.js

@@ -13,7 +13,6 @@
 // Cypress.Commands.add('login', (email, password) => { ... })
 
 /* globals Cypress cy */
-import "cypress-file-upload";
 import { GraphQLClient, request } from 'graphql-request'
 import CONFIG from '../../backend/build/src/config'
 

cypress/support/step_definitions/Post.Images/I_should_be_able_to_{string}_a_teaser_image.js

@@ -1,28 +1,27 @@
 import { Then } from "@badeball/cypress-cucumber-preprocessor";
 
 Then("I should be able to {string} a teaser image", condition => {
-  // cy.reload()
+  let postTeaserImage = ""
+
   switch(condition){
-    case 'change':
+    case "change":
-      cy.get('.delete-image-button')
+      postTeaserImage = "humanconnection.png"
+      cy.get(".delete-image-button")
         .click()
-      cy.fixture('humanconnection.png').as('postTeaserImage').then(function() {
+      cy.get("#postdropzone").selectFile(
-        cy.get("#postdropzone").upload(
+        { contents: `cypress/fixtures/${postTeaserImage}`, fileName: postTeaserImage, mimeType: "image/png" },
-          { fileContent: this.postTeaserImage, fileName: 'humanconnection.png', mimeType: "image/png" },
+        { action: "drag-drop", force: true }
-          { subjectType: "drag-n-drop", force: true }
+      ).wait(750);
-        ).wait(750);
-      })
       break;
-    case 'add':
+    case "add":
-      cy.fixture('onourjourney.png').as('postTeaserImage').then(function() {
+      postTeaserImage = "onourjourney.png"
-        cy.get("#postdropzone").upload(
+      cy.get("#postdropzone").selectFile(
-          { fileContent: this.postTeaserImage, fileName: 'onourjourney.png', mimeType: "image/png" },
+        { contents: `cypress/fixtures/${postTeaserImage}`, fileName: postTeaserImage, mimeType: "image/png" },
-          { subjectType: "drag-n-drop", force: true }
+        { action: "drag-drop", force: true }
-        ).wait(750);
+      ).wait(750);
-      })
       break;
-    case 'remove':
+    case "remove":
-      cy.get('.delete-image-button')
+      cy.get(".delete-image-button")
         .click()
       break;
   }

cypress/support/step_definitions/UserProfile.Avatar/I_should_be_able_to_change_my_profile_picture.js

@@ -2,13 +2,11 @@ import { Then } from "@badeball/cypress-cucumber-preprocessor";
 
 Then("I should be able to change my profile picture", () => {
   const avatarUpload = "onourjourney.png";
-  
+
-  cy.fixture(avatarUpload, "base64").then(fileContent => {
+  cy.get("#customdropzone").selectFile(
-    cy.get("#customdropzone").upload(
+    { contents: `cypress/fixtures/${avatarUpload}`, fileName: avatarUpload, mimeType: "image/png" },
-      { fileContent, fileName: avatarUpload, mimeType: "image/png" },
+    { action: "drag-drop" }
-      { subjectType: "drag-n-drop", force: true }
+  );
-    );
-  });
   cy.get(".profile-page-avatar img")
     .should("have.attr", "src")
     .and("contains", "onourjourney");

deployment/TODO-next-update.md

@@ -2,6 +2,10 @@
 
 When you overtake this deploy and rebrand repo to your network you have to recognize the following changes and doings:
 
+## Version >= 2.7.0 with 'ocelotDockerVersionTag' 2.7.0-470
+
+- You have to rename all `.js` files  to `.ts` in `branding/constants`
+
 ## Version >= 2.4.0 with 'ocelotDockerVersionTag' 2.4.0-298
 
 - You have to set `SHOW_CONTENT_FILTER_HEADER_MENU` and `SHOW_CONTENT_FILTER_MASONRY_GRID` in `branding/constants/filter.js` originally in main code file `webapp/constants/filter.js` to your preferred value.

deployment/configurations/stage.ocelot.social

@@ -1 +1 @@
-Subproject commit 350237c62dcff1a5c34f1e8d718f89b05ce3d33f
+Subproject commit fdc2e52fa444b300e1c4736600bc0e9ae3314222

package.json

@@ -10,13 +10,25 @@
     "url": "https://github.com/Ocelot-Social-Community/Ocelot-Social.git"
   },
   "cypress-cucumber-preprocessor": {
-    "nonGlobalStepDefinitions": true
+    "stepDefinitions": "cypress/support/step_definitions/**/*.js",
+    "json": {
+      "enabled": true,
+      "output": "cypress/reports/json_logs/cucumber_log.json",
+      "formatter": "cucumber-json-formatter"
+    },
+    "messages": {
+      "enabled": true,
+      "output": "cypress/reports/json_logs/messages.ndjson"
+    },
+    "html": {
+      "enabled": false
+    }
   },
   "scripts": {
     "db:seed": "cd backend && yarn run db:seed",
     "db:reset": "cd backend && yarn run db:reset",
-    "cypress:run": "cypress run --browser electron --config-file ./cypress/cypress.config.js",
+    "cypress:run": "cypress run --e2e --browser electron --config-file ./cypress/cypress.config.js",
-    "cypress:open": "cypress open --browser electron --config-file ./cypress/cypress.config.js",
+    "cypress:open": "cypress open --e2e --browser electron --config-file ./cypress/cypress.config.js",
     "cucumber:setup": "cd backend && yarn run dev",
     "cucumber": "wait-on tcp:4000 && cucumber-js --require-module @babel/register --exit",
     "release": "yarn version --no-git-tag-version --no-commit-hooks --no-commit && auto-changelog --latest-version $(node -p -e \"require('./package.json').version\") && cd backend && yarn version --no-git-tag-version --no-commit-hooks --no-commit --new-version $(node -p -e \"require('./../package.json').version\") && cd ../webapp && yarn version --no-git-tag-version --no-commit-hooks --no-commit --new-version $(node -p -e \"require('./../package.json').version\") && cd ../webapp/maintenance/source && yarn version --no-git-tag-version --no-commit-hooks --no-commit --new-version $(node -p -e \"require('./../../../package.json').version\")"
@@ -33,7 +45,6 @@
     "cross-env": "^7.0.3",
     "cucumber": "^6.0.5",
     "cypress": "^12.17.0",
-    "cypress-file-upload": "^3.5.3",
     "cypress-network-idle": "^1.14.2",
     "date-fns": "^2.25.0",
     "dotenv": "^8.2.0",
@@ -42,6 +53,7 @@
     "import": "^0.0.6",
     "jsonwebtoken": "^8.5.1",
     "mock-socket": "^9.0.3",
+    "multiple-cucumber-html-reporter": "^3.4.0",
     "neo4j-driver": "^4.3.4",
     "neode": "^0.4.8",
     "rosie": "^2.1.0",

webapp/assets/_new/icons/svgs/chat-bubble.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>chat-bubble</title>
+<g data-name="Chat"><path d="M27.23,24.91A9,9,0,0,0,22.44,9.52,8.57,8.57,0,0,0,21,9.41a8.94,8.94,0,0,0-8.92,10.14c0,.1,0,.2,0,.29a9,9,0,0,0,.22,1l0,.11a8.93,8.93,0,0,0,.38,1l.13.28a9,9,0,0,0,.45.83l.07.14a9.13,9.13,0,0,1-2.94-.36,1,1,0,0,0-.68,0L7,24.13l.54-1.9a1,1,0,0,0-.32-1,9,9,0,0,1,11.27-14,1,1,0,0,0,1.23-1.58A10.89,10.89,0,0,0,13,3.25a11,11,0,0,0-7.5,19l-1,3.34A1,1,0,0,0,5.9,26.82l4.35-1.93a11,11,0,0,0,4.68.16A9,9,0,0,0,21,27.41a8.81,8.81,0,0,0,2.18-.27l3.41,1.52A1,1,0,0,0,28,27.48Zm-1.77-1.1a1,1,0,0,0-.32,1L25.45,26l-1.79-.8a1,1,0,0,0-.41-.09,1,1,0,0,0-.29,0,6.64,6.64,0,0,1-2,.29,7,7,0,0,1,0-14,6.65,6.65,0,0,1,1.11.09,7,7,0,0,1,3.35,12.31Z"></path><path d="M17.82 17.08H17a1 1 0 0 0 0 2h.82a1 1 0 0 0 0-2zM21.41 17.08h-.82a1 1 0 0 0 0 2h.82a1 1 0 0 0 0-2zM25 17.08h-.82a1 1 0 0 0 0 2H25a1 1 0 0 0 0-2z"></path></g>
+</svg>

webapp/assets/_new/styles/export.scss

@@ -0,0 +1,34 @@
+
+:export {
+    colorPrimary: $color-primary;
+    colorPrimaryActive: $color-primary-active;
+    colorPrimaryLight: $color-primary-light;
+  
+    borderColorSoft: $border-color-soft;
+  
+    borderRadiusBase: $border-radius-base;
+  
+    textColorBase: $text-color-base;
+    textColorSoft: $text-color-soft;
+    textColorInverse: $text-color-inverse;
+  
+    boxShadowBase: $box-shadow-base;
+  
+    backgroundColorBase: $background-color-base;
+    backgroundColorSoft: $background-color-soft;
+    backgroundColorSoftest: $background-color-softest;
+    backgroundColorPrimary: $background-color-primary;
+  
+    colorNeutral30: $color-neutral-30;
+    
+    chatMessageColor: $chat-message-color;
+    
+    chatMessageBgMe: $chat-message-bg-me;
+    chatMessageBgOthers: $chat-message-bg-others;
+  
+    chatNewMessageColor: $chat-new-message-color;
+    
+    chatMessageTimestamp: $chat-message-timestamp;
+    chatMessageCheckmarkSeen: $chat-message-checkmark-seen;
+    chatMessageCheckmark: $chat-message-checkmark;
+  }

webapp/assets/_new/styles/tokens.scss

@@ -406,4 +406,17 @@ $color-toast-green: $color-success;
 $color-ribbon-event: $background-color-third;
 $color-ribbon-event-active: $background-color-third-active;
 $color-ribbon-article: $background-color-secondary;
-$color-ribbon-article-active: $background-color-secondary-active;
+$color-ribbon-article-active: $background-color-secondary-active;
+
+/**
+ * @tokens Chat Color
+ */
+
+$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: $text-color-secondary;
+$chat-message-checkmark: $text-color-soft;

webapp/components/Chat/Chat.vue

@@ -4,40 +4,84 @@
       <vue-advanced-chat
         :theme="theme"
         :current-user-id="currentUser.id"
-        :room-id="null"
+        :room-id="!singleRoom ? roomId : null"
         :template-actions="JSON.stringify(templatesText)"
         :menu-actions="JSON.stringify(menuActions)"
         :text-messages="JSON.stringify(textMessages)"
+        :message-actions="messageActions"
         :messages="JSON.stringify(messages)"
         :messages-loaded="messagesLoaded"
         :rooms="JSON.stringify(rooms)"
         :room-actions="JSON.stringify(roomActions)"
-        :rooms-loaded="true"
+        :rooms-loaded="roomsLoaded"
+        :loading-rooms="loadingRooms"
         show-files="false"
         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"
         @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>
+
+        <div slot="room-header-avatar">
+          <div
+            v-if="selectedRoom && selectedRoom.avatar && selectedRoom.avatar !== 'default-avatar'"
+            class="vac-avatar"
+            :style="{ 'background-image': `url('${selectedRoom.avatar}')` }"
+          />
+          <div v-else-if="selectedRoom" class="vac-avatar">
+            <span class="initials">{{ getInitialsName(selectedRoom.roomName) }}</span>
+          </div>
+        </div>
+
+        <div v-for="room in rooms" :slot="'room-list-avatar_' + room.id" :key="room.id">
+          <div
+            v-if="room.avatar && room.avatar !== 'default-avatar'"
+            class="vac-avatar"
+            :style="{ 'background-image': `url('${room.avatar}')` }"
+          />
+          <div v-else class="vac-avatar">
+            <span class="initials">{{ getInitialsName(room.roomName) }}</span>
+          </div>
+        </div>
+      </vue-advanced-chat>
     </client-only>
   </div>
 </template>
 
 <script>
-import { roomQuery, createRoom } from '~/graphql/Rooms'
+import { roomQuery, createRoom, unreadRoomsQuery } from '~/graphql/Rooms'
-import { messageQuery, createMessageMutation } from '~/graphql/Messages'
+import {
-import { mapGetters } from 'vuex'
+  messageQuery,
+  createMessageMutation,
+  chatMessageAdded,
+  markMessagesAsSeen,
+} from '~/graphql/Messages'
+import chatStyle from '~/constants/chat.js'
+import { mapGetters, mapMutations } from 'vuex'
 
 export default {
   name: 'Chat',
   props: {
     theme: {
       type: String,
+      default: 'light',
     },
-    singleRoomId: {
+    singleRoom: {
+      type: Boolean,
+      default: false,
+    },
+    roomId: {
       type: String,
       default: null,
     },
@@ -45,28 +89,37 @@ export default {
   data() {
     return {
       menuActions: [
-        /* {
+        // NOTE: if menuActions is empty, the related slot is not shown
-          name: 'inviteUser',
-          title: 'Invite User',
-        },
         {
-          name: 'removeUser',
+          name: 'dummyItem',
-          title: 'Remove User',
+          title: 'Just a dummy item',
         },
-        {
+        /*
-          name: 'deleteRoom',
+            {
-          title: 'Delete Room',
+            name: 'inviteUser',
-        }, */
+            title: 'Invite User',
+            },
+            {
+            name: 'removeUser',
+            title: 'Remove User',
+            },
+            {
+            name: 'deleteRoom',
+            title: 'Delete Room',
+            },
+          */
       ],
       messageActions: [
-        {
+        /*
-          name: 'addMessageToFavorite',
+            {
-          title: 'Add To Favorite',
+            name: 'addMessageToFavorite',
-        },
+            title: 'Add To Favorite',
-        {
+            },
-          name: 'shareMessage',
+            {
-          title: 'Share Message',
+            name: 'shareMessage',
-        },
+            title: 'Share Message',
+            },
+          */
       ],
       templatesText: [
         {
@@ -78,37 +131,30 @@ export default {
           text: 'This is the action',
         },
       ],
-      textMessages: {
-        ROOMS_EMPTY: 'Aucune conversation',
-        ROOM_EMPTY: 'Aucune conversation sélectionnée',
-        NEW_MESSAGES: 'Nouveaux messages',
-        MESSAGE_DELETED: 'Ce message a été supprimé',
-        MESSAGES_EMPTY: 'Aucun message',
-        CONVERSATION_STARTED: 'La conversation a commencée le :',
-        TYPE_MESSAGE: 'Tapez votre message',
-        SEARCH: 'Rechercher',
-        IS_ONLINE: 'est en ligne',
-        LAST_SEEN: 'dernière connexion ',
-        IS_TYPING: 'est en train de taper...',
-        CANCEL_SELECT_MESSAGE: 'Annuler Sélection',
-      },
       roomActions: [
         /*
-        {
+            {
-          name: 'archiveRoom',
+            name: 'archiveRoom',
-          title: 'Archive Room',
+            title: 'Archive Room',
-        },
+            },
-        { name: 'inviteUser', title: 'Invite User' },
+            { name: 'inviteUser', title: 'Invite User' },
-        { name: 'removeUser', title: 'Remove User' },
+            { name: 'removeUser', title: 'Remove User' },
-        { name: 'deleteRoom', title: 'Delete Room' },
+            { name: 'deleteRoom', title: 'Delete Room' },
-        */
+          */
       ],
-      rooms: [],
+
-      messages: [],
-      messagesLoaded: true,
       showDemoOptions: true,
       responsiveBreakpoint: 600,
-      singleRoom: !!this.singleRoomId || false,
+      rooms: [],
+      roomsLoaded: false,
+      roomPage: 0,
+      roomPageSize: 10,
+      selectedRoom: this.roomId,
+      loadingRooms: true,
+      messagesLoaded: false,
+      messagePage: 0,
+      messagePageSize: 20,
+      messages: [],
     }
   },
   mounted() {
@@ -117,11 +163,11 @@ export default {
         .mutate({
           mutation: createRoom(),
           variables: {
-            userId: this.singleRoomId,
+            userId: this.roomId,
           },
         })
-        .then(() => {
+        .then(({ data: { CreateRoom } }) => {
-          this.$apollo.queries.Rooms.refetch()
+          this.fetchRooms({ room: CreateRoom })
         })
         .catch((error) => {
           this.$toast.error(error)
@@ -129,41 +175,171 @@ export default {
         .finally(() => {
           // this.loading = false
         })
+    } else {
+      this.fetchRooms()
     }
+
+    // Subscriptions
+    const observer = this.$apollo.subscribe({
+      query: chatMessageAdded(),
+      variables: {
+        userId: this.currentUser.id,
+      },
+    })
+
+    observer.subscribe({
+      next: this.chatMessageAdded,
+      error(error) {
+        this.$toast.error(error)
+      },
+    })
   },
   computed: {
     ...mapGetters({
       currentUser: 'auth/user',
     }),
+    computedChatStyle() {
+      return chatStyle.STYLE.light
+    },
+    textMessages() {
+      return {
+        ROOMS_EMPTY: this.$t('chat.roomsEmpty'),
+        ROOM_EMPTY: this.$t('chat.roomEmpty'),
+        NEW_MESSAGES: this.$t('chat.newMessages'),
+        MESSAGE_DELETED: this.$t('chat.messageDeleted'),
+        MESSAGES_EMPTY: this.$t('chat.messagesEmpty'),
+        CONVERSATION_STARTED: this.$t('chat.conversationStarted'),
+        TYPE_MESSAGE: this.$t('chat.typeMessage'),
+        SEARCH: this.$t('chat.search'),
+        IS_ONLINE: this.$t('chat.isOnline'),
+        LAST_SEEN: this.$t('chat.lastSeen'),
+        IS_TYPING: this.$t('chat.isTyping'),
+        CANCEL_SELECT_MESSAGE: this.$t('chat.cancelSelectMessage'),
+      }
+    },
   },
   methods: {
-    fetchMessages({ room, options = {} }) {
+    ...mapMutations({
-      this.messagesLoaded = false
+      commitUnreadRoomCount: 'chat/UPDATE_ROOM_COUNT',
-      setTimeout(async () => {
+    }),
-        try {
+    async fetchRooms({ room } = {}) {
-          const {
+      this.roomsLoaded = false
-            data: { Message },
+      const offset = this.roomPage * this.roomPageSize
-          } = await this.$apollo.query({
+      try {
-            query: messageQuery(),
+        const {
-            variables: {
+          data: { Room },
-              roomId: room.id,
+        } = await this.$apollo.query({
-            },
+          query: roomQuery(),
-            fetchPolicy: 'no-cache',
+          variables: {
-          })
+            id: room?.id,
-          this.messages = Message
+            first: this.roomPageSize,
-        } catch (error) {
+            offset,
-          this.messages = []
+          },
-          this.$toast.error(error.message)
+          fetchPolicy: 'no-cache',
+        })
+
+        const newRooms = Room.map((r) => {
+          return {
+            ...r,
+            users: r.users.map((u) => {
+              return { ...u, username: u.name, avatar: u.avatar?.url }
+            }),
+          }
+        })
+
+        this.rooms = [...this.rooms, ...newRooms]
+
+        if (Room.length < this.roomPageSize) {
+          this.roomsLoaded = true
         }
-        this.messagesLoaded = true
+        this.roomPage += 1
-      })
+      } catch (error) {
+        this.rooms = []
+        this.$toast.error(error.message)
+      }
+      // must be set false after initial rooms are loaded and never changed again
+      this.loadingRooms = false
     },
 
-    refetchMessage(roomId) {
+    async fetchMessages({ room, options = {} }) {
-      this.fetchMessages({ room: this.rooms.find((r) => r.roomId === roomId) })
+      if (this.selectedRoom?.id !== room.id) {
+        this.messages = []
+        this.messagePage = 0
+        this.selectedRoom = room
+      }
+      this.messagesLoaded = options.refetch ? this.messagesLoaded : false
+      const offset = (options.refetch ? 0 : this.messagePage) * this.messagePageSize
+      try {
+        const {
+          data: { Message },
+        } = await this.$apollo.query({
+          query: messageQuery(),
+          variables: {
+            roomId: room.id,
+            first: this.messagePageSize,
+            offset,
+          },
+          fetchPolicy: 'no-cache',
+        })
+
+        const newMsgIds = Message.filter((m) => m.seen === false).map((m) => m.id)
+        if (newMsgIds.length) {
+          this.$apollo
+            .mutate({
+              mutation: markMessagesAsSeen(),
+              variables: {
+                messageIds: newMsgIds,
+              },
+            })
+            .then(() => {
+              this.$apollo
+                .query({
+                  query: unreadRoomsQuery(),
+                  fetchPolicy: 'network-only',
+                })
+                .then(({ data: { UnreadRooms } }) => {
+                  this.commitUnreadRoomCount(UnreadRooms)
+                })
+            })
+        }
+
+        const msgs = []
+        ;[...this.messages, ...Message].forEach((m) => {
+          if (m.senderId !== this.currentUser.id) m.seen = true
+          m.date = new Date(m.date).toDateString()
+          msgs[m.indexId] = m
+        })
+        this.messages = msgs.filter(Boolean)
+
+        if (Message.length < this.messagePageSize) {
+          this.messagesLoaded = true
+        }
+        this.messagePage += 1
+      } catch (error) {
+        this.messages = []
+        this.$toast.error(error.message)
+      }
+    },
+
+    async chatMessageAdded({ data }) {
+      if (data.chatMessageAdded.room.id === this.selectedRoom?.id) {
+        this.fetchMessages({ room: this.selectedRoom, options: { refetch: true } })
+      } else {
+        // TODO this might be optimized selectively (first page vs rest)
+        this.rooms = []
+        this.roomPage = 0
+        this.roomsLoaded = false
+        this.fetchRooms()
+      }
     },
 
     async sendMessage(message) {
+      // check for usersTag and change userid to username
+      message.usersTag.forEach((userTag) => {
+        const needle = `<usertag>${userTag.id}</usertag>`
+        const replacement = `<usertag>@${userTag.name.replaceAll(' ', '-').toLowerCase()}</usertag>`
+        message.content = message.content.replaceAll(needle, replacement)
+      })
       try {
         await this.$apollo.mutate({
           mutation: createMessageMutation(),
@@ -175,40 +351,15 @@ export default {
       } catch (error) {
         this.$toast.error(error.message)
       }
-      this.refetchMessage(message.roomId)
+      this.fetchMessages({
+        room: this.rooms.find((r) => r.roomId === message.roomId),
+        options: { refetch: true },
+      })
     },
-  },
-  apollo: {
-    Rooms: {
-      query() {
-        return roomQuery()
-      },
-      update({ Room }) {
-        if (!Room) {
-          this.rooms = []
-          return
-        }
 
-        // Backend result needs mapping of the following values
+    getInitialsName(fullname) {
-        // room[i].users[j].name -> room[i].users[j].username
+      if (!fullname) return
-        // room[i].users[j].avatar.url -> room[i].users[j].avatar
+      return fullname.match(/\b\w/g).join('').substring(0, 3).toUpperCase()
-        // also filter rooms for the single room
-        this.rooms = Room.map((r) => {
-          return {
-            ...r,
-            users: r.users.map((u) => {
-              return { ...u, username: u.name, avatar: u.avatar?.url }
-            }),
-          }
-        }).filter((r) =>
-          this.singleRoom ? r.users.filter((u) => u.id === this.singleRoomId).length > 0 : true,
-        )
-      },
-      error(error) {
-        this.rooms = []
-        this.$toast.error(error.message)
-      },
-      fetchPolicy: 'no-cache',
     },
   },
 }
@@ -217,4 +368,25 @@ export default {
 body {
   font-family: 'Quicksand', sans-serif;
 }
+.vac-avatar {
+  background-size: cover;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-color: $color-primary-dark;
+  color: $text-color-primary-inverse;
+  height: 42px;
+  width: 42px;
+  min-height: 42px;
+  min-width: 42px;
+  margin-right: 15px;
+  border-radius: 50%;
+  position: relative;
+
+  > .initials {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
 </style>

webapp/components/ChatNotificationMenu/ChatNotificationMenu.vue

@@ -1,140 +1,59 @@
 <template>
-  <nuxt-link v-if="!unreadChatNotificationsCount" class="chat-menu" :to="{ name: 'chat' }">
+  <nuxt-link class="chat-notification-menu" :to="{ name: 'chat' }">
     <base-button
       ghost
       circle
       v-tooltip="{
-        content: $t('notifications.headerMenuButton.chat'),
+        content: $t('header.chat.tooltip'),
         placement: 'bottom-start',
       }"
     >
-      <img src="/img/empty/chat-bubble.svg" />
+      <counter-icon icon="chat-bubble" :count="unreadRoomCount" danger />
     </base-button>
   </nuxt-link>
-  <dropdown v-else class="chat-notifications-menu" offset="8">
-    <template #default="{ toggleMenu }">
-      <base-button
-        ghost
-        circle
-        v-tooltip="{
-          content: $t('notifications.headerMenuButton.tooltip'),
-          placement: 'bottom-start',
-        }"
-        @click="toggleMenu"
-      >
-        <counter-icon icon="envelope" :count="unreadChatNotificationsCount" danger />
-        <img src="/img/empty/chat-bubble.svg" />
-      </base-button>
-    </template>
-    <template #popover="{}">
-      <div class="chat-notifications-menu-popover">
-        <div v-for="notification in notifications" v-bind:key="notification.roomid">
-          <ds-space>
-            <div
-              class="chat-notifications-menu-popover-item"
-              @click="
-                $store.commit('chat/SET_OPEN_CHAT', { showChat: true, roomID: notification.roomid })
-              "
-            >
-              <p>{{ notification.name }}</p>
-              {{ notification.title }}
-            </div>
-          </ds-space>
-        </div>
-        <!-- <notification-list :notifications="notifications" /> -->
-      </div>
-      <ds-flex class="chat-notifications-link-container">
-        <ds-flex-item
-          class="chat-notifications-link-container-item"
-          :width="{ base: '100%' }"
-          centered
-        >
-          <nuxt-link :to="{ name: 'chat' }">
-            <base-button ghost primary>All Chat Messages</base-button>
-          </nuxt-link>
-        </ds-flex-item>
-      </ds-flex>
-    </template>
-  </dropdown>
 </template>
 
 <script>
+import { mapGetters, mapMutations } from 'vuex'
 import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
-import Dropdown from '~/components/Dropdown'
+import { unreadRoomsQuery, roomCountUpdated } from '~/graphql/Rooms'
-// import NotificationList from '../NotificationList/NotificationList'
 
 export default {
   name: 'ChatNotificationMenu',
   components: {
     CounterIcon,
-    Dropdown,
-    // NotificationList,
-  },
-  data() {
-    return {
-      notifications: [
-        { roomid: 'u1', name: 'Jenny', title: 'last Message from Jenny' },
-        { roomid: 'u2', name: 'Honey', title: 'last Message from Honey' },
-        { roomid: 'u3', name: 'Bob der Baumeister', title: 'last Message from Bob der Baumeister' },
-      ],
-    }
   },
   computed: {
-    unreadChatNotificationsCount() {
+    ...mapGetters({
-      const result = this.notifications.reduce((count, notification) => {
+      user: 'auth/user',
-        return notification.read ? count : count + 1
+      unreadRoomCount: 'chat/unreadRoomCount',
-      }, 0)
+    }),
-      return result
+  },
-    },
+  methods: {
-    hasNotifications() {
+    ...mapMutations({
-      return this.notifications.length
+      commitUnreadRoomCount: 'chat/UPDATE_ROOM_COUNT',
+    }),
+  },
+  apollo: {
+    UnreadRooms: {
+      query() {
+        return unreadRoomsQuery()
+      },
+      update({ UnreadRooms }) {
+        this.commitUnreadRoomCount(UnreadRooms)
+      },
+      subscribeToMore: {
+        document: roomCountUpdated(),
+        variables() {
+          return {
+            userId: this.user.id,
+          }
+        },
+        updateQuery: (previousResult, { subscriptionData }) => {
+          return { UnreadRooms: subscriptionData.data.roomCountUpdated }
+        },
+      },
     },
   },
 }
 </script>
-<style lang="scss">
-.chat-notifications-menu {
-  max-width: 500px;
-}
-.vue-popover-theme {
-  z-index: 1000000;
-}
-
-.counter-icon {
-  position: relative;
-
-  > .count {
-    position: absolute;
-    top: -$space-xx-small;
-    right: 0;
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: $size-icon-base;
-    min-width: $size-icon-base;
-    padding: 3px; // magic number to center count
-    border-radius: 50%;
-    transform: translateX(50%);
-
-    color: $color-neutral-100;
-    background-color: $color-primary;
-    font-size: 10px; // magic number to center count
-    line-height: 1;
-    text-align: center;
-
-    &.--danger {
-      background-color: $color-danger;
-    }
-
-    &.--inactive {
-      background-color: $color-neutral-60;
-    }
-
-    &.--soft {
-      background-color: $color-neutral-90;
-      color: $text-color-soft;
-    }
-  }
-}
-</style>

webapp/components/HeaderMenu/HeaderMenu.vue

@@ -74,6 +74,10 @@
             <!-- locale switch -->
             <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
             <template v-if="isLoggedIn">
+              <!-- chat menu -->
+              <client-only>
+                <chat-notification-menu placement="top" />
+              </client-only>
               <!-- notification menu -->
               <client-only>
                 <notification-menu placement="top" />
@@ -92,10 +96,6 @@
               <client-only v-if="!isEmpty(this.$env.MAPBOX_TOKEN)">
                 <map-button />
               </client-only>
-              <!-- chat menü -->
-              <client-only>
-                <chat-notification-menu placement="top" />
-              </client-only>
               <!-- avatar menu -->
               <client-only>
                 <avatar-menu placement="top" />
@@ -131,10 +131,16 @@
           <!-- mobile hamburger menu -->
           <ds-flex-item class="mobile-hamburger-menu">
             <client-only>
+              <!-- chat menu -->
+              <div style="display: inline-flex">
+                <chat-notification-menu />
+              </div>
+              <!-- notification menu -->
               <div style="display: inline-flex; padding-right: 20px">
                 <notification-menu />
               </div>
             </client-only>
+            <!-- hamburger menu -->
             <base-button icon="bars" @click="toggleMobileMenuView" circle />
           </ds-flex-item>
         </ds-flex>
@@ -257,10 +263,11 @@ import isEmpty from 'lodash/isEmpty'
 import { SHOW_GROUP_BUTTON_IN_HEADER } from '~/constants/groups.js'
 import { SHOW_CONTENT_FILTER_HEADER_MENU } from '~/constants/filter.js'
 import LOGOS from '~/constants/logos.js'
-import headerMenu from '~/constants/headerMenu.js'
 import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
+import ChatNotificationMenu from '~/components/ChatNotificationMenu/ChatNotificationMenu'
 import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
 import GroupButton from '~/components/Group/GroupButton'
+import headerMenu from '~/constants/headerMenu.js'
 import InviteButton from '~/components/InviteButton/InviteButton'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import Logo from '~/components/Logo/Logo'
@@ -269,7 +276,6 @@ import SearchField from '~/components/features/SearchField/SearchField.vue'
 import NotificationMenu from '~/components/NotificationMenu/NotificationMenu'
 import links from '~/constants/links.js'
 import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
-import ChatNotificationMenu from '~/components/ChatNotificationMenu/ChatNotificationMenu'
 
 export default {
   components: {

webapp/components/NotificationMenu/NotificationMenu.vue

@@ -146,6 +146,7 @@ export default {
           const {
             data: { notificationAdded: newNotification },
           } = subscriptionData
+
           return {
             notifications: unionBy(
               [newNotification],

webapp/constants/chat.js

@@ -0,0 +1,299 @@
+import tokens from './../assets/_new/styles/tokens.scss'
+// import branding from './../assets/styles/imports/_branding.scss'
+
+const styleData = tokens
+
+const STYLE = {
+  light: {
+    general: {
+      color: styleData.textColorBase,
+      colorButtonClear: '#1976d2',
+      colorButton: '#fff',
+      backgroundColorButton: '#1976d2',
+      backgroundInput: '#fff',
+      colorPlaceholder: styleData.textColorSoft,
+      colorCaret: '#1976d2',
+      colorSpinner: styleData.colorPrimary,
+      borderStyle: '1px solid #e1e4e8',
+      backgroundScrollIcon: '#fff',
+    },
+
+    container: {
+      border: 'none',
+      borderRadius: styleData.borderRadiusBase,
+      boxShadow: styleData.boxShadowBase,
+    },
+
+    header: {
+      background: styleData.backgroundColorSoft,
+      colorRoomName: styleData.textColorBase,
+      colorRoomInfo: styleData.textColorSoft,
+    },
+
+    footer: {
+      background: styleData.backgroundColorSoft,
+      borderStyleInput: '1px solid #e1e4e8',
+      borderInputSelected: '#1976d2',
+      backgroundReply: styleData.backgroundColorSoft,
+      backgroundTagActive: styleData.backgroundColorSoft,
+      backgroundTag: styleData.backgroundColorBase,
+    },
+
+    content: {
+      background: styleData.backgroundColorBase,
+    },
+
+    sidemenu: {
+      background: '#fff',
+      backgroundHover: '#f6f6f6',
+      backgroundActive: styleData.colorPrimaryLight,
+      colorActive: '#1976d2',
+      borderColorSearch: '#e1e5e8',
+    },
+
+    dropdown: {
+      background: '#fff',
+      backgroundHover: '#f6f6f6',
+    },
+
+    message: {
+      background: styleData.chatMessageBgOthers,
+      backgroundMe: styleData.chatMessageBgMe,
+      color: styleData.chatMessageColor,
+      colorStarted: '#9ca6af',
+      backgroundDeleted: '#dadfe2',
+      backgroundSelected: '#c2dcf2',
+      colorDeleted: '#757e85',
+      colorUsername: '#9ca6af',
+      colorTimestamp: styleData.chatMessageTimestamp,
+      backgroundDate: '#e5effa',
+      colorDate: '#505a62',
+      backgroundSystem: '#e5effa',
+      colorSystem: '#505a62',
+      backgroundMedia: 'rgba(0, 0, 0, 0.15)',
+      backgroundReply: 'rgba(0, 0, 0, 0.08)',
+      colorReplyUsername: '#0a0a0a',
+      colorReply: '#6e6e6e',
+      colorTag: '#0d579c',
+      backgroundImage: '#ddd',
+      colorNewMessages: styleData.chatNewMessageColor,
+      backgroundScrollCounter: '#0696c7',
+      colorScrollCounter: '#fff',
+      backgroundReaction: '#eee',
+      borderStyleReaction: '1px solid #eee',
+      backgroundReactionHover: '#fff',
+      borderStyleReactionHover: '1px solid #ddd',
+      colorReactionCounter: '#0a0a0a',
+      backgroundReactionMe: '#cfecf5',
+      borderStyleReactionMe: '1px solid #3b98b8',
+      backgroundReactionHoverMe: '#cfecf5',
+      borderStyleReactionHoverMe: '1px solid #3b98b8',
+      colorReactionCounterMe: '#0b59b3',
+      backgroundAudioRecord: '#eb4034',
+      backgroundAudioLine: 'rgba(0, 0, 0, 0.15)',
+      backgroundAudioProgress: '#455247',
+      backgroundAudioProgressSelector: '#455247',
+      colorFileExtension: '#757e85',
+    },
+
+    markdown: {
+      background: 'rgba(239, 239, 239, 0.7)',
+      border: 'rgba(212, 212, 212, 0.9)',
+      color: '#e01e5a',
+      colorMulti: '#0a0a0a',
+    },
+
+    room: {
+      colorUsername: '#0a0a0a',
+      colorMessage: '#67717a',
+      colorTimestamp: '#a2aeb8',
+      colorStateOnline: '#4caf50',
+      colorStateOffline: '#9ca6af',
+      backgroundCounterBadge: '#0696c7',
+      colorCounterBadge: '#fff',
+    },
+
+    emoji: {
+      background: '#fff',
+    },
+
+    icons: {
+      search: '#9ca6af',
+      add: styleData.colorPrimary,
+      toggle: styleData.colorNeutral30,
+      menu: styleData.colorNeutral30,
+      close: '#9ca6af',
+      closeImage: '#fff',
+      file: styleData.colorPrimary,
+      paperclip: styleData.colorPrimary,
+      closeOutline: '#000',
+      closePreview: '#fff',
+      send: styleData.colorPrimary,
+      sendDisabled: '#9ca6af',
+      emoji: styleData.colorPrimary,
+      emojiReaction: 'rgba(0, 0, 0, 0.3)',
+      document: styleData.colorPrimary,
+      pencil: '#9e9e9e',
+      checkmark: styleData.chatMessageCheckmark,
+      checkmarkSeen: styleData.chatMessageCheckmarkSeen,
+      eye: '#fff',
+      dropdownMessage: '#fff',
+      dropdownMessageBackground: 'rgba(0, 0, 0, 0.25)',
+      dropdownRoom: '#9e9e9e',
+      dropdownScroll: '#0a0a0a',
+      microphone: styleData.colorPrimary,
+      audioPlay: '#455247',
+      audioPause: '#455247',
+      audioCancel: '#eb4034',
+      audioConfirm: '#1ba65b',
+    },
+  },
+  dark: {
+    general: {
+      color: '#fff',
+      colorButtonClear: '#fff',
+      colorButton: '#fff',
+      backgroundColorButton: '#1976d2',
+      backgroundInput: '#202223',
+      colorPlaceholder: '#596269',
+      colorCaret: '#fff',
+      colorSpinner: '#fff',
+      borderStyle: 'none',
+      backgroundScrollIcon: '#fff',
+    },
+
+    container: {
+      border: 'none',
+      borderRadius: '4px',
+      boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)',
+    },
+
+    header: {
+      background: '#181a1b',
+      colorRoomName: '#fff',
+      colorRoomInfo: '#9ca6af',
+    },
+
+    footer: {
+      background: '#131415',
+      borderStyleInput: 'none',
+      borderInputSelected: '#1976d2',
+      backgroundReply: '#1b1c1c',
+      backgroundTagActive: '#1b1c1c',
+      backgroundTag: '#131415',
+    },
+
+    content: {
+      background: '#131415',
+    },
+
+    sidemenu: {
+      background: '#181a1b',
+      backgroundHover: '#202224',
+      backgroundActive: '#151617',
+      colorActive: '#fff',
+      borderColorSearch: '#181a1b',
+    },
+
+    dropdown: {
+      background: '#2a2c33',
+      backgroundHover: '#26282e',
+    },
+
+    message: {
+      background: '#22242a',
+      backgroundMe: '#1f7e80',
+      color: '#fff',
+      colorStarted: '#9ca6af',
+      backgroundDeleted: '#1b1c21',
+      backgroundSelected: '#c2dcf2',
+      colorDeleted: '#a2a5a8',
+      colorUsername: '#b3bac9',
+      colorTimestamp: '#ebedf2',
+      backgroundDate: 'rgba(0, 0, 0, 0.3)',
+      colorDate: '#bec5cc',
+      backgroundSystem: 'rgba(0, 0, 0, 0.3)',
+      colorSystem: '#bec5cc',
+      backgroundMedia: 'rgba(0, 0, 0, 0.18)',
+      backgroundReply: 'rgba(0, 0, 0, 0.18)',
+      colorReplyUsername: '#fff',
+      colorReply: '#d6d6d6',
+      colorTag: '#f0c60a',
+      backgroundImage: '#ddd',
+      colorNewMessages: '#fff',
+      backgroundScrollCounter: '#1976d2',
+      colorScrollCounter: '#fff',
+      backgroundReaction: 'none',
+      borderStyleReaction: 'none',
+      backgroundReactionHover: '#202223',
+      borderStyleReactionHover: 'none',
+      colorReactionCounter: '#fff',
+      backgroundReactionMe: '#4e9ad1',
+      borderStyleReactionMe: 'none',
+      backgroundReactionHoverMe: '#4e9ad1',
+      borderStyleReactionHoverMe: 'none',
+      colorReactionCounterMe: '#fff',
+      backgroundAudioRecord: '#eb4034',
+      backgroundAudioLine: 'rgba(255, 255, 255, 0.15)',
+      backgroundAudioProgress: '#b7d4d3',
+      backgroundAudioProgressSelector: '#b7d4d3',
+      colorFileExtension: '#a2a5a8',
+    },
+
+    markdown: {
+      background: 'rgba(239, 239, 239, 0.7)',
+      border: 'rgba(212, 212, 212, 0.9)',
+      color: '#e01e5a',
+      colorMulti: '#0a0a0a',
+    },
+
+    room: {
+      colorUsername: '#fff',
+      colorMessage: '#6c7278',
+      colorTimestamp: '#6c7278',
+      colorStateOnline: '#4caf50',
+      colorStateOffline: '#596269',
+      backgroundCounterBadge: '#1976d2',
+      colorCounterBadge: '#fff',
+    },
+
+    emoji: {
+      background: '#343740',
+    },
+
+    icons: {
+      search: '#596269',
+      add: '#fff',
+      toggle: '#fff',
+      menu: '#fff',
+      close: '#9ca6af',
+      closeImage: '#fff',
+      file: '#1976d2',
+      paperclip: '#fff',
+      closeOutline: '#fff',
+      closePreview: '#fff',
+      send: '#fff',
+      sendDisabled: '#646a70',
+      emoji: '#fff',
+      emojiReaction: '#fff',
+      document: '#1976d2',
+      pencil: '#ebedf2',
+      checkmark: '#ebedf2',
+      checkmarkSeen: '#f0d90a',
+      eye: '#fff',
+      dropdownMessage: '#fff',
+      dropdownMessageBackground: 'rgba(0, 0, 0, 0.25)',
+      dropdownRoom: '#fff',
+      dropdownScroll: '#0a0a0a',
+      microphone: '#fff',
+      audioPlay: '#b7d4d3',
+      audioPause: '#b7d4d3',
+      audioCancel: '#eb4034',
+      audioConfirm: '#1ba65b',
+    },
+  },
+}
+
+export default {
+  STYLE,
+}

webapp/graphql/Messages.js

@@ -1,21 +1,5 @@
 import gql from 'graphql-tag'
 
-export const messageQuery = () => {
-  return gql`
-    query ($roomId: ID!) {
-      Message(roomId: $roomId) {
-        _id
-        id
-        senderId
-        content
-        author {
-          id
-        }
-      }
-    }
-  `
-}
-
 export const createMessageMutation = () => {
   return gql`
     mutation ($roomId: ID!, $content: String!) {
@@ -26,3 +10,60 @@ export const createMessageMutation = () => {
     }
   `
 }
+
+export const messageQuery = () => {
+  return gql`
+    query ($roomId: ID!, $first: Int, $offset: Int) {
+      Message(roomId: $roomId, first: $first, offset: $offset, orderBy: indexId_desc) {
+        _id
+        id
+        indexId
+        content
+        senderId
+        author {
+          id
+        }
+        username
+        avatar
+        date
+        saved
+        distributed
+        seen
+      }
+    }
+  `
+}
+
+export const chatMessageAdded = () => {
+  return gql`
+    subscription chatMessageAdded($userId: ID!) {
+      chatMessageAdded(userId: $userId) {
+        _id
+        id
+        indexId
+        content
+        senderId
+        author {
+          id
+        }
+        username
+        avatar
+        date
+        room {
+          id
+        }
+        saved
+        distributed
+        seen
+      }
+    }
+  `
+}
+
+export const markMessagesAsSeen = () => {
+  return gql`
+    mutation ($messageIds: [String!]) {
+      MarkMessagesAsSeen(messageIds: $messageIds)
+    }
+  `
+}

webapp/graphql/PostQuery.js

@@ -77,6 +77,10 @@ export const filterPosts = (i18n) => {
         eventEnd
         eventVenue
         eventLocationName
+        eventLocation {
+          lng
+          lat
+        }
         eventIsOnline
         ...post
         ...postCounts

webapp/graphql/Rooms.js

@@ -1,12 +1,35 @@
 import gql from 'graphql-tag'
 
+export const createRoom = () => gql`
+  mutation ($userId: ID!) {
+    CreateRoom(userId: $userId) {
+      id
+      roomId
+    }
+  }
+`
+
 export const roomQuery = () => gql`
-  query {
+  query Room($first: Int, $offset: Int, $id: ID) {
-    Room {
+    Room(first: $first, offset: $offset, id: $id, orderBy: lastMessageAt_desc) {
       id
       roomId
       roomName
       avatar
+      lastMessageAt
+      unreadCount
+      lastMessage {
+        _id
+        id
+        content
+        senderId
+        username
+        avatar
+        date
+        saved
+        distributed
+        seen
+      }
       users {
         _id
         id
@@ -19,11 +42,18 @@ export const roomQuery = () => gql`
   }
 `
 
-export const createRoom = () => gql`
+export const unreadRoomsQuery = () => {
-  mutation ($userId: ID!) {
+  return gql`
-    CreateRoom(userId: $userId) {
+    query {
-      id
+      UnreadRooms
-      roomId
     }
-  }
+  `
-`
+}
+
+export const roomCountUpdated = () => {
+  return gql`
+    subscription roomCountUpdated($userId: ID!) {
+      roomCountUpdated(userId: $userId)
+    }
+  `
+}

webapp/layouts/default.vue

@@ -13,34 +13,42 @@
     <client-only>
       <modal />
     </client-only>
-    <div v-if="$store.getters['chat/showChat'].showChat" class="chat-modul">
+    <div v-if="getShowChat.showChat" class="chat-modul">
-      <ds-text align="right" class="close">
+      <chat singleRoom :roomId="getShowChat.roomID" @close-single-room="closeSingleRoom" />
-        RoomID: {{ $store.getters['chat/showChat'].roomID }}
-        <ds-button @click="$store.commit('chat/SET_OPEN_CHAT', { showChat: false, roomID: null })">
-          x
-        </ds-button>
-      </ds-text>
-      <chat-module :singleRoomId="$store.getters['chat/showChat'].roomID" />
     </div>
-    >
   </div>
 </template>
+
 <script>
+import { mapGetters, mapMutations } from 'vuex'
 import seo from '~/mixins/seo'
 import mobile from '~/mixins/mobile'
 import HeaderMenu from '~/components/HeaderMenu/HeaderMenu'
 import Modal from '~/components/Modal'
 import PageFooter from '~/components/PageFooter/PageFooter'
-import ChatModule from '~/components/Chat/Chat.vue'
+import Chat from '~/components/Chat/Chat.vue'
 
 export default {
   components: {
     HeaderMenu,
     Modal,
     PageFooter,
-    ChatModule,
+    Chat,
   },
   mixins: [seo, mobile()],
+  computed: {
+    ...mapGetters({
+      getShowChat: 'chat/showChat',
+    }),
+  },
+  methods: {
+    ...mapMutations({
+      showChat: 'chat/SET_OPEN_CHAT',
+    }),
+    closeSingleRoom() {
+      this.showChat({ showChat: false, roomID: null })
+    },
+  },
   beforeCreate() {
     this.$store.commit('chat/SET_OPEN_CHAT', { showChat: false, roomID: null })
   },
@@ -58,7 +66,6 @@ export default {
 
 .chat-modul {
   background-color: rgb(233, 228, 228);
-  height: 667px;
   width: 355px;
   position: fixed;
   bottom: 45px;

webapp/locales/de.json

@@ -77,6 +77,27 @@
       }
     }
   },
+  "chat": {
+    "cancelSelectMessage": "Abbrechen",
+    "conversationStarted": "Unterhaltung startete am:",
+    "isOnline": "online",
+    "isTyping": "tippt...",
+    "lastSeen": "zuletzt gesehen ",
+    "messageDeleted": "Diese Nachricht wuerde gelöscht",
+    "messagesEmpty": "Keine Nachrichten",
+    "newMessages": "Neue Nachrichten",
+    "page": {
+      "headline": "Chat"
+    },
+    "roomEmpty": "Keinen Raum selektiert",
+    "roomsEmpty": "Keine Räume",
+    "search": "Chat-Räume filtern",
+    "typeMessage": "Nachricht schreiben",
+    "userProfileButton": {
+      "label": "Chat",
+      "tooltip": "Chatte mit „{name}“"
+    }
+  },
   "client-only": {
     "loading": "Lade …"
   },
@@ -553,6 +574,9 @@
       },
       "groups": "Gruppen",
       "myProfile": "Mein Profil"
+    },
+    "chat": {
+      "tooltip": "Meine Chats"
     }
   },
   "index": {
@@ -581,7 +605,7 @@
     "moreInfo": "Was ist {APPLICATION_NAME}?",
     "moreInfoHint": "zur Präsentationsseite",
     "no-account": "Du hast noch kein Nutzerkonto?",
-    "no-cookie": "Es kann kein Cookie angelegt werden. Du must Cookies akzeptieren.",
+    "no-cookie": "Es kann kein Cookie angelegt werden. Du musst Cookies akzeptieren.",
     "password": "Dein Passwort",
     "register": "Nutzerkonto erstellen",
     "success": "Du bist eingeloggt!"
@@ -596,9 +620,16 @@
     "button": {
       "tooltip": "Landkarte anzeigen"
     },
-    "markerTypes": {
+    "legend": {
+      "event": "Veranstaltung",
       "group": "Gruppe",
-      "theUser": "deine Position",
+      "theUser": "Meine Position",
+      "user": "Nutzer"
+    },
+    "markerTypes": {
+      "event": "Veranstaltung",
+      "group": "Gruppe",
+      "theUser": "meine Position",
       "user": "Nutzer"
     },
     "pageTitle": "Landkarte",
@@ -692,10 +723,6 @@
       "unread": "Ungelesen"
     },
     "group": "Beschreibung",
-    "headerMenuButton": {
-      "chat": "Meine Chat",
-      "tooltip": "Meine Benachrichtigungen"
-    },
     "markAllAsRead": "Markiere alle als gelesen",
     "pageLink": "Alle Benachrichtigungen",
     "post": "Beitrag oder Gruppe",
@@ -711,11 +738,6 @@
     "title": "Benachrichtigungen",
     "user": "Nutzer"
   },
-  "position": {
-    "group": "Gruppe",
-    "my": "Meine Position",
-    "user": "Nutzer"
-  },
   "post": {
     "comment": {
       "reply": "Antworten",
@@ -760,9 +782,9 @@
     "viewEvent": {
       "eventEnd": "Ende",
       "eventIsOnline": "Online",
-      "eventLocationName": "Stadt",
+      "eventLocationName": "Stadt - z.B. Musterstraße 1, 12345 Musterstadt",
       "eventStart": "Beginn",
-      "eventVenue": "Veranstaltungsort",
+      "eventVenue": "Veranstaltungsort - z.B. Hinterhof, 1. OG, ...",
       "title": "Veranstaltung"
     },
     "viewPost": {

webapp/locales/en.json

@@ -77,6 +77,27 @@
       }
     }
   },
+  "chat": {
+    "cancelSelectMessage": "Cancel",
+    "conversationStarted": "Conversation started on:",
+    "isOnline": "is online",
+    "isTyping": "is writing...",
+    "lastSeen": "last seen ",
+    "messageDeleted": "This message was deleted",
+    "messagesEmpty": "No messages",
+    "newMessages": "New Messages",
+    "page": {
+      "headline": "Chat"
+    },
+    "roomEmpty": "No room selected",
+    "roomsEmpty": "No rooms",
+    "search": "Filter chat rooms",
+    "typeMessage": "Type message",
+    "userProfileButton": {
+      "label": "Chat",
+      "tooltip": "Chat with “{name}”"
+    }
+  },
   "client-only": {
     "loading": "Loading …"
   },
@@ -553,6 +574,9 @@
       },
       "groups": "Groups",
       "myProfile": "My profile"
+    },
+    "chat": {
+      "tooltip": "My chats"
     }
   },
   "index": {
@@ -596,9 +620,16 @@
     "button": {
       "tooltip": "Show map"
     },
+    "legend": {
+      "event": "Event",
+      "group": "Group",
+      "theUser": "My position",
+      "user": "User"
+    },
     "markerTypes": {
+      "event": "event",
       "group": "group",
-      "theUser": "your position",
+      "theUser": "my position",
       "user": "user"
     },
     "pageTitle": "Map",
@@ -692,10 +723,6 @@
       "unread": "Unread"
     },
     "group": "Description",
-    "headerMenuButton": {
-      "chat": "My Chat",
-      "tooltip": "My notifications"
-    },
     "markAllAsRead": "Mark all as read",
     "pageLink": "All notifications",
     "post": "Post or Group",
@@ -711,11 +738,6 @@
     "title": "Notifications",
     "user": "User"
   },
-  "position": {
-    "group": "Group",
-    "my": "My position",
-    "user": "User"
-  },
   "post": {
     "comment": {
       "reply": "Reply",
@@ -760,9 +782,9 @@
     "viewEvent": {
       "eventEnd": "End",
       "eventIsOnline": "Online",
-      "eventLocationName": "City",
+      "eventLocationName": "City - e.g. Example street 1, 12345 City",
       "eventStart": "Start",
-      "eventVenue": "Venue",
+      "eventVenue": "Venue - e.g. Backyard, 1st Floor, ...",
       "title": "Event"
     },
     "viewPost": {

webapp/locales/es.json

@@ -75,6 +75,9 @@
       }
     }
   },
+  "chat": {
+    "search": "Filtrar salas de chat"
+  },
   "code-of-conduct": {
     "subheader": "para la red social de {ORGANIZATION_NAME}"
   },

webapp/locales/fr.json

@@ -75,6 +75,9 @@
       }
     }
   },
+  "chat": {
+    "search": "Filtrer les salons de chat"
+  },
   "code-of-conduct": {
     "subheader": "pour le réseau social de {ORGANIZATION_NAME}"
   },

webapp/nuxt.config.js

@@ -105,6 +105,7 @@ export default {
       styleguideStyles,
       '~assets/_new/styles/tokens.scss',
       '~assets/styles/imports/_branding.scss',
+      '~assets/_new/styles/export.scss',
     ],
   },
 

webapp/pages/chat.vue

@@ -1,11 +1,28 @@
 <template>
-  <chat />
+  <div>
+    <ds-heading tag="h1">{{ $t('chat.page.headline') }}</ds-heading>
+    <chat :roomId="getShowChat.showChat ? getShowChat.roomID : null" />
+  </div>
 </template>
 
 <script>
+import { mapGetters, mapMutations } from 'vuex'
 import Chat from '../components/Chat/Chat.vue'
 
 export default {
   components: { Chat },
+  mounted() {
+    this.showChat({ showChat: false, roomID: null })
+  },
+  computed: {
+    ...mapGetters({
+      getShowChat: 'chat/showChat',
+    }),
+  },
+  methods: {
+    ...mapMutations({
+      showChat: 'chat/SET_OPEN_CHAT',
+    }),
+  },
 }
 </script>

webapp/pages/map.vue

@@ -5,16 +5,15 @@
       <ds-heading tag="h1">{{ $t('map.pageTitle') }}</ds-heading>
       <small>
         <div>
-          <img
+          <span v-for="type in markers.types" :key="type.id">
-            alt="my position"
+            <img
-            src="/img/mapbox/marker-icons/mapbox-marker-icon-orange.svg"
+              :alt="$t('map.legend.' + type.id)"
-            width="15"
+              :src="'/img/mapbox/marker-icons/' + type.icon.legendName"
-          />
+              width="15"
-          {{ $t('position.my') }}
+            />
-          <img alt="user" src="/img/mapbox/marker-icons/mapbox-marker-icon-green.svg" width="15" />
+            {{ $t('map.legend.' + type.id) }}
-          {{ $t('position.user') }}
+            &nbsp;&nbsp;
-          <img alt="group" src="/img/mapbox/marker-icons/mapbox-marker-icon-blue.svg" width="15" />
+          </span>
-          {{ $t('position.group') }}
         </div>
       </small>
     </ds-space>
@@ -66,6 +65,7 @@ import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'
 import { mapGetters } from 'vuex'
 import { profileUserQuery, mapUserQuery } from '~/graphql/User'
 import { groupQuery } from '~/graphql/groups'
+import { filterPosts } from '~/graphql/PostQuery.js'
 import mobile from '~/mixins/mobile'
 import Empty from '~/components/Empty/Empty'
 import MapStylesButtons from '~/components/Map/MapStylesButtons'
@@ -95,19 +95,40 @@ export default {
       currentUserCoordinates: null,
       users: null,
       groups: null,
+      posts: null,
       markers: {
-        icons: [
+        types: [
           {
-            id: 'marker-blue',
+            id: 'theUser',
-            name: 'mapbox-marker-icon-20px-blue.png',
+            icon: {
+              id: 'marker-orange',
+              legendName: 'mapbox-marker-icon-orange.svg',
+              mapName: 'mapbox-marker-icon-20px-orange.png',
+            },
           },
           {
-            id: 'marker-orange',
+            id: 'user',
-            name: 'mapbox-marker-icon-20px-orange.png',
+            icon: {
+              id: 'marker-green',
+              legendName: 'mapbox-marker-icon-green.svg',
+              mapName: 'mapbox-marker-icon-20px-green.png',
+            },
           },
           {
-            id: 'marker-green',
+            id: 'group',
-            name: 'mapbox-marker-icon-20px-green.png',
+            icon: {
+              id: 'marker-red',
+              legendName: 'mapbox-marker-icon-red.svg',
+              mapName: 'mapbox-marker-icon-20px-red.png',
+            },
+          },
+          {
+            id: 'event',
+            icon: {
+              id: 'marker-purple',
+              legendName: 'mapbox-marker-icon-purple.svg',
+              mapName: 'mapbox-marker-icon-20px-purple.png',
+            },
           },
         ],
         isImagesLoaded: false,
@@ -137,7 +158,8 @@ export default {
         this.markers.isImagesLoaded &&
         this.currentUser &&
         this.users &&
-        this.groups
+        this.groups &&
+        this.posts
       )
     },
     styles() {
@@ -236,17 +258,27 @@ export default {
 
         // Copy coordinates array.
         const coordinates = e.features[0].geometry.coordinates.slice()
-        const markerTypeLabel =
+        const markerTypeLabel = this.$t(`map.markerTypes.${e.features[0].properties.type}`)
-          e.features[0].properties.type === 'group'
+        const markerProfile = {
-            ? this.$t('map.markerTypes.group')
+          theUser: {
-            : e.features[0].properties.type === 'user'
+            linkTitle: '@' + e.features[0].properties.slug,
-            ? this.$t('map.markerTypes.user')
+            link: `/profile/${e.features[0].properties.id}/${e.features[0].properties.slug}`,
-            : this.$t('map.markerTypes.theUser')
+          },
-        const markerProfileLinkTitle =
+          user: {
-          (e.features[0].properties.type === 'group' ? '&' : '@') + e.features[0].properties.slug
+            linkTitle: '@' + e.features[0].properties.slug,
-        const markerProfileLink =
+            link: `/profile/${e.features[0].properties.id}/${e.features[0].properties.slug}`,
-          (e.features[0].properties.type === 'group' ? '/group' : '/profile') +
+          },
-          `/${e.features[0].properties.id}/${e.features[0].properties.slug}`
+          group: {
+            linkTitle: '&' + e.features[0].properties.slug,
+            link: `/group/${e.features[0].properties.id}/${e.features[0].properties.slug}`,
+          },
+          event: {
+            linkTitle: e.features[0].properties.slug,
+            link: `/post/${e.features[0].properties.id}/${e.features[0].properties.slug}`,
+          },
+        }
+        const markerProfileLinkTitle = markerProfile[e.features[0].properties.type].linkTitle
+        const markerProfileLink = markerProfile[e.features[0].properties.type].link
         let description = `
           <div>
             <div>
@@ -258,11 +290,11 @@ export default {
           </div>
            `
         description +=
-          e.features[0].properties.about && e.features[0].properties.about.length > 0
+          e.features[0].properties.description && e.features[0].properties.description.length > 0
             ? `
             <hr>
             <div>
-              ${e.features[0].properties.about}
+              ${e.features[0].properties.description}
             </div>`
             : ''
 
@@ -305,15 +337,18 @@ export default {
     },
     loadMarkersIconsAndAddMarkers() {
       Promise.all(
-        this.markers.icons.map(
+        this.markers.types.map(
           (marker) =>
             new Promise((resolve, reject) => {
               // our images have to be in the 'static/img/*' folder otherwise they are not reachable via URL
-              this.map.loadImage('img/mapbox/marker-icons/' + marker.name, (error, image) => {
+              this.map.loadImage(
-                if (error) throw error
+                'img/mapbox/marker-icons/' + marker.icon.mapName,
-                this.map.addImage(marker.id, image)
+                (error, image) => {
-                resolve()
+                  if (error) throw error
-              })
+                  this.map.addImage(marker.icon.id, image)
+                  resolve()
+                },
+              )
             }),
         ),
       ).then(() => {
@@ -337,7 +372,7 @@ export default {
                 id: user.id,
                 slug: user.slug,
                 name: user.name,
-                about: user.about ? user.about : undefined,
+                description: user.about ? user.about : undefined,
               },
               geometry: {
                 type: 'Point',
@@ -346,27 +381,6 @@ export default {
             })
           }
         })
-        // add markers for "groups"
-        this.groups.forEach((group) => {
-          if (group.location) {
-            this.markers.geoJSON.push({
-              type: 'Feature',
-              properties: {
-                type: 'group',
-                iconName: 'marker-blue',
-                iconRotate: 0.0,
-                id: group.id,
-                slug: group.slug,
-                name: group.name,
-                about: group.about ? group.about : undefined,
-              },
-              geometry: {
-                type: 'Point',
-                coordinates: this.getCoordinates(group.location),
-              },
-            })
-          }
-        })
         // add marker for "currentUser"
         if (this.currentUserCoordinates) {
           this.markers.geoJSON.push({
@@ -378,7 +392,7 @@ export default {
               id: this.currentUser.id,
               slug: this.currentUser.slug,
               name: this.currentUser.name,
-              about: this.currentUser.about ? this.currentUser.about : undefined,
+              description: this.currentUser.about ? this.currentUser.about : undefined,
             },
             geometry: {
               type: 'Point',
@@ -386,6 +400,48 @@ export default {
             },
           })
         }
+        // add markers for "groups"
+        this.groups.forEach((group) => {
+          if (group.location) {
+            this.markers.geoJSON.push({
+              type: 'Feature',
+              properties: {
+                type: 'group',
+                iconName: 'marker-red',
+                iconRotate: 0.0,
+                id: group.id,
+                slug: group.slug,
+                name: group.name,
+                description: group.about ? group.about : undefined,
+              },
+              geometry: {
+                type: 'Point',
+                coordinates: this.getCoordinates(group.location),
+              },
+            })
+          }
+        })
+        // add markers for "posts", post type "Event" with location coordinates
+        this.posts.forEach((post) => {
+          if (post.postType.includes('Event') && post.eventLocation) {
+            this.markers.geoJSON.push({
+              type: 'Feature',
+              properties: {
+                type: 'event',
+                iconName: 'marker-purple',
+                iconRotate: 0.0,
+                id: post.id,
+                slug: post.slug,
+                name: post.title,
+                description: post.contentExcerpt,
+              },
+              geometry: {
+                type: 'Point',
+                coordinates: this.getCoordinates(post.eventLocation),
+              },
+            })
+          }
+        })
 
         this.markers.isGeoJSON = true
       }
@@ -483,6 +539,24 @@ export default {
       },
       fetchPolicy: 'cache-and-network',
     },
+    Post: {
+      query() {
+        return filterPosts(this.$i18n)
+      },
+      variables() {
+        return {
+          filter: {
+            postType_in: ['Event'],
+            eventStart_gte: new Date(),
+            // would be good to just query for events with defined "eventLocation". couldn't get it working
+          },
+        }
+      },
+      update({ Post }) {
+        this.posts = Post
+      },
+      fetchPolicy: 'cache-and-network',
+    },
   },
 }
 </script>

webapp/pages/profile/_id/_slug.vue

@@ -80,13 +80,14 @@
               @update="updateFollow"
             />
             <base-button
-              @click="$store.commit('chat/SET_OPEN_CHAT', { showChat: true, roomID: user.id })"
+              icon="chat-bubble"
               v-tooltip="{
-                content: $t('notifications.headerMenuButton.chat'),
+                content: $t('chat.userProfileButton.tooltip', { name: userName }),
                 placement: 'bottom-start',
               }"
+              @click="showOrChangeChat(user.id)"
             >
-              <img src="/img/empty/chat-bubble.svg" height="20" />
+              {{ $t('chat.userProfileButton.label') }}
             </base-button>
           </div>
           <template v-if="user.about">
@@ -181,6 +182,7 @@
 
 <script>
 import uniqBy from 'lodash/uniqBy'
+import { mapGetters, mapMutations } from 'vuex'
 import postListActions from '~/mixins/postListActions'
 import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
 import HcFollowButton from '~/components/Button/FollowButton'
@@ -252,6 +254,9 @@ export default {
     }
   },
   computed: {
+    ...mapGetters({
+      getShowChat: 'chat/showChat',
+    }),
     myProfile() {
       return this.$route.params.id === this.$store.getters['auth/user'].id
     },
@@ -290,6 +295,10 @@ export default {
     },
   },
   methods: {
+    ...mapMutations({
+      commitModalData: 'modal/SET_OPEN',
+      showChat: 'chat/SET_OPEN_CHAT',
+    }),
     handleTab(tab) {
       if (this.tabActive !== tab) {
         this.tabActive = tab
@@ -365,7 +374,7 @@ export default {
       }
     },
     async deleteUser(userdata) {
-      this.$store.commit('modal/SET_OPEN', {
+      this.commitModalData({
         name: 'delete',
         data: {
           userdata: userdata,
@@ -397,6 +406,12 @@ export default {
       if (type === 'following') this.followingCount = count
       if (type === 'followedBy') this.followedByCount = count
     },
+    async showOrChangeChat(roomID) {
+      if (this.getShowChat.showChat) {
+        await this.showChat({ showChat: false, roomID: null })
+      }
+      await this.showChat({ showChat: true, roomID })
+    },
   },
   apollo: {
     profilePagePosts: {

webapp/static/img/empty/chat-bubble.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="chat-bubble"><g data-name="Chat"><path fill="#9B9B9B" d="M27.23,24.91A9,9,0,0,0,22.44,9.52,8.57,8.57,0,0,0,21,9.41a8.94,8.94,0,0,0-8.92,10.14c0,.1,0,.2,0,.29a9,9,0,0,0,.22,1l0,.11a8.93,8.93,0,0,0,.38,1l.13.28a9,9,0,0,0,.45.83l.07.14a9.13,9.13,0,0,1-2.94-.36,1,1,0,0,0-.68,0L7,24.13l.54-1.9a1,1,0,0,0-.32-1,9,9,0,0,1,11.27-14,1,1,0,0,0,1.23-1.58A10.89,10.89,0,0,0,13,3.25a11,11,0,0,0-7.5,19l-1,3.34A1,1,0,0,0,5.9,26.82l4.35-1.93a11,11,0,0,0,4.68.16A9,9,0,0,0,21,27.41a8.81,8.81,0,0,0,2.18-.27l3.41,1.52A1,1,0,0,0,28,27.48Zm-1.77-1.1a1,1,0,0,0-.32,1L25.45,26l-1.79-.8a1,1,0,0,0-.41-.09,1,1,0,0,0-.29,0,6.64,6.64,0,0,1-2,.29,7,7,0,0,1,0-14,6.65,6.65,0,0,1,1.11.09,7,7,0,0,1,3.35,12.31Z"></path><path fill="#9B9B9B" d="M17.82 17.08H17a1 1 0 0 0 0 2h.82a1 1 0 0 0 0-2zM21.41 17.08h-.82a1 1 0 0 0 0 2h.82a1 1 0 0 0 0-2zM25 17.08h-.82a1 1 0 0 0 0 2H25a1 1 0 0 0 0-2z"></path></g></svg>

webapp/store/chat.js

@@ -2,6 +2,7 @@ export const state = () => {
   return {
     showChat: false,
     roomID: null,
+    unreadRoomCount: 0,
   }
 }
 
@@ -10,6 +11,9 @@ export const mutations = {
     state.showChat = ctx.showChat || false
     state.roomID = ctx.roomID || null
   },
+  UPDATE_ROOM_COUNT(state, count) {
+    state.unreadRoomCount = count
+  },
 }
 
 export const getters = {
@@ -19,4 +23,7 @@ export const getters = {
   roomID(state) {
     return state
   },
+  unreadRoomCount(state) {
+    return state.unreadRoomCount
+  },
 }