From eb36912e5c1d071b36185f3adcd02a3915d13578 Mon Sep 17 00:00:00 2001
From: boc-the-git <3479092+boc-the-git@users.noreply.github.com>
Date: Fri, 21 Jun 2024 22:17:39 +1000
Subject: [PATCH] feat: If only 1 shopping list, navigate straight to it
 (Shopping List QoL) (#3764)

Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
---
 frontend/pages/shopping-lists/_id.vue   | 11 ++++++++++-
 frontend/pages/shopping-lists/index.vue | 13 ++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/frontend/pages/shopping-lists/_id.vue b/frontend/pages/shopping-lists/_id.vue
index 2f1f99385a7b..9c317a295db8 100644
--- a/frontend/pages/shopping-lists/_id.vue
+++ b/frontend/pages/shopping-lists/_id.vue
@@ -2,7 +2,16 @@
   <v-container v-if="shoppingList" class="md-container">
     <BasePageTitle divider>
       <template #header>
-        <v-img max-height="100" max-width="100" :src="require('~/static/svgs/shopping-cart.svg')"></v-img>
+        <v-container>
+          <v-row>
+            <v-col cols="3" class="text-left">
+              <ButtonLink :to="`/shopping-lists?disableRedirect=true`" :text="$tc('general.back')" :icon="$globals.icons.backArrow" />
+            </v-col>
+            <v-col cols="6" class="d-flex justify-center">
+              <v-img max-height="100" max-width="100" :src="require('~/static/svgs/shopping-cart.svg')"></v-img>
+            </v-col>
+          </v-row>
+        </v-container>
       </template>
       <template #title> {{ shoppingList.name }} </template>
     </BasePageTitle>
diff --git a/frontend/pages/shopping-lists/index.vue b/frontend/pages/shopping-lists/index.vue
index bde98330a51d..0c553822eff9 100644
--- a/frontend/pages/shopping-lists/index.vue
+++ b/frontend/pages/shopping-lists/index.vue
@@ -48,7 +48,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, useAsync, useContext, reactive, toRefs, useRoute } from "@nuxtjs/composition-api";
+import { computed, defineComponent, useAsync, useContext, reactive, toRefs, useRoute, useRouter } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
 import { useAsyncKey } from "~/composables/use-utils";
 import { useShoppingListPreferences } from "~/composables/use-users/preferences";
@@ -59,7 +59,9 @@ export default defineComponent({
     const { $auth } = useContext();
     const userApi = useUserApi();
     const route = useRoute();
+    const router = useRouter();
     const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+    const disableRedirect = computed(() => route.value.query.disableRedirect === "true");
     const preferences = useShoppingListPreferences();
 
     const state = reactive({
@@ -116,6 +118,15 @@ export default defineComponent({
       }
     }
 
+    if (!disableRedirect.value) {
+      useAsync(async () => {
+        await refresh();
+          if (shoppingListChoices.value?.length === 1) {
+            router.push(`/shopping-lists/${shoppingListChoices.value[0].id}`);
+          }
+      }, useAsyncKey());
+    }
+
     return {
       ...toRefs(state),
       groupSlug,