feat: Remove Explore URLs and make the normal URLs public (#2632)

* add groupSlug to most routes

* fixed more routing issues

* fixed jank and incorrect routes

* remove public explore links

* remove unused groupSlug and explore routes

* nuked explore pages

* fixed public toolstore bug

* fixed various routes missing group slug

* restored public app header menu

* fix janky login redirect

* 404 recipe API call returns to login

* removed unused explore layout

* force redirect when using the wrong group slug

* fixed dead admin links

* removed unused middleware from earlier attempt

* 🧹

* improve cookbooks sidebar
fixed sidebar link not working
fixed sidebar link target
hide cookbooks header when there are none

* added group slug to user

* fix $auth typehints

* vastly simplified groupSlug logic

* allow logged-in users to view other groups

* fixed some edgecases that bypassed isOwnGroup

* fixed static home ref

* 🧹

* fixed redirect logic

* lint warning

* removed group slug from group and user pages
refactored all components to use route groupSlug or user group slug
moved some group pages to recipe pages

* fixed some bad types

* 🧹

* moved groupSlug routes under /g/groupSlug

* move /recipe/ to /r/

* fix backend url generation and metadata injection

* moved shopping lists to root/other route fixes

* changed shared from /recipes/ to /r/

* fixed 404 redirect not awaiting

* removed unused import

* fix doc links

* fix public recipe setting not affecting public API

* fixed backend tests

* fix nuxt-generate command

---------

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

frontend/components/Domain/Cookbook/CookbookPage.vue

@@ -15,7 +15,6 @@
           class="mb-5 mx-1"
           :recipes="recipes"
           :query="{ cookbook: slug }"
-          :group-slug="groupSlug"
           @sortRecipes="assignSorted"
           @replaceRecipes="replaceRecipes"
           @appendRecipes="appendRecipes"
@@ -30,24 +29,20 @@
   import { useLazyRecipes } from "~/composables/recipes";
   import RecipeCardSection from "@/components/Domain/Recipe/RecipeCardSection.vue";
   import { useCookbook } from "~/composables/use-group-cookbooks";
+  import { useLoggedInState } from "~/composables/use-logged-in-state";
 
   export default defineComponent({
     components: { RecipeCardSection },
-    props: {
-      groupSlug: {
-        type: String,
-        default: undefined,
-      }
-    },
-    setup(props) {
+    setup() {
       const { $auth } = useContext();
-      const loggedIn = computed(() => $auth.loggedIn);
-
-      const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes(loggedIn.value ? null : props.groupSlug);
+      const { isOwnGroup } = useLoggedInState();
 
       const route = useRoute();
+      const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+
+      const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes(isOwnGroup.value ? null : groupSlug.value);
       const slug = route.value.params.slug;
-      const { getOne } = useCookbook(loggedIn.value ? null : props.groupSlug);
+      const { getOne } = useCookbook(isOwnGroup.value ? null : groupSlug.value);
 
       const tab = ref(null);
       const book = getOne(slug);

frontend/components/Domain/Recipe/RecipeActionMenu.vue

@@ -70,7 +70,6 @@
           print: true,
           printPreferences: true,
           share: loggedIn,
-          publicUrl: recipe.settings && loggedIn ? recipe.settings.public : false,
         }"
         @print="$emit('print')"
       />

frontend/components/Domain/Recipe/RecipeCard.vue

@@ -34,7 +34,7 @@
 
         <slot name="actions">
           <v-card-actions class="px-1">
-            <RecipeFavoriteBadge v-if="loggedIn" class="absolute" :slug="slug" show-always />
+            <RecipeFavoriteBadge v-if="isOwnGroup" class="absolute" :slug="slug" show-always />
 
             <RecipeRating class="pb-1" :value="rating" :name="name" :slug="slug" :small="true" />
             <v-spacer></v-spacer>
@@ -42,7 +42,7 @@
 
             <!-- If we're not logged-in, no items display, so we hide this menu -->
             <RecipeContextMenu
-              v-if="loggedIn"
+              v-if="isOwnGroup"
               color="grey darken-2"
               :slug="slug"
               :name="name"
@@ -56,7 +56,6 @@
                 print: false,
                 printPreferences: false,
                 share: true,
-                publicUrl: false,
               }"
               @delete="$emit('delete', slug)"
             />
@@ -69,12 +68,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
+import { computed, defineComponent, useContext, useRoute } from "@nuxtjs/composition-api";
 import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
 import RecipeChips from "./RecipeChips.vue";
 import RecipeContextMenu from "./RecipeContextMenu.vue";
 import RecipeCardImage from "./RecipeCardImage.vue";
 import RecipeRating from "./RecipeRating.vue";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 
 export default defineComponent({
   components: { RecipeFavoriteBadge, RecipeChips, RecipeContextMenu, RecipeRating, RecipeCardImage },
@@ -83,10 +83,6 @@ export default defineComponent({
       type: String,
       required: true,
     },
-    groupSlug: {
-      type: String,
-      default: null,
-    },
     slug: {
       type: String,
       required: true,
@@ -124,16 +120,16 @@ export default defineComponent({
   },
   setup(props) {
     const { $auth } = useContext();
-    const loggedIn = computed(() => {
-      return $auth.loggedIn;
-    });
+    const { isOwnGroup } = useLoggedInState();
 
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "")
     const recipeRoute = computed<string>(() => {
-      return loggedIn.value ? `/recipe/${props.slug}` : `/explore/recipes/${props.groupSlug}/${props.slug}`;
+      return `/g/${groupSlug.value}/r/${props.slug}`;
     });
 
     return {
-      loggedIn,
+      isOwnGroup,
       recipeRoute,
     };
   },

frontend/components/Domain/Recipe/RecipeCardMobile.vue

@@ -37,10 +37,10 @@
           </v-list-item-subtitle>
           <div class="d-flex flex-wrap justify-end align-center">
             <slot name="actions">
-              <RecipeFavoriteBadge v-if="loggedIn" :slug="slug" show-always />
+              <RecipeFavoriteBadge v-if="isOwnGroup" :slug="slug" show-always />
               <v-rating
                 color="secondary"
-                :class="loggedIn ? 'ml-auto' : 'ml-auto pb-2'"
+                :class="isOwnGroup ? 'ml-auto' : 'ml-auto pb-2'"
                 background-color="secondary lighten-3"
                 dense
                 length="5"
@@ -52,7 +52,7 @@
               <!-- If we're not logged-in, no items display, so we hide this menu -->
               <!-- We also add padding to the v-rating above to compensate -->
               <RecipeContextMenu
-                v-if="loggedIn"
+                v-if="isOwnGroup"
                 :slug="slug"
                 :menu-icon="$globals.icons.dotsHorizontal"
                 :name="name"
@@ -66,7 +66,6 @@
                   print: false,
                   printPreferences: false,
                   share: true,
-                  publicUrl: false,
                 }"
                 @deleted="$emit('delete', slug)"
               />
@@ -80,10 +79,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
+import { computed, defineComponent, useContext, useRoute } from "@nuxtjs/composition-api";
 import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
 import RecipeContextMenu from "./RecipeContextMenu.vue";
 import RecipeCardImage from "./RecipeCardImage.vue";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 
 export default defineComponent({
   components: {
@@ -96,10 +96,6 @@ export default defineComponent({
       type: String,
       required: true,
     },
-    groupSlug: {
-      type: String,
-      default: null,
-    },
     slug: {
       type: String,
       required: true,
@@ -136,16 +132,16 @@ export default defineComponent({
   },
   setup(props) {
     const { $auth } = useContext();
-    const loggedIn = computed(() => {
-      return $auth.loggedIn;
-    });
+    const { isOwnGroup } = useLoggedInState();
 
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "")
     const recipeRoute = computed<string>(() => {
-      return loggedIn.value ? `/recipe/${props.slug}` : `/explore/recipes/${props.groupSlug}/${props.slug}`;
+      return `/g/${groupSlug.value}/r/${props.slug}`;
     });
 
     return {
-      loggedIn,
+      isOwnGroup,
       recipeRoute,
     };
   },

frontend/components/Domain/Recipe/RecipeCardSection.vue

@@ -76,7 +76,6 @@
             <RecipeCard
               :name="recipe.name"
               :description="recipe.description"
-              :group-slug="groupSlug"
               :slug="recipe.slug"
               :rating="recipe.rating"
               :image="recipe.image"
@@ -100,7 +99,6 @@
             <RecipeCardMobile
               :name="recipe.name"
               :description="recipe.description"
-              :group-slug="groupSlug"
               :slug="recipe.slug"
               :rating="recipe.rating"
               :image="recipe.image"
@@ -128,12 +126,14 @@ import {
   toRefs,
   useAsync,
   useContext,
+  useRoute,
   useRouter,
   watch,
 } from "@nuxtjs/composition-api";
 import { useThrottleFn } from "@vueuse/core";
 import RecipeCard from "./RecipeCard.vue";
 import RecipeCardMobile from "./RecipeCardMobile.vue";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { useAsyncKey } from "~/composables/use-utils";
 import { useLazyRecipes } from "~/composables/recipes";
 import { Recipe } from "~/lib/api/types/recipe";
@@ -165,10 +165,6 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    groupSlug: {
-      type: String,
-      default: null,
-    },
     recipes: {
       type: Array as () => Recipe[],
       default: () => [],
@@ -191,9 +187,7 @@ export default defineComponent({
     };
 
     const { $auth, $globals, $vuetify } = useContext();
-    const loggedIn = computed(() => {
-      return $auth.loggedIn;
-    });
+    const { isOwnGroup } = useLoggedInState();
     const useMobileCards = computed(() => {
       return $vuetify.breakpoint.smAndDown || preferences.value.useMobileCards;
     });
@@ -206,12 +200,15 @@ export default defineComponent({
       sortLoading: false,
     });
 
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+
     const router = useRouter();
     function navigateRandom() {
       if (props.recipes.length > 0) {
         const recipe = props.recipes[Math.floor(Math.random() * props.recipes.length)];
         if (recipe.slug !== undefined) {
-          router.push(loggedIn.value ? `/recipe/${recipe.slug}` : `/explore/recipes/${props.groupSlug}/${recipe.slug}`);
+          router.push(`/g/${groupSlug.value}/r/${recipe.slug}`);
         }
       }
     }
@@ -222,7 +219,7 @@ export default defineComponent({
     const ready = ref(false);
     const loading = ref(false);
 
-    const { fetchMore } = useLazyRecipes(loggedIn.value ? null : props.groupSlug);
+    const { fetchMore } = useLazyRecipes(isOwnGroup.value ? null : groupSlug.value);
 
     const queryFilter = computed(() => {
       const orderBy = props.query?.orderBy || preferences.value.orderBy;

frontend/components/Domain/Recipe/RecipeChips.vue

@@ -9,7 +9,7 @@
       color="accent"
       :small="small"
       dark
-      :to=" loggedIn ? `/?${urlPrefix}=${category.id}` : undefined"
+      :to="isOwnGroup ? `${baseRecipeRoute}?${urlPrefix}=${category.id}` : undefined"
     >
       {{ truncateText(category.name) }}
     </v-chip>
@@ -17,7 +17,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
+import { computed, defineComponent, useContext, useRoute } from "@nuxtjs/composition-api";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/user";
 
 export type UrlPrefixParam = "tags" | "categories" | "tools";
@@ -55,9 +56,13 @@ export default defineComponent({
   },
   setup(props) {
     const { $auth } = useContext();
-    const loggedIn = computed(() => {
-      return $auth.loggedIn
-    })
+    const { isOwnGroup } = useLoggedInState();
+
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "")
+    const baseRecipeRoute = computed<string>(() => {
+      return `/g/${groupSlug.value}`
+    });
 
     function truncateText(text: string, length = 20, clamp = "...") {
       if (!props.truncate) return text;
@@ -68,7 +73,8 @@ export default defineComponent({
     }
 
     return {
-      loggedIn,
+      baseRecipeRoute,
+      isOwnGroup,
       truncateText,
     };
   },

frontend/components/Domain/Recipe/RecipeContextMenu.vue

@@ -170,10 +170,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, reactive, toRefs, useContext, useRouter, ref } from "@nuxtjs/composition-api";
+import { computed, defineComponent, reactive, toRefs, useContext, useRoute, useRouter, ref } from "@nuxtjs/composition-api";
 import RecipeIngredientListItem from "./RecipeIngredientListItem.vue";
 import RecipeDialogPrintPreferences from "./RecipeDialogPrintPreferences.vue";
 import RecipeDialogShare from "./RecipeDialogShare.vue";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { useUserApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
 import { usePlanTypeOptions } from "~/composables/use-group-mealplan";
@@ -181,7 +182,6 @@ import { Recipe, RecipeIngredient } from "~/lib/api/types/recipe";
 import { ShoppingListSummary } from "~/lib/api/types/group";
 import { PlanEntryType } from "~/lib/api/types/meal-plan";
 import { useAxiosDownloader } from "~/composables/api/use-axios-download";
-import { useCopy } from "~/composables/use-copy";
 
 export interface ContextMenuIncludes {
   delete: boolean;
@@ -192,7 +192,6 @@ export interface ContextMenuIncludes {
   print: boolean;
   printPreferences: boolean;
   share: boolean;
-  publicUrl: boolean;
 }
 
 export interface ContextMenuItem {
@@ -222,7 +221,6 @@ export default defineComponent({
         print: true,
         printPreferences: true,
         share: true,
-        publicUrl: false,
       }),
     },
     // Append items are added at the end of the useItems list
@@ -291,10 +289,11 @@ export default defineComponent({
       pickerMenu: false,
     });
 
-    const { $auth, i18n, $globals } = useContext();
-    const loggedIn = computed(() => {
-      return $auth.loggedIn;
-    });
+    const { i18n, $auth, $globals } = useContext();
+    const { isOwnGroup } = useLoggedInState();
+
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
 
     // ===========================================================================
     // Context Menu Setup
@@ -363,20 +362,13 @@ export default defineComponent({
         event: "share",
         isPublic: false,
       },
-      publicUrl: {
-        title: i18n.tc("recipe.public-link"),
-        icon: $globals.icons.contentCopy,
-        color: undefined,
-        event: "publicUrl",
-        isPublic: true,
-      },
     };
 
     // Get Default Menu Items Specified in Props
     for (const [key, value] of Object.entries(props.useItems)) {
       if (value) {
         const item = defaultItems[key];
-        if (item && (item.isPublic || loggedIn.value)) {
+        if (item && (item.isPublic || isOwnGroup.value)) {
           state.menuItems.push(item);
         }
       }
@@ -500,24 +492,7 @@ export default defineComponent({
     async function duplicateRecipe() {
       const { data } = await api.recipes.duplicateOne(props.slug, state.recipeName);
       if (data && data.slug) {
-        router.push(`/recipe/${data.slug}`);
-      }
-    }
-
-    const { copyText } = useCopy();
-    const groupSlug = ref<string>("");
-
-    async function setGroupSlug() {
-      if (groupSlug.value) {
-        return;
-      }
-
-      const { data } = await api.users.getSelfGroup();
-      if (data) {
-        groupSlug.value = data.slug;
-      } else {
-        // @ts-ignore this will either be a string or undefined
-        groupSlug.value = $auth.user?.groupId
+        router.push(`/g/${groupSlug.value}/r/${data.slug}`);
       }
     }
 
@@ -526,7 +501,7 @@ export default defineComponent({
       delete: () => {
         state.recipeDeleteDialog = true;
       },
-      edit: () => router.push(`/recipe/${props.slug}` + "?edit=true"),
+      edit: () => router.push(`/g/${groupSlug.value}/r/${props.slug}` + "?edit=true"),
       download: handleDownloadEvent,
       duplicate: () => {
         state.recipeDuplicateDialog = true;
@@ -549,14 +524,6 @@ export default defineComponent({
       share: () => {
         state.shareDialog = true;
       },
-      publicUrl: async () => {
-        await setGroupSlug();
-        if (!groupSlug.value) {
-          return;
-        }
-
-        copyText(`${window.location.origin}/explore/recipes/${groupSlug.value}/${props.slug}`);
-      },
     };
 
     function contextMenuEventHandler(eventKey: string) {

frontend/components/Domain/Recipe/RecipeDataTable.vue

@@ -18,7 +18,7 @@
       </tr>
     </template>
     <template #item.name="{ item }">
-      <a :href="`/recipe/${item.slug}`" style="color: inherit; text-decoration: inherit; " @click="$emit('click')">{{ item.name }}</a>
+      <a :href="`/r/${item.slug}`" style="color: inherit; text-decoration: inherit; " @click="$emit('click')">{{ item.name }}</a>
     </template>
     <template #item.tags="{ item }">
       <RecipeChip small :items="item.tags" :is-category="false" url-prefix="tags" />

frontend/components/Domain/Recipe/RecipeDialogSearch.vue

@@ -31,7 +31,7 @@
           <div class="mr-auto">
             {{ $t("search.results") }}
           </div>
-          <router-link to="/"> {{ $t("search.advanced-search") }} </router-link>
+          <router-link :to="advancedSearchUrl"> {{ $t("search.advanced-search") }} </router-link>
         </v-card-actions>
 
         <RecipeCardMobile
@@ -54,11 +54,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, toRefs, reactive, ref, watch, useRoute } from "@nuxtjs/composition-api";
+import { computed, defineComponent, toRefs, reactive, ref, watch, useContext, useRoute } from "@nuxtjs/composition-api";
 import RecipeCardMobile from "./RecipeCardMobile.vue";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { RecipeSummary } from "~/lib/api/types/recipe";
 import { useUserApi } from "~/composables/api";
 import { useRecipeSearch } from "~/composables/recipes/use-recipe-search";
+import { usePublicExploreApi } from "~/composables/api/api-client";
 const SELECTED_EVENT = "selected";
 export default defineComponent({
   components: {
@@ -66,6 +68,7 @@ export default defineComponent({
   },
 
   setup(_, context) {
+    const { $auth } = useContext();
     const state = reactive({
       loading: false,
       selectedIndex: -1,
@@ -128,7 +131,9 @@ export default defineComponent({
       }
     });
 
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
     const route = useRoute();
+    const advancedSearchUrl = computed(() => `/g/${groupSlug.value}`)
     watch(route, close);
 
     function open() {
@@ -140,7 +145,8 @@ export default defineComponent({
 
     // ===========================================================================
     // Basic Search
-    const api = useUserApi();
+    const { isOwnGroup } = useLoggedInState();
+    const api = isOwnGroup.value ? useUserApi() : usePublicExploreApi(groupSlug.value).explore;
     const search = useRecipeSearch(api);
 
     // Select Handler
@@ -152,6 +158,7 @@ export default defineComponent({
 
     return {
       ...toRefs(state),
+      advancedSearchUrl,
       dialog,
       open,
       close,

frontend/components/Domain/Recipe/RecipeDialogShare.vue

@@ -56,7 +56,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, toRefs, reactive, useContext } from "@nuxtjs/composition-api";
+import { defineComponent, computed, toRefs, reactive, useContext, useRoute } from "@nuxtjs/composition-api";
 import { useClipboard, useShare, whenever } from "@vueuse/core";
 import { RecipeShareToken } from "~/lib/api/types/recipe";
 import { useUserApi } from "~/composables/api";
@@ -105,6 +105,10 @@ export default defineComponent({
       }
     );
 
+    const { $auth, i18n } = useContext();
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+
     // ============================================================
     // Token Actions
 
@@ -138,7 +142,6 @@ export default defineComponent({
       }
     }
 
-    const { i18n } = useContext();
     const { share, isSupported: shareIsSupported } = useShare();
     const { copy } = useClipboard();
 
@@ -147,7 +150,7 @@ export default defineComponent({
     }
 
     function getTokenLink(token: string) {
-      return `${window.location.origin}/shared/recipes/${token}`;
+      return `${window.location.origin}/g/${groupSlug.value}/shared/r/${token}`;
     }
 
     async function copyTokenLink(token: string) {

frontend/components/Domain/Recipe/RecipeExplorerPage.vue

@@ -123,7 +123,6 @@
         class="mt-n5"
         :icon="$globals.icons.search"
         :title="$tc('search.results')"
-        :group-slug="groupSlug"
         :recipes="recipes"
         :query="passedQuery"
         @replaceRecipes="replaceRecipes"
@@ -134,9 +133,10 @@
 </template>
 
 <script lang="ts">
-import { ref, defineComponent, useRouter, onMounted, useContext, computed, Ref } from "@nuxtjs/composition-api";
+import { ref, defineComponent, useRouter, onMounted, useContext, computed, Ref, useRoute } from "@nuxtjs/composition-api";
 import { watchDebounced } from "@vueuse/shared";
 import SearchFilter from "~/components/Domain/SearchFilter.vue";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { useCategoryStore, useFoodStore, useTagStore, useToolStore } from "~/composables/store";
 import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
 import { IngredientFood, RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/recipe";
@@ -150,19 +150,11 @@ import { usePublicToolStore } from "~/composables/store/use-tool-store";
 
 export default defineComponent({
   components: { SearchFilter, RecipeCardSection },
-  props: {
-      groupSlug: {
-          type: String,
-          required: true,
-      },
-  },
-  setup(props) {
+  setup() {
     const router = useRouter();
     const { $auth, $globals, i18n } = useContext();
 
-    const loggedIn = computed(() => {
-      return $auth.loggedIn;
-    });
+    const { isOwnGroup } = useLoggedInState();
     const state = ref({
       auto: true,
       search: "",
@@ -176,17 +168,20 @@ export default defineComponent({
       requireAllFoods: false,
     });
 
-    const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes(loggedIn.value ? null : props.groupSlug);
-    const categories = loggedIn.value ? useCategoryStore() : usePublicCategoryStore(props.groupSlug);
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+
+    const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes(isOwnGroup.value ? null : groupSlug.value);
+    const categories = isOwnGroup.value ? useCategoryStore() : usePublicCategoryStore(groupSlug.value);
     const selectedCategories = ref<NoUndefinedField<RecipeCategory>[]>([]);
 
-    const foods = loggedIn.value ? useFoodStore() : usePublicFoodStore(props.groupSlug);
+    const foods = isOwnGroup.value ? useFoodStore() : usePublicFoodStore(groupSlug.value);
     const selectedFoods = ref<IngredientFood[]>([]);
 
-    const tags = loggedIn.value ? useTagStore() : usePublicTagStore(props.groupSlug);
+    const tags = isOwnGroup.value ? useTagStore() : usePublicTagStore(groupSlug.value);
     const selectedTags = ref<NoUndefinedField<RecipeTag>[]>([]);
 
-    const tools = loggedIn.value ? useToolStore() : usePublicToolStore(props.groupSlug);
+    const tools = isOwnGroup.value ? useToolStore() : usePublicToolStore(groupSlug.value);
     const selectedTools = ref<NoUndefinedField<RecipeTool>[]>([]);
 
     const passedQuery = ref<RecipeSearchQuery | null>(null);

frontend/components/Domain/Recipe/RecipeList.vue

@@ -7,7 +7,7 @@
       :class="attrs.class.sheet"
       :style="tile ? 'max-width: 100%; width: fit-content;' : 'width: 100%;'"
     >
-      <v-list-item :to="'/recipe/' + recipe.slug" :class="attrs.class.listItem">
+      <v-list-item :to="'/' + groupSlug + '/r/' + recipe.slug" :class="attrs.class.listItem">
         <v-list-item-avatar :class="attrs.class.avatar">
           <v-icon :class="attrs.class.icon" dark :small="small"> {{ $globals.icons.primary }} </v-icon>
         </v-list-item-avatar>
@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "@nuxtjs/composition-api";
+import { computed, defineComponent, useContext, useRoute } from "@nuxtjs/composition-api";
 import DOMPurify from "dompurify";
 import { useFraction } from "~/composables/recipes/use-fraction";
 import { ShoppingListItemOut } from "~/lib/api/types/group";
@@ -58,7 +58,10 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const { $auth } = useContext();
     const { frac } = useFraction();
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
 
     const attrs = computed(() => {
       return props.small ? {
@@ -150,6 +153,7 @@ export default defineComponent({
 
     return {
       attrs,
+      groupSlug,
       listItemDescriptions,
     };
   },

frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue

@@ -140,7 +140,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted, reactive, toRefs, useRouter } from "@nuxtjs/composition-api";
+import { defineComponent, ref, onMounted, reactive, toRefs, useContext, useRouter, computed, useRoute } from "@nuxtjs/composition-api";
 import { until } from "@vueuse/core";
 import { invoke } from "@vueuse/shared";
 import draggable from "vuedraggable";
@@ -179,6 +179,10 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const { $auth } = useContext();
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+
     const router = useRouter();
     const api = useUserApi();
 
@@ -328,12 +332,12 @@ export default defineComponent({
     async function updateRecipe() {
       const { data } = await api.recipes.updateOne(props.recipe.slug, props.recipe);
       if (data?.slug) {
-        router.push("/recipe/" + data.slug);
+        router.push(`/g/${groupSlug.value}/r/${data.slug}`);
       }
     }
 
     function closeEditor() {
-      router.push("/recipe/" + props.recipe.slug);
+      router.push(`/g/${groupSlug.value}/r/${props.recipe.slug}`);
     }
 
     const canvasSetText = function () {

frontend/components/Domain/Recipe/RecipeOrganizerPage.vue

@@ -48,7 +48,7 @@
       <BaseCardSectionTitle v-if="isTitle(key)" :title="key" />
       <v-row>
         <v-col v-for="(item, index) in itms" :key="'cat' + index" cols="12" :sm="12" :md="6" :lg="4" :xl="3">
-          <v-card v-if="item" class="left-border" hover :to="`/?${itemType}=${item.id}`">
+          <v-card v-if="item" class="left-border" hover :to="`/g/${groupSlug}?${itemType}=${item.id}`">
             <v-card-actions>
               <v-icon>
                 {{ icon }}
@@ -72,7 +72,7 @@
 
 <script lang="ts">
 import Fuse from "fuse.js";
-import { defineComponent, computed, ref, reactive } from "@nuxtjs/composition-api";
+import { defineComponent, computed, ref, reactive, useContext, useRoute } from "@nuxtjs/composition-api";
 import { useContextPresets } from "~/composables/use-context-presents";
 import RecipeOrganizerDialog from "~/components/Domain/Recipe/RecipeOrganizerDialog.vue";
 import { RecipeOrganizer } from "~/lib/api/types/non-generated";
@@ -119,6 +119,10 @@ export default defineComponent({
       },
     });
 
+    const { $auth } = useContext();
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+
     // =================================================================
     // Context Menu
 
@@ -204,6 +208,7 @@ export default defineComponent({
     }
 
     return {
+      groupSlug,
       isTitle,
       dialogs,
       confirmDelete,

frontend/components/Domain/Recipe/RecipePage/RecipePage.vue

@@ -72,7 +72,7 @@
     </div>
 
     <RecipePageComments
-      v-if="user.id && !recipe.settings.disableComments && !isEditForm && !isCookMode"
+      v-if="isOwnGroup && !recipe.settings.disableComments && !isEditForm && !isCookMode"
       :recipe="recipe"
       class="px-1 my-4 d-print-none"
     />
@@ -89,6 +89,7 @@ import {
   ref,
   onMounted,
   onUnmounted,
+useRoute,
 } from "@nuxtjs/composition-api";
 import { invoke, until, useWakeLock } from "@vueuse/core";
 import RecipePageEditorToolbar from "./RecipePageParts/RecipePageEditorToolbar.vue";
@@ -101,6 +102,7 @@ import RecipePageOrganizers from "./RecipePageParts/RecipePageOrganizers.vue";
 import RecipePageScale from "./RecipePageParts/RecipePageScale.vue";
 import RecipePageTitleContent from "./RecipePageParts/RecipePageTitleContent.vue";
 import RecipePageComments from "./RecipePageParts/RecipePageComments.vue";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import RecipePrintContainer from "~/components/Domain/Recipe/RecipePrintContainer.vue";
 import { EditorMode, PageMode, usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
 import { NoUndefinedField } from "~/lib/api/types/non-generated";
@@ -140,6 +142,11 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const { $auth, $vuetify } = useContext();
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+    const { isOwnGroup } = useLoggedInState();
+
     const router = useRouter();
     const api = useUserApi();
     const { pageMode, editMode, setMode, isEditForm, isEditJSON, isCookMode, isEditMode, toggleCookMode } =
@@ -226,21 +233,20 @@ export default defineComponent({
       const { data } = await api.recipes.updateOne(props.recipe.slug, props.recipe);
       setMode(PageMode.VIEW);
       if (data?.slug) {
-        router.push("/recipe/" + data.slug);
+        router.push(`/g/${groupSlug.value}/r/` + data.slug);
       }
     }
 
     async function deleteRecipe() {
       const { data } = await api.recipes.deleteOne(props.recipe.slug);
       if (data?.slug) {
-        router.push("/");
+        router.push(`/g/${groupSlug.value}`);
       }
     }
 
     /** =============================================================
      * View Preferences
      */
-    const { $vuetify } = useContext();
 
     const landscape = computed(() => {
       const preferLandscape = props.recipe.settings.landscapeView;
@@ -283,6 +289,7 @@ export default defineComponent({
 
     return {
       user,
+      isOwnGroup,
       api,
       scale: ref(1),
       EDITOR_OPTIONS,

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageHeader.vue

@@ -10,7 +10,7 @@
           <v-divider class="my-2"></v-divider>
           <SafeMarkdown :source="recipe.description" />
           <v-divider></v-divider>
-          <div v-if="user.id" class="d-flex justify-center mt-5">
+          <div v-if="isOwnGroup" class="d-flex justify-center mt-5">
             <RecipeLastMade
               v-model="recipe.lastMade"
               :recipe="recipe"
@@ -45,9 +45,9 @@
       :recipe="recipe"
       :slug="recipe.slug"
       :recipe-scale="recipeScale"
-      :locked="user.id !== recipe.userId && recipe.settings.locked"
+      :locked="isOwnGroup && user.id !== recipe.userId && recipe.settings.locked"
       :name="recipe.name"
-      :logged-in="$auth.loggedIn"
+      :logged-in="isOwnGroup"
       :open="isEditMode"
       :recipe-id="recipe.id"
       :show-ocr-button="recipe.isOcrRecipe"
@@ -64,7 +64,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, useContext, computed, ref, watch, useRouter } from "@nuxtjs/composition-api";
+import { defineComponent, useContext, computed, ref, watch, useRouter, useRoute } from "@nuxtjs/composition-api";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import RecipeRating from "~/components/Domain/Recipe/RecipeRating.vue";
 import RecipeLastMade from "~/components/Domain/Recipe/RecipeLastMade.vue";
 import RecipeActionMenu from "~/components/Domain/Recipe/RecipeActionMenu.vue";
@@ -95,17 +96,20 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const { $auth, $vuetify } = useContext();
     const { recipeImage } = useStaticRoutes();
     const { imageKey, pageMode, editMode, setMode, toggleEditMode, isEditMode } = usePageState(props.recipe.slug);
     const { user } = usePageUser();
+    const { isOwnGroup } = useLoggedInState();
+
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
     const router = useRouter();
 
     function printRecipe() {
       window.print();
     }
 
-    const { $vuetify } = useContext();
-
     const hideImage = ref(false);
     const imageHeight = computed(() => {
       return $vuetify.breakpoint.xs ? "200" : "400";
@@ -116,7 +120,7 @@ export default defineComponent({
     });
 
     function goToOcrEditor() {
-      router.push("/recipe/" + props.recipe.slug + "/ocr-editor");
+      router.push(`/g/${groupSlug.value}/r/${props.recipe.slug}/ocr-editor`);
     }
 
     watch(
@@ -127,6 +131,7 @@ export default defineComponent({
     );
 
     return {
+      isOwnGroup,
       setMode,
       toggleEditMode,
       recipeImage,

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientEditor.vue

@@ -34,7 +34,7 @@
               class="mb-1"
               :disabled="recipe.settings.disableAmount || hasFoodOrUnit"
               color="accent"
-              :to="`${recipe.slug}/ingredient-parser`"
+              :to="`/g/${groupSlug}/${recipe.slug}/ingredient-parser`"
               v-bind="attrs"
             >
               <template #icon>
@@ -54,7 +54,7 @@
 
 <script lang="ts">
 import draggable from "vuedraggable";
-import { computed, defineComponent, ref, useContext } from "@nuxtjs/composition-api";
+import { computed, defineComponent, ref, useContext, useRoute } from "@nuxtjs/composition-api";
 import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
 import { NoUndefinedField } from "~/lib/api/types/non-generated";
 import { Recipe } from "~/lib/api/types/recipe";
@@ -76,10 +76,13 @@ export default defineComponent({
   setup(props) {
     const { user } = usePageUser();
     const { imageKey } = usePageState(props.recipe.slug);
-    const { i18n } = useContext();
+    const { $auth, i18n } = useContext();
 
     const drag = ref(false);
 
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+
     const hasFoodOrUnit = computed(() => {
       if (!props.recipe) {
         return false;
@@ -139,6 +142,7 @@ export default defineComponent({
 
     return {
       user,
+      groupSlug,
       addIngredient,
       parserToolTip,
       hasFoodOrUnit,

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientToolsView.vue

@@ -26,6 +26,7 @@
 
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
 import { useToolStore } from "~/composables/store";
 import { NoUndefinedField } from "~/lib/api/types/non-generated";
@@ -47,12 +48,14 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const toolStore = useToolStore();
+    const { isOwnGroup } = useLoggedInState();
+
+    const toolStore = isOwnGroup.value ? useToolStore() : null;
     const { user } = usePageUser();
     const { isEditMode } = usePageState(props.recipe.slug);
 
     function updateTool(index: number) {
-      if (user.id) {
+      if (user.id && toolStore) {
         toolStore.actions.updateOne(props.recipe.tools[index]);
       } else {
         console.log("no user, skipping server update");

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageTitleContent.vue

@@ -5,7 +5,7 @@
         {{ recipe.name }}
       </v-card-title>
       <SafeMarkdown :source="recipe.description" />
-      <div v-if="user.id" class="pb-2 d-flex justify-center flex-wrap">
+      <div v-if="isOwnGroup" class="pb-2 d-flex justify-center flex-wrap">
         <RecipeLastMade
           v-model="recipe.lastMade"
           :recipe="recipe"
@@ -50,6 +50,7 @@
 
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
 import { validators } from "~/composables/use-validators";
 import { NoUndefinedField } from "~/lib/api/types/non-generated";
@@ -77,12 +78,14 @@ export default defineComponent({
   setup(props) {
     const { user } = usePageUser();
     const { imageKey, isEditMode } = usePageState(props.recipe.slug);
+    const { isOwnGroup } = useLoggedInState();
 
     return {
       user,
       imageKey,
       validators,
       isEditMode,
+      isOwnGroup,
     };
   },
 });

frontend/components/Domain/Recipe/RecipeRating.vue

@@ -2,7 +2,7 @@
   <div @click.prevent>
     <v-rating
       v-model="rating"
-      :readonly="!loggedIn"
+      :readonly="!isOwnGroup"
       color="secondary"
       background-color="secondary lighten-3"
       length="5"
@@ -18,7 +18,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, useContext } from "@nuxtjs/composition-api";
+import { defineComponent, ref } from "@nuxtjs/composition-api";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { useUserApi } from "~/composables/api";
 export default defineComponent({
   props: {
@@ -45,10 +46,7 @@ export default defineComponent({
     },
   },
   setup(props, context) {
-    const { $auth } = useContext();
-    const loggedIn = computed(() => {
-      return $auth.loggedIn;
-    });
+    const { isOwnGroup } = useLoggedInState();
 
     const rating = ref(props.value);
 
@@ -65,7 +63,7 @@ export default defineComponent({
       context.emit("input", val);
     }
 
-    return { loggedIn, rating, updateRating };
+    return { isOwnGroup, rating, updateRating };
   },
 });
 </script>

frontend/components/Domain/Recipe/RecipeTimelineItem.vue

@@ -13,7 +13,7 @@
     </template>
     <v-card
       hover
-      :to="$listeners.selected || !recipe ? undefined : `/recipe/${recipe.slug}`"
+      :to="$listeners.selected || !recipe ? undefined : `/g/${groupSlug}/r/${recipe.slug}`"
       class="elevation-12"
       @click="$emit('selected')"
     >
@@ -95,7 +95,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, useContext } from "@nuxtjs/composition-api";
+import { computed, defineComponent, ref, useContext, useRoute } from "@nuxtjs/composition-api";
 import RecipeCardMobile from "./RecipeCardMobile.vue";
 import RecipeTimelineContextMenu from "./RecipeTimelineContextMenu.vue";
 import { useStaticRoutes } from "~/composables/api";
@@ -121,10 +121,13 @@ export default defineComponent({
   },
 
   setup(props) {
-    const { $globals, $vuetify } = useContext();
+    const { $auth, $globals, $vuetify } = useContext();
     const { recipeTimelineEventImage } = useStaticRoutes();
     const timelineEvents = ref([] as RecipeTimelineEventOut[]);
 
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+
     const useMobileFormat = computed(() => {
       return $vuetify.breakpoint.smAndDown;
     });
@@ -187,6 +190,7 @@ export default defineComponent({
 
     return {
       attrs,
+      groupSlug,
       icon,
       eventImageUrl,
       hideImage,