Added remaining elements to alert dialog.

pages/entities/+Page.vue

@@ -9,6 +9,7 @@
 				type="search"
 				placeholder="Search channel"
 				class="search input"
+				@search="search"
 			>
 
 			<Icon
@@ -41,6 +42,11 @@
 						>
 
 						<span v-else>{{ network.name }}</span>
+
+						<Icon
+							v-if="query && network.type === 'network'"
+							icon="device_hub"
+						/>
 					</a>
 				</li>
 			</ul>
@@ -51,7 +57,6 @@
 <script setup>
 import { ref, inject } from 'vue';
 
-import { get } from '#/src/api.js';
 import navigate from '#/src/navigate.js';
 
 const pageContext = inject('pageContext');
@@ -94,22 +99,21 @@ const popularNetworks = [
 	'xempire',
 ].map((slug) => networksBySlug[slug]).filter(Boolean);
 
+const query = ref(pageContext.urlParsed.search.q || null);
+
 const sections = [
-	{
+	!query.value && {
 		label: 'Popular',
 		networks: popularNetworks,
 	},
 	{
-		label: 'All network',
+		label: query.value ? 'Results' : 'All networks',
 		networks,
 	},
-];
-
-const query = ref(pageContext.urlParsed.search.q || null);
+].filter(Boolean);
 
 async function search() {
-	await get('/entities', { query: query.value });
-	navigate('/channels', { q: query.value });
+	navigate('/channels', { q: query.value || undefined }, { redirect: true });
 }
 </script>
 
@@ -137,7 +141,7 @@ async function search() {
 
 .networks {
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
 	gap: .5rem;
 	padding: .5rem 1rem;
 }
@@ -153,12 +157,24 @@ async function search() {
 	justify-content: center;
 	align-items: center;
 	aspect-ratio: 4/1;
+	position: relative;
 	padding: 1rem;
 	border-radius: .5rem;
 	background: var(--grey-dark-40);
 	color: var(--text-light);
 	font-size: 1.25rem;
 	font-weight: bold;
+	overflow: hidden;
+
+	.icon {
+		position: absolute;
+		top: -.25rem;
+		right: -.25rem;
+		padding: .4rem .55rem .25rem .25rem;
+		border-radius: .25rem;
+		background: var(--highlight-weak-30);
+		fill: var(--text-light);
+	}
 
 	&:hover {
 		box-shadow: 0 0 3px var(--shadow);
@@ -173,13 +189,13 @@ async function search() {
 
 @media(--small-30) {
 	.networks {
-		grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+		grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
 	}
 }
 
 @media(--small-50) {
 	.networks {
-		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+		grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
 	}
 }
 </style>

pages/entities/+onBeforeRender.js

@@ -1,7 +1,9 @@
 import { fetchEntities } from '#/src/entities.js';
 
-export async function onBeforeRender(_pageContext) {
-	const networks = await fetchEntities({ type: 'primary' });
+export async function onBeforeRender(pageContext) {
+	const networks = await fetchEntities(pageContext.urlParsed.search.q
+		? { query: pageContext.urlParsed.search.q }
+		: { type: 'primary' });
 
 	return {
 		pageContext: {

pages/users/@username/+Page.vue

@@ -66,6 +66,56 @@
 					</li>
 				</ul>
 			</section>
+
+			<section
+				v-if="profile.id === user?.id"
+				class="profile-section"
+			>
+				<div class="section-header">
+					<h3 class="heading">Alerts</h3>
+
+					<button
+						class="button"
+						@click="showAlertDialog = true"
+					>
+						<Icon icon="plus3" />
+						<span class="button-label">New alert</span>
+					</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>
+
+						<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>
+
+				<AlertDialog
+					v-if="showAlertDialog"
+					@close="showAlertDialog = false; reloadAlerts();"
+				/>
+			</section>
 		</div>
 	</div>
 </template>
@@ -74,20 +124,23 @@
 import { ref, inject } from 'vue';
 import { formatDistanceStrict } from 'date-fns';
 
-import { get, post } from '#/src/api.js';
+import { get, post, del } from '#/src/api.js';
 
 import StashTile from '#/components/stashes/tile.vue';
 import Dialog from '#/components/dialog/dialog.vue';
+import AlertDialog from '#/components/alerts/create.vue';
 
 const pageContext = inject('pageContext');
 const user = pageContext.user;
 const profile = ref(pageContext.pageProps.profile);
+const alerts = ref(pageContext.pageProps.alerts);
 
 const stashName = ref(null);
 const stashNameInput = ref(null);
 
 const done = ref(true);
 const showStashDialog = ref(false);
+const showAlertDialog = ref(false);
 
 async function reloadProfile() {
 	profile.value = await get(`/users/${profile.value.id}`);
@@ -100,20 +153,55 @@ async function createStash() {
 
 	done.value = false;
 
-	await post('/stashes', {
-		name: stashName.value,
-		public: false,
-	}, {
-		successFeedback: `Created stash '${stashName.value}'`,
-		errorFeedback: `Failed to create stash '${stashName.value}'`,
-		appendErrorMessage: true,
-	}).finally(() => { done.value = true; });
+	try {
+		await post('/stashes', {
+			name: stashName.value,
+			public: false,
+		}, {
+			successFeedback: `Created stash '${stashName.value}'`,
+			errorFeedback: `Failed to create stash '${stashName.value}'`,
+			appendErrorMessage: true,
+		});
+	} finally {
+		done.value = true;
+	}
 
 	showStashDialog.value = false;
 	stashName.value = null;
 
 	await reloadProfile();
 }
+
+async function reloadAlerts() {
+	alerts.value = await get('/alerts');
+}
+
+async function removeAlert(alert) {
+	if (done.value === false) {
+		return;
+	}
+
+	done.value = false;
+
+	const alertLabel = [
+		...alert.actors.map((actor) => actor.name),
+		...alert.tags.map((tag) => tag.name),
+		...alert.entities.map((entity) => entity.name),
+		...alert.matches.map((match) => match.expression),
+	].filter(Boolean).join(', ');
+
+	try {
+		await del(`/alerts/${alert.id}`, {
+			undoFeedback: `Removed alert for '${alertLabel}'`,
+			errorFeedback: `Failed to remove alert for '${alertLabel}'`,
+			appendErrorMessage: true,
+		});
+
+		await reloadAlerts();
+	} finally {
+		done.value = true;
+	}
+}
 </script>
 
 <style scoped>
@@ -193,6 +281,45 @@ async function createStash() {
 	padding: 0 .5rem 1rem .5rem;
 }
 
+.alerts {
+	width: 100%;
+	height: 0;
+}
+
+.alert {
+	&:nth-child(odd) {
+		background: var(--shadow-weak-40);
+	}
+
+	&:hover {
+		background: var(--shadow-weak-30);
+	}
+}
+
+.alerts-header {
+	text-align: left;
+}
+
+.alerts-header,
+.alert-field {
+	padding: .25rem .5rem;
+}
+
+.alert-actions {
+	height: 100%;
+
+	.icon {
+		height: 100%;
+		padding: 0 .25rem;
+		fill: var(--shadow);
+
+		&:hover {
+			cursor: pointer;
+			fill: var(--primary);
+		}
+	}
+}
+
 .dialog-body {
 	padding: 1rem;
 

pages/users/@username/+onBeforeRender.js

@@ -1,11 +1,17 @@
 import { render } from 'vike/abort'; /* eslint-disable-line import/extensions */
 
 import { fetchUser } from '#/src/users.js';
+import { fetchAlerts } from '#/src/alerts.js';
 
 export async function onBeforeRender(pageContext) {
-	const profile = await fetchUser(pageContext.routeParams.username, {}, pageContext.user);
+	const [profile, alerts] = await Promise.all([
+		fetchUser(pageContext.routeParams.username, {}, pageContext.user),
+		pageContext.routeParams.username === pageContext.user?.username
+			? fetchAlerts(pageContext.user)
+			: [],
+	]);
 
-	// console.log(profile);
+	console.log('out alerts', alerts);
 
 	if (!profile) {
 		throw render(404, `Cannot find user '${pageContext.routeParams.username}'.`);
@@ -16,6 +22,7 @@ export async function onBeforeRender(pageContext) {
 			title: profile.username,
 			pageProps: {
 				profile, // differentiate from authed 'user'
+				alerts,
 			},
 		},
 	};