Optionally showing aliases in actors admin.

pages/admin/actors/+Page.vue

@@ -22,6 +22,12 @@
 				</button>
 			</form>
 
+			<Checkbox
+				label="Show aliased"
+				:checked="showAliased"
+				@change="(checked) => { showAliased = checked; searchActors(); }"
+			/>
+
 			<div class="header-actions">
 				<button
 					class="button"
@@ -67,11 +73,17 @@
 					</td>
 
 					<td
-						v-tooltip="actor.entity?.name || 'Global'"
+						v-tooltip="actor.alias ? `#${actor.alias.id} ${actor.alias.name}` : (actor.entity?.name || 'Global')"
 						class="actor-entity ellipsis"
 					>
+						<Icon
+							v-if="actor.alias"
+							icon="at-sign"
+							class="actor-alias"
+						/>
+
 						<img
-							v-if="actor.entity"
+							v-else-if="actor.entity"
 							:src="`/logos/${actor.entity.slug}/favicon_dark.png`"
 							class="actor-favicon"
 						>
@@ -170,6 +182,7 @@ const actors = ref(pageProps.actors);
 const selectedActors = ref(new Set([]));
 const activeActor = ref(null);
 const actorQuery = ref(urlParsed.search.q || null);
+const showAliased = ref(Object.hasOwn(urlParsed.search, 'alias'));
 
 const lastSelectedIndex = ref(null);
 const holdingShift = ref(false);
@@ -197,7 +210,10 @@ function selectActors(selectedActor, isChecked, index) {
 }
 
 async function searchActors() {
-	navigate('/admin/actors', { q: actorQuery.value || undefined }, { redirect: true });
+	navigate('/admin/actors', {
+		q: actorQuery.value || undefined,
+		alias: showAliased.value || undefined,
+	}, { redirect: true });
 }
 
 onMounted(() => {
@@ -288,6 +304,11 @@ onMounted(() => {
 	border-radius: 1rem;
 }
 
+.actor-alias {
+	fill: var(--primary);
+	padding: .5rem;
+}
+
 th.actor-actions {
 	display: flex;
 	align-items: center;

pages/admin/actors/+onBeforeRender.js

@@ -1,6 +1,7 @@
 import { render } from 'vike/abort'; /* eslint-disable-line import/extensions */
 
 import { fetchActors } from '#/src/actors.js';
+import { curateActorsQuery } from '#/src/web/actors.js';
 import verifyAbility from '#/utils/verify-ability.js';
 
 export default async function onBeforeRender(pageContext) {
@@ -8,9 +9,7 @@ export default async function onBeforeRender(pageContext) {
 		throw render(404);
 	}
 
-	const { actors } = await fetchActors({
-		query: pageContext.urlParsed.search.q,
-	}, {
+	const { actors } = await fetchActors(curateActorsQuery(pageContext.urlParsed.search), {
 		limit: 100,
 		order: pageContext.urlParsed.search.order?.split('.') || ['likes', 'desc'],
 	}, pageContext.user);