fix: move window-manager in layout component to ensure window root do…

…es not get unmounted when navigating to imprint and back

components/app-navigation-menu.vue

@@ -13,6 +13,9 @@ 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);
@@ -79,6 +82,11 @@ onScopeDispose(() => {
 								}
 
 								item.winbox.focus();
+
+								/** Windows are only displayed on `/`. */
+								if (route.path !== '/') {
+									void router.push('/');
+								}
 							}
 						"
 					>

layouts/default.vue

@@ -97,14 +97,31 @@ useHead({
 		return scripts;
 	}),
 });
+
+/**
+ * We only want to display windows on the root route.
+ *
+ * We always render the window manager in the layout, to avoid remounting the window root,
+ * and consequently having to manually mount/unmount every single window.
+ * of every single window.
+ */
+const isWindowManagerVisible = computed(() => {
+	return route.path === "/";
+});
 </script>
 
 <template>
 	<div class="grid min-h-full grid-rows-[auto_1fr_auto] bg-neutral-50">
 		<SkipLink :target-id="mainContentId">Skip to main content</SkipLink>
 
 		<AppHeader />
-		<slot />
+		<MainContent>
+			<slot />
+
+			<div :class="{ hidden: !isWindowManagerVisible }" class="relative isolate grid h-full w-full">
+				<WindowManager />
+			</div>
+		</MainContent>
 		<AppFooter />
 
 		<Toaster />

pages/imprint.vue

@@ -16,9 +16,9 @@ const imprint = await useFetch(String(createImprintUrl(defaultLocale, redmineId)
 </script>
 
 <template>
-	<MainContent class="prose mx-auto w-full max-w-3xl py-8">
+	<div class="prose mx-auto w-full max-w-3xl py-8">
 		<h1>Imprint</h1>
 		<!-- eslint-disable-next-line vue/no-v-html -->
 		<div v-if="imprint.data.value" v-html="imprint.data.value" />
-	</MainContent>
+	</div>
 </template>

pages/index.vue

@@ -5,10 +5,5 @@ definePageMeta({
 </script>
 
 <template>
-	<MainContent>
-		<h1 class="sr-only">VICAV - Vienna Corpus of Arabic Varieties</h1>
-		<div class="relative isolate grid h-full w-full">
-			<WindowManager />
-		</div>
-	</MainContent>
+	<h1 class="sr-only">VICAV - Vienna Corpus of Arabic Varieties</h1>
 </template>

stores/use-windows-store.ts

@@ -95,6 +95,7 @@ export const useWindowsStore = defineStore("windows", () => {
 	const arrangement = ref<WindowArrangement>("smart-tile");
 
 	const router = useRouter();
+	const route = useRoute();
 
 	function addWindow<Kind extends WindowItemKind>(params: {
 		id?: string | null;
@@ -106,7 +107,9 @@ export const useWindowsStore = defineStore("windows", () => {
 		if (rootElement == null) return;
 
 		/** Ensure windows open only on `/`. */
-		void router.push("/");
+		if (route.path !== "/") {
+			void router.push("/");
+		}
 
 		const id = params.id ?? `window-${nanoid()}`;
 		const { title, kind } = params;