From 60f15224d43384e5805c0cbb5febc1959d8153e1 Mon Sep 17 00:00:00 2001
From: staniel359 <staniel359@gmail.com>
Date: Wed, 6 Apr 2022 14:45:51 +0300
Subject: [PATCH] [WIP] Add communities

---
 src/assets/styles/Main.sass                   |  14 +-
 src/components/BaseTimestamp.vue              |   2 +-
 src/components/buttons/BaseSubmitButton.vue   |   8 +
 .../community/BaseCommunityCreateButton.vue   |   2 +-
 .../playlist/BasePlaylistCreateButton.vue     |   2 +-
 .../containers/BaseDropdownContainer.vue      |   8 +-
 .../containers/forms/BaseFormContainer.vue    |   2 +-
 .../BaseCommunityCreateFormContainer.vue      |   6 +-
 .../post/BasePostCreateFormContainer.vue      |  33 +++--
 .../post/BasePostUpdateFormContainer.vue      |  55 ++++---
 .../lists/BasePaginatedListContainer.vue      |   8 +-
 .../community/BaseCommunityPageContainer.vue  |   4 +
 .../posts/BaseCommunityPostsPageContainer.vue | 104 +++++++++++++
 .../BaseConversationSegmentContainer.vue      |   4 +-
 .../playlist/BasePlaylistSegmentContainer.vue |   4 +-
 src/components/dropdowns/BaseDropdown.vue     |   9 +-
 .../BaseOptionsDropdown/DeleteOption.vue      |   3 +-
 src/components/fields/BaseContentField.vue    |   7 +
 src/components/fields/BaseImageField.vue      |   9 +-
 .../fields/post/BasePostAsCommunityField.vue  |  41 ++++++
 .../fields/profile/BaseProfileImageField.vue  |  11 +-
 .../profile/BaseProfileRememberField.vue      |   2 +-
 .../forms/BaseFormAddButtonsSection.vue       |  23 +--
 .../ImagesButton.vue                          |  21 +--
 src/components/inputs/BaseImageInput.vue      |   4 +
 .../SearchContent/SearchSourceSelect.vue      |   1 +
 .../DataOptions/ClearCacheOption.vue          |   2 +
 .../DataOptions/ClearSearchHistoryOption.vue  |   2 +
 src/components/links/BaseLink.vue             |   4 +-
 .../CommunityItem.vue                         |   6 +-
 .../lists/messages/BaseMessagesSimpleList.vue |  15 +-
 .../BaseMessagesSimpleList/MessageItem.vue    |  66 +++++----
 .../lists/posts/BasePostsSimpleList.vue       |   4 +-
 .../posts/BasePostsSimpleList/PostItem.vue    | 139 +++++++++++-------
 .../PostItem/CommunityTitle.vue               |  50 +++++++
 src/components/modals/BaseDeleteModal.vue     |   3 +-
 .../modals/post/BasePostDeleteModal.vue       |  31 +++-
 .../modals/post/BasePostUpdateModal.vue       |  28 +++-
 .../FolderSelectSection.vue                   |   1 +
 .../profile/BaseProfileFollowButton.vue       |   1 +
 .../segments/posts/BasePostsFormSegment.vue}  |  25 +++-
 .../actions/api/community/post/create.js      |  51 +++++++
 .../actions/api/community/post/delete.js      |  37 +++++
 .../actions/api/community/post/update.js      |  55 +++++++
 src/helpers/actions/api/profile/get.js        |   6 +-
 .../actions/api/{ => profile}/post/create.js  |   6 +
 .../actions/api/{ => profile}/post/delete.js  |   0
 .../actions/api/{ => profile}/post/update.js  |   5 +-
 src/helpers/data/plugins/i18n/locales/en.json |   7 +-
 src/helpers/data/plugins/i18n/locales/ru.json |   7 +-
 src/helpers/data/plugins/router/routes.js     |  20 ++-
 src/helpers/formatters/links.js               |   8 +
 src/helpers/formatters/links/communities.js   |  15 --
 src/helpers/formatters/links/community.js     |  15 ++
 .../navigation/sections/communities.js        |   4 +-
 .../navigation/sections/community.js          |   6 +-
 src/helpers/formatters/tabs/communities.js    |   4 +-
 src/helpers/formatters/tabs/community.js      |   6 +-
 .../formatters/tabs/community/posts.js        |  25 ++++
 .../MainPage.vue => CommunitiesPage.vue}      |   2 +-
 src/views/community/MainPage/PostsSegment.vue |  82 +++++++++++
 .../PostsSegment/PostsListSegment.vue         |  93 ++++++++++++
 src/views/community/PostsPage.vue             |  73 +++++++++
 src/views/profile/CommunitiesPage.vue         |   4 +-
 .../FavoritesSegment/FavoritesTabsSegment.vue |   4 +-
 .../MainPage/InfoSegment/MessageSection.vue   |   2 +-
 .../LibrarySegment/LibraryTabsSegment.vue     |   4 +-
 src/views/profile/MainPage/PostsSegment.vue   |   8 +-
 .../ImportSegment/LibraryImportBlock.vue      |   2 +-
 .../ImportSegment/SearchImportBlock.vue       |   2 +-
 .../ImportSegment/AccountImportBlock.vue      |   2 +-
 .../ImportSegment/FolderImportBlock.vue       |   6 +-
 .../ImportSegment/SearchImportBlock.vue       |   6 +-
 73 files changed, 1072 insertions(+), 259 deletions(-)
 create mode 100644 src/components/containers/pages/community/posts/BaseCommunityPostsPageContainer.vue
 create mode 100644 src/components/fields/post/BasePostAsCommunityField.vue
 create mode 100644 src/components/lists/posts/BasePostsSimpleList/PostItem/CommunityTitle.vue
 rename src/{views/profile/MainPage/PostsSegment/FormSegment.vue => components/segments/posts/BasePostsFormSegment.vue} (79%)
 create mode 100644 src/helpers/actions/api/community/post/create.js
 create mode 100644 src/helpers/actions/api/community/post/delete.js
 create mode 100644 src/helpers/actions/api/community/post/update.js
 rename src/helpers/actions/api/{ => profile}/post/create.js (87%)
 rename src/helpers/actions/api/{ => profile}/post/delete.js (100%)
 rename src/helpers/actions/api/{ => profile}/post/update.js (91%)
 delete mode 100644 src/helpers/formatters/links/communities.js
 create mode 100644 src/helpers/formatters/links/community.js
 create mode 100644 src/helpers/formatters/tabs/community/posts.js
 rename src/views/{communities/MainPage.vue => CommunitiesPage.vue} (98%)
 create mode 100644 src/views/community/MainPage/PostsSegment.vue
 create mode 100644 src/views/community/MainPage/PostsSegment/PostsListSegment.vue
 create mode 100644 src/views/community/PostsPage.vue

diff --git a/src/assets/styles/Main.sass b/src/assets/styles/Main.sass
index 3568cd175..58deae6c1 100644
--- a/src/assets/styles/Main.sass
+++ b/src/assets/styles/Main.sass
@@ -259,7 +259,7 @@ a
   & > .content
     @extend .flex-full, .no-padding
     .content-container
-      margin-top: 1em
+      margin-top: 0.75em
     .content-section
       margin-top: 5px !important
     .text
@@ -267,6 +267,8 @@ a
       line-height: 1.2em
     & > .description
       margin-top: 0.25em !important
+      &.main-timestamp
+        @extend .no-margin
   .main-options-dropdown-container
     @extend .visibility-hidden
     margin-left: 0.5em
@@ -279,10 +281,8 @@ a
       @extend .text-color-base
     .main-options-dropdown-container
       @extend .visibility-visible
-
-.main-message-item, .main-profile-item
-  & > .image
-    align-self: start
+  &.main-post-item, &.main-message-item, &.main-profile-item
+    @extend .align-items-start
 
 .main-message
   @extend .no-shadow, .no-margin
@@ -630,8 +630,10 @@ a
   & > .buttons-container
     @extend .d-flex, .align-items-center
     margin-top: 1em
-    & > .add-buttons
+    & > .add-buttons-container
       @extend .flex-full
+    & > .main-as-community-checkbox
+      margin: 0 1em
   .images-tracks-section
     margin-top: 1em
 
diff --git a/src/components/BaseTimestamp.vue b/src/components/BaseTimestamp.vue
index cb09a792f..255bac58c 100644
--- a/src/components/BaseTimestamp.vue
+++ b/src/components/BaseTimestamp.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="main-small-container">
+  <div class="main-small-container main-timestamp">
     <small>
       {{ createdText }}
     </small>
diff --git a/src/components/buttons/BaseSubmitButton.vue b/src/components/buttons/BaseSubmitButton.vue
index 271c6d646..ea8a9603a 100644
--- a/src/components/buttons/BaseSubmitButton.vue
+++ b/src/components/buttons/BaseSubmitButton.vue
@@ -1,9 +1,12 @@
 <template>
   <button
+    ref="button"
     type="submit"
     class="ui primary button main-submit-button"
     :class="{ inverted: isDarkMode }"
   >
+    <i class="check icon"></i>
+
     {{ actionText }}
   </button>
 </template>
@@ -28,6 +31,11 @@ export default {
         `actions.${this.actionKey}`
       )
     }
+  },
+  methods: {
+    click () {
+      this.$refs.button.click()
+    }
   }
 }
 </script>
diff --git a/src/components/buttons/community/BaseCommunityCreateButton.vue b/src/components/buttons/community/BaseCommunityCreateButton.vue
index 2cbd41f6f..a851534c2 100644
--- a/src/components/buttons/community/BaseCommunityCreateButton.vue
+++ b/src/components/buttons/community/BaseCommunityCreateButton.vue
@@ -1,6 +1,6 @@
 <template>
   <BaseButton
-    class="primary"
+    class="basic"
     icon="plus"
     :text="createText"
     @click="handleButtonClick"
diff --git a/src/components/buttons/playlist/BasePlaylistCreateButton.vue b/src/components/buttons/playlist/BasePlaylistCreateButton.vue
index c821d467f..f270cc212 100644
--- a/src/components/buttons/playlist/BasePlaylistCreateButton.vue
+++ b/src/components/buttons/playlist/BasePlaylistCreateButton.vue
@@ -1,6 +1,6 @@
 <template>
   <BaseButton
-    class="primary"
+    class="basic"
     icon="plus"
     :text="createText"
     @click="handleButtonClick"
diff --git a/src/components/containers/BaseDropdownContainer.vue b/src/components/containers/BaseDropdownContainer.vue
index a1b37d9c2..7441ce434 100644
--- a/src/components/containers/BaseDropdownContainer.vue
+++ b/src/components/containers/BaseDropdownContainer.vue
@@ -31,7 +31,10 @@
       :isError="isError"
     />
 
-    <div class="menu">
+    <div
+      class="menu"
+      :class="menuDirection"
+    >
       <slot></slot>
     </div>
   </div>
@@ -63,7 +66,8 @@ export default {
     header: String,
     isDisabled: Boolean,
     isLoading: Boolean,
-    isError: Boolean
+    isError: Boolean,
+    menuDirection: String
   },
   emits: [
     'change'
diff --git a/src/components/containers/forms/BaseFormContainer.vue b/src/components/containers/forms/BaseFormContainer.vue
index 1d3dfcfaa..643cb1e6a 100644
--- a/src/components/containers/forms/BaseFormContainer.vue
+++ b/src/components/containers/forms/BaseFormContainer.vue
@@ -1,7 +1,7 @@
 <template>
   <form
-    class="ui form main-form"
     ref="form"
+    class="ui form main-form"
     :class="{
       loading: isLoading,
       inverted: isDarkMode
diff --git a/src/components/containers/forms/community/BaseCommunityCreateFormContainer.vue b/src/components/containers/forms/community/BaseCommunityCreateFormContainer.vue
index 0aebcd06e..036110ac2 100644
--- a/src/components/containers/forms/community/BaseCommunityCreateFormContainer.vue
+++ b/src/components/containers/forms/community/BaseCommunityCreateFormContainer.vue
@@ -15,8 +15,8 @@ import BaseFormContainer
 import { communityFormOptions } from '*/helpers/data/plugins/semantic'
 import createCommunity from '*/helpers/actions/api/community/create'
 import {
-  community as formatCommunityLink
-} from '*/helpers/formatters/links/communities'
+  main as formatCommunityMainLink
+} from '*/helpers/formatters/links/community'
 
 export default {
   name: 'BaseCommunityCreateFormContainer',
@@ -44,7 +44,7 @@ export default {
       })
     },
     communityUrl () {
-      return formatCommunityLink({
+      return formatCommunityMainLink({
         communityId: this.communityId
       })
     }
diff --git a/src/components/containers/forms/post/BasePostCreateFormContainer.vue b/src/components/containers/forms/post/BasePostCreateFormContainer.vue
index 5008ca008..415fc8ddb 100644
--- a/src/components/containers/forms/post/BasePostCreateFormContainer.vue
+++ b/src/components/containers/forms/post/BasePostCreateFormContainer.vue
@@ -12,7 +12,8 @@
 import BaseFormContainer
   from '*/components/containers/forms/BaseFormContainer.vue'
 import { postFormOptions } from '*/helpers/data/plugins/semantic'
-import createPost from '*/helpers/actions/api/post/create'
+import createProfilePost from '*/helpers/actions/api/profile/post/create'
+import createCommunityPost from '*/helpers/actions/api/community/post/create'
 import { artistName as formatArtistName } from '*/helpers/formatters'
 
 export default {
@@ -21,7 +22,7 @@ export default {
     BaseFormContainer
   },
   props: {
-    profileId: {
+    postType: {
       type: String,
       required: true
     },
@@ -36,7 +37,9 @@ export default {
       default () {
         return []
       }
-    }
+    },
+    profileId: String,
+    communityId: String
   },
   emits: [
     'success'
@@ -82,17 +85,25 @@ export default {
 
         this.createPost(
           createArgs
-        ).then(
-          this.handleCreateSuccess
         )
       }
     },
-    handleCreateSuccess () {
-      this.$emit(
-        'success'
-      )
+    createProfilePost,
+    createCommunityPost,
+    createPost (args) {
+      switch (this.postType) {
+        case 'profile':
+          return this.createProfilePost(
+            args
+          )
+        case 'community':
+          return this.createCommunityPost(
+            args
+          )
+        default:
+          return null
+      }
     },
-    createPost,
     formatTrack (trackData) {
       const artistName =
         formatArtistName(
@@ -112,6 +123,8 @@ export default {
     formatCreateArgs (fields) {
       return {
         otherProfileId: this.profileId,
+        communityId: this.communityId,
+        byCommunity: !!fields.community,
         content: fields.content,
         tracks: this.tracksFormatted,
         images: this.imagesFormatted
diff --git a/src/components/containers/forms/post/BasePostUpdateFormContainer.vue b/src/components/containers/forms/post/BasePostUpdateFormContainer.vue
index 4bd2d010c..ecdfe081b 100644
--- a/src/components/containers/forms/post/BasePostUpdateFormContainer.vue
+++ b/src/components/containers/forms/post/BasePostUpdateFormContainer.vue
@@ -12,7 +12,8 @@
 import BaseFormContainer
   from '*/components/containers/forms/BaseFormContainer.vue'
 import { postFormOptions } from '*/helpers/data/plugins/semantic'
-import updatePost from '*/helpers/actions/api/post/update'
+import updateProfilePost from '*/helpers/actions/api/profile/post/update'
+import updateCommunityPost from '*/helpers/actions/api/community/post/update'
 import { artistName as formatArtistName } from '*/helpers/formatters'
 
 export default {
@@ -21,8 +22,8 @@ export default {
     BaseFormContainer
   },
   props: {
-    postId: {
-      type: String,
+    postData: {
+      type: Object,
       required: true
     },
     tracks: {
@@ -39,16 +40,24 @@ export default {
     }
   },
   emits: [
-    'postDataChange'
+    'success'
   ],
   data () {
     return {
-      postData: null,
       error: null,
       isLoading: false
     }
   },
   computed: {
+    postId () {
+      return this.postData.id
+    },
+    postType () {
+      return this.postData.post_type
+    },
+    communityId () {
+      return this.postData.community?.id
+    },
     options () {
       return postFormOptions({
         onSuccess: this.handleSuccess
@@ -60,18 +69,11 @@ export default {
       )
     },
     imagesFormatted () {
-      if (this.images.length) {
-        return this.images.map(
-          this.formatImage
-        )
-      } else {
-        return 'DELETED'
-      }
+      return this.images.map(
+        this.formatImage
+      )
     }
   },
-  watch: {
-    postData: 'handlePostDataChange'
-  },
   methods: {
     handleSuccess (event, fields) {
       event.preventDefault()
@@ -93,13 +95,22 @@ export default {
         )
       }
     },
-    handlePostDataChange (value) {
-      this.$emit(
-        'postDataChange',
-        value
-      )
+    updateProfilePost,
+    updateCommunityPost,
+    updatePost (args) {
+      switch (this.postType) {
+        case 'profile':
+          return this.updateProfilePost(
+            args
+          )
+        case 'community':
+          return this.updateCommunityPost(
+            args
+          )
+        default:
+          return null
+      }
     },
-    updatePost,
     formatTrack (trackData) {
       const artistName =
         formatArtistName(
@@ -119,7 +130,9 @@ export default {
     },
     formatUpdateArgs (fields) {
       return {
+        communityId: this.communityId,
         postId: this.postId,
+        byCommunity: !!fields.community,
         content: fields.content,
         tracks: this.tracksFormatted,
         images: this.imagesFormatted
diff --git a/src/components/containers/lists/BasePaginatedListContainer.vue b/src/components/containers/lists/BasePaginatedListContainer.vue
index f68b2c52d..c70008c52 100644
--- a/src/components/containers/lists/BasePaginatedListContainer.vue
+++ b/src/components/containers/lists/BasePaginatedListContainer.vue
@@ -363,13 +363,13 @@ export default {
     handleClientPageCollectionChange (value) {
       if (value) {
         if (this.isFocusable) {
-          this.$emit('focus')
+          setTimeout(() => {
+            this.$emit('focus')
+          }, 0)
         }
 
         if (!this.isCollectionFull) {
-          this.$nextTick(() => {
-            this.fetchData()
-          })
+          this.fetchData()
         }
       }
     },
diff --git a/src/components/containers/pages/community/BaseCommunityPageContainer.vue b/src/components/containers/pages/community/BaseCommunityPageContainer.vue
index 89138d235..8cbbea0e8 100644
--- a/src/components/containers/pages/community/BaseCommunityPageContainer.vue
+++ b/src/components/containers/pages/community/BaseCommunityPageContainer.vue
@@ -6,6 +6,7 @@
   >
     <slot
       :communityData="communityData"
+      :communityCreatorId="communityCreatorId"
       :isLoading="isLoading"
       :error="error"
       :fetchData="fetchData"
@@ -72,6 +73,9 @@ export default {
       return {
         communityId: this.communityId
       }
+    },
+    communityCreatorId () {
+      return this.communityData?.creator?.id?.toString()
     }
   },
   watch: {
diff --git a/src/components/containers/pages/community/posts/BaseCommunityPostsPageContainer.vue b/src/components/containers/pages/community/posts/BaseCommunityPostsPageContainer.vue
new file mode 100644
index 000000000..c0719ef12
--- /dev/null
+++ b/src/components/containers/pages/community/posts/BaseCommunityPostsPageContainer.vue
@@ -0,0 +1,104 @@
+<template>
+  <BasePageContainer
+    :responseData="communityData"
+    :isLoading="isLoading"
+    :error="error"
+  >
+    <slot
+      :communityData="communityData"
+      :communityCreatorId="communityCreatorId"
+      :isLoading="isLoading"
+      :error="error"
+      :fetchData="fetchData"
+      :handleRefresh="handleRefresh"
+    ></slot>
+  </BasePageContainer>
+</template>
+
+<script>
+import BasePageContainer
+  from '*/components/containers/pages/BasePageContainer.vue'
+import navigationMixin from '*/mixins/navigationMixin'
+import formatCommunityPageNavigation
+  from '*/helpers/formatters/navigation/community'
+import formatCommunityPostsPageTab
+  from '*/helpers/formatters/tabs/community/posts'
+import getCommunityPosts from '*/helpers/actions/api/community/get'
+
+export default {
+  name: 'BaseCommunityPostsPageContainer',
+  components: {
+    BasePageContainer
+  },
+  mixins: [
+    navigationMixin
+  ],
+  props: {
+    communityId: {
+      type: String,
+      required: true
+    },
+    limit: Number
+  },
+  data () {
+    return {
+      error: null,
+      communityData: null,
+      isLoading: false
+    }
+  },
+  computed: {
+    navigationSections () {
+      return formatCommunityPageNavigation(
+        this.navigationData
+      )
+    },
+    navigationData () {
+      return {
+        communityId: this.communityId,
+        communityTitle:
+          this.communityTitleFetched,
+        scope: 'posts'
+      }
+    },
+    communityTitleFetched () {
+      return this.communityData?.title
+    },
+    postsArgs () {
+      return {
+        communityId: this.communityId,
+        scope: 'posts',
+        limit: this.limit
+      }
+    },
+    tabData () {
+      return formatCommunityPostsPageTab(
+        this.navigationData
+      )
+    },
+    communityCreatorId () {
+      return this.communityData?.creator?.id?.toString()
+    }
+  },
+  watch: {
+    communityData: 'handleNavigationDataChange'
+  },
+  mounted () {
+    this.fetchData()
+  },
+  methods: {
+    handleRefresh (page) {
+      this.fetchData(page)
+    },
+    getCommunityPosts,
+    fetchData (page) {
+      this.getCommunityPosts({
+        ...this.postsArgs,
+        page
+      })
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped></style>
diff --git a/src/components/containers/segments/conversation/BaseConversationSegmentContainer.vue b/src/components/containers/segments/conversation/BaseConversationSegmentContainer.vue
index cd6bd93ac..beaa00d8b 100644
--- a/src/components/containers/segments/conversation/BaseConversationSegmentContainer.vue
+++ b/src/components/containers/segments/conversation/BaseConversationSegmentContainer.vue
@@ -62,9 +62,7 @@ export default {
       })
     },
     focus () {
-      this.$nextTick(() => {
-        this.$refs.segment.focus()
-      })
+      this.$refs.segment.focus()
     }
   }
 }
diff --git a/src/components/containers/segments/playlist/BasePlaylistSegmentContainer.vue b/src/components/containers/segments/playlist/BasePlaylistSegmentContainer.vue
index d0ae9df76..b25f495d5 100644
--- a/src/components/containers/segments/playlist/BasePlaylistSegmentContainer.vue
+++ b/src/components/containers/segments/playlist/BasePlaylistSegmentContainer.vue
@@ -70,9 +70,7 @@ export default {
       })
     },
     focus () {
-      this.$nextTick(() => {
-        this.$refs.segment.focus()
-      })
+      this.$refs.segment.focus()
     }
   }
 }
diff --git a/src/components/dropdowns/BaseDropdown.vue b/src/components/dropdowns/BaseDropdown.vue
index d5a2041c5..5c0896007 100644
--- a/src/components/dropdowns/BaseDropdown.vue
+++ b/src/components/dropdowns/BaseDropdown.vue
@@ -3,6 +3,7 @@
     ref="dropdown"
     :isSelection="isSelection"
     :isOnlyIcon="isOnlyIcon"
+    :menuDirection="menuDirection"
     @change="handleChange"
   >
     <div
@@ -39,9 +40,13 @@ export default {
       type: Array,
       required: true
     },
+    isSelection: {
+      type: Boolean,
+      default: true
+    },
     selected: String,
-    isSelection: Boolean,
-    isOnlyIcon: Boolean
+    isOnlyIcon: Boolean,
+    menuDirection: String
   },
   computed: {
     optionsCollection () {
diff --git a/src/components/dropdowns/BaseOptionsDropdown/DeleteOption.vue b/src/components/dropdowns/BaseOptionsDropdown/DeleteOption.vue
index 2f34dde30..bf3a0feea 100644
--- a/src/components/dropdowns/BaseOptionsDropdown/DeleteOption.vue
+++ b/src/components/dropdowns/BaseOptionsDropdown/DeleteOption.vue
@@ -3,7 +3,8 @@
     class="item"
     @click="handleClick"
   >
-    <i class="red close icon"></i>
+    <i class="trash alternate outline icon"></i>
+
     {{ deleteText }}
   </div>
 </template>
diff --git a/src/components/fields/BaseContentField.vue b/src/components/fields/BaseContentField.vue
index 243914868..50ee8428f 100644
--- a/src/components/fields/BaseContentField.vue
+++ b/src/components/fields/BaseContentField.vue
@@ -5,6 +5,7 @@
     rows="4"
     :placeholder="contentText"
     :value="value"
+    @keypress.ctrl.enter="handleCtrlEnter"
   ></textarea>
 </template>
 
@@ -14,6 +15,9 @@ export default {
   props: {
     value: String
   },
+  emits: [
+    'submit'
+  ],
   computed: {
     contentText () {
       return this.$t(
@@ -22,6 +26,9 @@ export default {
     }
   },
   methods: {
+    handleCtrlEnter () {
+      this.$emit('submit')
+    },
     focus () {
       this.$refs.input.focus()
     },
diff --git a/src/components/fields/BaseImageField.vue b/src/components/fields/BaseImageField.vue
index c7a60be6f..2ed3a4e48 100644
--- a/src/components/fields/BaseImageField.vue
+++ b/src/components/fields/BaseImageField.vue
@@ -9,8 +9,9 @@
 
       <label for="image-input">
         <BaseButton
-          class="compact image-add-button"
-          :text="addText"
+          class="basic compact image-add-button"
+          icon="image"
+          :text="uploadText"
         />
       </label>
 
@@ -58,9 +59,9 @@ export default {
     }
   },
   computed: {
-    addText () {
+    uploadText () {
       return this.$t(
-        'forms.fields.image'
+        'actions.upload'
       )
     },
     deleteText () {
diff --git a/src/components/fields/post/BasePostAsCommunityField.vue b/src/components/fields/post/BasePostAsCommunityField.vue
new file mode 100644
index 000000000..0162948b5
--- /dev/null
+++ b/src/components/fields/post/BasePostAsCommunityField.vue
@@ -0,0 +1,41 @@
+<template>
+  <div
+    ref="checkbox"
+    class="ui checkbox main-as-community-checkbox"
+  >
+    <input
+      type="checkbox"
+      name="community"
+      :checked="isChecked"
+    >
+
+    <label>
+      {{ asCommunityText }}
+    </label>
+  </div>
+</template>
+
+<script>
+import { setCheckbox } from '*/helpers/actions/plugins/semantic'
+
+export default {
+  name: 'BasePostAsCommunityField',
+  props: {
+    isChecked: Boolean
+  },
+  computed: {
+    asCommunityText () {
+      return this.$t(
+        'forms.fields.asCommunity'
+      )
+    }
+  },
+  mounted () {
+    setCheckbox(
+      this.$refs.checkbox
+    )
+  }
+}
+</script>
+
+<style lang="sass" scoped></style>
diff --git a/src/components/fields/profile/BaseProfileImageField.vue b/src/components/fields/profile/BaseProfileImageField.vue
index 7b549455c..e371e5a97 100644
--- a/src/components/fields/profile/BaseProfileImageField.vue
+++ b/src/components/fields/profile/BaseProfileImageField.vue
@@ -9,15 +9,16 @@
 
       <label for="profile-image-input">
         <BaseButton
-          class="compact image-add-button"
-          :text="addText"
+          class="basic compact image-add-button"
+          icon="image"
+          :text="uploadText"
         />
       </label>
 
       <BaseButton
         v-if="imageUrl"
         class="red basic compact small delete-button"
-        icon="close"
+        icon="trash alternate outline"
         :text="deleteText"
         @click="handleDeleteButtonClick"
       />
@@ -54,9 +55,9 @@ export default {
     }
   },
   computed: {
-    addText () {
+    uploadText () {
       return this.$t(
-        'forms.fields.image'
+        'actions.upload'
       )
     },
     deleteText () {
diff --git a/src/components/fields/profile/BaseProfileRememberField.vue b/src/components/fields/profile/BaseProfileRememberField.vue
index 8dd04b71c..7fd9b2c52 100644
--- a/src/components/fields/profile/BaseProfileRememberField.vue
+++ b/src/components/fields/profile/BaseProfileRememberField.vue
@@ -24,7 +24,7 @@ export default {
   computed: {
     rememberText () {
       return this.$t(
-        'forms.remember'
+        'forms.fields.remember'
       )
     }
   },
diff --git a/src/components/forms/BaseFormAddButtonsSection.vue b/src/components/forms/BaseFormAddButtonsSection.vue
index bc5bc8061..0a07acce8 100644
--- a/src/components/forms/BaseFormAddButtonsSection.vue
+++ b/src/components/forms/BaseFormAddButtonsSection.vue
@@ -1,24 +1,29 @@
 <template>
-  <div class="add-buttons">
-    <TracksButton
-      :tracks="tracks"
-      @change="handleTracksChange"
-    />
+  <div class="add-buttons-container">
+    <BaseButtonsContainer class="basic">
+      <TracksButton
+        :tracks="tracks"
+        @change="handleTracksChange"
+      />
 
-    <ImagesButton
-      :images="images"
-      @change="handleImagesChange"
-    />
+      <ImagesButton
+        :images="images"
+        @change="handleImagesChange"
+      />
+    </BaseButtonsContainer>
   </div>
 </template>
 
 <script>
+import BaseButtonsContainer
+  from '*/components/containers/buttons/BaseButtonsContainer.vue'
 import TracksButton from './BaseFormAddButtonsSection/TracksButton.vue'
 import ImagesButton from './BaseFormAddButtonsSection/ImagesButton.vue'
 
 export default {
   name: 'BaseFormAddButtonsSection',
   components: {
+    BaseButtonsContainer,
     TracksButton,
     ImagesButton
   },
diff --git a/src/components/forms/BaseFormAddButtonsSection/ImagesButton.vue b/src/components/forms/BaseFormAddButtonsSection/ImagesButton.vue
index 86456f997..db8a02783 100644
--- a/src/components/forms/BaseFormAddButtonsSection/ImagesButton.vue
+++ b/src/components/forms/BaseFormAddButtonsSection/ImagesButton.vue
@@ -1,14 +1,14 @@
 <template>
-  <label>
-    <BaseButton
-      class="compact"
-      icon="image"
-    />
+  <BaseButton
+    class="compact"
+    icon="image"
+    @click="handleClick"
+  />
 
-    <BaseImageInput
-      @change="handleImageChange"
-    />
-  </label>
+  <BaseImageInput
+    ref="input"
+    @change="handleImageChange"
+  />
 </template>
 
 <script>
@@ -33,6 +33,9 @@ export default {
     'change'
   ],
   methods: {
+    handleClick () {
+      this.$refs.input.show()
+    },
     handleImageChange (value) {
       const images = [
         ...this.images,
diff --git a/src/components/inputs/BaseImageInput.vue b/src/components/inputs/BaseImageInput.vue
index 6232b2d06..656d91a20 100644
--- a/src/components/inputs/BaseImageInput.vue
+++ b/src/components/inputs/BaseImageInput.vue
@@ -1,5 +1,6 @@
 <template>
   <input
+    ref="input"
     class="main-image-input"
     type="file"
     name="image"
@@ -53,6 +54,9 @@ export default {
         image
       )
     },
+    show () {
+      this.$refs.input.click()
+    },
     processImage (file) {
       const reader = new FileReader()
 
diff --git a/src/components/layout/modals/TheSearchModal/SearchContent/SearchSourceSelect.vue b/src/components/layout/modals/TheSearchModal/SearchContent/SearchSourceSelect.vue
index a57be773e..1bf041101 100644
--- a/src/components/layout/modals/TheSearchModal/SearchContent/SearchSourceSelect.vue
+++ b/src/components/layout/modals/TheSearchModal/SearchContent/SearchSourceSelect.vue
@@ -2,6 +2,7 @@
   <BaseDropdown
     class="floating scrolling scope-select-container"
     selected="lastfm"
+    menuDirection="left"
     :options="options"
     :isSelection="false"
     isOnlyIcon
diff --git a/src/components/layout/modals/TheSettingsModal/AppSettings/DataOptions/ClearCacheOption.vue b/src/components/layout/modals/TheSettingsModal/AppSettings/DataOptions/ClearCacheOption.vue
index 34fc09231..3c9a6bbfd 100644
--- a/src/components/layout/modals/TheSettingsModal/AppSettings/DataOptions/ClearCacheOption.vue
+++ b/src/components/layout/modals/TheSettingsModal/AppSettings/DataOptions/ClearCacheOption.vue
@@ -2,6 +2,8 @@
   <div class="content">
     <div class="header">
       <BaseButton
+        class="basic red"
+        icon="trash alternate outline"
         :text="clearText"
         :class="{
           loading: isLoading,
diff --git a/src/components/layout/modals/TheSettingsModal/AppSettings/DataOptions/ClearSearchHistoryOption.vue b/src/components/layout/modals/TheSettingsModal/AppSettings/DataOptions/ClearSearchHistoryOption.vue
index efe03b36e..f940f7378 100644
--- a/src/components/layout/modals/TheSettingsModal/AppSettings/DataOptions/ClearSearchHistoryOption.vue
+++ b/src/components/layout/modals/TheSettingsModal/AppSettings/DataOptions/ClearSearchHistoryOption.vue
@@ -2,6 +2,8 @@
   <div class="content">
     <div class="header">
       <BaseButton
+        class="basic red"
+        icon="trash alternate outline"
         :text="clearText"
         :class="{
           loading: isLoading,
diff --git a/src/components/links/BaseLink.vue b/src/components/links/BaseLink.vue
index b67f76e6f..2172ad9e2 100644
--- a/src/components/links/BaseLink.vue
+++ b/src/components/links/BaseLink.vue
@@ -4,7 +4,7 @@
     :to="link"
     @click.exact.stop="handleClick"
     @click.ctrl.exact.stop="handleCtrlClick"
-    @auxclick="handleMiddleClick"
+    @auxclick.exact.stop="handleAuxClick"
   >
     <span
       v-html="text"
@@ -40,7 +40,7 @@ export default {
     handleCtrlClick () {
       this.openNewTab()
     },
-    handleMiddleClick () {
+    handleAuxClick () {
       this.openNewTab()
     },
     openNewTab () {
diff --git a/src/components/lists/communities/BaseCommunitiesSimpleList/CommunityItem.vue b/src/components/lists/communities/BaseCommunitiesSimpleList/CommunityItem.vue
index 424b1ba0b..830f6555f 100644
--- a/src/components/lists/communities/BaseCommunitiesSimpleList/CommunityItem.vue
+++ b/src/components/lists/communities/BaseCommunitiesSimpleList/CommunityItem.vue
@@ -36,8 +36,8 @@ import BaseHeader from '*/components/BaseHeader.vue'
 import BaseOptionsDropdown
   from '*/components/dropdowns/BaseOptionsDropdown.vue'
 import {
-  community as formatCommunityLink
-} from '*/helpers/formatters/links/communities'
+  main as formatCommunityMainLink
+} from '*/helpers/formatters/links/community'
 import { number as formatNumber } from '*/helpers/formatters'
 
 export default {
@@ -56,7 +56,7 @@ export default {
   },
   computed: {
     communityLink () {
-      return formatCommunityLink({
+      return formatCommunityMainLink({
         communityId: this.communityId
       })
     },
diff --git a/src/components/lists/messages/BaseMessagesSimpleList.vue b/src/components/lists/messages/BaseMessagesSimpleList.vue
index f11115bf8..c5ac3dd00 100644
--- a/src/components/lists/messages/BaseMessagesSimpleList.vue
+++ b/src/components/lists/messages/BaseMessagesSimpleList.vue
@@ -1,17 +1,22 @@
 <template>
-  <MessageItem
-    v-for="messageData in messages"
-    :key="messageData.uuid"
-    :messageData="messageData"
-  />
+  <BaseListContainer>
+    <MessageItem
+      v-for="messageData in messages"
+      :key="messageData.uuid"
+      :messageData="messageData"
+    />
+  </BaseListContainer>
 </template>
 
 <script>
+import BaseListContainer
+  from '*/components/containers/lists/BaseListContainer.vue'
 import MessageItem from './BaseMessagesSimpleList/MessageItem.vue'
 
 export default {
   name: 'BaseMessagesSimpleList',
   components: {
+    BaseListContainer,
     MessageItem
   },
   props: {
diff --git a/src/components/lists/messages/BaseMessagesSimpleList/MessageItem.vue b/src/components/lists/messages/BaseMessagesSimpleList/MessageItem.vue
index 4ab1a4165..419d3d3fc 100644
--- a/src/components/lists/messages/BaseMessagesSimpleList/MessageItem.vue
+++ b/src/components/lists/messages/BaseMessagesSimpleList/MessageItem.vue
@@ -1,42 +1,44 @@
 <template>
-  <BaseSegmentContainer
-    class="main-simple-list-item main-message-item"
-  >
-    <BaseImage
-      class="small circular bordered"
-      model="profile"
-      :image="imageData?.extrasmall"
-    />
-
-    <div class="content">
-      <BaseProfileNickname
-        :profileData="profileData"
-      />
-
-      <BaseTimestamp
-        class="description"
-        :created="created"
+  <div class="item">
+    <BaseSegmentContainer
+      class="main-simple-list-item main-message-item"
+    >
+      <BaseImage
+        class="small circular bordered"
+        model="profile"
+        :image="imageData?.extrasmall"
       />
 
-      <div class="content-container">
-        <div class="text main-text-container">
-          {{ content }}
-        </div>
-
-        <BaseImagesSection
-          v-if="images"
-          class="content-section"
-          :images="images"
+      <div class="content">
+        <BaseProfileNickname
+          :profileData="profileData"
         />
 
-        <BaseTracksSection
-          v-if="tracks"
-          class="content-section"
-          :tracks="tracks"
+        <BaseTimestamp
+          class="description"
+          :created="created"
         />
+
+        <div class="content-container">
+          <div class="text main-text-container">
+            {{ content }}
+          </div>
+
+          <BaseImagesSection
+            v-if="images"
+            class="content-section"
+            :images="images"
+          />
+
+          <BaseTracksSection
+            v-if="tracks"
+            class="content-section"
+            :tracks="tracks"
+          />
+        </div>
       </div>
-    </div>
-  </BaseSegmentContainer>
+    </BaseSegmentContainer>
+  </div>
 </template>
 
 <script>
diff --git a/src/components/lists/posts/BasePostsSimpleList.vue b/src/components/lists/posts/BasePostsSimpleList.vue
index a011a6788..17605a289 100644
--- a/src/components/lists/posts/BasePostsSimpleList.vue
+++ b/src/components/lists/posts/BasePostsSimpleList.vue
@@ -5,6 +5,7 @@
       :key="postData.uuid"
       :postData="postData"
       :profileId="profileId"
+      :communityCreatorId="communityCreatorId"
     />
   </BaseListContainer>
 </template>
@@ -27,7 +28,8 @@ export default {
         return []
       }
     },
-    profileId: String
+    profileId: String,
+    communityCreatorId: String
   }
 }
 </script>
diff --git a/src/components/lists/posts/BasePostsSimpleList/PostItem.vue b/src/components/lists/posts/BasePostsSimpleList/PostItem.vue
index 92d16c92f..c86c31fd9 100644
--- a/src/components/lists/posts/BasePostsSimpleList/PostItem.vue
+++ b/src/components/lists/posts/BasePostsSimpleList/PostItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="item main-simple-list-item"
+    class="item main-simple-list-item main-post-item"
     :class="{ disabled: isDeleted }"
   >
     <BaseDeletedBlock
@@ -9,44 +9,26 @@
     />
     <template v-else>
       <BaseImage
-        class="small circular bordered"
-        model="profile"
+        class="small bordered"
+        :class="imageClass"
+        :model="imageModel"
         :image="imageData?.extrasmall"
       />
 
       <div class="content">
-        <div class="post-top-section">
-          <div class="post-nickname-timestamp-block">
-            <BaseProfileNickname
-              :profileData="profileData"
-            />
+        <CommunityTitle
+          v-if="isByCommunity"
+          :communityData="communityData"
+        />
+        <BaseProfileNickname
+          v-else
+          :profileData="profileData"
+        />
 
-            <BaseTimestamp
-              class="description"
-              :created="created"
-            />
-          </div>
-
-          <BaseOptionsDropdown
-            v-if="isWithOptions"
-            isWithEditOption
-            isWithDeleteOption
-            @edit="handleEditOptionClick"
-            @delete="handleDeleteOptionClick"
-          />
-
-          <BasePostUpdateModal
-            ref="updateModal"
-            :postData="postData"
-            @updated="handleUpdated"
-          />
-
-          <BasePostDeleteModal
-            ref="deleteModal"
-            :postData="postData"
-            @deleted="handleDeleted"
-          />
-        </div>
+        <BaseTimestamp
+          class="description"
+          :created="created"
+        />
 
         <div class="content-container">
           <div
@@ -69,6 +51,27 @@
           />
         </div>
       </div>
+
+      <BaseOptionsDropdown
+        v-if="isWithOptions"
+        :isWithEditOption="isWithEditOption"
+        isWithDeleteOption
+        @edit="handleEditOptionClick"
+        @delete="handleDeleteOptionClick"
+      />
+
+      <BasePostUpdateModal
+        ref="updateModal"
+        :postData="postData"
+        :isWithAsCommunityOption="isCommunityCreator"
+        @updated="handleUpdated"
+      />
+
+      <BasePostDeleteModal
+        ref="deleteModal"
+        :postData="postData"
+        @deleted="handleDeleted"
+      />
     </template>
   </div>
 </template>
@@ -77,17 +80,18 @@
 import { mapState } from 'vuex'
 import BaseDeletedBlock from '*/components/BaseDeletedBlock.vue'
 import BaseImage from '*/components/images/BaseImage.vue'
+import CommunityTitle from './PostItem/CommunityTitle.vue'
 import BaseProfileNickname
   from '*/components/models/profile/BaseProfileNickname.vue'
 import BaseTimestamp from '*/components/BaseTimestamp.vue'
+import BaseImagesSection from '*/components/BaseImagesSection.vue'
+import BaseTracksSection from '*/components/BaseTracksSection.vue'
 import BaseOptionsDropdown
   from '*/components/dropdowns/BaseOptionsDropdown.vue'
 import BasePostUpdateModal
   from '*/components/modals/post/BasePostUpdateModal.vue'
 import BasePostDeleteModal
   from '*/components/modals/post/BasePostDeleteModal.vue'
-import BaseImagesSection from '*/components/BaseImagesSection.vue'
-import BaseTracksSection from '*/components/BaseTracksSection.vue'
 import { setToast } from '*/helpers/actions/plugins/semantic'
 
 export default {
@@ -95,13 +99,14 @@ export default {
   components: {
     BaseDeletedBlock,
     BaseImage,
+    CommunityTitle,
     BaseProfileNickname,
     BaseTimestamp,
+    BaseImagesSection,
+    BaseTracksSection,
     BaseOptionsDropdown,
     BasePostUpdateModal,
-    BasePostDeleteModal,
-    BaseImagesSection,
-    BaseTracksSection
+    BasePostDeleteModal
   },
   inject: [
     'findPaginationItem',
@@ -112,14 +117,22 @@ export default {
       type: Object,
       required: true
     },
-    profileId: String
+    profileId: String,
+    communityCreatorId: String
   },
   computed: {
     ...mapState('profile', {
       profileInfo: 'info'
     }),
     imageData () {
-      return this.profileData.image
+      if (this.isByCommunity) {
+        return this.communityData.image
+      } else {
+        return this.profileData.image
+      }
+    },
+    communityData () {
+      return this.postData.community
     },
     profileData () {
       return this.postData.profile
@@ -129,11 +142,12 @@ export default {
     },
     isWithOptions () {
       return (
-        this.isPostOwner ||
-          this.isPageOwner
+        this.isPostCreator ||
+          this.isPageOwner ||
+          this.isCommunityCreator
       )
     },
-    isPostOwner () {
+    isPostCreator () {
       return (
         this.currentProfileId ===
           this.postProfileId
@@ -151,6 +165,12 @@ export default {
           this.profileId
       )
     },
+    isCommunityCreator () {
+      return (
+        this.currentProfileId ===
+          this.communityCreatorId
+      )
+    },
     updatedMessage () {
       return this.$t(
         'notifications.updated.post'
@@ -175,6 +195,26 @@ export default {
     },
     uuid () {
       return this.postData.uuid
+    },
+    isWithEditOption () {
+      return this.isPostCreator
+    },
+    isByCommunity () {
+      return this.postData.by_community
+    },
+    imageClass () {
+      if (this.isByCommunity) {
+        return 'rounded'
+      } else {
+        return 'circular'
+      }
+    },
+    imageModel () {
+      if (this.isByCommunity) {
+        return 'community'
+      } else {
+        return 'profile'
+      }
     }
   },
   methods: {
@@ -207,13 +247,4 @@ export default {
 }
 </script>
 
-<style lang="sass" scoped>
-.main-simple-list-item
-  @extend .align-items-start
-
-.post-top-section
-  @extend .d-flex
-
-.post-nickname-timestamp-block
-  @extend .flex-full
-</style>
+<style lang="sass" scoped></style>
diff --git a/src/components/lists/posts/BasePostsSimpleList/PostItem/CommunityTitle.vue b/src/components/lists/posts/BasePostsSimpleList/PostItem/CommunityTitle.vue
new file mode 100644
index 000000000..31e092c81
--- /dev/null
+++ b/src/components/lists/posts/BasePostsSimpleList/PostItem/CommunityTitle.vue
@@ -0,0 +1,50 @@
+<template>
+  <BaseHeaderContainer :tag="tag">
+    <BaseLink
+      :link="communityMainLink"
+      :text="communityTitle"
+    />
+  </BaseHeaderContainer>
+</template>
+
+<script>
+import BaseHeaderContainer
+  from '*/components/containers/BaseHeaderContainer.vue'
+import BaseLink from '*/components/links/BaseLink.vue'
+import {
+  main as formatCommunityMainLink
+} from '*/helpers/formatters/links/community'
+
+export default {
+  name: 'CommunityTitle',
+  components: {
+    BaseHeaderContainer,
+    BaseLink
+  },
+  props: {
+    communityData: {
+      type: Object,
+      required: true
+    },
+    tag: {
+      type: String,
+      default: 'h4'
+    }
+  },
+  computed: {
+    communityMainLink () {
+      return formatCommunityMainLink({
+        communityId: this.communityId
+      })
+    },
+    communityId () {
+      return this.communityData.id
+    },
+    communityTitle () {
+      return this.communityData.title
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped></style>
diff --git a/src/components/modals/BaseDeleteModal.vue b/src/components/modals/BaseDeleteModal.vue
index 28630bcef..343c578fb 100644
--- a/src/components/modals/BaseDeleteModal.vue
+++ b/src/components/modals/BaseDeleteModal.vue
@@ -22,12 +22,13 @@
 
     <div class="actions">
       <BaseButton
-        class="cancel"
+        class="basic cancel"
         :text="cancelText"
       />
 
       <BaseButton
         class="red"
+        icon="trash alternate outline"
         :text="deleteText"
         :class="{ loading: isLoading }"
         @click="handleDeleteButtonClick"
diff --git a/src/components/modals/post/BasePostDeleteModal.vue b/src/components/modals/post/BasePostDeleteModal.vue
index 1c02ef6c6..c9b25d1c8 100644
--- a/src/components/modals/post/BasePostDeleteModal.vue
+++ b/src/components/modals/post/BasePostDeleteModal.vue
@@ -10,7 +10,8 @@
 
 <script>
 import BaseDeleteModal from '*/components/modals/BaseDeleteModal.vue'
-import deletePost from '*/helpers/actions/api/post/delete'
+import deleteProfilePost from '*/helpers/actions/api/profile/post/delete'
+import deleteCommunityPost from '*/helpers/actions/api/community/post/delete'
 
 export default {
   name: 'BasePostDeleteModal',
@@ -36,17 +37,22 @@ export default {
     postId () {
       return this.postData.id
     },
+    postType () {
+      return this.postData.post_type
+    },
+    communityId () {
+      return this.postData.community?.id
+    },
     deleteArgs () {
       return {
+        communityId: this.communityId,
         postId: this.postId
       }
     }
   },
   methods: {
     handleDeleteButtonClick () {
-      this.deletePost(
-        this.deleteArgs
-      ).then(
+      this.deletePost().then(
         this.handleSuccess
       )
     },
@@ -55,7 +61,22 @@ export default {
 
       this.$emit('deleted')
     },
-    deletePost,
+    deleteProfilePost,
+    deleteCommunityPost,
+    deletePost () {
+      switch (this.postType) {
+        case 'profile':
+          return this.deleteProfilePost(
+            this.deleteArgs
+          )
+        case 'community':
+          return this.deleteCommunityPost(
+            this.deleteArgs
+          )
+        default:
+          return null
+      }
+    },
     show () {
       this.$refs.modal.show()
     }
diff --git a/src/components/modals/post/BasePostUpdateModal.vue b/src/components/modals/post/BasePostUpdateModal.vue
index e00744ed3..b03fb2ff0 100644
--- a/src/components/modals/post/BasePostUpdateModal.vue
+++ b/src/components/modals/post/BasePostUpdateModal.vue
@@ -3,14 +3,15 @@
     <div class="scrolling content">
       <BasePostUpdateFormContainer
         class="main-post-form"
-        :postId="postId"
+        :postData="postData"
         :tracks="tracks"
         :images="images"
-        @postDataChange="handlePostDataChange"
+        @success="handleSuccess"
       >
         <BaseContentField
           ref="input"
           :value="postContent"
+          @submit="handleSubmit"
         />
 
         <div
@@ -38,7 +39,13 @@
             @imagesChange="handleImagesChange"
           />
 
+          <BasePostAsCommunityField
+            v-if="isWithAsCommunityOption"
+            :isChecked="isByCommunity"
+          />
+
           <BaseSubmitButton
+            ref="submit"
             actionKey="save"
           />
         </div>
@@ -59,6 +66,8 @@ import BaseFormTracksSection
   from '*/components/forms/BaseFormTracksSection.vue'
 import BaseFormAddButtonsSection
   from '*/components/forms/BaseFormAddButtonsSection.vue'
+import BasePostAsCommunityField
+  from '*/components/fields/post/BasePostAsCommunityField.vue'
 import BaseSubmitButton from '*/components/buttons/BaseSubmitButton.vue'
 import { generateKey } from '*/helpers/utils'
 import { collection as formatCollection } from '*/helpers/formatters'
@@ -72,13 +81,15 @@ export default {
     BaseFormImagesSection,
     BaseFormTracksSection,
     BaseFormAddButtonsSection,
+    BasePostAsCommunityField,
     BaseSubmitButton
   },
   props: {
     postData: {
       type: Object,
       required: true
-    }
+    },
+    isWithAsCommunityOption: Boolean
   },
   emits: [
     'updated'
@@ -90,9 +101,6 @@ export default {
     }
   },
   computed: {
-    postId () {
-      return this.postData.id.toString()
-    },
     postContent () {
       return this.postData.content
     },
@@ -106,6 +114,9 @@ export default {
     },
     postTracks () {
       return this.postData.tracks || []
+    },
+    isByCommunity () {
+      return this.postData.by_community
     }
   },
   mounted () {
@@ -116,13 +127,16 @@ export default {
     this.tracks = this.tracksCollection
   },
   methods: {
+    handleSubmit () {
+      this.$refs.submit.click()
+    },
     handleTracksChange (value) {
       this.tracks = value
     },
     handleImagesChange (value) {
       this.images = value
     },
-    handlePostDataChange (value) {
+    handleSuccess (value) {
       this.$emit(
         'updated',
         value
diff --git a/src/components/modals/profile/library/BaseProfileLibraryFolderImportModal/FolderSelectSection.vue b/src/components/modals/profile/library/BaseProfileLibraryFolderImportModal/FolderSelectSection.vue
index 2b82eb23a..81b41d7c6 100644
--- a/src/components/modals/profile/library/BaseProfileLibraryFolderImportModal/FolderSelectSection.vue
+++ b/src/components/modals/profile/library/BaseProfileLibraryFolderImportModal/FolderSelectSection.vue
@@ -13,6 +13,7 @@
 
       <label for="folder-select-input">
         <BaseButton
+          class="basic"
           icon="folder open"
           :class="{ disabled: !isReset }"
           :text="selectText"
diff --git a/src/components/models/profile/BaseProfileFollowButton.vue b/src/components/models/profile/BaseProfileFollowButton.vue
index d85ea543c..3f4a27d48 100644
--- a/src/components/models/profile/BaseProfileFollowButton.vue
+++ b/src/components/models/profile/BaseProfileFollowButton.vue
@@ -6,6 +6,7 @@
       <BaseButton
         v-bind="$attrs"
         :class="{
+          basic: slotProps.isFollowing,
           primary: !slotProps.isFollowing,
           loading: slotProps.isLoading,
           disabled: slotProps.isLoading
diff --git a/src/views/profile/MainPage/PostsSegment/FormSegment.vue b/src/components/segments/posts/BasePostsFormSegment.vue
similarity index 79%
rename from src/views/profile/MainPage/PostsSegment/FormSegment.vue
rename to src/components/segments/posts/BasePostsFormSegment.vue
index 10e547fe7..db7d6299b 100644
--- a/src/views/profile/MainPage/PostsSegment/FormSegment.vue
+++ b/src/components/segments/posts/BasePostsFormSegment.vue
@@ -2,12 +2,17 @@
   <BaseSegmentContainer>
     <BasePostCreateFormContainer
       class="main-post-form"
+      :postType="postType"
       :profileId="profileId"
+      :communityId="communityId"
       :tracks="tracks"
       :images="images"
       @success="handleSuccess"
     >
-      <BaseContentField ref="input" />
+      <BaseContentField
+        ref="input"
+        @submit="handleSubmit"
+      />
 
       <div
         v-if="images.length || tracks.length"
@@ -34,7 +39,12 @@
           @imagesChange="handleImagesChange"
         />
 
+        <BasePostAsCommunityField
+          v-if="isWithAsCommunityOption"
+        />
+
         <BaseSubmitButton
+          ref="submit"
           actionKey="post"
         />
       </div>
@@ -54,10 +64,12 @@ import BaseFormTracksSection
   from '*/components/forms/BaseFormTracksSection.vue'
 import BaseFormAddButtonsSection
   from '*/components/forms/BaseFormAddButtonsSection.vue'
+import BasePostAsCommunityField
+  from '*/components/fields/post/BasePostAsCommunityField.vue'
 import BaseSubmitButton from '*/components/buttons/BaseSubmitButton.vue'
 
 export default {
-  name: 'FormSegment',
+  name: 'BasePostsFormSegment',
   components: {
     BaseSegmentContainer,
     BasePostCreateFormContainer,
@@ -65,10 +77,14 @@ export default {
     BaseFormImagesSection,
     BaseFormTracksSection,
     BaseFormAddButtonsSection,
+    BasePostAsCommunityField,
     BaseSubmitButton
   },
   props: {
-    profileId: String
+    postType: String,
+    profileId: String,
+    communityId: String,
+    isWithAsCommunityOption: Boolean
   },
   emits: [
     'success'
@@ -80,6 +96,9 @@ export default {
     }
   },
   methods: {
+    handleSubmit () {
+      this.$refs.submit.click()
+    },
     handleSuccess () {
       this.$refs.input.reset()
 
diff --git a/src/helpers/actions/api/community/post/create.js b/src/helpers/actions/api/community/post/create.js
new file mode 100644
index 000000000..f11a89806
--- /dev/null
+++ b/src/helpers/actions/api/community/post/create.js
@@ -0,0 +1,51 @@
+import axios from 'axios'
+import store from '*/plugins/store'
+
+export default function ({
+  communityId,
+  content,
+  tracks,
+  images,
+  byCommunity
+}) {
+  this.error = null
+  this.isLoading = true
+
+  const url =
+    `/communities/${communityId}/posts`
+
+  const profileId =
+    store.state.profile.info.id
+  const { token } = store.state.profile
+
+  const params = {
+    profile_id: profileId,
+    token,
+    content,
+    tracks,
+    images,
+    by_community: byCommunity
+  }
+
+  const handleSuccess = () => {
+    this.$emit('success')
+  }
+
+  const handleError = error => {
+    this.error = error
+  }
+
+  const handleFinish = () => {
+    this.isLoading = false
+  }
+
+  return axios.post(
+    url, params
+  ).then(
+    handleSuccess
+  ).catch(
+    handleError
+  ).finally(
+    handleFinish
+  )
+}
diff --git a/src/helpers/actions/api/community/post/delete.js b/src/helpers/actions/api/community/post/delete.js
new file mode 100644
index 000000000..f99702aba
--- /dev/null
+++ b/src/helpers/actions/api/community/post/delete.js
@@ -0,0 +1,37 @@
+import axios from 'axios'
+import store from '*/plugins/store'
+
+export default function ({ communityId, postId }) {
+  this.error = null
+  this.isLoading = true
+
+  const url =
+    `/communities/${communityId}/posts/${postId}`
+
+  const profileId =
+    store.state.profile.info.id
+  const { token } = store.state.profile
+
+  const params = {
+    profile_id: profileId,
+    token
+  }
+
+  const handleError = error => {
+    this.error = error
+
+    throw error
+  }
+
+  const handleFinish = () => {
+    this.isLoading = false
+  }
+
+  return axios.delete(
+    url, { params }
+  ).catch(
+    handleError
+  ).finally(
+    handleFinish
+  )
+}
diff --git a/src/helpers/actions/api/community/post/update.js b/src/helpers/actions/api/community/post/update.js
new file mode 100644
index 000000000..30a80a202
--- /dev/null
+++ b/src/helpers/actions/api/community/post/update.js
@@ -0,0 +1,55 @@
+import axios from 'axios'
+import store from '*/plugins/store'
+
+export default function ({
+  communityId,
+  postId,
+  content,
+  tracks,
+  images,
+  byCommunity
+}) {
+  this.error = null
+  this.isLoading = true
+
+  const url =
+    `/communities/${communityId}/posts/${postId}`
+
+  const profileId =
+    store.state.profile.info.id
+  const { token } = store.state.profile
+
+  const params = {
+    profile_id: profileId,
+    token,
+    content,
+    tracks,
+    images,
+    by_community: byCommunity
+  }
+
+  const handleSuccess = response => {
+    this.$emit(
+      'success',
+      response.data.post
+    )
+  }
+
+  const handleError = error => {
+    this.error = error
+  }
+
+  const handleFinish = () => {
+    this.isLoading = false
+  }
+
+  axios.patch(
+    url, params
+  ).then(
+    handleSuccess
+  ).catch(
+    handleError
+  ).finally(
+    handleFinish
+  )
+}
diff --git a/src/helpers/actions/api/profile/get.js b/src/helpers/actions/api/profile/get.js
index 2575792f4..3ddfac370 100644
--- a/src/helpers/actions/api/profile/get.js
+++ b/src/helpers/actions/api/profile/get.js
@@ -1,7 +1,7 @@
 import axios from 'axios'
 import store from '*/plugins/store'
 
-export default function ({ profileId, token, scope = '' }) {
+export default function ({ profileId, token, scope = '', page, limit }) {
   this.error = null
   this.isLoading = true
 
@@ -13,7 +13,9 @@ export default function ({ profileId, token, scope = '' }) {
     token,
     ...(otherProfileId && {
       other_profile_id: otherProfileId
-    })
+    }),
+    ...(page && { page }),
+    ...(limit && { limit })
   }
 
   const handleSuccess = response => {
diff --git a/src/helpers/actions/api/post/create.js b/src/helpers/actions/api/profile/post/create.js
similarity index 87%
rename from src/helpers/actions/api/post/create.js
rename to src/helpers/actions/api/profile/post/create.js
index bad3e7c41..88a86b6f5 100644
--- a/src/helpers/actions/api/post/create.js
+++ b/src/helpers/actions/api/profile/post/create.js
@@ -19,6 +19,10 @@ export default function ({ otherProfileId, content, tracks, images }) {
     images
   }
 
+  const handleSuccess = () => {
+    this.$emit('success')
+  }
+
   const handleError = error => {
     this.error = error
   }
@@ -29,6 +33,8 @@ export default function ({ otherProfileId, content, tracks, images }) {
 
   return axios.post(
     url, params
+  ).then(
+    handleSuccess
   ).catch(
     handleError
   ).finally(
diff --git a/src/helpers/actions/api/post/delete.js b/src/helpers/actions/api/profile/post/delete.js
similarity index 100%
rename from src/helpers/actions/api/post/delete.js
rename to src/helpers/actions/api/profile/post/delete.js
diff --git a/src/helpers/actions/api/post/update.js b/src/helpers/actions/api/profile/post/update.js
similarity index 91%
rename from src/helpers/actions/api/post/update.js
rename to src/helpers/actions/api/profile/post/update.js
index 0593978a8..2a62514e6 100644
--- a/src/helpers/actions/api/post/update.js
+++ b/src/helpers/actions/api/profile/post/update.js
@@ -19,7 +19,10 @@ export default function ({ postId, content, tracks, images }) {
   }
 
   const handleSuccess = response => {
-    this.postData = response.data.post
+    this.$emit(
+      'success',
+      response.data.post
+    )
   }
 
   const handleError = error => {
diff --git a/src/helpers/data/plugins/i18n/locales/en.json b/src/helpers/data/plugins/i18n/locales/en.json
index 8db208baa..1a87a6664 100644
--- a/src/helpers/data/plugins/i18n/locales/en.json
+++ b/src/helpers/data/plugins/i18n/locales/en.json
@@ -103,6 +103,7 @@
     "post": "Post",
     "send": "Send",
     "next": "Next",
+    "upload": "Upload",
     "from": {
       "search": "From search",
       "folder": "From folder",
@@ -202,7 +203,6 @@
       "nickname": "Nickname",
       "title": "Title",
       "description": "Description",
-      "image": "Upload image",
       "gender": "Gender",
       "birthdate": "Birth date",
       "country": "Country",
@@ -211,9 +211,10 @@
         "male": "Male",
         "female": "Female",
         "other": "Other"
-      }
+      },
+      "remember": "Remember me",
+      "asCommunity": "As community"
     },
-    "remember": "Remember me",
     "extra": "Additional info",
     "errors": {
       "notFound": "Email or password is wrong",
diff --git a/src/helpers/data/plugins/i18n/locales/ru.json b/src/helpers/data/plugins/i18n/locales/ru.json
index 12511f8a7..2f1b29f5d 100644
--- a/src/helpers/data/plugins/i18n/locales/ru.json
+++ b/src/helpers/data/plugins/i18n/locales/ru.json
@@ -103,6 +103,7 @@
     "post": "Опубликовать",
     "send": "Отправить",
     "next": "Дальше",
+    "upload": "Загрузить",
     "from": {
       "search": "Из поиска",
       "folder": "Из папки",
@@ -202,7 +203,6 @@
       "nickname": "Ник",
       "title": "Название",
       "description": "Описание",
-      "image": "Загрузить изображение",
       "gender": "Пол",
       "birthdate": "Дата рождения",
       "country": "Страна",
@@ -211,9 +211,10 @@
         "male": "Мужской",
         "female": "Женский",
         "other": "Другой"
-      }
+      },
+      "remember": "Запомнить меня",
+      "asCommunity": "От имени сообщества"
     },
-    "remember": "Запомнить меня",
     "extra": "Дополнительная информация",
     "errors": {
       "notFound": "Неверный адрес электронной почты или пароль",
diff --git a/src/helpers/data/plugins/router/routes.js b/src/helpers/data/plugins/router/routes.js
index b74fef2b8..c0f612f58 100644
--- a/src/helpers/data/plugins/router/routes.js
+++ b/src/helpers/data/plugins/router/routes.js
@@ -158,10 +158,13 @@ const ProfileCommunitiesPage = () => import(
   '*/views/profile/CommunitiesPage.vue'
 )
 const CommunitiesPage = () => import(
-  '*/views/communities/MainPage.vue'
+  '*/views/CommunitiesPage.vue'
 )
-const CommunityPage = () => import(
-  '*/views/communities/CommunityPage.vue'
+const CommunityMainPage = () => import(
+  '*/views/community/MainPage.vue'
+)
+const CommunityPostsPage = () => import(
+  '*/views/community/PostsPage.vue'
 )
 
 export default [
@@ -546,8 +549,15 @@ export default [
   {
     path: '/communities/:communityId',
     exact: true,
-    name: 'CommunityPage',
-    component: CommunityPage,
+    name: 'CommunityMainPage',
+    component: CommunityMainPage,
+    props: true
+  },
+  {
+    path: '/communities/:communityId/posts',
+    exact: true,
+    name: 'CommunityPostsPage',
+    component: CommunityPostsPage,
     props: true
   }
 ]
diff --git a/src/helpers/formatters/links.js b/src/helpers/formatters/links.js
index e40d0b562..1ec75e4ba 100644
--- a/src/helpers/formatters/links.js
+++ b/src/helpers/formatters/links.js
@@ -37,3 +37,11 @@ export const playlists = () => {
     path: 'playlists'
   }
 }
+
+export const communities = () => {
+  return {
+    name: 'CommunitiesPage',
+    params: {},
+    path: 'communities'
+  }
+}
diff --git a/src/helpers/formatters/links/communities.js b/src/helpers/formatters/links/communities.js
deleted file mode 100644
index ac205daf0..000000000
--- a/src/helpers/formatters/links/communities.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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/community.js b/src/helpers/formatters/links/community.js
new file mode 100644
index 000000000..ae28bd2a3
--- /dev/null
+++ b/src/helpers/formatters/links/community.js
@@ -0,0 +1,15 @@
+export const main = ({ communityId }) => {
+  return {
+    name: 'CommunityMainPage',
+    params: { communityId },
+    path: `communities/${communityId}`
+  }
+}
+
+export const posts = ({ communityId }) => {
+  return {
+    name: 'CommunityPostsPage',
+    params: { communityId },
+    path: `communities/${communityId}/posts`
+  }
+}
diff --git a/src/helpers/formatters/navigation/sections/communities.js b/src/helpers/formatters/navigation/sections/communities.js
index e35d2287f..6f944fbc6 100644
--- a/src/helpers/formatters/navigation/sections/communities.js
+++ b/src/helpers/formatters/navigation/sections/communities.js
@@ -1,7 +1,7 @@
 import i18n from '*/plugins/i18n'
 import {
-  main as formatCommunitiesLink
-} from '*/helpers/formatters/links/communities'
+  communities as formatCommunitiesLink
+} from '*/helpers/formatters/links'
 
 export default function ({ isActive } = {}) {
   const formatLink = () => {
diff --git a/src/helpers/formatters/navigation/sections/community.js b/src/helpers/formatters/navigation/sections/community.js
index c678220bc..b26104e06 100644
--- a/src/helpers/formatters/navigation/sections/community.js
+++ b/src/helpers/formatters/navigation/sections/community.js
@@ -1,11 +1,11 @@
 import {
-  community as formatCommunityLink
-} from '*/helpers/formatters/links/communities'
+  main as formatCommunityMainLink
+} from '*/helpers/formatters/links/community'
 
 export default function ({ communityId, communityTitle, isActive }) {
   const formatLink = () => {
     if (!isActive) {
-      return formatCommunityLink({
+      return formatCommunityMainLink({
         communityId
       })
     }
diff --git a/src/helpers/formatters/tabs/communities.js b/src/helpers/formatters/tabs/communities.js
index e12e66a03..44fdd59e5 100644
--- a/src/helpers/formatters/tabs/communities.js
+++ b/src/helpers/formatters/tabs/communities.js
@@ -1,7 +1,7 @@
 import i18n from '*/plugins/i18n'
 import {
-  main as formatCommunitiesLink
-} from '*/helpers/formatters/links/communities'
+  communities as formatCommunitiesLink
+} from '*/helpers/formatters/links'
 
 export default function () {
   const title = i18n.global.t(
diff --git a/src/helpers/formatters/tabs/community.js b/src/helpers/formatters/tabs/community.js
index 2a27f8f45..38ec057be 100644
--- a/src/helpers/formatters/tabs/community.js
+++ b/src/helpers/formatters/tabs/community.js
@@ -1,7 +1,7 @@
 import i18n from '*/plugins/i18n'
 import {
-  community as formatCommunityLink
-} from '*/helpers/formatters/links/communities'
+  main as formatCommunityMainLink
+} from '*/helpers/formatters/links/community'
 
 export default function ({ communityId, communityTitle, scope }) {
   const formatTitle = () => {
@@ -18,7 +18,7 @@ export default function ({ communityId, communityTitle, scope }) {
   const formatPath = () => {
     switch (scope) {
       default:
-        return formatCommunityLink({
+        return formatCommunityMainLink({
           communityId
         }).path
     }
diff --git a/src/helpers/formatters/tabs/community/posts.js b/src/helpers/formatters/tabs/community/posts.js
new file mode 100644
index 000000000..2bed0a402
--- /dev/null
+++ b/src/helpers/formatters/tabs/community/posts.js
@@ -0,0 +1,25 @@
+import i18n from '*/plugins/i18n'
+import {
+  posts as formatCommunityPostsLink
+} from '*/helpers/formatters/links/community'
+
+export default function ({ communityId, communityTitle }) {
+  const formatTitle = () => {
+    return i18n.global.t(
+      'navigation.model.posts',
+      { modelName: communityTitle }
+    )
+  }
+
+  const formatPath = () => {
+    return formatCommunityPostsLink({
+      communityId
+    }).path
+  }
+
+  return {
+    icon: 'edit',
+    title: formatTitle(),
+    path: formatPath()
+  }
+}
diff --git a/src/views/communities/MainPage.vue b/src/views/CommunitiesPage.vue
similarity index 98%
rename from src/views/communities/MainPage.vue
rename to src/views/CommunitiesPage.vue
index 9c68fcf5b..0d4936913 100644
--- a/src/views/communities/MainPage.vue
+++ b/src/views/CommunitiesPage.vue
@@ -54,7 +54,7 @@ import BaseCommunitiesSimpleList
   from '*/components/lists/communities/BaseCommunitiesSimpleList.vue'
 
 export default {
-  name: 'MainPage',
+  name: 'CommunitiesPage',
   components: {
     BaseCommunitiesPageContainer,
     BaseSegmentContainer,
diff --git a/src/views/community/MainPage/PostsSegment.vue b/src/views/community/MainPage/PostsSegment.vue
new file mode 100644
index 000000000..8bd9fa245
--- /dev/null
+++ b/src/views/community/MainPage/PostsSegment.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="ui raised segments main-segment-container">
+    <BaseHeaderSegment
+      scope="posts"
+      :link="headerLink"
+    />
+
+    <BasePostsFormSegment
+      postType="community"
+      :communityId="communityId"
+      :isWithAsCommunityOption="isCommunityCreator"
+      @success="handleSuccess"
+    />
+
+    <PostsListSegment
+      :key="key"
+      :communityId="communityId"
+      :communityCreatorId="communityCreatorId"
+    />
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import BaseHeaderSegment from '*/components/segments/BaseHeaderSegment.vue'
+import BasePostsFormSegment
+  from '*/components/segments/posts/BasePostsFormSegment.vue'
+import PostsListSegment from './PostsSegment/PostsListSegment.vue'
+import { generateKey } from '*/helpers/utils'
+import {
+  posts as formatCommunityPostsLink
+} from '*/helpers/formatters/links/community'
+
+export default {
+  name: 'PostsSegment',
+  components: {
+    BaseHeaderSegment,
+    BasePostsFormSegment,
+    PostsListSegment
+  },
+  props: {
+    communityId: {
+      type: String,
+      required: true
+    },
+    communityCreatorId: String
+  },
+  data () {
+    return {
+      key: null
+    }
+  },
+  computed: {
+    ...mapState('profile', {
+      profileInfo: 'info'
+    }),
+    headerLink () {
+      return formatCommunityPostsLink({
+        communityId: this.communityId
+      })
+    },
+    isCommunityCreator () {
+      return (
+        this.currentProfileId ===
+          this.communityCreatorId
+      )
+    },
+    currentProfileId () {
+      return this.profileInfo.id.toString()
+    }
+  },
+  methods: {
+    handleSuccess () {
+      this.key = generateKey()
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped>
+
+</style>
diff --git a/src/views/community/MainPage/PostsSegment/PostsListSegment.vue b/src/views/community/MainPage/PostsSegment/PostsListSegment.vue
new file mode 100644
index 000000000..42d980b33
--- /dev/null
+++ b/src/views/community/MainPage/PostsSegment/PostsListSegment.vue
@@ -0,0 +1,93 @@
+<template>
+  <BaseSegmentContainer
+    ref="segment"
+    class="posts-list-segment"
+    :isLoading="isLoading"
+  >
+    <BasePaginatedListContainer
+      ref="paginatedContainer"
+      scope="posts"
+      :isLoading="isLoading"
+      :error="error"
+      :responseData="communityData"
+      :limit="limit"
+      @focus="handleFocus"
+      @fetchData="fetchData"
+      @refresh="handleRefresh"
+    >
+      <template #default="slotProps">
+        <BasePostsSimpleList
+          :posts="slotProps.posts"
+          :communityId="communityId"
+          :communityCreatorId="communityCreatorId"
+        />
+      </template>
+    </BasePaginatedListContainer>
+  </BaseSegmentContainer>
+</template>
+
+<script>
+import BaseSegmentContainer
+  from '*/components/containers/segments/BaseSegmentContainer.vue'
+import BasePaginatedListContainer
+  from '*/components/containers/lists/BasePaginatedListContainer.vue'
+import BasePostsSimpleList
+  from '*/components/lists/posts/BasePostsSimpleList.vue'
+import getCommunityPosts from '*/helpers/actions/api/community/get'
+
+export default {
+  name: 'PostsListSegment',
+  components: {
+    BaseSegmentContainer,
+    BasePaginatedListContainer,
+    BasePostsSimpleList
+  },
+  props: {
+    communityId: {
+      type: String,
+      required: true
+    },
+    communityCreatorId: String
+  },
+  data () {
+    return {
+      communityData: null,
+      error: null,
+      isLoading: false,
+      limit: 10
+    }
+  },
+  computed: {
+    postsArgs () {
+      return {
+        communityId: this.communityId,
+        scope: 'posts',
+        limit: this.limit
+      }
+    }
+  },
+  mounted () {
+    this.fetchData()
+  },
+  methods: {
+    handleFocus () {
+      this.$refs.segment.focus()
+    },
+    handleRefresh (page) {
+      this.fetchData(page)
+    },
+    getCommunityPosts,
+    fetchData (page) {
+      this.getCommunityPosts({
+        ...this.postsArgs,
+        page
+      })
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped>
+.posts-list-segment
+  @extend .d-flex
+</style>
diff --git a/src/views/community/PostsPage.vue b/src/views/community/PostsPage.vue
new file mode 100644
index 000000000..12a430f6e
--- /dev/null
+++ b/src/views/community/PostsPage.vue
@@ -0,0 +1,73 @@
+<template>
+  <BaseCommunityPostsPageContainer
+    :communityId="communityId"
+    :limit="limit"
+  >
+    <template #default="pageSlotProps">
+      <BaseSegmentContainer
+        :class="[
+          'raised',
+          'main-segment-container',
+          'main-page-segment-container',
+          'main-paginated-page-segment-container'
+        ]"
+        :isLoading="pageSlotProps.isLoading"
+      >
+        <BasePaginatedListContainer
+          ref="paginatedContainer"
+          scope="posts"
+          :isLoading="pageSlotProps.isLoading"
+          :error="pageSlotProps.error"
+          :responseData="pageSlotProps.communityData"
+          :limit="limit"
+          @focus="handleFocus"
+          @fetchData="pageSlotProps.fetchData"
+          @refresh="pageSlotProps.handleRefresh"
+        >
+          <template #default="slotProps">
+            <BasePostsSimpleList
+              :posts="slotProps.posts"
+              :communityCreatorId="pageSlotProps.communityCreatorId"
+            />
+          </template>
+        </BasePaginatedListContainer>
+      </BaseSegmentContainer>
+    </template>
+  </BaseCommunityPostsPageContainer>
+</template>
+
+<script>
+import BaseCommunityPostsPageContainer
+  from '*/components/containers/pages/community/posts/BaseCommunityPostsPageContainer.vue'
+import BaseSegmentContainer
+  from '*/components/containers/segments/BaseSegmentContainer.vue'
+import BasePaginatedListContainer
+  from '*/components/containers/lists/BasePaginatedListContainer.vue'
+import BasePostsSimpleList
+  from '*/components/lists/posts/BasePostsSimpleList.vue'
+
+export default {
+  name: 'PostsPage',
+  components: {
+    BaseCommunityPostsPageContainer,
+    BaseSegmentContainer,
+    BasePaginatedListContainer,
+    BasePostsSimpleList
+  },
+  props: {
+    communityId: String
+  },
+  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
index bbbfe03c6..394a21843 100644
--- a/src/views/profile/CommunitiesPage.vue
+++ b/src/views/profile/CommunitiesPage.vue
@@ -57,8 +57,8 @@ import BasePaginatedListContainer
 import BaseCommunitiesSimpleList
   from '*/components/lists/communities/BaseCommunitiesSimpleList.vue'
 import {
-  main as formatCommunitiesLink
-} from '*/helpers/formatters/links/communities'
+  communities as formatCommunitiesLink
+} from '*/helpers/formatters/links'
 
 export default {
   name: 'PlaylistsPage',
diff --git a/src/views/profile/MainPage/FavoritesSegment/FavoritesTabsSegment.vue b/src/views/profile/MainPage/FavoritesSegment/FavoritesTabsSegment.vue
index 80f097951..929d35aa1 100644
--- a/src/views/profile/MainPage/FavoritesSegment/FavoritesTabsSegment.vue
+++ b/src/views/profile/MainPage/FavoritesSegment/FavoritesTabsSegment.vue
@@ -84,9 +84,7 @@ export default {
       this.focus()
     },
     focus () {
-      this.$nextTick(() => {
-        this.$refs.segment.focus()
-      })
+      this.$refs.segment.focus()
     }
   }
 }
diff --git a/src/views/profile/MainPage/InfoSegment/MessageSection.vue b/src/views/profile/MainPage/InfoSegment/MessageSection.vue
index d7d5aaf5f..5b46750f3 100644
--- a/src/views/profile/MainPage/InfoSegment/MessageSection.vue
+++ b/src/views/profile/MainPage/InfoSegment/MessageSection.vue
@@ -1,6 +1,6 @@
 <template>
   <BaseButton
-    class="primary message-button"
+    class="basic message-button"
     icon="envelope"
     :text="messageText"
     @click="handleClick"
diff --git a/src/views/profile/MainPage/LibrarySegment/LibraryTabsSegment.vue b/src/views/profile/MainPage/LibrarySegment/LibraryTabsSegment.vue
index f0abf5e35..399d76c4b 100644
--- a/src/views/profile/MainPage/LibrarySegment/LibraryTabsSegment.vue
+++ b/src/views/profile/MainPage/LibrarySegment/LibraryTabsSegment.vue
@@ -95,9 +95,7 @@ export default {
       this.focus()
     },
     focus () {
-      this.$nextTick(() => {
-        this.$refs.segment.focus()
-      })
+      this.$refs.segment.focus()
     }
   }
 }
diff --git a/src/views/profile/MainPage/PostsSegment.vue b/src/views/profile/MainPage/PostsSegment.vue
index 9edd8f2af..a606bb14b 100644
--- a/src/views/profile/MainPage/PostsSegment.vue
+++ b/src/views/profile/MainPage/PostsSegment.vue
@@ -5,7 +5,8 @@
       :link="headerLink"
     />
 
-    <FormSegment
+    <BasePostsFormSegment
+      postType="profile"
       :profileId="profileId"
       @success="handleSuccess"
     />
@@ -19,7 +20,8 @@
 
 <script>
 import BaseHeaderSegment from '*/components/segments/BaseHeaderSegment.vue'
-import FormSegment from './PostsSegment/FormSegment.vue'
+import BasePostsFormSegment
+  from '*/components/segments/posts/BasePostsFormSegment.vue'
 import PostsListSegment from './PostsSegment/PostsListSegment.vue'
 import { generateKey } from '*/helpers/utils'
 import {
@@ -30,7 +32,7 @@ export default {
   name: 'PostsSegment',
   components: {
     BaseHeaderSegment,
-    FormSegment,
+    BasePostsFormSegment,
     PostsListSegment
   },
   props: {
diff --git a/src/views/profile/PlaylistPage/ImportSegment/LibraryImportBlock.vue b/src/views/profile/PlaylistPage/ImportSegment/LibraryImportBlock.vue
index 2e56be1b1..c9187b8d2 100644
--- a/src/views/profile/PlaylistPage/ImportSegment/LibraryImportBlock.vue
+++ b/src/views/profile/PlaylistPage/ImportSegment/LibraryImportBlock.vue
@@ -1,6 +1,6 @@
 <template>
   <BaseButton
-    class="primary import-button"
+    class="basic import-button"
     icon="headphones"
     :text="libraryText"
     @click="handleClick"
diff --git a/src/views/profile/PlaylistPage/ImportSegment/SearchImportBlock.vue b/src/views/profile/PlaylistPage/ImportSegment/SearchImportBlock.vue
index de56ff709..0f5ed9378 100644
--- a/src/views/profile/PlaylistPage/ImportSegment/SearchImportBlock.vue
+++ b/src/views/profile/PlaylistPage/ImportSegment/SearchImportBlock.vue
@@ -1,6 +1,6 @@
 <template>
   <BaseButton
-    class="primary import-button"
+    class="basic import-button"
     icon="search"
     :text="searchText"
     @click="handleClick"
diff --git a/src/views/profile/library/MainPage/ImportSegment/AccountImportBlock.vue b/src/views/profile/library/MainPage/ImportSegment/AccountImportBlock.vue
index 67606c3de..b6e36eac6 100644
--- a/src/views/profile/library/MainPage/ImportSegment/AccountImportBlock.vue
+++ b/src/views/profile/library/MainPage/ImportSegment/AccountImportBlock.vue
@@ -1,6 +1,6 @@
 <template>
   <BaseButton
-    class="primary import-button"
+    class="basic import-button"
     icon="user circle"
     :class="{ disabled: !isAccountConnected }"
     :text="accountText"
diff --git a/src/views/profile/library/MainPage/ImportSegment/FolderImportBlock.vue b/src/views/profile/library/MainPage/ImportSegment/FolderImportBlock.vue
index 954ce3a39..829cfbb94 100644
--- a/src/views/profile/library/MainPage/ImportSegment/FolderImportBlock.vue
+++ b/src/views/profile/library/MainPage/ImportSegment/FolderImportBlock.vue
@@ -1,12 +1,14 @@
 <template>
   <BaseButton
-    class="primary import-button"
+    class="basic import-button"
     icon="folder"
     :text="folderText"
     @click="handleClick"
   />
 
-  <BaseProfileLibraryFolderImportModal ref="modal" />
+  <BaseProfileLibraryFolderImportModal
+    ref="modal"
+  />
 </template>
 
 <script>
diff --git a/src/views/profile/library/MainPage/ImportSegment/SearchImportBlock.vue b/src/views/profile/library/MainPage/ImportSegment/SearchImportBlock.vue
index ca4dcb720..cd358329f 100644
--- a/src/views/profile/library/MainPage/ImportSegment/SearchImportBlock.vue
+++ b/src/views/profile/library/MainPage/ImportSegment/SearchImportBlock.vue
@@ -1,12 +1,14 @@
 <template>
   <BaseButton
-    class="primary import-button"
+    class="basic import-button"
     icon="search"
     :text="searchText"
     @click="handleClick"
   />
 
-  <BaseProfileLibrarySearchImportModal ref="modal" />
+  <BaseProfileLibrarySearchImportModal
+    ref="modal"
+  />
 </template>
 
 <script>