feat: implement local storage for sorting and dynamic sort icons on the new recipe sort card (#1506)

* added new sort icons

* added dynamic sort icons

* implemented local storage for sorting
and mobile card view

* fixed bug with local storage booleans

* added type hints

* bum vue use to use merge defaults

* use reactive localstorage

* add $vuetify type

* sort returns

* fix type error

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>

frontend/composables/use-users/preferences.ts

@@ -0,0 +1,28 @@
+import { Ref, useContext } from "@nuxtjs/composition-api";
+import { useLocalStorage } from "@vueuse/core";
+
+export interface UserRecipePreferences {
+  orderBy: string;
+  orderDirection: string;
+  sortIcon: string;
+  useMobileCards: boolean;
+}
+
+export function useUserSortPreferences(): Ref<UserRecipePreferences> {
+  const { $globals } = useContext();
+
+  const fromStorage = useLocalStorage(
+    "recipe-section-preferences",
+    {
+      orderBy: "name",
+      orderDirection: "asc",
+      sortIcon: $globals.icons.sortAlphabeticalAscending,
+      useMobileCards: false,
+    },
+    { 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 Ref<UserRecipePreferences>;
+
+  return fromStorage;
+}