List alerts in profile

assets/components/users/user.vue

@@ -43,18 +43,61 @@
 					<Icon icon="plus2" />
 				</li>
 			</ul>
+
+			<AddStash
+				v-if="showAddStash"
+				@close="closeAddStash"
+			/>
 		</section>
 
-		<AddStash
-			v-if="showAddStash"
-			@close="closeAddStash"
-		/>
+		<section
+			v-if="user.alerts?.length > 0"
+			class="section"
+		>
+			<div class="section-header">
+				<h3 class="section-heading">Alerts</h3>
+
+				<Icon
+					icon="plus3"
+					class="header-add"
+					@click="showAddAlert = true"
+				/>
+			</div>
+
+			<ul class="section-body alerts nolist">
+				<li
+					v-for="alert in user.alerts"
+					:key="`alert-${alert.id}`"
+					class="alert"
+				>
+					<Alert
+						:alert="alert"
+						:is-me="isMe"
+						@remove="() => fetchUser()"
+					/>
+				</li>
+
+				<li
+					class="alerts-add"
+					@click="showAddAlert = true"
+				>
+					<Icon icon="plus2" />
+				</li>
+			</ul>
+
+			<AddAlert
+				v-if="showAddAlert"
+				@close="closeAddAlert"
+			>Alert</AddAlert>
+		</section>
 	</div>
 </template>
 
 <script>
 import Stash from './stash.vue';
-import AddStash from '../stashes/add-stash.vue';
+import Alert from './alert.vue';
+import AddStash from '../stashes/add.vue';
+import AddAlert from '../alerts/add.vue';
 
 async function fetchUser() {
 	this.user = await this.$store.dispatch('fetchUser', this.$route.params.username);
@@ -71,13 +114,23 @@ async function closeAddStash(addedStash) {
 	}
 }
 
+async function closeAddAlert(addedAlert) {
+	this.showAddAlert = false;
+
+	if (addedAlert) {
+		await this.fetchUser();
+	}
+}
+
 async function mounted() {
 	await this.fetchUser();
 }
 
 export default {
 	components: {
+		AddAlert,
 		AddStash,
+		Alert,
 		Stash,
 	},
 	data() {
@@ -88,10 +141,12 @@ export default {
 			isMe: false,
 			pageTitle: null,
 			showAddStash: false,
+			showAddAlert: false,
 		};
 	},
 	mounted,
 	methods: {
+		closeAddAlert,
 		closeAddStash,
 		fetchUser,
 	},
@@ -122,7 +177,8 @@ export default {
 	margin: 0 0 1rem 0;
 }
 
-.stashes {
+.stashes,
+.alerts {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
 	grid-auto-rows: 15fr;
@@ -162,7 +218,8 @@ export default {
 	min-width: 0;
 }
 
-.stashes-add {
+.stashes-add,
+.alerts-add {
 	height: 100%;
 	display: flex;
 	align-items: center;
@@ -186,7 +243,8 @@ export default {
 }
 
 @media(max-width: $breakpoint-kilo) {
-	.stashes {
+	.stashes,
+	.alerts {
 		grid-template-columns: 1fr;
 	}
 }