From e64b4bd38292a7cb3aa9bf6eb7fc4442efbc08e5 Mon Sep 17 00:00:00 2001
From: Daniel Supernault <danielsupernault@gmail.com>
Date: Mon, 15 Feb 2021 20:27:20 -0700
Subject: [PATCH] Update Timeline component, add inline reports modal

---
 resources/assets/js/components/Timeline.vue | 644 +++++++++++++-------
 1 file changed, 434 insertions(+), 210 deletions(-)

diff --git a/resources/assets/js/components/Timeline.vue b/resources/assets/js/components/Timeline.vue
index a14f4cfb0..c3dc423d0 100644
--- a/resources/assets/js/components/Timeline.vue
+++ b/resources/assets/js/components/Timeline.vue
@@ -469,221 +469,323 @@
 			</div>
 		</div>
 	</div>
+
 	<b-modal ref="ctxModal"
-	id="ctx-modal"
-	hide-header
-	hide-footer
-	centered
-	rounded
-	size="sm"
-	body-class="list-group-flush p-0 rounded">
-	<div class="list-group text-center">
-		<div v-if="ctxMenuStatus && ctxMenuStatus.account.id != profile.id" class="list-group-item rounded cursor-pointer font-weight-bold text-danger" @click="ctxMenuReportPost()">Report</div>
-		<div v-if="ctxMenuStatus && ctxMenuStatus.account.id != profile.id && ctxMenuRelationship && ctxMenuRelationship.following" class="list-group-item rounded cursor-pointer font-weight-bold text-danger" @click="ctxMenuUnfollow()">Unfollow</div>
-		<div v-if="ctxMenuStatus && ctxMenuStatus.account.id != profile.id && ctxMenuRelationship && !ctxMenuRelationship.following" class="list-group-item rounded cursor-pointer font-weight-bold text-primary" @click="ctxMenuFollow()">Follow</div>
-		<div class="list-group-item rounded cursor-pointer" @click="ctxMenuGoToPost()">Go to post</div>
-		<div v-if="ctxMenuStatus && ctxMenuStatus.local == true && !ctxMenuStatus.in_reply_to_id" class="list-group-item rounded cursor-pointer" @click="ctxMenuEmbed()">Embed</div>
-		<!-- <div class="list-group-item rounded cursor-pointer" @click="ctxMenuShare()">Share</div> -->
-		<div class="list-group-item rounded cursor-pointer" @click="ctxMenuCopyLink()">Copy Link</div>
-		<div v-if="profile && profile.is_admin == true" class="list-group-item rounded cursor-pointer" @click="ctxModMenuShow()">Moderation Tools</div>
-		<div v-if="ctxMenuStatus && (profile.is_admin || profile.id == ctxMenuStatus.account.id)" class="list-group-item rounded cursor-pointer" @click="deletePost(ctxMenuStatus)">Delete</div>
-		<div class="list-group-item rounded cursor-pointer text-lighter" @click="closeCtxMenu()">Cancel</div>
-	</div>
-</b-modal>
-<b-modal ref="ctxModModal"
-id="ctx-mod-modal"
-hide-header
-hide-footer
-centered
-rounded
-size="sm"
-body-class="list-group-flush p-0 rounded">
-<div class="list-group text-center">
-	<div class="list-group-item rounded cursor-pointer" @click="moderatePost(ctxMenuStatus, 'unlist')">Unlist from Timelines</div>
-	<div v-if="ctxMenuStatus.sensitive" class="list-group-item rounded cursor-pointer" @click="moderatePost(ctxMenuStatus, 'remcw')">Remove Content Warning</div>
-	<div v-else class="list-group-item rounded cursor-pointer" @click="moderatePost(ctxMenuStatus, 'addcw')">Add Content Warning</div>
-	<div class="list-group-item rounded cursor-pointer text-lighter" @click="ctxModMenuClose()">Cancel</div>
-</div>
-</b-modal>
-<b-modal ref="ctxShareModal"
-id="ctx-share-modal"
-title="Share"
-hide-footer
-centered
-rounded
-size="sm"
-body-class="list-group-flush p-0 rounded text-center">
-<div class="list-group-item rounded cursor-pointer border-top-0">Email</div>
-<div class="list-group-item rounded cursor-pointer">Facebook</div>
-<div class="list-group-item rounded cursor-pointer">Mastodon</div>
-<div class="list-group-item rounded cursor-pointer">Pinterest</div>
-<div class="list-group-item rounded cursor-pointer">Pixelfed</div>
-<div class="list-group-item rounded cursor-pointer">Twitter</div>
-<div class="list-group-item rounded cursor-pointer">VK</div>
-<div class="list-group-item rounded cursor-pointer text-lighter" @click="closeCtxShareMenu()">Cancel</div>
-</b-modal>
-<b-modal ref="ctxEmbedModal"
-id="ctx-embed-modal"
-hide-header
-hide-footer
-centered
-rounded
-size="md"
-body-class="p-2 rounded">
-<div>
-	<div class="form-group">
-		<textarea class="form-control disabled text-monospace" rows="8" style="overflow-y:hidden;border: 1px solid #efefef; font-size: 12px; line-height: 18px; margin: 0 0 7px;resize:none;" v-model="ctxEmbedPayload" disabled=""></textarea>
-	</div>
-	<div class="form-group pl-2 d-flex justify-content-center">
-		<div class="form-check mr-3">
-			<input class="form-check-input" type="checkbox" v-model="ctxEmbedShowCaption" :disabled="ctxEmbedCompactMode == true">
-			<label class="form-check-label font-weight-light">
-				Show Caption
-			</label>
+		id="ctx-modal"
+		hide-header
+		hide-footer
+		centered
+		rounded
+		size="sm"
+		body-class="list-group-flush p-0 rounded">
+		<div class="list-group text-center">
+			<!-- <div v-if="ctxMenuStatus && ctxMenuStatus.account.id != profile.id && ctxMenuRelationship && ctxMenuRelationship.following" class="list-group-item rounded cursor-pointer font-weight-bold text-danger" @click="ctxMenuUnfollow()">Unfollow</div>
+			<div v-if="ctxMenuStatus && ctxMenuStatus.account.id != profile.id && ctxMenuRelationship && !ctxMenuRelationship.following" class="list-group-item rounded cursor-pointer font-weight-bold text-primary" @click="ctxMenuFollow()">Follow</div> -->
+			<div class="list-group-item rounded cursor-pointer" @click="ctxMenuGoToPost()">View Post</div>
+			<!-- <div v-if="ctxMenuStatus && ctxMenuStatus.local == true && !ctxMenuStatus.in_reply_to_id" class="list-group-item rounded cursor-pointer" @click="ctxMenuEmbed()">Embed</div>
+			<div class="list-group-item rounded cursor-pointer" @click="ctxMenuCopyLink()">Copy Link</div> -->
+			<div class="list-group-item rounded cursor-pointer" @click="ctxMenuShare()">Share</div>
+			<div v-if="ctxMenuStatus && profile && profile.is_admin == true" class="list-group-item rounded cursor-pointer" @click="ctxModMenuShow()">Moderation Tools</div>
+			<div v-if="ctxMenuStatus && ctxMenuStatus.account.id != profile.id" class="list-group-item rounded cursor-pointer text-danger" @click="ctxMenuReportPost()">Report</div>
+			<div v-if="ctxMenuStatus && (profile.is_admin || profile.id == ctxMenuStatus.account.id)" class="list-group-item rounded cursor-pointer text-danger" @click="deletePost(ctxMenuStatus)">Delete</div>
+			<div class="list-group-item rounded cursor-pointer text-lighter" @click="closeCtxMenu()">Cancel</div>
 		</div>
-		<div class="form-check mr-3">
-			<input class="form-check-input" type="checkbox" v-model="ctxEmbedShowLikes" :disabled="ctxEmbedCompactMode == true">
-			<label class="form-check-label font-weight-light">
-				Show Likes
-			</label>
+	</b-modal>
+	<b-modal ref="ctxModModal"
+		id="ctx-mod-modal"
+		hide-header
+		hide-footer
+		centered
+		rounded
+		size="sm"
+		body-class="list-group-flush p-0 rounded">
+		<div class="list-group text-center">
+			<p class="py-2 px-3 mb-0">
+				<div class="text-center font-weight-bold text-danger">Moderation Tools</div>
+				<div class="small text-center text-muted">Select one of the following options</div>
+			</p>
+			<div class="list-group-item rounded cursor-pointer" @click="moderatePost(ctxMenuStatus, 'unlist')">Unlist from Timelines</div>
+			<div v-if="ctxMenuStatus.sensitive" class="list-group-item rounded cursor-pointer" @click="moderatePost(ctxMenuStatus, 'remcw')">Remove Content Warning</div>
+			<div v-else class="list-group-item rounded cursor-pointer" @click="moderatePost(ctxMenuStatus, 'addcw')">Add Content Warning</div>
+			<!-- <div class="list-group-item rounded cursor-pointer" @click="ctxModOtherMenuShow()">Other</div> -->
+			<div class="list-group-item rounded cursor-pointer text-lighter" @click="ctxModMenuClose()">Cancel</div>
 		</div>
-		<div class="form-check">
-			<input class="form-check-input" type="checkbox" v-model="ctxEmbedCompactMode">
-			<label class="form-check-label font-weight-light">
-				Compact Mode
-			</label>
+	</b-modal>
+	<b-modal ref="ctxModOtherModal"
+		id="ctx-mod-other-modal"
+		hide-header
+		hide-footer
+		centered
+		rounded
+		size="sm"
+		body-class="list-group-flush p-0 rounded">
+		<div class="list-group text-center">
+			<p class="py-2 px-3 mb-0">
+				<div class="text-center font-weight-bold text-danger">Moderation Tools</div>
+				<div class="small text-center text-muted">Select one of the following options</div>
+			</p>
+			<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="confirmModal()">Unlist Posts</div>
+			<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="confirmModal()">Moderation Log</div>
+			<div class="list-group-item rounded cursor-pointer text-lighter" @click="ctxModOtherMenuClose()">Cancel</div>
 		</div>
-	</div>
-	<hr>
-	<button :class="copiedEmbed ? 'btn btn-primary btn-block btn-sm py-1 font-weight-bold disabed': 'btn btn-primary btn-block btn-sm py-1 font-weight-bold'" @click="ctxCopyEmbed" :disabled="copiedEmbed">{{copiedEmbed ? 'Embed Code Copied!' : 'Copy Embed Code'}}</button>
-	<p class="mb-0 px-2 small text-muted">By using this embed, you agree to our <a href="/site/terms">Terms of Use</a></p>
-</div>
-</b-modal>
-<b-modal
-id="lightbox"
-ref="lightboxModal"
-hide-header
-hide-footer
-centered
-size="lg"
-body-class="p-0"
->
-<div v-if="lightboxMedia" :class="lightboxMedia.filter_class" class="w-100 h-100">
-	<img :src="lightboxMedia.url" style="max-height: 100%; max-width: 100%" alt="lightbox media">
-</div>
-</b-modal>
-<b-modal ref="replyModal"
-id="ctx-reply-modal"
-hide-footer
-centered
-rounded
-:title-html="replyStatus.account ? 'Reply to <span class=text-dark>' + replyStatus.account.username + '</span>' : ''"
-title-tag="p"
-title-class="font-weight-bold text-muted"
-size="md"
-body-class="p-2 rounded">
-<div>
-	<textarea class="form-control" rows="4" style="border: none; font-size: 18px; resize: none; white-space: pre-wrap;outline: none;" placeholder="Reply here ..." v-model="replyText">
-	</textarea>
-
-	<div class="border-top border-bottom my-2">
-		<ul class="nav align-items-center emoji-reactions" style="overflow-x: scroll;flex-wrap: unset;">
-			<li class="nav-item" v-on:click="emojiReaction(status)" v-for="e in emoji">{{e}}</li>
-		</ul>
-	</div>
-	<div class="d-flex justify-content-between align-items-center">
+	</b-modal>
+	<b-modal ref="ctxShareModal"
+		id="ctx-share-modal"
+		title="Share"
+		hide-footer
+		hide-header
+		centered
+		rounded
+		size="sm"
+		body-class="list-group-flush p-0 rounded text-center">
+		<div class="list-group-item rounded cursor-pointer" @click="ctxMenuCopyLink()">Copy Link</div>
+		<div v-if="ctxMenuStatus && ctxMenuStatus.local == true && !ctxMenuStatus.in_reply_to_id" class="list-group-item rounded cursor-pointer" @click="ctxMenuEmbed()">Embed</div>
+		<!-- <div class="list-group-item rounded cursor-pointer border-top-0">Email</div>
+		<div class="list-group-item rounded cursor-pointer">Facebook</div>
+		<div class="list-group-item rounded cursor-pointer">Mastodon</div>
+		<div class="list-group-item rounded cursor-pointer">Pinterest</div>
+		<div class="list-group-item rounded cursor-pointer">Pixelfed</div>
+		<div class="list-group-item rounded cursor-pointer">Twitter</div>
+		<div class="list-group-item rounded cursor-pointer">VK</div> -->
+		<div class="list-group-item rounded cursor-pointer text-lighter" @click="closeCtxShareMenu()">Cancel</div>
+	</b-modal>
+	<b-modal ref="ctxEmbedModal"
+		id="ctx-embed-modal"
+		hide-header
+		hide-footer
+		centered
+		rounded
+		size="md"
+		body-class="p-2 rounded">
 		<div>
-			<span class="pl-2 small text-muted font-weight-bold text-monospace">
-				<span :class="[replyText.length > config.uploader.max_caption_length ? 'text-danger':'text-dark']">{{replyText.length > config.uploader.max_caption_length ? config.uploader.max_caption_length - replyText.length : replyText.length}}</span>/{{config.uploader.max_caption_length}}
-			</span>
+			<div class="form-group">
+				<textarea class="form-control disabled text-monospace" rows="8" style="overflow-y:hidden;border: 1px solid #efefef; font-size: 12px; line-height: 18px; margin: 0 0 7px;resize:none;" v-model="ctxEmbedPayload" disabled=""></textarea>
+			</div>
+			<div class="form-group pl-2 d-flex justify-content-center">
+				<div class="form-check mr-3">
+					<input class="form-check-input" type="checkbox" v-model="ctxEmbedShowCaption" :disabled="ctxEmbedCompactMode == true">
+					<label class="form-check-label font-weight-light">
+						Show Caption
+					</label>
+				</div>
+				<div class="form-check mr-3">
+					<input class="form-check-input" type="checkbox" v-model="ctxEmbedShowLikes" :disabled="ctxEmbedCompactMode == true">
+					<label class="form-check-label font-weight-light">
+						Show Likes
+					</label>
+				</div>
+				<div class="form-check">
+					<input class="form-check-input" type="checkbox" v-model="ctxEmbedCompactMode">
+					<label class="form-check-label font-weight-light">
+						Compact Mode
+					</label>
+				</div>
+			</div>
+			<hr>
+			<button :class="copiedEmbed ? 'btn btn-primary btn-block btn-sm py-1 font-weight-bold disabed': 'btn btn-primary btn-block btn-sm py-1 font-weight-bold'" @click="ctxCopyEmbed" :disabled="copiedEmbed">{{copiedEmbed ? 'Embed Code Copied!' : 'Copy Embed Code'}}</button>
+			<p class="mb-0 px-2 small text-muted">By using this embed, you agree to our <a href="/site/terms">Terms of Use</a></p>
+		</div>
+	</b-modal>
+	<b-modal ref="ctxReport"
+		id="ctx-report"
+		hide-header
+		hide-footer
+		centered
+		rounded
+		size="sm"
+		body-class="list-group-flush p-0 rounded">
+		<p class="py-2 px-3 mb-0">
+			<div class="text-center font-weight-bold text-danger">Report</div>
+			<div class="small text-center text-muted">Select one of the following options</div>
+		</p>
+		<div class="list-group text-center">
+			<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('spam')">Spam</div>
+			<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('sensitive')">Sensitive Content</div>
+			<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('abusive')">Abusive or Harmful</div>
+			<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="openCtxReportOtherMenu()">Other</div>
+			<!-- <div class="list-group-item rounded cursor-pointer" @click="ctxReportMenuGoBack()">Go Back</div> -->
+			<div class="list-group-item rounded cursor-pointer text-lighter" @click="ctxReportMenuGoBack()">Cancel</div>
 		</div>
-		<div class="d-flex align-items-center">
-			<div class="custom-control custom-switch mr-3">
-				<input type="checkbox" class="custom-control-input" id="replyModalCWSwitch" v-model="replyNsfw">
-				<label :class="[replyNsfw ? 'custom-control-label font-weight-bold text-dark':'custom-control-label text-lighter']" for="replyModalCWSwitch">Mark as NSFW</label>
+	</b-modal>
+	<b-modal ref="ctxReportOther"
+		id="ctx-report-other"
+		hide-header
+		hide-footer
+		centered
+		rounded
+		size="sm"
+		body-class="list-group-flush p-0 rounded">
+		<p class="py-2 px-3 mb-0">
+			<div class="text-center font-weight-bold text-danger">Report</div>
+			<div class="small text-center text-muted">Select one of the following options</div>
+		</p>
+		<div class="list-group text-center">
+			<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('underage')">Underage Account</div>
+			<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('copyright')">Copyright Infringement</div>
+			<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('impersonation')">Impersonation</div>
+			<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('scam')">Scam or Fraud</div>
+			<!-- <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('terrorism')">Terrorism Related</div> -->
+			<!-- <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('other')">Other or Not listed</div> -->
+			<!-- <div class="list-group-item rounded cursor-pointer" @click="ctxReportOtherMenuGoBack()">Go Back</div> -->
+			<div class="list-group-item rounded cursor-pointer text-lighter" @click="ctxReportOtherMenuGoBack()">Cancel</div>
+		</div>
+	</b-modal>
+	<b-modal ref="ctxConfirm"
+		id="ctx-confirm"
+		hide-header
+		hide-footer
+		centered
+		rounded
+		size="sm"
+		body-class="list-group-flush p-0 rounded">
+		<div class="d-flex align-items-center justify-content-center py-3">
+			<div>{{ this.confirmModalTitle }}</div>
+		</div>
+		<div class="d-flex border-top btn-group btn-group-block rounded-0" role="group">
+			<button type="button" class="btn btn-outline-lighter border-left-0 border-top-0 border-bottom-0 border-right py-2" style="color: rgb(0,122,255) !important;" @click.prevent="confirmModalCancel()">Cancel</button>
+			<button type="button" class="btn btn-outline-lighter border-0" style="color: rgb(0,122,255) !important;" @click.prevent="confirmModalConfirm()">Confirm</button>
+		</div>
+	</b-modal>
+	<b-modal ref="lightboxModal"
+		id="lightbox"
+		hide-header
+		hide-footer
+		centered
+		size="lg"
+		body-class="p-0"
+		>
+		<div v-if="lightboxMedia" :class="lightboxMedia.filter_class" class="w-100 h-100">
+			<img :src="lightboxMedia.url" style="max-height: 100%; max-width: 100%" alt="lightbox media">
+		</div>
+	</b-modal>
+	<b-modal ref="replyModal"
+		id="ctx-reply-modal"
+		hide-footer
+		centered
+		rounded
+		:title-html="replyStatus.account ? 'Reply to <span class=text-dark>' + replyStatus.account.username + '</span>' : ''"
+		title-tag="p"
+		title-class="font-weight-bold text-muted"
+		size="md"
+		body-class="p-2 rounded">
+		<div>
+			<textarea class="form-control" rows="4" style="border: none; font-size: 18px; resize: none; white-space: pre-wrap;outline: none;" placeholder="Reply here ..." v-model="replyText">
+			</textarea>
+
+			<div class="border-top border-bottom my-2">
+				<ul class="nav align-items-center emoji-reactions" style="overflow-x: scroll;flex-wrap: unset;">
+					<li class="nav-item" v-on:click="emojiReaction(status)" v-for="e in emoji">{{e}}</li>
+				</ul>
 			</div>
-				<!-- <select class="custom-select custom-select-sm my-0 mr-2">
-					<option value="public" selected="">Public</option>
-					<option value="unlisted">Unlisted</option>
-					<option value="followers">Followers Only</option>
-				</select> -->
-				<button class="btn btn-primary btn-sm py-2 px-4 lead text-uppercase font-weight-bold" v-on:click.prevent="commentSubmit(status, $event)" :disabled="replyText.length == 0">
-					{{replySending == true ? 'POSTING' : 'POST'}}
-				</button>
+			<div class="d-flex justify-content-between align-items-center">
+				<div>
+					<span class="pl-2 small text-muted font-weight-bold text-monospace">
+						<span :class="[replyText.length > config.uploader.max_caption_length ? 'text-danger':'text-dark']">{{replyText.length > config.uploader.max_caption_length ? config.uploader.max_caption_length - replyText.length : replyText.length}}</span>/{{config.uploader.max_caption_length}}
+					</span>
+				</div>
+				<div class="d-flex align-items-center">
+					<div class="custom-control custom-switch mr-3">
+						<input type="checkbox" class="custom-control-input" id="replyModalCWSwitch" v-model="replyNsfw">
+						<label :class="[replyNsfw ? 'custom-control-label font-weight-bold text-dark':'custom-control-label text-lighter']" for="replyModalCWSwitch">Mark as NSFW</label>
+					</div>
+						
+					<button class="btn btn-primary btn-sm py-2 px-4 lead text-uppercase font-weight-bold" v-on:click.prevent="commentSubmit(status, $event)" :disabled="replyText.length == 0">
+						{{replySending == true ? 'POSTING' : 'POST'}}
+					</button>
+				</div>
 			</div>
 		</div>
-	</div>
-</b-modal>
+	</b-modal>
+	<b-modal ref="ctxStatusModal"
+		id="ctx-status-modal"
+		hide-header
+		hide-footer
+		centered
+		rounded
+		size="xl"
+		body-class="list-group-flush p-0 m-0 rounded">
+		<!-- <post-component
+			v-if="ctxMenuStatus" 
+			:status-template="ctxMenuStatus.pf_type" 
+			:status-id="ctxMenuStatus.id" 
+			:status-username="ctxMenuStatus.account.username" 
+			:status-url="ctxMenuStatus.url" 
+			:status-profile-url="ctxMenuStatus.account.url" 
+			:status-avatar="ctxMenuStatus.account.avatar" 
+			:status-profile-id="ctxMenuStatus.account.id" 
+			profile-layout="metro">
+		</post-component> -->
+	</b-modal>
 </div>
 </template>
 
 <style type="text/css" scoped>
-.postPresenterContainer {
-	display: flex;
-	align-items: center;
-	background: #fff;
-}
-.word-break {
-	word-break: break-all;
-}
-.small .custom-control-label {
-	padding-top: 3px;
-}
-.reply-btn {
-	position: absolute;
-	bottom: 12px;
-	right: 20px;
-	width: 60px;
-	text-align: center;
-	border-radius: 0 3px 3px 0;
-}
-.emoji-reactions .nav-item {
-	font-size: 1.2rem;
-	padding: 9px;
-	cursor: pointer;
-}
-.emoji-reactions::-webkit-scrollbar {
-	width: 0px;
-	height: 0px;
-	background: transparent;
-}
-.reply-btn[disabled] {
-	opacity: .3;
-	color: #3897f0;
-}
-.has-story {
-	width: 64px;
-	height: 64px;
-	border-radius: 50%;
-	padding: 2px;
-	background: radial-gradient(ellipse at 70% 70%, #ee583f 8%, #d92d77 42%, #bd3381 58%);
-}
-.has-story img {
-	width: 60px;
-	height: 60px;
-	border-radius: 50%;
-	padding: 3px;
-	background: #fff;
-}
-.has-story.has-story-sm {
-	width: 32px;
-	height: 32px;
-	border-radius: 50%;
-	padding: 2px;
-	background: radial-gradient(ellipse at 70% 70%, #ee583f 8%, #d92d77 42%, #bd3381 58%);
-}
-.has-story.has-story-sm img {
-	width: 28px;
-	height: 28px;
-	border-radius: 50%;
-	padding: 3px;
-	background: #fff;
-}
-#ctx-reply-modal .form-control:focus {
-	border: none;
-	outline: 0;
-	box-shadow: none;
-}
+	.postPresenterContainer {
+		display: flex;
+		align-items: center;
+		background: #fff;
+	}
+	.word-break {
+		word-break: break-all;
+	}
+	.small .custom-control-label {
+		padding-top: 3px;
+	}
+	.reply-btn {
+		position: absolute;
+		bottom: 12px;
+		right: 20px;
+		width: 60px;
+		text-align: center;
+		border-radius: 0 3px 3px 0;
+	}
+	.emoji-reactions .nav-item {
+		font-size: 1.2rem;
+		padding: 9px;
+		cursor: pointer;
+	}
+	.emoji-reactions::-webkit-scrollbar {
+		width: 0px;
+		height: 0px;
+		background: transparent;
+	}
+	.reply-btn[disabled] {
+		opacity: .3;
+		color: #3897f0;
+	}
+	.has-story {
+		width: 64px;
+		height: 64px;
+		border-radius: 50%;
+		padding: 2px;
+		background: radial-gradient(ellipse at 70% 70%, #ee583f 8%, #d92d77 42%, #bd3381 58%);
+	}
+	.has-story img {
+		width: 60px;
+		height: 60px;
+		border-radius: 50%;
+		padding: 3px;
+		background: #fff;
+	}
+	.has-story.has-story-sm {
+		width: 32px;
+		height: 32px;
+		border-radius: 50%;
+		padding: 2px;
+		background: radial-gradient(ellipse at 70% 70%, #ee583f 8%, #d92d77 42%, #bd3381 58%);
+	}
+	.has-story.has-story-sm img {
+		width: 28px;
+		height: 28px;
+		border-radius: 50%;
+		padding: 3px;
+		background: #fff;
+	}
+	#ctx-reply-modal .form-control:focus {
+		border: none;
+		outline: 0;
+		box-shadow: none;
+	}
 </style>
 
 <script type="text/javascript">
@@ -739,7 +841,10 @@ body-class="p-2 rounded">
 				mpData: false,
 				mpInterval: 15000,
 				mpEnabled: false,
-				mpPoller: null
+				mpPoller: null,
+				confirmModalTitle: 'Are you sure?',
+				confirmModalIdentifer: null,
+				confirmModalType: false
 			}
 		},
 
@@ -1090,7 +1195,7 @@ body-class="p-2 rounded">
 					this.feed = this.feed.filter(s => {
 						return s.id != status.id;
 					});
-					this.$refs.ctxModal.hide();
+					this.closeModals();
 				}).catch(err => {
 					swal('Error', 'Something went wrong. Please try again later.', 'error');
 				});
@@ -1473,12 +1578,15 @@ body-class="p-2 rounded">
 				this.ctxMenuStatus = false;
 				this.ctxMenuRelationship = false;
 				this.$refs.ctxModal.hide();
+				this.$refs.ctxReport.hide();
+				this.$refs.ctxReportOther.hide();
+				this.closeModals();
 			},
 
 			ctxMenuCopyLink() {
 				let status = this.ctxMenuStatus;
 				navigator.clipboard.writeText(status.url);
-				this.closeCtxMenu();
+				this.closeModals();
 				return;
 			},
 
@@ -1521,11 +1629,14 @@ body-class="p-2 rounded">
 			},
 
 			ctxMenuReportPost() {
-				window.location.href = '/i/report?type=post&id=' + this.ctxMenuStatus.id;
+				this.$refs.ctxModal.hide();
+				this.$refs.ctxReport.show();
+				return;
+				// window.location.href = '/i/report?type=post&id=' + this.ctxMenuStatus.id;
 			},
 
 			ctxMenuEmbed() {
-				this.$refs.ctxModal.hide();
+				this.closeModals();
 				this.$refs.ctxEmbedModal.show();
 			},
 
@@ -1551,14 +1662,25 @@ body-class="p-2 rounded">
 				this.$refs.ctxModal.hide();
 				this.$refs.ctxModModal.show();
 			},
+
+			ctxModOtherMenuShow() {
+				this.$refs.ctxModal.hide();
+				this.$refs.ctxModModal.hide();
+				this.$refs.ctxModOtherModal.show();
+			},
 			
 			ctxModMenu() {
 				this.$refs.ctxModal.hide();
 			},
 
 			ctxModMenuClose() {
-				this.$refs.ctxModal.hide();
-				this.$refs.ctxModModal.hide();
+				this.closeModals();
+				this.$refs.ctxModal.show();
+			},
+
+			ctxModOtherMenuClose() {
+				this.closeModals();
+				this.$refs.ctxModModal.show();
 			},
 
 			formatCount(count) {
@@ -1703,11 +1825,113 @@ body-class="p-2 rounded">
 			labelRedirect(type) {
 				let url = '/i/redirect?url=' + encodeURI(this.config.features.label.covid.url);
 				window.location.href = url;
+			},
+
+			openCtxReportOtherMenu() {
+				let s = this.ctxMenuStatus;
+				this.closeCtxMenu();
+				this.ctxMenuStatus = s;
+				this.$refs.ctxReportOther.show();
+			},
+
+			ctxReportMenuGoBack() {
+				this.$refs.ctxReportOther.hide();
+				this.$refs.ctxReport.hide();
+				this.$refs.ctxModal.show();
+			},
+
+			ctxReportOtherMenuGoBack() {
+				this.$refs.ctxReportOther.hide();
+				this.$refs.ctxModal.hide();
+				this.$refs.ctxReport.show();
+			},
+
+			sendReport(type) {
+				let id = this.ctxMenuStatus.id;
+
+				swal({
+					'title': 'Confirm Report',
+					'text': 'Are you sure you want to report this post?',
+					'icon': 'warning',
+					'buttons': true,
+					'dangerMode': true
+				}).then((res) => {
+					if(res) {
+						axios.post('/i/report/', {
+							'report': type,
+							'type': 'post',
+							'id': id,
+						}).then(res => {
+							this.closeCtxMenu();
+							swal('Report Sent!', 'We have successfully received your report.', 'success');
+						}).catch(err => {
+							swal('Oops!', 'There was an issue reporting this post.', 'error');
+						})
+					} else {
+						this.closeCtxMenu();
+					}
+				});
+			},
+
+			closeModals() {
+				this.$refs.ctxModal.hide();
+				this.$refs.ctxModModal.hide();
+				this.$refs.ctxModOtherModal.hide();
+				this.$refs.ctxShareModal.hide();
+				this.$refs.ctxEmbedModal.hide();
+				this.$refs.ctxReport.hide();
+				this.$refs.ctxReportOther.hide();
+				this.$refs.ctxConfirm.hide();
+				this.$refs.lightboxModal.hide();
+				this.$refs.replyModal.hide();
+				this.$refs.ctxStatusModal.hide();
+			},
+
+			openCtxStatusModal() {
+				this.closeModals();
+				this.$refs.ctxStatusModal.show();
+			},
+
+			openConfirmModal() {
+				this.closeModals();
+				this.$refs.ctxConfirm.show();
+			},
+
+			closeConfirmModal() {
+				this.closeModals();
+				this.confirmModalTitle = 'Are you sure?';
+				this.confirmModalType = false;
+				this.confirmModalIdentifer = null;
+			},
+
+			confirmModalConfirm() {
+				switch(this.confirmModalType) {
+					case 'post.delete':
+						axios.post('/i/delete', {
+							type: 'status',
+							item: this.confirmModalIdentifer
+						}).then(res => {
+							this.feed = this.feed.filter(s => {
+								return s.id != this.confirmModalIdentifer;
+							});
+							this.closeConfirmModal();
+						}).catch(err => {
+							this.closeConfirmModal();
+							swal('Error', 'Something went wrong. Please try again later.', 'error');
+						});
+					break;
+				}
+
+				this.closeConfirmModal();
+			},
+
+			confirmModalCancel() {
+				this.closeConfirmModal();
 			}
 		},
 
 		beforeDestroy () {
 			clearInterval(this.mpInterval);
-		},
+		}
 	}
 </script>