Merge pull request #3258 from pixelfed/staging

Staging

CHANGELOG.md

@@ -55,6 +55,8 @@
 - Updated index view, remove shortcut from favicon meta tag. Fixes #3196. ([6e2cb3cd](https://github.com/pixelfed/pixelfed/commit/6e2cb3cd))
 - Updated CollectionController, fix broken unauthenticated access. Fixes #3242. ([bd249f0c](https://github.com/pixelfed/pixelfed/commit/bd249f0c))
 - Updated ComposeController, add collection support to compose endpoint. ([ec2cfaf5](https://github.com/pixelfed/pixelfed/commit/ec2cfaf5))
+- Updated instance config, match default oauth settings in AuthServiceProvider. ([52f25ff1](https://github.com/pixelfed/pixelfed/commit/52f25ff1))
+- Updated ComposeModal.vue, fix redirect after posting. Fixes #3254. ([5db64e94](https://github.com/pixelfed/pixelfed/commit/5db64e94))
 -  ([](https://github.com/pixelfed/pixelfed/commit/))
 
 ## [v0.11.2 (2022-01-09)](https://github.com/pixelfed/pixelfed/compare/v0.11.1...v0.11.2)

package-lock.json

@@ -5542,9 +5542,12 @@
 			}
 		},
 		"node_modules/get-caller-file": {
-			"version": "1.0.3",
+			"version": "2.0.5",
-			"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
+			"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-			"integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w=="
+			"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+			"engines": {
+				"node": "6.* || 8.* || >= 10.*"
+			}
 		},
 		"node_modules/get-intrinsic": {
 			"version": "1.1.1",
@@ -10432,9 +10435,9 @@
 			}
 		},
 		"node_modules/require-main-filename": {
-			"version": "1.0.1",
+			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
+			"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-			"integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE="
+			"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
 		},
 		"node_modules/requires-port": {
 			"version": "1.0.0",
@@ -10734,14 +10737,6 @@
 				"node": ">=6"
 			}
 		},
-		"node_modules/sass-graph/node_modules/get-caller-file": {
-			"version": "2.0.5",
-			"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-			"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-			"engines": {
-				"node": "6.* || 8.* || >= 10.*"
-			}
-		},
 		"node_modules/sass-graph/node_modules/locate-path": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
@@ -10773,11 +10768,6 @@
 				"node": ">=4"
 			}
 		},
-		"node_modules/sass-graph/node_modules/require-main-filename": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-			"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
-		},
 		"node_modules/sass-graph/node_modules/string-width": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
@@ -13339,14 +13329,6 @@
 				"node": ">=6"
 			}
 		},
-		"node_modules/webpack-cli/node_modules/get-caller-file": {
-			"version": "2.0.5",
-			"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-			"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-			"engines": {
-				"node": "6.* || 8.* || >= 10.*"
-			}
-		},
 		"node_modules/webpack-cli/node_modules/has-flag": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -13386,11 +13368,6 @@
 				"node": ">=4"
 			}
 		},
-		"node_modules/webpack-cli/node_modules/require-main-filename": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-			"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
-		},
 		"node_modules/webpack-cli/node_modules/string-width": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
@@ -13620,14 +13597,6 @@
 				"node": ">=6"
 			}
 		},
-		"node_modules/webpack-dev-server/node_modules/get-caller-file": {
-			"version": "2.0.5",
-			"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-			"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-			"engines": {
-				"node": "6.* || 8.* || >= 10.*"
-			}
-		},
 		"node_modules/webpack-dev-server/node_modules/has-flag": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -13675,11 +13644,6 @@
 				"node": ">=4"
 			}
 		},
-		"node_modules/webpack-dev-server/node_modules/require-main-filename": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-			"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
-		},
 		"node_modules/webpack-dev-server/node_modules/schema-utils": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
@@ -14063,6 +14027,11 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/yargs/node_modules/get-caller-file": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
+			"integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w=="
+		},
 		"node_modules/yargs/node_modules/locate-path": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
@@ -14094,6 +14063,11 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/yargs/node_modules/require-main-filename": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
+			"integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE="
+		},
 		"node_modules/zuck.js": {
 			"version": "1.6.0",
 			"resolved": "https://registry.npmjs.org/zuck.js/-/zuck.js-1.6.0.tgz",
@@ -18380,9 +18354,9 @@
 			"integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="
 		},
 		"get-caller-file": {
-			"version": "1.0.3",
+			"version": "2.0.5",
-			"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
+			"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-			"integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w=="
+			"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
 		},
 		"get-intrinsic": {
 			"version": "1.1.1",
@@ -22263,9 +22237,9 @@
 			"integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
 		},
 		"require-main-filename": {
-			"version": "1.0.1",
+			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
+			"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-			"integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE="
+			"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
 		},
 		"requires-port": {
 			"version": "1.0.0",
@@ -22617,11 +22591,6 @@
 						"locate-path": "^3.0.0"
 					}
 				},
-				"get-caller-file": {
-					"version": "2.0.5",
-					"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-					"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
-				},
 				"locate-path": {
 					"version": "3.0.0",
 					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
@@ -22644,11 +22613,6 @@
 					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
 					"integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU="
 				},
-				"require-main-filename": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-					"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
-				},
 				"string-width": {
 					"version": "3.1.0",
 					"resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
@@ -24645,11 +24609,6 @@
 						"locate-path": "^3.0.0"
 					}
 				},
-				"get-caller-file": {
-					"version": "2.0.5",
-					"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-					"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
-				},
 				"has-flag": {
 					"version": "3.0.0",
 					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -24677,11 +24636,6 @@
 					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
 					"integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU="
 				},
-				"require-main-filename": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-					"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
-				},
 				"string-width": {
 					"version": "3.1.0",
 					"resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
@@ -24864,11 +24818,6 @@
 						"locate-path": "^3.0.0"
 					}
 				},
-				"get-caller-file": {
-					"version": "2.0.5",
-					"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-					"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
-				},
 				"has-flag": {
 					"version": "3.0.0",
 					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -24901,11 +24850,6 @@
 					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
 					"integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU="
 				},
-				"require-main-filename": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-					"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
-				},
 				"schema-utils": {
 					"version": "1.0.0",
 					"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
@@ -25203,6 +25147,11 @@
 						"locate-path": "^3.0.0"
 					}
 				},
+				"get-caller-file": {
+					"version": "1.0.3",
+					"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
+					"integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w=="
+				},
 				"locate-path": {
 					"version": "3.0.0",
 					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
@@ -25224,6 +25173,11 @@
 					"version": "3.0.0",
 					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
 					"integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU="
+				},
+				"require-main-filename": {
+					"version": "1.0.1",
+					"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
+					"integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE="
 				}
 			}
 		},

resources/assets/js/components/ComposeModal.vue

@@ -1,6 +1,6 @@
 <template>
-<div>
+<div class="compose-modal-component">
-	<input type="file" id="pf-dz" name="media" class="w-100 h-100 d-none file-input" v-bind:accept="config.uploader.media_types">
+	<input type="file" id="pf-dz" name="media" class="w-100 h-100 d-none file-input" multiple="" v-bind:accept="config.uploader.media_types">
 	<canvas class="d-none" id="pr_canvas"></canvas>
 	<img class="d-none" id="pr_img">
 	<div class="timeline">
@@ -446,9 +446,20 @@
 						<div class="border-bottom">
 							<p class="px-4 mb-0 py-2 cursor-pointer" @click="showTagCard()">Tag people</p>
 						</div>
+						<div class="border-bottom">
+							<p class="px-4 mb-0 py-2 cursor-pointer" @click="showCollectionCard()">
+								<span>Add to Collection <span class="ml-2 badge badge-primary">NEW</span></span>
+								<span class="float-right">
+									<span v-if="collectionsSelected.length" href="#" class="btn btn-outline-secondary btn-sm small mr-3 mt-n1 disabled" style="font-size:10px;padding:3px 5px;text-transform: uppercase" disabled>
+										{{collectionsSelected.length}}
+									</span>
+									<span class="text-decoration-none"><i class="fas fa-chevron-right fa-lg text-lighter"></i></span>
+								</span>
+							</p>
+						</div>
 						<div class="border-bottom">
 							<p class="px-4 mb-0 py-2 cursor-pointer" @click="showLicenseCard()">
-								<span>Add license <span class="ml-2 badge badge-primary">NEW</span></span>
+								<span>Add license</span>
 								<span class="float-right">
 									<a v-if="licenseTitle" href="#" @click.prevent="showLicenseCard()" class="btn btn-outline-secondary btn-sm small mr-3 mt-n1 disabled" style="font-size:10px;padding:3px;text-transform: uppercase" disabled>{{licenseTitle}}</a>
 									<a href="#" @click.prevent="showLicenseCard()" class="text-decoration-none"><i class="fas fa-chevron-right fa-lg text-lighter"></i></a>
@@ -660,19 +671,30 @@
 					</div>
 
 					<div v-if="page == 'addToCollection'" class="w-100 h-100 p-3">
-						<div class="list-group mb-3">
+						<div v-if="collectionsLoaded && collections.length" class="list-group mb-3 collections-list-group">
-							<div class="list-group-item cursor-pointer compose-action border" @click="goBack()">
+							<div
+								v-for="(collection, index) in collections"
+								class="list-group-item cursor-pointer compose-action border"
+								:class="{ active: collectionsSelected.includes(index) }"
+								@click="toggleCollectionItem(index)">
 								<div class="media">
-								  <img src="" class="mr-3" alt="" width="50px" height="50px">
+								  <img :src="collection.thumb" class="mr-3" alt="" width="50px" height="50px">
 								  <div class="media-body">
-								    <h5 class="mt-0">collection title</h5>
+								    <h5 class="mt-0">{{ collection.title }}</h5>
-								    <p class="mb-0 text-muted small">3 Photos - Created 2h ago</p>
+								    <p class="mb-0 text-muted small">{{ collection.post_count }} Posts - Created {{ timeAgo(collection.published_at) }} ago</p>
 								  </div>
 								</div>
 							</div>
+
+							<button
+								v-if="collectionsCanLoadMore"
+								class="btn btn-light btn-block font-weight-bold mt-3"
+								@click="loadMoreCollections">
+								Load more
+							</button>
 						</div>
 						<p class="d-flex justify-content-between mb-0">
-							<button type="button" @click="goBack()" class="btn btn-link text-muted font-weight-bold text-decoration-none">Cancel</button>
+							<button type="button" @click="clearSelectedCollections()" class="btn btn-link text-muted font-weight-bold text-decoration-none">Clear</button>
 							<button type="button" @click="goBack()" class="btn btn-primary font-weight-bold">Save</button>
 						</p>
 					</div>
@@ -812,47 +834,6 @@
 </div>
 </template>
 
-<style type="text/css" scoped>
-	.media-drawer-filters {
-		overflow-x: scroll;
-		flex-wrap:unset;
-	}
-	.media-drawer-filters::-webkit-scrollbar {
-		width: 0px;
-		background: transparent;
-	}
-	.media-drawer-filters .nav-link {
-		min-width:100px;
-		padding-top: 1rem;
-		padding-bottom: 1rem;
-	}
-	.media-drawer-filters .active {
-		color: #fff;
-		font-weight: bold;
-	}
-    @media (hover: none) and (pointer: coarse) {
-	    .media-drawer-filters::-webkit-scrollbar {
-	        display: none;
-	    }
-    }
-    .no-focus {
-		border-color: none;
-		outline: 0;
-		box-shadow: none;
-    }
-	a.list-group-item {
-		text-decoration: none;
-	}
-	a.list-group-item:hover {
-		text-decoration: none;
-		background-color: #f8f9fa !important;
-	}
-	.compose-action:hover {
-		cursor: pointer;
-		background-color: #f8f9fa !important;
-	}
-</style>
-
 <script type="text/javascript">
 import VueCropper from 'vue-cropperjs';
 import 'cropperjs/dist/cropper.css';
@@ -1021,7 +1002,12 @@ export default {
 			pollOptionModel: null,
 			pollOptions: [],
 			pollExpiry: 1440,
-			postingPoll: false
+			postingPoll: false,
+			collections: [],
+			collectionsSelected: [],
+			collectionsLoaded: false,
+			collectionsPage: 1,
+			collectionsCanLoadMore: false,
 		}
 	},
 
@@ -1048,6 +1034,10 @@ export default {
 	},
 
 	methods: {
+		timeAgo(ts) {
+			return App.util.format.timeAgo(ts);
+		},
+
 		fetchProfile() {
 			let tags = {
 				public: 'Public',
@@ -1246,6 +1236,7 @@ export default {
 					if(this.composeText == 'Add optional caption...') {
 						this.composeText = '';
 					}
+
 					let data = {
 						media: this.media,
 						caption: this.composeText,
@@ -1258,17 +1249,28 @@ export default {
 						license: this.licenseId,
 						video: this.video
 					};
+
+					if(this.collectionsSelected.length) {
+						data.collections = this.collectionsSelected
+							.map(idx => {
+								return this.collections[idx].id;
+						});
+					}
+
 					axios.post('/api/compose/v0/publish', data)
 					.then(res => {
-						let data = res.data;
+						if(location.pathname === '/i/web/compose' && res.data && res.data.length) {
-						if(location.pathname === '/i/web/compose') {
+							location.href = '/i/web/post/' + res.data.split('/').slice(-1)[0];
-							location.href = '/i/web/post/' + data.split('/').at(-1);
 						} else {
 							location.href = data;
 						}
 					}).catch(err => {
-						let msg = err.response.data.message ? err.response.data.message : 'An unexpected error occured.'
+						if(err.response) {
-						swal('Oops, something went wrong!', msg, 'error');
+							let msg = err.response.data.message ? err.response.data.message : 'An unexpected error occured.'
+							swal('Oops, something went wrong!', msg, 'error');
+						} else {
+							swal('Oops, something went wrong!', err.message, 'error');
+						}
 					});
 					return;
 				break;
@@ -1774,7 +1776,123 @@ export default {
 
 		filesize(val) {
 			return filesize(val * 1024, {round: 0});
+		},
+
+		showCollectionCard() {
+			this.pageTitle = 'Add to Collection(s)';
+			this.page = 'addToCollection';
+
+			if(!this.collectionsLoaded) {
+				this.fetchCollections();
+			}
+		},
+
+		fetchCollections() {
+			axios.get(`/api/local/profile/collections/${this.profile.id}`)
+			.then(res => {
+				this.collections = res.data;
+				this.collectionsLoaded = true;
+				this.collectionsCanLoadMore = res.data.length == 9;
+				this.collectionsPage++;
+			});
+		},
+
+		toggleCollectionItem(index) {
+			if(!this.collectionsSelected.includes(index)) {
+				if(this.collectionsSelected.length == 7) {
+					swal('Oops!', 'You can only share to 5 collections.', 'info');
+					return;
+				}
+				this.collectionsSelected.push(index);
+			} else {
+				this.collectionsSelected = this.collectionsSelected.filter(c => c != index);
+			}
+		},
+
+		clearSelectedCollections() {
+			this.collectionsSelected = [];
+			this.pageTitle = 'Compose';
+			this.page = 3;
+		},
+
+		loadMoreCollections() {
+			this.collectionsCanLoadMore = false;
+
+			axios.get(`/api/local/profile/collections/${this.profile.id}`, {
+				params: {
+					page: this.collectionsPage
+				}
+			})
+			.then(res => {
+				let ids = this.collections.map(c => c.id);
+				let data = res.data.filter(res => {
+					return !ids.includes(res.id);
+				});
+
+				if(!data || !data.length) {
+					return;
+				}
+
+				this.collections.push(...data);
+				this.collectionsPage++;
+				this.collectionsCanLoadMore = true;
+			});
 		}
 	}
 }
 </script>
+
+<style lang="scss">
+	.compose-modal-component {
+		.media-drawer-filters {
+			overflow-x: scroll;
+			flex-wrap:unset;
+		}
+		.media-drawer-filters::-webkit-scrollbar {
+			width: 0px;
+			background: transparent;
+		}
+		.media-drawer-filters .nav-link {
+			min-width:100px;
+			padding-top: 1rem;
+			padding-bottom: 1rem;
+		}
+		.media-drawer-filters .active {
+			color: #fff;
+			font-weight: bold;
+		}
+		@media (hover: none) and (pointer: coarse) {
+			.media-drawer-filters::-webkit-scrollbar {
+				display: none;
+			}
+		}
+		.no-focus {
+			border-color: none;
+			outline: 0;
+			box-shadow: none;
+		}
+		a.list-group-item {
+			text-decoration: none;
+		}
+		a.list-group-item:hover {
+			text-decoration: none;
+			background-color: #f8f9fa !important;
+		}
+		.compose-action:hover {
+			cursor: pointer;
+			background-color: #f8f9fa !important;
+		}
+		.collections-list-group {
+			max-height: 500px;
+			overflow-y: auto;
+
+			.list-group-item {
+				&.active {
+					color: #212529;
+					border-color: #60a5fa !important;
+					background-color: #dbeafe !important;
+				}
+			}
+		}
+	}
+</style>