Add maintenance as separate project, based on Nuxt 3

2025-12-13 07:46:06 +00:00 · 2025-04-15 18:34:10 +02:00 · 2025-04-15 18:34:10 +02:00 · c4e9f226cc
commit c4e9f226cc
parent 2d8fe8a941
118 changed files with 27285 additions and 0 deletions
--- a/maintenance/.gitignore
+++ b/maintenance/.gitignore
@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
--- a/maintenance/README.md
+++ b/maintenance/README.md
@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
--- a/maintenance/app.vue
+++ b/maintenance/app.vue
@ -0,0 +1,20 @@
+<script setup lang="ts">
+import Maintenance from './components/maintenance.vue';
+
+</script>
+
+<template>
+  <div>
+    <Maintenance />
+  </div>
+</template>
+
+<style>
+:root {
+  --space-base: 16px;
+  --space-small: 8px;
+  --space-x-small: 6px;
+  --space-xx-small: 4px;
+  --color-locale-menu: #333;
+}
+</style>
--- a/maintenance/components/Dropdown.vue
+++ b/maintenance/components/Dropdown.vue
@ -0,0 +1,136 @@
+<template>
+  <v-popover
+    v-model:open="isPopoverOpen"
+    :open-group="Math.random().toString()"
+    :placement="placement"
+    :disabled="disabled"
+    trigger="manual"
+    :offset="offset"
+  >
+    <slot :toggle-menu="toggleMenu" :open-menu="openMenu" :close-menu="closeMenu" :is-open="isOpen" />
+    <template #popover>
+<div  @mouseover="popoverMouseEnter" @mouseleave="popoverMouseLeave">
+      <slot
+        name="popover"
+        :toggle-menu="toggleMenu"
+        :open-menu="openMenu"
+        :close-menu="closeMenu"
+        :is-open="isOpen"
+      />
+    </div>
+</template>
+  </v-popover>
+</template>
+
+<script>
+let mouseEnterTimer = null
+let mouseLeaveTimer = null
+
+export default {
+  props: {
+    placement: { type: String, default: 'bottom-end' },
+    disabled: { type: Boolean, default: false },
+    offset: { type: [String, Number], default: '16' },
+  },
+  data() {
+    return {
+      isPopoverOpen: false,
+      developerNoAutoClosing: false, // stops automatic closing of menu for developer purposes: default is 'false'
+    }
+  },
+  computed: {
+    isOpen() {
+      return this.isPopoverOpen
+    },
+  },
+  watch: {
+    isPopoverOpen: {
+      immediate: true,
+      handler(isOpen) {
+        try {
+          if (isOpen) {
+            this.$nextTick(() => {
+              setTimeout(() => {
+                const paddingRightStyle = `${
+                  window.innerWidth - document.documentElement.clientWidth
+                }px`
+                const navigationElement = document.querySelector('.main-navigation')
+                document.body.style.paddingRight = paddingRightStyle
+                document.body.classList.add('dropdown-open')
+                if (navigationElement) {
+                  navigationElement.style.paddingRight = paddingRightStyle
+                }
+              }, 20)
+            })
+          } else {
+            const navigationElement = document.querySelector('.main-navigation')
+            document.body.style.paddingRight = null
+            document.body.classList.remove('dropdown-open')
+            if (navigationElement) {
+              navigationElement.style.paddingRight = null
+            }
+          }
+        } catch (err) {}
+      },
+    },
+  },
+  beforeUnmount() {
+    clearTimeout(mouseEnterTimer)
+    clearTimeout(mouseLeaveTimer)
+  },
+  methods: {
+    toggleMenu() {
+      this.isPopoverOpen ? this.closeMenu(false) : this.openMenu(false)
+    },
+    openMenu(useTimeout) {
+      if (this.disabled) {
+        return
+      }
+      this.clearTimeouts()
+      if (useTimeout === true) {
+        this.popoverMouseEnter()
+      } else {
+        this.isPopoverOpen = true
+      }
+    },
+    closeMenu(useTimeout) {
+      if (this.disabled) {
+        return
+      }
+      this.clearTimeouts()
+      if (useTimeout === true) {
+        this.popoverMouseLeave()
+      } else {
+        this.isPopoverOpen = false
+      }
+    },
+    popoverMouseEnter() {
+      if (this.disabled) {
+        return
+      }
+      this.clearTimeouts()
+      if (!this.isPopoverOpen) {
+        mouseEnterTimer = setTimeout(() => {
+          this.isPopoverOpen = true
+        }, 500)
+      }
+    },
+    popoverMouseLeave() {
+      if (this.developerNoAutoClosing) return
+      if (this.disabled) {
+        return
+      }
+      this.clearTimeouts()
+      if (this.isPopoverOpen) {
+        mouseLeaveTimer = setTimeout(() => {
+          this.isPopoverOpen = false
+        }, 300)
+      }
+    },
+    clearTimeouts() {
+      clearTimeout(mouseEnterTimer)
+      clearTimeout(mouseLeaveTimer)
+    },
+  },
+}
+</script>
--- a/maintenance/components/LocaleSwitch/LocaleSwitch.spec.js
+++ b/maintenance/components/LocaleSwitch/LocaleSwitch.spec.js
@ -0,0 +1,107 @@
+import { mount } from '@vue/test-utils'
+
+import LocaleSwitch from './LocaleSwitch.vue'
+import Vuex from 'vuex'
+
+const localVue = global.localVue
+
+const stubs = {
+  'client-only': true,
+}
+
+describe('LocaleSwitch.vue', () => {
+  let wrapper, mocks, computed, deutschLanguageItem, getters
+
+  beforeEach(() => {
+    mocks = {
+      $i18n: {
+        locale: () => 'en',
+        set: jest.fn((locale) => locale),
+      },
+      $t: jest.fn(),
+      $toast: {
+        success: jest.fn((a) => a),
+        error: jest.fn((a) => a),
+      },
+      setPlaceholderText: jest.fn(),
+      $apollo: {
+        mutate: jest
+          .fn()
+          .mockResolvedValueOnce({
+            data: {
+              UpdateUser: {
+                locale: 'de',
+              },
+            },
+          })
+          .mockRejectedValueOnce({
+            message: 'Please log in!',
+          }),
+      },
+    }
+    computed = {
+      current: () => {
+        return { code: 'en' }
+      },
+      routes: () => {
+        return [
+          {
+            name: 'English',
+            path: 'en',
+          },
+          {
+            name: 'Deutsch',
+            path: 'de',
+          },
+        ]
+      },
+    }
+    getters = {
+      'auth/user': () => {
+        return { id: 'u35' }
+      },
+    }
+  })
+
+  const Wrapper = () => {
+    const store = new Vuex.Store({
+      getters,
+    })
+    return mount(LocaleSwitch, { mocks, localVue, computed, store, stubs })
+  }
+
+  describe('with current user', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+      wrapper.find('.locale-menu').trigger('click')
+      deutschLanguageItem = wrapper.findAll('li').at(1)
+      deutschLanguageItem.trigger('click')
+    })
+
+    it("sets a user's locale", () => {
+      expect(mocks.$i18n.set).toHaveBeenCalledTimes(1)
+    })
+
+    it("updates the user's locale in the database", () => {
+      expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('no current user', () => {
+    beforeEach(() => {
+      getters = {
+        'auth/user': () => {
+          return null
+        },
+      }
+      wrapper = Wrapper()
+      wrapper.find('.locale-menu').trigger('click')
+      deutschLanguageItem = wrapper.findAll('li').at(1)
+      deutschLanguageItem.trigger('click')
+    })
+
+    it('does not send a UpdateUser mutation', () => {
+      expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
+    })
+  })
+})
--- a/maintenance/components/LocaleSwitch/LocaleSwitch.vue
+++ b/maintenance/components/LocaleSwitch/LocaleSwitch.vue
@ -0,0 +1,142 @@
+<template>
+  <client-only>
+    <dropdown ref="menu" :placement="placement" :offset="offset">
+      <template #default="{ toggleMenu }">
+        <a
+          v-tooltip="{
+            content: $t('localeSwitch.tooltip'),
+            placement: 'bottom-start',
+          }"
+          class="locale-menu"
+          href="#"
+          @click.prevent="toggleMenu()"
+        >
+        <!-- <base-icon name="globe" /> -->
+          <span class="label">{{ current.code.toUpperCase() }}</span>
+          <base-icon class="dropdown-arrow" name="angle-down" />
+        </a>
+      </template>
+      <template #popover="{ toggleMenu }">
+        <ds-menu class="locale-menu-popover" :matcher="matcher" :routes="routes">
+          <template #menuitem="item">
+            <ds-menu-item
+              class="locale-menu-item"
+              :route="item.route"
+              :parents="item.parents"
+              @click.stop.prevent="changeLanguage(item.route.path, toggleMenu)"
+            >
+              {{ item.route.name }}
+            </ds-menu-item>
+          </template>
+        </ds-menu>
+      </template>
+    </dropdown>
+  </client-only>
+</template>
+
+<script>
+import Dropdown from '~/components/Dropdown'
+import find from 'lodash/find'
+import orderBy from 'lodash/orderBy'
+import locales from '~/locales'
+import { mapState, mapMutations } from 'pinia'
+
+export default {
+  components: {
+    Dropdown,
+  },
+  props: {
+    placement: { type: String, default: 'bottom-start' },
+    offset: { type: [String, Number], default: '16' },
+  },
+  data() {
+    return {
+      locales: orderBy(locales, 'name'),
+    }
+  },
+  computed: {
+    current() {
+      return find(this.locales, { code: this.$i18n.locale() })
+    },
+    routes() {
+      const routes = this.locales.map((locale) => {
+        return {
+          name: locale.name,
+          path: locale.code,
+        }
+      })
+      return routes
+    },
+    ...mapState({
+      currentUser: 'auth/user',
+    }),
+  },
+  methods: {
+    changeLanguage(locale, toggleMenu) {
+      this.$i18n.set(locale)
+      this.updateUserLocale()
+      toggleMenu()
+    },
+    matcher(locale) {
+      return locale === this.$i18n.locale()
+    },
+
+    ...mapMutations({
+      setCurrentUser: 'auth/SET_USER',
+    }),
+    async updateUserLocale() {
+      if (!this.currentUser || !this.currentUser.id) return null
+      try {
+        await this.$apollo.mutate({
+          mutation: gql`
+            mutation ($id: ID!, $locale: String) {
+              UpdateUser(id: $id, locale: $locale) {
+                id
+                locale
+              }
+            }
+          `,
+          variables: {
+            id: this.currentUser.id,
+            locale: this.$i18n.locale(),
+          },
+          update: (store, { data: { UpdateUser } }) => {
+            const { locale } = UpdateUser
+            this.setCurrentUser({
+              ...this.currentUser,
+              locale,
+            })
+          },
+        })
+        this.$toast.success(this.$t('contribution.success'))
+      } catch (err) {
+        this.$toast.error(err.message)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.locale-menu {
+  user-select: none;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: var(--space-xx-small);
+  color: var(--color-locale-menu);
+
+  > .label {
+    margin: 0 var(--space-xx-small);
+  }
+}
+
+nav.locale-menu-popover {
+  margin-block: calc(-1 * var(--space-small)) !important;
+
+  a {
+    padding: var(--space-x-small) var(--space-small);
+    padding-right: var(--space-base);
+  }
+}
+</style>
--- a/maintenance/components/maintenance.vue
+++ b/maintenance/components/maintenance.vue
@ -0,0 +1,71 @@
+<template>
+    <transition name="fade" appear>
+      <ds-container width="medium">
+        <base-card>
+          <ds-space>
+            <!-- <locale-switch class="login-locale-switch" offset="5" /> -->
+          </ds-space>
+          <ds-flex>
+            <ds-flex-item :width="{ base: '100%', sm: 1, md: 1 }">
+              <ds-space>
+                <!-- QUESTION: could we have internal page or even all internal pages here as well with PageParamsLink by having the footer underneath? -->
+                <!--   I tried this out, but only could get the nginx page displayed. I guees the there were nuxt errors, because the nuxt config file 'webapp/maintenance/source/nuxt.config.maintenance.js' would have to be refactored for that as well and may be the missing folder `components/_new/generic/` plays a role, see https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/4619 -->
+                <!-- <page-params-link :pageParams="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)">
+                  <logo type="maintenance" />
+                </page-params-link> -->
+                <!-- BUT: not the logo and not even the a-tag is working at the moment -->
+                <!-- <a
+                  :href="emails.ORGANIZATION_LINK"
+                  :title="$t('login.moreInfo', metadata)"
+                  target="_blank"
+                > -->
+                <img class="image" alt="Under maintenance" src="/img/custom/logo-squared.svg" >
+                <!-- </a> -->
+              </ds-space>
+            </ds-flex-item>
+            <ds-flex-item :width="{ base: '100%', sm: 1, md: 1 }">
+              <ds-flex-item>
+                <ds-heading tag="h3">{{ $t('maintenance.title', metadata) }}</ds-heading>
+              </ds-flex-item>
+              <ds-flex-item>
+                <ds-space margin="small">
+                  <ds-text>{{ $t('maintenance.explanation') }}</ds-text>
+                  <ds-text>
+                    {{ $t('maintenance.questions') }}
+                    <a :href="'mailto:' + supportEmail">{{ supportEmail }}</a>
+                  </ds-text>
+                </ds-space>
+              </ds-flex-item>
+            </ds-flex-item>
+          </ds-flex>
+        </base-card>
+      </ds-container>
+    </transition>
+  </template>
+
+  <script>
+  import emails from '~/constants/emails.js'
+  // import links from '~/constants/links.js'
+  import metadata from '~/constants/metadata.js'
+//  import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
+  // import Logo from '~/components/Logo/Logo'
+
+  export default {
+    components: {
+      // LocaleSwitch,
+      // Logo,
+    },
+    layout: 'blank',
+    data() {
+      // return { links, metadata, supportEmail: emails.SUPPORT_EMAIL }
+      return { metadata, supportEmail: emails.SUPPORT_EMAIL }
+    },
+  }
+  </script>
+
+  <style lang="scss">
+  .image {
+    width: 75%;
+    height: auto;
+  }
+  </style>
--- a/maintenance/constants/categories.js
+++ b/maintenance/constants/categories.js
@ -0,0 +1,3 @@
+// this file is duplicated in `backend/src/constants/metadata.js` and `webapp/constants/metadata.js`
+export const CATEGORIES_MIN = 1
+export const CATEGORIES_MAX = 3
--- a/maintenance/constants/chat.js
+++ b/maintenance/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: styleData.chatRoomBackgroundCounterBadge,
+      colorScrollCounter: styleData.chatRoomColorCounterBadge,
+      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: styleData.chatRoomBackgroundCounterBadge,
+      colorCounterBadge: styleData.chatRoomColorCounterBadge,
+    },
+
+    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,
+}
--- a/maintenance/constants/comment.js
+++ b/maintenance/constants/comment.js
@ -0,0 +1,3 @@
+export const COMMENT_MIN_LENGTH = 1
+export const COMMENT_MAX_UNTRUNCATED_LENGTH = 1200
+export const COMMENT_TRUNCATE_TO_LENGTH = 180
--- a/maintenance/constants/dateTime.js
+++ b/maintenance/constants/dateTime.js
@ -0,0 +1,5 @@
+// this file is duplicated in `backend/src/config/metadata.js` and `webapp/constants/metadata.js`
+export default {
+  RELATIVE_DATETIME: true,
+  ABSOLUT_DATETIME_FORMAT: 'P',
+}
--- a/maintenance/constants/donation.js
+++ b/maintenance/constants/donation.js
@ -0,0 +1 @@
+export const PROGRESS_BAR_COLOR_TYPE = 'gradient' // 'uni' is the other option
--- a/maintenance/constants/editor.js
+++ b/maintenance/constants/editor.js
@ -0,0 +1,2 @@
+export const HASHTAG = 'hashtag'
+export const MENTION = 'mention'
--- a/maintenance/constants/emails.js
+++ b/maintenance/constants/emails.js
@ -0,0 +1,8 @@
+// this file is duplicated in `backend/src/config/` and `webapp/constants/` and replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/constants/
+export default {
+  SUPPORT_EMAIL: 'devops@ocelot.social',
+  MODERATION_EMAIL: 'devops@ocelot.social',
+  // ATTENTION: the following links have to be defined even for internal pages with full URLs as example like 'https://staging.ocelot.social/support', because they are used in e-mails!
+  ORGANIZATION_LINK: 'https://ocelot.social',
+  SUPPORT_LINK: 'https://ocelot.social',
+}
--- a/maintenance/constants/filter.js
+++ b/maintenance/constants/filter.js
@ -0,0 +1,2 @@
+export const SHOW_CONTENT_FILTER_HEADER_MENU = false
+export const SHOW_CONTENT_FILTER_MASONRY_GRID = true
--- a/maintenance/constants/groups.js
+++ b/maintenance/constants/groups.js
@ -0,0 +1,5 @@
+// this file is duplicated in `backend/src/constants/group.js` and `webapp/constants/group.js`
+export const NAME_LENGTH_MIN = 3
+export const NAME_LENGTH_MAX = 50
+export const DESCRIPTION_WITHOUT_HTML_LENGTH_MIN = 3 // with removed HTML tags
+export const SHOW_GROUP_BUTTON_IN_HEADER = true
--- a/maintenance/constants/headerMenu.js
+++ b/maintenance/constants/headerMenu.js
@ -0,0 +1 @@
+export default {}
--- a/maintenance/constants/headerMenuBranded.js
+++ b/maintenance/constants/headerMenuBranded.js
@ -0,0 +1,27 @@
+import { merge } from 'lodash'
+import headerMenu from '~/constants/headerMenu.js'
+
+const defaultHeaderMenu = {
+  CUSTOM_BUTTON: {
+    // iconPath: '/img/custom/X',
+    // iconWidth: '28px',
+    // iconAltText: 'X',
+    // toolTipIdent: 'nameIdent',
+    // path: '/',
+    // url: 'https://ocelot.social/en/donate',
+    // target: '_blank',
+  },
+  MENU: [
+    // {
+    //   nameIdent: 'nameIdent',
+    //   path: '/',
+    // },
+    // {
+    //   nameIdent: 'nameIdent',
+    //   url: 'https://ocelot.social',
+    //   target: '_blank',
+    // },
+  ],
+}
+
+export default merge(defaultHeaderMenu, headerMenu)
--- a/maintenance/constants/keycodes.js
+++ b/maintenance/constants/keycodes.js
@ -0,0 +1,4 @@
+export const ARROW_UP = 38
+export const ARROW_DOWN = 40
+export const RETURN = 13
+export const SPACE = 32
--- a/maintenance/constants/links.js
+++ b/maintenance/constants/links.js
@ -0,0 +1,149 @@
+// this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/constants/
+
+import { defaultPageParamsPages } from '~/components/utils/InternalPages.js'
+
+const ORGANIZATION = defaultPageParamsPages.ORGANIZATION.overwrite({
+  // if defined it's dominating
+  externalLink: {
+    url: 'https://ocelot.social',
+    target: '_blank',
+  },
+
+  internalPage: {
+    // footerIdent: 'site.made', // localized string identifier, if undefined default is used
+    // headTitleIdent: 'site.made', // localized string identifier, if undefined default is used
+    // headlineIdent: 'site.made', // localized string identifier, on null it's hidden, if undefined default is used
+    hasContainer: true,
+    hasBaseCard: true,
+    hasLoginInHeader: true,
+    // in case internal page content is here 'webapp/locales/html/'
+  },
+})
+const DONATE = defaultPageParamsPages.DONATE.overwrite({
+  // if defined it's dominating
+  externalLink: {
+    url: 'https://busfaktor.org/en/spenden',
+    target: '_blank',
+  },
+
+  internalPage: {
+    // footerIdent: 'site.donate', // localized string identifier, if undefined default is used
+    // headTitleIdent: 'site.donate', // localized string identifier, if undefined default is used
+    // headlineIdent: 'site.donate', // localized string identifier, on null it's hidden, if undefined default is used
+    hasContainer: true,
+    hasBaseCard: true,
+    hasLoginInHeader: true,
+    // in case internal page content is here 'webapp/locales/html/'
+  },
+})
+const IMPRINT = defaultPageParamsPages.IMPRINT.overwrite({
+  externalLink: {
+    url: 'http://ocelot.social/en/impressum',
+    target: '_blank',
+  },
+
+  internalPage: {
+    // footerIdent: 'site.imprint', // localized string identifier, if undefined default is used
+    // headTitleIdent: 'site.imprint', // localized string identifier, if undefined default is used
+    // headlineIdent: 'site.imprint', // localized string identifier, on null it's hidden, if undefined default is used
+    hasContainer: true,
+    hasBaseCard: true,
+    hasLoginInHeader: true,
+    // in case internal page content is here 'webapp/locales/html/'
+  },
+})
+const TERMS_AND_CONDITIONS = defaultPageParamsPages.TERMS_AND_CONDITIONS.overwrite({
+  // externalLink: null, // if defined it's dominating
+
+  internalPage: {
+    // footerIdent: 'site.termsAndConditions', // localized string identifier, if undefined default is used
+    // headTitleIdent: 'site.termsAndConditions', // localized string identifier, if undefined default is used
+    // headlineIdent: 'site.termsAndConditions', // localized string identifier, on null it's hidden, if undefined default is used
+    hasContainer: true,
+    hasBaseCard: true,
+    hasLoginInHeader: true,
+    // in case internal page content is here 'webapp/locales/html/'
+  },
+})
+const CODE_OF_CONDUCT = defaultPageParamsPages.CODE_OF_CONDUCT.overwrite({
+  // externalLink: null, // if defined it's dominating
+
+  internalPage: {
+    // footerIdent: 'site.code-of-conduct', // localized string identifier, if undefined default is used
+    // headTitleIdent: 'site.code-of-conduct', // localized string identifier, if undefined default is used
+    // headlineIdent: 'site.code-of-conduct', // localized string identifier, on null it's hidden, if undefined default is used
+    hasContainer: true,
+    hasBaseCard: true,
+    hasLoginInHeader: true,
+    // in case internal page content is here 'webapp/locales/html/'
+  },
+})
+const DATA_PRIVACY = defaultPageParamsPages.DATA_PRIVACY.overwrite({
+  // externalLink: null, // if defined it's dominating
+
+  internalPage: {
+    // footerIdent: 'site.data-privacy', // localized string identifier, if undefined default is used
+    // headTitleIdent: 'site.data-privacy', // localized string identifier, if undefined default is used
+    // headlineIdent: 'site.data-privacy', // localized string identifier, on null it's hidden, if undefined default is used
+    hasContainer: true,
+    hasBaseCard: true,
+    hasLoginInHeader: true,
+    // in case internal page content is here 'webapp/locales/html/'
+  },
+})
+const FAQ = defaultPageParamsPages.FAQ.overwrite({
+  // externalLink: null, // if defined it's dominating
+
+  internalPage: {
+    // footerIdent: 'site.faq', // localized string identifier, if undefined default is used
+    // headTitleIdent: 'site.faq', // localized string identifier, if undefined default is used
+    // headlineIdent: 'site.faq', // on null default is used, on empty string it's hidden
+    hasContainer: true,
+    hasBaseCard: true,
+    hasLoginInHeader: true,
+    // in case internal page content is here 'webapp/locales/html/'
+  },
+})
+const SUPPORT = defaultPageParamsPages.SUPPORT.overwrite({
+  // if defined it's dominating
+  externalLink: {
+    url: 'https://ocelot.social',
+    target: '_blank',
+  },
+
+  internalPage: {
+    // footerIdent: 'site.support', // localized string identifier, if undefined default is used
+    // headTitleIdent: 'site.support', // localized string identifier, if undefined default is used
+    // headlineIdent: 'site.support', // on null default is used, on empty string it's hidden
+    hasContainer: true,
+    hasBaseCard: true,
+    hasLoginInHeader: true,
+    // in case internal page content is here 'webapp/locales/html/'
+  },
+})
+
+export default {
+  LANDING_PAGE: '/login', // examples: '/login', '/registration', '/organization', or external 'https://ocelot.social'
+
+  // you can find and store templates for 👇🏼 at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/
+
+  ORGANIZATION,
+  DONATE,
+  IMPRINT,
+  TERMS_AND_CONDITIONS,
+  CODE_OF_CONDUCT,
+  DATA_PRIVACY,
+  FAQ,
+  SUPPORT,
+
+  FOOTER_LINK_LIST: [
+    ORGANIZATION,
+    TERMS_AND_CONDITIONS,
+    CODE_OF_CONDUCT,
+    DATA_PRIVACY,
+    FAQ,
+    DONATE,
+    SUPPORT,
+    IMPRINT,
+  ],
+}
--- a/maintenance/constants/logos.js
+++ b/maintenance/constants/logos.js
@ -0,0 +1,24 @@
+// this file is duplicated in `backend/src/config/logos.js` and `webapp/constants/logos.js` and replaced on rebranding
+// this are the paths in the webapp
+export default {
+  LOGO_HEADER_PATH: '/img/custom/logo-horizontal.svg',
+  LOGO_HEADER_WIDTH: '130px',
+  LOGO_HEADER_CLICK: {
+    // externalLink: {
+    //   url: 'https://ocelot.social',
+    //   target: '_blank',
+    // },
+    externalLink: null,
+    internalPath: {
+      to: {
+        name: 'index',
+      },
+      scrollTo: '.main-navigation',
+    },
+  },
+  LOGO_SIGNUP_PATH: '/img/custom/logo-squared.svg',
+  LOGO_WELCOME_PATH: '/img/custom/logo-squared.svg',
+  LOGO_LOGOUT_PATH: '/img/custom/logo-squared.svg',
+  LOGO_PASSWORD_RESET_PATH: '/img/custom/logo-squared.svg',
+  LOGO_MAINTENACE_RESET_PATH: '/img/custom/logo-squared.svg',
+}
--- a/maintenance/constants/manifest.js
+++ b/maintenance/constants/manifest.js
@ -0,0 +1,10 @@
+import metadata from './metadata.js'
+const { APPLICATION_NAME, APPLICATION_SHORT_NAME, APPLICATION_DESCRIPTION, THEME_COLOR } = metadata
+
+export default {
+  name: APPLICATION_NAME,
+  short_name: APPLICATION_SHORT_NAME,
+  description: APPLICATION_DESCRIPTION,
+  theme_color: THEME_COLOR,
+  lang: 'en',
+}
--- a/maintenance/constants/metadata.js
+++ b/maintenance/constants/metadata.js
@ -0,0 +1,10 @@
+// this file is duplicated in `backend/src/config/metadata.js` and `webapp/constants/metadata.js` and replaced on rebranding
+export default {
+  APPLICATION_NAME: 'ocelot.social',
+  APPLICATION_SHORT_NAME: 'ocelot.social',
+  APPLICATION_DESCRIPTION: 'ocelot.social Community Network',
+  COOKIE_NAME: 'ocelot-social-token',
+  ORGANIZATION_NAME: 'ocelot.social Community',
+  ORGANIZATION_JURISDICTION: 'City of Angels',
+  THEME_COLOR: 'rgb(23, 181, 63)', // $color-primary – as the main color in general. e.g. the color in the background of the app that is visible behind the transparent iPhone status bar to name one use case, or the current color of SVGs to name another use case
+}
--- a/maintenance/constants/modals.js
+++ b/maintenance/constants/modals.js
@ -0,0 +1,11 @@
+// this list equals to enums in GraphQL schema file "backend/src/schema/types/type/FILED.gql"
+export const valuesReasonCategoryOptions = [
+  'discrimination_etc',
+  'pornographic_content_links',
+  'glorific_trivia_of_cruel_inhuman_acts',
+  'doxing',
+  'intentional_intimidation_stalking_persecution',
+  'advert_products_services_commercial',
+  'criminal_behavior_violation_german_law',
+  'other',
+]
--- a/maintenance/constants/posts.js
+++ b/maintenance/constants/posts.js
@ -0,0 +1,3 @@
+export const first = 12
+export const offset = 0
+export const POST_ADD_BUTTON_POSITION_TOP = true
--- a/maintenance/constants/registration.js
+++ b/maintenance/constants/registration.js
@ -0,0 +1,5 @@
+// this file is duplicated in `backend/src/config/metadata.js` and `webapp/constants/metadata.js`
+export default {
+  NONCE_LENGTH: 5,
+  INVITE_CODE_LENGTH: 6,
+}
--- a/maintenance/constants/terms-and-conditions-version.js
+++ b/maintenance/constants/terms-and-conditions-version.js
@ -0,0 +1,2 @@
+// please change also version in file "cypress/constants/terms-and-conditions-version.js"
+export const VERSION = '0.0.4'
--- a/maintenance/eslint.config.mjs
+++ b/maintenance/eslint.config.mjs
@ -0,0 +1,6 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  // Your custom configs here
+)
--- a/maintenance/graphql/User.js
+++ b/maintenance/graphql/User.js
@ -0,0 +1,451 @@
+import gql from 'graphql-tag'
+import {
+  userCountsFragment,
+  locationFragment,
+  badgesFragment,
+  userFragment,
+  postFragment,
+  commentFragment,
+  groupFragment,
+} from './Fragments'
+
+export const profileUserQuery = (i18n) => {
+  const lang = i18n.locale().toUpperCase()
+  return gql`
+    ${userFragment}
+    ${userCountsFragment}
+    ${locationFragment(lang)}
+    ${badgesFragment}
+
+    query User($id: ID!, $followedByCount: Int!, $followingCount: Int!) {
+      User(id: $id) {
+        ...user
+        ...userCounts
+        ...location
+        ...badges
+        about
+        createdAt
+        followedByCurrentUser
+        isMuted
+        isBlocked
+        blocked
+        following(first: $followingCount) {
+          ...user
+          ...userCounts
+          ...location
+          ...badges
+        }
+        followedBy(first: $followedByCount) {
+          ...user
+          ...userCounts
+          ...location
+          ...badges
+        }
+        socialMedia {
+          id
+          url
+        }
+        showShoutsPublicly
+      }
+    }
+  `
+}
+
+export const minimisedUserQuery = () => {
+  return gql`
+    query ($slug: String) {
+      User(slug: $slug, orderBy: slug_asc) {
+        id
+        slug
+        name
+        avatar {
+          url
+        }
+      }
+    }
+  `
+}
+
+export const adminUserQuery = () => {
+  return gql`
+    query ($filter: _UserFilter, $first: Int, $offset: Int, $email: String) {
+      User(
+        email: $email
+        filter: $filter
+        first: $first
+        offset: $offset
+        orderBy: createdAt_desc
+      ) {
+        id
+        name
+        slug
+        email
+        role
+        createdAt
+        contributionsCount
+        commentedCount
+        shoutedCount
+      }
+    }
+  `
+}
+
+export const mapUserQuery = (i18n) => {
+  const lang = i18n.locale().toUpperCase()
+  return gql`
+    ${userFragment}
+    ${locationFragment(lang)}
+    ${badgesFragment}
+
+    query {
+      User {
+        ...user
+        about
+        ...location
+        ...badges
+      }
+    }
+  `
+}
+
+export const notificationQuery = (_i18n) => {
+  return gql`
+    ${userFragment}
+    ${commentFragment}
+    ${postFragment}
+    ${groupFragment}
+
+    query ($read: Boolean, $orderBy: NotificationOrdering, $first: Int, $offset: Int) {
+      notifications(read: $read, orderBy: $orderBy, first: $first, offset: $offset) {
+        id
+        read
+        reason
+        createdAt
+        updatedAt
+        to {
+          ...user
+        }
+        from {
+          __typename
+          ... on Post {
+            ...post
+            author {
+              ...user
+            }
+          }
+          ... on Comment {
+            ...comment
+            author {
+              ...user
+            }
+            post {
+              ...post
+              author {
+                ...user
+              }
+            }
+          }
+          ... on Group {
+            ...group
+          }
+        }
+        relatedUser {
+          ...user
+        }
+      }
+    }
+  `
+}
+
+export const markAsReadMutation = (_i18n) => {
+  return gql`
+    ${userFragment}
+    ${commentFragment}
+    ${postFragment}
+    ${groupFragment}
+
+    mutation ($id: ID!) {
+      markAsRead(id: $id) {
+        id
+        read
+        reason
+        createdAt
+        updatedAt
+        from {
+          __typename
+          ... on Post {
+            ...post
+            author {
+              ...user
+            }
+          }
+          ... on Comment {
+            ...comment
+            post {
+              ...post
+              author {
+                ...user
+              }
+            }
+          }
+          ... on Group {
+            ...group
+          }
+        }
+      }
+    }
+  `
+}
+
+export const markAllAsReadMutation = (_i18n) => {
+  return gql`
+    ${userFragment}
+    ${commentFragment}
+    ${postFragment}
+    ${groupFragment}
+
+    mutation {
+      markAllAsRead {
+        id
+        read
+        reason
+        createdAt
+        updatedAt
+        from {
+          __typename
+          ... on Post {
+            ...post
+            author {
+              ...user
+            }
+          }
+          ... on Comment {
+            ...comment
+            post {
+              ...post
+              author {
+                ...user
+              }
+            }
+          }
+          ... on Group {
+            ...group
+          }
+        }
+      }
+    }
+  `
+}
+
+export const notificationAdded = () => {
+  return gql`
+    ${userFragment}
+    ${commentFragment}
+    ${postFragment}
+    ${groupFragment}
+
+    subscription notifications {
+      notificationAdded {
+        id
+        read
+        reason
+        createdAt
+        updatedAt
+        to {
+          ...user
+        }
+        from {
+          __typename
+          ... on Post {
+            ...post
+            author {
+              ...user
+            }
+          }
+          ... on Comment {
+            ...comment
+            author {
+              ...user
+            }
+            post {
+              ...post
+              author {
+                ...user
+              }
+            }
+          }
+          ... on Group {
+            ...group
+          }
+        }
+        relatedUser {
+          ...user
+        }
+      }
+    }
+  `
+}
+export const followUserMutation = (i18n) => {
+  return gql`
+    ${userFragment}
+    ${userCountsFragment}
+
+    mutation ($id: ID!) {
+      followUser(id: $id) {
+        ...user
+        ...userCounts
+        followedByCount
+        followedByCurrentUser
+        followedBy(first: 7) {
+          ...user
+          ...userCounts
+        }
+      }
+    }
+  `
+}
+
+export const unfollowUserMutation = (i18n) => {
+  return gql`
+    ${userFragment}
+    ${userCountsFragment}
+
+    mutation ($id: ID!) {
+      unfollowUser(id: $id) {
+        ...user
+        ...userCounts
+        followedByCount
+        followedByCurrentUser
+        followedBy(first: 7) {
+          ...user
+          ...userCounts
+        }
+      }
+    }
+  `
+}
+
+export const updateUserMutation = () => {
+  return gql`
+    mutation (
+      $id: ID!
+      $slug: String
+      $name: String
+      $about: String
+      $allowEmbedIframes: Boolean
+      $showShoutsPublicly: Boolean
+      $emailNotificationSettings: [EmailNotificationSettingsInput]
+      $termsAndConditionsAgreedVersion: String
+      $avatar: ImageInput
+      $locationName: String # empty string '' sets it to null
+    ) {
+      UpdateUser(
+        id: $id
+        slug: $slug
+        name: $name
+        about: $about
+        allowEmbedIframes: $allowEmbedIframes
+        showShoutsPublicly: $showShoutsPublicly
+        emailNotificationSettings: $emailNotificationSettings
+        termsAndConditionsAgreedVersion: $termsAndConditionsAgreedVersion
+        avatar: $avatar
+        locationName: $locationName
+      ) {
+        id
+        slug
+        name
+        locationName
+        about
+        allowEmbedIframes
+        showShoutsPublicly
+        emailNotificationSettings {
+          type
+          settings {
+            name
+            value
+          }
+        }
+        locale
+        termsAndConditionsAgreedVersion
+        avatar {
+          url
+        }
+      }
+    }
+  `
+}
+
+export const checkSlugAvailableQuery = gql`
+  query ($slug: String!) {
+    User(slug: $slug) {
+      slug
+    }
+  }
+`
+
+export const currentUserQuery = gql`
+  ${userFragment}
+  query {
+    currentUser {
+      ...user
+      email
+      role
+      about
+      locationName
+      locale
+      allowEmbedIframes
+      showShoutsPublicly
+      emailNotificationSettings {
+        type
+        settings {
+          name
+          value
+        }
+      }
+      termsAndConditionsAgreedVersion
+      socialMedia {
+        id
+        url
+      }
+      activeCategories
+    }
+  }
+`
+
+export const currentUserCountQuery = () => gql`
+  ${userCountsFragment}
+  query {
+    currentUser {
+      ...userCounts
+    }
+  }
+`
+
+export const userDataQuery = (i18n) => {
+  return gql`
+    ${userFragment}
+    ${postFragment}
+    ${commentFragment}
+    query ($id: ID!) {
+      userData(id: $id) {
+        user {
+          ...user
+        }
+        posts {
+          ...post
+          categories {
+            id
+            name
+          }
+          comments {
+            author {
+              id
+              slug
+            }
+            ...comment
+          }
+        }
+      }
+    }
+  `
+}
--- a/maintenance/locales/de.json
+++ b/maintenance/locales/de.json
--- a/maintenance/locales/en.json
+++ b/maintenance/locales/en.json
--- a/maintenance/locales/es.json
+++ b/maintenance/locales/es.json
--- a/maintenance/locales/fr.json
+++ b/maintenance/locales/fr.json
--- a/maintenance/locales/html/de/code-of-conduct.html
+++ b/maintenance/locales/html/de/code-of-conduct.html
@ -0,0 +1,60 @@
+<!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
+<!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
+
+<div class="info-page">
+  <h2>
+    Für das soziale Netzwerk Ocelot.Social für Entwickler
+  </h2>
+  <h3>
+    Präambel
+  </h3>
+  <p>
+    Ich bin der Inhalt vom Verhaltenskodex.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
--- a/maintenance/locales/html/de/data-privacy.html
+++ b/maintenance/locales/html/de/data-privacy.html
@ -0,0 +1,60 @@
+<!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
+<!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
+
+<div class="info-page">
+  <h2>
+    Für das soziale Netzwerk Ocelot.Social für Entwickler
+  </h2>
+  <h3>
+    Information über die Erhebung personenbezogener Daten
+  </h3>
+  <p>
+    Das hier wäre der Inhalt der Datenschutzbestimmungen.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
--- a/maintenance/locales/html/de/donate.html
+++ b/maintenance/locales/html/de/donate.html
@ -0,0 +1,60 @@
+<!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
+<!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
+
+<div class="info-page">
+  <h2>
+    Für das soziale Netzwerk Ocelot.Social für Entwickler
+  </h2>
+  <h3>
+    Wohin kann ich spenden?
+  </h3>
+  <p>
+    Hier steht was zu den Spenden.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
--- a/maintenance/locales/html/de/faq.html
+++ b/maintenance/locales/html/de/faq.html
@ -0,0 +1,67 @@
+<!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
+<!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
+
+<div class="info-page">
+  <h2>
+    Für das soziale Netzwerk Ocelot.Social für Entwickler
+  </h2>
+  <h3>
+    Wie bediene ich dieses Netzwerk?
+  </h3>
+  <p>
+    Hier findest Du die
+    <a href="https://github.com/Ocelot-Social-Community/Ocelot-Social/wiki" target="_blank" >Bedienungsanleitung</a>.<br>
+  </p>
+  <h3>
+    Betreiberspezifische FAQs
+  </h3>
+  <p>
+    Hier steht was zu den betreiberspezifischen FAQs.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
--- a/maintenance/locales/html/de/imprint.html
+++ b/maintenance/locales/html/de/imprint.html
@ -0,0 +1,60 @@
+<!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
+<!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
+
+<div class="info-page">
+  <h2>
+    Für das soziale Netzwerk Ocelot.Social für Entwickler
+  </h2>
+  <h3>
+    Betreiber
+  </h3>
+  <p>
+    Ich bin das Impressum.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
--- a/maintenance/locales/html/de/index.js
+++ b/maintenance/locales/html/de/index.js
@ -0,0 +1,19 @@
+import organization from './organization.html'
+import support from './support.html'
+import termsAndConditions from './terms-and-conditions.html'
+import codeOfConduct from './code-of-conduct.html'
+import dataPrivacy from './data-privacy.html'
+import faq from './faq.html'
+import imprint from './imprint.html'
+import donate from './donate.html'
+
+export default {
+  organization,
+  support,
+  termsAndConditions,
+  codeOfConduct,
+  dataPrivacy,
+  faq,
+  imprint,
+  donate,
+}
--- a/maintenance/locales/html/de/organization.html
+++ b/maintenance/locales/html/de/organization.html
@ -0,0 +1,60 @@
+<!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
+<!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
+
+<div class="info-page">
+  <h2>
+    Für das soziale Netzwerk Ocelot.Social für Entwickler
+  </h2>
+  <h3>
+    Das Entwicklernetzwerk
+  </h3>
+  <p>
+    Hier wird das Netzwerk beschrieben.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
--- a/maintenance/locales/html/de/support.html
+++ b/maintenance/locales/html/de/support.html
@ -0,0 +1,60 @@
+<!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
+<!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
+
+<div class="info-page">
+  <h2>
+    Für das soziale Netzwerk Ocelot.Social für Entwickler
+  </h2>
+  <h3>
+    Ansprechpartner
+  </h3>
+  <p>
+    Ich bin der Inhalt vom Support.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
--- a/maintenance/locales/html/de/terms-and-conditions.html
+++ b/maintenance/locales/html/de/terms-and-conditions.html
@ -0,0 +1,61 @@
+<!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
+<!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
+
+
+<div class="info-page">
+  <h2>
+    Für das soziale Netzwerk Ocelot.Social für Entwickler
+  </h2>
+  <h3>
+    Nutzung und Lizenz
+  </h3>
+  <p>
+    Ich bin der Inhalt der Seite "Nutzungsbedingungen".
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
--- a/maintenance/locales/html/en/code-of-conduct.html
+++ b/maintenance/locales/html/en/code-of-conduct.html
@ -0,0 +1,60 @@
+<!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
+<!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
+
+<div class="info-page">
+  <h2>
+    For the social network Ocelot.Social for Developers
+  </h2>
+  <h3>
+    Präambel
+  </h3>
+  <p>
+    I am the content of the code of conduct.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
--- a/maintenance/locales/html/en/data-privacy.html
+++ b/maintenance/locales/html/en/data-privacy.html
@ -0,0 +1,60 @@
+<!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
+<!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
+
+<div class="info-page">
+  <h2>
+    For the social network Ocelot.Social for Developers
+  </h2>
+  <h3>
+    Information about the collection of personal data
+  </h3>
+  <p>
+    This would be our data privacy section.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
--- a/maintenance/locales/html/en/donate.html
+++ b/maintenance/locales/html/en/donate.html
@ -0,0 +1,60 @@
+<!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
+<!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
+
+<div class="info-page">
+  <h2>
+    For the social network Ocelot.Social for Developers
+  </h2>
+  <h3>
+    Where can I donate?
+  </h3>
+  <p>
+    Here's what it says about donations.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
--- a/maintenance/locales/html/en/faq.html
+++ b/maintenance/locales/html/en/faq.html
@ -0,0 +1,67 @@
+<!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
+<!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
+
+<div class="info-page">
+  <h2>
+    For the social network Ocelot.Social for Developers
+  </h2>
+    <h3>
+    How do I operate this network?
+  </h3>
+  <p>
+    Here you can find the
+    <a href="https://github.com/Ocelot-Social-Community/Ocelot-Social/wiki" target="_blank" >user manual</a>.<br>
+  </p>
+  <h3>
+    Operator-Specific FAQs
+  </h3>
+  <p>
+    Here are the operator-specific FAQs.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
--- a/maintenance/locales/html/en/imprint.html
+++ b/maintenance/locales/html/en/imprint.html
@ -0,0 +1,60 @@
+<!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
+<!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
+
+<div class="info-page">
+  <h2>
+    For the social network Ocelot.Social for Developers
+  </h2>
+  <h3>
+    Operator
+  </h3>
+  <p>
+    I am the imprint.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
--- a/maintenance/locales/html/en/index.js
+++ b/maintenance/locales/html/en/index.js
@ -0,0 +1,19 @@
+import organization from './organization.html'
+import support from './support.html'
+import termsAndConditions from './terms-and-conditions.html'
+import codeOfConduct from './code-of-conduct.html'
+import dataPrivacy from './data-privacy.html'
+import faq from './faq.html'
+import imprint from './imprint.html'
+import donate from './donate.html'
+
+export default {
+  organization,
+  support,
+  termsAndConditions,
+  codeOfConduct,
+  dataPrivacy,
+  faq,
+  imprint,
+  donate,
+}
--- a/maintenance/locales/html/en/organization.html
+++ b/maintenance/locales/html/en/organization.html
@ -0,0 +1,60 @@
+<!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
+<!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
+
+<div class="info-page">
+  <h2>
+    For the social network Ocelot.Social for Developers
+  </h2>
+  <h3>
+    The Developers Network
+  </h3>
+  <p>
+    Here the network is described.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
--- a/maintenance/locales/html/en/support.html
+++ b/maintenance/locales/html/en/support.html
@ -0,0 +1,60 @@
+<!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
+<!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
+
+<div class="info-page">
+  <h2>
+    For the social network Ocelot.Social for Developers
+  </h2>
+  <h3>
+    Contact
+  </h3>
+  <p>
+    I am the content of the support.
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
--- a/maintenance/locales/html/en/terms-and-conditions.html
+++ b/maintenance/locales/html/en/terms-and-conditions.html
@ -0,0 +1,60 @@
+<!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
+<!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
+
+<div class="info-page">
+  <h2>
+    For the social network Ocelot.Social for Developers
+  </h2>
+  <h3>
+    Use and License
+  </h3>
+  <p>
+    I am the content of the page "Terms And Conditions".
+  </p>
+</div>
+
+<style type="text/css">
+  .info-page {
+    margin-bottom: 48px;
+  }
+
+  .info-page h2 {
+    margin: 24px 0;
+  }
+
+  .info-page h3 {
+    margin: 24px 0 16px 0;
+  }
+
+  .info-page h4 {
+    margin: 16px 0 8px 0;
+  }
+
+  .info-page p {
+    margin: 8px 0;
+  }
+
+  .info-page ul {
+    list-style-type: disc;
+    margin: 16px 0 16px 14px;
+  }
+
+  .info-page table {
+    background-color: #fff;
+    border: 1px solid #e0dede;
+    border-collapse: collapse;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);
+    margin: 16px 0;
+    max-width: 100%;
+  }
+
+  .info-page table thead {
+    background-color: #f0f0f0;
+  }
+
+  .info-page table td,
+  .info-page table th {
+    border: 1px solid #e0dede;
+    padding: 10px;
+  }
+</style>
--- a/maintenance/locales/html/index.js
+++ b/maintenance/locales/html/index.js
@ -0,0 +1,7 @@
+import de from './de'
+import en from './en'
+
+export default {
+  de,
+  en,
+}
--- a/maintenance/locales/index.js
+++ b/maintenance/locales/index.js
@ -0,0 +1,74 @@
+import { enUS, de, nl, fr, es, it, pt, pl, ru } from 'date-fns/locale'
+import find from 'lodash/find'
+
+const locales = [
+  {
+    name: 'English',
+    code: 'en',
+    iso: 'en-US',
+    enabled: true,
+    dateFnsLocale: enUS,
+  },
+  {
+    name: 'Deutsch',
+    code: 'de',
+    iso: 'de-DE',
+    enabled: true,
+    dateFnsLocale: de,
+  },
+  {
+    name: 'Nederlands',
+    code: 'nl',
+    iso: 'nl-NL',
+    enabled: true,
+    dateFnsLocale: nl,
+  },
+  {
+    name: 'Français',
+    code: 'fr',
+    iso: 'fr-FR',
+    enabled: true,
+    dateFnsLocale: fr,
+  },
+  {
+    name: 'Italiano',
+    code: 'it',
+    iso: 'it-IT',
+    enabled: true,
+    dateFnsLocale: it,
+  },
+  {
+    name: 'Español',
+    code: 'es',
+    iso: 'es-ES',
+    enabled: true,
+    dateFnsLocale: es,
+  },
+  {
+    name: 'Português',
+    code: 'pt',
+    iso: 'pt-PT',
+    enabled: true,
+    dateFnsLocale: pt,
+  },
+  {
+    name: 'Polski',
+    code: 'pl',
+    iso: 'pl-PL',
+    enabled: true,
+    dateFnsLocale: pl,
+  },
+  {
+    name: 'Русский',
+    code: 'ru',
+    iso: 'ru-RU',
+    enabled: true,
+    dateFnsLocale: ru,
+  },
+]
+
+export default locales
+export function getDateFnsLocale({ $i18n }) {
+  const { dateFnsLocale } = find(locales, { code: $i18n.locale() }) || {}
+  return dateFnsLocale || enUS
+}
--- a/maintenance/locales/it.json
+++ b/maintenance/locales/it.json
--- a/maintenance/locales/nl.json
+++ b/maintenance/locales/nl.json
--- a/maintenance/locales/pl.json
+++ b/maintenance/locales/pl.json
--- a/maintenance/locales/pt.json
+++ b/maintenance/locales/pt.json
--- a/maintenance/locales/ru.json
+++ b/maintenance/locales/ru.json
--- a/maintenance/locales/tmp/.gitkeep
+++ b/maintenance/locales/tmp/.gitkeep
--- a/maintenance/nuxt.config.ts
+++ b/maintenance/nuxt.config.ts
@ -0,0 +1,24 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2024-11-01',
+  devtools: { enabled: true },
+
+  modules: [
+    '@nuxt/eslint',
+    '@nuxt/fonts',
+    '@nuxt/icon',
+    '@nuxt/image',
+    '@nuxt/test-utils',
+    '@nuxtjs/apollo',
+    '@pinia/nuxt',
+    '@nuxtjs/i18n',
+  ],
+
+  apollo: {
+    clients: {
+      default: {
+        httpEndpoint: 'https://localhost:4000'
+      }
+    },
+  },
+})
--- a/maintenance/package-lock.json
+++ b/maintenance/package-lock.json
--- a/maintenance/package.json
+++ b/maintenance/package.json
@ -0,0 +1,32 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@nuxt/eslint": "^1.3.0",
+    "@nuxt/fonts": "^0.11.1",
+    "@nuxt/icon": "^1.12.0",
+    "@nuxt/image": "^1.10.0",
+    "@nuxt/test-utils": "^3.17.2",
+    "@nuxtjs/i18n": "^9.5.3",
+    "@pinia/nuxt": "^0.11.0",
+    "eslint": "^9.24.0",
+    "lodash": "^4.17.21",
+    "nuxt": "^3.16.2",
+    "pinia": "^3.0.2",
+    "universal-cookie": "^8.0.1",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@nuxtjs/apollo": "^5.0.0-alpha.14"
+  }
+}
--- a/maintenance/public/favicon.ico
+++ b/maintenance/public/favicon.ico
--- a/maintenance/public/icon.png
+++ b/maintenance/public/icon.png
--- a/maintenance/public/img/custom/logo-horizontal.svg
+++ b/maintenance/public/img/custom/logo-horizontal.svg
--- a/maintenance/public/img/custom/logo-squared.svg
+++ b/maintenance/public/img/custom/logo-squared.svg
--- a/maintenance/public/img/empty-state.svg
+++ b/maintenance/public/img/empty-state.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="259" height="213"><g fill="none" fill-rule="evenodd"><ellipse cx="120" cy="204" fill="#ECF1EE" rx="120" ry="9"/><path fill="#3B4340" fill-rule="nonzero" d="M24 136.244v52.761c0 3.305 2.69 5.995 6.01 5.995h179.98a5.994 5.994 0 0 0 6.01-5.995V164a3 3 0 0 1 6 0v25.005c0 6.63-5.37 11.995-12.01 11.995H30.01C23.38 201 18 195.628 18 189.005V129c0-.77.291-1.538.876-2.123a3.003 3.003 0 0 1 4.248.006l19.48 19.48 19.48-19.48a3.005 3.005 0 0 1 2.516-.857 3.005 3.005 0 0 1 2.524.857l19.48 19.48 19.48-19.48a3.005 3.005 0 0 1 2.516-.857 3.005 3.005 0 0 1 2.524.857l19.48 19.48 19.48-19.48a3.005 3.005 0 0 1 2.51-.858 2.99 2.99 0 0 1 2.522.85l14.386 14.385a3 3 0 0 1-4.243 4.243l-12.655-12.655-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857l-19.48-19.48-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857l-19.48-19.48-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857L24 136.244zm0-33.486l18.604 18.605 19.48-19.48a3.005 3.005 0 0 1 2.516-.857 3.005 3.005 0 0 1 2.524.857l19.48 19.48 19.48-19.48a3.005 3.005 0 0 1 2.516-.857 3.005 3.005 0 0 1 2.524.857l19.48 19.48 19.48-19.48a3.005 3.005 0 0 1 2.516-.857 3.005 3.005 0 0 1 2.524.857l19.48 19.48 6.763-6.763a2.999 2.999 0 0 1 4.238.005 3.005 3.005 0 0 1 .005 4.237l-8.496 8.496a2.986 2.986 0 0 1-2.515.848 3.005 3.005 0 0 1-2.515-.858l-19.48-19.48-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857l-19.48-19.48-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857l-19.48-19.48-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857l-21.203-21.203a3.006 3.006 0 0 1-.005-4.248 3.003 3.003 0 0 1 4.248.006l.876.876V104h-6V11.995C18 5.365 23.37 0 30.01 0h179.98C216.62 0 222 5.372 222 11.995V74a3 3 0 0 1-6 0V11.995C216 8.69 213.31 6 209.99 6H30.01A5.994 5.994 0 0 0 24 11.995v90.763zM38 24a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm16 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm16 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm24-4c0-1.657 1.351-3 3-3h104c1.657 0 3 1.347 3 3 0 1.657-1.351 3-3 3H97c-1.657 0-3-1.347-3-3z"/><path fill="#D0021B" d="M212.11 92.023c3.805-6.088 9.974-6.088 13.78 0l31.22 49.954c3.805 6.088 1.071 11.023-6.1 11.023h-64.02c-7.174 0-9.906-4.935-6.1-11.023l31.22-49.954zM215 108v24c0 1.653 1.343 3 3 3 1.653 0 3-1.343 3-3v-24c0-1.653-1.343-3-3-3-1.653 0-3 1.343-3 3zm3 37a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/></g></svg>
--- a/maintenance/public/img/empty/alert.svg
+++ b/maintenance/public/img/empty/alert.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="131"><defs><path id="a" d="M0 .024h119.634v119.569H0z"/></defs><g fill="none" fill-rule="evenodd"><g transform="translate(0 11.271)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path fill="#DEDEDE" fill-opacity=".7" d="M13.085 101.253C25.835 86.874 32.21 66.935 32.21 41.436c0-2.445.576-4.96 1.726-7.549 1.15-2.588 2.804-5.057 4.96-7.405 2.157-2.348 5.07-4.278 8.736-5.788 3.667-1.51 7.729-2.264 12.187-2.264 4.457 0 8.52.754 12.185 2.264 3.667 1.51 6.578 3.44 8.735 5.788 2.158 2.348 3.811 4.817 4.962 7.405 1.15 2.588 1.725 5.104 1.725 7.55 0 25.498 6.375 45.437 19.124 59.816H13.085zm100.007-6.327c-1.966-2.204-4.003-5.068-6.11-8.591-2.111-3.523-3.896-7.321-5.358-11.396-1.462-4.073-2.66-9.01-3.594-14.81-.935-5.799-1.402-12.03-1.402-18.693 0-7.285-2.804-14.056-8.412-20.31C82.608 14.87 75.25 11.072 66.144 9.73c.383-.91.575-1.844.575-2.804 0-1.917-.672-3.547-2.013-4.889C63.364.696 61.734.024 59.818.024c-1.918 0-3.548.672-4.89 2.013-1.342 1.342-2.013 2.972-2.013 4.89 0 .959.191 1.893.576 2.803-9.108 1.342-16.465 5.14-22.073 11.396-5.608 6.254-8.411 13.025-8.411 20.31 0 6.662-.468 12.894-1.402 18.693-.935 5.8-2.133 10.737-3.595 14.81-1.463 4.075-3.248 7.873-5.357 11.396-2.11 3.523-4.146 6.387-6.11 8.591A63.175 63.175 0 0 1 0 101.253c0 2.493.91 4.65 2.732 6.47 1.82 1.823 3.978 2.733 6.471 2.733h37.949c2.065 5.345 7.25 9.137 13.323 9.137s11.257-3.792 13.322-9.137h36.635c2.492 0 4.648-.91 6.47-2.732 1.822-1.821 2.733-3.978 2.733-6.471a62.937 62.937 0 0 1-6.543-6.327z" mask="url(#b)"/></g><path fill="#9B9B9B" d="M80.066 65.602l-.797-.468-.363.85-.292.685c-1.16 2.725-3.467 4.416-6.02 4.416-2.553 0-4.86-1.691-6.02-4.415l-.291-.685-.363-.851-.798.468-2.473 1.452-.617.362.28.658.292.685c1.89 4.441 5.719 7.2 9.99 7.2 4.27 0 8.099-2.759 9.99-7.2l.292-.684.28-.659-.617-.362-2.473-1.452zm-22.243 2.473l.28-.659-.616-.362-2.474-1.452-.797-.468-.363.85-.292.685c-1.16 2.724-3.467 4.417-6.02 4.417-2.553 0-4.859-1.693-6.02-4.416l-.291-.685-.363-.851-.797.468-2.474 1.452-.617.362.28.659.293.684c1.89 4.441 5.718 7.2 9.99 7.2 4.27 0 8.098-2.759 9.99-7.2l.291-.684zm2.652 22.042a3.874 3.874 0 1 0 0 7.748 3.874 3.874 0 0 0 0-7.748M114.652 31.462h-10.585v2.737h6.091l-6.25 7.391v2.144h10.949v-2.737h-6.455l6.25-7.391zM90.854 21.183l18.528-.008-.002-4.632-10.923.004L109.03 4.035l-.002-3.628-17.913.007.002 4.632 10.307-.004-10.572 12.512z"/></g></svg>
--- a/maintenance/public/img/empty/docs.svg
+++ b/maintenance/public/img/empty/docs.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="114" height="130"><g fill="none" fill-rule="evenodd"><path fill="#9B9B9B" d="M70.71 67.52l-2.634-1.547-.85-.5-.386.907-.311.73c-1.236 2.901-3.693 4.704-6.413 4.704s-5.177-1.803-6.412-4.704l-.311-.73-.386-.907-.85.5-2.635 1.546-.657.386.298.701.311.73c2.015 4.73 6.092 7.67 10.642 7.67s8.628-2.94 10.642-7.67l.311-.73.3-.7-.658-.387zm-29.322-1.547l-.85-.5-.386.907-.31.73c-1.237 2.901-3.694 4.704-6.414 4.704-2.72 0-5.176-1.803-6.412-4.704l-.311-.73-.386-.907-.85.5-2.635 1.546-.657.386.298.701.311.73c2.015 4.73 6.092 7.67 10.642 7.67s8.628-2.94 10.642-7.67l.311-.73.3-.7-.658-.387-2.635-1.546zm5.818 26.115a4.126 4.126 0 1 0 0 8.252 4.126 4.126 0 0 0 0-8.252M113.208 43.24v2.916h-11.663v-2.284l6.658-7.873h-6.488v-2.916h11.276v2.284l-6.659 7.873zM107.374 17.19l.002 4.934-19.738.008-.002-3.865L98.899 4.938l-10.98.005-.002-4.935L106.999 0l.002 3.865-11.263 13.33z"/><path fill="#DEDEDE" fill-opacity=".7" d="M66.288 28.215c-.498-.498-1.35-.954-2.552-1.369V50.25h23.403c-.416-1.203-.872-2.055-1.37-2.552L66.288 28.215zm21.349 93.736V58.215H61.744c-1.66 0-3.071-.58-4.232-1.742-1.163-1.161-1.744-2.572-1.744-4.233V26.348h-47.8v95.603h79.669zm3.734-79.918c1.16 1.162 2.157 2.738 2.987 4.73.83 1.991 1.245 3.818 1.245 5.477v71.703c0 1.659-.581 3.07-1.742 4.232-1.163 1.161-2.574 1.743-4.233 1.743H5.976c-1.66 0-3.072-.582-4.232-1.743C.58 127.013 0 125.602 0 123.943V24.356c0-1.659.58-3.07 1.744-4.232 1.16-1.16 2.572-1.742 4.232-1.742h55.768c1.66 0 3.486.414 5.477 1.244 1.992.83 3.569 1.826 4.73 2.987l19.42 19.42z"/></g></svg>
--- a/maintenance/public/img/empty/events.svg
+++ b/maintenance/public/img/empty/events.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="133" height="134"><defs><path id="a" d="M.353.351h20.354v22.591H.353z"/><path id="c" d="M0 .08h107.481v121.033H0z"/></defs><g fill="none" fill-rule="evenodd"><path fill="#9B9B9B" d="M77.331 73.129l-2.678-1.61L73.79 71l-.393.943-.316.76c-1.257 3.019-3.754 4.895-6.518 4.895-2.765 0-5.262-1.876-6.518-4.895l-.316-.76-.393-.943-.864.52-2.678 1.609-.668.401.304.73.316.759C57.793 79.94 61.938 83 66.563 83c4.624 0 8.769-3.059 10.816-7.982l.317-.758.304-.73-.669-.401zm-29.804-1.61L46.663 71l-.392.943-.317.76c-1.256 3.019-3.754 4.895-6.518 4.895s-5.262-1.876-6.518-4.895l-.316-.76L32.21 71l-.864.52-2.678 1.609-.668.401.303.73.316.759C30.667 79.94 34.811 83 39.436 83c4.624 0 8.77-3.059 10.817-7.982l.316-.758.304-.73-.668-.401-2.678-1.61zM53 99a4 4 0 1 0 0 8 4 4 0 0 0 0-8M133 44.1V47h-12v-2.271l6.85-7.829h-6.675V34h11.601v2.271l-6.85 7.829z"/><g transform="translate(106)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path fill="#9B9B9B" mask="url(#b)" d="M20.705 17.897l.002 5.036-20.352.009-.002-3.946L11.966 5.392.645 5.396.642.359 20.318.351l.002 3.945L8.707 17.902z"/></g><g transform="translate(0 12)"><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path fill="#DEDEDE" fill-opacity=".7" d="M81.444 30.338V10.886c0-.63-.204-1.148-.61-1.553-.407-.405-.926-.608-1.56-.608h-4.339c-.634 0-1.152.203-1.56.608-.407.405-.61.923-.61 1.553v19.452c0 .631.203 1.148.61 1.553.408.405.926.609 1.56.609h4.339c.634 0 1.153-.204 1.56-.609.406-.405.61-.922.61-1.553zm-46.727 0V10.886c0-.63-.205-1.148-.61-1.553-.408-.405-.93-.608-1.56-.608h-4.34c-.632 0-1.152.203-1.56.608-.405.405-.609.923-.609 1.553v19.452c0 .631.204 1.148.61 1.553.407.405.927.609 1.56.609h4.339c.63 0 1.152-.204 1.56-.609.405-.405.61-.922.61-1.553zM8.68 112.466h90.122v-69.16H8.68v69.16zm98.8-86.45v86.45c0 2.341-.859 4.368-2.577 6.08-1.718 1.71-3.75 2.567-6.1 2.567H8.68c-2.35 0-4.385-.857-6.101-2.567C.859 116.834 0 114.807 0 112.466v-86.45c0-2.341.86-4.368 2.579-6.08 1.716-1.71 3.75-2.566 6.101-2.566h8.68v-6.484c0-2.972 1.06-5.515 3.184-7.632C22.67 1.138 25.224.08 28.208.08h4.339c2.982 0 5.537 1.058 7.661 3.174 2.124 2.117 3.188 4.66 3.188 7.632v6.484h20.69v-6.484c0-2.972 1.063-5.515 3.188-7.632C69.398 1.138 71.952.08 74.935.08h4.339c2.985 0 5.537 1.058 7.663 3.174 2.123 2.117 3.185 4.66 3.185 7.632v6.484h8.68c2.35 0 4.383.856 6.101 2.567 1.718 1.711 2.578 3.738 2.578 6.079z" mask="url(#d)"/></g></g></svg>
--- a/maintenance/public/img/empty/file.svg
+++ b/maintenance/public/img/empty/file.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="136" height="130"><g fill="none" fill-rule="evenodd"><path fill="#9B9B9B" d="M81.331 69.129l-2.678-1.61L77.79 67l-.393.943-.316.76c-1.257 3.019-3.754 4.895-6.518 4.895s-5.262-1.876-6.518-4.895l-.316-.76-.393-.943-.863.52-2.678 1.609-.669.401.304.73.316.759C61.793 75.94 65.938 79 70.563 79c4.624 0 8.769-3.059 10.816-7.982l.317-.758.304-.73-.669-.401zm-29.804-1.61L50.663 67l-.393.943-.315.76c-1.257 3.019-3.754 4.895-6.519 4.895-2.764 0-5.261-1.876-6.517-4.895l-.317-.76L36.21 67l-.864.52-2.678 1.609-.668.401.303.73.316.759C34.667 75.94 38.812 79 43.436 79c4.625 0 8.77-3.059 10.817-7.982l.316-.758.305-.73-.67-.401-2.677-1.61zM58 94a4 4 0 1 0 0 8 4 4 0 0 0 0-8M136 44.1V47h-12v-2.271l6.85-7.829h-6.675V34h11.601v2.271l-6.85 7.829zM129.998 17.864l.002 5.127-19.998.009-.002-4.017 11.411-13.852-11.125.005-.002-5.128L129.618 0l.001 4.016-11.411 13.853z"/><path fill="#DEDEDE" fill-opacity=".7" d="M106.715 112.448c0 4.568-3.723 8.284-8.3 8.284h-80.83c-4.577 0-8.3-3.716-8.3-8.284V36.552c0-4.568 3.723-8.284 8.3-8.284H39.81l12.294 12.27.649.648h45.662c4.577 0 8.3 3.716 8.3 8.284v62.978zm4.106-75.36c-3.34-3.334-7.746-5.17-12.406-5.17H56.529l-12.293-12.27-.65-.648h-26c-4.661 0-9.068 1.836-12.407 5.17C1.839 27.501 0 31.9 0 36.551v75.896c0 4.652 1.839 9.05 5.179 12.383 3.34 3.333 7.746 5.169 12.406 5.169h80.83c4.66 0 9.066-1.836 12.406-5.17 3.34-3.332 5.179-7.73 5.179-12.382V49.47c0-4.651-1.84-9.049-5.179-12.382z"/></g></svg>
--- a/maintenance/public/img/empty/messages.svg
+++ b/maintenance/public/img/empty/messages.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="133"><g fill="none" fill-rule="evenodd"><path fill="#9B9B9B" d="M70.852 56.305l-2.473-1.452-.798-.468-.362.85-.292.686c-1.16 2.724-3.467 4.416-6.02 4.416-2.553 0-4.86-1.692-6.02-4.416l-.292-.685-.362-.85-.798.467-2.473 1.452-.617.363.28.658.292.684c1.89 4.442 5.718 7.2 9.99 7.2 4.27 0 8.098-2.758 9.99-7.2l.292-.684.28-.658-.617-.363zm-27.526-1.452l-.797-.468-.363.85-.292.686c-1.16 2.724-3.467 4.416-6.02 4.416-2.553 0-4.86-1.692-6.02-4.416l-.291-.685-.363-.85-.797.467-2.474 1.452-.617.363.28.658.292.684c1.89 4.442 5.719 7.2 9.99 7.2 4.27 0 8.099-2.758 9.99-7.2l.292-.684.28-.658-.616-.363-2.474-1.452zm5.462 24.516a3.874 3.874 0 1 0 0 7.747 3.874 3.874 0 0 0 0-7.747M119.865 40.59v2.737h-10.948v-2.144l6.25-7.39h-6.09v-2.738h10.584v2.144l-6.25 7.391zM114.389 16.136l.002 4.632-18.529.008-.001-3.628 10.572-12.513-10.307.005-.002-4.632L114.037 0l.001 3.628-10.572 12.513z"/><path fill="#DEDEDE" fill-opacity=".7" d="M15.983 38.613c-4.327 0-7.847 3.523-7.847 7.853l.988 70.28 10.53-13.508a4.068 4.068 0 0 1 3.208-1.567h60.856c4.327 0 7.847-3.519 7.847-7.844l-.989-47.36c0-4.33-3.52-7.854-7.847-7.854H15.983zM5.056 132.65a4.067 4.067 0 0 1-4.067-4.068L0 46.466c0-8.816 7.17-15.988 15.983-15.988H82.73c8.814 0 15.983 7.172 15.983 15.988l.989 47.36c0 8.812-7.17 15.98-15.983 15.98h-58.87L8.266 131.084a4.069 4.069 0 0 1-3.21 1.567z"/></g></svg>
--- a/maintenance/public/img/empty/tasks.svg
+++ b/maintenance/public/img/empty/tasks.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="141"><defs><path id="a" d="M.157.075h12.616v14.142H.157z"/><path id="c" d="M0 .047h97.792V127.5H0z"/></defs><g fill="none" fill-rule="evenodd"><path fill="#9B9B9B" d="M74.79 73.038l-2.85-1.673-.918-.54-.419.98-.336.79c-1.337 3.138-3.995 5.088-6.937 5.088s-5.6-1.95-6.936-5.088l-.337-.79-.417-.98-.92.54-2.85 1.673-.71.417.322.759.336.789c2.18 5.117 6.59 8.296 11.512 8.296 4.922 0 9.333-3.18 11.512-8.297l.336-.788.324-.759-.711-.417zm-31.719-1.673l-.919-.54-.418.98-.336.79c-1.337 3.138-3.996 5.088-6.937 5.088-2.942 0-5.6-1.95-6.937-5.088l-.336-.79-.417-.98-.92.54-2.85 1.673-.711.417.323.759.336.789c2.18 5.117 6.59 8.296 11.512 8.296 4.921 0 9.332-3.18 11.512-8.297l.336-.788.324-.759-.712-.417-2.85-1.673zm6.294 28.25a4.463 4.463 0 1 0 0 8.926 4.463 4.463 0 0 0 0-8.926"/><g transform="translate(106.875 35.712)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path fill="#9B9B9B" mask="url(#b)" d="M12.773 11.062v3.155H.157v-2.471l7.202-8.517H.341V.075h12.197v2.471l-7.203 8.516z"/></g><path fill="#9B9B9B" d="M113.338 18.595l.002 5.337-21.352.009-.001-4.181 12.182-14.418-11.877.004L92.29.008 112.932 0l.002 4.181L100.75 18.6z"/><g transform="translate(0 12.743)"><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path fill="#DEDEDE" fill-opacity=".7" d="M89.174 118.882H8.62V79.275h-.001V25.674H24.1v7.084c0 1.036.84 1.875 1.875 1.875h45.842c1.036 0 1.875-.839 1.875-1.875v-7.084h15.481v62.155h.001v31.053zm6.731-99.94c-1.254-1.256-2.782-1.886-4.577-1.886H73.692V10.24c0-1.035-.84-1.875-1.875-1.875h-6.51V1.922c0-1.035-.84-1.875-1.876-1.875H34.802c-1.035 0-1.875.84-1.875 1.875v6.443h-6.952c-1.035 0-1.875.84-1.875 1.875v6.816H6.463c-1.794 0-3.32.63-4.578 1.885C.629 20.2 0 21.725 0 23.52v97.517c0 1.794.629 3.32 1.886 4.578 1.256 1.256 2.782 1.885 4.578 1.885H91.33c1.794 0 3.32-.63 4.578-1.885 1.256-1.257 1.885-2.784 1.885-4.578V23.52c0-1.795-.628-3.321-1.887-4.579z" mask="url(#d)"/></g></g></svg>
--- a/maintenance/public/img/locale-flags/de.svg
+++ b/maintenance/public/img/locale-flags/de.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M16 345a256 256 0 0 0 480 0l-240-22.2L16 345z" fill="#ffda44"/><path d="M256 0A256 256 0 0 0 16 167l240 22.2L496 167A256 256 0 0 0 256 0z"/><path d="M16 167a255.5 255.5 0 0 0 0 178h480a255.4 255.4 0 0 0 0-178H16z" fill="#d80027"/></svg>
--- a/maintenance/public/img/locale-flags/en.svg
+++ b/maintenance/public/img/locale-flags/en.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512"><defs><path id="a" d="M0 512L512 0v512z"/></defs><g fill="none" fill-rule="evenodd"><circle cx="256" cy="256" r="256" fill="#F0F0F0"/><path fill="#D80027" fill-rule="nonzero" d="M327.7 189.2H245V256h15.6l67.2-66.8zm146.7-66.8a257.3 257.3 0 0 0-59-66.7H244.9v66.7h229.5zM127.8 389.6l67.4-66.8H8.8c6.4 23.5 16 46 28.8 66.8h90.2z"/><path fill="#0052B4" fill-rule="nonzero" d="M118.6 40h23.3l-21.7 15.7 8.3 25.6-21.7-15.8-21.7 15.8 7.2-22a257.4 257.4 0 0 0-49.7 55.3h7.5l-13.8 10c-2.2 3.6-4.2 7.2-6.2 11l6.6 20.2-12.3-9c-3.1 6.6-5.9 13.2-8.4 20l7.3 22.3H50L28.4 205l8.3 25.5L15 214.6l-13 9.5C.7 234.7 0 245.3 0 256h256V0c-50.6 0-97.7 14.7-137.4 40zm9.9 190.4l-21.7-15.8-21.7 15.8 8.3-25.5L71.7 189h26.8l8.3-25.5 8.3 25.5h26.8L120.2 205l8.3 25.5zm-8.3-100l8.3 25.4-21.7-15.7-21.7 15.7 8.3-25.5-21.7-15.7h26.8l8.3-25.6 8.3 25.6h26.8l-21.7 15.7zm100.1 100l-21.7-15.8-21.7 15.8 8.3-25.5-21.7-15.8h26.8l8.3-25.5 8.3 25.5h26.8L212 205l8.3 25.5zm-8.3-100l8.3 25.4-21.7-15.7-21.7 15.7 8.3-25.5-21.7-15.7h26.8l8.3-25.6 8.3 25.6h26.8L212 130.3zm0-74.7l8.3 25.6-21.7-15.8L177 81.3l8.3-25.6L163.5 40h26.8l8.3-25.5L207 40h26.8L212 55.7z"/><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)"><circle cx="256" cy="256" r="256" fill="#F0F0F0"/><path fill="#0052B4" fill-rule="nonzero" d="M503.2 189.2a255 255 0 0 0-44.1-89l-89.1 89h133.2zm-403 269.9a255 255 0 0 0 89 44V370l-89 89zm222.6 44a255 255 0 0 0 89-44l-89-89.1v133.2zM370 322.9l89 89a255 255 0 0 0 44.2-89H370z"/><path fill="#D80027" d="M509.8 222.6H222.4l.2 287.2c22.2 3 44.6 3 66.8 0V289.4h220.4a258.5 258.5 0 0 0 0-66.8z"/><path fill="#D80027" fill-rule="nonzero" d="M322.8 322.8L437 437c5.3-5.2 10.3-10.7 15-16.4l-97.7-97.8h-31.5zm-133.6 0L75 437c5.2 5.3 10.7 10.3 16.4 15l97.8-97.7v-31.5z"/></g></g></svg>
--- a/maintenance/public/img/locale-flags/es.svg
+++ b/maintenance/public/img/locale-flags/es.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 256c0 31.3 5.6 61.3 16 89l240 22.3L496 345a255.5 255.5 0 0 0 0-178l-240-22.3L16 167a255.5 255.5 0 0 0-16 89z" fill="#ffda44"/><path d="M496 167a256 256 0 0 0-480 0h480zM16 345a256 256 0 0 0 480 0H16z" fill="#d80027"/></svg>
--- a/maintenance/public/img/locale-flags/fr.svg
+++ b/maintenance/public/img/locale-flags/fr.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="#f0f0f0"/><path d="M512 256A256 256 0 0 0 345 16v480a256 256 0 0 0 167-240z" fill="#d80027"/><path d="M0 256a256 256 0 0 0 167 240V16A256 256 0 0 0 0 256z" fill="#0052b4"/></svg>
--- a/maintenance/public/img/locale-flags/it.svg
+++ b/maintenance/public/img/locale-flags/it.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="#f0f0f0"/><path d="M512 256A256 256 0 0 0 345 16v480a256 256 0 0 0 167-240z" fill="#d80027"/><path d="M0 256a256 256 0 0 0 167 240V16A256 256 0 0 0 0 256z" fill="#6da544"/></svg>
--- a/maintenance/public/img/locale-flags/nl.svg
+++ b/maintenance/public/img/locale-flags/nl.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="#f0f0f0"/><path d="M256 0A256 256 0 0 0 16 167h480A256 256 0 0 0 256 0z" fill="#a2001d"/><path d="M256 512a256 256 0 0 0 240-167H16a256 256 0 0 0 240 167z" fill="#0052b4"/></svg>
--- a/maintenance/public/img/locale-flags/pl.svg
+++ b/maintenance/public/img/locale-flags/pl.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="#f0f0f0"/><path d="M512 256a256 256 0 0 1-512 0" fill="#d80027"/></svg>
--- a/maintenance/public/img/locale-flags/pt.svg
+++ b/maintenance/public/img/locale-flags/pt.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 256a256 256 0 0 0 167 240l22.2-240L167 16A256 256 0 0 0 0 256z" fill="#6da544"/><path d="M512 256A256 256 0 0 0 167 16v480a256 256 0 0 0 345-240z" fill="#d80027"/><circle cx="167" cy="256" r="89" fill="#ffda44"/><path d="M116.9 211.5V267a50 50 0 1 0 100.1 0v-55.6H117z" fill="#d80027"/><path d="M167 283.8c-9.2 0-16.7-7.5-16.7-16.7V245h33.4V267c0 9.2-7.5 16.7-16.7 16.7z" fill="#f0f0f0"/></svg>
--- a/maintenance/public/img/mapbox/marker-icons/README.md
+++ b/maintenance/public/img/mapbox/marker-icons/README.md
@ -0,0 +1,12 @@
+# Mabbox markers
+
+I found the Mapbox markers to be downloaded at the bottom of the page:  
+<https://docs.mapbox.com/help/glossary/sprite/>
+
+At URL:  
+<https://docs.mapbox.com/help/data/marker-icons.zip>
+
+## Folder For Images Reachable By URL
+
+It looks like that not all folders, as example the `assets/*` folder, is reachable by URL.
+Our images have to be in the `static/img/*` folder.
--- a/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-20px-blue.png
+++ b/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-20px-blue.png
--- a/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-20px-gray.png
+++ b/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-20px-gray.png
--- a/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-20px-green.png
+++ b/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-20px-green.png
--- a/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-20px-orange.png
+++ b/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-20px-orange.png
--- a/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-20px-pink.png
+++ b/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-20px-pink.png
--- a/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-20px-purple.png
+++ b/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-20px-purple.png
--- a/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-20px-red.png
+++ b/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-20px-red.png
--- a/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-20px-yellow.png
+++ b/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-20px-yellow.png
--- a/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-blue.svg
+++ b/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-blue.svg
@ -0,0 +1,16 @@
+<!-- Create a custom map style: https://studio.mapbox.com -->
+<svg id="marker" data-name="marker" xmlns="http://www.w3.org/2000/svg" width="20" height="48" viewBox="0 0 20 48">
+  <g id="mapbox-marker-icon">
+    <g id="icon">
+      <ellipse id="shadow" cx="10" cy="27" rx="9" ry="5" fill="#c4c4c4" opacity="0.3" style="isolation: isolate"/>
+      <g id="mask" opacity="0.3">
+        <g id="group">
+          <path id="shadow-2" data-name="shadow" fill="#bfbfbf" d="M10,32c5,0,9-2.2,9-5s-4-5-9-5-9,2.2-9,5S5,32,10,32Z" fill-rule="evenodd"/>
+        </g>
+      </g>
+      <path id="color" fill="#4264fb" stroke="#314ccd" stroke-width="0.5" d="M19.25,10.4a13.0663,13.0663,0,0,1-1.4607,5.2235,41.5281,41.5281,0,0,1-3.2459,5.5483c-1.1829,1.7369-2.3662,3.2784-3.2541,4.3859-.4438.5536-.8135.9984-1.0721,1.3046-.0844.1-.157.1852-.2164.2545-.06-.07-.1325-.1564-.2173-.2578-.2587-.3088-.6284-.7571-1.0723-1.3147-.8879-1.1154-2.0714-2.6664-3.2543-4.41a42.2677,42.2677,0,0,1-3.2463-5.5535A12.978,12.978,0,0,1,.75,10.4,9.4659,9.4659,0,0,1,10,.75,9.4659,9.4659,0,0,1,19.25,10.4Z"/>
+      <path id="circle" fill="#fff" stroke="#314ccd" stroke-width="0.5" d="M13.55,10A3.55,3.55,0,1,1,10,6.45,3.5484,3.5484,0,0,1,13.55,10Z"/>
+    </g>
+  </g>
+  <rect width="20" height="48" fill="none"/>
+</svg>
--- a/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-gray.svg
+++ b/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-gray.svg
@ -0,0 +1,16 @@
+<!-- Create a custom map style: https://studio.mapbox.com -->
+<svg id="marker" data-name="marker" xmlns="http://www.w3.org/2000/svg" width="20" height="48" viewBox="0 0 20 48">
+  <g id="mapbox-marker-icon">
+    <g id="icon">
+      <ellipse id="shadow" cx="10" cy="27" rx="9" ry="5" fill="#c4c4c4" opacity="0.3" style="isolation: isolate"/>
+      <g id="mask" opacity="0.3">
+        <g id="group">
+          <path id="shadow-2" data-name="shadow" fill="#bfbfbf" d="M10,32c5,0,9-2.2,9-5s-4-5-9-5-9,2.2-9,5S5,32,10,32Z" fill-rule="evenodd"/>
+        </g>
+      </g>
+      <path id="color" fill="#5b7897" stroke="#23374d" stroke-width="0.5" d="M19.25,10.4a13.0663,13.0663,0,0,1-1.4607,5.2235,41.5281,41.5281,0,0,1-3.2459,5.5483c-1.1829,1.7369-2.3662,3.2784-3.2541,4.3859-.4438.5536-.8135.9984-1.0721,1.3046-.0844.1-.157.1852-.2164.2545-.06-.07-.1325-.1564-.2173-.2578-.2587-.3088-.6284-.7571-1.0723-1.3147-.8879-1.1154-2.0714-2.6664-3.2543-4.41a42.2677,42.2677,0,0,1-3.2463-5.5535A12.978,12.978,0,0,1,.75,10.4,9.4659,9.4659,0,0,1,10,.75,9.4659,9.4659,0,0,1,19.25,10.4Z"/>
+      <path id="circle" fill="#fff" stroke="#23374d" stroke-width="0.5" d="M13.55,10A3.55,3.55,0,1,1,10,6.45,3.5484,3.5484,0,0,1,13.55,10Z"/>
+    </g>
+  </g>
+  <rect width="20" height="48" fill="none"/>
+</svg>
--- a/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-green.svg
+++ b/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-green.svg
@ -0,0 +1,16 @@
+<!-- Create a custom map style: https://studio.mapbox.com -->
+<svg id="marker" data-name="marker" xmlns="http://www.w3.org/2000/svg" width="20" height="48" viewBox="0 0 20 48">
+  <g id="mapbox-marker-icon">
+    <g id="icon">
+      <ellipse id="shadow" cx="10" cy="27" rx="9" ry="5" fill="#c4c4c4" opacity="0.3" style="isolation: isolate"/>
+      <g id="mask" opacity="0.3">
+        <g id="group">
+          <path id="shadow-2" data-name="shadow" fill="#bfbfbf" d="M10,32c5,0,9-2.2,9-5s-4-5-9-5-9,2.2-9,5S5,32,10,32Z" fill-rule="evenodd"/>
+        </g>
+      </g>
+      <path id="color" fill="#33c377" stroke="#269561" stroke-width="0.5" d="M19.25,10.4a13.0663,13.0663,0,0,1-1.4607,5.2235,41.5281,41.5281,0,0,1-3.2459,5.5483c-1.1829,1.7369-2.3662,3.2784-3.2541,4.3859-.4438.5536-.8135.9984-1.0721,1.3046-.0844.1-.157.1852-.2164.2545-.06-.07-.1325-.1564-.2173-.2578-.2587-.3088-.6284-.7571-1.0723-1.3147-.8879-1.1154-2.0714-2.6664-3.2543-4.41a42.2677,42.2677,0,0,1-3.2463-5.5535A12.978,12.978,0,0,1,.75,10.4,9.4659,9.4659,0,0,1,10,.75,9.4659,9.4659,0,0,1,19.25,10.4Z"/>
+      <path id="circle" fill="#fff" stroke="#269561" stroke-width="0.5" d="M13.55,10A3.55,3.55,0,1,1,10,6.45,3.5484,3.5484,0,0,1,13.55,10Z"/>
+    </g>
+  </g>
+  <rect width="20" height="48" fill="none"/>
+</svg>
--- a/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-orange.svg
+++ b/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-orange.svg
@ -0,0 +1,16 @@
+<!-- Create a custom map style: https://studio.mapbox.com -->
+<svg id="marker" data-name="marker" xmlns="http://www.w3.org/2000/svg" width="20" height="48" viewBox="0 0 20 48">
+  <g id="mapbox-marker-icon">
+    <g id="icon">
+      <ellipse id="shadow" cx="10" cy="27" rx="9" ry="5" fill="#c4c4c4" opacity="0.3" style="isolation: isolate"/>
+      <g id="mask" opacity="0.3">
+        <g id="group">
+          <path id="shadow-2" data-name="shadow" fill="#bfbfbf" d="M10,32c5,0,9-2.2,9-5s-4-5-9-5-9,2.2-9,5S5,32,10,32Z" fill-rule="evenodd"/>
+        </g>
+      </g>
+      <path id="color" fill="#f79640" stroke="#ba7334" stroke-width="0.5" d="M19.25,10.4a13.0663,13.0663,0,0,1-1.4607,5.2235,41.5281,41.5281,0,0,1-3.2459,5.5483c-1.1829,1.7369-2.3662,3.2784-3.2541,4.3859-.4438.5536-.8135.9984-1.0721,1.3046-.0844.1-.157.1852-.2164.2545-.06-.07-.1325-.1564-.2173-.2578-.2587-.3088-.6284-.7571-1.0723-1.3147-.8879-1.1154-2.0714-2.6664-3.2543-4.41a42.2677,42.2677,0,0,1-3.2463-5.5535A12.978,12.978,0,0,1,.75,10.4,9.4659,9.4659,0,0,1,10,.75,9.4659,9.4659,0,0,1,19.25,10.4Z"/>
+      <path id="circle" fill="#fff" stroke="#ba7334" stroke-width="0.5" d="M13.55,10A3.55,3.55,0,1,1,10,6.45,3.5484,3.5484,0,0,1,13.55,10Z"/>
+    </g>
+  </g>
+  <rect width="20" height="48" fill="none"/>
+</svg>
--- a/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-pink.svg
+++ b/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-pink.svg
@ -0,0 +1,16 @@
+<!-- Create a custom map style: https://studio.mapbox.com -->
+<svg id="marker" data-name="marker" xmlns="http://www.w3.org/2000/svg" width="20" height="48" viewBox="0 0 20 48">
+  <g id="mapbox-marker-icon">
+    <g id="icon">
+      <ellipse id="shadow" cx="10" cy="27" rx="9" ry="5" fill="#c4c4c4" opacity="0.3" style="isolation: isolate"/>
+      <g id="mask" opacity="0.3">
+        <g id="group">
+          <path id="shadow-2" data-name="shadow" fill="#bfbfbf" d="M10,32c5,0,9-2.2,9-5s-4-5-9-5-9,2.2-9,5S5,32,10,32Z" fill-rule="evenodd"/>
+        </g>
+      </g>
+      <path id="color" fill="#ee4e8b" stroke="#b43b71" stroke-width="0.5" d="M19.25,10.4a13.0663,13.0663,0,0,1-1.4607,5.2235,41.5281,41.5281,0,0,1-3.2459,5.5483c-1.1829,1.7369-2.3662,3.2784-3.2541,4.3859-.4438.5536-.8135.9984-1.0721,1.3046-.0844.1-.157.1852-.2164.2545-.06-.07-.1325-.1564-.2173-.2578-.2587-.3088-.6284-.7571-1.0723-1.3147-.8879-1.1154-2.0714-2.6664-3.2543-4.41a42.2677,42.2677,0,0,1-3.2463-5.5535A12.978,12.978,0,0,1,.75,10.4,9.4659,9.4659,0,0,1,10,.75,9.4659,9.4659,0,0,1,19.25,10.4Z"/>
+      <path id="circle" fill="#fff" stroke="#b43b71" stroke-width="0.5" d="M13.55,10A3.55,3.55,0,1,1,10,6.45,3.5484,3.5484,0,0,1,13.55,10Z"/>
+    </g>
+  </g>
+  <rect width="20" height="48" fill="none"/>
+</svg>
--- a/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-purple.svg
+++ b/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-purple.svg
@ -0,0 +1,16 @@
+<!-- Create a custom map style: https://studio.mapbox.com -->
+<svg id="marker" data-name="marker" xmlns="http://www.w3.org/2000/svg" width="20" height="48" viewBox="0 0 20 48">
+  <g id="mapbox-marker-icon">
+    <g id="icon">
+      <ellipse id="shadow" cx="10" cy="27" rx="9" ry="5" fill="#c4c4c4" opacity="0.3" style="isolation: isolate"/>
+      <g id="mask" opacity="0.3">
+        <g id="group">
+          <path id="shadow-2" data-name="shadow" fill="#bfbfbf" d="M10,32c5,0,9-2.2,9-5s-4-5-9-5-9,2.2-9,5S5,32,10,32Z" fill-rule="evenodd"/>
+        </g>
+      </g>
+      <path id="color" fill="#7753eb" stroke="#5a3fc0" stroke-width="0.5" d="M19.25,10.4a13.0663,13.0663,0,0,1-1.4607,5.2235,41.5281,41.5281,0,0,1-3.2459,5.5483c-1.1829,1.7369-2.3662,3.2784-3.2541,4.3859-.4438.5536-.8135.9984-1.0721,1.3046-.0844.1-.157.1852-.2164.2545-.06-.07-.1325-.1564-.2173-.2578-.2587-.3088-.6284-.7571-1.0723-1.3147-.8879-1.1154-2.0714-2.6664-3.2543-4.41a42.2677,42.2677,0,0,1-3.2463-5.5535A12.978,12.978,0,0,1,.75,10.4,9.4659,9.4659,0,0,1,10,.75,9.4659,9.4659,0,0,1,19.25,10.4Z"/>
+      <path id="circle" fill="#fff" stroke="#5a3fc0" stroke-width="0.5" d="M13.55,10A3.55,3.55,0,1,1,10,6.45,3.5484,3.5484,0,0,1,13.55,10Z"/>
+    </g>
+  </g>
+  <rect width="20" height="48" fill="none"/>
+</svg>
--- a/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-red.svg
+++ b/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-red.svg
@ -0,0 +1,16 @@
+<!-- Create a custom map style: https://studio.mapbox.com -->
+<svg id="marker" data-name="marker" xmlns="http://www.w3.org/2000/svg" width="20" height="48" viewBox="0 0 20 48">
+  <g id="mapbox-marker-icon">
+    <g id="icon">
+      <ellipse id="shadow" cx="10" cy="27" rx="9" ry="5" fill="#c4c4c4" opacity="0.3" style="isolation: isolate"/>
+      <g id="mask" opacity="0.3">
+        <g id="group">
+          <path id="shadow-2" data-name="shadow" fill="#bfbfbf" d="M10,32c5,0,9-2.2,9-5s-4-5-9-5-9,2.2-9,5S5,32,10,32Z" fill-rule="evenodd"/>
+        </g>
+      </g>
+      <path id="color" fill="#f84d4d" stroke="#951212" stroke-width="0.5" d="M19.25,10.4a13.0663,13.0663,0,0,1-1.4607,5.2235,41.5281,41.5281,0,0,1-3.2459,5.5483c-1.1829,1.7369-2.3662,3.2784-3.2541,4.3859-.4438.5536-.8135.9984-1.0721,1.3046-.0844.1-.157.1852-.2164.2545-.06-.07-.1325-.1564-.2173-.2578-.2587-.3088-.6284-.7571-1.0723-1.3147-.8879-1.1154-2.0714-2.6664-3.2543-4.41a42.2677,42.2677,0,0,1-3.2463-5.5535A12.978,12.978,0,0,1,.75,10.4,9.4659,9.4659,0,0,1,10,.75,9.4659,9.4659,0,0,1,19.25,10.4Z"/>
+      <path id="circle" fill="#fff" stroke="#951212" stroke-width="0.5" d="M13.55,10A3.55,3.55,0,1,1,10,6.45,3.5484,3.5484,0,0,1,13.55,10Z"/>
+    </g>
+  </g>
+  <rect width="20" height="48" fill="none"/>
+</svg>
--- a/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-yellow.svg
+++ b/maintenance/public/img/mapbox/marker-icons/mapbox-marker-icon-yellow.svg
@ -0,0 +1,16 @@
+<!-- Create a custom map style: https://studio.mapbox.com -->
+<svg id="marker" data-name="marker" xmlns="http://www.w3.org/2000/svg" width="20" height="48" viewBox="0 0 20 48">
+  <g id="mapbox-marker-icon">
+    <g id="icon">
+      <ellipse id="shadow" cx="10" cy="27" rx="9" ry="5" fill="#c4c4c4" opacity="0.3" style="isolation: isolate"/>
+      <g id="mask" opacity="0.3">
+        <g id="group">
+          <path id="shadow-2" data-name="shadow" fill="#bfbfbf" d="M10,32c5,0,9-2.2,9-5s-4-5-9-5-9,2.2-9,5S5,32,10,32Z" fill-rule="evenodd"/>
+        </g>
+      </g>
+      <path id="color" fill="#d9d838" stroke="#a4a62d" stroke-width="0.5" d="M19.25,10.4a13.0663,13.0663,0,0,1-1.4607,5.2235,41.5281,41.5281,0,0,1-3.2459,5.5483c-1.1829,1.7369-2.3662,3.2784-3.2541,4.3859-.4438.5536-.8135.9984-1.0721,1.3046-.0844.1-.157.1852-.2164.2545-.06-.07-.1325-.1564-.2173-.2578-.2587-.3088-.6284-.7571-1.0723-1.3147-.8879-1.1154-2.0714-2.6664-3.2543-4.41a42.2677,42.2677,0,0,1-3.2463-5.5535A12.978,12.978,0,0,1,.75,10.4,9.4659,9.4659,0,0,1,10,.75,9.4659,9.4659,0,0,1,19.25,10.4Z"/>
+      <path id="circle" fill="#fff" stroke="#a4a62d" stroke-width="0.5" d="M13.55,10A3.55,3.55,0,1,1,10,6.45,3.5484,3.5484,0,0,1,13.55,10Z"/>
+    </g>
+  </g>
+  <rect width="20" height="48" fill="none"/>
+</svg>
--- a/maintenance/public/img/svg/emoji/angry.svg
+++ b/maintenance/public/img/svg/emoji/angry.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><circle data-name="&lt;Pfad&gt;" cx="40" cy="40.1" r="40" fill="#cac9c9"/><ellipse data-name="&lt;Pfad&gt;" cx="38.4" cy="38.8" rx="37.4" ry="37.6" fill="#d7d8d8"/><path d="M39.8 55.6c8.8 0 13.4 7.7 13.4 11.6a.8.8 0 0 1-1 1s-5-6-12.4-6-12.4 6-12.4 6a.8.8 0 0 1-1-1c0-4 4.6-11.6 13.4-11.6z" fill="#303030"/><ellipse cx="26.4" cy="40.3" rx="4" ry="7.7" fill="#303030"/><ellipse cx="50.4" cy="39.9" rx="4" ry="7.7" fill="#303030"/><path d="M14.5 27.2s14.7-2 18.6 10c.2.3 0 .5-.4 0a22.8 22.8 0 0 0-18-6.8v-3.2zm47.5 0s-14.5-2-18.4 10c0 .3 0 .5.4 0a22.8 22.8 0 0 1 18.2-6.8v-3.2z" fill="#303030"/></svg>
--- a/maintenance/public/img/svg/emoji/angry_color.svg
+++ b/maintenance/public/img/svg/emoji/angry_color.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><defs><radialGradient id="a" cx="37.4" cy="38.6" r="37.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ed6c70" stop-opacity=".7"/><stop offset=".3" stop-color="#ed6c70" stop-opacity=".5"/><stop offset=".8" stop-color="#ed6c70" stop-opacity=".1"/><stop offset="1" stop-color="#ed6c70" stop-opacity="0"/></radialGradient><radialGradient id="b" cx="37.4" cy="38.6" r="37.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fcea1c" stop-opacity=".2"/><stop offset=".8" stop-color="#fcea1c" stop-opacity=".1"/><stop offset="1" stop-color="#fcea1c" stop-opacity="0"/></radialGradient></defs><circle data-name="&lt;Pfad&gt;" cx="40" cy="40" r="40" fill="#dedc03"/><ellipse data-name="&lt;Pfad&gt;" cx="38.4" cy="38.7" rx="37.4" ry="37.6" fill="#fcea1c"/><ellipse data-name="&lt;Pfad&gt;" cx="37.4" cy="38.6" rx="37.4" ry="37.6" fill="url(#a)"/><ellipse data-name="&lt;Pfad&gt;" cx="37.4" cy="38.6" rx="37.4" ry="37.6" fill="url(#b)"/><ellipse cx="26.4" cy="40.2" rx="4" ry="7.7" fill="#303030"/><ellipse cx="50.4" cy="39.8" rx="4" ry="7.7" fill="#303030"/><path d="M14.5 27S29.2 25.3 33 37c.2.4 0 .6-.4 0a22.8 22.8 0 0 0-18-6.7V27zM62 27s-14.5-1.8-18.4 10c0 .4 0 .6.4 0a22.8 22.8 0 0 1 18.2-6.7V27zM39.8 55.5c8.8 0 13.4 7.7 13.4 11.6a.8.8 0 0 1-1 1s-5-6-12.4-6-12.4 6-12.4 6a.8.8 0 0 1-1-1c0-3.8 4.6-11.5 13.4-11.5z" fill="#303030"/></svg>
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`export const PROGRESS_BAR_COLOR_TYPE = 'gradient' // 'uni' is the other option`
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="259" height="213"><g fill="none" fill-rule="evenodd"><ellipse cx="120" cy="204" fill="#ECF1EE" rx="120" ry="9"/><path fill="#3B4340" fill-rule="nonzero" d="M24 136.244v52.761c0 3.305 2.69 5.995 6.01 5.995h179.98a5.994 5.994 0 0 0 6.01-5.995V164a3 3 0 0 1 6 0v25.005c0 6.63-5.37 11.995-12.01 11.995H30.01C23.38 201 18 195.628 18 189.005V129c0-.77.291-1.538.876-2.123a3.003 3.003 0 0 1 4.248.006l19.48 19.48 19.48-19.48a3.005 3.005 0 0 1 2.516-.857 3.005 3.005 0 0 1 2.524.857l19.48 19.48 19.48-19.48a3.005 3.005 0 0 1 2.516-.857 3.005 3.005 0 0 1 2.524.857l19.48 19.48 19.48-19.48a3.005 3.005 0 0 1 2.51-.858 2.99 2.99 0 0 1 2.522.85l14.386 14.385a3 3 0 0 1-4.243 4.243l-12.655-12.655-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857l-19.48-19.48-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857l-19.48-19.48-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857L24 136.244zm0-33.486l18.604 18.605 19.48-19.48a3.005 3.005 0 0 1 2.516-.857 3.005 3.005 0 0 1 2.524.857l19.48 19.48 19.48-19.48a3.005 3.005 0 0 1 2.516-.857 3.005 3.005 0 0 1 2.524.857l19.48 19.48 19.48-19.48a3.005 3.005 0 0 1 2.516-.857 3.005 3.005 0 0 1 2.524.857l19.48 19.48 6.763-6.763a2.999 2.999 0 0 1 4.238.005 3.005 3.005 0 0 1 .005 4.237l-8.496 8.496a2.986 2.986 0 0 1-2.515.848 3.005 3.005 0 0 1-2.515-.858l-19.48-19.48-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857l-19.48-19.48-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857l-19.48-19.48-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857l-21.203-21.203a3.006 3.006 0 0 1-.005-4.248 3.003 3.003 0 0 1 4.248.006l.876.876V104h-6V11.995C18 5.365 23.37 0 30.01 0h179.98C216.62 0 222 5.372 222 11.995V74a3 3 0 0 1-6 0V11.995C216 8.69 213.31 6 209.99 6H30.01A5.994 5.994 0 0 0 24 11.995v90.763zM38 24a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm16 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm16 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm24-4c0-1.657 1.351-3 3-3h104c1.657 0 3 1.347 3 3 0 1.657-1.351 3-3 3H97c-1.657 0-3-1.347-3-3z"/><path fill="#D0021B" d="M212.11 92.023c3.805-6.088 9.974-6.088 13.78 0l31.22 49.954c3.805 6.088 1.071 11.023-6.1 11.023h-64.02c-7.174 0-9.906-4.935-6.1-11.023l31.22-49.954zM215 108v24c0 1.653 1.343 3 3 3 1.653 0 3-1.343 3-3v-24c0-1.653-1.343-3-3-3-1.653 0-3 1.343-3 3zm3 37a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/></g></svg>
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M16 345a256 256 0 0 0 480 0l-240-22.2L16 345z" fill="#ffda44"/><path d="M256 0A256 256 0 0 0 16 167l240 22.2L496 167A256 256 0 0 0 256 0z"/><path d="M16 167a255.5 255.5 0 0 0 0 178h480a255.4 255.4 0 0 0 0-178H16z" fill="#d80027"/></svg>`