Merge remote-tracking branch 'remotes/origin/develop' into corpus-que…

…ry-component

Add typing to corpus-text.vue

components/app-navigation-menu.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { AppWindowIcon, CheckIcon } from "lucide-vue-next";
-
 import type { ItemType, MainItemType } from "@/lib/api-client";
 
 const props = defineProps<{
@@ -13,13 +11,6 @@ const emit = defineEmits<{
 
 const { menus } = toRefs(props);
 
-const router = useRouter();
-const route = useRoute();
-
-const windowsStore = useWindowsStore();
-const { setWindowArrangement } = windowsStore;
-const { arrangement: currentArrangement, registry } = storeToRefs(windowsStore);
-
 const currentMenu = ref("");
 
 function close() {
@@ -58,58 +49,6 @@ onScopeDispose(() => {
 				</template>
 			</MenubarContent>
 		</MenubarMenu>
-
-		<MenubarMenu>
-			<MenubarTrigger aria-label="Windows" class="ml-auto">
-				<AppWindowIcon class="h-6 w-6" />
-			</MenubarTrigger>
-			<MenubarContent align="end">
-				<template v-if="registry.size === 0">
-					<MenubarLabel>No windows open</MenubarLabel>
-				</template>
-				<template v-else>
-					<MenubarLabel>Windows ({{ registry.size }})</MenubarLabel>
-					<MenubarSeparator />
-					<MenubarItem
-						v-for="[id, item] of registry"
-						:key="id"
-						@select="
-							() => {
-								// @ts-expect-error Property missing in upstream types.
-								if (item.winbox.min) {
-									// @ts-expect-error Method missing in upstream types.
-									item.winbox.restore();
-								}
-
-								item.winbox.focus();
-
-								/** Windows are only displayed on `/`. */
-								if (route.path !== '/') {
-									void router.push('/');
-								}
-							}
-						"
-					>
-						{{ item.winbox.title }}
-					</MenubarItem>
-					<MenubarSeparator />
-					<MenubarLabel>Arrangement</MenubarLabel>
-					<MenubarSeparator />
-					<MenubarItem
-						v-for="(arrangement, id) of arrangements"
-						:key="id"
-						class="justify-between"
-						@select="
-							() => {
-								setWindowArrangement(id);
-							}
-						"
-					>
-						{{ arrangement.label }}
-						<CheckIcon v-if="id === currentArrangement" class="h-4 w-4" />
-					</MenubarItem>
-				</template>
-			</MenubarContent>
-		</MenubarMenu>
+		<WindowListDropdown :is-mobile="false" />
 	</Menubar>
 </template>

components/app-navigation-mobile-menu.vue

@@ -30,6 +30,9 @@ onScopeDispose(() => {
 
 <template>
 	<Sheet v-model:open="isSidepanelOpen">
+		<Menubar class="w-full border-none">
+			<WindowListDropdown :is-mobile="true" />
+		</Menubar>
 		<SheetTrigger aria-label="Toggle menu" class="cursor-default">
 			<MenuIcon class="mx-3 my-1.5 h-5 w-5" />
 		</SheetTrigger>

components/corpus-text.vue

@@ -2,18 +2,27 @@
 import "v3-infinite-loading/lib/style.css"; //required if you're not going to override default slots
 
 import InfiniteLoading from "v3-infinite-loading";
+import type { StateHandler } from "v3-infinite-loading/lib/types";
+
+import type { CorpusText, CorpusTextUtterances, HttpResponse } from "@/lib/api-client";
+
+interface CorpusTextParams {
+	id: string;
+	hits: string;
+	u: string;
+}
 
 const props = defineProps<{
-	params: Record<any, any>;
+	params: CorpusTextParams;
 }>();
 
-const utterances = ref([]);
-const utteranceElements = ref([]);
+const utterances = ref<Array<CorpusTextUtterances>>([]);
+const utteranceElements = ref<Array<Element>>([]);
 const currentPage = ref(1);
 const api = useApiClient();
 
 const loadNextPage = async function () {
-	let text;
+	let text: HttpResponse<CorpusText, string>;
 	text = await api.vicav.getCorpusText(
 		{
 			id: props.params.id,
@@ -22,17 +31,19 @@ const loadNextPage = async function () {
 		},
 		{ headers: { Accept: "application/json" } },
 	);
-	utterances.value = utterances.value.concat(text.data.utterances);
-	currentPage.value = currentPage.value + 1;
+	if (text.data.utterances !== undefined) {
+		utterances.value = utterances.value.concat(text.data.utterances);
+		currentPage.value = currentPage.value + 1;
+	}
 	return text;
 };
 
-const handleInfiniteScroll = async function ($state) {
+const handleInfiniteScroll = async function ($state: StateHandler) {
 	try {
 		const text = await loadNextPage();
 		currentPage.value = currentPage.value + 1;
 		$state.loaded();
-		if (text.data.utterances.length < 10) $state.complete();
+		if (text.data.utterances !== undefined && text.data.utterances.length < 10) $state.complete();
 	} catch (e) {
 		$state.error(e);
 	}
@@ -41,12 +52,9 @@ const handleInfiniteScroll = async function ($state) {
 const getText = async function () {
 	let text;
 	do {
-		try {
-			text = await loadNextPage();
-		} catch (e) {
-			console.log(e);
-		}
+		text = await loadNextPage();
 	} while (
+		text.data.utterances !== undefined &&
 		text.data.utterances.filter((u) => u.id === props.params.u).length === 0 &&
 		text.data.utterances.length !== 0
 	);
@@ -55,7 +63,7 @@ const getText = async function () {
 onMounted(async () => {
 	await getText();
 	const u = utteranceElements.value.find((u) => u.id === props.params.u);
-	u.scrollIntoView({ behavior: "smooth" });
+	if (u !== undefined) u.scrollIntoView({ behavior: "smooth" });
 });
 </script>
 

components/window-list-dropdown.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { AppWindowIcon, CheckIcon } from "lucide-vue-next";
+
+// const props = defineProps(["isMobile"]);
+
+const router = useRouter();
+const route = useRoute();
+
+const windowsStore = useWindowsStore();
+const { setWindowArrangement } = windowsStore;
+const { arrangement: currentArrangement, registry } = storeToRefs(windowsStore);
+</script>
+
+<template>
+	<MenubarMenu>
+		<MenubarTrigger aria-label="Windows" class="ml-auto">
+			<AppWindowIcon class="h-6 w-6" />
+		</MenubarTrigger>
+		<MenubarContent align="end">
+			<template v-if="registry.size === 0">
+				<MenubarLabel>No windows open</MenubarLabel>
+			</template>
+			<template v-else>
+				<MenubarLabel>Windows ({{ registry.size }})</MenubarLabel>
+				<MenubarSeparator />
+				<MenubarItem
+					v-for="[id, item] of registry"
+					:key="id"
+					@select="
+						() => {
+							// @ts-expect-error Property missing in upstream types.
+							if (item.winbox.min) {
+								// @ts-expect-error Method missing in upstream types.
+								item.winbox.restore();
+							}
+
+							item.winbox.focus();
+
+							/** Windows are only displayed on `/`. */
+							if (route.path !== '/') {
+								void router.push('/');
+							}
+						}
+					"
+				>
+					{{ item.winbox.title }}
+				</MenubarItem>
+				<template v-if="$props.isMobile === false">
+					<MenubarSeparator />
+					<MenubarLabel>Arrangement</MenubarLabel>
+					<MenubarSeparator />
+					<MenubarItem
+						v-for="(arrangement, id) of arrangements"
+						:key="id"
+						class="justify-between"
+						@select="
+							() => {
+								setWindowArrangement(id);
+							}
+						"
+					>
+						{{ arrangement.label }}
+						<CheckIcon v-if="id === currentArrangement" class="h-4 w-4" />
+					</MenubarItem>
+				</template>
+			</template>
+		</MenubarContent>
+	</MenubarMenu>
+</template>

components/window-manager.client.vue

@@ -10,6 +10,8 @@ const rootElement = ref<HTMLElement | null>(null);
 const debouncedArrangeWindows = debounce(arrangeWindows, 150);
 
 useResizeObserver(rootElement, debouncedArrangeWindows);
+
+onMounted(windowsStore.restoreState);
 </script>
 
 <template>

package.json

@@ -48,7 +48,7 @@
 		"is-ci": "^3.0.1",
 		"leaflet": "^1.9.4",
 		"lucide-vue-next": "^0.289.0",
-		"nanoid": "^5.0.2",
+		"nanoid": "^5.0.3",
 		"npm-run-all2": "^6.1.1",
 		"nuxt": "^3.7.4",
 		"pinia": "^2.1.7",