From bd5b7762d3be273bc1854bc3c813068f9ac377c2 Mon Sep 17 00:00:00 2001
From: Felix Schneider <mail@fschneider.me>
Date: Mon, 28 Jul 2025 14:48:13 +0200
Subject: [PATCH] feat: save default recipe ordering in local storage

---
 .../Domain/Recipe/RecipeExplorerPage.vue      | 27 +++++++++++++++++--
 frontend/composables/use-users/preferences.ts |  4 +--
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeExplorerPage.vue b/frontend/components/Domain/Recipe/RecipeExplorerPage.vue
index e08d9ed59..3ba571095 100644
--- a/frontend/components/Domain/Recipe/RecipeExplorerPage.vue
+++ b/frontend/components/Domain/Recipe/RecipeExplorerPage.vue
@@ -123,7 +123,7 @@
                   density="comfortable"
                   :prepend-icon="v.icon"
                   :title="v.name"
-                  @click="state.orderBy = v.value"
+                  @click="setOrderBy(v.value)"
                 />
               </v-list>
             </v-card>
@@ -219,7 +219,7 @@ import {
   useToolStore,
   usePublicToolStore,
 } from "~/composables/store";
-import { useUserSearchQuerySession } from "~/composables/use-users/preferences";
+import { useUserSearchQuerySession, useUserSortPreferences } from "~/composables/use-users/preferences";
 import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
 import type { IngredientFood, RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/recipe";
 import type { NoUndefinedField } from "~/lib/api/types/non-generated";
@@ -253,6 +253,15 @@ export default defineNuxtComponent({
     const route = useRoute();
     const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
     const searchQuerySession = useUserSearchQuerySession();
+    const sortPreferences = useUserSortPreferences();
+
+    watch(() => state.value.orderBy, (newValue) => {
+      sortPreferences.value.orderBy = newValue;
+    });
+
+    watch(() => state.value.orderDirection, (newValue) => {
+      sortPreferences.value.orderDirection = newValue;
+    });
 
     const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes(isOwnGroup.value ? null : groupSlug.value);
     const categories = isOwnGroup.value ? useCategoryStore() : usePublicCategoryStore(groupSlug.value);
@@ -325,6 +334,12 @@ export default defineNuxtComponent({
 
     function toggleOrderDirection() {
       state.value.orderDirection = state.value.orderDirection === "asc" ? "desc" : "asc";
+      sortPreferences.value.orderDirection = state.value.orderDirection;
+    }
+
+    function setOrderBy(value: string) {
+      state.value.orderBy = value;
+      sortPreferences.value.orderBy = value;
     }
 
     function toIDArray(array: { id: string }[]) {
@@ -623,6 +638,13 @@ export default defineNuxtComponent({
       }
 
       await hydrateSearch();
+      if (!route.query.orderBy) {
+        state.value.orderBy = sortPreferences.value.orderBy;
+      }
+      if (!route.query.orderDirection) {
+        state.value.orderDirection = sortPreferences.value.orderDirection as "asc" | "desc";
+      }
+
       await search();
       state.value.ready = true;
     });
@@ -665,6 +687,7 @@ export default defineNuxtComponent({
 
       sortable,
       toggleOrderDirection,
+      setOrderBy,
       hideKeyboard,
       input,
 
diff --git a/frontend/composables/use-users/preferences.ts b/frontend/composables/use-users/preferences.ts
index 6b03c58f3..c0686a3bf 100644
--- a/frontend/composables/use-users/preferences.ts
+++ b/frontend/composables/use-users/preferences.ts
@@ -96,8 +96,8 @@ export function useUserSortPreferences(): Ref<UserRecipePreferences> {
   const fromStorage = useLocalStorage(
     "recipe-section-preferences",
     {
-      orderBy: "name",
-      orderDirection: "asc",
+      orderBy: "created_at",
+      orderDirection: "desc",
       filterNull: false,
       sortIcon: $globals.icons.sortAlphabeticalAscending,
       useMobileCards: false,