From 726553f5525cfa1e9ff65b4a09cbf3eec943751c Mon Sep 17 00:00:00 2001
From: Daniel Supernault <danielsupernault@gmail.com>
Date: Sun, 11 Jul 2021 02:57:14 -0600
Subject: [PATCH] Update components, add fallback default avatar

---
 resources/assets/js/components/Direct.vue        | 14 +++++++-------
 resources/assets/js/components/DirectMessage.vue | 12 ++++++------
 resources/assets/js/components/PostComponent.vue |  2 +-
 resources/assets/js/components/Timeline.vue      |  1 +
 4 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/resources/assets/js/components/Direct.vue b/resources/assets/js/components/Direct.vue
index b9093dabd..f0901ed03 100644
--- a/resources/assets/js/components/Direct.vue
+++ b/resources/assets/js/components/Direct.vue
@@ -26,10 +26,10 @@
 					<div v-if="!messages.inbox.length" class="list-group-item d-flex justify-content-center align-items-center" style="min-height: 40vh;">
 						<p class="lead mb-0">No messages found :(</p>
 					</div>
-					<div v-else v-for="(thread, index) in messages.inbox">
+					<div v-else v-for="(thread, index) in messages.inbox" :key="'dm_inbox'+index">
 						<a class="list-group-item text-dark text-decoration-none border-left-0 border-right-0 border-top-0" :href="'/account/direct/t/'+thread.id">
 						<div class="media d-flex align-items-center">
-							<img class="mr-3 rounded-circle img-thumbnail" :src="thread.avatar" alt="Generic placeholder image" width="32px">
+							<img class="mr-3 rounded-circle img-thumbnail" :src="thread.avatar" width="32" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg';" v-once>
 							<div class="media-body">
 								<p class="mb-0">
 									<span class="font-weight-bold text-truncate">
@@ -62,10 +62,10 @@
 					<div v-if="!messages.sent.length" class="list-group-item d-flex justify-content-center align-items-center" style="min-height: 40vh;">
 						<p class="lead mb-0">No messages found :(</p>
 					</div>
-					<div v-else v-for="(thread, index) in messages.sent">
+					<div v-else v-for="(thread, index) in messages.sent" :key="'dm_sent'+index">
 						<a class="list-group-item text-dark text-decoration-none border-left-0 border-right-0 border-top-0" href="#" @click.prevent="loadMessage(thread.id)">
 						<div class="media d-flex align-items-center">
-							<img class="mr-3 rounded-circle img-thumbnail" :src="thread.avatar" alt="Generic placeholder image" width="32px">
+							<img class="mr-3 rounded-circle img-thumbnail" :src="thread.avatar" width="32" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg';" v-once>
 							<div class="media-body">
 								<p class="mb-0">
 									<span class="font-weight-bold text-truncate">
@@ -98,10 +98,10 @@
 					<div v-if="!messages.filtered.length" class="list-group-item d-flex justify-content-center align-items-center" style="min-height: 40vh;">
 						<p class="lead mb-0">No messages found :(</p>
 					</div>
-					<div v-else v-for="(thread, index) in messages.filtered">
+					<div v-else v-for="(thread, index) in messages.filtered" :key="'dm_filtered'+index">
 						<a class="list-group-item text-dark text-decoration-none border-left-0 border-right-0 border-top-0" href="#" @click.prevent="loadMessage(thread.id)">
 						<div class="media d-flex align-items-center">
-							<img class="mr-3 rounded-circle img-thumbnail" :src="thread.avatar" alt="Generic placeholder image" width="32px">
+							<img class="mr-3 rounded-circle img-thumbnail" :src="thread.avatar" width="32" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg';" v-once>
 							<div class="media-body">
 								<p class="mb-0">
 									<span class="font-weight-bold text-truncate">
@@ -373,4 +373,4 @@ export default {
 		}
 	}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/assets/js/components/DirectMessage.vue b/resources/assets/js/components/DirectMessage.vue
index 1d4dbe873..3f2346870 100644
--- a/resources/assets/js/components/DirectMessage.vue
+++ b/resources/assets/js/components/DirectMessage.vue
@@ -11,7 +11,7 @@
 					</span>
 					<span>
 						<div class="media">
-							<img class="mr-3 rounded-circle img-thumbnail" :src="thread.avatar" alt="Generic placeholder image" width="40px">
+							<img class="mr-3 rounded-circle img-thumbnail" :src="thread.avatar" width="40" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg';">
 							<div class="media-body">
 								<p class="mb-0">
 									<span class="font-weight-bold">{{thread.name}}</span>
@@ -40,10 +40,10 @@
 					</li> 
 					<li v-for="(convo, index) in thread.messages" class="list-group-item border-0 chat-msg cursor-pointer" @click="openCtxMenu(convo, index)">
 						<div v-if="!convo.isAuthor" class="media d-inline-flex mb-0">
-							<img v-if="!hideAvatars" class="mr-3 mt-2 rounded-circle img-thumbnail" :src="thread.avatar" alt="avatar" width="32px">
+							<img v-if="!hideAvatars" class="mr-3 mt-2 rounded-circle img-thumbnail" :src="thread.avatar" alt="avatar" width="32" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg';">
 							<div class="media-body">
 								<p v-if="convo.type == 'photo'" class="pill-to p-0 shadow">
-									<img :src="convo.media" width="140px" style="border-radius:20px;">
+									<img :src="convo.media" width="140" style="border-radius:20px;" onerror="this.onerror=null;this.src='/storage/no-preview.png';">
 								</p>
 								<div v-else-if="convo.type == 'link'" class="media d-inline-flex mb-0 cursor-pointer">
 									<div class="media-body">
@@ -90,7 +90,7 @@
 						<div v-else class="media d-inline-flex float-right mb-0">
 							<div class="media-body">
 								<p v-if="convo.type == 'photo'" class="pill-from p-0 shadow">
-									<img :src="convo.media" width="140px" style="border-radius:20px;">
+									<img :src="convo.media" width="140" style="border-radius:20px;" onerror="this.onerror=null;this.src='/storage/no-preview.png';">
 								</p>
 								<div v-else-if="convo.type == 'link'" class="media d-inline-flex float-right mb-0 cursor-pointer">
 									<div class="media-body">
@@ -134,7 +134,7 @@
 								</p>
 								<p v-else>&nbsp;</p>
 							</div>
-							<img v-if="!hideAvatars" class="ml-3 mt-2 rounded-circle img-thumbnail" :src="profile.avatar" alt="avatar" width="32px">
+							<img v-if="!hideAvatars" class="ml-3 mt-2 rounded-circle img-thumbnail" :src="profile.avatar" alt="avatar" width="32" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg';">
 						</div>
 					</li>
 
@@ -682,4 +682,4 @@
 			}
 		}
 	}
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/assets/js/components/PostComponent.vue b/resources/assets/js/components/PostComponent.vue
index 6e7a657ed..38b966ffb 100644
--- a/resources/assets/js/components/PostComponent.vue
+++ b/resources/assets/js/components/PostComponent.vue
@@ -466,7 +466,7 @@
 			<div class="list-group-item border-0 py-1" v-for="(user, index) in likes" :key="'modal_likes_'+index">
 				<div class="media">
 					<a :href="user.url">
-						<img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px">
+						<img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg';">
 					</a>
 					<div class="media-body">
 						<p class="mb-0" style="font-size: 14px">
diff --git a/resources/assets/js/components/Timeline.vue b/resources/assets/js/components/Timeline.vue
index 9f8f0e6c2..7f444bda1 100644
--- a/resources/assets/js/components/Timeline.vue
+++ b/resources/assets/js/components/Timeline.vue
@@ -104,6 +104,7 @@
 							</div>
 
 							<status-card
+								:class="{ 'border-top': index === 0 }"
 								:status="status"
 								:reaction-bar="reactionBar"
 								v-on:status-delete="deleteStatus"