From bbed2883fb2ba29f1add0e2b82a79b1abcd94091 Mon Sep 17 00:00:00 2001
From: staniel359 <staniel359@gmail.com>
Date: Sun, 16 Jan 2022 13:00:39 +0300
Subject: [PATCH] [WIP] Add communities

---
 src/assets/styles/Main.sass                   |   4 -
 .../community/BaseCommunityCreateButton.vue   |  18 +++
 .../playlist/BasePlaylistCreateButton.vue     |  40 ++++++
 .../BaseCommunitiesPageContainer.vue          |  80 ++++++++++++
 .../community/BaseCommunityPageContainer.vue  | 100 +++++++++++++++
 .../profile/BaseProfilePageContainer.vue      |   6 +
 src/components/images/BaseImage.vue           |   1 +
 .../layout/panels/TheSidebarPanel.vue         |   3 +
 .../TheSidebarPanel/CommunitiesItem.vue       |  42 +++++++
 .../communities/BaseCommunitiesSimpleList.vue |  40 ++++++
 .../CommunityItem.vue                         |  91 ++++++++++++++
 .../BasePlaylistsSimpleList/PlaylistItem.vue  |   4 +-
 .../PlaylistItem.vue                          |   2 +-
 .../lists/profiles/BaseProfilesSimpleList.vue |   9 ++
 .../BaseProfilesSimpleList/ProfileItem.vue    |   7 ++
 .../community/BaseCommunityMembersModal.vue   | 116 ++++++++++++++++++
 .../profile/BaseProfileFollowingCount.vue     |   8 +-
 src/helpers/actions/api/communities/get.js    |  36 ++++++
 src/helpers/actions/api/community/get.js      |  43 +++++++
 src/helpers/data/plugins/i18n/locales/en.json |  11 +-
 src/helpers/data/plugins/i18n/locales/ru.json |  11 +-
 src/helpers/data/plugins/router/routes.js     |  30 +++++
 src/helpers/formatters/links/communities.js   |  15 +++
 src/helpers/formatters/links/profile.js       |   8 ++
 src/helpers/formatters/navigation.js          |  11 ++
 .../formatters/navigation/community.js        |  41 +++++++
 .../formatters/navigation/conversations.js    |   2 +-
 src/helpers/formatters/tabs/communities.js    |  16 +++
 src/helpers/formatters/tabs/community.js      |  32 +++++
 .../formatters/tabs/profile/communities.js    |  25 ++++
 src/views/PlaylistsPage.vue                   |  56 +++++----
 src/views/communities/CommunityPage.vue       |  35 ++++++
 .../communities/CommunityPage/InfoSegment.vue | 106 ++++++++++++++++
 src/views/communities/MainPage.vue            |  79 ++++++++++++
 src/views/profile/CommunitiesPage.vue         | 104 ++++++++++++++++
 src/views/profile/PlaylistsPage.vue           |  35 ++----
 src/views/tag/MainPage.vue                    |  18 ++-
 37 files changed, 1218 insertions(+), 67 deletions(-)
 create mode 100644 src/components/buttons/community/BaseCommunityCreateButton.vue
 create mode 100644 src/components/buttons/playlist/BasePlaylistCreateButton.vue
 create mode 100644 src/components/containers/pages/communities/BaseCommunitiesPageContainer.vue
 create mode 100644 src/components/containers/pages/community/BaseCommunityPageContainer.vue
 create mode 100644 src/components/layout/panels/TheSidebarPanel/CommunitiesItem.vue
 create mode 100644 src/components/lists/communities/BaseCommunitiesSimpleList.vue
 create mode 100644 src/components/lists/communities/BaseCommunitiesSimpleList/CommunityItem.vue
 create mode 100644 src/components/modals/community/BaseCommunityMembersModal.vue
 create mode 100644 src/helpers/actions/api/communities/get.js
 create mode 100644 src/helpers/actions/api/community/get.js
 create mode 100644 src/helpers/formatters/links/communities.js
 create mode 100644 src/helpers/formatters/navigation/community.js
 create mode 100644 src/helpers/formatters/tabs/communities.js
 create mode 100644 src/helpers/formatters/tabs/community.js
 create mode 100644 src/helpers/formatters/tabs/profile/communities.js
 create mode 100644 src/views/communities/CommunityPage.vue
 create mode 100644 src/views/communities/CommunityPage/InfoSegment.vue
 create mode 100644 src/views/communities/MainPage.vue
 create mode 100644 src/views/profile/CommunitiesPage.vue

diff --git a/src/assets/styles/Main.sass b/src/assets/styles/Main.sass
index 96ce392eb..2a975c639 100644
--- a/src/assets/styles/Main.sass
+++ b/src/assets/styles/Main.sass
@@ -279,10 +279,6 @@ a
       @extend .text-color-base
     .main-options-dropdown-container
       @extend .visibility-visible
-  &.main-playlist-item, &.main-profile-item
-    & > .content
-      & > .description
-        @extend .no-margin
 
 .main-message-item, .main-profile-item
   & > .image
diff --git a/src/components/buttons/community/BaseCommunityCreateButton.vue b/src/components/buttons/community/BaseCommunityCreateButton.vue
new file mode 100644
index 000000000..6b3e00053
--- /dev/null
+++ b/src/components/buttons/community/BaseCommunityCreateButton.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>button</div>
+</template>
+
+<script>
+export default {
+  name: 'BaseCommunityCreateButton',
+  components: {},
+  props: {},
+  data () {
+    return {}
+  },
+  computed: {},
+  methods: {}
+}
+</script>
+
+<style lang="sass" scoped></style>
diff --git a/src/components/buttons/playlist/BasePlaylistCreateButton.vue b/src/components/buttons/playlist/BasePlaylistCreateButton.vue
new file mode 100644
index 000000000..e0dbc0150
--- /dev/null
+++ b/src/components/buttons/playlist/BasePlaylistCreateButton.vue
@@ -0,0 +1,40 @@
+<template>
+  <BaseButton
+    class="primary"
+    icon="plus"
+    :text="createText"
+    @click="handleButtonClick"
+  />
+
+  <BasePlaylistCreateModal
+    ref="modal"
+  />
+</template>
+
+<script>
+import BaseButton from '@/buttons/BaseButton.vue'
+import BasePlaylistCreateModal
+  from '@/modals/playlist/BasePlaylistCreateModal.vue'
+
+export default {
+  name: 'BasePlaylistCreateButton',
+  components: {
+    BaseButton,
+    BasePlaylistCreateModal
+  },
+  computed: {
+    createText () {
+      return this.$t(
+        'actions.add.playlist'
+      )
+    }
+  },
+  methods: {
+    handleButtonClick () {
+      this.$refs.modal.show()
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped></style>
diff --git a/src/components/containers/pages/communities/BaseCommunitiesPageContainer.vue b/src/components/containers/pages/communities/BaseCommunitiesPageContainer.vue
new file mode 100644
index 000000000..dda060871
--- /dev/null
+++ b/src/components/containers/pages/communities/BaseCommunitiesPageContainer.vue
@@ -0,0 +1,80 @@
+<template>
+  <BasePageContainer
+    :isShowLoader="!communitiesData"
+    :isLoading="isLoading"
+    :isError="!communitiesData && !!error"
+    :error="error"
+    @refresh="handleRefresh"
+  >
+    <slot
+      v-if="communitiesData"
+      :isLoading="isLoading"
+      :error="error"
+      :communitiesData="communitiesData"
+      :fetchData="fetchData"
+      :handleRefresh="handleRefresh"
+    ></slot>
+  </BasePageContainer>
+</template>
+
+<script>
+import BasePageContainer from '@/containers/pages/BasePageContainer.vue'
+import navigationMixin from '*/mixins/navigationMixin'
+import {
+  communities as formatCommunitiesPageNavigation
+} from '#/formatters/navigation'
+import formatCommunitiesPageTab from '#/formatters/tabs/communities'
+import getCommunities from '#/actions/api/communities/get'
+
+export default {
+  name: 'BaseCommunitiesPageContainer',
+  components: {
+    BasePageContainer
+  },
+  mixins: [
+    navigationMixin
+  ],
+  props: {
+    responsePageLimit: Number
+  },
+  data () {
+    return {
+      communitiesData: null,
+      error: null,
+      isLoading: false
+    }
+  },
+  computed: {
+    navigationSections () {
+      return formatCommunitiesPageNavigation()
+    },
+    tabData () {
+      return formatCommunitiesPageTab()
+    },
+    communitiesArgs () {
+      return {
+        limit: this.responsePageLimit
+      }
+    }
+  },
+  mounted () {
+    this.setNavigation()
+
+    this.fetchData()
+  },
+  methods: {
+    handleRefresh (page) {
+      this.fetchData(page)
+    },
+    getCommunities,
+    fetchData (page) {
+      this.getCommunities({
+        ...this.communitiesArgs,
+        page
+      })
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped></style>
diff --git a/src/components/containers/pages/community/BaseCommunityPageContainer.vue b/src/components/containers/pages/community/BaseCommunityPageContainer.vue
new file mode 100644
index 000000000..ab3f56778
--- /dev/null
+++ b/src/components/containers/pages/community/BaseCommunityPageContainer.vue
@@ -0,0 +1,100 @@
+<template>
+  <BasePageContainer
+    :isShowLoader="!communityData"
+    :isLoading="isLoading"
+    :isError="!communityData && !!error"
+    :error="error"
+    @refresh="handleRefresh"
+  >
+    <slot
+      v-if="communityData"
+      :isLoading="isLoading"
+      :error="error"
+      :communityData="communityData"
+      :fetchData="fetchData"
+      :handleRefresh="handleRefresh"
+    ></slot>
+  </BasePageContainer>
+</template>
+
+<script>
+import BasePageContainer from '@/containers/pages/BasePageContainer.vue'
+import navigationMixin from '*/mixins/navigationMixin'
+import formatCommunityPageNavigation
+  from '#/formatters/navigation/community'
+import formatCommunityPageTab from '#/formatters/tabs/community'
+import getCommunity from '#/actions/api/community/get'
+
+export default {
+  name: 'BaseCommunityPageContainer',
+  components: {
+    BasePageContainer
+  },
+  mixins: [
+    navigationMixin
+  ],
+  provide () {
+    return {
+      setCommunityData: this.setCommunityData
+    }
+  },
+  props: {
+    communityId: String
+  },
+  data () {
+    return {
+      communityData: null,
+      error: null,
+      isLoading: false
+    }
+  },
+  computed: {
+    navigationSections () {
+      return formatCommunityPageNavigation(
+        this.navigationData
+      )
+    },
+    navigationData () {
+      return {
+        communityId: this.communityId,
+        communityTitle: this.communityTitleFetched
+      }
+    },
+    tabData () {
+      return formatCommunityPageTab(
+        this.navigationData
+      )
+    },
+    communityTitleFetched () {
+      return this.communityData?.title
+    },
+    communityArgs () {
+      return {
+        communityId: this.communityId
+      }
+    }
+  },
+  watch: {
+    communityData: 'handleNavigationDataChange'
+  },
+  mounted () {
+    this.fetchData()
+  },
+  methods: {
+    handleRefresh () {
+      this.fetchData()
+    },
+    getCommunity,
+    fetchData () {
+      this.getCommunity(
+        this.communityArgs
+      )
+    },
+    setCommunityData (value) {
+      this.communityData = value
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped></style>
diff --git a/src/components/containers/pages/profile/BaseProfilePageContainer.vue b/src/components/containers/pages/profile/BaseProfilePageContainer.vue
index 5a5e4be6e..fcf57d2b2 100644
--- a/src/components/containers/pages/profile/BaseProfilePageContainer.vue
+++ b/src/components/containers/pages/profile/BaseProfilePageContainer.vue
@@ -27,6 +27,8 @@ import formatProfileLibraryPageTab from '#/formatters/tabs/profile/library'
 import formatProfileFavoritesPageTab from '#/formatters/tabs/profile/favorites'
 import formatProfilePlaylistsPageTab from '#/formatters/tabs/profile/playlists'
 import formatProfilePostsPageTab from '#/formatters/tabs/profile/posts'
+import formatProfileCommunitiesPageTab
+  from '#/formatters/tabs/profile/communities'
 import getProfile from '#/actions/api/profile/get'
 
 export default {
@@ -103,6 +105,10 @@ export default {
           return formatProfilePostsPageTab(
             this.navigationData
           )
+        case 'communities':
+          return formatProfileCommunitiesPageTab(
+            this.navigationData
+          )
         default:
           return formatProfilePageTab(
             this.navigationData
diff --git a/src/components/images/BaseImage.vue b/src/components/images/BaseImage.vue
index 83997dc5f..ef3ceb6d3 100644
--- a/src/components/images/BaseImage.vue
+++ b/src/components/images/BaseImage.vue
@@ -28,6 +28,7 @@ export default {
         track: 'https://lastfm.freetls.fastly.net/i/u/300x300/4128a6eb29f94943c9d206c08e625904.png',
         playlist: 'https://lastfm.freetls.fastly.net/i/u/300x300/4128a6eb29f94943c9d206c08e625904.png',
         profile: 'https://lastfm.freetls.fastly.net/i/u/300x300/818148bf682d429dc215c1705eb27b98.png',
+        community: 'https://lastfm.freetls.fastly.net/i/u/300x300/818148bf682d429dc215c1705eb27b98.png',
         video: 'https://i.ytimg.com'
       }
     }
diff --git a/src/components/layout/panels/TheSidebarPanel.vue b/src/components/layout/panels/TheSidebarPanel.vue
index ea29a21fa..695cba31d 100644
--- a/src/components/layout/panels/TheSidebarPanel.vue
+++ b/src/components/layout/panels/TheSidebarPanel.vue
@@ -15,6 +15,7 @@
         <BookmarksItem />
         <TopItem />
         <RadioItem />
+        <CommunitiesItem />
       </div>
 
       <div>
@@ -37,6 +38,7 @@ import FavoritesItem from './TheSidebarPanel/FavoritesItem.vue'
 import BookmarksItem from './TheSidebarPanel/BookmarksItem.vue'
 import TopItem from './TheSidebarPanel/TopItem.vue'
 import RadioItem from './TheSidebarPanel/RadioItem.vue'
+import CommunitiesItem from './TheSidebarPanel/CommunitiesItem.vue'
 import SettingsItem from './TheSidebarPanel/SettingsItem.vue'
 import LogoutItem from './TheSidebarPanel/LogoutItem.vue'
 
@@ -53,6 +55,7 @@ export default {
     BookmarksItem,
     TopItem,
     RadioItem,
+    CommunitiesItem,
     SettingsItem,
     LogoutItem
   },
diff --git a/src/components/layout/panels/TheSidebarPanel/CommunitiesItem.vue b/src/components/layout/panels/TheSidebarPanel/CommunitiesItem.vue
new file mode 100644
index 000000000..02f7d9f78
--- /dev/null
+++ b/src/components/layout/panels/TheSidebarPanel/CommunitiesItem.vue
@@ -0,0 +1,42 @@
+<template>
+  <BaseSidebarItem
+    icon="users"
+    :text="communitiesText"
+    :link="profileCommunitiesLink"
+  />
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import BaseSidebarItem from '@/BaseSidebarItem.vue'
+import {
+  communities as formatProfileCommunitiesLink
+} from '#/formatters/links/profile'
+
+export default {
+  name: 'CommunitiesItem',
+  components: {
+    BaseSidebarItem
+  },
+  computed: {
+    ...mapState('profile', {
+      profileInfo: 'info'
+    }),
+    communitiesText () {
+      return this.$t(
+        'navigation.communities'
+      )
+    },
+    profileCommunitiesLink () {
+      return formatProfileCommunitiesLink({
+        profileId: this.profileId
+      })
+    },
+    profileId () {
+      return this.profileInfo.id.toString()
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped></style>
diff --git a/src/components/lists/communities/BaseCommunitiesSimpleList.vue b/src/components/lists/communities/BaseCommunitiesSimpleList.vue
new file mode 100644
index 000000000..5f089fead
--- /dev/null
+++ b/src/components/lists/communities/BaseCommunitiesSimpleList.vue
@@ -0,0 +1,40 @@
+<template>
+  <BaseListContainer class="selection">
+    <CommunityItem
+      v-for="communityData in communitiesCollection"
+      :key="communityData.uuid"
+      :communityData="communityData"
+    />
+  </BaseListContainer>
+</template>
+
+<script>
+import BaseListContainer from '@/containers/lists/BaseListContainer.vue'
+import CommunityItem from './BaseCommunitiesSimpleList/CommunityItem.vue'
+import { collection as formatCollection } from '#/formatters'
+
+export default {
+  name: 'BaseCommunitiesSimpleList',
+  components: {
+    BaseListContainer,
+    CommunityItem
+  },
+  props: {
+    communities: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  },
+  computed: {
+    communitiesCollection () {
+      return formatCollection(
+        this.communities
+      )
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped></style>
diff --git a/src/components/lists/communities/BaseCommunitiesSimpleList/CommunityItem.vue b/src/components/lists/communities/BaseCommunitiesSimpleList/CommunityItem.vue
new file mode 100644
index 000000000..f1945e184
--- /dev/null
+++ b/src/components/lists/communities/BaseCommunitiesSimpleList/CommunityItem.vue
@@ -0,0 +1,91 @@
+<template>
+  <BaseLinkContainer
+    class="item main-simple-list-item"
+    :link="communityLink"
+  >
+    <BaseImage
+      class="rounded bordered"
+      model="community"
+      :image="imageData?.small"
+    />
+
+    <div class="content">
+      <BaseHeader
+        class="link"
+        tag="h4"
+        :text="communityTitle"
+      />
+
+      <div
+        class="description"
+        v-html="membersCountText"
+      ></div>
+    </div>
+
+    <BaseOptionsDropdown
+      isWithJoinOption
+    />
+  </BaseLinkContainer>
+</template>
+
+<script>
+import BaseLinkContainer from '@/containers/links/BaseLinkContainer.vue'
+import BaseImage from '@/images/BaseImage.vue'
+import BaseHeader from '@/BaseHeader.vue'
+import BaseOptionsDropdown from '@/dropdowns/BaseOptionsDropdown.vue'
+import {
+  community as formatCommunityLink
+} from '#/formatters/links/communities'
+import { number as formatNumber } from '#/formatters'
+
+export default {
+  name: 'CommunityItem',
+  components: {
+    BaseLinkContainer,
+    BaseImage,
+    BaseHeader,
+    BaseOptionsDropdown
+  },
+  props: {
+    communityData: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    communityLink () {
+      return formatCommunityLink({
+        communityId: this.communityId
+      })
+    },
+    communityId () {
+      return this.communityData.id
+    },
+    imageData () {
+      return this.communityData.image
+    },
+    communityTitle () {
+      return this.communityData.title
+    },
+    membersCountText () {
+      return this.$t(
+        'counters.members',
+        { count: this.membersCountStrong }
+      )
+    },
+    membersCountStrong () {
+      return `<strong>${this.membersCountFormatted}</strong>`
+    },
+    membersCountFormatted () {
+      return formatNumber(
+        this.membersCount
+      )
+    },
+    membersCount () {
+      return this.communityData.members_count
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped></style>
diff --git a/src/components/lists/playlists/BasePlaylistsSimpleList/PlaylistItem.vue b/src/components/lists/playlists/BasePlaylistsSimpleList/PlaylistItem.vue
index 597aa3ddf..97450bf8e 100644
--- a/src/components/lists/playlists/BasePlaylistsSimpleList/PlaylistItem.vue
+++ b/src/components/lists/playlists/BasePlaylistsSimpleList/PlaylistItem.vue
@@ -1,6 +1,6 @@
 <template>
   <BaseLinkContainer
-    class="item main-simple-list-item main-playlist-item"
+    class="item main-simple-list-item"
     :class="{ disabled: isDeleted }"
     :link="link"
   >
@@ -28,7 +28,7 @@
           @mouseleave="handleProfileNicknameMouseLeave"
         >
           <BaseLink
-            :text="profileData.nickname"
+            :text="profileNickname"
             :link="profileMainLink"
           />
         </span>
diff --git a/src/components/lists/playlists/BasePlaylistsSimpleSelectableList/PlaylistItem.vue b/src/components/lists/playlists/BasePlaylistsSimpleSelectableList/PlaylistItem.vue
index 902081cca..fc1d779f3 100644
--- a/src/components/lists/playlists/BasePlaylistsSimpleSelectableList/PlaylistItem.vue
+++ b/src/components/lists/playlists/BasePlaylistsSimpleSelectableList/PlaylistItem.vue
@@ -1,6 +1,6 @@
 <template>
   <BaseLinkContainer
-    class="item main-simple-list-item main-playlist-item"
+    class="item main-simple-list-item"
     :class="{
       disabled: isLoading,
       active: isActive
diff --git a/src/components/lists/profiles/BaseProfilesSimpleList.vue b/src/components/lists/profiles/BaseProfilesSimpleList.vue
index 2cf949722..47eace15d 100644
--- a/src/components/lists/profiles/BaseProfilesSimpleList.vue
+++ b/src/components/lists/profiles/BaseProfilesSimpleList.vue
@@ -6,6 +6,7 @@
       v-for="profileData in profilesCollection"
       :key="profileData.uuid"
       :profileData="profileData"
+      @linkClick="handleLinkClick"
     />
   </BaseListContainer>
 </template>
@@ -29,12 +30,20 @@ export default {
       }
     }
   },
+  emits: [
+    'linkClick'
+  ],
   computed: {
     profilesCollection () {
       return formatCollection(
         this.profiles
       )
     }
+  },
+  methods: {
+    handleLinkClick () {
+      this.$emit('linkClick')
+    }
   }
 }
 </script>
diff --git a/src/components/lists/profiles/BaseProfilesSimpleList/ProfileItem.vue b/src/components/lists/profiles/BaseProfilesSimpleList/ProfileItem.vue
index 9d6380798..51c032e4d 100644
--- a/src/components/lists/profiles/BaseProfilesSimpleList/ProfileItem.vue
+++ b/src/components/lists/profiles/BaseProfilesSimpleList/ProfileItem.vue
@@ -2,6 +2,7 @@
   <BaseLinkContainer
     class="item main-simple-list-item main-profile-item"
     :link="profileMainLink"
+    @click="handleLinkClick"
   >
     <BaseImage
       class="circular bordered"
@@ -120,6 +121,9 @@ export default {
       required: true
     }
   },
+  emits: [
+    'linkClick'
+  ],
   data () {
     return {
       isMainLinkActive: true
@@ -169,6 +173,9 @@ export default {
     }
   },
   methods: {
+    handleLinkClick () {
+      this.$emit('linkClick')
+    },
     handleMessageOptionClick () {
       this.$refs.messageModal.show()
     },
diff --git a/src/components/modals/community/BaseCommunityMembersModal.vue b/src/components/modals/community/BaseCommunityMembersModal.vue
new file mode 100644
index 000000000..ebf0a1dd0
--- /dev/null
+++ b/src/components/modals/community/BaseCommunityMembersModal.vue
@@ -0,0 +1,116 @@
+<template>
+  <BaseModalContainer ref="modal">
+    <BaseSegmentContainer
+      ref="scrollable"
+      :class="[
+        'scrolling content',
+        'main-modal-content-full-height',
+        'main-segment-container'
+      ]"
+      :isLoading="isLoading"
+      @init="handleInit"
+    >
+      <BasePaginatedListContainer
+        v-if="communityData"
+        scope="members"
+        :isLoading="isLoading"
+        :error="error"
+        :responseData="communityData"
+        :clientPageLimit="limit"
+        :responsePageLimit="limit"
+        @fetchData="fetchData"
+        @refresh="handleRefresh"
+        @focus="handleFocus"
+      >
+        <template #default="slotProps">
+          <BaseProfilesSimpleList
+            :profiles="slotProps.members"
+            @linkClick="handleLinkClick"
+          />
+        </template>
+      </BasePaginatedListContainer>
+    </BaseSegmentContainer>
+  </BaseModalContainer>
+</template>
+
+<script>
+import BaseModalContainer from '@/containers/modals/BaseModalContainer.vue'
+import BaseSegmentContainer
+  from '@/containers/segments/BaseSegmentContainer.vue'
+import BasePaginatedListContainer
+  from '@/containers/lists/BasePaginatedListContainer.vue'
+import BaseProfilesSimpleList
+  from '@/lists/profiles/BaseProfilesSimpleList.vue'
+import getCommunityMembers from '#/actions/api/community/get'
+
+export default {
+  name: 'BaseCommunityMembersModal',
+  components: {
+    BaseModalContainer,
+    BaseSegmentContainer,
+    BasePaginatedListContainer,
+    BaseProfilesSimpleList
+  },
+  props: {
+    communityId: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      error: null,
+      communityData: null,
+      scrollable: null,
+      isLoading: false,
+      isOpen: false,
+      limit: 50
+    }
+  },
+  computed: {
+    communityArgs () {
+      return {
+        communityId: this.communityId,
+        scope: 'members',
+        limit: this.limit
+      }
+    }
+  },
+  watch: {
+    isOpen: 'handleIsOpenChange'
+  },
+  methods: {
+    handleInit (el) {
+      this.scrollable = el
+    },
+    handleIsOpenChange (value) {
+      if (value) {
+        this.fetchData()
+      }
+    },
+    handleRefresh (page) {
+      this.fetchData(page)
+    },
+    handleFocus () {
+      this.scrollable.scrollTo(0, 0)
+    },
+    handleLinkClick () {
+      this.$refs.modal.hide()
+    },
+    getCommunityMembers,
+    fetchData (page) {
+      this.getCommunityMembers({
+        ...this.communityArgs,
+        page
+      })
+    },
+    show () {
+      this.$refs.modal.show()
+
+      this.isOpen = true
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped></style>
diff --git a/src/components/models/profile/BaseProfileFollowingCount.vue b/src/components/models/profile/BaseProfileFollowingCount.vue
index a89b5c0fb..428d47fa9 100644
--- a/src/components/models/profile/BaseProfileFollowingCount.vue
+++ b/src/components/models/profile/BaseProfileFollowingCount.vue
@@ -24,6 +24,7 @@ import {
   followers as formatProfileFollowersLink,
   following as formatProfileFollowingLink
 } from '#/formatters/links/profile'
+import { number as formatNumber } from '#/formatters'
 
 export default {
   name: 'BaseProfileFollowingCount',
@@ -55,7 +56,12 @@ export default {
       )
     },
     followersCountStrong () {
-      return `<strong>${this.followersCount}</strong>`
+      return `<strong>${this.followersCountFormatted}</strong>`
+    },
+    followersCountFormatted () {
+      return formatNumber(
+        this.followersCount
+      )
     },
     followersCount () {
       return this.profileData.follower_profiles_count
diff --git a/src/helpers/actions/api/communities/get.js b/src/helpers/actions/api/communities/get.js
new file mode 100644
index 000000000..72366579b
--- /dev/null
+++ b/src/helpers/actions/api/communities/get.js
@@ -0,0 +1,36 @@
+import axios from 'axios'
+
+export default function ({ page, limit }) {
+  this.error = null
+  this.isLoading = true
+
+  const url = '/communities'
+
+  const params = {
+    ...(page && { page }),
+    ...(limit && { limit })
+  }
+
+  const handleSuccess = response => {
+    this.communitiesData =
+      response.data.communities
+  }
+
+  const handleError = error => {
+    this.error = error
+  }
+
+  const handleFinish = () => {
+    this.isLoading = false
+  }
+
+  axios.get(
+    url, { params }
+  ).then(
+    handleSuccess
+  ).catch(
+    handleError
+  ).finally(
+    handleFinish
+  )
+}
diff --git a/src/helpers/actions/api/community/get.js b/src/helpers/actions/api/community/get.js
new file mode 100644
index 000000000..eef0a06dd
--- /dev/null
+++ b/src/helpers/actions/api/community/get.js
@@ -0,0 +1,43 @@
+import axios from 'axios'
+import store from '&/store'
+
+export default function ({ communityId, scope = '', page, limit }) {
+  this.error = null
+  this.isLoading = true
+
+  const url = `/communities/${communityId}/${scope}`
+
+  const otherProfileId =
+    store.state.profile.info.id
+
+  const params = {
+    ...(scope === 'members' && {
+      other_profile_id: otherProfileId
+    }),
+    ...(page && { page }),
+    ...(limit && { limit })
+  }
+
+  const handleSuccess = response => {
+    this.communityData =
+      response.data.community
+  }
+
+  const handleError = error => {
+    this.error = error
+  }
+
+  const handleFinish = () => {
+    this.isLoading = false
+  }
+
+  axios.get(
+    url, { params }
+  ).then(
+    handleSuccess
+  ).catch(
+    handleError
+  ).finally(
+    handleFinish
+  )
+}
diff --git a/src/helpers/data/plugins/i18n/locales/en.json b/src/helpers/data/plugins/i18n/locales/en.json
index 640f44413..70affb613 100644
--- a/src/helpers/data/plugins/i18n/locales/en.json
+++ b/src/helpers/data/plugins/i18n/locales/en.json
@@ -25,6 +25,7 @@
     "playlists": "Playlists",
     "favorites": "Favorites",
     "bookmarks": "Bookmarks",
+    "communities": "Communities",
     "settings": "Settings",
     "model": {
       "artists": "{modelName} artists",
@@ -40,7 +41,8 @@
       "following": "{modelName} following",
       "library": "{modelName} library",
       "playlists": "{modelName} playlists",
-      "favorites": "{modelName} favorites"
+      "favorites": "{modelName} favorites",
+      "communities": "{modelName} communities"
     },
     "top": {
       "artists": "Top artists",
@@ -134,6 +136,10 @@
       "listened": "Delete from listened"
     }
   },
+  "links": {
+    "playlists": "All playlists",
+    "communities": "All communities"
+  },
   "inputs": {
     "search": "Search...",
     "content": "Write something..."
@@ -244,7 +250,8 @@
     "albums": "{count} albums",
     "tracks": "{count} tracks",
     "followers": "{count} followers",
-    "following": "{count} following"
+    "following": "{count} following",
+    "members": "{count} members"
   },
   "sources": {
     "select": {
diff --git a/src/helpers/data/plugins/i18n/locales/ru.json b/src/helpers/data/plugins/i18n/locales/ru.json
index 664d6e3c6..51f688a8d 100644
--- a/src/helpers/data/plugins/i18n/locales/ru.json
+++ b/src/helpers/data/plugins/i18n/locales/ru.json
@@ -25,6 +25,7 @@
     "playlists": "Списки",
     "favorites": "Избранное",
     "bookmarks": "Закладки",
+    "communities": "Сообщества",
     "settings": "Настройки",
     "model": {
       "artists": "Исполнители {modelName}",
@@ -40,7 +41,8 @@
       "following": "Подписки {modelName}",
       "library": "Библиотека {modelName}",
       "playlists": "Списки {modelName}",
-      "favorites": "Избранное {modelName}"
+      "favorites": "Избранное {modelName}",
+      "communities": "Сообщества {modelName}"
     },
     "top": {
       "artists": "Популярные исполнители",
@@ -134,6 +136,10 @@
       "listened": "Удалить из прослушанного"
     }
   },
+  "links": {
+    "playlists": "Все списки",
+    "communities": "Все сообщества"
+  },
   "inputs": {
     "search": "Поиск...",
     "content": "Напишите что-нибудь..."
@@ -244,7 +250,8 @@
     "albums": "{count} альбомов",
     "tracks": "{count} композиций",
     "followers": "{count} подписчиков",
-    "following": "{count} подписок"
+    "following": "{count} подписок",
+    "members": "{count} участников"
   },
   "sources": {
     "select": {
diff --git a/src/helpers/data/plugins/router/routes.js b/src/helpers/data/plugins/router/routes.js
index f4f4a2544..7869a51fc 100644
--- a/src/helpers/data/plugins/router/routes.js
+++ b/src/helpers/data/plugins/router/routes.js
@@ -142,6 +142,15 @@ const ProfileFollowingPage = () => import(
 const PlaylistsPage = () => import(
   '%/PlaylistsPage.vue'
 )
+const ProfileCommunitiesPage = () => import(
+  '%/profile/CommunitiesPage.vue'
+)
+const CommunitiesPage = () => import(
+  '%/communities/MainPage.vue'
+)
+const CommunityPage = () => import(
+  '%/communities/CommunityPage.vue'
+)
 
 export default [
   {
@@ -479,5 +488,26 @@ export default [
     name: 'PlaylistsPage',
     component: PlaylistsPage,
     props: true
+  },
+  {
+    path: '/profiles/:profileId/communities',
+    exact: true,
+    name: 'ProfileCommunitiesPage',
+    component: ProfileCommunitiesPage,
+    props: true
+  },
+  {
+    path: '/communities',
+    exact: true,
+    name: 'CommunitiesPage',
+    component: CommunitiesPage,
+    props: true
+  },
+  {
+    path: '/communities/:communityId',
+    exact: true,
+    name: 'CommunityPage',
+    component: CommunityPage,
+    props: true
   }
 ]
diff --git a/src/helpers/formatters/links/communities.js b/src/helpers/formatters/links/communities.js
new file mode 100644
index 000000000..ac205daf0
--- /dev/null
+++ b/src/helpers/formatters/links/communities.js
@@ -0,0 +1,15 @@
+export const main = () => {
+  return {
+    name: 'CommunitiesPage',
+    params: {},
+    path: 'communities'
+  }
+}
+
+export const community = ({ communityId }) => {
+  return {
+    name: 'CommunityPage',
+    params: { communityId },
+    path: `communities/${communityId}`
+  }
+}
diff --git a/src/helpers/formatters/links/profile.js b/src/helpers/formatters/links/profile.js
index eb80ded27..519bf5009 100644
--- a/src/helpers/formatters/links/profile.js
+++ b/src/helpers/formatters/links/profile.js
@@ -53,3 +53,11 @@ export const following = ({ profileId }) => {
     path: `profiles/${profileId}/following`
   }
 }
+
+export const communities = ({ profileId }) => {
+  return {
+    name: 'ProfileCommunitiesPage',
+    params: { profileId },
+    path: `profiles/${profileId}/communities`
+  }
+}
diff --git a/src/helpers/formatters/navigation.js b/src/helpers/formatters/navigation.js
index 2c41debe5..67fca6af7 100644
--- a/src/helpers/formatters/navigation.js
+++ b/src/helpers/formatters/navigation.js
@@ -65,3 +65,14 @@ export const playlists = () => {
     }
   ]
 }
+
+export const communities = () => {
+  return [
+    {
+      name: i18n.global.t(
+        'navigation.communities'
+      ),
+      isActive: true
+    }
+  ]
+}
diff --git a/src/helpers/formatters/navigation/community.js b/src/helpers/formatters/navigation/community.js
new file mode 100644
index 000000000..8bad49433
--- /dev/null
+++ b/src/helpers/formatters/navigation/community.js
@@ -0,0 +1,41 @@
+import i18n from '&/i18n'
+import {
+  main as formatCommunitiesLink,
+  community as formatCommunityLink
+} from '#/formatters/links/communities'
+
+export default function ({ communityTitle, pageNameKey }) {
+  const formatLink = () => {
+    if (pageNameKey) {
+      return formatCommunityLink({
+        communityTitle
+      })
+    }
+  }
+
+  const formatSubpageSection = () => {
+    if (pageNameKey) {
+      return {
+        name: i18n.global.t(
+          `navigation.${pageNameKey}`
+        ),
+        isActive: true
+      }
+    }
+  }
+
+  return [
+    {
+      name: i18n.global.t(
+        'navigation.communities'
+      ),
+      link: formatCommunitiesLink()
+    },
+    {
+      name: communityTitle,
+      isActive: !pageNameKey,
+      link: formatLink()
+    },
+    formatSubpageSection()
+  ].filter(e => e)
+}
diff --git a/src/helpers/formatters/navigation/conversations.js b/src/helpers/formatters/navigation/conversations.js
index 2ab313f41..d40cfb27c 100644
--- a/src/helpers/formatters/navigation/conversations.js
+++ b/src/helpers/formatters/navigation/conversations.js
@@ -3,7 +3,7 @@ import {
   main as formatConversationsLink
 } from '#/formatters/links/conversations'
 
-export default function ({ conversationId, profileNickname } = {}) {
+export default function ({ profileNickname } = {}) {
   const formatLink = () => {
     if (profileNickname) {
       return formatConversationsLink()
diff --git a/src/helpers/formatters/tabs/communities.js b/src/helpers/formatters/tabs/communities.js
new file mode 100644
index 000000000..41359f7c4
--- /dev/null
+++ b/src/helpers/formatters/tabs/communities.js
@@ -0,0 +1,16 @@
+import i18n from '&/i18n'
+import { main as formatCommunitiesLink } from '#/formatters/links/communities'
+
+export default function () {
+  const title = i18n.global.t(
+    'navigation.communities'
+  )
+
+  const { path } = formatCommunitiesLink()
+
+  return {
+    icon: 'users',
+    title,
+    path
+  }
+}
diff --git a/src/helpers/formatters/tabs/community.js b/src/helpers/formatters/tabs/community.js
new file mode 100644
index 000000000..51a490688
--- /dev/null
+++ b/src/helpers/formatters/tabs/community.js
@@ -0,0 +1,32 @@
+import i18n from '&/i18n'
+import {
+  community as formatCommunityLink
+} from '#/formatters/links/communities'
+
+export default function ({ communityId, communityTitle, pageNameKey }) {
+  const formatTitle = () => {
+    if (pageNameKey) {
+      return i18n.global.t(
+        `navigation.model.${pageNameKey}`,
+        { modelName: communityTitle }
+      )
+    } else {
+      return communityTitle
+    }
+  }
+
+  const formatPath = () => {
+    switch (pageNameKey) {
+      default:
+        return formatCommunityLink({
+          communityId
+        }).path
+    }
+  }
+
+  return {
+    icon: 'users',
+    title: formatTitle(),
+    path: formatPath()
+  }
+}
diff --git a/src/helpers/formatters/tabs/profile/communities.js b/src/helpers/formatters/tabs/profile/communities.js
new file mode 100644
index 000000000..744c18f29
--- /dev/null
+++ b/src/helpers/formatters/tabs/profile/communities.js
@@ -0,0 +1,25 @@
+import i18n from '&/i18n'
+import {
+  communities as formatProfileCommunitiesLink
+} from '#/formatters/links/profile'
+
+export default function ({ profileId, profileNickname }) {
+  const formatTitle = () => {
+    return i18n.global.t(
+      'navigation.model.communities',
+      { modelName: profileNickname }
+    )
+  }
+
+  const formatPath = () => {
+    return formatProfileCommunitiesLink({
+      profileId
+    }).path
+  }
+
+  return {
+    icon: 'users',
+    title: formatTitle(),
+    path: formatPath()
+  }
+}
diff --git a/src/views/PlaylistsPage.vue b/src/views/PlaylistsPage.vue
index 8d47b0d10..622284054 100644
--- a/src/views/PlaylistsPage.vue
+++ b/src/views/PlaylistsPage.vue
@@ -3,35 +3,42 @@
     :responsePageLimit="limit"
   >
     <template #default="pageSlotProps">
-      <BaseSegmentContainer
+      <div
         :class="[
-          'raised',
+          'ui raised segments',
           'main-segment-container',
-          'main-page-segment-container',
-          'main-paginated-page-segment-container'
+          'main-page-segment-container'
         ]"
-        :isLoading="pageSlotProps.isLoading"
       >
-        <BasePaginatedListContainer
-          ref="paginatedContainer"
-          scope="playlists"
+        <BaseSegmentContainer>
+          <BasePlaylistCreateButton />
+        </BaseSegmentContainer>
+
+        <BaseSegmentContainer
+          class="main-paginated-page-segment-container"
           :isLoading="pageSlotProps.isLoading"
-          :error="pageSlotProps.error"
-          :responseData="pageSlotProps.playlistsData"
-          :clientPageLimit="limit"
-          :responsePageLimit="limit"
-          @focus="handleFocus"
-          @fetchData="pageSlotProps.fetchData"
-          @refresh="pageSlotProps.handleRefresh"
         >
-          <template #default="slotProps">
-            <BasePlaylistsSimpleList
-              :playlists="slotProps.playlists"
-              isWithProfile
-            />
-          </template>
-        </BasePaginatedListContainer>
-      </BaseSegmentContainer>
+          <BasePaginatedListContainer
+            ref="paginatedContainer"
+            scope="playlists"
+            :isLoading="pageSlotProps.isLoading"
+            :error="pageSlotProps.error"
+            :responseData="pageSlotProps.playlistsData"
+            :clientPageLimit="limit"
+            :responsePageLimit="limit"
+            @focus="handleFocus"
+            @fetchData="pageSlotProps.fetchData"
+            @refresh="pageSlotProps.handleRefresh"
+          >
+            <template #default="slotProps">
+              <BasePlaylistsSimpleList
+                :playlists="slotProps.playlists"
+                isWithProfile
+              />
+            </template>
+          </BasePaginatedListContainer>
+        </BaseSegmentContainer>
+      </div>
     </template>
   </BasePlaylistsPageContainer>
 </template>
@@ -41,6 +48,8 @@ import BasePlaylistsPageContainer
   from '@/containers/pages/playlists/BasePlaylistsPageContainer.vue'
 import BaseSegmentContainer
   from '@/containers/segments/BaseSegmentContainer.vue'
+import BasePlaylistCreateButton
+  from '@/buttons/playlist/BasePlaylistCreateButton.vue'
 import BasePaginatedListContainer
   from '@/containers/lists/BasePaginatedListContainer.vue'
 import BasePlaylistsSimpleList
@@ -51,6 +60,7 @@ export default {
   components: {
     BasePlaylistsPageContainer,
     BaseSegmentContainer,
+    BasePlaylistCreateButton,
     BasePaginatedListContainer,
     BasePlaylistsSimpleList
   },
diff --git a/src/views/communities/CommunityPage.vue b/src/views/communities/CommunityPage.vue
new file mode 100644
index 000000000..ab37cb44a
--- /dev/null
+++ b/src/views/communities/CommunityPage.vue
@@ -0,0 +1,35 @@
+<template>
+  <BaseCommunityPageContainer
+    :communityId="communityId"
+  >
+    <template #default="slotProps">
+      <InfoSegment
+        :communityData="slotProps.communityData"
+      />
+    </template>
+  </BaseCommunityPageContainer>
+</template>
+
+<script>
+import BaseCommunityPageContainer
+  from '@/containers/pages/community/BaseCommunityPageContainer.vue'
+import InfoSegment from './CommunityPage/InfoSegment.vue'
+
+export default {
+  name: 'CommunityPage',
+  components: {
+    BaseCommunityPageContainer,
+    InfoSegment
+  },
+  props: {
+    communityId: String
+  },
+  data () {
+    return {}
+  },
+  computed: {},
+  methods: {}
+}
+</script>
+
+<style lang="sass" scoped></style>
diff --git a/src/views/communities/CommunityPage/InfoSegment.vue b/src/views/communities/CommunityPage/InfoSegment.vue
new file mode 100644
index 000000000..95e8aa0af
--- /dev/null
+++ b/src/views/communities/CommunityPage/InfoSegment.vue
@@ -0,0 +1,106 @@
+<template>
+  <BaseSegmentContainer
+    class="raised main-segment-container"
+  >
+    <div class="main-simple-list-item">
+      <BaseImage
+        class="community-image rounded bordered"
+        model="community"
+        :image="imageData?.small"
+      />
+
+      <div class="content">
+        <BaseHeader
+          tag="h3"
+          :text="communityTitle"
+        />
+
+        <div v-if="description">
+          {{ description }}
+        </div>
+
+        <span
+          class="main-link"
+          v-html="membersCountText"
+          @click="handleMembersCountClick"
+        ></span>
+
+        <BaseCommunityMembersModal
+          ref="membersModal"
+          :communityId="communityId"
+        />
+      </div>
+    </div>
+  </BaseSegmentContainer>
+</template>
+
+<script>
+import BaseSegmentContainer
+  from '@/containers/segments/BaseSegmentContainer.vue'
+import BaseImage from '@/images/BaseImage.vue'
+import BaseHeader from '@/BaseHeader.vue'
+import BaseCommunityMembersModal
+  from '@/modals/community/BaseCommunityMembersModal.vue'
+import { number as formatNumber } from '#/formatters'
+
+export default {
+  name: 'InfoSegment',
+  components: {
+    BaseImage,
+    BaseHeader,
+    BaseSegmentContainer,
+    BaseCommunityMembersModal
+  },
+  props: {
+    communityData: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    imageData () {
+      return this.communityData.image
+    },
+    communityTitle () {
+      return this.communityData.title
+    },
+    description () {
+      return this.communityData.description
+    },
+    membersCountText () {
+      return this.$t(
+        'counters.members',
+        { count: this.membersCountStrong }
+      )
+    },
+    membersCountStrong () {
+      return `<strong>${this.membersCountFormatted}</strong>`
+    },
+    membersCountFormatted () {
+      return formatNumber(
+        this.membersCount
+      )
+    },
+    membersCount () {
+      return this.communityData.members_count
+    },
+    communityId () {
+      return this.communityData.id.toString()
+    }
+  },
+  methods: {
+    handleMembersCountClick () {
+      this.$refs.membersModal.show()
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped>
+.main-simple-list-item
+  @extend .align-items-start
+
+.community-image
+  width: 75px
+  height: 75px
+</style>
diff --git a/src/views/communities/MainPage.vue b/src/views/communities/MainPage.vue
new file mode 100644
index 000000000..0c079558e
--- /dev/null
+++ b/src/views/communities/MainPage.vue
@@ -0,0 +1,79 @@
+<template>
+  <BaseCommunitiesPageContainer
+    :responsePageLimit="limit"
+  >
+    <template #default="pageSlotProps">
+      <div
+        :class="[
+          'ui raised segments',
+          'main-segment-container',
+          'main-page-segment-container'
+        ]"
+      >
+        <BaseSegmentContainer>
+          <BaseCommunityCreateButton />
+        </BaseSegmentContainer>
+
+        <BaseSegmentContainer
+          class="main-paginated-page-segment-container"
+          :isLoading="pageSlotProps.isLoading"
+        >
+          <BasePaginatedListContainer
+            ref="paginatedContainer"
+            scope="communities"
+            :isLoading="pageSlotProps.isLoading"
+            :error="pageSlotProps.error"
+            :responseData="pageSlotProps.communitiesData"
+            :clientPageLimit="limit"
+            :responsePageLimit="limit"
+            @focus="handleFocus"
+            @fetchData="pageSlotProps.fetchData"
+            @refresh="pageSlotProps.handleRefresh"
+          >
+            <template #default="slotProps">
+              <BaseCommunitiesSimpleList
+                :communities="slotProps.communities"
+              />
+            </template>
+          </BasePaginatedListContainer>
+        </BaseSegmentContainer>
+      </div>
+    </template>
+  </BaseCommunitiesPageContainer>
+</template>
+
+<script>
+import BaseCommunitiesPageContainer
+  from '@/containers/pages/communities/BaseCommunitiesPageContainer.vue'
+import BaseSegmentContainer
+  from '@/containers/segments/BaseSegmentContainer.vue'
+import BaseCommunityCreateButton
+  from '@/buttons/community/BaseCommunityCreateButton.vue'
+import BasePaginatedListContainer
+  from '@/containers/lists/BasePaginatedListContainer.vue'
+import BaseCommunitiesSimpleList
+  from '@/lists/communities/BaseCommunitiesSimpleList.vue'
+
+export default {
+  name: 'MainPage',
+  components: {
+    BaseCommunitiesPageContainer,
+    BaseSegmentContainer,
+    BaseCommunityCreateButton,
+    BasePaginatedListContainer,
+    BaseCommunitiesSimpleList
+  },
+  data () {
+    return {
+      limit: 50
+    }
+  },
+  methods: {
+    handleFocus () {
+      window.scrollTo(0, 0)
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped></style>
diff --git a/src/views/profile/CommunitiesPage.vue b/src/views/profile/CommunitiesPage.vue
new file mode 100644
index 000000000..95f6b619b
--- /dev/null
+++ b/src/views/profile/CommunitiesPage.vue
@@ -0,0 +1,104 @@
+<template>
+  <BaseProfilePageContainer
+    scope="communities"
+    pageNameKey="communities"
+    :profileId="profileId"
+    :responsePageLimit="limit"
+  >
+    <template #default="pageSlotProps">
+      <div
+        :class="[
+          'ui raised segments',
+          'main-segment-container',
+          'main-page-segment-container'
+        ]"
+      >
+        <BaseSegmentContainer
+          class="top-segment"
+        >
+          <BaseLink
+            :link="communitiesLink"
+            :text="communitiesLinkText"
+          />
+        </BaseSegmentContainer>
+
+        <BaseSegmentContainer
+          class="main-paginated-page-segment-container"
+          :isLoading="pageSlotProps.isLoading"
+        >
+          <BasePaginatedListContainer
+            scope="communities"
+            :isLoading="pageSlotProps.isLoading"
+            :error="pageSlotProps.error"
+            :responseData="pageSlotProps.profileData"
+            :clientPageLimit="limit"
+            :responsePageLimit="limit"
+            @focus="handleFocus"
+            @fetchData="pageSlotProps.fetchData"
+            @refresh="pageSlotProps.handleRefresh"
+          >
+            <template #default="slotProps">
+              <BaseCommunitiesSimpleList
+                :communities="slotProps.communities"
+              />
+            </template>
+          </BasePaginatedListContainer>
+        </BaseSegmentContainer>
+      </div>
+    </template>
+  </BaseProfilePageContainer>
+</template>
+
+<script>
+import BaseProfilePageContainer
+  from '@/containers/pages/profile/BaseProfilePageContainer.vue'
+import BaseSegmentContainer
+  from '@/containers/segments/BaseSegmentContainer.vue'
+import BaseLink from '@/links/BaseLink.vue'
+import BasePaginatedListContainer
+  from '@/containers/lists/BasePaginatedListContainer.vue'
+import BaseCommunitiesSimpleList
+  from '@/lists/communities/BaseCommunitiesSimpleList.vue'
+import {
+  main as formatCommunitiesLink
+} from '#/formatters/links/communities'
+
+export default {
+  name: 'PlaylistsPage',
+  components: {
+    BaseProfilePageContainer,
+    BaseSegmentContainer,
+    BaseLink,
+    BasePaginatedListContainer,
+    BaseCommunitiesSimpleList
+  },
+  props: {
+    profileId: String
+  },
+  data () {
+    return {
+      limit: 50
+    }
+  },
+  computed: {
+    communitiesLink () {
+      return formatCommunitiesLink()
+    },
+    communitiesLinkText () {
+      return this.$t(
+        'links.communities'
+      )
+    }
+  },
+  methods: {
+    handleFocus () {
+      window.scrollTo(0, 0)
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped>
+.top-segment
+  @extend .d-flex, .justify-content-flex-end
+</style>
diff --git a/src/views/profile/PlaylistsPage.vue b/src/views/profile/PlaylistsPage.vue
index 6c3c5ea90..d0450db26 100644
--- a/src/views/profile/PlaylistsPage.vue
+++ b/src/views/profile/PlaylistsPage.vue
@@ -17,20 +17,9 @@
           class="top-segment"
         >
           <div>
-            <template
+            <BasePlaylistCreateButton
               v-if="isRenderCreateButton"
-            >
-              <BaseButton
-                class="primary"
-                icon="plus"
-                :text="createText"
-                @click="handleCreateButtonClick"
-              />
-
-              <BasePlaylistCreateModal
-                ref="modal"
-              />
-            </template>
+            />
           </div>
 
           <BaseLink
@@ -71,9 +60,8 @@ import BaseProfilePageContainer
   from '@/containers/pages/profile/BaseProfilePageContainer.vue'
 import BaseSegmentContainer
   from '@/containers/segments/BaseSegmentContainer.vue'
-import BaseButton from '@/buttons/BaseButton.vue'
-import BasePlaylistCreateModal
-  from '@/modals/playlist/BasePlaylistCreateModal.vue'
+import BasePlaylistCreateButton
+  from '@/buttons/playlist/BasePlaylistCreateButton.vue'
 import BaseLink from '@/links/BaseLink.vue'
 import BasePaginatedListContainer
   from '@/containers/lists/BasePaginatedListContainer.vue'
@@ -87,8 +75,7 @@ export default {
   components: {
     BaseProfilePageContainer,
     BaseSegmentContainer,
-    BaseButton,
-    BasePlaylistCreateModal,
+    BasePlaylistCreateButton,
     BaseLink,
     BasePaginatedListContainer,
     BasePlaylistsSimpleList
@@ -102,11 +89,6 @@ export default {
     }
   },
   computed: {
-    createText () {
-      return this.$t(
-        'actions.add.playlist'
-      )
-    },
     isRenderCreateButton () {
       return isCurrentProfile(
         this.profileId
@@ -116,15 +98,14 @@ export default {
       return formatPlaylistsLink()
     },
     playlistsLinkText () {
-      return 'View all playlists'
+      return this.$t(
+        'links.playlists'
+      )
     }
   },
   methods: {
     handleFocus () {
       window.scrollTo(0, 0)
-    },
-    handleCreateButtonClick () {
-      this.$refs.modal.show()
     }
   }
 }
diff --git a/src/views/tag/MainPage.vue b/src/views/tag/MainPage.vue
index 61a9ce51a..1bb44ddf2 100644
--- a/src/views/tag/MainPage.vue
+++ b/src/views/tag/MainPage.vue
@@ -1,11 +1,21 @@
 <template>
   <BaseTagPageContainer :tagName="tagName">
     <template #default="slotProps">
-      <InfoSegment :tagData="slotProps.tagData" />
+      <InfoSegment
+        :tagData="slotProps.tagData"
+      />
 
-      <ArtistsSegment :tagName="slotProps.tagData.name" />
-      <AlbumsSegment :tagName="slotProps.tagData.name" />
-      <TracksSegment :tagName="slotProps.tagData.name" />
+      <ArtistsSegment
+        :tagName="slotProps.tagData.name"
+      />
+
+      <AlbumsSegment
+        :tagName="slotProps.tagData.name"
+      />
+
+      <TracksSegment
+        :tagName="slotProps.tagData.name"
+      />
     </template>
   </BaseTagPageContainer>
 </template>