From a25c6f68958e59cece8c7634236739e2ab93c69a Mon Sep 17 00:00:00 2001
From: bkis <kiss@mailbox.org>
Date: Mon, 18 Mar 2024 16:04:16 +0100
Subject: [PATCH] Streamline search request handling

---
 Tekst-Web/src/App.vue                         |  3 +-
 .../browse/ResourceToggleDrawer.vue           |  3 +-
 .../src/components/generic/IconHeading.vue    |  2 +-
 .../components/navigation/PrimaryNavBar.vue   |  3 +-
 .../src/components/navigation/QuickSearch.vue | 25 ++++----
 .../navigation/TextSelectOption.vue           |  2 +-
 .../navigation/ThemeModeSwitcher.vue          |  2 +-
 .../navigation/UserActionsButton.vue          |  3 +-
 .../search/GeneralSearchSettingsForm.vue      |  8 +--
 .../forms/search/QuickSearchSettingsForm.vue  | 10 +--
 Tekst-Web/src/router.ts                       |  2 +-
 Tekst-Web/src/stores/index.ts                 |  2 +
 Tekst-Web/src/stores/search.ts                | 62 +++++++++++++++++++
 Tekst-Web/src/stores/state.ts                 | 17 +----
 Tekst-Web/src/views/ResourceSettingsView.vue  |  5 +-
 Tekst-Web/src/views/SearchResultsView.vue     | 38 ++++++------
 Tekst-Web/src/views/SearchView.vue            | 34 +++++-----
 17 files changed, 134 insertions(+), 87 deletions(-)
 create mode 100644 Tekst-Web/src/stores/search.ts

diff --git a/Tekst-Web/src/App.vue b/Tekst-Web/src/App.vue
index 3f0e3296..c9f17f72 100644
--- a/Tekst-Web/src/App.vue
+++ b/Tekst-Web/src/App.vue
@@ -4,7 +4,7 @@ import InitLoader from '@/components/InitLoader.vue';
 import GlobalMessenger from '@/components/messages/GlobalMessenger.vue';
 import { computed } from 'vue';
 import { getLocaleProfile } from '@/i18n';
-import { useStateStore } from '@/stores';
+import { useStateStore, useThemeStore } from '@/stores';
 import {
   NLoadingBarProvider,
   NConfigProvider,
@@ -13,7 +13,6 @@ import {
   NBackTop,
   useThemeVars,
 } from 'naive-ui';
-import { useThemeStore } from '@/stores/theme';
 import PageHeader from './layout/PageHeader.vue';
 import PageFooter from './layout/PageFooter.vue';
 import { useInitializeApp } from '@/composables/init';
diff --git a/Tekst-Web/src/components/browse/ResourceToggleDrawer.vue b/Tekst-Web/src/components/browse/ResourceToggleDrawer.vue
index 81cef817..c9225f05 100644
--- a/Tekst-Web/src/components/browse/ResourceToggleDrawer.vue
+++ b/Tekst-Web/src/components/browse/ResourceToggleDrawer.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { NDrawer, NDrawerContent, NButton, NSpace, NIcon } from 'naive-ui';
-import { useAuthStore, useBrowseStore, useResourcesStore } from '@/stores';
+import { useAuthStore, useBrowseStore, useResourcesStore, useThemeStore } from '@/stores';
 import ResourceToggleDrawerItem from '@/components/browse/ResourceToggleDrawerItem.vue';
 import IconHeading from '@/components/generic/IconHeading.vue';
 
 import { CheckAllIcon, ResourceIcon, UncheckAllIcon } from '@/icons';
 import LabelledSwitch from '../LabelledSwitch.vue';
-import { useThemeStore } from '@/stores/theme';
 
 const props = defineProps<{ show: boolean }>();
 const emit = defineEmits<{ (e: 'update:show', show: boolean): void }>();
diff --git a/Tekst-Web/src/components/generic/IconHeading.vue b/Tekst-Web/src/components/generic/IconHeading.vue
index 3be35ffc..a45ee306 100644
--- a/Tekst-Web/src/components/generic/IconHeading.vue
+++ b/Tekst-Web/src/components/generic/IconHeading.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type Component } from 'vue';
 import { NEllipsis, NIcon } from 'naive-ui';
-import { useThemeStore } from '@/stores/theme';
+import { useThemeStore } from '@/stores';
 
 withDefaults(
   defineProps<{
diff --git a/Tekst-Web/src/components/navigation/PrimaryNavBar.vue b/Tekst-Web/src/components/navigation/PrimaryNavBar.vue
index 4306a4f2..ff1baa7b 100644
--- a/Tekst-Web/src/components/navigation/PrimaryNavBar.vue
+++ b/Tekst-Web/src/components/navigation/PrimaryNavBar.vue
@@ -6,7 +6,7 @@ import LocaleSwitcher from '@/components/navigation/LocaleSwitcher.vue';
 import UserActionsButton from '@/components/navigation/UserActionsButton.vue';
 import QuickSearchWidget from '@/components/navigation/QuickSearch.vue';
 import HelpNavButton from '@/components/navigation/HelpNavButton.vue';
-import { useAuthStore, useBrowseStore, useStateStore } from '@/stores';
+import { useAuthStore, useBrowseStore, useStateStore, useThemeStore } from '@/stores';
 import { useRoute, RouterLink } from 'vue-router';
 import { usePlatformData } from '@/composables/platformData';
 import NavigationMenu from '@/components/navigation/NavigationMenu.vue';
@@ -16,7 +16,6 @@ import TranslationDisplay from '@/components/generic/TranslationDisplay.vue';
 import logo from '@/assets/logo.png';
 import logoDarkmode from '@/assets/logo-darkmode.png';
 import { HamburgerMenuIcon } from '@/icons';
-import { useThemeStore } from '@/stores/theme';
 import { STATIC_PATH } from '@/common';
 
 const { pfData, systemHome } = usePlatformData();
diff --git a/Tekst-Web/src/components/navigation/QuickSearch.vue b/Tekst-Web/src/components/navigation/QuickSearch.vue
index 5c88dbc7..d469ba53 100644
--- a/Tekst-Web/src/components/navigation/QuickSearch.vue
+++ b/Tekst-Web/src/components/navigation/QuickSearch.vue
@@ -8,17 +8,15 @@ import GenericModal from '@/components/generic/GenericModal.vue';
 import { SearchIcon } from '@/icons';
 import NInputOsk from '@/components/NInputOsk.vue';
 import { useRouter } from 'vue-router';
-import { Base64 } from 'js-base64';
-import { useStateStore } from '@/stores';
-import type { SearchRequestBody } from '@/api';
 import GeneralSearchSettingsForm from '@/forms/search/GeneralSearchSettingsForm.vue';
 import QuickSearchSettingsForm from '@/forms/search/QuickSearchSettingsForm.vue';
+import { useSearchStore } from '@/stores';
 
-const showModal = ref(false);
-const searchInput = ref<string>('');
+const search = useSearchStore();
 const router = useRouter();
-const state = useStateStore();
 
+const showModal = ref(false);
+const searchInput = ref<string>('');
 const inputRef = ref<InputInst>();
 const settingsExpanded = ref<string[]>([]);
 
@@ -26,16 +24,15 @@ function handleSearch(e: UIEvent) {
   e.preventDefault();
   e.stopPropagation();
   showModal.value = false;
-  const reqBody: SearchRequestBody = {
-    type: 'quick',
-    q: searchInput.value,
-    gen: state.searchSettingsGeneral,
-    qck: state.searchSettingsQuick,
-  };
   router.push({
     name: 'searchResults',
-    params: {
-      req: Base64.encode(JSON.stringify(reqBody), true),
+    query: {
+      q: search.encodeQueryParam({
+        type: 'quick',
+        q: searchInput.value,
+        gen: search.settingsGeneral,
+        qck: search.settingsQuick,
+      }),
     },
   });
 }
diff --git a/Tekst-Web/src/components/navigation/TextSelectOption.vue b/Tekst-Web/src/components/navigation/TextSelectOption.vue
index 93ec020e..02b04201 100644
--- a/Tekst-Web/src/components/navigation/TextSelectOption.vue
+++ b/Tekst-Web/src/components/navigation/TextSelectOption.vue
@@ -4,8 +4,8 @@ import { NIcon } from 'naive-ui';
 import TranslationDisplay from '@/components/generic/TranslationDisplay.vue';
 
 import { DisabledVisibleIcon } from '@/icons';
-import { useThemeStore } from '@/stores/theme';
 import { computed } from 'vue';
+import { useThemeStore } from '@/stores';
 
 const props = defineProps<{
   text: TextRead;
diff --git a/Tekst-Web/src/components/navigation/ThemeModeSwitcher.vue b/Tekst-Web/src/components/navigation/ThemeModeSwitcher.vue
index d4c701ab..9325d9ae 100644
--- a/Tekst-Web/src/components/navigation/ThemeModeSwitcher.vue
+++ b/Tekst-Web/src/components/navigation/ThemeModeSwitcher.vue
@@ -2,9 +2,9 @@
 import { NButton, NIcon } from 'naive-ui';
 import { computed } from 'vue';
 import { $t } from '@/i18n';
-import { useThemeStore } from '@/stores/theme';
 
 import { LightModeIcon, DarkModeIcon } from '@/icons';
+import { useThemeStore } from '@/stores';
 
 const theme = useThemeStore();
 
diff --git a/Tekst-Web/src/components/navigation/UserActionsButton.vue b/Tekst-Web/src/components/navigation/UserActionsButton.vue
index 0df950a3..933893d2 100644
--- a/Tekst-Web/src/components/navigation/UserActionsButton.vue
+++ b/Tekst-Web/src/components/navigation/UserActionsButton.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { ref, computed, h } from 'vue';
-import { useAuthStore, useStateStore } from '@/stores';
+import { useAuthStore, useStateStore, useThemeStore } from '@/stores';
 import { type RouteLocationRaw, RouterLink } from 'vue-router';
 import { NButton, NIcon, NDropdown } from 'naive-ui';
 import { $t } from '@/i18n';
-import { useThemeStore } from '@/stores/theme';
 import { LogInIcon, LogOutIcon, UserIcon, AdminIcon, ResourceIcon } from '@/icons';
 import { renderIcon } from '@/utils';
 
diff --git a/Tekst-Web/src/forms/search/GeneralSearchSettingsForm.vue b/Tekst-Web/src/forms/search/GeneralSearchSettingsForm.vue
index 2eca5738..fbc54415 100644
--- a/Tekst-Web/src/forms/search/GeneralSearchSettingsForm.vue
+++ b/Tekst-Web/src/forms/search/GeneralSearchSettingsForm.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import LabelledSwitch from '@/components/LabelledSwitch.vue';
-import { useStateStore } from '@/stores';
+import { useSearchStore } from '@/stores';
 import { NForm, NFormItem } from 'naive-ui';
 
-const state = useStateStore();
+const search = useSearchStore();
 </script>
 
 <template>
-  <n-form :model="state.searchSettingsGeneral">
+  <n-form :model="search.settingsGeneral">
     <!-- STRICT SEARCH MODE -->
     <n-form-item path="strict" :show-label="false" :show-feedback="false">
       <labelled-switch
-        v-model:value="state.searchSettingsGeneral.strict"
+        v-model:value="search.settingsGeneral.strict"
         :label="$t('search.settings.general.strict')"
       />
     </n-form-item>
diff --git a/Tekst-Web/src/forms/search/QuickSearchSettingsForm.vue b/Tekst-Web/src/forms/search/QuickSearchSettingsForm.vue
index 57b90433..da7dd0d4 100644
--- a/Tekst-Web/src/forms/search/QuickSearchSettingsForm.vue
+++ b/Tekst-Web/src/forms/search/QuickSearchSettingsForm.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import LabelledSwitch from '@/components/LabelledSwitch.vue';
 import { usePlatformData } from '@/composables/platformData';
-import { useStateStore } from '@/stores';
+import { useSearchStore } from '@/stores';
 import { NForm, NFormItem, NSelect } from 'naive-ui';
 import { computed } from 'vue';
 
-const state = useStateStore();
+const search = useSearchStore();
 const { pfData } = usePlatformData();
 const textOptions = computed(() =>
   pfData.value?.texts.map((t) => ({ label: t.title, value: t.id }))
@@ -13,11 +13,11 @@ const textOptions = computed(() =>
 </script>
 
 <template>
-  <n-form :model="state.searchSettingsQuick">
+  <n-form :model="search.settingsQuick">
     <!-- TEXTS -->
     <n-form-item path="defaultOperator" :label="$t('search.settings.quick.texts')">
       <n-select
-        v-model:value="state.searchSettingsQuick.texts"
+        v-model:value="search.settingsQuick.texts"
         :options="textOptions"
         :placeholder="$t('search.settings.quick.textsPlaceholder')"
         clearable
@@ -28,7 +28,7 @@ const textOptions = computed(() =>
     <!-- DEFAULT OPERATOR -->
     <n-form-item path="texts" :show-label="false" :show-feedback="false">
       <labelled-switch
-        v-model:value="state.searchSettingsQuick.op"
+        v-model:value="search.settingsQuick.op"
         checked-value="AND"
         unchecked-value="OR"
         :label="$t('search.settings.quick.defaultOperator')"
diff --git a/Tekst-Web/src/router.ts b/Tekst-Web/src/router.ts
index f7cdc48f..58681e5f 100644
--- a/Tekst-Web/src/router.ts
+++ b/Tekst-Web/src/router.ts
@@ -73,7 +73,7 @@ const router = createRouter({
       },
     },
     {
-      path: '/search/:req',
+      path: '/search',
       name: 'searchResults',
       component: SearchResultsView,
     },
diff --git a/Tekst-Web/src/stores/index.ts b/Tekst-Web/src/stores/index.ts
index e2ea8c10..b76854c9 100644
--- a/Tekst-Web/src/stores/index.ts
+++ b/Tekst-Web/src/stores/index.ts
@@ -2,3 +2,5 @@ export * from './auth';
 export * from './state';
 export * from './browse';
 export * from './resources';
+export * from './search';
+export * from './theme';
diff --git a/Tekst-Web/src/stores/search.ts b/Tekst-Web/src/stores/search.ts
new file mode 100644
index 00000000..409a3e0c
--- /dev/null
+++ b/Tekst-Web/src/stores/search.ts
@@ -0,0 +1,62 @@
+import type {
+  AdvancedSearchSettings,
+  GeneralSearchSettings,
+  QuickSearchSettings,
+  SearchRequestBody,
+} from '@/api';
+import { useMessages } from '@/composables/messages';
+import { $t } from '@/i18n';
+import { Base64 } from 'js-base64';
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+export const useSearchStore = defineStore('search', () => {
+  const router = useRouter();
+  const { message } = useMessages();
+
+  const lastReq = ref<SearchRequestBody>();
+
+  const settingsGeneral = ref<GeneralSearchSettings>({
+    strict: false,
+  });
+  const settingsQuick = ref<QuickSearchSettings>({
+    op: 'OR',
+  });
+  const settingsAdvanced = ref<AdvancedSearchSettings>({});
+
+  function encodeQueryParam(requestBody?: SearchRequestBody): string | undefined {
+    if (!requestBody) return undefined;
+    try {
+      return Base64.encode(JSON.stringify(requestBody), true);
+    } catch {
+      message.error($t('errors.unexpected'));
+      return undefined;
+    }
+  }
+
+  function decodeQueryParam(): SearchRequestBody | undefined {
+    const queryParam = router.currentRoute.value.query.q?.toString();
+    try {
+      const decoded: SearchRequestBody = queryParam
+        ? JSON.parse(Base64.decode(queryParam))
+        : undefined;
+      if (!decoded || !['quick', 'advanced'].includes(decoded.type)) {
+        throw new Error();
+      }
+      return decoded;
+    } catch {
+      message.error($t('search.results.msgInvalidRequest'));
+      return undefined;
+    }
+  }
+
+  return {
+    settingsGeneral,
+    settingsQuick,
+    settingsAdvanced,
+    encodeQueryParam,
+    decodeQueryParam,
+    lastReq,
+  };
+});
diff --git a/Tekst-Web/src/stores/state.ts b/Tekst-Web/src/stores/state.ts
index e03ffd78..d0e16334 100644
--- a/Tekst-Web/src/stores/state.ts
+++ b/Tekst-Web/src/stores/state.ts
@@ -5,12 +5,12 @@ import type { RouteLocationNormalized } from 'vue-router';
 import { i18n, setI18nLocale, getAvaliableBrowserLocaleKey, localeProfiles } from '@/i18n';
 import type { LocaleProfile } from '@/i18n';
 import { useRoute } from 'vue-router';
-import type { GeneralSearchSettings, TextRead, TranslationLocaleKey } from '@/api';
+import type { TextRead, TranslationLocaleKey } from '@/api';
 import { $t, $te } from '@/i18n';
 import { usePlatformData } from '@/composables/platformData';
 import { useAuthStore } from './auth';
 import { useMessages } from '@/composables/messages';
-import type { QuickSearchSettings, AdvancedSearchSettings, LocaleKey } from '@/api';
+import type { LocaleKey } from '@/api';
 import { pickTranslation } from '@/utils';
 
 export const useStateStore = defineStore('state', () => {
@@ -123,16 +123,6 @@ export const useStateStore = defineStore('state', () => {
     () => text.value?.levels.map((l) => pickTranslation(l, locale.value)) || []
   );
 
-  // search settings
-
-  const searchSettingsGeneral = ref<GeneralSearchSettings>({
-    strict: false,
-  });
-  const searchSettingsQuick = ref<QuickSearchSettings>({
-    op: 'OR',
-  });
-  const searchSettingsAdvanced = ref<AdvancedSearchSettings>({});
-
   // init loading state
 
   const initLoading = ref(false);
@@ -195,8 +185,5 @@ export const useStateStore = defineStore('state', () => {
     fallbackText,
     textLevelLabels,
     getTextLevelLabel,
-    searchSettingsGeneral,
-    searchSettingsQuick,
-    searchSettingsAdvanced,
   };
 });
diff --git a/Tekst-Web/src/views/ResourceSettingsView.vue b/Tekst-Web/src/views/ResourceSettingsView.vue
index 4f8e9d23..ffc38420 100644
--- a/Tekst-Web/src/views/ResourceSettingsView.vue
+++ b/Tekst-Web/src/views/ResourceSettingsView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type AnyResourceUpdate, PATCH, type AnyResourceRead } from '@/api';
 import { $t } from '@/i18n';
-import { useAuthStore, useStateStore } from '@/stores';
+import { useAuthStore, useResourcesStore, useStateStore } from '@/stores';
 import HelpButtonWidget from '@/components/HelpButtonWidget.vue';
 import IconHeading from '@/components/generic/IconHeading.vue';
 import { useMessages } from '@/composables/messages';
@@ -15,7 +15,6 @@ import { useRoute } from 'vue-router';
 import { useRouter } from 'vue-router';
 import ResourceInfoWidget from '@/components/resource/ResourceInfoWidget.vue';
 import ButtonShelf from '@/components/generic/ButtonShelf.vue';
-import { useResourcesStore } from '@/stores/resources';
 import ResourceSettingsFormItems from '@/forms/resources/config/ResourceSettingsFormItems.vue';
 
 import { SettingsIcon, ArrowBackIcon, ResourceIcon } from '@/icons';
@@ -25,8 +24,8 @@ const route = useRoute();
 const router = useRouter();
 const state = useStateStore();
 const auth = useAuthStore();
-
 const resources = useResourcesStore();
+
 const resource = ref<AnyResourceRead>();
 const getInitialModel = () => _cloneDeep(resource.value);
 
diff --git a/Tekst-Web/src/views/SearchResultsView.vue b/Tekst-Web/src/views/SearchResultsView.vue
index 76fe7c3c..53a12546 100644
--- a/Tekst-Web/src/views/SearchResultsView.vue
+++ b/Tekst-Web/src/views/SearchResultsView.vue
@@ -7,18 +7,17 @@ import { usePlatformData } from '@/composables/platformData';
 import { computed, onBeforeMount, ref, watch } from 'vue';
 import { POST, type SearchRequestBody, type SearchResults, type SortingPreset } from '@/api';
 import type { SearchResultProps } from '@/components/search/SearchResult.vue';
-import { useStateStore } from '@/stores';
+import { useSearchStore, useStateStore, useThemeStore } from '@/stores';
 import HugeLabelledIcon from '@/components/generic/HugeLabelledIcon.vue';
 import { useRoute, useRouter } from 'vue-router';
-import { Base64 } from 'js-base64';
 import { useMessages } from '@/composables/messages';
 import { $t } from '@/i18n';
-import { useThemeStore } from '@/stores/theme';
 import { createReusableTemplate } from '@vueuse/core';
 import SearchResultsSortWidget from '@/components/search/SearchResultsSortWidget.vue';
 
 const { pfData } = usePlatformData();
 const state = useStateStore();
+const search = useSearchStore();
 const route = useRoute();
 const router = useRouter();
 const theme = useThemeStore();
@@ -63,7 +62,7 @@ const results = computed<SearchResultProps[]>(
     }) || []
 );
 
-async function search(resetPage?: boolean) {
+async function execSearch(resetPage?: boolean) {
   if (!searchReq.value) return;
   if (resetPage) {
     pagination.value.page = paginationDefaults().page;
@@ -95,12 +94,13 @@ async function processQuery() {
   resultsData.value = undefined;
   pagination.value.page = 1;
   try {
-    searchReq.value = JSON.parse(Base64.decode(route.params.req?.toString() || ''));
+    searchReq.value = search.decodeQueryParam();
     if (!searchReq.value || !['quick', 'advanced'].includes(searchReq.value.type)) {
       throw new Error();
     }
+    search.lastReq = searchReq.value;
     sortingPreset.value = searchReq.value.gen?.sort || undefined;
-    await search();
+    await execSearch();
   } catch {
     message.error($t('search.results.msgInvalidRequest'));
   } finally {
@@ -109,24 +109,22 @@ async function processQuery() {
 }
 
 function handleSortingChange() {
-  router.push({
+  router.replace({
     name: 'searchResults',
-    params: {
-      req: Base64.encodeURI(
-        JSON.stringify({
-          ...searchReq.value,
-          settingsGeneral: {
-            ...searchReq.value?.gen,
-            sortingPreset: sortingPreset.value,
-          },
-        })
-      ),
+    query: {
+      q: search.encodeQueryParam({
+        ...searchReq.value,
+        gen: {
+          ...searchReq.value?.gen,
+          sort: sortingPreset.value,
+        },
+      } as SearchRequestBody),
     },
   });
 }
 
 watch(
-  () => route.params.req,
+  () => route.query.q,
   () => processQuery()
 );
 
@@ -147,8 +145,8 @@ onBeforeMount(() => processQuery());
         :disabled="loading"
         :size="paginationSize"
         show-size-picker
-        @update:page="() => search()"
-        @update:page-size="() => search(true)"
+        @update:page="() => execSearch()"
+        @update:page-size="() => execSearch(true)"
       >
         <template #suffix>
           <search-results-sort-widget
diff --git a/Tekst-Web/src/views/SearchView.vue b/Tekst-Web/src/views/SearchView.vue
index 74f1270c..fa101fb3 100644
--- a/Tekst-Web/src/views/SearchView.vue
+++ b/Tekst-Web/src/views/SearchView.vue
@@ -5,18 +5,17 @@ import { ClearIcon, NoContentIcon, SearchIcon } from '@/icons';
 import { resourceTypeSearchForms } from '@/forms/resources/search/mappings';
 import { NForm, NButton, NDynamicInput, NIcon, NSelect, NFormItem } from 'naive-ui';
 import { computed, ref, watch } from 'vue';
-import type { AdvancedSearchRequestBody, ResourceType, SearchRequestBody } from '@/api';
-import { useResourcesStore, useStateStore } from '@/stores';
+import type { AdvancedSearchRequestBody, ResourceType } from '@/api';
 import ButtonShelf from '@/components/generic/ButtonShelf.vue';
 import HugeLabelledIcon from '@/components/generic/HugeLabelledIcon.vue';
 import type { SelectMixedOption } from 'naive-ui/es/select/src/interface';
 import CommonSearchFormItems from '@/forms/resources/search/CommonSearchFormItems.vue';
 import { $t } from '@/i18n';
 import { useRouter } from 'vue-router';
-import { Base64 } from 'js-base64';
 import InsertItemSeparator from '@/components/InsertItemSeparator.vue';
+import { useResourcesStore, useSearchStore } from '@/stores';
 
-const state = useStateStore();
+const search = useSearchStore();
 const resources = useResourcesStore();
 const router = useRouter();
 const queries = ref<AdvancedSearchRequestBody['q']>([]);
@@ -33,7 +32,7 @@ function handleResourceChange(resQueryIndex: number, resId: string, resType: Res
   if (!queries.value[resQueryIndex]) return;
   if (queries.value[resQueryIndex].cmn.res !== resId) {
     queries.value[resQueryIndex] = {
-      cmn: { res: resId },
+      cmn: { res: resId, opt: true },
       rts: { ...queries.value[resQueryIndex].rts, type: resType },
     };
   }
@@ -57,24 +56,31 @@ function removeSearchItem(index: number) {
 function handleSearch(e: UIEvent) {
   e.preventDefault();
   e.stopPropagation();
-  const reqBody: SearchRequestBody = {
-    type: 'advanced',
-    q: queries.value,
-    gen: state.searchSettingsGeneral,
-    adv: state.searchSettingsAdvanced,
-  };
   router.push({
     name: 'searchResults',
-    params: {
-      req: Base64.encode(JSON.stringify(reqBody), true),
+    query: {
+      q: search.encodeQueryParam({
+        type: 'advanced',
+        q: queries.value,
+        gen: search.settingsGeneral,
+        adv: search.settingsAdvanced,
+      }),
     },
   });
 }
 
+function initQueries() {
+  if (search.lastReq?.type === 'advanced') {
+    queries.value = search.lastReq.q;
+  } else {
+    queries.value = resources.data.length ? [getNewSearchItem()] : [];
+  }
+}
+
 watch(
   () => resources.data,
   () => {
-    queries.value = resources.data.length ? [getNewSearchItem()] : [];
+    initQueries();
   },
   { immediate: true }
 );