From 05ed03c5c4db5ca01955277cd26fcec0ca0c3680 Mon Sep 17 00:00:00 2001
From: pheonix8 <61965711+pheonix8@users.noreply.github.com>
Date: Thu, 15 May 2025 00:33:36 +0200
Subject: [PATCH 01/17] started with sharing poc

---
 src/components/SavedPlans.vue | 41 ++++++++++++++++++++++++++++-------
 1 file changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/components/SavedPlans.vue b/src/components/SavedPlans.vue
index d92126d2..56c967a9 100644
--- a/src/components/SavedPlans.vue
+++ b/src/components/SavedPlans.vue
@@ -19,7 +19,7 @@
         <li
           v-for="plan in modulePlans"
           :key="plan.id"
-          class="flex items-center justify-between"
+          class="relative flex items-center justify-between"
           data-cy="SavedPlans-List-Item"
         >
           <router-link
@@ -28,13 +28,32 @@
           >
             {{ plan.name }}
           </router-link>
-          <button
-            class="p-2 hover:bg-gray-100 rounded-sm"
-            data-cy="SavedPlans-Delete-Button"
-            @click="deletePlan(plan.id)"
-          >
-            Löschen
-          </button>
+          <div class="relative">
+            <button
+              class="p-2 hover:bg-gray-100 rounded-sm"
+              @click="toggleMenu(plan.id)"
+            >
+              ⋮
+            </button>
+
+            <div
+              v-if="activePlanId === plan.id"
+              class="absolute right-0 top-full mt-1 bg-white shadow-lg border rounded-sm z-10"
+            >
+              <button
+                class="block w-full text-left px-4 py-2 hover:bg-gray-100"
+                @click="deletePlan(plan.id)"
+              >
+                Löschen
+              </button>
+              <button
+                class="block w-full text-left px-4 py-2 hover:bg-gray-100"
+                @click="sharePlan(plan.id)"
+              >
+              Teilen
+              </button>
+            </div>
+          </div>
         </li>
       </ul>
       <form
@@ -90,6 +109,7 @@ export default defineComponent({
     modulePlans: [] as Plan[],
     isEditingName: false,
     planName: '',
+    activePlanId: null as string | null,
     }
   },
   computed: {
@@ -130,6 +150,11 @@ export default defineComponent({
       await new PlanStore().deletePlan(planId, token)
       await this.getPlans();
     },
+    async sharePlan(planId: string) {
+      const token = await this.getToken() as string;
+      await new PlanStore().sharePlan(planId, token);
+      this.activePlanId = null; // close the menu
+    },
   },
 })
 </script>

From c7487098d92684cef09df2362be593af694e83ed Mon Sep 17 00:00:00 2001
From: pheonix8 <61965711+pheonix8@users.noreply.github.com>
Date: Fri, 23 May 2025 22:20:48 +0200
Subject: [PATCH 02/17] add sharing logic

---
 src/components/SavedPlans.vue | 77 +++++++++++++++++++++++++----------
 src/helpers/plan-store.ts     |  5 ++-
 vite.config.mts               |  2 +-
 3 files changed, 60 insertions(+), 24 deletions(-)

diff --git a/src/components/SavedPlans.vue b/src/components/SavedPlans.vue
index 56c967a9..de9f2849 100644
--- a/src/components/SavedPlans.vue
+++ b/src/components/SavedPlans.vue
@@ -28,29 +28,39 @@
           >
             {{ plan.name }}
           </router-link>
-          <div class="relative">
-            <button
-              class="p-2 hover:bg-gray-100 rounded-sm"
-              @click="toggleMenu(plan.id)"
-            >
-              ⋮
-            </button>
-
+          <div
+            class="relative"
+            @mouseenter="activePlanId = plan.id"
+            @mouseleave="activePlanId = null"
+          >
+            <div class="p-2 hover:bg-gray-100 rounded-sm">
+              <font-awesome-icon
+                :icon="['fas', 'ellipsis-vertical']"
+                class="w-4 h-4"
+              />
+            </div>
             <div
               v-if="activePlanId === plan.id"
-              class="absolute right-0 top-full mt-1 bg-white shadow-lg border rounded-sm z-10"
+              class="absolute top-0 left-full mt-1 bg-white shadow-lg rounded-sm z-10"
             >
               <button
-                class="block w-full text-left px-4 py-2 hover:bg-gray-100"
-                @click="deletePlan(plan.id)"
+                class="flex items-center gap-2 w-full text-left px-4 py-2 hover:bg-gray-100"
+                @click="sharePlan(plan.id)"
               >
-                Löschen
+                <font-awesome-icon
+                  :icon="copiedPlanId === plan.id ? ['fas', 'check'] : ['fas', 'clone']"
+                  :class="copiedPlanId === plan.id ? 'text-green-600' : 'text-black'"
+                />
+                <span class="sr-only">Teilen</span>
               </button>
               <button
-                class="block w-full text-left px-4 py-2 hover:bg-gray-100"
-                @click="sharePlan(plan.id)"
+                class="flex items-center gap-2 w-full text-left px-4 py-2 hover:bg-gray-100"
+                @click="deletePlan(plan.id)"
               >
-              Teilen
+                <font-awesome-icon
+                  :icon="['fas', 'trash']"
+                />
+                <span class="sr-only">Löschen</span>
               </button>
             </div>
           </div>
@@ -89,19 +99,28 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
 import { useAuth } from "@clerk/vue";
 import { type Plan, PlanStore } from "../helpers/plan-store";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faTrash, faClone, faCheck, faChevronDown, faEllipsisVertical } from '@fortawesome/free-solid-svg-icons';
+
+library.add(faTrash, faClone, faCheck, faChevronDown, faEllipsisVertical);
 
 export default defineComponent({
   name: 'SavedPlans',
+  components: { FontAwesomeIcon },
   setup() {
     const { getToken, isLoaded, isSignedIn } = useAuth();
-
+    const activePlanId = ref<string | null>(null);
+    const copiedPlanId = ref<string | null>(null);
     return {
       getToken,
       isLoaded,
       isSignedIn,
+      activePlanId,
+      copiedPlanId,
     };
   },
   data() {
@@ -109,7 +128,6 @@ export default defineComponent({
     modulePlans: [] as Plan[],
     isEditingName: false,
     planName: '',
-    activePlanId: null as string | null,
     }
   },
   computed: {
@@ -151,9 +169,26 @@ export default defineComponent({
       await this.getPlans();
     },
     async sharePlan(planId: string) {
-      const token = await this.getToken() as string;
-      await new PlanStore().sharePlan(planId, token);
-      this.activePlanId = null; // close the menu
+      const plan = this.modulePlans.find(p => p.id === planId);
+      if (!plan || !plan.public_slug) {
+        console.error('No public_slug found for this plan');
+        return;
+      }
+
+      const baseUrl = window.location.origin;
+      const shareUrl = `${baseUrl}/shared/${plan.public_slug}`;
+      try {
+        await navigator.clipboard.writeText(shareUrl);
+        console.log('Link copied to clipboard:', shareUrl);
+        this.copiedPlanId = planId;
+        // Reset after 2 seconds
+        setTimeout(() => {
+          this.copiedPlanId = null;
+        }, 2000);
+        // Optionally show a toast or notification here
+      } catch (err) {
+        console.error('Failed to copy link:', err);
+      }
     },
   },
 })
diff --git a/src/helpers/plan-store.ts b/src/helpers/plan-store.ts
index 7ed0a356..412a6eb9 100644
--- a/src/helpers/plan-store.ts
+++ b/src/helpers/plan-store.ts
@@ -2,6 +2,7 @@ export interface Plan {
   id: string;
   name: string;
   content: string;
+  public_slug: string;
   is_favorite: boolean;
   created_at: string;
   user_id: string;
@@ -27,7 +28,7 @@ export class PlanStore {
   async savePlan(planName: string, modules: string, token: string): Promise<void> {
     const payload = JSON.stringify({ name: planName, content: modules });
     try {
-      const response = await fetch(`/api/plan`, {
+      const response = await fetch(`/api/plans`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -46,7 +47,7 @@ export class PlanStore {
 
   async deletePlan(planId: string, token: string): Promise<void> {
     try {
-      const response = await fetch(`/api/plan/${planId}`, {
+      const response = await fetch(`/api/plans/${planId}`, {
         method: 'DELETE',
         headers: {
           'Content-Type': 'application/json',
diff --git a/vite.config.mts b/vite.config.mts
index d126fdde..7b23a2d7 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -9,7 +9,7 @@ export default defineConfig({
       '/api': {
         target: 'http://localhost:8000',
         changeOrigin: true,
-        //rewrite: (path) => path.replace(/^\/api/, ''),
+        rewrite: (path) => path.replace(/^\/api/, ''),
       },
     },
   },

From 25f6a7dd3dec4022de536d0a09d2918508705b40 Mon Sep 17 00:00:00 2001
From: pheonix8 <61965711+pheonix8@users.noreply.github.com>
Date: Sat, 24 May 2025 12:25:26 +0200
Subject: [PATCH 03/17] added frontend handling of shared plans

---
 src/components/SavedPlans.vue |  8 ++++----
 src/router/index.ts           |  8 +++++++-
 src/views/SharingRedirect.vue | 31 +++++++++++++++++++++++++++++++
 3 files changed, 42 insertions(+), 5 deletions(-)
 create mode 100644 src/views/SharingRedirect.vue

diff --git a/src/components/SavedPlans.vue b/src/components/SavedPlans.vue
index de9f2849..7301131b 100644
--- a/src/components/SavedPlans.vue
+++ b/src/components/SavedPlans.vue
@@ -48,7 +48,7 @@
                 @click="sharePlan(plan.id)"
               >
                 <font-awesome-icon
-                  :icon="copiedPlanId === plan.id ? ['fas', 'check'] : ['fas', 'clone']"
+                  :icon="copiedPlanId === plan.id ? ['fas', 'check'] : ['fas', 'share']"
                   :class="copiedPlanId === plan.id ? 'text-green-600' : 'text-black'"
                 />
                 <span class="sr-only">Teilen</span>
@@ -104,9 +104,9 @@ import { useAuth } from "@clerk/vue";
 import { type Plan, PlanStore } from "../helpers/plan-store";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faTrash, faClone, faCheck, faChevronDown, faEllipsisVertical } from '@fortawesome/free-solid-svg-icons';
+import { faTrash, faShare, faCheck, faChevronDown, faEllipsisVertical } from '@fortawesome/free-solid-svg-icons';
 
-library.add(faTrash, faClone, faCheck, faChevronDown, faEllipsisVertical);
+library.add(faTrash, faShare, faCheck, faChevronDown, faEllipsisVertical);
 
 export default defineComponent({
   name: 'SavedPlans',
@@ -176,7 +176,7 @@ export default defineComponent({
       }
 
       const baseUrl = window.location.origin;
-      const shareUrl = `${baseUrl}/shared/${plan.public_slug}`;
+      const shareUrl = `${baseUrl}/#/shared/${plan.public_slug}`;
       try {
         await navigator.clipboard.writeText(shareUrl);
         console.log('Link copied to clipboard:', shareUrl);
diff --git a/src/router/index.ts b/src/router/index.ts
index c9fc7104..f9849605 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,12 +1,18 @@
 import { createRouter, createWebHashHistory } from 'vue-router';
 import Home from '../views/Home.vue';
+import SharingRedirect from "../views/SharingRedirect.vue";
 
 const routes = [
+  {
+    path: '/shared/:slug',
+    name: 'SharingRedirect',
+    component: SharingRedirect
+  },
   {
     path: '/:catchAll(.*)',
     name: 'Home',
     component: Home,
-  },
+  }
 ];
 
 const router = createRouter({
diff --git a/src/views/SharingRedirect.vue b/src/views/SharingRedirect.vue
new file mode 100644
index 00000000..0f31be4d
--- /dev/null
+++ b/src/views/SharingRedirect.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>Loading...</div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+
+onMounted(async () => {
+  const slug = route.params.slug
+
+  try {
+    const response = await fetch(`/api/plans/shared/${slug}`);
+    const data = await response.json();
+
+
+    if (data.content) {
+      await router.replace({ path: `/plan/${data.content}` })
+    } else {
+      // fallback for invalid slugs
+      await router.replace({ path: '/' })
+    }
+  } catch (err) {
+    console.error('Sharing link error:', err)
+    await router.replace({ path: '/' }) // fallback on error
+  }
+})
+</script>

From f3a92adb83fbd50e2799b96aa8a8763e713db5ad Mon Sep 17 00:00:00 2001
From: pheonix8 <61965711+pheonix8@users.noreply.github.com>
Date: Sat, 24 May 2025 12:50:44 +0200
Subject: [PATCH 04/17] fix router link flex

---
 src/components/SavedPlans.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/SavedPlans.vue b/src/components/SavedPlans.vue
index 7301131b..04f5a775 100644
--- a/src/components/SavedPlans.vue
+++ b/src/components/SavedPlans.vue
@@ -24,7 +24,7 @@
         >
           <router-link
             :to="plan.content"
-            class="p-2 hover:bg-gray-100 rounded-sm"
+            class="p-2 hover:bg-gray-100 rounded-sm flex-grow"
           >
             {{ plan.name }}
           </router-link>
@@ -48,7 +48,7 @@
                 @click="sharePlan(plan.id)"
               >
                 <font-awesome-icon
-                  :icon="copiedPlanId === plan.id ? ['fas', 'check'] : ['fas', 'share']"
+                  :icon="copiedPlanId === plan.id ? ['fas', 'check'] : ['fas', 'up-right-from-square']"
                   :class="copiedPlanId === plan.id ? 'text-green-600' : 'text-black'"
                 />
                 <span class="sr-only">Teilen</span>
@@ -104,9 +104,9 @@ import { useAuth } from "@clerk/vue";
 import { type Plan, PlanStore } from "../helpers/plan-store";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faTrash, faShare, faCheck, faChevronDown, faEllipsisVertical } from '@fortawesome/free-solid-svg-icons';
+import { faTrash, faUpRightFromSquare, faCheck, faChevronDown, faEllipsisVertical } from '@fortawesome/free-solid-svg-icons';
 
-library.add(faTrash, faShare, faCheck, faChevronDown, faEllipsisVertical);
+library.add(faTrash, faUpRightFromSquare, faCheck, faChevronDown, faEllipsisVertical);
 
 export default defineComponent({
   name: 'SavedPlans',

From f53797dc5396b80ec4681ff7f067f6abb37d8b3d Mon Sep 17 00:00:00 2001
From: pheonix8 <61965711+pheonix8@users.noreply.github.com>
Date: Wed, 28 May 2025 18:00:25 +0200
Subject: [PATCH 05/17] merge sharing poc into feature

---
 cypress/e2e/plans/plans.cy.ts |   2 +-
 src/components/SavedPlans.vue | 152 +++++++++++++++++++++++++++-------
 src/helpers/plan-helper.ts    |   1 +
 src/types/Plan.ts             |   1 +
 src/types/PlanDTO.ts          |   1 +
 5 files changed, 126 insertions(+), 31 deletions(-)

diff --git a/cypress/e2e/plans/plans.cy.ts b/cypress/e2e/plans/plans.cy.ts
index 39275d3c..a41b9bc1 100644
--- a/cypress/e2e/plans/plans.cy.ts
+++ b/cypress/e2e/plans/plans.cy.ts
@@ -1,7 +1,7 @@
 import { setupClerkTestingToken } from "@clerk/testing/cypress";
 
 describe('multiple plans', () => {
- beforeEach(() => {
+  beforeEach(() => {
     setupClerkTestingToken();
     cy.visit('/');
     cy.clerkSignIn({ strategy: 'email_code', identifier: 'user1+clerk_test@lost.university' });
diff --git a/src/components/SavedPlans.vue b/src/components/SavedPlans.vue
index 55fc2c96..c549f889 100644
--- a/src/components/SavedPlans.vue
+++ b/src/components/SavedPlans.vue
@@ -28,21 +28,53 @@
           >
             {{ plan.name }}
           </router-link>
-          <div>
-            <button
-              class="flex items-center gap-2 w-full text-left px-4 py-2 hover:bg-gray-100"
-              @click="sharePlan(plan.id)"
-            >
-              Teilen
-            </button>
-            <button
-              class="p-2 hover:bg-gray-100 rounded-sm"
-              data-cy="SavedPlans-Delete-Button"
-              @click="deletePlan(plan.id)"
+          <Menu
+            as="div"
+            class="relative inline-block text-left"
+          >
+            <div>
+              <MenuButton
+                class="p-2 hover:bg-gray-100 rounded-sm"
+              >
+                <font-awesome-icon
+                  :icon="['fas', 'ellipsis']"
+                  class="w-4 h-4"
+                />
+              </MenuButton>
+            </div>
+            <MenuItems
+              class="absolute top-0 left-full ml-1 bg-white shadow-lg rounded-sm z-10"
             >
-              Löschen
-            </button>
-          </div>
+              <div class="px-1 py-1">
+                <MenuItem
+                  v-slot="{ close }"
+                  as="div"
+                >
+                  <button
+                    class="flex items-center gap-2 w-full text-left px-4 py-2 hover:bg-gray-100"
+                    @click.stop.prevent="sharePlan(plan.id, close)"
+                  >
+                    <font-awesome-icon
+                      :icon="copiedPlanId === plan.id ? ['fas', 'check'] : ['fas', 'share-nodes']"
+                      :class="copiedPlanId === plan.id ? 'text-green-600' : 'text-black'"
+                    />
+                  </button>
+                </MenuItem>
+              </div>
+              <div class="px-1 py-1">
+                <MenuItem>
+                  <button
+                    class="flex items-center gap-2 w-full text-left px-4 py-2 hover:bg-gray-100"
+                    @click="deletePlan(plan.id)"
+                  >
+                    <font-awesome-icon
+                      :icon="['fas', 'trash']"
+                    />
+                  </button>
+                </MenuItem>
+              </div>
+            </MenuItems>
+          </Menu>
         </li>
       </ul>
       <form
@@ -96,13 +128,53 @@
         >
           {{ plan.name }}
         </router-link>
-        <button
-          class="p-2 hover:bg-gray-100 rounded-sm"
-          data-cy="SavedPlans-Delete-Button"
-          @click="deletePlan(plan.id)"
+        <Menu
+          as="div"
+          class="relative inline-block text-left"
         >
-          Löschen
-        </button>
+          <div>
+            <MenuButton
+              class="p-2 hover:bg-gray-100 rounded-sm"
+            >
+              <font-awesome-icon
+                :icon="['fas', 'ellipsis']"
+                class="w-4 h-4"
+              />
+            </MenuButton>
+          </div>
+          <MenuItems
+            class="absolute right-0 mt-1 bg-white shadow-lg rounded-sm z-10"
+          >
+            <div class="px-1 py-1">
+              <MenuItem
+                v-slot="{ close }"
+                as="div"
+              >
+                <button
+                  class="flex items-center gap-2 w-full text-left px-4 py-2 hover:bg-gray-100"
+                  @click.stop.prevent="sharePlan(plan.id, close)"
+                >
+                  <font-awesome-icon
+                    :icon="copiedPlanId === plan.id ? ['fas', 'check'] : ['fas', 'share-nodes']"
+                    :class="copiedPlanId === plan.id ? 'text-green-600' : 'text-black'"
+                  />
+                </button>
+              </MenuItem>
+            </div>
+            <div class="px-1 py-1">
+              <MenuItem>
+                <button
+                  class="flex items-center gap-2 w-full text-left px-4 py-2 hover:bg-gray-100"
+                  @click="deletePlan(plan.id)"
+                >
+                  <font-awesome-icon
+                    :icon="['fas', 'trash']"
+                  />
+                </button>
+              </MenuItem>
+            </div>
+          </MenuItems>
+        </Menu>
       </li>
     </ul>
     <form
@@ -137,16 +209,30 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
 import { useAuth } from "@clerk/vue";
 import { fetchSavedPlans, savePlan, deletePlan } from "../api/plan";
 import type { Plan } from "../types/Plan";
-import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue';
+import {
+  Popover,
+  PopoverButton,
+  PopoverPanel,
+  Menu,
+  MenuButton,
+  MenuItems,
+  MenuItem
+} from '@headlessui/vue';
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faTrash, faUpRightFromSquare, faCheck, faChevronDown, faEllipsisVertical } from '@fortawesome/free-solid-svg-icons';
+import {
+  faTrash,
+  faShareNodes,
+  faCheck,
+  faChevronDown,
+  faEllipsis
+} from '@fortawesome/free-solid-svg-icons';
 
-library.add(faTrash, faUpRightFromSquare, faCheck, faChevronDown, faEllipsisVertical);
+library.add(faTrash, faShareNodes, faCheck, faChevronDown, faEllipsis);
 
 export default defineComponent({
   name: 'SavedPlans',
@@ -154,6 +240,13 @@ export default defineComponent({
     Popover,
     PopoverButton,
     PopoverPanel,
+    // eslint-disable-next-line vue/no-reserved-component-names
+    Menu,
+    MenuButton,
+    // eslint-disable-next-line vue/no-reserved-component-names
+    MenuItems,
+    // eslint-disable-next-line vue/no-reserved-component-names
+    MenuItem,
     FontAwesomeIcon
   },
   setup() {
@@ -206,24 +299,23 @@ export default defineComponent({
       await deletePlan(planId, token)
       await this.getPlans();
     },
-    async sharePlan(planId: string) {
+    async sharePlan(planId: string, close: () => void) {
       const plan = this.modulePlans.find(p => p.id === planId);
-      if (!plan || !plan.public_slug) {
+      if (!plan || !plan.publicSlug) {
         console.error('No public_slug found for this plan');
         return;
       }
 
       const baseUrl = window.location.origin;
-      const shareUrl = `${baseUrl}/#/shared/${plan.public_slug}`;
+      const shareUrl = `${baseUrl}/#/shared/${plan.publicSlug}`;
       try {
         await navigator.clipboard.writeText(shareUrl);
         console.log('Link copied to clipboard:', shareUrl);
         this.copiedPlanId = planId;
-        // Reset after 2 seconds
         setTimeout(() => {
           this.copiedPlanId = null;
-        }, 2000);
-        // Optionally show a toast or notification here
+          close();
+        }, 1000);
       } catch (err) {
         console.error('Failed to copy link:', err);
       }
diff --git a/src/helpers/plan-helper.ts b/src/helpers/plan-helper.ts
index 0a722f67..69b6005e 100644
--- a/src/helpers/plan-helper.ts
+++ b/src/helpers/plan-helper.ts
@@ -7,6 +7,7 @@ export function map(dto: PlanDTO): Plan {
     name: dto.name,
     content: dto.content,
     isFavorite: dto.is_favorite,
+    publicSlug: dto.public_slug,
     createdAt: dto.created_at,
     userId: dto.user_id,
   };
diff --git a/src/types/Plan.ts b/src/types/Plan.ts
index 5d8e5c4b..f328ea2c 100644
--- a/src/types/Plan.ts
+++ b/src/types/Plan.ts
@@ -3,6 +3,7 @@ export interface Plan {
   name: string;
   content: string;
   isFavorite: boolean;
+  publicSlug: string;
   createdAt: string;
   userId: string;
 }
diff --git a/src/types/PlanDTO.ts b/src/types/PlanDTO.ts
index d3f0d7a9..490d4d0d 100644
--- a/src/types/PlanDTO.ts
+++ b/src/types/PlanDTO.ts
@@ -3,6 +3,7 @@ export interface PlanDTO {
   name: string;
   content: string;
   is_favorite: boolean;
+  public_slug: string;
   created_at: string;
   user_id: string;
 }

From 02571a75161d724c1a0191d448fb2d6e2fb592c4 Mon Sep 17 00:00:00 2001
From: pheonix8 <61965711+pheonix8@users.noreply.github.com>
Date: Wed, 28 May 2025 18:31:10 +0200
Subject: [PATCH 06/17] moved menu into own component

---
 src/components/SavedPlans.vue           | 157 +++---------------------
 src/components/SavedPlansActionMenu.vue | 108 ++++++++++++++++
 2 files changed, 123 insertions(+), 142 deletions(-)
 create mode 100644 src/components/SavedPlansActionMenu.vue

diff --git a/src/components/SavedPlans.vue b/src/components/SavedPlans.vue
index c549f889..df0d32fb 100644
--- a/src/components/SavedPlans.vue
+++ b/src/components/SavedPlans.vue
@@ -28,53 +28,10 @@
           >
             {{ plan.name }}
           </router-link>
-          <Menu
-            as="div"
-            class="relative inline-block text-left"
-          >
-            <div>
-              <MenuButton
-                class="p-2 hover:bg-gray-100 rounded-sm"
-              >
-                <font-awesome-icon
-                  :icon="['fas', 'ellipsis']"
-                  class="w-4 h-4"
-                />
-              </MenuButton>
-            </div>
-            <MenuItems
-              class="absolute top-0 left-full ml-1 bg-white shadow-lg rounded-sm z-10"
-            >
-              <div class="px-1 py-1">
-                <MenuItem
-                  v-slot="{ close }"
-                  as="div"
-                >
-                  <button
-                    class="flex items-center gap-2 w-full text-left px-4 py-2 hover:bg-gray-100"
-                    @click.stop.prevent="sharePlan(plan.id, close)"
-                  >
-                    <font-awesome-icon
-                      :icon="copiedPlanId === plan.id ? ['fas', 'check'] : ['fas', 'share-nodes']"
-                      :class="copiedPlanId === plan.id ? 'text-green-600' : 'text-black'"
-                    />
-                  </button>
-                </MenuItem>
-              </div>
-              <div class="px-1 py-1">
-                <MenuItem>
-                  <button
-                    class="flex items-center gap-2 w-full text-left px-4 py-2 hover:bg-gray-100"
-                    @click="deletePlan(plan.id)"
-                  >
-                    <font-awesome-icon
-                      :icon="['fas', 'trash']"
-                    />
-                  </button>
-                </MenuItem>
-              </div>
-            </MenuItems>
-          </Menu>
+          <SavedPlansActionMenu
+            :plan="plan"
+            @delete="deletePlan"
+          />
         </li>
       </ul>
       <form
@@ -128,53 +85,11 @@
         >
           {{ plan.name }}
         </router-link>
-        <Menu
-          as="div"
-          class="relative inline-block text-left"
-        >
-          <div>
-            <MenuButton
-              class="p-2 hover:bg-gray-100 rounded-sm"
-            >
-              <font-awesome-icon
-                :icon="['fas', 'ellipsis']"
-                class="w-4 h-4"
-              />
-            </MenuButton>
-          </div>
-          <MenuItems
-            class="absolute right-0 mt-1 bg-white shadow-lg rounded-sm z-10"
-          >
-            <div class="px-1 py-1">
-              <MenuItem
-                v-slot="{ close }"
-                as="div"
-              >
-                <button
-                  class="flex items-center gap-2 w-full text-left px-4 py-2 hover:bg-gray-100"
-                  @click.stop.prevent="sharePlan(plan.id, close)"
-                >
-                  <font-awesome-icon
-                    :icon="copiedPlanId === plan.id ? ['fas', 'check'] : ['fas', 'share-nodes']"
-                    :class="copiedPlanId === plan.id ? 'text-green-600' : 'text-black'"
-                  />
-                </button>
-              </MenuItem>
-            </div>
-            <div class="px-1 py-1">
-              <MenuItem>
-                <button
-                  class="flex items-center gap-2 w-full text-left px-4 py-2 hover:bg-gray-100"
-                  @click="deletePlan(plan.id)"
-                >
-                  <font-awesome-icon
-                    :icon="['fas', 'trash']"
-                  />
-                </button>
-              </MenuItem>
-            </div>
-          </MenuItems>
-        </Menu>
+        <SavedPlansActionMenu
+          :plan="plan"
+          :menu-position-class="'right-0 mt-1'"
+          @delete="deletePlan"
+        />
       </li>
     </ul>
     <form
@@ -209,54 +124,33 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { defineComponent } from 'vue';
 import { useAuth } from "@clerk/vue";
 import { fetchSavedPlans, savePlan, deletePlan } from "../api/plan";
 import type { Plan } from "../types/Plan";
-import {
-  Popover,
-  PopoverButton,
-  PopoverPanel,
-  Menu,
-  MenuButton,
-  MenuItems,
-  MenuItem
-} from '@headlessui/vue';
+import SavedPlansActionMenu from "./SavedPlansActionMenu.vue";
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue';
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { library } from '@fortawesome/fontawesome-svg-core';
-import {
-  faTrash,
-  faShareNodes,
-  faCheck,
-  faChevronDown,
-  faEllipsis
-} from '@fortawesome/free-solid-svg-icons';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
 
-library.add(faTrash, faShareNodes, faCheck, faChevronDown, faEllipsis);
+library.add(faChevronDown);
 
 export default defineComponent({
   name: 'SavedPlans',
   components: {
+    SavedPlansActionMenu,
     Popover,
     PopoverButton,
     PopoverPanel,
-    // eslint-disable-next-line vue/no-reserved-component-names
-    Menu,
-    MenuButton,
-    // eslint-disable-next-line vue/no-reserved-component-names
-    MenuItems,
-    // eslint-disable-next-line vue/no-reserved-component-names
-    MenuItem,
     FontAwesomeIcon
   },
   setup() {
     const { getToken, isLoaded, isSignedIn } = useAuth();
-    const copiedPlanId = ref<string | null>(null);
     return {
       getToken,
       isLoaded,
       isSignedIn,
-      copiedPlanId,
     };
   },
   data() {
@@ -299,27 +193,6 @@ export default defineComponent({
       await deletePlan(planId, token)
       await this.getPlans();
     },
-    async sharePlan(planId: string, close: () => void) {
-      const plan = this.modulePlans.find(p => p.id === planId);
-      if (!plan || !plan.publicSlug) {
-        console.error('No public_slug found for this plan');
-        return;
-      }
-
-      const baseUrl = window.location.origin;
-      const shareUrl = `${baseUrl}/#/shared/${plan.publicSlug}`;
-      try {
-        await navigator.clipboard.writeText(shareUrl);
-        console.log('Link copied to clipboard:', shareUrl);
-        this.copiedPlanId = planId;
-        setTimeout(() => {
-          this.copiedPlanId = null;
-          close();
-        }, 1000);
-      } catch (err) {
-        console.error('Failed to copy link:', err);
-      }
-    },
   },
 })
 </script>
diff --git a/src/components/SavedPlansActionMenu.vue b/src/components/SavedPlansActionMenu.vue
new file mode 100644
index 00000000..ef01d945
--- /dev/null
+++ b/src/components/SavedPlansActionMenu.vue
@@ -0,0 +1,108 @@
+<template>
+  <Menu
+    as="div"
+    class="relative inline-block text-left"
+  >
+    <div>
+      <MenuButton class="p-2 hover:bg-gray-100 rounded-sm">
+        <font-awesome-icon
+          :icon="['fas', 'ellipsis']"
+        />
+      </MenuButton>
+    </div>
+    <MenuItems
+      class="absolute z-10 bg-white shadow-lg rounded-sm"
+      :class="menuPositionClass"
+    >
+      <div class="px-1 py-1">
+        <MenuItem
+          v-slot="{ close }"
+          as="div"
+        >
+          <button
+            class="flex items-center gap-2 w-full text-left px-4 py-2 hover:bg-gray-100"
+            @click.stop.prevent="sharePlan(close)"
+          >
+            <font-awesome-icon
+              :icon="planCopied ? ['fas', 'check'] : ['fas', 'share-nodes']"
+              :class="planCopied ? 'text-green-600' : 'text-black'"
+            />
+          </button>
+        </MenuItem>
+      </div>
+      <div class="px-1 py-1">
+        <MenuItem
+          as="div"
+        >
+          <button
+            class="flex items-center gap-2 w-full text-left px-4 py-2 hover:bg-gray-100"
+            @click="deletePlan()"
+          >
+            <font-awesome-icon :icon="['fas', 'trash']" />
+          </button>
+        </MenuItem>
+      </div>
+    </MenuItems>
+  </Menu>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import type { Plan } from '../types/Plan';
+import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue';
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { faTrash, faCheck, faEllipsis, faShareNodes } from '@fortawesome/free-solid-svg-icons';
+import { library } from "@fortawesome/fontawesome-svg-core";
+
+library.add(faTrash, faCheck, faEllipsis, faShareNodes);
+
+export default defineComponent({
+  name: 'SavedPlansActionMenu',
+  components: {
+    // eslint-disable-next-line vue/no-reserved-component-names
+    Menu,
+    MenuButton,
+    MenuItems,
+    MenuItem,
+    FontAwesomeIcon
+  },
+  props: {
+    plan: {
+      type: Object as () => Plan,
+      required: true
+    },
+    menuPositionClass: {
+      type: String,
+      default: 'top-0 left-full ml-1'
+    }
+  },
+  emits: ['delete'],
+  setup(props, { emit }) {
+    const deletePlan = async () => {
+      emit('delete', props.plan.id);
+    };
+    const planCopied = ref(false);
+    return {
+      deletePlan,
+      planCopied,
+    };
+  },
+  methods: {
+    async sharePlan(close: () => void) {
+      const baseUrl = window.location.origin;
+      const shareUrl = `${baseUrl}/#/shared/${this.$props.plan.publicSlug}`;
+      try {
+        await navigator.clipboard.writeText(shareUrl);
+        console.log('Link copied to clipboard:', shareUrl);
+        this.planCopied = true;
+        setTimeout(() => {
+          this.planCopied = false;
+          close();
+        }, 1000);
+      } catch (err) {
+        console.error('Failed to copy link:', err);
+      }
+    },
+  }
+});
+</script>

From d804a73aa73c17b0d12283d800f20bd77b93b4e0 Mon Sep 17 00:00:00 2001
From: pheonix8 <61965711+pheonix8@users.noreply.github.com>
Date: Wed, 28 May 2025 22:12:55 +0200
Subject: [PATCH 07/17] start with tests

---
 src/components/SavedPlansActionMenu.vue       |  8 ++-
 .../__tests__/SavedPlanActionMenu.cy.ts       | 62 +++++++++++++++++++
 2 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 src/components/__tests__/SavedPlanActionMenu.cy.ts

diff --git a/src/components/SavedPlansActionMenu.vue b/src/components/SavedPlansActionMenu.vue
index ef01d945..5337ce44 100644
--- a/src/components/SavedPlansActionMenu.vue
+++ b/src/components/SavedPlansActionMenu.vue
@@ -4,7 +4,10 @@
     class="relative inline-block text-left"
   >
     <div>
-      <MenuButton class="p-2 hover:bg-gray-100 rounded-sm">
+      <MenuButton
+        class="p-2 hover:bg-gray-100 rounded-sm"
+        data-cy="menu-button"
+      >
         <font-awesome-icon
           :icon="['fas', 'ellipsis']"
         />
@@ -21,9 +24,11 @@
         >
           <button
             class="flex items-center gap-2 w-full text-left px-4 py-2 hover:bg-gray-100"
+            data-cy="share-button"
             @click.stop.prevent="sharePlan(close)"
           >
             <font-awesome-icon
+              data-cy="share-icon"
               :icon="planCopied ? ['fas', 'check'] : ['fas', 'share-nodes']"
               :class="planCopied ? 'text-green-600' : 'text-black'"
             />
@@ -36,6 +41,7 @@
         >
           <button
             class="flex items-center gap-2 w-full text-left px-4 py-2 hover:bg-gray-100"
+            data-cy="delete-button"
             @click="deletePlan()"
           >
             <font-awesome-icon :icon="['fas', 'trash']" />
diff --git a/src/components/__tests__/SavedPlanActionMenu.cy.ts b/src/components/__tests__/SavedPlanActionMenu.cy.ts
new file mode 100644
index 00000000..2352a4df
--- /dev/null
+++ b/src/components/__tests__/SavedPlanActionMenu.cy.ts
@@ -0,0 +1,62 @@
+import { mount } from 'cypress/vue';
+import SavedPlansActionMenu from '../SavedPlansActionMenu.vue';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import {
+  faTrash,
+  faShareNodes,
+  faCheck,
+  faEllipsis
+} from '@fortawesome/free-solid-svg-icons';
+
+library.add(faTrash, faShareNodes, faCheck, faEllipsis);
+
+describe('SavedPlansActionMenu.vue', () => {
+  const fakePlan = {
+    id: 'plan-1',
+    name: 'Test Plan',
+    publicSlug: 'abc123',
+    content: '/plan/1'
+  };
+
+  it('should render menu and trigger share and delete actions', () => {
+    const onDelete = cy.spy().as('onDelete');
+
+    mount(SavedPlansActionMenu, {
+      props: {
+        plan: fakePlan,
+        menuPositionClass: 'top-0 left-0',
+        onDelete
+      },
+      global: {
+        components: {
+          FontAwesomeIcon
+        }
+      }
+    });
+
+    // Open the menu
+    cy.get('[data-cy=menu-button]').click();
+
+    // Click the share button
+    cy.get('[data-cy=share-button]').click();
+
+    // Check icon changes to checkmark
+    cy.get('[data-cy=share-icon]')
+      .should('have.class', 'text-green-600');
+
+    // Wait for the menu to close automatically
+    cy.wait(1200);
+
+    // Open again
+    cy.get('[data-cy=menu-button]').click();
+
+    cy.get('[data-cy=share-icon]')
+      .should('have.class', 'text-black');
+
+    // Click the delete button
+    cy.get('[data-cy=delete-button]').click();
+
+    cy.get('@onDelete').should('have.been.calledWith', 'plan-1');
+  });
+});

From 3d9145d0d4d07ee2757df6dcb906b1a6e8961b50 Mon Sep 17 00:00:00 2001
From: pheonix8 <61965711+pheonix8@users.noreply.github.com>
Date: Mon, 2 Jun 2025 11:12:35 +0200
Subject: [PATCH 08/17] fix dark mode

---
 src/components/SavedPlansActionMenu.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/SavedPlansActionMenu.vue b/src/components/SavedPlansActionMenu.vue
index 5337ce44..03c098e5 100644
--- a/src/components/SavedPlansActionMenu.vue
+++ b/src/components/SavedPlansActionMenu.vue
@@ -5,7 +5,7 @@
   >
     <div>
       <MenuButton
-        class="p-2 hover:bg-gray-100 rounded-sm"
+        class="p-2 hover:bg-gray-100 dark:bg-zinc-800 dark:hover:bg-zinc-700 rounded-sm"
         data-cy="menu-button"
       >
         <font-awesome-icon
@@ -14,7 +14,7 @@
       </MenuButton>
     </div>
     <MenuItems
-      class="absolute z-10 bg-white shadow-lg rounded-sm"
+      class="absolute z-10 bg-white dark:bg-zinc-800 shadow-lg rounded-sm"
       :class="menuPositionClass"
     >
       <div class="px-1 py-1">
@@ -23,14 +23,17 @@
           as="div"
         >
           <button
-            class="flex items-center gap-2 w-full text-left px-4 py-2 hover:bg-gray-100"
+            class="
+             flex items-center gap-2 w-full text-left px-4 py-2
+            hover:bg-gray-100 dark:bg-zinc-800 dark:hover:bg-zinc-700
+            "
             data-cy="share-button"
             @click.stop.prevent="sharePlan(close)"
           >
             <font-awesome-icon
               data-cy="share-icon"
               :icon="planCopied ? ['fas', 'check'] : ['fas', 'share-nodes']"
-              :class="planCopied ? 'text-green-600' : 'text-black'"
+              :class="planCopied ? 'text-green-600' : 'text-black dark:text-white'"
             />
           </button>
         </MenuItem>
@@ -40,7 +43,10 @@
           as="div"
         >
           <button
-            class="flex items-center gap-2 w-full text-left px-4 py-2 hover:bg-gray-100"
+            class="
+              flex items-center gap-2 w-full text-left px-4 py-2
+              hover:bg-gray-100 dark:bg-zinc-800 dark:hover:bg-zinc-700
+            "
             data-cy="delete-button"
             @click="deletePlan()"
           >

From e73809d74c6483f4eec11bbfcd455fd62d830e61 Mon Sep 17 00:00:00 2001
From: pheonix8 <61965711+pheonix8@users.noreply.github.com>
Date: Mon, 2 Jun 2025 11:28:10 +0200
Subject: [PATCH 09/17] work on tests

---
 .../__tests__/SavedPlanActionMenu.cy.ts       | 32 ++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/components/__tests__/SavedPlanActionMenu.cy.ts b/src/components/__tests__/SavedPlanActionMenu.cy.ts
index 2352a4df..7ef44386 100644
--- a/src/components/__tests__/SavedPlanActionMenu.cy.ts
+++ b/src/components/__tests__/SavedPlanActionMenu.cy.ts
@@ -1,4 +1,5 @@
 import { mount } from 'cypress/vue';
+
 import SavedPlansActionMenu from '../SavedPlansActionMenu.vue';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
@@ -11,22 +12,22 @@ import {
 
 library.add(faTrash, faShareNodes, faCheck, faEllipsis);
 
-describe('SavedPlansActionMenu.vue', () => {
-  const fakePlan = {
-    id: 'plan-1',
-    name: 'Test Plan',
-    publicSlug: 'abc123',
-    content: '/plan/1'
-  };
+describe('SavedPlan Action Menu Component', () => {
+  beforeEach(() => {
+    const fakePlan = {
+      id: 'plan-1',
+      name: 'Test Plan',
+      publicSlug: 'abc123',
+      content: '/plan/1'
+    };
 
-  it('should render menu and trigger share and delete actions', () => {
     const onDelete = cy.spy().as('onDelete');
 
     mount(SavedPlansActionMenu, {
       props: {
         plan: fakePlan,
         menuPositionClass: 'top-0 left-0',
-        onDelete
+        onDelete: onDelete
       },
       global: {
         components: {
@@ -35,26 +36,27 @@ describe('SavedPlansActionMenu.vue', () => {
       }
     });
 
-    // Open the menu
+  });
+
+
+  it('Test Menu Items', () => {
+
+
+
     cy.get('[data-cy=menu-button]').click();
 
-    // Click the share button
     cy.get('[data-cy=share-button]').click();
 
-    // Check icon changes to checkmark
     cy.get('[data-cy=share-icon]')
       .should('have.class', 'text-green-600');
 
-    // Wait for the menu to close automatically
     cy.wait(1200);
 
-    // Open again
     cy.get('[data-cy=menu-button]').click();
 
     cy.get('[data-cy=share-icon]')
       .should('have.class', 'text-black');
 
-    // Click the delete button
     cy.get('[data-cy=delete-button]').click();
 
     cy.get('@onDelete').should('have.been.calledWith', 'plan-1');

From 7c2aa9063cb744c944a096d243fb24be6732d204 Mon Sep 17 00:00:00 2001
From: pheonix8 <61965711+pheonix8@users.noreply.github.com>
Date: Tue, 3 Jun 2025 13:22:35 +0200
Subject: [PATCH 10/17] merged with main and added test

---
 cypress/e2e/plan-sharing/sharingOfPlan.cy.ts  | 46 +++++++++++++++++++
 cypress/e2e/plans/plans.cy.ts                 | 11 +++--
 src/components/SavedPlansActionMenu.vue       |  8 ++--
 .../__tests__/SavedPlanActionMenu.cy.ts       | 13 +++---
 4 files changed, 63 insertions(+), 15 deletions(-)
 create mode 100644 cypress/e2e/plan-sharing/sharingOfPlan.cy.ts

diff --git a/cypress/e2e/plan-sharing/sharingOfPlan.cy.ts b/cypress/e2e/plan-sharing/sharingOfPlan.cy.ts
new file mode 100644
index 00000000..49ff405a
--- /dev/null
+++ b/cypress/e2e/plan-sharing/sharingOfPlan.cy.ts
@@ -0,0 +1,46 @@
+import { setupClerkTestingToken } from "@clerk/testing/cypress";
+
+describe('sharing of plans', () => {
+  it('share and open plan', () => {
+    const expectedModules = [
+    "Computer Grafik"
+  ]
+
+  setupClerkTestingToken();
+  cy.visit('/',{
+    onBeforeLoad(win) {
+      win.navigator.clipboard.writeText = cy.stub().as('writeText');
+    }
+  });
+
+  cy.clerkSignIn({ strategy: 'email_code', identifier: 'user1+clerk_test@lost.university' });
+
+  cy.get('[data-cy="ModuleSearch-OpenButton"]').first().click();
+  cy.get('[data-cy="ModuleSearch-Input"]').type(expectedModules[0]);
+  cy.get('[data-cy="ModuleSearch-ModuleList"]').first().click();
+
+  cy.get('[data-cy="SavedPlans-Dropdown-Button"]').first().click();
+  cy.get('[data-cy="SavePlan-Button"]').first().click();
+  cy.get('[data-cy="SavePlan-Name"]').first().type("share plan");
+  cy.get('[data-cy="SavePlan-Submit"]').first().click();
+
+  cy.get('[data-cy=SavedPlansActionMenu-Menu-Button]').first().click();
+
+  cy.get('[data-cy="semester-container"]').screenshot('plans.cy.ts/show-action-menu-options');
+
+  cy.get('[data-cy=SavedPlansActionMenu-Share-Button]').first().click();
+
+  cy.get('@writeText')
+    .should('have.been.calledOnce')
+    .then((writeText: any) => {
+      const copiedUrl = writeText.getCall(0).args[0];
+      const relativeUrl = copiedUrl.substring(copiedUrl.indexOf('/#'));
+      cy.visit(relativeUrl);
+    });
+
+  cy.get('[data-cy="module-name"]').should('have.length', expectedModules.length);
+
+  cy.get('[data-cy="semester-container"]').screenshot('plans.cy.ts/open-shared-plan');
+
+  });
+})
diff --git a/cypress/e2e/plans/plans.cy.ts b/cypress/e2e/plans/plans.cy.ts
index 9b115ad7..c8763dcb 100644
--- a/cypress/e2e/plans/plans.cy.ts
+++ b/cypress/e2e/plans/plans.cy.ts
@@ -12,7 +12,8 @@ describe('multiple plans', () => {
       if ($body.find('[data-cy=SavedPlans-List-Item]').length > 0) {
         cy.get('[data-cy=SavedPlans-List-Item]').each(($el) => {
           cy.wrap($el).within(() => {
-            cy.get('[data-cy=SavedPlans-Delete-Button]').click({ force: true });
+            cy.get('[data-cy=SavedPlansActionMenu-Menu-Button]').click({ force: true });
+            cy.get('[data-cy=SavedPlansActionMenu-Delete-Button]').click({ force: true });
           });
         });
       }
@@ -81,8 +82,8 @@ describe('multiple plans', () => {
 
     cy.get("[data-cy=SavedPlans-List-Item").filter(`:contains("Test Plan: To Delete")`)
       .first().within(() => {
-        cy.get('[data-cy=SavedPlans-Delete-Button]')
-          .first().click()
+        cy.get('[data-cy=SavedPlansActionMenu-Menu-Button]').first().click()
+        cy.get('[data-cy=SavedPlansActionMenu-Delete-Button]').first().click()
       });
 
     cy.contains('[data-cy="SavedPlans-List-Item"]', "Test Plan: To Delete").should('not.exist');
@@ -110,9 +111,9 @@ describe('multiple plans', () => {
         cy.get('[data-cy="SavedPlans-Bookmark-Button"]')
           .find('svg')
           .should('have.attr', 'data-prefix', 'fas');
-      });;
+      });
 
     cy.get('[data-cy="semester-container"]').screenshot('plans.cy.ts/plan-bookmarked');
-  
+
   });
 })
diff --git a/src/components/SavedPlansActionMenu.vue b/src/components/SavedPlansActionMenu.vue
index 03c098e5..10c9c06e 100644
--- a/src/components/SavedPlansActionMenu.vue
+++ b/src/components/SavedPlansActionMenu.vue
@@ -6,7 +6,7 @@
     <div>
       <MenuButton
         class="p-2 hover:bg-gray-100 dark:bg-zinc-800 dark:hover:bg-zinc-700 rounded-sm"
-        data-cy="menu-button"
+        data-cy="SavedPlansActionMenu-Menu-Button"
       >
         <font-awesome-icon
           :icon="['fas', 'ellipsis']"
@@ -27,11 +27,11 @@
              flex items-center gap-2 w-full text-left px-4 py-2
             hover:bg-gray-100 dark:bg-zinc-800 dark:hover:bg-zinc-700
             "
-            data-cy="share-button"
+            data-cy="SavedPlansActionMenu-Share-Button"
             @click.stop.prevent="sharePlan(close)"
           >
             <font-awesome-icon
-              data-cy="share-icon"
+              data-cy="SavedPlansActionMenu-Share-Icon"
               :icon="planCopied ? ['fas', 'check'] : ['fas', 'share-nodes']"
               :class="planCopied ? 'text-green-600' : 'text-black dark:text-white'"
             />
@@ -47,7 +47,7 @@
               flex items-center gap-2 w-full text-left px-4 py-2
               hover:bg-gray-100 dark:bg-zinc-800 dark:hover:bg-zinc-700
             "
-            data-cy="delete-button"
+            data-cy="SavedPlansActionMenu-Delete-Button"
             @click="deletePlan()"
           >
             <font-awesome-icon :icon="['fas', 'trash']" />
diff --git a/src/components/__tests__/SavedPlanActionMenu.cy.ts b/src/components/__tests__/SavedPlanActionMenu.cy.ts
index 7ef44386..06fbcf0a 100644
--- a/src/components/__tests__/SavedPlanActionMenu.cy.ts
+++ b/src/components/__tests__/SavedPlanActionMenu.cy.ts
@@ -14,6 +14,7 @@ library.add(faTrash, faShareNodes, faCheck, faEllipsis);
 
 describe('SavedPlan Action Menu Component', () => {
   beforeEach(() => {
+
     const fakePlan = {
       id: 'plan-1',
       name: 'Test Plan',
@@ -43,21 +44,21 @@ describe('SavedPlan Action Menu Component', () => {
 
 
 
-    cy.get('[data-cy=menu-button]').click();
+    cy.get('[data-cy=SavedPlansActionMenu-Menu-Button]').click();
 
-    cy.get('[data-cy=share-button]').click();
+    cy.get('[data-cy=SavedPlansActionMenu-Share-Button]').click();
 
-    cy.get('[data-cy=share-icon]')
+    cy.get('[data-cy=SavedPlansActionMenu-Share-Icon]')
       .should('have.class', 'text-green-600');
 
     cy.wait(1200);
 
-    cy.get('[data-cy=menu-button]').click();
+    cy.get('[data-cy=SavedPlansActionMenu-Menu-Button]').click();
 
-    cy.get('[data-cy=share-icon]')
+    cy.get('[data-cy=SavedPlansActionMenu-Share-Icon]')
       .should('have.class', 'text-black');
 
-    cy.get('[data-cy=delete-button]').click();
+    cy.get('[data-cy=SavedPlansActionMenu-Delete-Button]').click();
 
     cy.get('@onDelete').should('have.been.calledWith', 'plan-1');
   });

From c11f263ba0f4b35417a27eecae5f9e48572d7394 Mon Sep 17 00:00:00 2001
From: pheonix8 <61965711+pheonix8@users.noreply.github.com>
Date: Tue, 3 Jun 2025 14:31:06 +0200
Subject: [PATCH 11/17] update package-lock.json

---
 package-lock.json | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c970f158..06d90846 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,7 +34,6 @@
         "@vue/tsconfig": "^0.4.0",
         "autoprefixer": "^10.4.17",
         "cypress": "^13.14.2",
-        "cypress-real-events": "^1.14.0",
         "eslint": "^8.44.0",
         "eslint-plugin-vue": "^9.15.1",
         "typescript": "^5.1.6",
@@ -4624,16 +4623,6 @@
         "node": "^16.0.0 || ^18.0.0 || >=20.0.0"
       }
     },
-    "node_modules/cypress-real-events": {
-      "version": "1.14.0",
-      "resolved": "https://registry.npmjs.org/cypress-real-events/-/cypress-real-events-1.14.0.tgz",
-      "integrity": "sha512-XmI8y3OZLh6cjRroPalzzS++iv+pGCaD9G9kfIbtspgv7GVsDt30dkZvSXfgZb4rAN+3pOkMVB7e0j4oXydW7Q==",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "cypress": "^4.x || ^5.x || ^6.x || ^7.x || ^8.x || ^9.x || ^10.x || ^11.x || ^12.x || ^13.x || ^14.x"
-      }
-    },
     "node_modules/cypress/node_modules/commander": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",

From 535b26a3c4dc87e66d8ba32815a81436a6817f6f Mon Sep 17 00:00:00 2001
From: pheonix8 <61965711+pheonix8@users.noreply.github.com>
Date: Tue, 3 Jun 2025 14:49:54 +0200
Subject: [PATCH 12/17] update component test

---
 src/components/__tests__/SavedPlanActionMenu.cy.ts | 8 --------
 src/views/Home.vue                                 | 2 +-
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/components/__tests__/SavedPlanActionMenu.cy.ts b/src/components/__tests__/SavedPlanActionMenu.cy.ts
index 06fbcf0a..63d60c1e 100644
--- a/src/components/__tests__/SavedPlanActionMenu.cy.ts
+++ b/src/components/__tests__/SavedPlanActionMenu.cy.ts
@@ -41,18 +41,10 @@ describe('SavedPlan Action Menu Component', () => {
 
 
   it('Test Menu Items', () => {
-
-
-
     cy.get('[data-cy=SavedPlansActionMenu-Menu-Button]').click();
 
     cy.get('[data-cy=SavedPlansActionMenu-Share-Button]').click();
 
-    cy.get('[data-cy=SavedPlansActionMenu-Share-Icon]')
-      .should('have.class', 'text-green-600');
-
-    cy.wait(1200);
-
     cy.get('[data-cy=SavedPlansActionMenu-Menu-Button]').click();
 
     cy.get('[data-cy=SavedPlansActionMenu-Share-Icon]')
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 5872713e..3fa7d12b 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -17,7 +17,7 @@
   </div>
 
   <div class="flex justify-end mx-2 relative mb-10">
-    <div class="flex items-start w-full absolute top-0 right-0 z-40">
+    <div class="flex items-start w-full absolute top-0 right-0">
       <SwitchGroup>
         <div class="flex items-center ml-auto sm:h-8.5">
           <SwitchLabel class="mr-4">

From 9458cc3356a3f5efa2a540b30fab85bf6c29ece3 Mon Sep 17 00:00:00 2001
From: pheonix8 <61965711+pheonix8@users.noreply.github.com>
Date: Tue, 3 Jun 2025 15:11:12 +0200
Subject: [PATCH 13/17] try fixing tests

---
 src/components/SavedPlansActionMenu.vue            |  2 +-
 src/components/__tests__/SavedPlanActionMenu.cy.ts | 11 +++++++++--
 src/views/Home.vue                                 |  2 +-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/SavedPlansActionMenu.vue b/src/components/SavedPlansActionMenu.vue
index 10c9c06e..6ffb30f6 100644
--- a/src/components/SavedPlansActionMenu.vue
+++ b/src/components/SavedPlansActionMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <Menu
     as="div"
-    class="relative inline-block text-left"
+    class="relative inline-block text-left z-50"
   >
     <div>
       <MenuButton
diff --git a/src/components/__tests__/SavedPlanActionMenu.cy.ts b/src/components/__tests__/SavedPlanActionMenu.cy.ts
index 63d60c1e..da5287a5 100644
--- a/src/components/__tests__/SavedPlanActionMenu.cy.ts
+++ b/src/components/__tests__/SavedPlanActionMenu.cy.ts
@@ -15,6 +15,10 @@ library.add(faTrash, faShareNodes, faCheck, faEllipsis);
 describe('SavedPlan Action Menu Component', () => {
   beforeEach(() => {
 
+    cy.window().then((win) => {
+      win.navigator.clipboard.writeText = cy.stub().as('writeText');
+    });
+
     const fakePlan = {
       id: 'plan-1',
       name: 'Test Plan',
@@ -36,15 +40,18 @@ describe('SavedPlan Action Menu Component', () => {
         }
       }
     });
-
   });
 
-
   it('Test Menu Items', () => {
     cy.get('[data-cy=SavedPlansActionMenu-Menu-Button]').click();
 
     cy.get('[data-cy=SavedPlansActionMenu-Share-Button]').click();
 
+    cy.get('[data-cy=SavedPlansActionMenu-Share-Icon]')
+      .should('have.class', 'text-green-600');
+
+    cy.wait(1200);
+
     cy.get('[data-cy=SavedPlansActionMenu-Menu-Button]').click();
 
     cy.get('[data-cy=SavedPlansActionMenu-Share-Icon]')
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 3fa7d12b..5872713e 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -17,7 +17,7 @@
   </div>
 
   <div class="flex justify-end mx-2 relative mb-10">
-    <div class="flex items-start w-full absolute top-0 right-0">
+    <div class="flex items-start w-full absolute top-0 right-0 z-40">
       <SwitchGroup>
         <div class="flex items-center ml-auto sm:h-8.5">
           <SwitchLabel class="mr-4">

From 297d7751dac288d9ddfaacacff5d9c8584ee0bd3 Mon Sep 17 00:00:00 2001
From: pheonix8 <61965711+pheonix8@users.noreply.github.com>
Date: Tue, 3 Jun 2025 15:27:00 +0200
Subject: [PATCH 14/17] fixing firefox test

---
 cypress/e2e/plan-sharing/sharingOfPlan.cy.ts     | 11 ++++++++++-
 .../__tests__/SavedPlanActionMenu.cy.ts          | 16 ++++++++++++----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/cypress/e2e/plan-sharing/sharingOfPlan.cy.ts b/cypress/e2e/plan-sharing/sharingOfPlan.cy.ts
index 49ff405a..08769cda 100644
--- a/cypress/e2e/plan-sharing/sharingOfPlan.cy.ts
+++ b/cypress/e2e/plan-sharing/sharingOfPlan.cy.ts
@@ -9,7 +9,16 @@ describe('sharing of plans', () => {
   setupClerkTestingToken();
   cy.visit('/',{
     onBeforeLoad(win) {
-      win.navigator.clipboard.writeText = cy.stub().as('writeText');
+      if (!win.navigator.clipboard) {
+        Object.defineProperty(win.navigator, 'clipboard', {
+          value: {
+            writeText: cy.stub().as('writeTextStub').resolves()
+          },
+          writable: false
+        });
+      } else {
+        cy.stub(win.navigator.clipboard, 'writeText').as('writeTextStub').resolves();
+      }
     }
   });
 
diff --git a/src/components/__tests__/SavedPlanActionMenu.cy.ts b/src/components/__tests__/SavedPlanActionMenu.cy.ts
index da5287a5..89b77d0b 100644
--- a/src/components/__tests__/SavedPlanActionMenu.cy.ts
+++ b/src/components/__tests__/SavedPlanActionMenu.cy.ts
@@ -14,10 +14,18 @@ library.add(faTrash, faShareNodes, faCheck, faEllipsis);
 
 describe('SavedPlan Action Menu Component', () => {
   beforeEach(() => {
-
-    cy.window().then((win) => {
-      win.navigator.clipboard.writeText = cy.stub().as('writeText');
-    });
+  cy.window().then((win) => {
+    if (!win.navigator.clipboard) {
+      Object.defineProperty(win.navigator, 'clipboard', {
+        value: {
+          writeText: cy.stub().as('writeTextStub').resolves()
+        },
+        writable: false
+      });
+    } else {
+      cy.stub(win.navigator.clipboard, 'writeText').as('writeTextStub').resolves();
+    }
+  });
 
     const fakePlan = {
       id: 'plan-1',

From a6e320bd8d23a1b0339611dc1d668fbe8bd6218b Mon Sep 17 00:00:00 2001
From: pheonix8 <61965711+pheonix8@users.noreply.github.com>
Date: Tue, 3 Jun 2025 15:36:49 +0200
Subject: [PATCH 15/17] fixing typo

---
 cypress/e2e/plan-sharing/sharingOfPlan.cy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/e2e/plan-sharing/sharingOfPlan.cy.ts b/cypress/e2e/plan-sharing/sharingOfPlan.cy.ts
index 08769cda..04fdafa1 100644
--- a/cypress/e2e/plan-sharing/sharingOfPlan.cy.ts
+++ b/cypress/e2e/plan-sharing/sharingOfPlan.cy.ts
@@ -39,7 +39,7 @@ describe('sharing of plans', () => {
 
   cy.get('[data-cy=SavedPlansActionMenu-Share-Button]').first().click();
 
-  cy.get('@writeText')
+  cy.get('@writeTextStub')
     .should('have.been.calledOnce')
     .then((writeText: any) => {
       const copiedUrl = writeText.getCall(0).args[0];

From 6670d0e7c72c7b55729270fb4dab419159982cf1 Mon Sep 17 00:00:00 2001
From: pheonix8 <61965711+pheonix8@users.noreply.github.com>
Date: Wed, 4 Jun 2025 00:19:44 +0200
Subject: [PATCH 16/17] implement review

---
 cypress/e2e/plan-sharing/sharingOfPlan.cy.ts  |  5 +--
 src/api/plan.ts                               | 17 ++++++++-
 src/components/SavedPlansActionMenu.vue       | 30 +++++++---------
 .../__tests__/SavedPlanActionMenu.cy.ts       |  2 --
 src/views/SharingRedirect.vue                 | 35 +++++--------------
 5 files changed, 41 insertions(+), 48 deletions(-)

diff --git a/cypress/e2e/plan-sharing/sharingOfPlan.cy.ts b/cypress/e2e/plan-sharing/sharingOfPlan.cy.ts
index 04fdafa1..1c51cdd2 100644
--- a/cypress/e2e/plan-sharing/sharingOfPlan.cy.ts
+++ b/cypress/e2e/plan-sharing/sharingOfPlan.cy.ts
@@ -35,7 +35,7 @@ describe('sharing of plans', () => {
 
   cy.get('[data-cy=SavedPlansActionMenu-Menu-Button]').first().click();
 
-  cy.get('[data-cy="semester-container"]').screenshot('plans.cy.ts/show-action-menu-options');
+  cy.get('[data-cy="semester-container"]').screenshot('sharingOfPlan.cy.ts/show-action-menu-options');
 
   cy.get('[data-cy=SavedPlansActionMenu-Share-Button]').first().click();
 
@@ -49,7 +49,8 @@ describe('sharing of plans', () => {
 
   cy.get('[data-cy="module-name"]').should('have.length', expectedModules.length);
 
-  cy.get('[data-cy="semester-container"]').screenshot('plans.cy.ts/open-shared-plan');
+  cy.get('[data-cy="semester-container"]').screenshot('sharingOfPlan.cy.ts/open-shared-plan');
 
+  cy.get('[data-cy=SavedPlansActionMenu-Delete-Button]').click({ force: true });
   });
 })
diff --git a/src/api/plan.ts b/src/api/plan.ts
index 76821899..9d7b120f 100644
--- a/src/api/plan.ts
+++ b/src/api/plan.ts
@@ -60,4 +60,19 @@ const bookmarkPlan = async (planId: string, token: string): Promise<void> => {
   }
 }
 
-export { fetchSavedPlans, savePlan, deletePlan, bookmarkPlan };
+const fetchSharedPlan = async (slug: string|string[]): Promise<string> => {
+  try {
+    const response = await fetch(`/api/plans/shared/${slug}`);
+    const data = await response.json();
+    if (data.content) {
+      return `/plan/${data.content}`
+    } else {
+      return `/`
+    }
+  } catch (err) {
+    console.error('Sharing link error:', err);
+    return `/`
+  }
+}
+
+export { fetchSavedPlans, savePlan, deletePlan, bookmarkPlan, fetchSharedPlan };
diff --git a/src/components/SavedPlansActionMenu.vue b/src/components/SavedPlansActionMenu.vue
index 6ffb30f6..1014c356 100644
--- a/src/components/SavedPlansActionMenu.vue
+++ b/src/components/SavedPlansActionMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <Menu
+  <HeadlessUIMenu
     as="div"
     class="relative inline-block text-left z-50"
   >
@@ -48,20 +48,20 @@
               hover:bg-gray-100 dark:bg-zinc-800 dark:hover:bg-zinc-700
             "
             data-cy="SavedPlansActionMenu-Delete-Button"
-            @click="deletePlan()"
+            @click="deletePlan"
           >
             <font-awesome-icon :icon="['fas', 'trash']" />
           </button>
         </MenuItem>
       </div>
     </MenuItems>
-  </Menu>
+  </HeadlessUIMenu>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { defineComponent } from 'vue';
 import type { Plan } from '../types/Plan';
-import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue';
+import { Menu as HeadlessUIMenu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue';
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { faTrash, faCheck, faEllipsis, faShareNodes } from '@fortawesome/free-solid-svg-icons';
 import { library } from "@fortawesome/fontawesome-svg-core";
@@ -71,8 +71,7 @@ library.add(faTrash, faCheck, faEllipsis, faShareNodes);
 export default defineComponent({
   name: 'SavedPlansActionMenu',
   components: {
-    // eslint-disable-next-line vue/no-reserved-component-names
-    Menu,
+    HeadlessUIMenu,
     MenuButton,
     MenuItems,
     MenuItem,
@@ -89,23 +88,20 @@ export default defineComponent({
     }
   },
   emits: ['delete'],
-  setup(props, { emit }) {
-    const deletePlan = async () => {
-      emit('delete', props.plan.id);
-    };
-    const planCopied = ref(false);
+  data() {
     return {
-      deletePlan,
-      planCopied,
-    };
+      planCopied: false
+    }
   },
   methods: {
+    async deletePlan() {
+      this.$emit('delete', this.plan.id);
+    },
     async sharePlan(close: () => void) {
       const baseUrl = window.location.origin;
-      const shareUrl = `${baseUrl}/#/shared/${this.$props.plan.publicSlug}`;
+      const shareUrl = `${baseUrl}/#/shared/${this.plan.publicSlug}`;
       try {
         await navigator.clipboard.writeText(shareUrl);
-        console.log('Link copied to clipboard:', shareUrl);
         this.planCopied = true;
         setTimeout(() => {
           this.planCopied = false;
diff --git a/src/components/__tests__/SavedPlanActionMenu.cy.ts b/src/components/__tests__/SavedPlanActionMenu.cy.ts
index 89b77d0b..aeba61f3 100644
--- a/src/components/__tests__/SavedPlanActionMenu.cy.ts
+++ b/src/components/__tests__/SavedPlanActionMenu.cy.ts
@@ -58,8 +58,6 @@ describe('SavedPlan Action Menu Component', () => {
     cy.get('[data-cy=SavedPlansActionMenu-Share-Icon]')
       .should('have.class', 'text-green-600');
 
-    cy.wait(1200);
-
     cy.get('[data-cy=SavedPlansActionMenu-Menu-Button]').click();
 
     cy.get('[data-cy=SavedPlansActionMenu-Share-Icon]')
diff --git a/src/views/SharingRedirect.vue b/src/views/SharingRedirect.vue
index 0f31be4d..5ce4e5c6 100644
--- a/src/views/SharingRedirect.vue
+++ b/src/views/SharingRedirect.vue
@@ -2,30 +2,13 @@
   <div>Loading...</div>
 </template>
 
-<script setup>
-import { onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-
-const route = useRoute()
-const router = useRouter()
-
-onMounted(async () => {
-  const slug = route.params.slug
-
-  try {
-    const response = await fetch(`/api/plans/shared/${slug}`);
-    const data = await response.json();
-
-
-    if (data.content) {
-      await router.replace({ path: `/plan/${data.content}` })
-    } else {
-      // fallback for invalid slugs
-      await router.replace({ path: '/' })
-    }
-  } catch (err) {
-    console.error('Sharing link error:', err)
-    await router.replace({ path: '/' }) // fallback on error
-  }
-})
+<script lang="ts">
+import { fetchSharedPlan } from "../api/plan";
+
+export default {
+  async mounted() {
+    const path = await fetchSharedPlan(this.$route.params.slug);
+    await this.$router.replace({ path: path });
+  },
+};
 </script>

From c906df10f9c450de920654dd8abfd9a5f9421ccb Mon Sep 17 00:00:00 2001
From: pheonix8 <61965711+pheonix8@users.noreply.github.com>
Date: Wed, 4 Jun 2025 23:16:08 +0200
Subject: [PATCH 17/17] increase timeout

---
 cypress.config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/cypress.config.ts b/cypress.config.ts
index 6495600c..fc4310cc 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -2,6 +2,7 @@ import { clerkSetup } from '@clerk/testing/cypress'
 import { defineConfig } from "cypress";
 
 export default defineConfig({
+  defaultCommandTimeout: 15000,
   e2e: {
     baseUrl: "http://localhost:5173",
     setupNodeEvents(on, config) {