Implemented notifications, simplified alerts overview.

pages/users/@username/+Page.vue

@@ -83,33 +83,57 @@
 					</button>
 				</div>
 
-				<table class="alerts">
-					<tbody>
-						<tr class="alerts-headers">
-							<th class="alerts-header">Actors</th>
-							<th class="alerts-header">Tags</th>
-							<th class="alerts-header">Entities</th>
-							<th class="alerts-header">Matches</th>
-						</tr>
+				<ul class="alerts nolist">
+					<li
+						v-for="alert in alerts"
+						:key="`alert-${alert.id}`"
+						class="alert"
+					>
+						<div class="alert-details">
+							<span
+								v-if="alert.tags.length > 0"
+								class="alert-tags"
+							><a
+								v-for="tag in alert.tags"
+								:key="`tag-${alert.id}-${tag.id}`"
+								:href="`/tag/${tag.slug}`"
+								class="link"
+							>{{ tag.name }}</a>&nbsp;</span>
 
-						<tr
-							v-for="alert in alerts"
-							:key="`alert-${alert.id}`"
-							class="alert"
-						>
-							<td class="alert-field">{{ alert.actors.map((actor) => actor.name).join(', ') }}</td>
-							<td class="alert-field">{{ alert.tags.map((tag) => tag.name).join(alert.and.tags ? ' + ' : ' | ') }}</td>
-							<td class="alert-field">{{ alert.entities.map((entity) => entity.name).join(', ') }}</td>
-							<td class="alert-field">{{ alert.matches.map((match) => match.expression).join(', ') }}</td>
-							<td class="alert-actions noselect">
-								<Icon
-									icon="bin"
-									@click="removeAlert(alert)"
-								/>
-							</td>
-						</tr>
-					</tbody>
-				</table>
+							<span
+								v-if="alert.actors.length > 0"
+								class="alert-actors"
+							>with <a
+								v-for="actor in alert.actors"
+								:key="`actor-${alert.id}-${actor.id}`"
+								:href="`/actor/${actor.id}/${actor.slug}`"
+								class="link"
+							>{{ actor.name }}</a>&nbsp;</span>
+
+							<span
+								v-if="alert.entities.length > 0"
+								class="alert-entities"
+							>for <a
+								v-for="entity in alert.entities"
+								:key="`entity-${alert.id}-${entity.id}`"
+								:href="`/${entity.type}/${entity.slug}`"
+								class="link"
+							>{{ entity.name }}</a>&nbsp;</span>
+
+							<span
+								v-if="alert.matches.length > 0"
+								class="alert-entities"
+							>matching {{ alert.matches.map((match) => match.expression).join(', ') }}</span>
+						</div>
+
+						<div class="alert-actions">
+							<Icon
+								icon="bin"
+								@click="removeAlert(alert)"
+							/>
+						</div>
+					</li>
+				</ul>
 
 				<AlertDialog
 					v-if="showAlertDialog"
@@ -283,34 +307,35 @@ async function removeAlert(alert) {
 
 .alerts {
 	width: 100%;
-	height: 0;
 }
 
 .alert {
-	&:nth-child(odd) {
-		background: var(--shadow-weak-40);
+	display: flex;
+	align-items: stretch;
+
+	&:not(:last-child) {
+		border-bottom: solid 1px var(--shadow-weak-40);
 	}
 
 	&:hover {
-		background: var(--shadow-weak-30);
+		background: var(--shadow-weak-40);
 	}
 }
 
-.alerts-header {
-	text-align: left;
-}
+.alert-details {
+	padding: .5rem 1rem;
+	flex-grow: 1;
+	line-height: 1.5;
 
-.alerts-header,
-.alert-field {
-	padding: .25rem .5rem;
+	.link {
+		color: inherit;
+	}
 }
 
 .alert-actions {
-	height: 100%;
-
 	.icon {
 		height: 100%;
-		padding: 0 .25rem;
+		padding: 0 .5rem;
 		fill: var(--shadow);
 
 		&:hover {

pages/users/@username/+onBeforeRender.js

@@ -11,8 +11,6 @@ export async function onBeforeRender(pageContext) {
 			: [],
 	]);
 
-	console.log(pageContext.notifications);
-
 	if (!profile) {
 		throw render(404, `Cannot find user '${pageContext.routeParams.username}'.`);
 	}