Refactored alerts to use application code, added regex. Updated Jules Jordan for the Ass Factory relaunch.

assets/components/users/alert.vue

@@ -93,17 +93,43 @@
 			</div>
 
 			<div
-				v-if="alert.entity"
+				v-if="alert.entities.length > 0"
 				class="alert-section alert-trigger"
 			>
-				<h4 class="alert-heading">Channel</h4>
+				<h4 class="alert-heading">{{ alert.entities.length > 1 ? 'Channels' : 'Channel' }}</h4>
 
 				<Entity
-					v-if="alert.entity"
-					:entity="alert.entity"
+					v-for="entity in alert.entities"
+					:key="`${alert.id}${entity.id}`"
+					:entity="entity"
 					class="entity"
 				/>
 			</div>
+
+			<div
+				v-if="alert.matches.length > 0"
+				class="alert-section alert-trigger"
+			>
+				<h4 class="alert-heading">Matches</h4>
+
+				<ul class="alert-matches nolist">
+					<li
+						v-for="match in alert.matches"
+						:key="`match-${match.id}`"
+						class="match"
+					>
+						<span
+							v-if="match.expression.slice(0, 1) === '/' && match.expression.slice(-1) === '/'"
+							class="match-expression"
+						><span class="match-slash">/</span>{{ match.expression.slice(1, -1) }}<span class="match-slash">/</span></span>
+
+						<span
+							v-else
+							class="match-expression"
+						>{{ match.expression }}</span>
+					</li>
+				</ul>
+			</div>
 		</div>
 	</div>
 </template>
@@ -227,26 +253,34 @@ export default {
 }
 
 .alert-actors,
-.alert-tags {
+.alert-tags,
+.alert-matches {
 	display: flex;
 	grid-gap: .5rem;
 }
 
-.tag {
+.tag,
+.match {
 	color: var(--shadow-strong);
 	padding: .5rem;
 	border: solid 1px var(--shadow-hint);
 	font-size: .9rem;
 	font-weight: bold;
+}
 
-	&:hover {
-		cursor: pointer;
-		border: solid 1px var(--primary);
-	}
+.tag:hover {
+	cursor: pointer;
+	border: solid 1px var(--primary);
 }
 
 .entity {
 	width: 10rem;
 	height: 2.5rem;
 }
+
+.match-slash {
+	padding: 0 .1rem;
+	color: var(--primary);
+	font-weight: bold;
+}
 </style>