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: {