better links

components/autocomplete.vue

@@ -52,21 +52,21 @@ defineEmits(["change", "input"]);
 	>
 		<div
 			v-if="!query.isFetching"
-			class="relative m-2 cursor-default overflow-hidden rounded border bg-white text-left shadow-lg"
+			class="relative m-2 flex cursor-default overflow-hidden rounded border bg-white text-left shadow-lg"
 		>
 			<ComboboxInput
-				class="w-96 p-2"
+				class="w-96 truncate p-2"
 				:display-value="(entity) => (entity as HierarchyNode)?.label"
 				@change="
 					input = $event.target.value;
 					$emit('input', $event.target.value);
 				"
 			/>
-			<ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500">
+			<ComboboxButton class="inset-y-0 right-0 flex items-center pr-3 text-gray-500">
 				<Search class="h-5 w-5" />
 			</ComboboxButton>
 		</div>
-		<div v-else class="m-2 h-11 w-96 animate-pulse rounded bg-gray-300 shadow-lg"></div>
+		<div v-else class="m-2 h-11 w-96 animate-pulse rounded bg-gray-300 shadow-lg" />
 		<MenuTransition>
 			<ComboboxOptions
 				v-if="filtered"

components/generic-listbox.vue

@@ -36,7 +36,7 @@ defineEmits(["change"]);
 				<ListboxOption
 					v-for="item in items"
 					:key="item.value"
-					class="cursor-pointer list-none p-2 first-of-type:rounded-t last-of-type:rounded-b ui-active:bg-primary-300"
+					class="cursor-pointer list-none p-2 first-of-type:rounded-t last-of-type:rounded-b ui-selected:bg-primary-300 ui-active:bg-primary-300"
 					:value="item"
 				>
 					<span>{{ item.label }}</span>

components/hierarchy-wrapper.vue

@@ -4,6 +4,8 @@ import { hierarchy } from "d3";
 import type { TreeEntity } from "@/lib/get-tree-data";
 import { Tree } from "@/lib/tree";
 
+const router = useRouter();
+
 const locale = useLocale();
 
 const props = defineProps<{
@@ -57,5 +59,13 @@ function updateTree(data: TreeEntity, width: number) {
 </script>
 
 <template>
-	<div v-html="hierarchyRef?.outerHTML"></div>
+	<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
+	<!-- eslint-disable vuejs-accessibility/click-events-have-key-events -->
+	<div
+		@click.prevent="
+			(event) =>
+				event.target?.parentNode?.href ? router.push(event.target.parentNode.href.baseVal) : null
+		"
+		v-html="hierarchyRef?.outerHTML"
+	/>
 </template>

pages/hierarchy.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { useQuery } from "@tanstack/vue-query";
+import { Loader2 } from "lucide-vue-next";
 
 import HierarchyWrapper from "@/components/hierarchy-wrapper.vue";
 import { getTreeData } from "@/lib/get-tree-data";
@@ -136,7 +137,7 @@ definePageMeta({
 				/>
 				<GenericListbox
 					v-model="options.show"
-					class="m-2 min-w-48"
+					class="m-2 min-w-56"
 					:items="showArgs"
 					@change="({ value }) => router.push({ query: { ...route.query, show: value } })"
 				/>
@@ -148,7 +149,9 @@ definePageMeta({
 					<HierarchyWrapper v-if="query.data" :data="query.data" :width="width" />
 				</VisContainer>
 			</ClientOnly>
-			<div v-else class="animate-pulse">Loading...</div>
+			<Centered v-else>
+				<Loader2 class="h-8 w-8 animate-spin" />
+			</Centered>
 		</div>
 	</MainContent>
 </template>