Added entity results to global search.

components/entities/tile.vue

@@ -5,12 +5,20 @@
 	>
 		<img
 			v-if="entity.hasLogo"
-			:src="entity.type === 'network' || entity.isIndependent ? `/logos/${entity.slug}/thumbs/network.png` : `/logos/${entity.parent?.slug}/thumbs/${entity.slug}.png`"
+			:src="entity.type === 'network' || entity.isIndependent || !entity.parent
+				? `/logos/${entity.slug}/thumbs/network.png`
+				: `/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`"
 			:alt="entity.name"
+			loading="lazy"
 			class="logo"
 		>
 
 		<span v-else>{{ entity.name }}</span>
+
+		<Icon
+			v-if="showNetworkSymbol && entity.type === 'network'"
+			icon="device_hub"
+		/>
 	</a>
 </template>
 
@@ -20,6 +28,10 @@ defineProps({
 		type: Object,
 		default: null,
 	},
+	showNetworkSymbol: {
+		type: Boolean,
+		default: true,
+	},
 });
 </script>
 
@@ -33,11 +45,22 @@ defineProps({
 	box-sizing: border-box;
 	padding: 1rem;
 	border-radius: .5rem;
+	position: relative;
 	background: var(--shadow-strong-30);
 	color: var(--text-light);
 	font-size: 1.25rem;
 	font-weight: bold;
 
+	.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);
 	}

pages/search/+Page.vue

@@ -25,6 +25,30 @@
 				</div>
 			</div>
 
+			<div
+				v-if="entities.length > 0"
+				class="results"
+			>
+				<span class="results-meta">
+					Found {{ entities.length }} {{ entities.length > 1 ? 'channels' : 'channel' }}
+
+					<a
+						:href="`/channels/?q=${query}&order=results.desc`"
+						class="link"
+					>Full channel results</a>
+				</span>
+
+				<div class="results-container">
+					<div class="entities">
+						<EntityTile
+							v-for="entity in entities"
+							:key="`entity-${entity.id}`"
+							:entity="entity"
+						/>
+					</div>
+				</div>
+			</div>
+
 			<div
 				v-if="movies.length > 0"
 				class="results"
@@ -86,6 +110,7 @@ import { inject } from 'vue';
 import ActorTile from '#/components/actors/tile.vue';
 import SceneTile from '#/components/scenes/tile.vue';
 import MovieTile from '#/components/movies/tile.vue';
+import EntityTile from '#/components/entities/tile.vue';
 
 const pageContext = inject('pageContext');
 
@@ -93,11 +118,14 @@ const {
 	actors,
 	scenes,
 	movies,
+	entities,
 	actorTotal,
 	sceneTotal,
 	movieTotal,
 } = pageContext.pageProps;
 
+console.log(entities);
+
 const query = pageContext.urlParsed.search.q;
 </script>
 
@@ -131,6 +159,16 @@ const query = pageContext.urlParsed.search.q;
 	flex-grow: 1;
 	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
 	gap: .25rem;
+	box-sizing: border-box;
+	padding: 1rem;
+}
+
+.entities {
+	min-width: 15rem;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, 15rem);
+	gap: .5rem;
+	box-sizing: border-box;
 	padding: 1rem;
 }
 
@@ -139,6 +177,7 @@ const query = pageContext.urlParsed.search.q;
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
 	gap: 1rem;
+	box-sizing: border-box;
 	padding: 1rem;
 }
 
@@ -146,6 +185,7 @@ const query = pageContext.urlParsed.search.q;
 	display: grid;
     grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
 	gap: .5rem;
+	box-sizing: border-box;
 	padding: 1rem;
 }
 

pages/search/+onBeforeRender.js

@@ -1,12 +1,13 @@
 import { fetchScenes } from '#/src/scenes.js';
 import { fetchActors } from '#/src/actors.js';
 import { fetchMovies } from '#/src/movies.js';
+import { fetchEntities } from '#/src/entities.js';
 import { curateScenesQuery } from '#/src/web/scenes.js';
 import { curateActorsQuery } from '#/src/web/actors.js';
 import { curateMoviesQuery } from '#/src/web/movies.js';
 
 export async function onBeforeRender(pageContext) {
-	const [searchScenes, searchActors, searchMovies] = await Promise.all([
+	const [searchScenes, searchActors, searchMovies, entities] = await Promise.all([
 		fetchScenes(await curateScenesQuery({
 			...pageContext.urlQuery,
 			query: pageContext.urlParsed.search.q,
@@ -28,6 +29,10 @@ export async function onBeforeRender(pageContext) {
 			page: Number(pageContext.routeParams.page) || 1,
 			limit: Number(pageContext.urlParsed.search.limit) || 5,
 		}, pageContext.user),
+		fetchEntities({
+			query: pageContext.urlParsed.search.q,
+			limit: 5,
+		}),
 	]);
 
 	const {
@@ -56,6 +61,7 @@ export async function onBeforeRender(pageContext) {
 				actors,
 				scenes,
 				movies,
+				entities,
 				aggYears,
 				aggActors,
 				aggTags,