made sure that navigateTo is used instead of `router.{push,replace}…

…` as recommended by the nuxt docs

webclient/app/components/AppSearchBar.vue

@@ -10,7 +10,6 @@ const searchBarFocused = defineModel<boolean>("searchBarFocused", {
 });
 const { t, locale } = useI18n({ useScope: "local" });
 const localePath = useLocalePath();
-const router = useRouter();
 const route = useRoute();
 const keep_focus = ref(false);
 const query = ref(Array.isArray(route.query.q) ? (route.query.q[0] ?? "") : (route.query.q ?? ""));
@@ -48,22 +47,19 @@ function searchBlur(): void {
   }
 }
 
-function searchGo(cleanQuery: boolean): void {
+async function searchGo(cleanQuery: boolean): Promise<void> {
   if (query.value.length === 0) return;
 
-  router.push(localePath(`/search?q=${query.value}`));
+  await navigateTo(localePath(`/search?q=${query.value}`));
   searchBarFocused.value = false;
   if (cleanQuery) {
     query.value = "";
   }
   document.getElementById("search")?.blur();
 }
 
-function searchGoTo(id: string, cleanQuery: boolean): void {
-  // Catch is necessary because vue-router throws an error
-  // if navigation is aborted for some reason (e.g. the new
-  // url is the same or there is a loop in redirects)
-  router.push(localePath(`/view/${id}`));
+async function searchGoTo(id: string, cleanQuery: boolean): Promise<void> {
+  await navigateTo(localePath(`/view/${id}`));
   searchBarFocused.value = false;
   if (cleanQuery) {
     query.value = "";

webclient/app/components/PreferencesPopup.vue

@@ -8,9 +8,11 @@ const colorMode = useColorMode();
 const { t } = useI18n({ useScope: "local" });
 
 const { locale } = useI18n();
-const router = useRouter();
 const switchLocalePath = useSwitchLocalePath();
-watchEffect(() => router.push(switchLocalePath(locale.value)));
+
+async function updateLocale(value: string) {
+  await navigateTo(switchLocalePath(value));
+}
 </script>
 
 <template>
@@ -37,7 +39,7 @@ watchEffect(() => router.push(switchLocalePath(locale.value)));
           {{ t("preferences") }}
         </MenuItem>
         <MenuItem as="div" class="text-md text-zinc-500 block px-4 py-1 font-semibold">
-          <SelectionSwitch v-model="colorMode.preference" label="Theme" :current="colorMode.preference">
+          <SelectionSwitch v-model="colorMode.preference" label="Theme">
             <SelectionOption value="system">
               <ComputerDesktopIcon class="mt-0.5 h-4 w-4" />
               system
@@ -53,7 +55,7 @@ watchEffect(() => router.push(switchLocalePath(locale.value)));
           </SelectionSwitch>
         </MenuItem>
         <MenuItem as="div" class="text-md text-zinc-500 block px-4 py-1 font-semibold">
-          <SelectionSwitch v-model="locale" :label="t('language')" :current="locale">
+          <SelectionSwitch v-model="locale" :label="t('language')" @update:model-value="updateLocale">
             <SelectionOption value="de">de</SelectionOption>
             <SelectionOption value="en">en</SelectionOption>
           </SelectionSwitch>

webclient/app/components/SearchSectionList.vue

@@ -10,24 +10,15 @@ defineProps<{
   queryLimitRooms: number;
 }>();
 const { t } = useI18n({ useScope: "local" });
-const localePath = useLocalePath();
-const router = useRouter();
 const route = useRoute();
 </script>
 
 <template>
   <div v-for="s in data.sections" :key="s.facet">
     <section class="flex flex-col gap-2">
       <h2 class="text-md text-zinc-500 font-semibold">{{ t(`sections.${s.facet}`) }}</h2>
-      <ul class="flex flex-col gap-3">
-        <template v-for="(e, i) in s.entries" :key="e.id">
-          <SearchResultItem
-            v-if="i < s.n_visible"
-            :highlighted="false"
-            :item="e"
-            @click="router.push(localePath(`/view/${e.id}`))"
-          />
-        </template>
+      <ul v-for="(e, i) in s.entries" :key="e.id" class="flex flex-col gap-3">
+        <SearchResultItem v-if="i < s.n_visible" :highlighted="false" :item="e" />
       </ul>
       <p v-if="s.estimatedTotalHits > 10" class="text-zinc-500 text-sm">
         {{ t("approx_results", s.estimatedTotalHits) }}

webclient/app/components/SelectionSwitch.vue

@@ -4,22 +4,21 @@ import { ChevronUpDownIcon } from "@heroicons/vue/24/outline";
 
 interface Props {
   label?: string;
-  current: string;
 }
 
 const props = withDefaults(defineProps<Props>(), { label: "" });
-const selectedValue = defineModel<string>({ required: true });
+const model = defineModel<string>({ required: true });
 </script>
 
 <template>
   <div class="flex flex-col">
     <span class="text-sm font-semibold">{{ props.label }}</span>
-    <Listbox v-model="selectedValue">
+    <Listbox v-model="model">
       <div class="relative mt-1">
         <ListboxButton
           class="bg-zinc-200 border-zinc-400 relative w-full cursor-pointer rounded-md border py-2 pl-3 pr-10 text-left shadow-md focus-visible:border-blue-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-300 sm:text-sm"
         >
-          <span class="text-zinc-600 block truncate">{{ current }}</span>
+          <span class="text-zinc-600 block truncate">{{ model }}</span>
           <span class="absolute inset-y-0 right-0 flex items-center pr-2">
             <ChevronUpDownIcon class="text-zinc-600 h-5 w-5" aria-hidden="true" />
           </span>

webclient/app/pages/[view]/[id].vue

@@ -18,6 +18,7 @@ type DetailsResponse = components["schemas"]["DetailsResponse"];
 type ImageInfo = components["schemas"]["ImageInfo"];
 
 const { t, locale } = useI18n({ useScope: "local" });
+const localePath = useLocalePath();
 const route = useRoute();
 const router = useRouter();
 
@@ -45,23 +46,27 @@ const selectedMap = useRouteQuery<"interactive" | "plans">("map", "interactive",
   transform: (val) => (val === "plans" ? "plans" : "interactive"),
 });
 
-watchEffect(() => {
+watchEffect(async () => {
   if (route.params.id === "root") {
-    router.replace({ path: "/" });
+    await navigateTo({ path: localePath("/"), replace: true });
   }
 });
-watchEffect(() => {
+watchEffect(async () => {
   if (error.value) {
-    router.replace({
+    await navigateTo({
       path: "/404",
       query: { ...route.query, path: route.path },
       hash: route.hash,
+      replace: true,
     });
   }
 });
-watch([data, route], () => {
+watch([data, route], async () => {
   if (!data.value) return;
-  if (route.fullPath !== data.value.redirect_url) router.replace({ path: data.value.redirect_url });
+  const redirectPath = localePath(data.value.redirect_url);
+  if (route.path !== redirectPath) {
+    await navigateTo({ path: redirectPath, query: route.query, replace: true });
+  }
 });
 watch([data], () => {
   if (!data.value) return;