fix: Recipe Search Quirks and Session Storage (#3541)

Co-authored-by: boc-the-git <3479092+boc-the-git@users.noreply.github.com>
Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>

frontend/composables/use-users/preferences.ts

@@ -1,5 +1,5 @@
 import { Ref, useContext } from "@nuxtjs/composition-api";
-import { useLocalStorage } from "@vueuse/core";
+import { useLocalStorage, useSessionStorage } from "@vueuse/core";
 import { TimelineEventType } from "~/lib/api/types/recipe";
 
 export interface UserPrintPreferences {
@@ -8,6 +8,10 @@ export interface UserPrintPreferences {
   showNotes: boolean;
 }
 
+export interface UserSearchQuery {
+  recipe: string;
+}
+
 export enum ImagePosition {
   hidden = "hidden",
   left = "left",
@@ -20,7 +24,6 @@ export interface UserRecipePreferences {
   filterNull: boolean;
   sortIcon: string;
   useMobileCards: boolean;
-  searchQuery: string;
 }
 
 export interface UserShoppingListPreferences {
@@ -60,7 +63,6 @@ export function useUserSortPreferences(): Ref<UserRecipePreferences> {
       filterNull: false,
       sortIcon: $globals.icons.sortAlphabeticalAscending,
       useMobileCards: false,
-      searchQuery: "",
     },
     { mergeDefaults: true }
     // we cast to a Ref because by default it will return an optional type ref
@@ -70,6 +72,20 @@ export function useUserSortPreferences(): Ref<UserRecipePreferences> {
   return fromStorage;
 }
 
+export function useUserSearchQuerySession(): Ref<UserSearchQuery> {
+  const fromStorage = useSessionStorage(
+    "search-query",
+    {
+      recipe: "",
+    },
+    { mergeDefaults: true }
+    // we cast to a Ref because by default it will return an optional type ref
+    // but since we pass defaults we know all properties are set.
+  ) as unknown as Ref<UserSearchQuery>;
+
+  return fromStorage;
+}
+
 
 export function useShoppingListPreferences(): Ref<UserShoppingListPreferences> {
   const fromStorage = useLocalStorage(